/* The customer admin app: only what the oneSALES stylesheets (frontend/css) do not already have. */
.app{grid-template-columns:200px 1fr}
.ad-grow{flex:0}
.sb-search input{width:100%;padding:7px 12px;border-radius:5px;border:0}
.ad-me{color:#fff;font-size:13px;opacity:.85}
.btn.ad-light{color:#fff}.btn.ad-light:hover{background:rgba(255,255,255,.12)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}a.btn:hover{text-decoration:none}
.btn,input,select,textarea{font-family:var(--sans)}
.filterbar .btn{justify-self:start}
.nav a{display:block;padding:8px 10px;border-radius:5px;color:var(--ink-2);text-decoration:none}
.nav a:hover{background:var(--panel-2);color:var(--ink)}
.nav a.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.ok-bar{background:var(--accent-soft);color:var(--accent);border-radius:5px;padding:8px 12px;font-size:12.5px;margin-bottom:14px}
.stack{display:flex;flex-direction:column;gap:10px}.stack>.btn{align-self:flex-start}
.ad-sub{display:block;font-size:11.5px;color:var(--ink-3)}
.ad-fit{font-size:15px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle}
.ad-dot.good{background:var(--pos)}.ad-dot.bad{background:var(--neg)}
.ad-tabs a{padding:8px 12px;border-bottom:2px solid transparent;color:var(--ink-2);text-decoration:none}
.ad-tabs a.on{border-bottom-color:var(--accent);color:var(--ink);font-weight:600}
.ad-tabs .count.new{font-family:var(--mono);font-size:11px;background:var(--accent);color:#fff;padding:1px 6px;border-radius:10px}
.ad-row-act{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.ad-inline{display:flex;gap:6px}.ad-inline input{width:150px;padding:4px 8px}
.ad-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;margin-bottom:12px}
.ad-checks .chk{display:flex;gap:6px;align-items:center;font-size:13px}
.ad-narrow{max-width:460px}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
/* proformas per month: one bar each, current-period colour */
.ad-bars{display:flex;align-items:flex-end;gap:6px;height:160px;padding-top:18px}
.ad-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.ad-bar i{display:block;width:100%;max-width:34px;background:var(--s1);border-radius:3px 3px 0 0;min-height:2px}
.ad-bar small{font-size:11px;color:var(--tick);margin-top:4px}
.ad-bar-v{font-family:var(--mono);font-size:11px;color:var(--ink-2)}
/* sign-in: css/login.css (oneSALES); only the QR code here */
.ad-qr{width:180px;height:180px;background:#fff;border-radius:6px;margin:4px 0 0}
.login-form+form{margin-top:8px}.login-form+form .login-btn{width:100%}
/* a printed invoice */
.ad-invoice{max-width:760px;margin:32px auto;padding:0 16px;background:#fff;color:#222}
.ad-inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0;font-size:13px}
.ad-invoice table{width:100%;border-collapse:collapse}.ad-invoice th,.ad-invoice td{border-bottom:1px solid #ddd;padding:8px;text-align:left}
.ad-invoice .num{text-align:right}
/* phone: the menu is a row of links under the top bar (no slide-out menu: there is no script) */
@media (max-width:900px){.app{grid-template-columns:1fr;grid-template-rows:auto auto 1fr}.rail{position:static;transform:none;width:auto;height:auto;box-shadow:none;padding:8px 12px;border-right:0;border-bottom:1px solid var(--line)}.nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px}.nav a{padding:6px 8px}.ad-me{display:none}.ad-inv-grid{grid-template-columns:1fr}}
/* requests from the copies */
.ad-req+.ad-req{margin-top:10px}
.ad-steps{margin:8px 0 0;padding-left:18px;font-size:13px;display:grid;gap:6px}
.ad-answer{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.ad-answer input{flex:1;min-width:200px}
.nav a .count.new{font-family:var(--mono);font-size:11px;background:var(--accent);color:#fff;padding:1px 6px;border-radius:10px;margin-left:4px}
.cap{text-transform:capitalize}
/* a button (and a version picker) as one small form inside a table row or a page head (Backups, Updates) */
form.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
select.sm{width:auto;padding:3px 6px;font-size:12px;max-width:220px}
.page-head form.actions{display:flex;flex-direction:row;gap:8px;align-items:center;flex-wrap:wrap}.page-head form.actions select{width:auto;max-width:260px}