/* ═══════════════════════════════════════════════════════════════════
   FINANCE OS — Stylesheet
   Sasha Boucicaut · Montreal
   
   SECTIONS:
   01. Reset & CSS Variables (Design Tokens)
   02. Base Layout
   03. Sidebar
   04. Navigation Items
   05. Topbar & View Toggle
   06. Main Content & Views
   07. Stat Cards
   08. Tables & Data Display
   09. Form Elements & Inputs
   10. Buttons
   11. Tags, Badges & Pills
   12. Charts & Graphs (Bar, Donut, Timeline)
   13. Debt Tracker
   14. Modals & Overlays
   15. Quarter Tabs
   16. Review Queue Cards
   17. Hosting Page
   18. Toast Notifications
   19. Utilities & Helpers
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 01. RESET & CSS VARIABLES ──────────────────────────────────── */

/* ─── 01. RESET ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ─── 01b. CSS VARIABLES (Design Tokens) ──────────────────────── */
:root{
  --bg:#0b0d12;--bg2:#0f1219;--bg3:#151b28;--bg4:#1c2438;--bg5:#242d45;
  --border:#1e2840;--border2:#2d3f66;
  --text:#dde2f0;--text2:#7a8aac;--text3:#8da0c9;
  --accent:#4f7aff;--accent2:#7a9fff;
  --green:#0fb981;--red:#ef4545;--amber:#f5a623;--purple:#8b5cf6;
  --pink:#ec4899;--cyan:#06c4d4;--orange:#f97316;--teal:#14b8a6;
  --biz:#4f7aff;--pers:#0fb981;
  --chart-rev:#0fb981;--chart-biz:#ef4545;--chart-pers:#4f7aff;
  --sidebar-w:220px;
}
html,
/* ─── 02. BASE LAYOUT ───────────────────────────────────────────── */
body{height:100%;font-family:'Roboto',sans-serif;background:var(--bg);color:var(--text);overflow:hidden;font-size:17px}
button{cursor:pointer;font-family:inherit;border:none}
input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
#app{display:flex;height:100vh}
#sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;overflow:hidden}
.sb-logo{padding:18px 18px 14px;border-bottom:1px solid var(--border)}
.sb-logo .lbl{font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--text3);font-family:'Roboto',sans-serif;font-weight:700;margin-bottom:2px}
.sb-logo .title{font-size:20px;font-weight:800;font-family:'Roboto',sans-serif;line-height:1.1}
.sb-logo .title span{color:var(--accent)}
.sb-logo .subtitle{font-size:13px;color:var(--text3);margin-top:2px;font-family:'Roboto',sans-serif}
.sb-section{padding:14px 12px 3px;font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text3);font-family:'Roboto',sans-serif}
.sb-nav{flex:1;overflow-y:auto;padding-bottom:8px}

/* ─── 04. NAVIGATION ITEMS ──────────────────────────────────────── */
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 18px;font-size:12.5px;font-weight:500;color:var(--text2);cursor:pointer;border-left:2px solid transparent;transition:all .12s;white-space:nowrap}
.nav-item:hover{color:var(--text);background:var(--bg3)}
.nav-item.active{color:var(--accent2);background:rgba(79,122,255,.09);border-left-color:var(--accent)}
.nav-icon{width:15px;text-align:center;font-size:16px;flex-shrink:0}
.sb-footer{padding:10px 14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.year-row{display:flex;align-items:center;gap:8px}
.year-row label{font-size:13px;color:var(--text3);font-family:'Roboto',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.year-row select{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:3px 7px;border-radius:5px;font-size:15px;flex:1}
.sync-btn{display:flex;align-items:center;justify-content:center;gap:5px;background:rgba(79,122,255,.12);border:1px solid rgba(79,122,255,.25);color:var(--accent2);padding:6px;border-radius:7px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
.sync-btn:hover{background:rgba(79,122,255,.2)}

/* ─── 06. MAIN CONTENT & VIEWS ──────────────────────────────────── */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* ─── 05. TOPBAR & VIEW TOGGLE ──────────────────────────────────── */
.topbar{height:52px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px;flex-shrink:0;gap:12px}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-title{font-family:'Roboto',sans-serif;font-size:18px;font-weight:700}
.view-toggle{display:flex;background:var(--bg3);border:1px solid var(--border);border-radius:7px;overflow:hidden}
.vt-btn{padding:4px 12px;font-size:14px;font-weight:600;color:var(--text3);cursor:pointer;transition:all .12s;font-family:'Roboto',sans-serif;letter-spacing:.05em;text-transform:uppercase;background:none;border:none}
.vt-btn.active{background:var(--accent);color:#fff}
.topbar-right{display:flex;gap:7px;align-items:center}

/* ─── 10. BUTTONS ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:7px;font-size:15px;font-weight:500;border:none;transition:all .12s;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{background:var(--bg3);color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--bg4);color:var(--text)}
.btn-danger{background:rgba(239,69,69,.15);color:var(--red);border:1px solid rgba(239,69,69,.3)}
.btn-sm{padding:3px 9px;font-size:14px}
.btn-green{background:rgba(15,185,129,.15);color:var(--green);border:1px solid rgba(15,185,129,.3)}
.btn-amber{background:rgba(245,166,35,.15);color:var(--amber);border:1px solid rgba(245,166,35,.3)}
.review-badge{background:var(--amber);color:#000;border-radius:10px;padding:1px 6px;font-size:13px;font-weight:700;margin-left:4px}
#content{flex:1;overflow-y:auto;padding:20px;padding-top:0}
.view{display:none;padding-top:20px}.view.active{display:block}
.view-transactions{padding-top:0!important}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}

/* ─── 07. STAT CARDS ────────────────────────────────────────────── */
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:15px 17px}
.stat-card .sl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--text3);margin-bottom:5px;font-family:'Roboto',sans-serif}
.stat-card .sv{font-family:'Roboto',sans-serif;font-size:25px;font-weight:400;color:var(--text);line-height:1}
.stat-card .ss{font-size:13px;color:var(--text3);margin-top:4px;font-family:'Roboto',sans-serif}
.stat-card.pos .sv{color:var(--green)}
.stat-card.neg .sv{color:var(--red)}
.stat-card.acc .sv{color:var(--accent2)}
.stat-card.amb .sv{color:var(--amber)}
.class-band{display:flex;height:6px;border-radius:4px;overflow:hidden;margin-bottom:20px;gap:1px}

/* ─── 08. TABLES & DATA DISPLAY ─────────────────────────────────── */
/* .table-wrap base styles are in section 15 (Sticky filter row) */
.table-head{display:flex;align-items:center;justify-content:space-between;padding:12px 17px;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap}
.table-head h3{font-family:'Roboto',sans-serif;font-size:16px;font-weight:700}
.tbl-controls{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.search-box{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:5px 10px;border-radius:7px;font-size:15px;width:160px;outline:none}
.search-box:focus{border-color:var(--accent)}
.search-box::placeholder{color:var(--text3)}
.fsel{background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:5px 9px;border-radius:7px;font-size:14px;outline:none}
.fsel:focus{border-color:var(--accent)}
table{width:100%;border-collapse:collapse}
th{font-family:'Roboto',sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);padding:8px 14px;text-align:left;border-bottom:1px solid var(--border);cursor:pointer;user-select:none;white-space:nowrap}
th:hover{color:var(--text2)}
td{padding:9px 14px;font-size:15px;color:var(--text2);border-bottom:1px solid rgba(30,40,64,.6);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.015)}

