/* =============================================================
   KwachaCloud — stylesheet
   Sections: tokens · layout · sidebar · topbar · cards · tables
             forms · modal · auth · onboarding · chat · toasts
   ============================================================= */

:root {
  --bg: #0e0f11;
  --bg2: #141518;
  --bg3: #1c1d22;
  --bg4: #232429;
  --bg5: #2a2b32;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);
  --text: #e8e9ec;
  --text2: #9a9ba8;
  --text3: #5c5d6e;
  --accent: #c8f06e;
  --accent2: #a8d44e;
  --accent-dim: rgba(200,240,110,0.12);
  --red: #ff6b6b;
  --red-dim: rgba(255,107,107,0.12);
  --green: #4ade80;
  --green-dim: rgba(74,222,128,0.12);
  --blue: #60a5fa;
  --blue-dim: rgba(96,165,250,0.12);
  --amber: #fbbf24;
  --amber-dim: rgba(251,191,36,0.12);
  --purple: #a78bfa;
  --purple-dim: rgba(167,139,250,0.12);
  --font-display: 'DM Serif Display', serif;
  --font-body: 'Instrument Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --r: 10px;
  --r2: 14px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; overflow: hidden; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg5); border-radius: 4px; }

/* ---------- LAYOUT ---------- */
.shell { display: flex; height: 100vh; }
.sidebar { width: 234px; background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; }
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.content { flex: 1; overflow-y: auto; padding: 24px; }
.page { display: none; }
.page.active { display: block; }
.page.fill { height: 100%; }

