/* ─── LIGHT THEME (the only theme — dark theme removed) ─── */
:root {
  --navy:#F0F4F8; --navy-mid:#FFFFFF; --navy-light:#E2E8F2;
  --accent:#1D6FD8; --accent-bright:#1558B0; --accent-pale:rgba(29,111,216,0.10);
  --teal:#0FC6A3; --amber:#F5A623; --red:#E5484D; --green:#22C55E; --purple:#7C6FF7;
  --text-1:#0F1E35; --text-2:#3A4F6A; --text-3:#6B82A0;
  --border:rgba(0,0,0,0.09); --border2:rgba(0,0,0,0.15);
  --card:rgba(0,0,0,0.03); --card2:rgba(0,0,0,0.06);
  --font:'Outfit',sans-serif; --mono:'DM Mono',monospace;
  --radius:10px; --radius-lg:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--navy);color:var(--text-1);height:100vh;display:flex;overflow:hidden}

/* ─── SIDEBAR ─── */
.sb{width:214px;min-height:100vh;background:var(--navy-mid);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;overflow:hidden}
.sb-logo{padding:22px 20px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sb-icon{width:32px;height:32px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sb-icon svg{width:17px;height:17px}
.sb-brand{font-size:16px;font-weight:700;letter-spacing:-.3px}
.sb-tagline{font-size:10px;color:var(--text-3);letter-spacing:.5px;text-transform:uppercase}
.sb-nav{flex:1;padding:12px 10px;overflow-y:auto}
.sb-section{font-size:10px;font-weight:600;color:var(--text-3);letter-spacing:1px;text-transform:uppercase;padding:14px 10px 5px}
.sb-toggle{font-size:10px;font-weight:600;color:var(--text-3);letter-spacing:1px;text-transform:uppercase;padding:14px 10px 5px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none}
.sb-toggle:hover{color:var(--text-2)}
.sb-toggle .sb-chevron{width:12px;height:12px;transition:transform .2s;opacity:.6}
.sb-toggle.open .sb-chevron{transform:rotate(90deg)}
.sb-collapsible{overflow:hidden;max-height:0;transition:max-height .25s ease}
.sb-collapsible.open{max-height:500px}
.sb-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13px;color:var(--text-2);cursor:pointer;transition:all .15s;margin-bottom:1px;user-select:none}
.sb-item:hover{background:var(--card2);color:var(--text-1)}
.sb-item.active{background:var(--accent-pale);color:var(--accent-bright);font-weight:500}
.sb-item svg{width:15px;height:15px;flex-shrink:0;opacity:.7}
.sb-item.active svg{opacity:1}
.sb-foot{padding:12px 10px;border-top:1px solid var(--border)}
.sb-user{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;cursor:pointer}
.sb-user:hover{background:var(--card2)}
.ava{width:30px;height:30px;border-radius:50%;background:var(--navy-light);border:1.5px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--accent-bright);flex-shrink:0}

/* ─── MAIN ─── */
.main{flex:1;overflow:hidden;display:flex;flex-direction:column;min-width:0;height:100vh}
.topbar{height:52px;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 28px;gap:12px;flex-shrink:0;background:var(--navy-mid)}
.topbar-title{font-size:15px;font-weight:600;flex:1}
.content{flex:1;overflow-y:auto;padding:24px 28px;height:0;min-height:0}
.content::-webkit-scrollbar{width:5px}
.content::-webkit-scrollbar-thumb{background:var(--navy-light);border-radius:3px}