/* ─── 19. UTILITIES & HELPERS ───────────────────────────────────── */
.mono{font-family:'Roboto',sans-serif}
.tr{text-align:right}
.amt{font-family:'Roboto',sans-serif;font-weight:400}
.amt.pos{color:var(--green)}.amt.neg{color:var(--red)}
.act-cell{display:flex;gap:5px}

/* ─── 11. TAGS, BADGES & PILLS ──────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:20px;font-size:13px;font-weight:600}
.tag-dot{width:5px;height:5px;border-radius:50%}
.biz-tag{background:rgba(79,122,255,.15);color:var(--accent2)}
.pers-tag{background:rgba(15,185,129,.15);color:var(--green)}
.flag-tag{background:rgba(245,166,35,.15);color:var(--amber)}
.badge{display:inline-block;padding:1px 7px;border-radius:20px;font-size:13px;font-weight:600}
.badge-usd{background:rgba(245,166,35,.15);color:var(--amber);border:1px solid rgba(245,166,35,.25)}
.badge-cad{background:rgba(79,122,255,.1);color:var(--accent2);border:1px solid rgba(79,122,255,.2)}
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.chart-card{background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:17px}
.chart-card h3{font-family:'Roboto',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);margin-bottom:14px}
.donut-wrap{display:flex;align-items:center;gap:16px}
.donut-legend{flex:1;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.leg-item{display:flex;align-items:center;gap:7px;font-size:14px}
.leg-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.leg-label{color:var(--text2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leg-val{font-family:'Roboto',sans-serif;color:var(--text);font-size:13px;flex-shrink:0}

/* ─── 12. CHARTS & GRAPHS ───────────────────────────────────────── */
.bar-chart{display:flex;align-items:flex-end;gap:5px;height:120px;padding:0 4px}
.bg{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.bw{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.bar{border-radius:3px 3px 0 0;min-height:2px;transition:height .3s;width:30%}
.bar-rev{background:var(--chart-rev);opacity:.9}
.bar-biz{background:var(--chart-biz);opacity:.9}
.bar-pers{background:var(--chart-pers);opacity:.9}
.bl{font-size:11px;color:var(--text3);font-family:'Roboto',sans-serif}
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:20px}
.qcard{background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:14px}
.ql{font-family:'Roboto',sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--text3);margin-bottom:9px}
.qs{display:flex;justify-content:space-between;margin-bottom:3px;font-size:14px}
.qs span:first-child{color:var(--text3)}
.qs span:last-child{font-family:'Roboto',sans-serif}
.qn{margin-top:7px;padding-top:7px;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-size:15px;font-weight:600}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(5px)}
.modal-overlay.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:14px;width:520px;max-width:96vw;max-height:90vh;overflow-y:auto;animation:mIn .18s ease}
@keyframes mIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
.mhead{padding:18px 22px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.mhead h2{font-family:'Roboto',sans-serif;font-size:18px;font-weight:700}
.mclose{background:none;border:none;color:var(--text3);font-size:21px;padding:2px 6px;border-radius:5px;cursor:pointer}
.mclose:hover{background:var(--bg3);color:var(--text)}
.mbody{padding:18px 22px}
.mfoot{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

/* ─── 09. FORM ELEMENTS & INPUTS ────────────────────────────────── */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frow{display:flex;flex-direction:column;gap:4px}
.frow.span2{grid-column:span 2}
.frow label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-family:'Roboto',sans-serif}
.frow input,.frow select,.frow textarea{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:8px 11px;border-radius:7px;font-size:12.5px;outline:none;transition:border-color .12s}
.frow input:focus,.frow select:focus,.frow textarea:focus{border-color:var(--accent)}
.frow select option{background:var(--bg3)}
.rev-cad-section{margin-top:14px;padding:14px 16px;background:var(--bg3);border:1px solid rgba(15,185,129,.3);border-radius:9px}
.rev-cad-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--green);margin-bottom:4px;font-family:Roboto,sans-serif}
.rev-cad-sub{font-size:11px;color:var(--text3);margin-bottom:10px;line-height:1.5}
.rev-cad-input{width:100%;background:var(--bg2);border:1px solid var(--green);border-radius:7px;color:var(--green);font-size:18px;font-weight:700;padding:10px 12px;outline:none;font-family:Roboto,sans-serif;box-sizing:border-box}
.rev-cad-input:focus{border-color:var(--green);box-shadow:0 0 0 2px rgba(15,185,129,.15)}
.tax-section{margin-top:14px;padding:14px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:9px}
.tax-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--amber);margin-bottom:5px;font-family:Roboto,sans-serif}
.tax-section-sub{font-size:11px;color:var(--text3);margin-bottom:12px;line-height:1.5}
.tax-checks{display:flex;gap:20px;margin-bottom:12px;flex-wrap:wrap}
.tax-check-label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text2);cursor:pointer;font-weight:500;user-select:none}
.tax-prev{margin-top:10px;padding:11px 13px;background:var(--bg2);border:1px solid var(--border);border-radius:7px;font-size:13px}
.tx-row{display:flex;justify-content:space-between;padding:3px 0}
.tx-row.neg span:last-child{color:var(--red)}
.tx-row.tot{border-top:1px solid var(--border);margin-top:6px;padding-top:6px;font-weight:700;color:var(--text)}
.tx-row.itc{margin-top:7px;font-size:11px;color:var(--text3);border-top:1px solid var(--border);padding-top:6px}
.tx-row span:first-child{color:var(--text3)}
.tx-row span:last-child{font-family:'Roboto',sans-serif}

