:root{--accent:#1769aa;--border:#d6d6d6;--muted:#6b7280;--surface:#fff;--soft:#fafafa;--text:#20242a}
*{box-sizing:border-box}body{background:#f7f8fa;color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer}
.brand{font-weight:700;letter-spacing:-.3px}.brand span{color:#1769aa}.topnav a{padding:8px 10px;border-radius:2px}.topnav a.nav-active{background:#eaf3fb;color:#145a91}
.layout{min-height:calc(100vh - 54px)}.sidebar{position:relative}.sidebar-foot{padding:18px 14px;color:#818894;font-size:11px;line-height:1.5;border-top:1px solid #e5e7eb;margin-top:18px}
.side-button{width:100%;text-align:left;background:transparent;border:0;color:inherit}.content{max-width:1500px;margin:0 auto;padding-bottom:40px}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}.crumb{font-size:12px;color:#818894;margin-bottom:6px}.page-head h1{font-size:25px;margin:0 0 5px}.subhead{font-size:13px;color:var(--muted);margin:0}.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid #cfd4da;background:#fff;color:#2b3037;padding:8px 12px;border-radius:2px;font-size:13px;line-height:1.3}.btn:hover{background:#f3f5f7}.btn-dark{background:#222b35;border-color:#222b35;color:#fff}.btn-dark:hover{background:#111820}.btn-danger{color:#b42318;border-color:#e6b7b4}.btn-small{padding:5px 8px;font-size:12px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.stat,.panel,.table-panel{background:#fff;border:1px solid var(--border);border-radius:3px}.stat{padding:16px}.stat-label{color:#737b86;font-size:12px}.stat-value{font-size:25px;font-weight:650;margin:8px 0}.stat-note{font-size:12px;color:#737b86}.stat-note.good{color:#18794e}
.panel{padding:18px;margin-bottom:18px}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 15px}.panel-title h2,.panel h2{font-size:16px;margin:0}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.toolbar input,.toolbar select{max-width:100%;width:auto;min-width:155px}.toolbar .search{min-width:220px;flex:1}
input,select,textarea{width:100%;border:1px solid #cfd4da;border-radius:2px;padding:8px 9px;background:#fff;color:#20242a;min-height:34px}textarea{resize:vertical}input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid #78b8ec;outline-offset:1px}label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#414750}label input,label select,label textarea{font-size:13px}
.table-panel{overflow:hidden}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;background:#fafafa;color:#6b7280;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.3px}th,td{padding:12px 14px;border-bottom:1px solid #eceff2;white-space:nowrap}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fcfcfd}.empty-state{text-align:center;padding:38px 15px;color:#737b86}.empty-state strong{display:block;color:#343a40;font-size:15px;margin-bottom:5px}.muted{color:var(--muted)}.right{text-align:right}.mono{font-variant-numeric:tabular-nums}.status{display:inline-flex;align-items:center;padding:4px 7px;border-radius:3px;font-size:11px;font-weight:600}.status-draft{background:#f0f1f3;color:#535a63}.status-sent{background:#e8f2fd;color:#1b5e98}.status-paid{background:#e5f5ec;color:#176b43}.status-overdue{background:#fdebea;color:#a12b25}.row-actions{display:flex;gap:5px;align-items:center}.table-link{border:0;background:transparent;color:#1769aa;padding:0;text-align:left;font-weight:600}.table-link:hover{text-decoration:underline}
.split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:18px}.bar-list{display:grid;gap:13px}.bar-row{display:grid;grid-template-columns:85px 1fr 95px;align-items:center;gap:10px;font-size:12px}.bar-track{height:9px;background:#edf0f3;border-radius:2px;overflow:hidden}.bar-fill{height:100%;background:#1769aa}.bar-amount{text-align:right;font-variant-numeric:tabular-nums}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quick-actions .btn{text-align:left;padding:12px}.note-box{background:#f6f9fc;border:1px solid #dce8f3;padding:12px;font-size:12px;line-height:1.5;color:#4a5563}
.modal-backdrop{display:none;position:fixed;inset:0;background:#151a2080;z-index:1000;align-items:center;justify-content:center;padding:20px}.modal-backdrop.open{display:flex}.modal{background:#fff;border:1px solid #cfd4da;border-radius:4px;width:min(650px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:20px;box-shadow:0 12px 40px #0002}.invoice-modal{width:min(920px,100%)}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.modal-head h2{font-size:18px;margin:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-bottom:18px}.span-two{grid-column:span 2}.items-heading{display:flex;align-items:center;justify-content:space-between;margin:20px 0 10px}.items-heading h3{font-size:14px;margin:0}.line-items-wrap{overflow:auto;border:1px solid #e1e5e9;margin-bottom:16px}.line-items{min-width:650px}.line-items th,.line-items td{padding:8px}.line-items input{min-width:70px;padding:6px}.line-items .item-description{min-width:180px}.line-items .item-remove{border:0;background:none;color:#a12b25}.totals-preview{margin-left:auto;width:min(320px,100%);font-size:13px;line-height:2}.total-line{display:flex;justify-content:space-between;gap:20px}.total-line.final{font-size:16px;font-weight:700;border-top:1px solid #d6d6d6;padding-top:7px;margin-top:5px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:14px;border-top:1px solid #e5e7eb}
.toast{position:fixed;bottom:18px;right:18px;background:#222b35;color:white;padding:11px 15px;border-radius:3px;font-size:13px;opacity:0;pointer-events:none;transform:translateY(8px);transition:.18s;z-index:2000;max-width:min(420px,calc(100vw - 36px))}.toast.show{opacity:1;transform:translateY(0)}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.settings-grid .panel{margin:0}.settings-form{display:grid;gap:13px}.field-help{font-size:11px;color:#737b86}.client-card{display:flex;flex-direction:column;gap:5px}.client-name{font-weight:650}.client-meta{font-size:12px;color:#737b86;overflow-wrap:anywhere}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.invoice-paper{background:#fff;border:1px solid #d6d6d6;padding:28px;max-width:850px;margin:auto}.invoice-paper h2{font-size:24px;margin:0 0 8px}.paper-top{display:flex;justify-content:space-between;gap:25px;border-bottom:2px solid #1769aa;padding-bottom:20px;margin-bottom:22px}.paper-meta{text-align:right}.paper-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:25px}.paper-label{font-size:11px;color:#737b86;text-transform:uppercase;margin-bottom:6px}.paper-total{width:min(330px,100%);margin:20px 0 0 auto}.paper-notes{white-space:pre-wrap;margin-top:24px;font-size:12px}.report-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.report-metric{border:1px solid #e2e6ea;padding:14px}.report-metric strong{display:block;font-size:21px;margin-top:8px}
body.dark{background:#171a1f;color:#e7e9ec;--text:#e7e9ec;--surface:#22262d;--soft:#252a31;--border:#3a414b}body.dark .stat,body.dark .panel,body.dark .table-panel,body.dark .modal,body.dark .invoice-paper{background:#22262d;border-color:#3a414b;color:#e7e9ec}body.dark th{background:#292e36;color:#b4bbc5}body.dark td,body.dark th{border-color:#373d46}body.dark input,body.dark select,body.dark textarea,body.dark .btn{background:#252a31;color:#e7e9ec;border-color:#454d58}body.dark .btn-dark{background:#1769aa;border-color:#1769aa}body.dark .topnav a.nav-active{background:#233c50}body.dark .note-box{background:#202e3a;border-color:#344a5c;color:#d2dae2}body.dark .line-items-wrap{border-color:#3a414b}body.dark .modal-actions{border-color:#3a414b}
@media(max-width:1000px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}}
@media(max-width:700px){.page-head{flex-direction:column}.content{padding:16px}.stats{gap:8px}.stat{padding:12px}.stat-value{font-size:21px}.form-grid,.settings-grid,.detail-grid,.paper-columns{grid-template-columns:1fr}.span-two{grid-column:auto}.modal-backdrop{padding:8px}.modal{padding:15px;max-height:calc(100vh - 16px)}.quick-actions{grid-template-columns:1fr 1fr}.paper-top{flex-direction:column}.paper-meta{text-align:left}.report-metrics{grid-template-columns:1fr}.top-right{display:none}}
@media print{body{background:#fff!important;color:#111!important}.topbar,.sidebar,.page-head,.no-print,.toast{display:none!important}.layout,main,.content{display:block!important;margin:0!important;padding:0!important;max-width:none!important}.invoice-paper{border:0!important;padding:0!important;max-width:none!important}.status{border:1px solid #999;background:#fff!important;color:#111!important}}

.invoice-client-picker{display:flex;flex-direction:column;gap:10px}.client-picker-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}.client-picker-tools .btn{min-height:34px;white-space:nowrap}.invoice-client-picker label{min-width:0}@media(max-width:520px){.client-picker-tools{grid-template-columns:1fr}.client-picker-tools .btn{width:100%}}

/* Invoice client autocomplete */
.invoice-client-picker{position:relative}.client-picker-tools{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}.client-picker-tools label{min-width:0}.client-picker-tools .btn{min-height:34px;white-space:nowrap}.client-suggestions{position:absolute;z-index:1100;left:0;right:calc(130px + 10px);top:100%;margin-top:3px;background:var(--surface,#fff);border:1px solid var(--border,#d6d6d6);box-shadow:0 8px 22px #0002;max-height:240px;overflow:auto}.client-suggestion{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:9px 11px;text-align:left;border:0;border-bottom:1px solid #eceff2;background:transparent;color:inherit}.client-suggestion:hover,.client-suggestion:focus{background:#eef5fb;outline:none}.client-suggestion strong{font-size:13px}.client-suggestion span,.client-suggestion-empty{font-size:11px;color:var(--muted,#6b7280);white-space:normal}.client-suggestion-empty{padding:12px}.invoice-client-picker .field-help{font-size:11px;color:var(--muted,#6b7280)}@media(max-width:520px){.client-picker-tools{grid-template-columns:1fr}.client-picker-tools .btn{width:100%}.client-suggestions{right:0}}