/* ─── BUTTONS ─── */
.btn{font-family:var(--font);font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:8px;border:1px solid var(--border2);background:var(--card);color:var(--text-2);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:var(--card2);color:var(--text-1)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:#2472CC}
.btn.danger{background:rgba(229,72,77,.15);color:var(--red);border-color:rgba(229,72,77,.3)}
.btn.danger:hover{background:rgba(229,72,77,.25)}
.btn.success{background:rgba(34,197,94,.15);color:var(--green);border-color:rgba(34,197,94,.3)}
.btn.sm{font-size:11.5px;padding:5px 10px}

/* ─── CARDS ─── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px}
.card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{font-size:14px;font-weight:600}
.card-sub{font-size:11.5px;color:var(--text-3);margin-top:2px}

/* ─── TABLES ─── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text-3);text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--border)}
.tbl th:last-child{text-align:right;padding-right:0}
.tbl td{font-size:13px;padding:10px 12px 10px 0;border-bottom:1px solid var(--border);color:var(--text-2);vertical-align:middle}
.tbl td:last-child{text-align:right;padding-right:0}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{color:var(--text-1)}
.mono{font-family:var(--mono);font-size:12px}

/* ─── BADGES ─── */
.badge{font-size:10.5px;padding:3px 9px;border-radius:20px;font-weight:500;display:inline-block;white-space:nowrap}
.b-green{background:rgba(34,197,94,.12);color:var(--green);border:1px solid rgba(34,197,94,.2)}
.b-amber{background:rgba(245,166,35,.12);color:var(--amber);border:1px solid rgba(245,166,35,.2)}
.b-red{background:rgba(229,72,77,.12);color:var(--red);border:1px solid rgba(229,72,77,.2)}
.b-blue{background:var(--accent-pale);color:var(--accent-bright);border:1px solid rgba(43,127,224,.2)}
.b-purple{background:rgba(124,111,247,.12);color:var(--purple);border:1px solid rgba(124,111,247,.2)}
.b-teal{background:rgba(15,198,163,.12);color:var(--teal);border:1px solid rgba(15,198,163,.2)}

/* ─── FORMS ─── */
.form-grid{display:grid;gap:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-label{font-size:11.5px;font-weight:500;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}
.form-input{font-family:var(--font);font-size:13px;background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:8px;padding:9px 12px;color:var(--text-1);outline:none;transition:border-color .15s;width:100%}
.form-input:focus{border-color:var(--accent)}
.form-input option{background:var(--navy-mid);color:var(--text-1)}
.form-input::placeholder{color:var(--text-3)}
textarea.form-input{resize:vertical;min-height:70px}

/* ─── MODAL ─── */
.modal-overlay{position:fixed;inset:0;background:rgba(7,14,28,.75);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--navy-mid);border:1px solid var(--border2);border-radius:var(--radius-lg);width:720px;max-width:95vw;max-height:90vh;overflow-y:auto;padding:28px;transform:translateY(10px);transition:transform .2s}
.modal-overlay.open .modal{transform:translateY(0)}
.modal::-webkit-scrollbar{width:4px}
.modal::-webkit-scrollbar-thumb{background:var(--navy-light);border-radius:2px}
.modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.modal-title{font-size:16px;font-weight:600}
.modal-close{width:30px;height:30px;border-radius:7px;background:var(--card);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-2);font-size:16px;font-family:var(--font);transition:all .15s}
.modal-close:hover{background:var(--card2);color:var(--text-1)}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.modal-overlay.axon-fullscreen{align-items:stretch;justify-content:stretch;background:var(--navy)}
.modal-overlay.axon-fullscreen .modal{width:100vw;max-width:none;height:100vh;max-height:none;border:0;border-radius:0;padding:0;display:flex;flex-direction:column;overflow:hidden;transform:none}
.modal-overlay.axon-fullscreen .modal-hd{padding:18px 28px;margin:0;border-bottom:1px solid var(--border);background:var(--navy-mid);flex-shrink:0}
.modal-overlay.axon-fullscreen #modalBody{padding:22px 28px;overflow:auto;flex:1;background:linear-gradient(145deg,var(--navy),var(--navy-mid))}
.modal-overlay.axon-fullscreen #modalFoot{margin:0;padding:14px 28px;border-top:1px solid var(--border);background:var(--navy-mid);flex-shrink:0}
.budget-period-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.budget-cycle-pill{font-size:10px;font-weight:700;letter-spacing:.65px;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--accent-pale);color:var(--accent-bright);border:1px solid rgba(43,127,224,.25)}
.budget-variance-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px;margin:16px 0}
.budget-variance-kpi{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px}
.budget-variance-kpi .label{font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.55px}
.budget-variance-kpi .value{font:700 20px/1.35 var(--mono);margin-top:5px;color:var(--text-1)}
@media(max-width:800px){.modal-overlay.axon-fullscreen .modal-hd,.modal-overlay.axon-fullscreen #modalBody,.modal-overlay.axon-fullscreen #modalFoot{padding-left:16px;padding-right:16px}.budget-period-grid,.budget-variance-grid{grid-template-columns:1fr}.modal-overlay.axon-fullscreen .form-row,.modal-overlay.axon-fullscreen .form-row-3{grid-template-columns:1fr}}

/* ─── INVOICE LINES ─── */
.line-table{width:100%;border-collapse:collapse;margin-top:10px}
.line-table th{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);padding:0 8px 8px 0;border-bottom:1px solid var(--border)}
.line-table td{padding:6px 8px 6px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.line-table td:last-child{text-align:right}
.line-input{font-family:var(--font);font-size:12.5px;background:rgba(255,255,255,.05);border:1px solid transparent;border-radius:6px;padding:6px 8px;color:var(--text-1);outline:none;width:100%;transition:border-color .15s}
.line-input:focus{border-color:var(--accent);background:rgba(43,127,224,.08)}
.line-remove{width:24px;height:24px;border-radius:6px;background:transparent;border:none;cursor:pointer;color:var(--text-3);font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.line-remove:hover{background:rgba(229,72,77,.15);color:var(--red)}
/* ─── PER-LINE TRACKING (Branch / Department) ─── */
.line-trk{display:flex;flex-direction:column;gap:2px}
.line-trk select{background:rgba(255,255,255,.06);border:1px solid transparent;border-radius:5px;color:var(--text-1)}
.line-trk select:focus{border-color:var(--accent);outline:none}
/* ─── MULTI-TAX PER LINE (checkboxes) ─── */
.line-tax{display:flex;flex-direction:column;gap:2px;max-height:96px;overflow-y:auto}
.line-tax::-webkit-scrollbar{width:3px}
.line-tax::-webkit-scrollbar-thumb{background:var(--navy-light);border-radius:2px}
.taxchk{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--text-2);cursor:pointer;white-space:nowrap;padding:1px 0}
.taxchk:hover{color:var(--text-1)}
.taxchk input{width:13px;height:13px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;margin:0}
.taxchk .taxrate{color:var(--text-3);font-size:9px;margin-left:auto}
.line-totals{background:rgba(255,255,255,.03);border-radius:8px;padding:12px 14px;margin-top:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.line-totals-row{display:flex;justify-content:space-between;width:220px;font-size:13px}
.line-totals-row.grand{font-size:15px;font-weight:600;border-top:1px solid var(--border2);padding-top:8px;margin-top:2px;color:var(--accent-bright)}

/* ─── BANK RECONCILIATION ─── */
.recon-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.recon-card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.recon-card-hd{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text-3);margin-bottom:10px;display:flex;justify-content:space-between}
.recon-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;background:rgba(255,255,255,.03);border:1px solid transparent;cursor:pointer;margin-bottom:6px;transition:all .15s;font-size:12.5px}
.recon-item:hover{border-color:var(--border2);background:var(--card2)}
.recon-item.selected{border-color:var(--accent);background:var(--accent-pale)}
.recon-item.matched{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.06)}
.recon-chk{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--text-3);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s}
.recon-item.selected .recon-chk,.recon-item.matched .recon-chk{background:var(--accent);border-color:var(--accent)}
.recon-item.matched .recon-chk{background:var(--green);border-color:var(--green)}
.recon-desc{flex:1;min-width:0}
.recon-name{font-weight:500;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recon-meta{font-size:11px;color:var(--text-3)}
.recon-amt{font-family:var(--mono);font-size:12px;font-weight:500;flex-shrink:0}
.recon-match-bar{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0;padding:10px;background:rgba(43,127,224,.07);border-radius:8px;border:1px dashed rgba(43,127,224,.25)}
/* Inline match panel — opens directly under the selected bank transaction */
.inline-match{margin:-4px 0 10px 18px;padding:12px 14px;background:rgba(43,127,224,.06);border:1px solid rgba(43,127,224,.22);border-left:3px solid var(--accent);border-radius:0 8px 8px 8px}
.inline-match .tabs{margin-bottom:10px}

/* ─── COA ─── */
.coa-wrap{overflow-x:auto}
.coa-table{width:100%;border-collapse:collapse;font-size:13px}
.coa-table thead th{position:sticky;top:0;z-index:2;background:var(--card);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.7px;color:var(--text-3);text-align:left;
  padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.coa-table td{padding:9px 12px;border-bottom:1px solid var(--border-soft,rgba(128,128,128,.13));vertical-align:middle}
.coa-table .num{text-align:right;font-family:var(--mono);white-space:nowrap}
.coa-row{cursor:pointer;transition:background .12s}
.coa-row:hover{background:var(--card2)}
.coa-code{font-family:var(--mono);font-size:11.5px;color:var(--text-3);width:76px;white-space:nowrap}
.coa-name{color:var(--text-1);min-width:240px}
.coa-name .coa-sub{display:block;font-size:11px;color:var(--text-3);margin-top:2px;line-height:1.35}
.coa-indent .coa-name{padding-left:18px}
.coa-class{width:150px;white-space:nowrap}
.coa-type-tag{display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:12px;background:var(--card2);color:var(--text-3)}
.coa-bal{width:150px;font-size:12.5px;color:var(--text-1)}
.coa-drcr{font-family:var(--font,inherit);font-size:10px;font-weight:600;color:var(--text-3);margin-left:6px}
.coa-bal.zero{color:var(--text-3)}
.coa-act{width:130px;text-align:right;white-space:nowrap}
/* A section head is a row in the same grid, so every column stays aligned. */
.coa-section td{background:var(--card2);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;color:var(--text-3);padding:9px 12px;border-top:1px solid var(--border)}
.coa-subtotal td{font-weight:700;background:transparent;border-bottom:2px solid var(--border);color:var(--text-1)}
.coa-subtotal .num{font-size:12.5px}
.coa-headerrow td{font-weight:700;color:var(--text-2)}
.coa-inactive td{opacity:.55}
.coa-chip{display:inline-block;font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:6px;vertical-align:middle}
.coa-chip-control{background:rgba(124,111,247,.14);color:var(--purple)}
.coa-chip-pay{background:rgba(15,198,163,.14);color:var(--teal)}
.coa-chip-off{background:rgba(148,163,184,.18);color:var(--text-3)}
.coa-filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.coa-filter{font-size:11.5px;padding:5px 11px;border-radius:14px;border:1px solid var(--border);
  background:transparent;color:var(--text-2);cursor:pointer;transition:all .12s}
.coa-filter:hover{background:var(--card2)}
.coa-filter.on{background:var(--purple);border-color:var(--purple);color:#fff}

/* ─── CONTACTS ─── */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.contact-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;transition:all .15s}
.contact-card:hover{border-color:var(--border2);background:var(--card2)}
.contact-ava{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;margin-bottom:10px}
.contact-name{font-size:14px;font-weight:600;margin-bottom:2px}
.contact-meta{font-size:11.5px;color:var(--text-3)}
.contact-bal{font-family:var(--mono);font-size:13px;font-weight:500;margin-top:8px}

/* ─── UPLOAD ZONE ─── */
.upload-zone{border:2px dashed var(--border2);border-radius:var(--radius);padding:32px;text-align:center;cursor:pointer;transition:all .2s}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--accent);background:var(--accent-pale)}
.upload-icon{font-size:32px;margin-bottom:10px;opacity:.5}
.upload-text{font-size:14px;font-weight:500;margin-bottom:4px}
.upload-sub{font-size:12px;color:var(--text-3)}