/* ─── 16. REVIEW QUEUE CARDS ────────────────────────────────────── */
.rq-card{background:var(--bg3);border:1px solid rgba(245,166,35,.25);border-radius:10px;padding:12px 14px;margin-bottom:8px;display:grid;grid-template-columns:1fr 200px;gap:14px;align-items:start;transition:all .15s}
.rq-card:hover{border-color:rgba(245,166,35,.45);background:rgba(245,166,35,.04)}
.rq-card-left{min-width:0}
.rq-card-right{display:flex;flex-direction:column;gap:0;flex-shrink:0}
.rq-merchant{font-size:16px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-desc{font-size:13px;color:var(--text3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-meta{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--text2);margin-top:5px;font-family:'Roboto',sans-serif;flex-wrap:wrap}
.rq-reason{font-size:13px;color:var(--amber);margin-top:5px}
.rq-rename{background:var(--bg4);border:1px solid var(--accent);color:var(--text);padding:6px 9px;border-radius:6px;font-size:15px;outline:none;width:100%;margin-bottom:4px}
.cls-toggle{display:flex;gap:3px;width:100%}
.cls-btn{flex:1;padding:6px 4px;border-radius:6px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:var(--bg4);color:var(--text3);transition:all .12s;font-family:'Roboto',sans-serif;text-transform:uppercase;letter-spacing:.05em}
.cls-btn:hover{background:var(--bg5)}
.cls-active-biz{background:rgba(79,122,255,.2)!important;border-color:var(--accent)!important;color:var(--accent2)!important}
.cls-active-pers{background:rgba(15,185,129,.2)!important;border-color:var(--green)!important;color:var(--green)!important}
.debt-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}

/* ─── 13. DEBT TRACKER ──────────────────────────────────────────── */
.debt-card{background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:17px}
.debt-card h3{font-family:'Roboto',sans-serif;font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.debt-progress{height:8px;background:var(--bg4);border-radius:5px;overflow:hidden;margin:8px 0}
.debt-bar{height:100%;border-radius:5px;transition:width .4s}
.debt-stat{display:flex;justify-content:space-between;font-size:14px;margin-bottom:3px}
.debt-stat span:first-child{color:var(--text3)}
.debt-stat span:last-child{font-family:'Roboto',sans-serif}
.avalanche-box{background:var(--bg3);border:1px solid var(--border);border-radius:9px;padding:13px;margin-bottom:20px}
.avalanche-box h4{font-family:'Roboto',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:10px}
.hosting-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px;margin-bottom:20px}

/* ─── 17. HOSTING PAGE ──────────────────────────────────────────── */
.hc-card{background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:14px}
.hc-name{font-family:'Roboto',sans-serif;font-size:16px;font-weight:700;margin-bottom:6px}
.hc-fee{font-family:'Roboto',sans-serif;font-size:23px;font-weight:400;color:var(--green)}
.hc-period{font-size:13px;color:var(--text3);margin-top:2px}
.hc-status{display:inline-block;padding:2px 7px;border-radius:20px;font-size:13px;font-weight:600;margin-top:6px}
.hc-active{background:rgba(15,185,129,.15);color:var(--green);border:1px solid rgba(15,185,129,.25)}
.hc-target{background:rgba(245,166,35,.15);color:var(--amber);border:1px solid rgba(245,166,35,.25)}
.upload-zone{border:2px dashed var(--border2);border-radius:11px;padding:36px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:16px}
.upload-zone:hover{border-color:var(--accent);background:rgba(79,122,255,.04)}
.uz-icon{font-size:35px;margin-bottom:7px}
.uz-text{font-size:16px;color:var(--text2)}
.uz-sub{font-size:14px;color:var(--text3);margin-top:3px}

/* ─── 18. TOAST NOTIFICATIONS ───────────────────────────────────── */
#toast{position:fixed;bottom:22px;right:22px;z-index:9999;background:var(--bg3);border:1px solid var(--border2);border-radius:9px;padding:11px 16px;font-size:15px;color:var(--text);transform:translateY(18px);opacity:0;transition:all .22s;pointer-events:none;max-width:260px}
#toast.show{transform:translateY(0);opacity:1}
#toast.err{border-color:rgba(239,69,69,.4)}
#toast.ok{border-color:rgba(15,185,129,.4)}
.mt20{margin-top:20px}
.flex{display:flex}.gap8{gap:8px}.items-center{align-items:center}.justify-between{justify-content:space-between}
.empty{text-align:center;padding:50px 20px;color:var(--text3);font-size:16px}
.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:13px;font-weight:600}
.sec-title{font-family:'Roboto',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);margin-bottom:11px;margin-top:22px}
.sec-title:first-child{margin-top:0}
.sec-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.sec-row .sec-title{margin:0}