/* ---------- SIDEBAR ---------- */
.sb-logo { padding: 22px 20px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
/* The mark is wider than it is tall, so the chip follows its proportions
   rather than boxing it into a square and shrinking it to fit. */
.sb-logo-mark { height: 34px; background: #fff; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 5px 7px; }
.sb-logo-mark img { height: 100%; width: auto; display: block; }

/* The full lockup, for the screens that are a first impression of the brand:
   sign-in, account activation and the owner portal's sign-in. */
.brand-lockup { display: inline-block; width: fit-content; background: #fff; border-radius: 14px; padding: 16px 20px; align-self: flex-start; box-shadow: 0 2px 14px rgba(0,0,0,.25); }
.brand-lockup img { display: block; width: 168px; max-width: 100%; height: auto; }
.brand-lockup.sm { padding: 12px 15px; border-radius: 12px; }
.brand-lockup.sm img { width: 132px; }

/* The wordless mark on a chip, for the sign-in screens — the brand name is
   set in type beside it, so the lockup's own wordmark would only repeat it
   and cost vertical room the short-screen layout needs. */
.brand-chip { height: clamp(44px, 6vh, 54px); background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 7px 10px; box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.brand-chip img { height: 100%; width: auto; display: block; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand .sb-logo-name { font-size: 20px; }
.sb-logo-name { font-family: var(--font-display); font-size: 18px; color: var(--text); line-height: 1; }
.sb-logo-sub { font-size: 10px; color: var(--text3); letter-spacing: .06em; margin-top: 2px; }

.sb-company { margin: 12px 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; cursor: pointer; transition: border-color .2s; }
.sb-company:hover { border-color: var(--border2); }
.sb-company-label { font-size: 10px; color: var(--text3); letter-spacing: .06em; margin-bottom: 5px; }
.sb-company-name { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sb-company-name i { color: var(--text3); font-size: 10px; flex-shrink: 0; }
.sb-company-meta { font-size: 11px; color: var(--text2); margin-top: 3px; }

.sb-nav { flex: 1; overflow-y: auto; padding: 8px 10px; }
.sb-section { font-size: 10px; color: var(--text3); letter-spacing: .08em; padding: 14px 8px 6px; font-weight: 600; }
.sb-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--text2); font-size: 13px; transition: all .15s; margin-bottom: 1px; position: relative; }
.sb-item:hover { background: var(--bg3); color: var(--text); }
.sb-item.active { background: var(--accent-dim); color: var(--accent); }
.sb-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--accent); border-radius: 0 3px 3px 0; }
.sb-item i { width: 16px; text-align: center; font-size: 13px; }
.sb-tag { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .06em; background: var(--accent-dim); color: var(--accent); padding: 2px 6px; border-radius: 20px; }

.sb-footer { border-top: 1px solid var(--border); padding: 12px 10px; }
.sb-user { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; transition: background .15s; }
.sb-user:hover { background: var(--bg3); }
.sb-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-user-name { font-size: 12px; font-weight: 600; color: var(--text); }
.sb-user-role { font-size: 10px; color: var(--text3); }

/* ---------- TOPBAR ---------- */
.topbar { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.page-title { font-family: var(--font-display); font-size: 20px; color: var(--text); }
.page-sub { font-size: 12px; color: var(--text3); }
.topbar-right { display: flex; align-items: center; gap: 8px; }

/* ---------- BUTTONS ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; font-family: var(--font-body); cursor: pointer; border: none; transition: all .15s; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--text2); border: 1px solid var(--border2); }
.btn-ghost:hover { background: var(--bg3); color: var(--text); }
.btn-accent { background: var(--accent); color: #0e0f11; font-weight: 600; }
.btn-accent:hover { background: var(--accent2); }
.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-icon { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border2); background: transparent; color: var(--text2); border-radius: 8px; cursor: pointer; transition: all .15s; }
.btn-icon:hover { background: var(--bg3); color: var(--text); }

/* ---------- STAT CARDS ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.stat-grid.cols-3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; }
.stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); padding: 20px; position: relative; overflow: hidden; transition: border-color .2s; }
.stat-card:hover { border-color: var(--border2); }
.stat-card::after { content: ''; position: absolute; top: -30px; right: -30px; width: 90px; height: 90px; border-radius: 50%; opacity: .06; }
.stat-card.green::after { background: var(--green); }
.stat-card.red::after { background: var(--red); }
.stat-card.blue::after { background: var(--blue); }
.stat-card.amber::after { background: var(--amber); }
.stat-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 15px; }
.stat-icon.green { background: var(--green-dim); color: var(--green); }
.stat-icon.red { background: var(--red-dim); color: var(--red); }
.stat-icon.blue { background: var(--blue-dim); color: var(--blue); }
.stat-icon.amber { background: var(--amber-dim); color: var(--amber); }
.stat-label { font-size: 11px; color: var(--text3); letter-spacing: .04em; margin-bottom: 6px; font-weight: 600; text-transform: uppercase; }
.stat-value { font-family: var(--font-display); font-size: 26px; color: var(--text); line-height: 1.15; margin-bottom: 6px; word-break: break-word; }
.stat-value.sm { font-size: 22px; }
.stat-change { font-size: 11px; color: var(--text3); display: flex; align-items: center; gap: 4px; }
.stat-change.up { color: var(--green); }
.stat-change.down { color: var(--red); }

/* ---------- GRIDS & CARDS ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-3-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-title { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.card-title i { color: var(--text3); }
.card-body { padding: 20px; }
.card-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.card-note { font-size: 11px; color: var(--text3); }

.kv { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 0; font-size: 13px; color: var(--text2); border-bottom: 1px solid var(--border); }
.kv:last-child { border-bottom: none; }
.kv strong { color: var(--text); font-weight: 600; }

.report-section-label { font-size: 11px; color: var(--text3); font-weight: 600; letter-spacing: .06em; margin-bottom: 10px; }
.report-line { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text2); gap: 16px; }
.report-total { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; font-weight: 700; gap: 16px; }
.report-grand { display: flex; justify-content: space-between; padding: 14px 16px; border-radius: 8px; font-size: 15px; font-weight: 700; margin-top: 8px; gap: 16px; }

.insight { border-left: 3px solid var(--border2); padding: 10px 14px; margin-bottom: 10px; background: var(--bg3); border-radius: 0 8px 8px 0; font-size: 13px; color: var(--text); }
.insight-meta { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }

/* ---------- TABLES ---------- */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th { padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text3); letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--border); white-space: nowrap; }
thead th.right { text-align: right; }
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s; }
tbody tr:hover td { background: var(--bg3); color: var(--text); }
td.right, .right { text-align: right; }
.td-strong { color: var(--text) !important; font-weight: 500; }
.td-mono { font-family: var(--font-mono); font-size: 12px; color: var(--text3) !important; }
.num { text-align: right; font-family: var(--font-mono); }

