/* Hadtah offline apps: shared design system. Native system font on every device; accent colours come from theme.css. */

:root,[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a0a0a;--bg-elev:#101010;--card:#151515;--card-2:#1b1b1b;--ink:#f5f5f5;--muted:#a8a8a8;--faint:#6f6f6f;
  --line:#262626;--line-strong:#3d3d3d;--accent:#fff;--accent-ink:#0a0a0a;
  --shadow:0 14px 40px rgba(0,0,0,.55);--header-bg:rgba(10,10,10,.86);--input:#121212;
  --good:#e9e9e9;--warn-bg:#2a2410;--warn-ink:#ffd37a;--warn-line:#5a4a1a;
  --bad-bg:#2a1212;--bad-ink:#ff9d94;--bad-line:#6b2a2a;--ok-bg:#122016;--ok-ink:#9be3ad;--ok-line:#24502f;
  --bar-in:#f5f5f5;--bar-out:#6a6a6a;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f4f4;--bg-elev:#fff;--card:#fff;--card-2:#f7f7f7;--ink:#101010;--muted:#5a5a5a;--faint:#8a8a8a;
  --line:#e3e3e3;--line-strong:#c9c9c9;--accent:#101010;--accent-ink:#fff;
  --shadow:0 12px 34px rgba(0,0,0,.07);--header-bg:rgba(244,244,244,.9);--input:#fff;
  --warn-bg:#fff7e0;--warn-ink:#7a5300;--warn-line:#f0d58a;
  --bad-bg:#fff1ef;--bad-ink:#9b1c12;--bad-line:#f2c2bc;--ok-bg:#ecf8ef;--ok-ink:#17602b;--ok-line:#bfe3c8;
  --bar-in:#101010;--bar-out:#a3a3a3;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{background:var(--bg)}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-size:15.5px;line-height:1.55;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--ink);text-underline-offset:3px}
.hidden{display:none!important}
.muted{color:var(--muted)}.faint{color:var(--faint)}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100dvh}
.side{position:sticky;top:0;height:100dvh;border-right:1px solid var(--line);background:var(--bg-elev);display:flex;flex-direction:column;padding:18px 14px}
.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 18px;text-decoration:none;color:var(--ink)}
.brand img{width:40px;height:40px;border-radius:10px;display:block;box-shadow:0 0 0 1px var(--line)}
.brand b{font-size:20px;letter-spacing:-.3px;line-height:1.1;display:block}
.brand small{font-size:12px;color:var(--muted);display:block}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--muted);font-weight:700;font-size:15px}
.nav button svg{width:20px;height:20px;flex:none}
.nav button:hover{background:var(--card-2);color:var(--ink)}
.nav button.on{background:var(--accent);color:var(--accent-ink)}
.nav button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.side-foot{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:8px}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 28px;padding-top:max(12px,env(safe-area-inset-top));
  background:var(--header-bg);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top h1{font-size:22px;margin:0;letter-spacing:-.4px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .mobile-brand{display:none}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;cursor:pointer;display:grid;place-items:center;flex:none;transition:background .15s,border-color .15s,transform .1s}
.icon-btn:hover{background:var(--card-2);border-color:var(--ink)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:18px;height:18px}
.theme-btn .sun{display:none}[data-theme="light"] .theme-btn .sun{display:block}[data-theme="light"] .theme-btn .moon{display:none}
.view{padding:24px 28px 48px;max-width:1240px;width:100%;margin:0 auto;animation:fadeUp .25s ease}
.tabbar{display:none}
.show-sm{display:none!important}
.offline-pill{font-size:12px;border:1px solid var(--line-strong);border-radius:999px;padding:3px 10px;color:var(--muted);white-space:nowrap}