/* Quarter tabs */

/* ─── 15. QUARTER TABS ──────────────────────────────────────────── */
.q-tabs{display:flex;gap:6px;padding:10px 14px 0;border-bottom:1px solid var(--border);background:var(--bg2);flex-wrap:wrap}
.q-tab{padding:6px 14px;border-radius:7px 7px 0 0;border:1px solid transparent;border-bottom:none;font-size:12px;font-weight:600;cursor:pointer;background:var(--bg3);color:var(--text3);transition:all .15s;font-family:Roboto,sans-serif}
.q-tab:hover{background:var(--bg4);color:var(--text2)}
.q-tab.active{background:var(--bg2);color:var(--accent2);border-color:var(--border);border-bottom-color:var(--bg2);margin-bottom:-1px}
.q-tab-count{font-size:10px;opacity:.6;margin-left:4px;font-weight:400}

/* Sticky filter row — works because #content is the scroll container */
/* .table-wrap must NOT have overflow:hidden — use border-radius clip via isolation instead */
.table-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:11px;margin-bottom:20px;isolation:isolate;overflow:visible}
.table-wrap > table{overflow:hidden}
.table-wrap > table,
.table-wrap > #batch-bar,
.table-wrap > .q-tabs{border-radius:0}

/* Invoices table: up to 6 action buttons per row can overflow the
   container width. .table-wrap deliberately avoids overflow:hidden (see
   comment above) so scope a horizontal scroll to this table specifically
   rather than changing .table-wrap globally. */
#view-invoices .table-wrap{overflow-x:auto}
#view-invoices table{min-width:1100px}
/* Clip table corners without overflow:hidden on wrapper */
.table-wrap{border-radius:11px}
.table-wrap > table:last-child tr:last-child td:first-child{border-bottom-left-radius:10px}
.table-wrap > table:last-child tr:last-child td:last-child{border-bottom-right-radius:10px}

.table-head-sticky{position:sticky;top:0;z-index:20;background:var(--bg2);border-bottom:1px solid var(--border);border-radius:11px 11px 0 0}

/* Calendar icon light gray */

/* ─── 19b. BROWSER-SPECIFIC OVERRIDES ──────────────────────────── */
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(60%) sepia(10%) saturate(200%) hue-rotate(180deg);cursor:pointer;opacity:.5}
input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:.9}

/* Datalist / autofill styling */
datalist{background:var(--bg2)}

/* ─── Back to top button ──────────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 900;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--bg3);
  color: var(--text2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background .15s, color .15s;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#back-to-top:hover {
  background: var(--bg4);
  color: var(--text);
}

/* ─── 20. LOGIN & AUTH SCREENS ──────────────────────────────────── */
#login-screen{display:none;position:fixed;inset:0;background:#0b0d12;z-index:9999;align-items:center;justify-content:center}
.login-card{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;padding:44px 40px;width:400px;max-width:92vw;display:flex;flex-direction:column;gap:18px;box-shadow:0 8px 40px rgba(0,0,0,.6)}
.login-title-wrap{text-align:center}
.login-title{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.02em}
.login-author{font-size:12px;color:var(--text3);margin-top:3px}
.login-heading-wrap{text-align:center}
#login-heading{font-size:15px;font-weight:600;color:var(--text);margin-bottom:5px}
#login-sub{font-size:12px;color:var(--text3);line-height:1.5}
.login-pw-wrap{position:relative}
.login-pw{width:100%;box-sizing:border-box;background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:11px 42px 11px 14px;border-radius:8px;font-size:14px;outline:none;font-family:inherit}
.login-pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:14px;color:var(--text3);line-height:1}
#login-err{color:var(--red);font-size:12px;text-align:center;min-height:16px;margin-top:-8px}
.login-submit{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:11px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:opacity .15s}
.login-note{font-size:10px;color:var(--text3);text-align:center;margin-top:-6px}