/* ---------- BADGES ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge.paid, .badge.revenue { background: var(--green-dim); color: var(--green); }
.badge.pending, .badge.expense { background: var(--amber-dim); color: var(--amber); }
.badge.overdue, .badge.liability { background: var(--red-dim); color: var(--red); }
.badge.draft { background: var(--bg4); color: var(--text3); }
.badge.posted, .badge.asset { background: var(--blue-dim); color: var(--blue); }
.badge.partial, .badge.equity { background: var(--purple-dim); color: var(--purple); }

/* ---------- CHARTS / PROGRESS / AGING ---------- */
.chart-wrap { position: relative; height: 220px; padding: 4px; }
.progress { background: var(--bg4); border-radius: 4px; height: 6px; overflow: hidden; margin-top: 6px; }
.progress-fill { height: 100%; border-radius: 4px; background: var(--accent); transition: width .4s; }
.aging-row { display: flex; margin-bottom: 12px; align-items: center; }
.aging-label { width: 130px; font-size: 12px; color: var(--text2); flex-shrink: 0; }
.aging-bar { flex: 1; background: var(--bg4); border-radius: 4px; height: 24px; overflow: hidden; }
.aging-fill { height: 100%; border-radius: 4px; transition: width .6s; }
.aging-amount { margin-left: 12px; font-size: 12px; font-weight: 600; color: var(--text); width: 110px; text-align: right; flex-shrink: 0; }

/* ---------- FORMS ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1/-1; }
.form-label { font-size: 11px; font-weight: 600; color: var(--text3); letter-spacing: .04em; text-transform: uppercase; }
.form-label .hint { text-transform: none; font-weight: 400; color: var(--text3); }
/* Plain-English "what goes in here", under an account picker and under each
   name in the chart of accounts. Always visible rather than a tooltip: someone
   unsure whether fabric is stock or an expense will guess, not hover. */
.line-hint { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; color: var(--text3); font-weight: 400; text-transform: none; letter-spacing: 0; }
.line-hint:empty { display: none; }
.line-hint.warn { color: var(--amber); }
/* "See also" — the way from a screen's own topic to the others that explain it. */
.guide-related { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.form-input { background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--text); font-family: var(--font-body); outline: none; transition: border-color .15s; width: 100%; }
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.form-input:disabled { opacity: .6; cursor: not-allowed; }
.form-input::placeholder { color: var(--text3); }
select.form-input { cursor: pointer; }
select.form-input option { background: var(--bg3); }
textarea.form-input { resize: vertical; min-height: 72px; }
.filter-bar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

/* ---------- LINE EDITOR (journal / invoice / bill) ---------- */
.je-lines { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.je-lines th { padding: 8px; font-size: 10px; color: var(--text3); text-align: left; border-bottom: 1px solid var(--border); letter-spacing: .06em; text-transform: uppercase; }
.je-lines td { padding: 6px 4px; }
.je-lines td input, .je-lines td select { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; font-size: 12px; color: var(--text); font-family: var(--font-body); outline: none; width: 100%; }
.je-lines td input:focus, .je-lines td select:focus { border-color: var(--accent); }
.je-lines td select option { background: var(--bg3); }
.je-total-row { display: flex; justify-content: flex-end; gap: 24px; padding: 12px 0 0; font-size: 12px; font-weight: 600; color: var(--text2); flex-wrap: wrap; }
.je-total-row span.ok { color: var(--green); }
.je-total-row span.err { color: var(--red); }

/* ---------- TABS / MISC ---------- */
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.tabs.inline { margin-bottom: 0; border-bottom: none; gap: 4px; }
.tab { padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.empty { text-align: center; padding: 48px 24px; color: var(--text3); }
.empty i { font-size: 36px; margin-bottom: 12px; display: block; color: var(--bg5); }
.empty p { font-size: 13px; }
.hidden { display: none !important; }

/* ---------- COMPANY SWITCHER ---------- */
.company-dropdown { position: absolute; top: 120px; left: 10px; width: 214px; background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--r); z-index: 200; box-shadow: var(--shadow); display: none; max-height: 340px; overflow-y: auto; }
.company-dropdown.open { display: block; }
.co-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .1s; }
.co-item:last-child { border-bottom: none; }
.co-item:hover { background: var(--bg4); }
.co-item-name { font-size: 13px; font-weight: 600; color: var(--text); }
.co-item-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
.co-item.selected .co-item-name { color: var(--accent); }