/* ─── TABS ─── */
.tabs{display:flex;gap:4px;background:rgba(255,255,255,.04);border-radius:9px;padding:3px;margin-bottom:20px;width:fit-content}
.tab{font-size:12.5px;padding:6px 16px;border-radius:7px;cursor:pointer;color:var(--text-2);transition:all .15s;font-weight:400}
.tab.active{background:var(--navy-light);color:var(--text-1);font-weight:500}

/* ─── DOCUMENT TABS (Sales / Purchases) ─── */
/*
   Deliberately NOT the .tab class above. That one is a quiet segmented
   control inside a grey tray, which is right for switching a panel within a
   card — the reconciliation screen and the match dialog both use it and are
   untouched. These are the primary control on their screen: the first thing
   somebody reaches for on opening Sales, and the thing that decides what the
   whole page is showing. So they are buttons, and they look like buttons.

   They are real <button> elements rather than clickable divs, which is what
   gives them keyboard focus and the focus ring below for nothing.
*/
.doc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.doc-tab{font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.1px;
  padding:9px 16px;border-radius:9px;border:1px solid var(--border2);
  background:var(--navy-mid);color:var(--text-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 1px 2px rgba(15,30,53,.06);transition:all .15s}
.doc-tab:hover{background:var(--card2);color:var(--text-1);border-color:var(--text-3);
  box-shadow:0 2px 5px rgba(15,30,53,.10)}
.doc-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.doc-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 2px 6px rgba(29,111,216,.32)}
.doc-tab.active:hover{background:var(--accent-bright);border-color:var(--accent-bright);color:#fff}
/* The count is information, not decoration: it sits in its own pill so the
   eye reads "Unpaid" and "3" as two things rather than one long label. */
.doc-tab-n{font-size:11.5px;font-weight:700;line-height:1.5;min-width:21px;text-align:center;
  padding:1px 7px;border-radius:999px;background:var(--navy-light);color:var(--text-2)}
.doc-tab.active .doc-tab-n{background:rgba(255,255,255,.24);color:#fff}
.doc-tab-n.zero{opacity:.55}

/* ─── ALERTS ─── */
.alert{border-radius:8px;padding:10px 14px;font-size:12.5px;display:flex;align-items:center;gap:8px;margin-bottom:14px}
.alert-info{background:var(--accent-pale);border:1px solid rgba(43,127,224,.2);color:var(--accent-bright)}
.alert-success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);color:var(--green)}
.alert-warning{background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.2);color:var(--amber)}