/* ---------- building blocks ---------- */
.grid{display:grid;gap:16px}
.stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.two{grid-template-columns:1.4fr 1fr}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px;min-width:0}
.card h2{font-size:17px;margin:0 0 12px;letter-spacing:-.2px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card h2 .link{font-size:13.5px;font-weight:700;color:var(--muted);background:none;border:0;cursor:pointer;padding:0}
.card h2 .link:hover{color:var(--ink)}
.stat{display:flex;flex-direction:column;gap:4px}
.stat .label{font-size:13px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.stat .value{font-size:30px;font-weight:700;letter-spacing:-.8px;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat .sub{font-size:13px;color:var(--muted)}
.stat.inverse{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.stat.inverse .label,.stat.inverse .sub{color:inherit;opacity:.72}
.stat.alert .value{color:var(--bad-ink)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.toolbar .grow{flex:1 1 220px}
.search{position:relative}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted);pointer-events:none}
.search input{padding-left:38px}
input,select,textarea{width:100%;padding:11px 13px;border-radius:12px;border:1.5px solid var(--line);background:var(--input);outline:none;transition:border-color .15s,box-shadow .15s;font-size:15.5px}
textarea{min-height:76px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 16%,transparent)}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.toolbar select{width:auto;min-width:140px}
label.f{display:block;font-size:13.5px;font-weight:700;margin:0 0 6px}
.field{margin-bottom:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.hint{font-size:12.5px;color:var(--muted);margin-top:5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;border-radius:999px;padding:10px 18px;border:1.5px solid transparent;cursor:pointer;font-size:15px;white-space:nowrap;transition:transform .1s,opacity .15s,background .15s,border-color .15s;text-decoration:none}
.btn svg{width:17px;height:17px}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{opacity:.9}
.btn.outline{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn.outline:hover{border-color:var(--ink)}
.btn.ghost{background:transparent;color:var(--muted);padding:8px 12px}
.btn.ghost:hover{color:var(--ink);background:var(--card-2)}
.btn.danger{background:transparent;border-color:var(--bad-line);color:var(--bad-ink)}
.btn.danger:hover{background:var(--bad-bg)}
.btn.sm{padding:6px 12px;font-size:13.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.seg{display:inline-flex;border:1.5px solid var(--line-strong);border-radius:999px;padding:3px;gap:2px;background:var(--input)}
.seg button{all:unset;cursor:pointer;padding:6px 14px;border-radius:999px;font-weight:700;font-size:14px;color:var(--muted)}
.seg button.on{background:var(--accent);color:var(--accent-ink)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);white-space:nowrap}
.chip.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.chip.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.chip.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-ink)}
.chip.solid{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* tables (cards on phones) */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--card)}
table.t{width:100%;border-collapse:collapse;font-size:15px}
table.t th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--card-2);white-space:nowrap}
table.t td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr{transition:background .12s}
table.t tbody tr:hover{background:var(--card-2)}
table.t tr.overdue td{background:var(--bad-bg)}
table.t td.r,table.t th.r{text-align:right}
table.t .title{font-weight:700}
table.t .actions{white-space:nowrap;text-align:right}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li .grow{flex:1;min-width:0}
.li .t1{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .t2{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--card-2);border:1px solid var(--line-strong);font-weight:700;font-size:14px;flex:none}
.empty{text-align:center;padding:42px 16px;color:var(--muted)}
.empty>svg{width:46px;height:46px;opacity:.6;margin-bottom:8px}
.empty .btn svg{width:17px;height:17px;opacity:1;margin:0}
.empty h3{color:var(--ink);margin:6px 0;font-size:19px}
.empty .btn{margin:12px 4px 0}
.bar{height:9px;border-radius:999px;background:var(--card-2);border:1px solid var(--line);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--ink);border-radius:999px}
.bar.over>i{background:var(--bad-ink)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:700}
.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;margin:26px 0 10px}
.chart svg{display:block;width:100%;height:auto}
.chart text{fill:var(--muted);font-size:11px;font-family:inherit}
.legend{display:flex;gap:16px;font-size:13px;color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* modal + toast */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:18px;animation:fade .15s ease}
.modal{background:var(--card);border:1px solid var(--line-strong);border-radius:22px;box-shadow:var(--shadow);width:100%;max-width:560px;max-height:calc(100dvh - 36px);display:flex;flex-direction:column;animation:pop .18s ease}
.modal header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 6px}
.modal header h3{margin:0;font-size:20px;letter-spacing:-.3px}
.modal .body{padding:12px 22px;overflow:auto}
.modal footer{display:flex;gap:10px;justify-content:flex-end;padding:12px 22px 20px;flex-wrap:wrap}
.toasts{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--accent);color:var(--accent-ink);padding:11px 18px;border-radius:999px;font-weight:700;font-size:14.5px;box-shadow:var(--shadow);animation:fadeUp .2s ease;max-width:90vw}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* ---------- phone ---------- */
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .top{padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top))}
  .top .mobile-brand{display:block;width:34px;height:34px;border-radius:9px;box-shadow:0 0 0 1px var(--line)}
  .top h1{font-size:20px}
  .view{padding:16px 14px calc(96px + env(safe-area-inset-bottom))}
  .two{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat .value{font-size:24px}
  .card{padding:15px 16px;border-radius:16px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--header-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar button{all:unset;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;font-weight:700;color:var(--muted);padding:6px 0;border-radius:12px;cursor:pointer}
  .tabbar button svg{width:22px;height:22px}
  .tabbar button.on{color:var(--ink)}
  .tabbar button.on svg{transform:scale(1.08)}
  .row2,.row3{grid-template-columns:1fr}
  .toolbar select{flex:1 1 40%}
  .toolbar .btn{flex:1 1 auto}
  .hide-sm{display:none!important}
  .show-sm{display:grid!important}
  table.t.stack thead{display:none}
  table.t.stack,table.t.stack tbody,table.t.stack tr,table.t.stack td{display:block;width:100%}
  table.t.stack tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  table.t.stack tr:last-child{border-bottom:0}
  table.t.stack td{padding:2px 0;border:0}
  table.t.stack td[data-l]::before{content:attr(data-l) ": ";color:var(--muted);font-size:13px}
  table.t.stack td.actions{text-align:left;padding-top:8px}
  table.t.stack td.r{text-align:left}
  table.t.stack tr.overdue{background:var(--bad-bg)}
  table.t.stack tr.overdue td{background:transparent}
  .modal{border-radius:22px 22px 0 0;max-width:none;align-self:end;max-height:92dvh}
  .scrim{padding:0;place-items:end stretch}
}
@media print{
  .side,.top,.tabbar,.toolbar,.btn,.icon-btn{display:none!important}
  .app{display:block}.view{padding:0}
  body{background:#fff;color:#000}
}
.fab{display:none}
.bizsel{width:auto;max-width:220px;padding:8px 34px 8px 12px;border-radius:999px;font-weight:700;font-size:14px}
.amount-in{color:var(--ok-ink)}.amount-out{color:var(--bad-ink)}
.big-amount{font-size:26px!important;font-weight:700;letter-spacing:-.5px;text-align:right}
.typeseg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.typeseg label{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:14px;border:1.5px solid var(--line-strong);cursor:pointer;font-weight:700}
.typeseg input{position:absolute;opacity:0;pointer-events:none}
.typeseg label:has(input:checked){background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.typeseg svg{width:18px;height:18px}
@media (max-width:860px){
  .fab{display:flex;position:fixed;right:18px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:31;width:58px;height:58px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow);align-items:center;justify-content:center;cursor:pointer}
  .fab svg{width:26px;height:26px}
  .bizsel{max-width:128px;padding:7px 30px 7px 10px;font-size:13px}
  .toasts{bottom:calc(96px + env(safe-area-inset-bottom))}
  .top h1{font-size:19px}
}

/* ---------- accent + premium polish (brand colours from theme.css) ---------- */
body{background-image:radial-gradient(1100px 480px at 70% -160px,var(--halo),transparent 70%);background-repeat:no-repeat;background-attachment:fixed}
.side{background:color-mix(in srgb,var(--bg-elev) 88%,transparent);backdrop-filter:blur(12px)}
.brand img,.top .mobile-brand{box-shadow:0 8px 18px -8px var(--glow)}
.nav button{transition:background .2s,color .2s,transform .15s}
.nav button.on,.btn.primary,.seg button.on,.chip.solid,.stat.inverse,.fab,.typeseg label:has(input:checked){background:var(--brand-grad);color:#fff;border-color:transparent}
.nav button.on{box-shadow:0 10px 22px -12px var(--glow)}
.btn.primary{box-shadow:0 10px 22px -12px var(--glow)}
.btn.primary:hover{opacity:1;filter:brightness(1.06)}
.stat.inverse{box-shadow:0 20px 40px -20px var(--glow);position:relative;overflow:hidden}
.stat.inverse::after{content:"";position:absolute;right:-50px;top:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.12)}
.stat.inverse .label,.stat.inverse .sub{opacity:.85}
.card{border-radius:20px;box-shadow:var(--card-shadow);transition:transform .2s,box-shadow .2s}
.table-wrap{border-radius:18px;box-shadow:var(--card-shadow)}
.stat .value{letter-spacing:-.6px}
.bar>i{background:var(--brand-grad)}
.tabbar button.on{color:var(--brand-text)}
.icon-btn:hover{border-color:var(--brand-text)}
input:focus,select:focus,textarea:focus{border-color:var(--brand-text);box-shadow:0 0 0 4px var(--focus-ring)}
.card h2 .link:hover,.btn.outline:hover{color:var(--brand-text);border-color:var(--brand-text)}
.modal{border-radius:24px}
.toast{background:var(--toast-bg,var(--accent));color:#fff}
:root,[data-theme="dark"]{--card-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 20px 40px -24px rgba(0,0,0,.7)}
[data-theme="light"]{--card-shadow:0 1px 2px rgba(16,24,40,.04),0 14px 34px -18px rgba(16,24,40,.16)}
.view{animation:fadeUp .32s cubic-bezier(.2,.7,.2,1)}