/* ─── 21. NO-DATA OVERLAY ───────────────────────────────────────── */
#no-data-overlay{display:none;position:fixed;inset:0;background:rgba(11,13,18,.97);z-index:2000;align-items:center;justify-content:center;flex-direction:column;gap:0}
.ndo-card{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;padding:40px 44px;max-width:420px;width:90%;text-align:center}
.ndo-icon{font-size:36px;margin-bottom:14px}
.ndo-title{font-family:Roboto,sans-serif;font-size:22px;font-weight:800;margin-bottom:6px}
.ndo-sub{font-size:13px;color:var(--text3);margin-bottom:28px;line-height:1.6}
.ndo-sub code{color:var(--accent2);background:var(--bg3);padding:1px 6px;border-radius:4px}
.ndo-btn{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:12px 28px;font-size:14px;font-weight:700;font-family:Roboto,sans-serif;cursor:pointer;width:100%;margin-bottom:10px}
.ndo-hint{font-size:11px;color:var(--text3);line-height:1.6}

/* ─── 22. TABLE HELPER CLASSES ──────────────────────────────────── */
/* Static th styles for dynamically-built tables */
.th-left{text-align:left;padding:8px 14px;border-bottom:1px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3)}
.th-right{text-align:right;padding:8px 14px;border-bottom:1px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3)}
.th-sort{cursor:pointer;user-select:none}
.th-action{width:80px;border-bottom:1px solid var(--border)}
/* td cell helpers */
.td-p{padding:8px 14px}
.td-bold{padding:8px 14px;font-weight:600;color:var(--text)}
.td-muted{padding:8px 14px;font-size:11px;color:var(--text3)}
.td-right{padding:8px 14px;text-align:right}
.td-right-bold-grn{padding:8px 14px;text-align:right;font-weight:700;color:var(--green)}
.td-right-bold-amb{padding:8px 14px;text-align:right;font-weight:700;color:var(--amber)}
/* Table total / footer rows */
.tbl-total-row{border-top:2px solid var(--border);background:var(--bg3)}
.tbl-total-label{padding:8px 14px;font-weight:700;color:var(--text3);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
/* Sub-rows (project expenses, revenue line items) */
.tbl-sub-row{background:var(--bg3);border-bottom:1px solid var(--bg4)}
.tbl-sub-cell{padding:5px 14px 5px 32px;font-size:11px;color:var(--text3)}
.tbl-sub-cell-body{padding:5px 14px;font-size:11px;color:var(--text2)}
.tbl-sub-cell-amt{padding:5px 14px;text-align:right;color:var(--red);font-size:11px}
.tbl-sub-add{padding:6px 14px 6px 32px}
/* Striped / alternate bg rows */
.row-bg3{border-bottom:1px solid var(--bg3)}
/* Group header rows (server costs, hosting) */
.tbl-group-row{background:var(--bg4)}
.tbl-group-cell{padding:7px 14px;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.tbl-group-cell-right{padding:7px 14px;text-align:right;font-weight:700}
.tbl-group-cell-mo{padding:7px 14px;text-align:right;font-size:10px;opacity:.7}

/* ─── 23. INLINE TABLE STYLES (hosting, elc, sc) ────────────────── */
/* Used when tables are built entirely in JS template strings */
.itbl{width:100%;border-collapse:collapse}
.itbl td{padding:8px 14px}
.itbl-name{padding:8px 14px;font-weight:600;color:var(--text)}
.itbl-cad{padding:8px 14px;text-align:right;font-weight:600;color:var(--green)}
.itbl-cad .itbl-yr{font-size:10px;color:var(--text3);margin-left:4px}
.itbl-usd{padding:8px 14px;text-align:right}
.itbl-notes{padding:8px 14px;font-size:11px;color:var(--text3)}
.itbl-acts{padding:8px 14px}

/* ─── 24. MODAL SUB-SECTIONS ────────────────────────────────────── */
/* Padded inset blocks inside modals */
.modal-inset{margin:12px 0;padding:11px 14px;background:var(--bg3);border-radius:8px;border:1px solid var(--border)}
.modal-inset-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.modal-inset-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3)}
.modal-inset-note{font-size:9px;font-weight:400;text-transform:none;letter-spacing:0}
/* Tax drill mini-table wrapper */
.tax-drill-section{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.tax-drill-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
/* Line item total bar */
#rev-li-total{display:none;margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
/* Merchant suggest dropdown */
#merchant-suggest{display:none;position:absolute;top:100%;left:0;right:0;z-index:200;background:var(--bg2);border:1px solid var(--border2);border-radius:6px;max-height:180px;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,.4)}

/* ─── 25. CATEGORY TOTAL CARD ───────────────────────────────────── */
#cat-total-card{display:none;background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:14px 18px;margin-bottom:14px;align-items:center;justify-content:space-between;gap:16px}
.cat-card-left{display:flex;align-items:center;gap:10px;flex:1}
.cat-card-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.cat-card-info{}
.cat-card-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:2px}
.cat-card-total{font-size:22px;font-weight:700;color:var(--text)}
.cat-card-sub{font-size:11px;color:var(--text3);margin-top:2px}
.cat-card-right{display:flex;gap:20px;align-items:center}
.cat-card-split{text-align:right}
.cat-card-split-label{font-size:10px;color:var(--text3)}
.cat-card-clear{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:4px}