/* ─── KPI ROW ─── */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.kpi-lbl{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text-3);margin-bottom:6px}
.kpi-val{font-size:22px;font-weight:700;letter-spacing:-.5px}
.kpi-chg{font-size:11.5px;margin-top:3px}

/* ─── TOAST ─── */
.toast{position:fixed;bottom:24px;right:24px;background:var(--navy-mid);border:1px solid var(--border2);border-radius:10px;padding:12px 18px;font-size:13px;z-index:2000;transform:translateY(80px);opacity:0;transition:all .3s;max-width:320px}
.toast.show{transform:translateY(0);opacity:1}
.toast.toast-success{border-left:3px solid var(--green)}
.toast.toast-error{border-left:3px solid var(--red)}
.toast.toast-info{border-left:3px solid var(--accent)}

/* ─── DIVIDER ─── */
.divider{border:none;border-top:1px solid var(--border);margin:16px 0}

/* ─── SEARCH ─── */
.search-wrap{position:relative;flex:1;max-width:300px}
.search-wrap input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:8px;padding:7px 12px 7px 34px;font-family:var(--font);font-size:13px;color:var(--text-1);outline:none}
.search-wrap input:focus{border-color:var(--accent)}
.search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-3)}

.empty{text-align:center;padding:48px 20px;color:var(--text-3);font-size:13px}
.empty svg{width:40px;height:40px;margin:0 auto 12px;opacity:.3;display:block}