/* ---------- MODAL ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s; padding: 20px; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r2); width: 580px; max-width: 96vw; max-height: 88vh; display: flex; flex-direction: column; transform: translateY(16px); transition: transform .2s; box-shadow: var(--shadow); }
.modal.wide { width: 900px; }
.modal-overlay.open .modal { transform: translateY(0); }
.modal-hd { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-title { font-family: var(--font-display); font-size: 18px; }
.modal-bd { padding: 24px; overflow-y: auto; }
.modal-ft { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
.modal-close { background: none; border: none; color: var(--text3); font-size: 18px; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: all .15s; }
.modal-close:hover { background: var(--bg4); color: var(--text); }

/* ---------- AUTH ---------- */
/* Sized against the viewport height rather than in fixed pixels, so the whole
   card still lands on screen on a 768px laptop once browser chrome is taken
   off. overflow-y stays as a last resort for anything shorter still. */
.auth-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 25% 15%, rgba(200,240,110,.07), transparent 45%), var(--bg); padding: clamp(10px, 2.5vh, 24px); overflow-y: auto; }
/* The hero takes the larger share so the slogan sits on one line. It needs
   about 21× its own font size to do that, which a half-width column cannot
   give it at any readable size. */
.auth-card { width: 100%; max-width: 1040px; display: grid; grid-template-columns: 1.35fr 1fr; background: var(--bg2); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.auth-hero { padding: clamp(18px, 4.4vh, 40px) clamp(22px, 2.4vw, 36px); background: linear-gradient(160deg, var(--bg3), var(--bg2)); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: clamp(9px, 1.9vh, 18px); }
/* Held to one line. The card is capped at 1040px, so above that width the
   24px cap applies; below it the type tracks the viewport down to the 820px
   breakpoint, where the hero drops away entirely. */
.auth-hero h1 { font-family: var(--font-display); font-size: min(24px, 2.2vw); line-height: 1.2; font-weight: 400; white-space: nowrap; }
.auth-hero p { font-size: clamp(12px, 1.5vh, 13px); color: var(--text2); line-height: 1.55; }
.auth-features { display: flex; flex-direction: column; gap: clamp(7px, 1.3vh, 12px); margin-top: 2px; }
.auth-feature { display: flex; gap: 10px; align-items: flex-start; font-size: clamp(11.5px, 1.45vh, 12.5px); color: var(--text2); line-height: 1.45; }
.auth-feature i { color: var(--accent); margin-top: 3px; }
.auth-body { padding: clamp(24px, 4.4vh, 40px) clamp(22px, 2.4vw, 36px); }

/* ---------- PRICING ON THE SIGN-IN SCREEN ---------- */
/* Compact by design: enough for a visitor to see what it costs without
   pushing the sign-in form off a short screen. */
.pricing { display: flex; flex-direction: column; gap: 6px; }
.pricing-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; letter-spacing: .08em; color: var(--text3); margin-bottom: 2px; }
.pricing-note { letter-spacing: 0; text-transform: none; }
.plan-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(7px, 1.2vh, 10px) 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; }
.plan-row.featured { border-color: rgba(200,240,110,.35); background: linear-gradient(100deg, rgba(200,240,110,.07), var(--bg2)); }
.plan-id { min-width: 0; }
.plan-name { font-size: clamp(12px, 1.5vh, 13px); font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 7px; }
.plan-tag { font-size: 8.5px; letter-spacing: .07em; font-weight: 600; color: var(--accent); border: 1px solid rgba(200,240,110,.35); border-radius: 4px; padding: 1px 5px; }
.plan-limits { font-size: clamp(10.5px, 1.25vh, 11.5px); color: var(--text3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-price { font-family: var(--font-display); font-size: clamp(14px, 1.9vh, 17px); color: var(--text); white-space: nowrap; }
.plan-per { font-family: var(--font-body); font-size: 10.5px; color: var(--text3); }
.auth-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.auth-tab { padding: 10px 4px; margin-right: 22px; font-size: 13px; font-weight: 600; color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.auth-error { background: var(--red-dim); color: var(--red); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; }

/* ---------- ONBOARDING ---------- */
.onboard-screen { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: flex-start; justify-content: center; padding: 40px 24px; overflow-y: auto; }
.onboard-card { width: 100%; max-width: 760px; background: var(--bg2); border: 1px solid var(--border); border-radius: 18px; padding: 34px; box-shadow: var(--shadow); }
.onboard-head { display: flex; gap: 16px; margin-bottom: 26px; }
.onboard-head h1 { font-family: var(--font-display); font-size: 26px; font-weight: 400; margin-bottom: 8px; }
.onboard-head p { font-size: 13px; color: var(--text2); line-height: 1.6; }
.onboard-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

/* =============================================================
   AI CHAT
   ============================================================= */
.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-log { flex: 1; overflow-y: auto; padding: 4px 4px 20px; display: flex; flex-direction: column; gap: 18px; }
.chat-row { display: flex; gap: 12px; max-width: 900px; }
.chat-row.user { flex-direction: row-reverse; margin-left: auto; }
.chat-avatar { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.chat-avatar.ai { background: var(--accent-dim); color: var(--accent); }
.chat-avatar.me { background: var(--blue-dim); color: var(--blue); font-size: 11px; font-weight: 700; }
.chat-bubble { background: var(--bg2); border: 1px solid var(--border); border-radius: 4px 14px 14px 14px; padding: 14px 16px; font-size: 13.5px; line-height: 1.6; color: var(--text); min-width: 0; }
.chat-row.user .chat-bubble { background: var(--blue-dim); border-color: rgba(96,165,250,.25); border-radius: 14px 4px 14px 14px; }
.chat-bubble p { margin: 0; }

.chat-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.chat-metric { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.chat-metric-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); font-weight: 600; margin-bottom: 5px; }
.chat-metric-value { font-family: var(--font-display); font-size: 19px; color: var(--text); }
.chat-metric.good .chat-metric-value { color: var(--green); }
.chat-metric.bad .chat-metric-value { color: var(--red); }

.chat-table-wrap { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.chat-table-title { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); font-weight: 600; padding: 10px 14px; background: var(--bg3); }
.chat-table-scroll { overflow-x: auto; max-height: 320px; overflow-y: auto; }
.chat-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.chat-table th { padding: 8px 14px; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); border-bottom: 1px solid var(--border); background: var(--bg2); position: sticky; top: 0; }
.chat-table td { padding: 8px 14px; border-bottom: 1px solid var(--border); color: var(--text2); white-space: nowrap; }
.chat-table tr:last-child td { border-bottom: none; }
.chat-table .right { text-align: right; font-family: var(--font-mono); }

.chat-note { margin-top: 12px; background: var(--amber-dim); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--text2); line-height: 1.55; }
.chat-sources { margin-top: 12px; font-size: 11px; color: var(--text3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-source { background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; padding: 2px 9px; }
.chat-followups { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.chat-chip { background: transparent; border: 1px solid var(--border2); color: var(--text2); border-radius: 20px; padding: 6px 12px; font-size: 12px; cursor: pointer; font-family: var(--font-body); transition: all .15s; }
.chat-chip:hover { background: var(--bg3); color: var(--accent); border-color: var(--accent); }

.chat-typing { display: flex; gap: 4px; padding: 4px 0; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text3); animation: blink 1.3s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .18s; }
.chat-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.chat-welcome { max-width: 820px; margin: 0 auto; padding: 24px 0; }
.chat-welcome h2 { font-family: var(--font-display); font-size: 26px; font-weight: 400; margin-bottom: 8px; }
.chat-welcome p { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 22px; }
.chat-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.chat-group { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); padding: 16px; }
.chat-group-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text3); display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.chat-group-title i { color: var(--accent); }
.chat-group button { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text2); font-family: var(--font-body); font-size: 12.5px; padding: 7px 8px; border-radius: 7px; cursor: pointer; transition: all .12s; }
.chat-group button:hover { background: var(--bg3); color: var(--accent); }

