@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #14163A;
  --ink-soft: #1E2150;
  --paper: #F4F5FA;
  --paper-card: #FFFFFF;
  --rule: #E7E8F0;
  --rule-soft: #F0F1F6;
  --green: #15803D;
  --gold: #4F46E5;
  --rust: #B91C1C;
  --amber: #B45309;
  --text: #171923;
  --muted: #6B7280;
  --muted-soft: #9AA0AC;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: 'Montserrat', sans-serif; }
a { text-decoration: none; color: inherit; }
input, select, button, textarea { font-family: 'Montserrat', sans-serif; font-size: 13.5px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
button { cursor: pointer; }
.muted { color: var(--muted); }
.muted.small, .small { font-size: 12px; }
.green { color: var(--green); }
.rust { color: var(--rust); }
.gold-text { color: var(--gold); }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.right { text-align: right; }
.center { text-align: center; }
.icon { display: inline-block; vertical-align: -3px; }

/* ---------- Base form fields (applies everywhere unless a more specific
   class overrides it — .checkbox-label, .bs-row, .search-box, etc. all
   still win over these plain-element defaults) ---------- */
label { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 14px 0 6px; letter-spacing: 0.01em; }
label:first-child { margin-top: 0; }
input[type=text], input[type=number], input[type=date], input[type=email], input[type=password], input[type=tel], input[type=url], select, textarea {
  display: block; width: 100%; border: 1px solid var(--rule); background: var(--paper-card); border-radius: 8px;
  padding: 10px 12px; font-size: 13.5px; color: var(--text); transition: border-color 0.15s, box-shadow 0.15s;
}
input[type=text]:hover, input[type=number]:hover, input[type=date]:hover, input[type=email]:hover, input[type=password]:hover, select:hover, textarea:hover {
  border-color: #C9CCE0;
}
input[type=text]:focus, input[type=number]:focus, input[type=date]:focus, input[type=email]:focus, input[type=password]:focus, select:focus, textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(79,70,229,0.12); outline: none;
}
input[type=file] { display: block; width: 100%; font-size: 13px; padding: 8px 0; }
input::placeholder, textarea::placeholder { color: var(--muted-soft); }
select { cursor: pointer; }
textarea { resize: vertical; min-height: 70px; }