/* ─── 26. BATCH BAR ─────────────────────────────────────────────── */
#batch-bar{display:none;padding:9px 14px;background:rgba(79,122,255,.08);border-top:1px solid var(--border);align-items:center;gap:10px;flex-wrap:wrap}
#batch-count{font-size:12px;color:var(--accent2);font-weight:600}
.btn-batch-tax{background:rgba(245,166,35,.15);color:var(--amber);border:1px solid rgba(245,166,35,.3)}

/* ─── 27. REPORT / COMPARE CARDS ────────────────────────────────── */
.compare-wrap{display:flex;gap:8px;align-items:center;margin-bottom:16px}
.compare-sep{color:var(--text3)}
#compare-change-bar{margin-bottom:20px;padding:14px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:10px}
#compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.yoy-card{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 16px;text-align:center;min-width:120px}
.yoy-label{font-size:11px;color:var(--text3);margin-bottom:4px}
.yoy-pct{font-size:18px;font-weight:700}
.yoy-vals{font-size:10px;color:var(--text3)}
.yoy-year-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.yoy-year-grid{display:flex;flex-wrap:wrap;gap:10px}

/* ─── 28. AVALANCHE / DEBT CALC ─────────────────────────────────── */
.avl-result{display:flex;flex-direction:column;gap:5px;font-size:11px}
.avl-time{color:var(--green);font-weight:600;font-size:13px}
.avl-accent{color:var(--accent2)}
.avl-pink{color:var(--pink)}
.avl-amber{color:var(--amber)}
.debt-util-note{font-size:10px;color:var(--text3)}
.debt-strategy-note{margin-top:8px;font-size:10px;color:var(--text3);line-height:1.6}
.frow label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text3)}
.debt-extra-input{background:var(--bg4);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:7px;font-size:13px;outline:none;margin-top:4px}

/* ─── 29. DEBT TOOLTIP ──────────────────────────────────────────── */
#debt-tip{display:none;position:absolute;background:var(--bg2);border:1px solid var(--border);border-radius:7px;padding:7px 11px;font-size:12px;color:var(--text);pointer-events:none;white-space:nowrap;z-index:50;box-shadow:0 4px 12px rgba(0,0,0,.4)}

/* ─── 30. HOSTING PROGRESS BARS ─────────────────────────────────── */
.hpb-wrap{display:flex;flex-direction:column;gap:10px}
.hpb-row{display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px}
.hpb-label{color:var(--text3)}
.hpb-val{}
.hpb-track{background:var(--bg4);border-radius:4px;height:8px}
.hpb-fill{height:100%;border-radius:4px}
.hpb-fill-grn{background:var(--green)}
.hpb-fill-red{background:var(--red)}
.hpb-target-track{background:var(--bg4);border-radius:3px;height:5px}
.hpb-target-fill{height:100%;border-radius:3px;background:var(--purple)}
.hpb-profit-row{padding-top:8px;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-size:13px;font-weight:600}
.hpb-target-note{font-size:10px;color:var(--text3);margin-bottom:4px}
.hpb-cost-item{margin-bottom:9px}
.hpb-cost-bar-track{background:var(--bg4);border-radius:3px;height:5px}
.hpb-cost-bar-fill{height:100%;border-radius:3px;background:var(--cyan)}

/* ─── 31. IMPORT RESULT BANNERS ─────────────────────────────────── */
.import-result-fb{background:rgba(15,185,129,.1);border:1px solid rgba(15,185,129,.3);border-radius:9px;padding:14px;font-size:13px}
.import-result-stmt{background:rgba(79,122,255,.1);border:1px solid rgba(79,122,255,.3);border-radius:9px;padding:14px;font-size:13px}
.import-result-pp{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 16px}
.import-result-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:10px}
.import-result-stats{display:flex;gap:20px;font-size:12px}
.import-ok{color:var(--green)}
.import-skip{color:var(--text3)}
.import-flag{color:var(--amber)}
.import-hint{margin-top:8px;font-size:11px;color:var(--text3)}

/* ─── 32. REVIEW QUEUE SECTION HEADERS ──────────────────────────── */
.rq-month-hdr{display:flex;align-items:center;justify-content:space-between;margin:18px 0 8px}
.rq-month-count{font-size:11px;color:var(--text3)}
.rq-skipped-hdr{display:flex;align-items:center;gap:10px;margin:24px 0 10px;padding-top:20px;border-top:1px solid var(--border)}
.rq-skipped-label{color:var(--text3)}
.rq-skipped-count{font-size:11px;color:var(--text3)}

/* ─── 33. CATEGORY MANAGER ──────────────────────────────────────── */
.cat-mgr-desc{font-size:12px;color:var(--text3);margin-bottom:10px;line-height:1.6}
.cat-mgr-add-row{display:flex;gap:8px;margin-bottom:16px}
#cat-list{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow-y:auto}
.cat-item{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:var(--bg3);border-radius:6px;font-size:13px}
.cat-item-label{display:flex;align-items:center}
.cat-item-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle;flex-shrink:0}
.cat-builtin{font-size:10px;color:var(--text3)}

