*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#f6f7fb; --card:#fff; --ink:#1a1c23; --muted:#6b7280;
  --line:#e5e7eb; --primary:#2f52e0; --primary-ink:#fff;
  --ok:#0a7d3b; --err:#b42318;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5;
}
a{color:var(--primary); text-decoration:none}
h1,h2,h3{margin:0 0 12px}
.muted{color:var(--muted); font-size:13px}
.empty{color:var(--muted); text-align:center; padding:24px 0}
.tag{background:#fef3c7; color:#78350f; font-size:11px; padding:2px 6px; border-radius:4px}
.hint{color:var(--muted); font-size:12px; margin-top:8px}
.msg{margin-top:12px; min-height:20px; font-size:13px}
.msg.ok{color:var(--ok)} .msg.err{color:var(--err)}

/* login */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.login-card{background:var(--card); padding:32px 28px; width:100%; max-width:400px;
  border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.06); border:1px solid var(--line)}
.brand{font-size:28px; letter-spacing:-.5px; margin-bottom:4px}
.tag{display:inline-block}
.login-card label{display:block; font-size:13px; color:var(--muted); margin:16px 0 6px}
.phone-row{display:flex; align-items:center; gap:8px}
.phone-row .cc{background:#f3f4f6; padding:10px 12px; border-radius:8px; font-weight:600}
.login-card input[type=tel]{width:100%; padding:10px 12px; border:1px solid var(--line);
  border-radius:8px; font-size:16px}
.btn{display:inline-block; padding:10px 14px; border:1px solid var(--line);
  border-radius:8px; background:#fff; cursor:pointer; font-size:14px; margin-top:12px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.primary{background:var(--primary); color:var(--primary-ink); border-color:var(--primary); width:100%}
.btn.link{background:transparent; border:0; color:var(--muted); text-decoration:underline; padding:6px 0; margin-top:8px}

/* R112 — slim floating top bar with inline nav (replaces sidebar on all viewports) */
.topbar{position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); box-shadow:0 1px 4px rgba(0,0,0,.03);
  display:flex; align-items:center; padding:6px 16px; gap:14px; min-height:44px}
.brand-mini{font-weight:700; letter-spacing:-.3px; color:var(--ink); font-size:15px; flex:0 0 auto}
.topnav{display:flex; align-items:center; gap:2px; flex:0 0 auto; overflow-x:auto; scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav .nav-item{padding:6px 10px; font-size:13px; color:var(--ink); border-radius:6px; white-space:nowrap}
.topnav .nav-item:hover{background:#f3f4f6}
.topnav .nav-item.active{background:var(--primary); color:#fff}
.topnav .admin-nav-link{margin-left:6px; padding-left:12px; border-left:1px solid var(--line); color:var(--primary); border-radius:0 6px 6px 0}
.companies-bar{margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:40%}
.companies-bar::-webkit-scrollbar{display:none}
.companies-bar .chips{gap:4px; flex-wrap:nowrap}
.companies-bar .chip{padding:3px 9px; font-size:12px}
.companies-bar .ribbon-label{padding-top:0; min-width:auto; flex:0 0 auto}
.user-box{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.user-box .phone{color:var(--muted); font-size:12px; white-space:nowrap}
.user-box .btn.link{margin-top:0; padding:2px 0; font-size:12px}
.small{font-size:12px}
.num{text-align:right; font-variant-numeric:tabular-nums}
.ellipsis{max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pw{cursor:pointer; user-select:all; font-family:ui-monospace,SFMono-Regular,monospace}

/* small chips inline in tables (Client, Prim.Tag, Second Tag columns) */
.chip.small-chip{padding:2px 8px; font-size:11px; margin-right:3px}
.chip.inline-tag{display:inline-block; padding:3px 9px; font-size:12px; text-decoration:none; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle}

/* R106 — Transactions column widths (updated 2026-07-09).
   Priority: Final Ledger takes remaining width. Others sized to content max.
   Char-widths approximated in 13px font: date "29 May 26" 9ch, tag chip ≤6ch,
   ₹ up to 8 digits (2,34,56,789). */
.txn-table{table-layout:fixed; width:100%}
.txn-table th.c-date, .txn-table td.c-date{width:88px; white-space:nowrap; padding-right:4px}
.txn-table th.c-data, .txn-table td.c-data{width:62px; padding:6px 4px}
.txn-table th.c-ledger, .txn-table td.c-ledger{max-width:0; padding:6px 6px}     /* takes remaining */
.txn-table .c-ledger .chip.inline-tag{max-width:100%}
.txn-table th.num, .txn-table td.num{width:96px; white-space:nowrap; padding:6px 8px}
.txn-table th.c-tags, .txn-table td.c-tags{width:130px; padding:6px 4px; white-space:nowrap; overflow:hidden}
.txn-table .prim-tag{background:#f1f5f9; border-color:#cbd5e1; color:#334155}   /* primary tag = slightly stronger */
.txn-table .sec-tag{background:#fff; border-color:#e2e8f0; color:#64748b}       /* secondary tag = lighter */
.row-client{display:block; font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:1px; font-weight:400}

/* summary row on transactions (legacy — kept for compat but page-head is the new pattern) */
.summary-row th{background:#eef2ff !important; color:var(--primary); font-weight:700; padding:8px 12px}
.summary-row th.num{font-variant-numeric:tabular-nums}

/* R104 — page head with title + summary chips (works desktop + mobile) */
.page-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.page-head h2{margin:0}
.page-summary{display:flex; gap:14px; font-size:13px; color:var(--muted)}
.page-summary b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}

/* documents */
.doc-section{background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:12px 0}
.section-head{display:flex; align-items:center; gap:14px; margin-bottom:12px}
.section-head h3{margin:0}
.section-head .btn{margin-left:auto}
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.doc-card{background:#f9fafb; border:1px solid var(--line); border-radius:8px; padding:10px; cursor:pointer; transition:all .12s}
.doc-card:hover{background:#eef2ff; border-color:var(--primary)}
.doc-badge{display:inline-block; font-size:11px; background:var(--primary); color:#fff; padding:2px 6px; border-radius:4px; margin-bottom:6px}
.doc-name{font-weight:600; font-size:13px; word-break:break-all}
.doc-meta{color:var(--muted); font-size:11px; margin-top:4px}

/* modal */
.modal{display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); align-items:center; justify-content:center; z-index:100}
.modal-body{background:#fff; border-radius:12px; width:min(92vw,900px); max-height:92vh; padding:14px; display:flex; flex-direction:column; overflow:hidden}
.modal-body.upload-body{width:min(92vw,600px)}
.modal-head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.modal-head b{font-size:15px}
.modal-body iframe{flex:1; border:1px solid var(--line); border-radius:6px; min-height:60vh}
.upload-form label{display:block; font-size:12px; color:var(--muted); margin:10px 0 4px}
.upload-form .txt{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; font-size:14px}
.upload-form input[type=file]{margin:6px 0}
.small-chips .chip-radio{cursor:pointer}
.small-chips .chip-radio input{display:none}
.small-chips .chip-radio span{display:inline-block; padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:12px}
.small-chips .chip-radio input:checked + span{background:var(--primary); color:#fff; border-color:var(--primary)}

/* R112 — content area (no sidebar; top bar handles nav) */
.content{padding:20px 28px; max-width:1200px; margin:0 auto}

/* ribbons */
.ribbons{margin-bottom:16px}
.ribbon{display:flex; align-items:flex-start; gap:12px; padding:8px 0; border-bottom:1px solid var(--line)}
.ribbon-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; padding-top:8px; min-width:66px; flex:0 0 66px}
.chips{display:flex; flex-wrap:wrap; gap:6px; flex:1}
.chip{display:inline-block; padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--ink); font-size:13px; text-decoration:none; user-select:none; transition:all .12s}
.chip:hover{border-color:#9ca3af; background:#f9fafb}
.chip.active,
.chip.pressed{background:#dbeafe; border-color:#93c5fd; color:#1e40af; font-weight:600}
.chip.active:hover,
.chip.pressed:hover{background:#bfdbfe}
.active-summary{padding:8px 0 0; font-size:12px; color:var(--muted)}
.active-summary b{color:var(--ink); font-weight:600}

/* tiles */
.tile-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:16px 0 24px}
.tile{background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px}
.tile-label{color:var(--muted); font-size:12px}
.tile-value{font-size:22px; font-weight:600; margin-top:6px}

/* R93 — compact tiles with count + ₹ total */
.tile-grid.compact{grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin:12px 0 18px}
.tile.compact{padding:8px 10px; border-radius:8px}
.tile.compact .tile-label{font-size:11px; text-transform:uppercase; letter-spacing:.5px}
.tile.compact .tile-count{font-size:18px; font-weight:700; margin-top:2px; color:var(--ink)}
.tile.compact .tile-rs{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; margin-top:1px}
.tile-grid.mini{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin:0 0 18px}
.tile.mini{padding:8px 10px}
.tile.mini .tile-value{font-size:16px; margin-top:2px}
.tile.mini .tile-label{font-size:11px; text-transform:uppercase; letter-spacing:.5px}

/* R95 — bar charts */
.chart-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 12px}
.chart-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px; min-width:0}
.chart-h{margin:0 0 8px; font-size:14px; color:var(--ink); font-weight:600}
.bar-row{display:grid; grid-template-columns:80px 1fr 110px; gap:8px; align-items:center; padding:3px 0; font-size:12px}
.bar-label{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar-track{background:#f3f4f6; border-radius:4px; height:14px; overflow:hidden}
.bar-fill{display:block; height:100%; background:linear-gradient(90deg,#93c5fd,#3b82f6); border-radius:4px}
.bar-value{text-align:right; color:var(--muted); font-variant-numeric:tabular-nums}

/* R94 — aggregation table */
.agg-card{margin:0 0 18px}
.agg-table{table-layout:fixed}
.agg-table .num{width:110px}
.agg-table .c-ledger{max-width:0}
.agg-table .c-ledger .chip.inline-tag{max-width:100%}

/* R96–R98 — admin */
.admin-nav-link{margin-top:12px; border-top:1px solid var(--line); padding-top:14px; color:var(--primary)}
.admin-nav .admin-link{padding:6px 10px; border-radius:6px; color:var(--muted); font-size:14px}
.admin-nav .admin-link:hover{background:#f3f4f6; color:var(--ink)}
.admin-nav .admin-link.active{background:#dbeafe; color:#1e40af; font-weight:600}
.msg-strip{margin:0 0 12px}
.msg-strip .msg{padding:8px 12px; border-radius:6px; background:#ecfdf5; color:#065f46; margin:4px 0}
.msg-strip .msg.err{background:#fef2f2; color:#991b1b}

/* R99 — top-anchored filter strip with Clear-all */
.filter-strip{display:flex; align-items:center; gap:10px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; padding:8px 12px; margin:0 0 12px; font-size:13px; flex-wrap:wrap}
.filter-strip-label{font-weight:700; color:#1e40af; text-transform:uppercase; font-size:11px; letter-spacing:.6px}
.filter-strip-summary{color:var(--ink); flex:1; min-width:200px}
.chip.filter-clear{background:#fff; border-color:#93c5fd; color:#1e40af; font-weight:600}
.chip.filter-clear:hover{background:#dbeafe}

/* R105 — status shown via Date text colour (replaces R100 pill) */
.txn-table .c-date .dt{font-weight:600}
.txn-table .c-date.dt-auto .dt{color:#6b7280}         /* gray - auto-derived (non-BANK) */
.txn-table .c-date.dt-assigned .dt{color:#0a7d3b}     /* green - BANK, ledger assigned */
.txn-table .c-date.dt-suspense .dt{color:#b45309}     /* amber - BANK, needs attention */
.txn-table .c-date.dt-commented .dt{color:#6d28d9}    /* purple - client commented */

/* R101 — empty state block */
.empty-state{text-align:center; padding:32px 20px; color:var(--muted); font-size:13px}
.empty-icon{font-size:36px; color:var(--line); margin-bottom:8px; line-height:1}
.empty-msg{font-size:14px; color:var(--ink); margin-bottom:12px}
.empty-state .btn{margin-top:6px}
.empty-state .hint{margin-top:8px; font-size:12px; color:var(--muted)}

/* tables */
.table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.table th,.table td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); font-size:14px}
.table th{background:#f9fafb; color:var(--muted); font-weight:600}
.table tr:last-child td{border-bottom:0}
.table input[type=text]{width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:6px}

/* admin companies table: heavier compact rows + name+phone access pills */
.admin-companies th,.admin-companies td{padding:6px 8px; font-size:13px; vertical-align:middle}
.admin-companies td.access-cell{padding:4px 6px; line-height:1}
.admin-companies td.row-actions{white-space:nowrap; text-align:right}
.admin-companies td.row-actions .btn.link{padding:2px 6px; font-size:12px}
.access-pill{
  display:inline-flex; flex-direction:column;
  padding:3px 7px; margin:2px 4px 2px 0;
  border:1px solid var(--line); border-radius:6px; background:#fff;
  line-height:1.15; vertical-align:top;
}
.access-pill .ap-top{display:flex; align-items:center; gap:5px}
.access-pill .ap-name{font-size:12px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px}
.access-pill .ap-phone{font-size:10px; color:var(--muted);
  font-variant-numeric:tabular-nums; margin-top:1px}
.access-pill .ap-role{font-size:9px; font-weight:700; letter-spacing:.4px;
  padding:1px 5px; border-radius:3px; line-height:1.3}
.access-pill .ap-role.owner{background:#dcfce7; color:#166534}
.access-pill .ap-role.acct{background:#dbeafe; color:#1e40af}
.access-pill .ap-role.both{background:#ede9fe; color:#5b21b6}

/* panel */
.panel{background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin:12px 0}
.panel ul{margin:8px 0 0 18px; padding:0}
.callout{background:#eff6ff; border:1px solid #bfdbfe; padding:12px 14px; border-radius:8px; margin:12px 0; font-size:14px}
.toolbar{display:flex; gap:8px; margin:12px 0}
.tab-row{display:flex; gap:6px; margin:12px 0; border-bottom:1px solid var(--line); padding-bottom:8px}
.tab{padding:6px 12px; border-radius:6px 6px 0 0; color:var(--muted)}
.tab.active{background:#eef2ff; color:var(--primary); font-weight:600}

@media (max-width:720px){
  .content{padding:12px 12px 20px}
  .table th,.table td{padding:6px 4px; font-size:12px}
  .chip{padding:4px 8px; font-size:12px}
  .chip.small-chip{font-size:10px; padding:2px 6px}
  .chip.inline-tag{font-size:11px; padding:2px 7px}
  .chart-row{grid-template-columns:1fr}
  .bar-row{grid-template-columns:64px 1fr 90px; font-size:11px}

  /* R106 — mobile column widths (Final Ledger gets remaining) */
  .txn-table th.c-date, .txn-table td.c-date{width:60px}
  .txn-table th.c-data, .txn-table td.c-data{width:48px; padding:6px 3px}
  .txn-table th.num, .txn-table td.num{width:70px; padding:6px 4px}
  .txn-table th.c-tags, .txn-table td.c-tags{width:78px; padding:6px 3px}
  .agg-table th.num, .agg-table td.num{width:70px}

  /* R113 — ribbon labels stay in a fixed left column on mobile too (per Ashish sketch);
     just smaller. Reverts R107 pill treatment. */
  .ribbon{align-items:flex-start; padding:6px 0; gap:8px}
  .ribbon-label{min-width:52px; flex:0 0 52px; padding-top:4px; font-size:9px; background:transparent; border-radius:0}
  .ribbons .chips{gap:5px}

  /* R112 — top bar on mobile: brand + nav horizontal-scroll; companies wrap below */
  .topbar{flex-wrap:wrap; padding:6px 10px; gap:8px}
  .brand-mini{font-size:14px}
  .topnav{flex:1 1 auto; order:2}
  .topnav .nav-item{padding:5px 8px; font-size:12px}
  .companies-bar{order:4; flex:1 1 100%; max-width:100%; margin-left:0}
  .user-box{order:3; margin-left:auto}
  .user-box .phone{display:none}

  /* Empty state stays a card on mobile */
  .empty-state{background:#fff; border:1px dashed var(--line); border-radius:10px; margin:8px 0}
}