/* ─── BACKUP BAR ─── */
.backup-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;border-top:1px solid var(--border);background:rgba(0,0,0,.15)}
.backup-info{font-size:10.5px;color:var(--text-3);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.backup-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ─── CHART WRAPPER ─── */
.chart-box{position:relative;width:100%}

/* ─── SEARCHABLE COMBOBOX ─── */
.combo-wrap{position:relative;width:100%}
.combo-input{font-family:var(--font);font-size:11.5px;background:rgba(255,255,255,.06);border:1px solid transparent;border-radius:6px;padding:6px 8px;color:var(--text-1);outline:none;width:100%;transition:border-color .15s;cursor:text}
.combo-input:focus{border-color:var(--accent);background:rgba(43,127,224,.1)}
.combo-input::placeholder{color:var(--text-3)}
.combo-drop{position:absolute;top:calc(100% + 3px);left:0;right:0;background:#FFFFFF;border:1px solid var(--border2);border-radius:8px;max-height:200px;overflow-y:auto;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.combo-drop::-webkit-scrollbar{width:4px}
.combo-drop::-webkit-scrollbar-thumb{background:var(--navy-light);border-radius:2px}
.combo-opt{padding:7px 10px;font-size:12px;color:var(--text-2);cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);display:flex;align-items:center;gap:8px}
.combo-opt:last-child{border-bottom:none}
.combo-opt:hover,.combo-opt.active{background:rgba(43,127,224,.18);color:var(--text-1)}
.combo-opt-code{font-family:var(--mono);font-size:10.5px;color:var(--accent-bright);flex-shrink:0;width:40px}
.combo-opt-name{flex:1}
.combo-opt-type{font-size:10px;color:var(--text-3)}
.combo-hidden{display:none}

/* Native select options — light theme */
select.line-input,select.form-input{color-scheme:light}
select.line-input option,select.form-input option{background:#FFFFFF;color:#0F1E35}

/* ─── AUTH SCREEN ─── */
#authScreen{position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,#0B1E3D 0%,#1D3A6B 50%,#0B1E3D 100%);display:flex;align-items:center;justify-content:center;font-family:var(--font)}
#authScreen.hidden{display:none !important}
#licensePaymentScreen{z-index:10000}
#licensePaymentScreen.hidden{display:none !important}
.auth-card{background:#fff;border-radius:16px;padding:40px;width:420px;max-width:92vw;box-shadow:0 25px 60px rgba(0,0,0,.4)}
.auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.auth-logo-icon{width:44px;height:44px;background:#1D6FD8;border-radius:10px;display:flex;align-items:center;justify-content:center}
.auth-logo-icon svg{width:22px;height:22px}
.auth-logo-text{font-size:22px;font-weight:700;color:#0F1E35;letter-spacing:-.5px}
.auth-logo-sub{font-size:11px;color:#6B82A0;letter-spacing:.5px;text-transform:uppercase}
.auth-title{font-size:18px;font-weight:600;color:#0F1E35;margin-bottom:6px}
.auth-sub{font-size:13px;color:#6B82A0;margin-bottom:22px}
.auth-input{width:100%;font-family:var(--font);font-size:14px;padding:11px 14px;border:1.5px solid #E2E8F2;border-radius:9px;outline:none;color:#0F1E35;transition:border-color .15s;margin-bottom:12px;box-sizing:border-box}
.auth-input:focus{border-color:#1D6FD8}
.auth-input::placeholder{color:#A0AEC0}
.auth-btn{width:100%;font-family:var(--font);font-size:14px;font-weight:600;padding:12px;border:none;border-radius:9px;background:#1D6FD8;color:#fff;cursor:pointer;transition:background .15s;margin-top:4px}
.auth-btn:hover{background:#1558B0}
.auth-btn:disabled{opacity:.6;cursor:not-allowed}
/* "Continue with Axon Digits" — the SSO entry point, given visual priority
   over the email/password form because for a hub customer it is the path that
   actually works: their account lives on axondigits.com, not here. */
.auth-sso-btn{width:100%;font-family:var(--font);font-size:14px;font-weight:600;padding:12px;
  border:1px solid #1D6FD8;border-radius:9px;background:#fff;color:#1D6FD8;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;transition:background .15s,box-shadow .15s}
.auth-sso-btn:hover{background:#F2F7FE;box-shadow:0 1px 3px rgba(29,111,216,.18)}
.auth-sso-btn:disabled{opacity:.6;cursor:not-allowed}
.auth-sso-btn img{height:17px;width:auto;display:block}
.auth-sso-note{margin-top:7px;font-size:12px;line-height:1.45;color:#64748B;text-align:center}
.auth-build{margin-top:14px;font-size:10.5px;letter-spacing:.04em;color:#94A3B8;text-align:center;font-variant-numeric:tabular-nums}
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:#94A3B8;font-size:12px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:#E2E8F0}
@media (prefers-color-scheme:dark){
  .auth-sso-btn{background:transparent;color:#7FB1F5;border-color:#2C5D9B}
  .auth-sso-btn:hover{background:rgba(29,111,216,.12)}
  .auth-divider{color:#64748B}
  .auth-divider::before,.auth-divider::after{background:#243044}
  .auth-sso-note{color:#8296AE}
  .auth-build{color:#55657A}
}
.auth-toggle{text-align:center;margin-top:16px;font-size:13px;color:#6B82A0}
.auth-toggle a{color:#1D6FD8;cursor:pointer;font-weight:500;text-decoration:none}
.auth-toggle a:hover{text-decoration:underline}
.auth-error{background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.2);color:#E5484D;font-size:12.5px;padding:8px 12px;border-radius:8px;margin-bottom:12px;display:none}
.auth-success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);color:#22C55E;font-size:12.5px;padding:8px 12px;border-radius:8px;margin-bottom:12px;display:none}

/* ─── LOADING SCREEN ─── */
#loadingScreen{position:fixed;inset:0;z-index:9998;background:#F0F4F8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
#loadingScreen.hidden{display:none !important}
.loading-spinner{width:36px;height:36px;border:3px solid #E2E8F2;border-top-color:#1D6FD8;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:14px;color:#6B82A0;font-family:var(--font)}

/* ─── PAYMENT MODAL ─── */
.pay-modal-overlay{position:fixed;inset:0;z-index:9000;background:rgba(7,14,28,.8);display:flex;align-items:center;justify-content:center}
.pay-modal{background:#fff;border-radius:16px;padding:32px;width:500px;max-width:95vw;max-height:90vh;overflow-y:auto}
.pay-modal h2{font-size:18px;font-weight:700;color:#0F1E35;margin-bottom:6px}
.pay-modal .price-tag{font-size:32px;font-weight:700;color:#1D6FD8;margin:16px 0}
.pay-features{list-style:none;padding:0;margin:0 0 20px}
.pay-features li{padding:8px 0;font-size:13px;color:#3A4F6A;border-bottom:1px solid #F0F4F8;display:flex;align-items:center;gap:8px}
.pay-features li::before{content:'✓';color:#22C55E;font-weight:700;font-size:14px}

/* ─── LICENSE MANAGEMENT ─── */
.license-card{background:linear-gradient(135deg,rgba(29,111,216,.08),rgba(124,111,247,.05));border:1px solid rgba(29,111,216,.15);border-radius:12px;padding:20px}
.license-stat{text-align:center}
.license-stat-val{font-size:28px;font-weight:700;color:#1D6FD8;font-family:var(--mono)}
.license-stat-lbl{font-size:11px;color:#6B82A0;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

/* Hide app when not authenticated */
#appWrapper.hidden{display:none !important}