/* ─── 34. MERCHANT MEMORY MODAL ─────────────────────────────────── */
.mm-desc{font-size:12px;color:var(--text3);margin-bottom:10px;line-height:1.6}
#mm-list{display:flex;flex-direction:column;gap:3px;max-height:400px;overflow-y:auto}
.mm-row{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--bg3);border-radius:6px}
.mm-key{flex:1;font-size:12px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-count{font-size:11px;color:var(--text3)}

/* ─── 35. TAX CHECKS (BATCH TAX MODAL) ──────────────────────────── */
.tax-checks{margin-bottom:16px}
.tax-check-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px}
.tax-check-row input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px}
.tax-check-note{font-size:11px;color:var(--text3)}

/* ─── 36. REV LINE ITEMS EDITOR ─────────────────────────────────── */
.rev-li-empty{font-size:11px;color:var(--text3);text-align:center;padding:8px}
.rev-li-grid{display:grid;grid-template-columns:1fr 130px 100px 28px;gap:5px;align-items:center;margin-bottom:5px}
.rev-li-diff-ok{color:var(--green)}
.rev-li-diff-warn{color:var(--amber)}

/* ─── 37. USD/CAD SPLIT MINI-CARD ───────────────────────────────── */
.usd-split-hdr{display:flex;justify-content:space-between}
.usd-split-hdr-label{font-size:9px;color:var(--text3)}
.usd-pct-wrap{display:flex;gap:10px;align-items:baseline;margin:4px 0}
.usd-pct{color:var(--amber);font-size:20px;font-weight:700}
.usd-sep{color:var(--text3);font-size:13px}
.cad-pct{color:var(--green);font-size:20px;font-weight:700}
.split-label{color:var(--text3);font-size:11px}
.split-bar-wrap{display:flex;height:4px;border-radius:4px;overflow:hidden;margin-top:4px;background:var(--bg4)}
.split-bar-usd{background:var(--amber)}
.split-bar-cad{flex:1;background:var(--green)}

/* ─── 38. ACCT BREAKDOWN (stat card) ────────────────────────────── */
.acct-breakdown-row{display:flex;justify-content:space-between;font-size:11px;padding:2px 0}
.acct-breakdown-amt{font-weight:600}

/* ─── 39. FX ROW (transaction modal) ────────────────────────────── */
#fx-row-exp{display:none}

/* ─── 40. CONTRACTOR INVOICE DETAIL ─────────────────────────────── */
.inv-detail-grid{display:grid;grid-template-columns:1fr auto auto;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;align-items:center}
.inv-detail-project{color:var(--accent2);font-weight:600}
.inv-detail-desc{font-size:10px;color:var(--text3)}
.inv-detail-hrs{color:var(--text3)}
.inv-detail-amt{color:var(--amber)}
.inv-detail-notes{margin-top:10px;font-size:11px;color:var(--text3)}
.inv-section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:8px}

/* ─── 41. SIDEBAR FOOTER EXTRAS ─────────────────────────────────── */
.sb-footer-load-row{display:flex;gap:6px}
.sb-footer-load-row .sync-btn{flex:1}
.sync-btn-accent{flex:1;background:rgba(79,122,255,.2);border-color:var(--accent)}

/* ─── 42. BAR CHART LEGEND ──────────────────────────────────────── */
.bar-legend{display:flex;gap:14px;margin-top:10px;font-size:10px;color:var(--text3)}
.bar-legend-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:middle}
.bar-legend-rev{background:var(--chart-rev)}
.bar-legend-biz{background:var(--chart-biz)}
.bar-legend-pers{background:var(--chart-pers)}

/* ─── 43. CLIENTS PAGE ──────────────────────────────────────────── */
.client-search-row{display:flex;gap:8px;align-items:center}
.client-search-row .search-box{flex:1;max-width:340px}
.client-btn-row{display:flex;gap:8px}
.client-extra{font-size:10px;color:var(--text3)}
.client-contacts-grid{display:grid;grid-template-columns:1fr 1fr 1.5fr 120px auto auto;gap:5px;align-items:center;padding:5px 0;border-bottom:1px solid var(--bg3)}
.client-no-contacts{font-size:11px;color:var(--text3);padding:6px}

/* ─── 44. IMPORT PAGE ───────────────────────────────────────────── */
.import-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.import-desc{font-size:12px;color:var(--text2);margin-bottom:16px;line-height:1.7}
.import-desc code{color:var(--accent2)}

/* ─── 45. NAV ICON COLORS ───────────────────────────────────────── */
/* Pre-set per-icon colors so they don't need inline style */
.nav-icon-txn{color:var(--accent)}
.nav-icon-rev{color:var(--green)}
.nav-icon-tax{color:var(--amber)}
.nav-icon-proj{color:var(--purple)}
.nav-icon-clients{color:var(--teal)}
.nav-icon-hosting{color:var(--cyan)}
.nav-icon-debt{color:var(--red)}
.nav-icon-reports{color:var(--teal)}
.nav-icon-cats{color:var(--purple)}
.nav-icon-merch{color:var(--accent)}
.nav-icon-review{color:var(--amber)}
.nav-icon-import{color:var(--orange)}
.nav-icon-invoices{color:var(--green)}
.nav-icon-recurring{color:var(--accent2)}

/* Recurring invoices — "already generated this year" dot */
.rec-occurred-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green)}
.rec-not-occurred-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--border)}