.chat-composer { border-top: 1px solid var(--border); padding: 16px 0 4px; flex-shrink: 0; }
.chat-input-row { display: flex; gap: 10px; align-items: flex-end; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r2); padding: 10px 12px; transition: border-color .15s; }
.chat-input-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.chat-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-family: var(--font-body); font-size: 14px; resize: none; max-height: 140px; line-height: 1.5; padding: 4px 0; }
.chat-input::placeholder { color: var(--text3); }
.chat-send { width: 34px; height: 34px; border-radius: 9px; border: none; background: var(--accent); color: #0e0f11; cursor: pointer; flex-shrink: 0; transition: all .15s; }
.chat-send:hover { background: var(--accent2); }
.chat-send:disabled { opacity: .4; cursor: not-allowed; }
.chat-hint { font-size: 11px; color: var(--text3); margin-top: 8px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- TOASTS ---------- */
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--bg4); border: 1px solid var(--border2); color: var(--text); padding: 12px 16px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow); max-width: 380px; animation: slideIn .2s ease; }
.toast.success { border-color: rgba(74,222,128,.4); }
.toast.success i { color: var(--green); }
.toast.error { border-color: rgba(255,107,107,.4); }
.toast.error i { color: var(--red); }
.toast.info i { color: var(--blue); }
.toast.out { opacity: 0; transform: translateX(20px); transition: all .25s; }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
  .stat-grid, .stat-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-3-1, .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) { .auth-card { grid-template-columns: 1fr; } .auth-hero { display: none; } }
