:root{--ink:#17201d;--muted:#6c756f;--line:#dfe4e0;--paper:#f5f7f5;--white:#fff;--green:#176b4d;--green2:#dff1e8;--red:#a43a3a;--amber:#a86412;--blue:#285c8f;--radius:6px;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--paper);font-size:14px}
*{box-sizing:border-box}body{margin:0;display:grid;grid-template-columns:230px 1fr;min-height:100vh}button,input,select,textarea{font:inherit}.sidebar{position:fixed;inset:0 auto 0 0;width:230px;background:#18251f;color:#eaf0ec;padding:20px 14px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;padding:3px 8px 24px;border-bottom:1px solid #334139}.brand-mark{width:34px;height:34px;display:grid;place-items:center;background:#f0b949;color:#18251f;font-weight:800;border-radius:5px}.brand strong,.brand small{display:block}.brand small{color:#a7b5ad;margin-top:2px;font-size:11px}.sidebar nav{padding-top:20px;display:grid;gap:4px}.nav-item{height:42px;border:0;background:transparent;color:#b9c6bf;text-align:left;padding:0 12px;border-radius:5px;cursor:pointer;display:flex;align-items:center;gap:12px}.nav-item span{font-size:10px;color:#718078}.nav-item:hover,.nav-item.active{background:#2a3931;color:#fff}.nav-item.active{box-shadow:inset 3px 0 #f0b949}.sidebar-foot{margin-top:auto;padding:15px 10px;color:#b9c6bf;font-size:12px;line-height:1.5}.sidebar-foot small{color:#718078}.status-dot{display:inline-block;width:7px;height:7px;background:#55bd83;border-radius:50%;margin-right:7px}main{grid-column:2;padding:0 32px 40px;min-width:0}header{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:26px}.eyebrow{font-size:10px;font-weight:800;color:var(--green);margin:0 0 6px;letter-spacing:0}h1,h2,h3,p{margin-top:0}h1{font-size:25px;margin:0;letter-spacing:0}h2{font-size:20px;letter-spacing:0;margin-bottom:0}h3{font-size:14px;letter-spacing:0}.header-actions,.actions{display:flex;gap:8px}.btn{height:37px;padding:0 14px;border-radius:5px;border:1px solid transparent;font-weight:700;cursor:pointer;white-space:nowrap}.btn.primary{background:var(--green);color:white}.btn.secondary{background:white;border-color:var(--line);color:var(--ink)}.btn.danger{background:#fff0f0;color:var(--red);border-color:#efcece}.btn.small{height:30px;padding:0 10px;font-size:12px}.btn:disabled{opacity:.5;cursor:not-allowed}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}.metric{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:17px}.metric .label{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.metric strong{display:block;font-size:23px;margin-top:14px}.metric small{display:block;color:var(--muted);margin-top:4px}.metric .accent{width:8px;height:8px;border-radius:2px;background:var(--green)}.metric:nth-child(2) .accent{background:var(--blue)}.metric:nth-child(3) .accent{background:var(--amber)}.metric:nth-child(4) .accent{background:var(--red)}.section-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px}.section-head h2{font-size:16px}.toolbar{display:flex;gap:8px;align-items:center}.search{height:37px;width:230px;border:1px solid var(--line);border-radius:5px;padding:0 11px;background:white}.table-wrap{background:white;border:1px solid var(--line);border-radius:var(--radius);overflow:auto}table{width:100%;border-collapse:collapse;min-width:720px}th{height:38px;padding:0 14px;background:#edf1ee;color:#59645e;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:0}td{padding:12px 14px;border-top:1px solid #ebeeec;vertical-align:middle}tr:hover td{background:#fafcfb}.num{text-align:right;font-variant-numeric:tabular-nums}.muted{color:var(--muted)}.strong{font-weight:700}.badge{display:inline-flex;align-items:center;height:23px;padding:0 8px;border-radius:12px;font-size:11px;font-weight:700;background:#edf0ee;color:#59645e}.badge.posted{background:var(--green2);color:var(--green)}.badge.draft{background:#fff1d8;color:var(--amber)}.badge.sale{background:#e8f0f8;color:var(--blue)}.empty{padding:52px;text-align:center;color:var(--muted)}.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}.panel{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:17px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panel-head h2{font-size:15px}.alert-list{display:grid;gap:9px}.alert-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #edf0ee}.alert-row:last-child{border:0}.alert-row strong{font-size:12px}.alert-row small{color:var(--muted)}dialog{width:min(850px,calc(100vw - 40px));max-height:90vh;border:0;border-radius:7px;padding:0;box-shadow:0 24px 80px #0004}dialog::backdrop{background:#111a1699}.modal-head{height:76px;padding:17px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.icon-btn{width:32px;height:32px;border:1px solid var(--line);background:white;border-radius:5px;cursor:pointer}.modal-head .eyebrow{margin-bottom:4px}#modal-body{padding:20px;max-height:calc(90vh - 76px);overflow:auto}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:11px;font-weight:800;color:#59645e}.field input,.field select,.field textarea{width:100%;border:1px solid #ccd3ce;border-radius:5px;background:white;padding:9px 10px;min-height:38px}.field textarea{min-height:70px;resize:vertical}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.invoice-lines{margin-top:18px}.invoice-lines table{min-width:760px}.invoice-lines input,.invoice-lines select{width:100%;min-width:70px;border:1px solid #d5dbd7;border-radius:4px;padding:7px}.line-remove{border:0;background:transparent;color:var(--red);cursor:pointer;font-weight:800}.invoice-totals{margin:15px 0 0 auto;width:300px}.total-row{display:flex;justify-content:space-between;padding:6px 0}.total-row.grand{font-size:17px;font-weight:800;border-top:1px solid var(--ink);margin-top:5px;padding-top:10px}.notice{padding:11px 12px;background:#fff5dc;border-left:3px solid #d18a1b;color:#6d521d;margin-bottom:15px;font-size:12px;line-height:1.5}#toast{position:fixed;right:24px;bottom:24px;background:#17201d;color:white;padding:12px 16px;border-radius:5px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}#toast.show{opacity:1;transform:none}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.detail-box{background:#f3f6f4;padding:12px;border-radius:5px}.detail-box small{display:block;color:var(--muted);margin-bottom:5px}.detail-box strong{font-size:13px}.invoice-summary{display:grid;grid-template-columns:1fr 280px;gap:24px;margin-top:18px}.invoice-summary .totals{border-top:1px solid var(--line);padding-top:8px}
.settings-form{max-width:780px}.subtle{font-size:12px;color:var(--muted);line-height:1.5}.report-total td{font-weight:800;background:#f2f5f3}.warning-text{color:var(--amber);font-weight:700}.edit-product{min-width:52px}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
@media(max-width:900px){body{display:block}.sidebar{position:static;width:100%;height:auto;padding:12px}.brand{border:0;padding:0 4px 12px}.sidebar nav{display:flex;overflow:auto;padding:0}.nav-item{min-width:max-content}.sidebar-foot{display:none}main{padding:0 16px 30px}header{height:86px}.metrics{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.header-actions .secondary{display:none}}
@media(max-width:560px){.metrics{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.header-actions{display:none}.toolbar{width:100%;flex-wrap:wrap}.search{width:100%}.section-head{align-items:flex-start;gap:10px;flex-direction:column}.detail-grid{grid-template-columns:1fr}.invoice-summary{grid-template-columns:1fr}}

/* Scrollable grouped navigation */
.sidebar{min-height:0}.brand{flex:none;padding-bottom:20px}.sidebar nav{padding-top:12px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#55645c transparent}.sidebar-foot{flex:none;margin-top:8px;border-top:1px solid #334139}.nav-item{width:100%;height:39px}.menu-group-toggle{width:100%;height:39px;border:0;background:transparent;color:#e5ece8;padding:0 10px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800;cursor:pointer}.menu-group-toggle:hover{background:#223129}.menu-group-toggle b{font-size:16px;font-weight:400;color:#829087}.submenu{display:none;padding:1px 0 5px 10px}.menu-group.open .submenu{display:grid;gap:2px}.menu-group.open .menu-group-toggle b{transform:rotate(45deg)}.submenu .nav-item{height:35px;font-size:12px;padding-left:13px}
@media(max-width:900px){.menu-group{position:relative}.menu-group-toggle{min-width:max-content;padding:0 14px}.submenu{position:absolute;z-index:20;top:39px;left:0;min-width:190px;padding:6px;background:#18251f;border:1px solid #3b4941;box-shadow:0 10px 24px #0004}}

/* Keep modal actions aligned and fully inside the dialog. */
#modal-body>.form-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;min-width:0;background:#fff}
#modal-body>.form-actions .btn{flex:0 0 auto;height:38px;margin:0}
#modal-body>.form-actions:has(>.btn:nth-child(7)){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
#modal-body>.form-actions:has(>.btn:nth-child(7)) .btn{width:100%;min-width:0}
@media(max-width:700px){#modal-body>.form-actions{justify-content:stretch}#modal-body>.form-actions .btn{flex:1 1 calc(50% - 8px);min-width:130px}}
@media(max-width:700px){#modal-body>.form-actions:has(>.btn:nth-child(7)){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Keep every Accounts & Reports tab on one shared text column. */
.accounts-reports .submenu{padding-left:10px}
.accounts-reports .submenu .nav-item{display:grid;grid-template-columns:8px minmax(0,1fr);gap:8px;padding:0 10px;text-align:left;line-height:1.2}
.accounts-reports .submenu .nav-item::before{content:"";width:5px;height:5px;border-radius:50%;background:#65756c;justify-self:center}
.accounts-reports .submenu .nav-item.active::before{background:#f0b949}
.transport-payment-panel{margin-top:16px}
.transport-payment-panel table{min-width:520px}
.payment-balance{text-align:right}.payment-balance small{display:block;color:var(--muted);margin-bottom:4px}.payment-balance strong{font-size:18px;color:var(--green)}
.report-section{margin-top:22px}