/* ---------- Layout ---------- */
.app-wrap { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: var(--ink); padding: 22px 14px; display: flex; flex-direction: column; flex-shrink: 0; }
.brand-row { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.brand-mark { width: 36px; height: 36px; border-radius: 9px; background: var(--gold); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.logo-placeholder { width: 168px; height: 64px; border: 1.5px dashed var(--doc-accent, #C9CCE0); opacity: 0.55; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--doc-accent-dark, var(--muted-soft)); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(255,255,255,0.6); }
.brand-name { color: #fff; font-weight: 700; font-size: 16px; }
.brand-sub { color: #7D80A8; font-size: 11px; }
.company-box { margin-top: 16px; background: var(--ink-soft); border: 1px solid #2A2D63; color: #fff; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; font-weight: 500; }
.side-nav { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.nav-group-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: #7D80A8; margin: 14px 0 5px 10px; }
.nav-group-label:first-child { margin-top: 0; }
.side-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: #C7C9E6; }
.side-nav a:hover { background: var(--ink-soft); }
.side-nav a.active { background: var(--gold); color: #fff; }
.nav-submenu summary { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: #C7C9E6; cursor: pointer; list-style: none; }
.nav-submenu summary::-webkit-details-marker { display: none; }
.nav-submenu summary::after { content: '›'; margin-left: auto; transform: rotate(90deg); transition: transform 0.15s; font-size: 15px; }
.nav-submenu[open] summary::after { transform: rotate(270deg); }
.nav-submenu summary:hover { background: var(--ink-soft); }
.nav-submenu summary.active { background: var(--gold); color: #fff; }
.nav-children { display: flex; flex-direction: column; padding: 2px 0 2px 30px; }
.nav-children a { padding: 7px 10px; border-radius: 7px; font-size: 12.5px; color: #A9ABD1; }
.nav-children a:hover { background: var(--ink-soft); color: #fff; }
.nav-children a.active { background: rgba(79,70,229,0.35); color: #fff; font-weight: 600; }
.sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid #23255C; }
.logout-link { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #9799C4; font-size: 12.5px; font-weight: 500; }
.logout-link:hover { color: #fff; }
.main { flex: 1; padding: 28px 36px; overflow-y: auto; }

/* ---------- Page header ---------- */
.page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.eyebrow { color: var(--gold); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.page-header h1 { font-size: 23px; margin: 0; font-weight: 700; }
.page-actions { display: flex; gap: 10px; }

/* ---------- Buttons ---------- */
.btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--gold); color: #fff; border: none; border-radius: 8px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; }
.btn-primary:hover { background: #433BC9; }
.btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; }
.btn-ghost:hover { background: var(--rule-soft); }
.icon-btn { background: var(--paper); border: 1px solid var(--rule); border-radius: 7px; padding: 6px 9px; color: var(--gold); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.icon-btn-rust { background: var(--paper); border: 1px solid var(--rule); border-radius: 7px; padding: 6px 9px; color: var(--rust); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }

/* ---------- KPI cards ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi-card { background: var(--paper-card); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; }
.kpi-top { font-size: 13px; color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.kpi-icon-badge { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-icon-badge.tone-green { background: #DCFCE7; color: var(--green); }
.kpi-icon-badge.tone-rust { background: #FEE2E2; color: var(--rust); }
.kpi-icon-badge.tone-gold { background: #EEECFD; color: var(--gold); }
.kpi-value { font-size: 22px; font-weight: 700; margin-top: 12px; font-variant-numeric: tabular-nums; }
.kpi-footnote { font-size: 11px; color: var(--muted-soft); margin-top: 6px; }

/* ---------- Cards ---------- */
.card { background: var(--paper-card); border: 1px solid var(--rule); border-radius: 12px; padding: 20px 22px; margin-bottom: 18px; }
.settings-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; border-bottom: 1px solid var(--rule); padding-bottom: 0; }
.settings-tab-link { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.settings-tab-link:hover { color: var(--ink); }
.settings-tab-link.active { color: var(--gold); border-bottom-color: var(--gold); }
.card-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.card-title-row { display: flex; justify-content: space-between; align-items: center; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
.empty-state { padding: 28px 12px; text-align: center; color: var(--muted-soft); font-size: 13.5px; }

/* ---------- Tables ---------- */
.ledger-table { width: 100%; border-collapse: collapse; }
.ledger-table th { text-align: left; font-size: 11px; color: var(--muted-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0 8px 10px; border-bottom: 1px solid var(--rule); }
.ledger-table td { padding: 12px 8px; font-size: 13.5px; border-bottom: 1px solid var(--rule-soft); }
.vat-tag { font-size: 9.5px; background: #EEECFD; color: var(--gold); padding: 2px 6px; border-radius: 4px; margin-left: 8px; font-weight: 700; }

/* ---------- Pills / filters ---------- */
.pill-row { display: flex; gap: 8px; margin-bottom: 16px; }
.pill { background: var(--paper-card); border: 1px solid var(--rule); color: var(--muted); border-radius: 20px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; }
.pill.active { background: var(--gold); border-color: var(--gold); color: #fff; }
.filter-row { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.search-box { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; }
.search-box input { width: 100%; background: var(--paper-card); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px; }
.filter-row select { background: var(--paper-card); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px; }

/* ---------- Receipt vault ---------- */
.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.receipt-card { display: block; background: var(--paper-card); border: 1px solid var(--rule); border-radius: 10px; padding: 8px; box-shadow: 0 2px 6px rgba(20,22,58,0.06); transition: transform 0.15s, box-shadow 0.15s; position: relative; }
.receipt-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(20,22,58,0.12); }
.receipt-card img { width: 100%; height: 140px; object-fit: cover; border-radius: 6px; display: block; }
.receipt-tape { display: none; }
.receipt-caption { padding: 8px 4px 2px; display: flex; flex-direction: column; gap: 2px; }

/* ---------- Modal / overlay ---------- */
.overlay { position: fixed; inset: 0; background: rgba(20,22,58,0.5); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { background: var(--paper-card); border-radius: 14px; padding: 26px; max-width: 440px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-head h2 { font-size: 18px; margin: 0; font-weight: 700; }
.modal label { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin: 12px 0 5px; }
.modal input[type=text], .modal input[type=number], .modal input[type=date], .modal select, .modal input[type=file] {
  width: 100%; border: 1px solid var(--rule); background: var(--paper); border-radius: 8px; padding: 9px 11px;
}
.form-row { display: flex; gap: 12px; }
.form-row > div { flex: 1; }
.checkbox-label { display: flex; align-items: center; gap: 8px; margin-top: 14px; cursor: pointer; }

/* ---------- Balance sheet ---------- */
.bs-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.bs-name { flex: 2; border: 1px solid var(--rule); border-radius: 7px; padding: 7px 9px; }
.bs-amount { flex: 1; border: 1px solid var(--rule); border-radius: 7px; padding: 7px 9px; text-align: right; font-variant-numeric: tabular-nums; }
.bs-total { border-top: 1px solid var(--rule); margin-top: 10px; padding-top: 10px; display: flex; justify-content: space-between; font-weight: 700; font-variant-numeric: tabular-nums; }
.balance-check { display: flex; justify-content: space-between; align-items: center; }

/* ---------- Budget ---------- */
.budget-line { margin-bottom: 18px; }
.budget-line-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.progress-track { background: var(--rule-soft); border-radius: 20px; height: 8px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 20px; }
.progress-fill.green { background: var(--green); }
.progress-fill.rust { background: var(--rust); }
.over-note { font-size: 11px; color: var(--rust); margin-top: 4px; }
.budget-edit-row { display: flex; gap: 8px; margin-top: 8px; }
.budget-edit-row input { flex: 1; border: 1px solid var(--rule); border-radius: 7px; padding: 6px 9px; font-variant-numeric: tabular-nums; }

/* ---------- Settings ---------- */
.settings-form { display: flex; gap: 10px; }
.settings-form input { flex: 1; border: 1px solid var(--rule); border-radius: 8px; padding: 9px 11px; }
.settings-form-stack { display: flex; flex-direction: column; max-width: 320px; }
.settings-form-stack input, .settings-form-stack textarea { border: 1px solid var(--rule); border-radius: 8px; padding: 9px 11px; font-family: 'Montserrat', sans-serif; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-paid { background: #DCFCE7; color: var(--green); }
.badge-unpaid { background: #FEE2E2; color: var(--rust); }
.badge-partial { background: #FEF3C7; color: var(--amber); }

/* ---------- Invoice builder / view ---------- */
.invoice-item-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.invoice-item-table th { text-align: left; font-size: 11px; color: var(--muted-soft); font-weight: 700; text-transform: uppercase; padding: 0 6px 8px; }
.invoice-item-table td { padding: 6px; }
.invoice-item-table input { width: 100%; border: 1px solid var(--rule); border-radius: 7px; padding: 7px 8px; }
.invoice-totals { max-width: 320px; margin-left: auto; margin-top: 16px; }
.invoice-totals > div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; border-bottom: 1px solid var(--rule-soft); }
.invoice-totals .grand { font-weight: 700; font-size: 16px; border-bottom: none; border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 10px; font-variant-numeric: tabular-nums; }

/* ---------- Reports ---------- */
.report-links { display: flex; flex-wrap: wrap; gap: 10px; }
.report-link { display: inline-flex; align-items: center; gap: 8px; background: #EEECFD; color: var(--gold); border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 600; }
.report-link:hover { background: #E1DDFB; }
.filter-row label { display: block; margin-bottom: 3px; }
.export-btn-group { display: inline-flex; gap: 6px; }
.export-btn-group .icon-btn { font-size: 11.5px; padding: 5px 8px; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.report-card { display: flex; gap: 14px; align-items: flex-start; background: var(--paper-card); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; transition: border-color 0.15s, transform 0.15s; }
.report-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.report-card-title { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }

/* ---------- Flash / alerts ---------- */
.flash { background: #EEECFD; color: #3730A3; padding: 10px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 13px; font-weight: 500; }
.alert-error { background: #FEE2E2; color: var(--rust); padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; }

/* ---------- Print documents (Invoices / POs / Receipts / Quotations) ---------- */
/* Each document type gets its own accent identity via a body class. */
.print-body { background: #E4E5EF; --doc-accent: var(--gold); --doc-accent-dark: #3730A3; --doc-tint: #EEF0FF; --doc-tint-strong: #E0E4FF; --doc-border: #C7CCF7; }
.print-body.doc-invoice { --doc-accent: #4F46E5; --doc-accent-dark: #3730A3; --doc-tint: #EEF0FF; --doc-tint-strong: #E0E4FF; --doc-border: #C7CCF7; }
.print-body.doc-quote { --doc-accent: #0D9488; --doc-accent-dark: #0F766E; --doc-tint: #ECFDFA; --doc-tint-strong: #D3F5EF; --doc-border: #9FE3D8; }
.print-body.doc-po { --doc-accent: #C2660A; --doc-accent-dark: #9A4E08; --doc-tint: #FEF3E2; --doc-tint-strong: #FCE6C7; --doc-border: #F3C382; }
.print-body.doc-receipt { --doc-accent: #15803D; --doc-accent-dark: #14532D; --doc-tint: #EAFBF0; --doc-tint-strong: #D3F5DE; --doc-border: #9FE0B7; }
.print-body.doc-credit-note { --doc-accent: #BE123C; --doc-accent-dark: #881337; --doc-tint: #FFF1F3; --doc-tint-strong: #FECDD8; --doc-border: #FCA5B8; }

.print-sheet { background: var(--paper-card); max-width: 760px; margin: 32px auto; border-radius: 14px; border: 1px solid var(--rule); box-shadow: 0 8px 30px rgba(20,22,58,0.14); overflow: hidden; position: relative; }
.print-sheet::before { content: ''; display: block; height: 7px; background: linear-gradient(90deg, var(--doc-accent), var(--doc-accent-dark)); }
.print-sheet-inner { padding: 0 46px 34px; }

.print-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin: 0 -46px 26px; padding: 30px 46px 24px; background: linear-gradient(160deg, var(--doc-tint) 0%, var(--paper-card) 100%); border-bottom: 2px solid var(--doc-accent); }
.print-brand-name { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.print-brand-sub { font-size: 12px; color: var(--muted); margin-top: 4px; max-width: 260px; line-height: 1.5; }
.print-doc-title { text-align: right; }
.print-doc-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--doc-accent-dark); margin-bottom: 6px; }
.print-doc-number { font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: 24px; font-weight: 700; color: var(--ink); }
.print-doc-title .status-chip { margin-top: 10px; }

.status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border: 1px solid transparent; }
.status-chip.st-paid, .status-chip.st-accepted, .status-chip.st-converted { background: #DCFCE7; color: #166534; border-color: #A7E8BE; }
.status-chip.st-unpaid, .status-chip.st-draft, .status-chip.st-declined { background: #FEE2E2; color: #991B1B; border-color: #F5B4B4; }
.status-chip.st-partial, .status-chip.st-sent { background: #FEF3C7; color: #92400E; border-color: #F6DC96; }
.status-chip.st-expired { background: var(--rule); color: var(--muted); border-color: var(--rule-soft); }

.print-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-bottom: 30px; }
.print-meta-block { background: var(--doc-tint); border-radius: 10px; padding: 14px 16px; border: 1px solid var(--doc-border); }
.print-meta-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--doc-accent-dark); opacity: 0.75; margin-bottom: 6px; }
.print-meta-value { font-size: 13.5px; line-height: 1.55; }
.print-meta-value strong { font-size: 14.5px; }

.doc-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; border: 1px solid var(--doc-border); }
.doc-table thead th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; background: var(--doc-accent); padding: 11px 14px; border-right: 1px solid rgba(255,255,255,0.2); }
.doc-table thead th:last-child { text-align: right; border-right: none; }
.doc-table thead th.right { text-align: right; }
.doc-table tbody td { padding: 13px 14px; font-size: 13.5px; border-bottom: 1px solid var(--doc-border); border-right: 1px solid var(--doc-tint-strong); }
.doc-table tbody td:last-child { border-right: none; }
.doc-table tbody tr:nth-child(even) { background: var(--doc-tint); }
.doc-table tbody tr:last-child td { border-bottom: none; }

.print-totals-wrap { display: flex; justify-content: flex-end; margin-top: 18px; }
.print-totals { width: 100%; max-width: 300px; background: var(--doc-tint); border-radius: 10px; padding: 6px 18px; border: 1px solid var(--doc-border); }
.print-totals > div { display: flex; justify-content: space-between; padding: 9px 0; font-size: 13.5px; border-bottom: 1px solid var(--doc-border); }
.print-totals > div:last-child { border-bottom: none; }
.print-totals .grand { font-weight: 800; font-size: 17px; color: var(--ink); padding-top: 12px; border-top: 1.5px solid var(--doc-accent); margin-top: 2px; }

.print-note-box { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 10px; padding: 14px 16px; margin-top: 24px; font-size: 13px; color: #78350F; }
.print-terms-box { background: var(--doc-tint); border: 1px solid var(--doc-border); border-left: 4px solid var(--doc-accent); border-radius: 8px; padding: 16px 18px; margin-top: 20px; }
.print-terms-box .print-meta-label { color: var(--doc-accent-dark); margin-bottom: 8px; }
.print-terms-box .terms-body { font-size: 12.5px; line-height: 1.85; color: var(--text); white-space: pre-line; }
.print-footer { margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--doc-border); color: var(--muted-soft); font-size: 11px; text-align: center; line-height: 1.7; }
.print-footer .thanks { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }

@media print {
  body { background: #fff; }
  .no-print, .sidebar, .flash { display: none !important; }
  .print-sheet { box-shadow: none; margin: 0; max-width: 100%; border-radius: 0; }
  .print-sheet::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-table thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report-page { page-break-after: always; }
  .report-page:last-child { page-break-after: auto; }
}
.report-page { padding: 50px 55px; min-height: 900px; position: relative; }
.report-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 900px; gap: 6px; }
.report-cover .company-title { font-size: 21px; font-weight: 800; margin-top: 40px; }
.report-cover .pin { font-size: 13px; color: var(--muted); margin-bottom: 60px; font-variant-numeric: tabular-nums; }
.report-cover .doc-title { font-size: 17px; font-weight: 700; line-height: 1.5; margin: 60px 0; }
.report-cover .auditors-block { margin-top: 100px; font-size: 13px; line-height: 1.8; }
.report-heading { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 18px; }
.report-subheading { font-size: 13.5px; font-weight: 700; margin: 20px 0 8px; }
.report-doc-header { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.6; margin-bottom: 26px; }
.report-page-number { position: absolute; top: 20px; right: 30px; font-size: 11px; color: var(--muted-soft); }
.toc-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dotted var(--rule); font-size: 13px; }
.signature-block { margin-top: 60px; }
.signature-line { border-top: 1px solid var(--text); width: 240px; margin-top: 46px; padding-top: 6px; font-size: 12px; }
.placeholder-note { background: #FEF3C7; border: 1px dashed var(--amber); border-radius: 8px; padding: 14px 16px; font-size: 12px; color: #7C4A03; margin: 14px 0; }
.numbered-note { margin-bottom: 20px; font-size: 12.5px; line-height: 1.7; }
.numbered-note .note-num { font-weight: 700; }

/* ---------- Login ---------- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--ink); }
.login-split { display: flex; min-height: 100vh; width: 100%; }

.login-features { flex: 1.1; background: var(--ink); color: #fff; padding: 64px 60px; display: flex; flex-direction: column; justify-content: center; }
.login-features .brand-mark { width: 44px; height: 44px; font-size: 16px; margin-bottom: 20px; }
.login-features h1 { font-size: 28px; font-weight: 800; margin: 0 0 12px; }
.login-tagline { color: #B7BAE0; font-size: 15px; line-height: 1.6; max-width: 420px; margin: 0 0 36px; }
.login-feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 22px; max-width: 440px; }
.login-feature-list li { display: flex; gap: 14px; align-items: flex-start; }
.login-feature-list svg { flex-shrink: 0; margin-top: 2px; color: var(--gold); }
.login-feature-list strong { display: block; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.login-feature-list span { display: block; font-size: 12.5px; color: #A6A9D6; line-height: 1.5; }

.login-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--paper); }
.login-card { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 36px 32px; width: 100%; max-width: 340px; text-align: center; box-shadow: 0 4px 20px rgba(20,22,58,0.06); }
.login-card-mark { margin: 0 auto; }
.login-card h1, .login-card h2 { margin: 12px 0 2px; font-size: 21px; font-weight: 700; }
.login-card label { display: block; text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; margin: 14px 0 5px; }
.login-card input { width: 100%; border: none; border-bottom: 2px solid var(--rule); background: transparent; border-radius: 0; padding: 10px 2px; transition: border-color 0.15s; }
.login-card input:focus { outline: none; border-bottom-color: var(--gold); }
/* Chrome/Safari force their own light-blue fill on autofilled fields via an internal inset
   box-shadow that a plain `background` rule can't override — matching it with our own
   white inset shadow is the only reliable way to keep the card's own white background. */
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus,
.login-card input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}

@media (max-width: 900px) {
  .login-features { display: none; }
  .login-form-panel { background: #fff; padding: 24px; }
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 6px; }

/* ---------- Mobile responsiveness ---------- */
.pill-row { flex-wrap: wrap; }
.page-actions { flex-wrap: wrap; }
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  .app-wrap { display: block; }

  .mobile-topbar {
    display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40;
    background: var(--ink); color: #fff; padding: 12px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  .mobile-topbar .brand-mark { width: 30px; height: 30px; font-size: 12px; }
  .mobile-topbar .mobile-brand-name { font-weight: 700; font-size: 15px; }
  #sidebarToggle { background: none; border: none; color: #fff; padding: 4px; display: flex; cursor: pointer; }

  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; z-index: 60; width: 82vw; max-width: 300px;
    transform: translateX(-100%); transition: transform 0.25s ease; overflow-y: auto; padding-bottom: 24px;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.open {
    display: block; position: fixed; inset: 0; background: rgba(20,22,58,0.5); z-index: 55;
  }

  .main { padding: 18px 14px 40px; }

  .two-col, .print-meta-grid { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; gap: 0; }
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

  .card { padding: 16px; overflow-x: auto; }
  .ledger-table, .doc-table, .invoice-item-table { min-width: 560px; }

  .page-header { align-items: flex-start; }
  .page-header h1 { font-size: 19px; }
  .page-actions { width: 100%; }
  .page-actions > a, .page-actions > button, .page-actions form { flex: 1 1 auto; }

  .modal { max-width: 94vw; padding: 20px; max-height: 85vh; }
  .overlay { padding: 10px; align-items: flex-end; }
  @media (min-height: 600px) { .overlay { align-items: center; } }

  .settings-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .settings-tab-link { flex-shrink: 0; }

  .print-sheet { margin: 12px auto; }
  .print-sheet-inner { padding: 0 20px 24px; }
  .print-head { margin: 0 -20px 20px; padding: 22px 20px 18px; }
  .print-doc-number { font-size: 19px; }

  .report-grid { grid-template-columns: 1fr; }
  .bs-row { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .login-card { padding: 28px 20px; }
}

/* ---------- Dashboard v2 ---------- */
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.dash-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 18px; }
.dash-kpi-card { border-radius: 14px; padding: 18px 20px; background: var(--paper-card); border: 1px solid var(--rule); }
.dash-kpi-card.tone-sales { background: #DFF7E8; border-color: #B8ECC9; }
.dash-kpi-card.tone-expenses { background: #FBE2DE; border-color: #F4BFB6; }
.dash-kpi-card.tone-purchases { background: #DEE8FC; border-color: #B9CBF7; }
.dash-kpi-hero { border: none; color: #fff; }
.dash-kpi-hero.tone-profit { background: linear-gradient(135deg, #16A34A, #14532D); }
.dash-kpi-hero.tone-loss { background: linear-gradient(135deg, #EA580C, #9A3412); }
.dash-kpi-hero .dash-kpi-top span { color: rgba(255,255,255,0.85); }
.dash-kpi-hero .dash-kpi-footnote { color: rgba(255,255,255,0.8); }

.dash-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; }
.dash-kpi-icon.tone-sales { background: #16A34A; }
.dash-kpi-icon.tone-expenses { background: #DC2626; }
.dash-kpi-icon.tone-purchases { background: #2563EB; }
.dash-kpi-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }

.dash-kpi-value { font-size: 22px; font-weight: 800; color: var(--ink); }
.dash-kpi-hero .dash-kpi-value { color: #fff; }
.dash-kpi-change { font-size: 12px; font-weight: 600; margin-top: 6px; }
.dash-kpi-change.up { color: var(--green); }
.dash-kpi-change.down { color: var(--rust); }
.dash-kpi-footnote { font-size: 11.5px; color: var(--muted-soft); margin-top: 6px; }
.dash-progress { width: 100%; height: 6px; border-radius: 4px; background: var(--rule-soft); margin-top: 10px; overflow: hidden; }
.dash-kpi-card:not(.dash-kpi-hero) .dash-progress { background: rgba(0,0,0,0.08); }
.dash-progress-fill { height: 100%; background: #FDBA74; border-radius: 4px; }
.dash-progress-fill.tone-indigo { background: var(--gold); }

.dash-donut-wrap { position: relative; width: 180px; height: 180px; margin: 0 auto; }
.dash-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dash-donut-center strong { font-size: 17px; }
.dash-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; font-size: 12px; color: var(--muted); }
.dash-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }

.dash-risk-list, .dash-insight-list, .dash-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dash-risk-list li { display: flex; gap: 10px; align-items: flex-start; }
.dash-risk-list .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.dash-risk-list .dot.rust { background: var(--rust); }
.dash-risk-list .dot.gold { background: var(--gold); }
.dash-risk-list .dot.indigo { background: #4F46E5; }
.dash-risk-list strong { display: block; font-size: 13.5px; }
.dash-risk-list span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

.dash-insight-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.dash-insight-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; }
.dash-insight-icon.tone-rust { background: #FCEBE8; color: var(--rust); }
.dash-insight-icon.tone-gold { background: #FBF3E1; color: var(--gold); }
.dash-insight-icon.tone-green { background: #E9F7EF; color: var(--green); }

.dash-activity-list li { display: flex; gap: 10px; align-items: flex-start; border-bottom: 1px solid var(--rule-soft); padding-bottom: 12px; }
.dash-activity-list li:last-child { border-bottom: none; padding-bottom: 0; }
.dash-activity-list .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.dash-activity-list .dot.green { background: var(--green); }
.dash-activity-list .dot.rust { background: var(--rust); }
.dash-activity-list .dot.gold { background: var(--gold); }
.dash-activity-list strong { display: block; font-size: 13px; }
.dash-activity-list > li > div { flex: 1; }

.dash-due-row { display: flex; justify-content: space-around; text-align: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.dash-due-row div { display: flex; flex-direction: column; }
.dash-due-row strong { font-size: 20px; }
.dash-due-row span { font-size: 11px; color: var(--muted-soft); text-transform: uppercase; letter-spacing: 0.03em; }

.dash-bar-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }

@media (max-width: 900px) {
  .three-col { grid-template-columns: 1fr; }
}