/* On a very short window something has to give. It is the trailing support
   note, never the line saying who this is for — that one is the whole point of
   the page, and hiding it by window height means some visitors never see it. */
@media (max-height: 580px) {
  .auth-body .card-note { display: none; }
  .auth-hero p { font-size: 11.5px; line-height: 1.45; }
}
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- PAYMENT SCREENS ---------- */
.pay-doc { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; }
.pay-doc-row { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--text2); padding: 4px 0; }
.pay-doc-row.sub { font-size: 12px; color: var(--text3); padding-left: 12px; }
.pay-doc-row.total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; color: var(--text); }
.pay-doc-row strong { color: var(--text); }

.pay-summary { margin-top: 20px; background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--r); padding: 14px 16px; }
.pay-summary-row { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--text2); padding: 5px 0; }
.pay-summary-row.sub { font-size: 12px; color: var(--text3); padding-left: 12px; }
.pay-summary-row.wht { color: var(--amber); }
.pay-summary-row.grand { border-top: 1px solid var(--border2); margin-top: 8px; padding-top: 11px; font-size: 15px; color: var(--text); }
.pay-summary-row.grand strong { color: var(--accent); font-family: var(--font-display); font-size: 18px; }
.pay-summary-note { margin-top: 10px; font-size: 11.5px; color: var(--text3); line-height: 1.55; border-top: 1px solid var(--border); padding-top: 10px; }

