/* Instrument Sans, self-hosted. Previously fetched from Google on every page load,
   which meant a third-party request each time the owner or the accountant opened the
   books, and a dependency on reaching Google at all from Lagos.

   One variable file per subset covers weights 400-700, so this is 2 requests and ~41KB
   rather than 8 static files. Filenames carry the upstream version (v4) so they can be
   cached permanently; bump the name when replacing the files.

   Note: Instrument Sans has no glyph for the naira sign U+20A6, so the currency symbol
   falls back to the system UI font. That was already true when this came from Google -
   it is a property of the typeface, not of where it is served from. */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin-ext.v4.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin.v4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  :root {
    --brand: #022D23;        /* deep green */
    --brand-2: #1F5D3F;      /* mid green */
    --accent: #339967;       /* primary green */
    --mint: #E7FEDE;         /* light mint */
    --bg: #F7F9F6;
    --surface: #FFFFFF;
    --border: #E2E8E2;
    --text: #10241D;
    --muted: #5F7169;
    --green: #1F8A5B;
    --red: #C0392B;
    --red-soft: #FDECEA;
    --green-soft: #E4F5EC;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
  }
  header {
    background: var(--brand);
    padding: 18px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
  .logo { font-size: 21px; font-weight: 700; letter-spacing: -0.3px; color: #fff; }
  .logo .dot { color: var(--accent); }
  .logo .sub { color: #9DBBAF; font-weight: 500; font-size: 13px; margin-left: 8px; }
  .header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  main { max-width: 1200px; margin: 0 auto; padding: 26px 28px 60px; }

  h2 {
    font-size: 13px; font-weight: 700; color: var(--brand-2);
    text-transform: uppercase; letter-spacing: 1.2px; margin: 30px 0 14px;
  }
  h2:first-child { margin-top: 0; }
  h2 .soft { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }

  /* Account cards — brand hero style */
  .accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
  .account-card {
    background: var(--brand);
    border-radius: 20px;
    padding: 18px 20px;
    color: var(--mint);
    background-image: radial-gradient(circle at 100% 0%, rgba(51,153,103,0.35), transparent 55%);
  }
  .account-card .bank { font-size: 13px; color: #A9C6B9; font-weight: 600; }
  .account-card .balance { font-size: 25px; font-weight: 700; margin-top: 7px; font-variant-numeric: tabular-nums; color: #fff; }
  .account-card .balance.neg { color: #FFB4A8; }
  .account-card .flows { margin-top: 10px; font-size: 12.5px; display: flex; gap: 14px; }
  .account-card .flows .in { color: #7FE0AE; }
  .account-card .flows .out { color: #FFB4A8; }
  .account-card .ob-note { margin-top: 8px; font-size: 11.5px; color: #85A296; }

  /* Panels */
  .panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 22px;
  }
  .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }
  label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }
  input, select {
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
  }
  input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(51,153,103,0.15); }

  .btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s;
  }
  .btn:hover { background: var(--brand-2); }
  .btn.secondary {
    background: transparent; color: var(--mint);
    border: 1px solid rgba(231,254,222,0.4); padding: 8px 16px; font-size: 13px;
  }
  .btn.secondary:hover { background: rgba(231,254,222,0.12); }
  .btn.ghost {
    background: #fff; color: var(--brand-2);
    border: 1px solid var(--border); padding: 9px 16px; font-size: 13px;
  }
  .btn.ghost:hover { background: var(--mint); border-color: var(--accent); }
  .btn.danger-text { background: none; border: none; color: var(--red); padding: 4px 8px; font-size: 12px; }
  .btn.danger-text:hover { background: var(--red-soft); }
  .btn.edit-text { background: none; border: none; color: var(--brand-2); padding: 4px 8px; font-size: 12px; }
  .btn.edit-text:hover { background: var(--green-soft); }
  tr.editing td { background: #FFF9E8; }
  .rec-tick { color: var(--green); font-weight: 700; }
  details summary::marker { color: var(--accent); }
  #recResults h2 { margin-top: 26px; }
  tr.subtotal td { background: #F2F8F2; font-weight: 700; color: var(--brand); border-top: 2px solid var(--border); }

  /* Attachments */
  input[type="file"] { padding: 8px 10px; font-size: 13px; }
  .attach-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--mint); color: var(--brand-2);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 5px 12px; font-size: 12.5px; margin: 10px 8px 0 0; font-weight: 600;
  }
  .attach-chip button { background: none; border: none; color: var(--red); cursor: pointer; font-size: 14px; padding: 0; line-height: 1; }
  .attach-link { color: var(--brand-2); font-size: 12px; text-decoration: none; display: inline-block; margin: 3px 10px 0 0; font-weight: 600; }
  .attach-link:hover { text-decoration: underline; }

  /* Type toggle */
  .type-toggle { display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: #fff; }
  .type-toggle button {
    flex: 1; padding: 10px 0; background: transparent; color: var(--muted);
    border: none; cursor: pointer; font-size: 13.5px; font-weight: 600; font-family: inherit;
  }
  .type-toggle button.active-debit { background: var(--red-soft); color: var(--red); }
  .type-toggle button.active-credit { background: var(--green-soft); color: var(--green); }

  /* Opening balances */
  .ob-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: end; }

  /* Table */
  .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; }
  table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
  th {
    text-align: left; padding: 13px 16px; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--brand-2); border-bottom: 1px solid var(--border);
    background: #FBFDFA;
  }
  td { padding: 12px 16px; border-bottom: 1px solid #EFF3EF; font-variant-numeric: tabular-nums; }
  tr:last-child td { border-bottom: none; }
  td.amount { text-align: right; font-weight: 600; white-space: nowrap; }
  th.amount { text-align: right; }
  .badge { display: inline-block; padding: 3px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; }
  .badge.debit { background: var(--red-soft); color: var(--red); }
  .badge.credit { background: var(--green-soft); color: var(--green); }
  .empty { padding: 32px; text-align: center; color: var(--muted); font-size: 14px; }

  /* Filters */
  .filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: end; }
  .filters > div { min-width: 140px; }

  /* Report */
  .report-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; }
  .stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 15px 18px;
  }
  .stat .k { font-size: 12px; color: var(--muted); font-weight: 600; }
  .stat .v { font-size: 21px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--brand); }
  .stat .v.pos { color: var(--green); }
  .stat .v.negv { color: var(--red); }

  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }

  .mini-table { width: 100%; font-size: 13.5px; border-collapse: collapse; }
  .mini-table td { padding: 9px 4px; border-bottom: 1px solid #EFF3EF; }
  .mini-table td:last-child { text-align: right; font-weight: 600; }
  .panel h3 { font-size: 14.5px; margin-bottom: 10px; color: var(--brand); font-weight: 700; }

  /* ---------- Dashboard ---------- */
  .viz-filters {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px;
  }
  .viz-filters > div { min-width: 130px; }
  .viz-seg { display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: #fff; }
  .viz-seg button {
    padding: 9px 16px; background: transparent; color: var(--muted); border: none;
    cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; white-space: nowrap;
  }
  .viz-seg button.on { background: var(--accent); color: #fff; }

  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-bottom: 16px; }
  .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 15px 18px; }
  .kpi .k { font-size: 12px; color: var(--muted); font-weight: 600; }
  .kpi .v { font-size: 25px; font-weight: 700; margin-top: 3px; color: var(--brand); letter-spacing: -0.5px; line-height: 1.15; }
  .kpi .v.md { font-size: 21px; }
  .kpi .v.sm { font-size: 18px; }
  .kpi .v.hero { font-size: 31px; }
  .kpi .v.hero.md { font-size: 25px; }
  .kpi .v.hero.sm { font-size: 20px; }
  .kpi .d { font-size: 12px; margin-top: 4px; font-weight: 600; color: var(--muted); }
  .kpi .d .up { color: #C0392B; }      /* spend up is bad */
  .kpi .d .down { color: #1F8A5B; }
  .kpi .d .flat { color: var(--muted); }

  .viz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 900px) { .viz-grid { grid-template-columns: 1fr; } }
  .viz-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 20px 22px 16px; }
  .viz-card h3 { font-size: 14.5px; color: var(--brand); font-weight: 700; margin-bottom: 2px; }
  .viz-card .sub { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
  .viz-card svg { display: block; width: 100%; height: auto; overflow: visible; }
  .viz-card svg text { font-family: inherit; }

  .viz-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
  .viz-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .viz-legend i { display: inline-block; border-radius: 2px; }
  .viz-legend i.line { width: 14px; height: 3px; }
  .viz-legend i.rect { width: 11px; height: 11px; }

  .viz-empty { padding: 34px 10px; text-align: center; color: var(--muted); font-size: 13.5px; }
  .viz-note { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

  .viz-table { margin-top: 10px; }
  .viz-table summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--brand-2); }
  .viz-table summary::marker { color: var(--accent); }
  .viz-table table { font-size: 12.5px; }
  .viz-table th, .viz-table td { padding: 8px 12px; }

  [data-tip] { cursor: pointer; }
  [data-tip]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .viz-tip {
    position: absolute; z-index: 200; display: none; pointer-events: none;
    background: #022D23; color: #E7FEDE; border-radius: 10px; padding: 9px 12px;
    font-size: 12.5px; line-height: 1.5; box-shadow: 0 6px 20px rgba(2,45,35,0.30); max-width: 260px;
  }
  .viz-tip-title { font-weight: 700; color: #fff; margin-bottom: 4px; font-size: 12px; }
  .viz-tip-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
  .viz-tip-row b { color: #fff; font-variant-numeric: tabular-nums; }
  .viz-tip-key { width: 12px; height: 3px; border-radius: 2px; flex: none; }
  .viz-tip-lbl { color: #A9C6B9; }

  @media print { .viz-tip { display: none !important; } }
  .viz-cur { font-size: 12.5px; font-weight: 700; color: var(--brand-2); letter-spacing: 0.6px;
    text-transform: uppercase; margin: 6px 0 10px; }
  .viz-card.wide { grid-column: 1 / -1; }

  .toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--brand); color: var(--mint);
    padding: 11px 22px; border-radius: 999px; font-size: 14px; opacity: 0;
    transition: opacity 0.25s; pointer-events: none; z-index: 100;
    box-shadow: 0 6px 24px rgba(2,45,35,0.35);
  }
  .toast.show { opacity: 1; }
  .muted-note { color: var(--muted); font-size: 12.5px; margin-top: 12px; }
  /* ---------- sign-in, chrome and modals ---------- */
  .login-screen {
    position: fixed; inset: 0; z-index: 300; display: none;
    align-items: center; justify-content: center; background: var(--brand);
    background-image: radial-gradient(circle at 70% 10%, rgba(51,153,103,0.40), transparent 55%);
    padding: 24px;
  }
  .login-card, .modal-card {
    background: #fff; border-radius: 20px; padding: 28px 26px;
    width: 100%; max-width: 380px; box-shadow: 0 18px 50px rgba(2,45,35,0.35);
  }
  .login-logo { font-size: 25px; font-weight: 700; color: var(--brand); letter-spacing: -0.4px; }
  .login-logo span { color: var(--accent); }
  .login-sub { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
  .login-card label, .modal-card label { margin-top: 12px; }
  .login-error { color: var(--red); font-size: 12.5px; margin-top: 10px; min-height: 16px; font-weight: 600; }
  .who { color: #A9C6B9; font-size: 12.5px; font-weight: 600; align-self: center; margin-right: 4px; }
  .who b { color: #fff; font-weight: 700; }
  .who .role {
    background: rgba(231,254,222,0.16); color: var(--mint); border-radius: 999px;
    padding: 2px 9px; margin-left: 7px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  }
  .modal { position: fixed; inset: 0; z-index: 310; display: none; align-items: center; justify-content: center;
           background: rgba(2,45,35,0.55); padding: 24px; }
  .modal-card h3 { font-size: 16px; color: var(--brand); margin-bottom: 6px; }
  /* controls a role may not use are hidden rather than shown-and-refused */
  [hidden] { display: none !important; }

  /* ---------- people ---------- */
  .otp {
    background: var(--mint); border: 1px solid var(--accent); border-radius: 14px;
    padding: 14px 16px; margin-top: 14px;
  }
  .otp .k { font-size: 12px; font-weight: 700; color: var(--brand-2); }
  .otp code {
    display: inline-block; font-size: 17px; font-weight: 700; color: var(--brand);
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    padding: 6px 12px; margin: 7px 0 4px; letter-spacing: 0.5px;
  }
  .otp .note { font-size: 12px; color: var(--brand-2); }
  tr.disabled-user td { opacity: 0.55; }
  .role-pill {
    display: inline-block; padding: 3px 11px; border-radius: 20px;
    font-size: 11px; font-weight: 700; background: var(--green-soft); color: var(--green);
  }
  .role-pill.owner { background: var(--mint); color: var(--brand); }
  .role-pill.staff { background: #EEF2F7; color: #44607A; }