/* ─── 46. MISC HTML-SPECIFIC HELPERS ────────────────────────────── */
/* Sign out button */
.btn-signout{margin-left:80px;background:none;border:1px solid rgba(245,166,35,.3);border-radius:7px;padding:5px 10px;cursor:pointer;color:var(--amber);font-size:15px;line-height:1;opacity:.75;transition:opacity .15s}
.btn-signout:hover{opacity:1}
/* chart-card with bottom margin */
.chart-card-mb{margin-bottom:20px}
/* table-head without bottom border */
.table-head-nb{border-bottom:none}
/* flex-shrink:0 on clear button */
.btn-shrink0{flex-shrink:0}
/* checkbox th */
.th-check{width:36px;padding:8px}
.checkbox-accent{accent-color:var(--accent);cursor:pointer;width:15px;height:15px}
/* action th bare (no width constraint beyond auto) */
.th-action-bare{width:80px}
/* PayPal upload zone tint */
.upload-zone-pp{border-color:rgba(0,115,209,.4)}
.uz-icon-pp{color:#0073d1}
/* import desc code styling */
.import-desc code{color:var(--accent2)}

/* ─── 47. INVOICING ──────────────────────────────────────────────── */
#view-invoice-editor{padding:0}

/* All text/date/select/textarea inputs inside the invoice editor and its
   modals (Record Payment, Default Terms) get the same dark theme as the
   rest of the app — no unstyled/white browser-default inputs anywhere.
   Recurring invoice editor (#view-recurring-editor / #rec-li-tbody) shares
   the same rules since it's built from the same .frow/line-item markup. */
#view-invoice-editor .frow select,
#view-invoice-editor .frow input[type="text"],
#view-invoice-editor .frow input[type="date"],
#view-invoice-editor .frow textarea,
#inv-li-tbody input[type="text"],
#pay-amount,
#default-terms-input,
#view-recurring-editor .frow select,
#view-recurring-editor .frow input[type="text"],
#view-recurring-editor .frow input[type="date"],
#view-recurring-editor .frow input[type="number"],
#view-recurring-editor .frow textarea,
#rec-li-tbody input[type="text"]{
  background:var(--bg4);
  border:1px solid var(--border);
  color:var(--text);
  padding:7px 10px;
  border-radius:6px;
  font-size:13px;
  font-family:inherit;
}
#view-invoice-editor .frow select,
#view-invoice-editor .frow input[type="text"],
#view-invoice-editor .frow input[type="date"],
#view-recurring-editor .frow select,
#view-recurring-editor .frow input[type="text"],
#view-recurring-editor .frow input[type="date"],
#view-recurring-editor .frow input[type="number"]{width:100%;box-sizing:border-box}
#view-invoice-editor .frow textarea,
#view-recurring-editor .frow textarea{resize:vertical;width:100%;box-sizing:border-box}
#view-invoice-editor .frow input:disabled,
#view-recurring-editor .frow input:disabled{opacity:.6;cursor:not-allowed}

/* Line item table inputs — smaller padding to fit the row height */
#inv-li-tbody input[type="text"],
#rec-li-tbody input[type="text"],
#inv-li-tbody select,
#rec-li-tbody select{padding:5px 8px;font-size:12px;width:100%;box-sizing:border-box;background:var(--bg4);border:1px solid var(--border);color:var(--text);border-radius:6px;font-family:inherit}
#inv-li-tbody select option,
#rec-li-tbody select option{background:var(--bg4);color:var(--text)}
#inv-li-tbody input.inv-num-input,
#rec-li-tbody input.inv-num-input{text-align:right}

/* Rate/Qty use type="text" + inputmode="decimal" (not type="number") so
   there's no browser spinner arrows and no browser-level numeric coercion
   that can interrupt typing. Firefox still shows spinner-like affordances
   on some number-adjacent inputs, so appearance is explicitly suppressed. */
#inv-li-tbody input.inv-num-input,
#rec-li-tbody input.inv-num-input,
#pay-amount{
  -moz-appearance:textfield;
  appearance:textfield;
}
#inv-li-tbody input.inv-num-input::-webkit-outer-spin-button,
#inv-li-tbody input.inv-num-input::-webkit-inner-spin-button,
#rec-li-tbody input.inv-num-input::-webkit-outer-spin-button,
#rec-li-tbody input.inv-num-input::-webkit-inner-spin-button,
#pay-amount::-webkit-outer-spin-button,
#pay-amount::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* Recurring editor's plain number inputs (Every N Months, End Date, Max
   Count) also need spin-button suppression for visual consistency, even
   though they're not the rate/qty pattern above. */
#view-recurring-editor .frow input[type="number"]::-webkit-outer-spin-button,
#view-recurring-editor .frow input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
#view-recurring-editor .frow input[type="number"]{-moz-appearance:textfield}



#inv-totals-box{font-size:13px}

/* Line-item note — shared by both the recurring and regular invoice
   editors. Separate class (not scoped via .frow, since this textarea lives
   inside a <td>, not a .frow div — the earlier .frow-scoped rule never
   reached it). Multi-line by design — notes are often several lines of
   fine print/details. */
.li-note{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin-top:6px;
  background:var(--bg4);
  border:1px solid var(--border);
  color:var(--text);
  padding:6px 8px;
  border-radius:6px;
  font-size:11px;
  font-style:italic;
  font-family:inherit;
  resize:vertical;
  min-height:52px;
}
.li-note:focus{outline:none;border-color:var(--accent)}