/* ---------- NOTICE BAR (subscription reminders, suspension) ---------- */
.notice { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--amber-dim); border-bottom: 1px solid rgba(251,191,36,.25); font-size: 13px; color: var(--text); flex-shrink: 0; }
.notice > i { color: var(--amber); font-size: 15px; flex-shrink: 0; }
.notice-body { flex: 1; min-width: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.notice-body strong { color: var(--text); }
.notice-body span { color: var(--text2); }
.notice.overdue { background: var(--red-dim); border-bottom-color: rgba(255,107,107,.3); }
.notice.overdue > i { color: var(--red); }
.notice.inline { border: 1px solid rgba(251,191,36,.25); border-radius: var(--r); padding: 14px 16px; }

/* ---------- HOW THIS WORKS (the guide) ---------- */
/* Topics on the left, one topic open on the right. Everything is already in
   the page, so switching topics costs nothing and works offline. */
.guide { display: grid; grid-template-columns: 300px 1fr; gap: 18px; height: 100%; min-height: 0; }
.guide-nav { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding-right: 4px; }
.guide-body { overflow-y: auto; padding-right: 4px; }

.guide-topic { display: flex; gap: 11px; align-items: flex-start; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: var(--r); padding: 10px 12px;
  color: var(--text2); cursor: pointer; font-family: inherit; font-size: 13px; transition: background .15s, border-color .15s; }
.guide-topic:hover { background: var(--bg3); color: var(--text); }
.guide-topic.active { background: var(--bg3); border-color: var(--border); color: var(--text); }
.guide-topic > i { margin-top: 2px; width: 15px; text-align: center; color: var(--accent); flex-shrink: 0; }
.guide-topic-title { display: block; font-weight: 600; }
.guide-topic-sub { display: block; font-size: 11.5px; color: var(--text3); line-height: 1.4; margin-top: 2px; }

.guide-panel { display: none; }
.guide-panel.active { display: block; }
.guide-lead { font-size: 14.5px; line-height: 1.7; color: var(--text); }
.guide-para { font-size: 13.5px; line-height: 1.7; color: var(--text2); margin-top: 12px; }

.guide-example { margin-top: 20px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.guide-example-head { display: flex; align-items: center; gap: 9px; padding: 12px 16px; font-weight: 600;
  font-size: 13px; color: var(--text); border-bottom: 1px solid var(--border); background: rgba(200,240,110,.05); }
.guide-example-head i { color: var(--accent); }
.guide-example-row { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: 14px;
  padding: 10px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
.guide-example-row:last-child { border-bottom: 0; }
.guide-example-label { color: var(--text); font-weight: 600; }
.guide-example-value { color: var(--text2); line-height: 1.55; }

.guide-watch { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text2);
  line-height: 1.6; padding: 8px 0; }
.guide-watch i { color: var(--amber); margin-top: 3px; flex-shrink: 0; }

@media (max-width: 900px) {
  .guide { grid-template-columns: 1fr; }
  .guide-nav { max-height: 220px; }
}

/* =============================================================
   Printing a customer's invoice
   -------------------------------------------------------------
   The document is built into #print-root and everything else is
   hidden for the print run, so the browser's own "Save as PDF"
   produces the customer copy. No PDF library, no server round
   trip, and it works on a phone as well as a laptop.

   Colours here are stated explicitly rather than inherited: the
   app runs on a dark theme and a printed invoice must be black
   on white whatever the screen looks like.
   ============================================================= */
#print-root { display: none; }

@media print {
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block; }
  @page { margin: 15mm; }
}

.print-sheet { background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5; }
.print-sheet h1 { font-size: 22px; margin: 0 0 2px; letter-spacing: .04em; }
.print-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; border-bottom: 2px solid #000; padding-bottom: 12px; margin-bottom: 18px; }
.print-org { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.print-muted { color: #444; font-size: 11px; }
.print-meta { text-align: right; white-space: nowrap; }
.print-meta div { margin-bottom: 2px; }
.print-parties { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.print-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #666; margin-bottom: 4px; }
.print-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.print-table th { text-align: left; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid #000; padding: 7px 6px; }
.print-table td { padding: 7px 6px; border-bottom: 1px solid #ddd; vertical-align: top; }
.print-table .r { text-align: right; white-space: nowrap; }
.print-totals { width: 260px; margin-left: auto; }
.print-totals div { display: flex; justify-content: space-between; padding: 4px 0; }
.print-totals .due { border-top: 2px solid #000; margin-top: 4px; padding-top: 8px; font-weight: 700; font-size: 14px; }
.print-note { margin-top: 22px; padding-top: 10px; border-top: 1px solid #ddd; font-size: 11px; color: #444; }
.print-paid { display: inline-block; border: 2px solid #197a3d; color: #197a3d; padding: 3px 10px; border-radius: 4px; font-weight: 700; letter-spacing: .08em; }

/* ---------- LEDGER PREVIEW ----------
   "When you post this, the books will record…" — shown live under the line
   editor on invoices and bills, and inside the opening-balances wizard. */
.entry-preview { margin-top: 16px; border: 1px solid var(--border2); border-radius: var(--r); padding: 12px 14px; background: var(--bg3); }
.entry-preview:empty { display: none; }
.entry-preview-head { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
.entry-preview-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 12px; color: var(--text2); }
.entry-preview-row .acc { color: var(--text); }
.entry-preview-row.cr .acc { padding-left: 18px; }
.entry-preview-row .amt { font-family: var(--font-mono); white-space: nowrap; }
.entry-preview-row .tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; width: 20px; flex-shrink: 0; }
.entry-preview-row.dr .tag { color: var(--blue); }
.entry-preview-row.cr .tag { color: var(--amber); }
.entry-preview-foot { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text3); display: flex; justify-content: space-between; }