/* ══════════════════════════════════════════════════════════
   DOT SMS OWNER — the phone's own look

   Not the desktop ERP shrunk. Big figures, few words, one column, thumbs.
   The brand is the ERP's — Dot in blue, Sms in amber — and the numbers are
   the whole point of every screen, so they get the space.
══════════════════════════════════════════════════════════ */
:root{
  --r:14px; --pad:16px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --blue:#1565a7; --blue-d:#0f3d63; --amber:#e6a100; --ink:#12263a; --ink-2:#4a6178; --ink-3:#8a97a4;
  --bg:#eef2f7; --card:#fff; --line:#dfe7ef; --good:#1e9e56; --bad:#c0392b; --warn:#b8860b;
  --kpi:#f6f9fc; --line2:#eef2f6; --input:#fff; --sel:#eaf2fb; --top:#0f3d63; --shadow:rgba(20,60,100,.06);
  --err-bg:#fdecea; --err-ink:#9d2a22; --err-line:#f2c4bf; --info-bg:#e9f3fb; --info-ink:#164a72; --info-line:#cfe1f1;
  --stale-bg:#fff4d6; --stale-ink:#7a5a00; --stale-line:#f1d98a; --pill:#eef2f6;
  --pill-ok:#dff4e6; --pill-ok-ink:#1a7a3a; --pill-bad:#fde3e0; --pill-bad-ink:#b3271e; --pill-warn:#fff1cc; --pill-warn-ink:#7a5a00; --pill-info:#e3effa; --pill-info-ink:#164a72;
  color-scheme:light;
}
/* ── the dark theme: the same page after sunset ─────────────── */
:root[data-theme="dark"]{
  --blue:#4d9de0; --blue-d:#0b1420; --amber:#f0b429; --ink:#e6edf3; --ink-2:#b3c0cc; --ink-3:#7d8b99;
  --bg:#0f1720; --card:#172230; --line:#253243; --good:#3ccf7a; --bad:#ff7b6b; --warn:#e8b53a;
  --kpi:#1e2a3a; --line2:#223042; --input:#101a26; --sel:#1d2e44; --top:#0b1420; --shadow:rgba(0,0,0,.35);
  --err-bg:#3a1f1c; --err-ink:#ffb3a8; --err-line:#6b2e27; --info-bg:#15283b; --info-ink:#9cc9f0; --info-line:#264a6b;
  --stale-bg:#3a3010; --stale-ink:#f0d88a; --stale-line:#6b5a1a; --pill:#243244;
  --pill-ok:#173a27; --pill-ok-ink:#6be0a0; --pill-bad:#40201d; --pill-bad-ink:#ffa79c; --pill-warn:#3d3210; --pill-warn-ink:#f0d88a; --pill-info:#173049; --pill-info-ink:#9cc9f0;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:15px/1.4 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{overscroll-behavior-y:contain}
button{font:inherit;cursor:pointer}
input,select{font:inherit}
.app{min-height:100vh;display:flex;flex-direction:column}
.hidden{display:none!important}
.mono{font-family:Consolas,"SF Mono",Menlo,monospace}
.brand b.d{color:var(--blue)} .brand b.s{color:var(--amber)}

/* ── the auth screens ─────────────────────────────────────── */
.auth{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 24px calc(24px + var(--safe-b));max-width:440px;margin:0 auto;width:100%}
.auth .logo{font-size:34px;font-weight:800;letter-spacing:-.5px;text-align:center;margin-bottom:2px}
.auth .tag{text-align:center;color:var(--ink-3);font-size:13px;margin-bottom:34px}
.auth h1{font-size:22px;margin:0 0 6px}
.auth p{color:var(--ink-2);margin:0 0 20px;font-size:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.field input{width:100%;padding:14px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--input);color:var(--ink);font-size:17px;outline:none}
.field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,101,167,.12)}
.field input.key{text-transform:uppercase;letter-spacing:2px;font-family:Consolas,monospace;font-size:19px;text-align:center}
.btn{display:block;width:100%;padding:15px;border:none;border-radius:12px;font-size:16px;font-weight:700;background:var(--blue);color:#fff;margin-top:8px}
.btn:disabled{opacity:.55}
.btn.ghost{background:var(--card);color:var(--blue);border:1.5px solid var(--line)}
.btn.danger{background:var(--bad)}
.btn.small{padding:10px 14px;font-size:14px;width:auto;display:inline-block;margin:0}
.err{background:var(--err-bg);color:var(--err-ink);border:1px solid var(--err-line);border-radius:10px;padding:11px 13px;font-size:14px;margin-bottom:14px}
.info{background:var(--info-bg);color:var(--info-ink);border:1px solid var(--info-line);border-radius:10px;padding:11px 13px;font-size:13.5px;margin-bottom:14px}
.company{background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.company img{width:40px;height:40px;object-fit:contain;border-radius:8px}
.company b{display:block;font-size:16px}
.company small{color:var(--ink-3)}

/* ── the shell ────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:5;background:var(--top);color:#fff;padding:calc(10px + var(--safe-t)) 14px 10px;display:flex;align-items:center;gap:10px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.top .menu{background:none;border:none;color:#fff;font-size:22px;padding:4px 6px}
.top .title{flex:1;min-width:0}
.top .title b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .title small{display:block;font-size:11px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .refresh{background:rgba(255,255,255,.12);border:none;color:#fff;font-size:18px;width:38px;height:38px;border-radius:10px}
.top .refresh.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{position:sticky;top:0;z-index:4;background:var(--card);border-bottom:1px solid var(--line);padding:8px 12px;display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none}
.bar::-webkit-scrollbar{display:none}
.bar select{padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;background:var(--input);color:var(--ink);font-size:13.5px;max-width:48%}
.chips{display:flex;gap:6px;overflow-x:auto;padding:8px 12px 2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:7px 12px;border-radius:20px;border:1.5px solid var(--line);background:var(--card);font-size:13px;font-weight:600;color:var(--ink-2)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.dates{display:flex;gap:8px;padding:6px 12px}
.dates input{flex:1;padding:8px;border:1.5px solid var(--line);border-radius:10px;font-size:13px;background:var(--input);color:var(--ink)}
.main{flex:1;padding:12px 12px calc(84px + var(--safe-b));display:flex;flex-direction:column;gap:12px}
.stale{background:var(--stale-bg);color:var(--stale-ink);border:1px solid var(--stale-line);border-radius:10px;padding:9px 12px;font-size:13px;display:flex;gap:8px;align-items:center}
.updated{text-align:center;color:var(--ink-3);font-size:12px;padding:4px 0 0}

/* bottom navigation */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--card);border-top:1px solid var(--line);display:flex;padding:6px 4px calc(6px + var(--safe-b));box-shadow:0 -2px 10px var(--shadow)}
.nav button{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--ink-3);padding:4px 0;font-weight:600;border-radius:12px;transition:color .15s,transform .1s}
.nav button i{font-style:normal;font-size:20px;line-height:1;padding:4px 14px;border-radius:14px;transition:background .15s,transform .15s}
.nav button.on{color:var(--blue);font-weight:800}
.nav button.on i{background:var(--sel);transform:translateY(-1px)}
.nav button:active{transform:scale(.94)}
@media(hover:hover){.nav button:hover:not(.on){color:var(--ink-2)} .nav button:hover:not(.on) i{background:var(--kpi)}}
.nav button .dot{position:absolute;margin-left:22px;margin-top:-2px;width:8px;height:8px;border-radius:50%;background:var(--bad)}

/* drawer */
.drawer-bg{position:fixed;inset:0;background:rgba(10,30,50,.45);z-index:20}
.drawer{position:fixed;top:0;bottom:0;left:0;width:82%;max-width:320px;background:var(--card);z-index:21;display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(0,0,0,.2);animation:slide .18s ease-out}
@keyframes slide{from{transform:translateX(-100%)}to{transform:none}}
.drawer .head{background:var(--top);color:#fff;padding:calc(18px + var(--safe-t)) 18px 16px}
.drawer .head b{display:block;font-size:17px}
.drawer .head small{opacity:.8;font-size:12px}
.drawer .items{flex:1;overflow:auto;padding:8px 0}
.drawer .items button{display:flex;width:100%;align-items:center;gap:12px;padding:13px 18px;background:none;border:none;font-size:15px;color:var(--ink);text-align:left}
.drawer .items button.on{background:var(--sel);color:var(--blue);font-weight:700}
.drawer .items button:active{background:var(--kpi)}
.drawer .items button i{font-style:normal;font-size:19px;width:26px;text-align:center}
.drawer .foot{padding:12px 18px calc(12px + var(--safe-b));border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}

/* ── cards and figures ────────────────────────────────────── */
.card{background:var(--card);border-radius:var(--r);padding:14px var(--pad);box-shadow:0 1px 3px var(--shadow)}
.card h3{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-3);display:flex;justify-content:space-between;align-items:center}
.card h3 a{font-size:12px;text-transform:none;letter-spacing:0;color:var(--blue);font-weight:600;text-decoration:none}
.hero{background:linear-gradient(135deg,#0f3d63,#1565a7);color:#fff}
.hero h3{color:rgba(255,255,255,.75)}
.hero .big{font-size:38px;font-weight:800;letter-spacing:-1px;line-height:1.05}
.hero .sub{font-size:13px;opacity:.85;margin-top:6px}
.hero .grid3{margin-top:14px}
.hero .grid3 .kpi{background:rgba(255,255,255,.12);padding:10px 12px}
.hero .grid3 .kpi small,.hero .grid3 .kpi b{color:#fff}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpi{background:var(--kpi);border-radius:12px;padding:12px 12px;min-width:0;overflow:hidden}
.kpi small{display:block;font-size:11px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b{display:block;font-size:20px;font-weight:800;letter-spacing:-.3px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.kpi.good b{color:var(--good)} .kpi.bad b{color:var(--bad)} .kpi.warn b{color:var(--warn)}
.kpi.wide{grid-column:1/-1}
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line2);font-size:14.5px}
.row:first-child{border-top:none;padding-top:2px}
.row .l{min-width:0;flex:1}
.row .l small{display:block;color:var(--ink-3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .v{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.row .v.bad{color:var(--bad)} .row .v.good{color:var(--good)} .row .v.warn{color:var(--warn)}
.row.head{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.row.total{border-top:2px solid var(--line);font-weight:800}
.row.tap{cursor:pointer}
.row.tap:active{background:var(--kpi)}
.bar-h{height:7px;background:var(--line2);border-radius:5px;overflow:hidden;margin-top:5px}
.bar-h i{display:block;height:100%;background:var(--blue);border-radius:5px}
.bar-h.amber i{background:var(--amber)}
.hours{display:flex;align-items:flex-end;gap:3px;height:96px;padding-top:6px}
.hours .h{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:9px;color:var(--ink-3)}
.hours .h i{display:block;width:100%;background:var(--blue);border-radius:3px 3px 0 0;min-height:2px}
.hours .h.peak i{background:var(--amber)}
.pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;background:var(--pill);color:var(--ink-2)}
.pill.ok{background:var(--pill-ok);color:var(--pill-ok-ink)} .pill.bad{background:var(--pill-bad);color:var(--pill-bad-ink)} .pill.warn{background:var(--pill-warn);color:var(--pill-warn-ink)} .pill.info{background:var(--pill-info);color:var(--pill-info-ink)}
.stmt .row{padding:8px 0}
.stmt .sec{font-size:12px;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.5px;padding:12px 0 4px}
.stmt .sum{background:var(--kpi);margin:6px -16px 0;padding:10px 16px;border-top:1px solid var(--line)}
.stmt .sum .v{font-size:17px}
.stmt .final{background:#0f3d63;color:#fff;margin:8px -16px -14px;padding:14px 16px;border-radius:0 0 var(--r) var(--r)}
.stmt .final .v{font-size:22px}
.notes{padding:4px 0 6px 12px;border-left:3px solid var(--line2);margin:2px 0 6px}
.notes .row{font-size:13px;padding:5px 0;border:none}
.empty{color:var(--ink-3);text-align:center;padding:18px 8px;font-size:14px}
.loading{color:var(--ink-3);text-align:center;padding:26px 8px;font-size:14px}
.errbox{background:var(--err-bg);color:var(--err-ink);border-radius:10px;padding:12px 14px;font-size:14px}
.note{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line2)}
.note:first-child{border-top:none}
.note i{font-style:normal;font-size:22px;width:30px;text-align:center;flex-shrink:0}
.note .t{flex:1;min-width:0}
.note .t b{display:block;font-size:14.5px}
.note .t p{margin:2px 0 0;font-size:13px;color:var(--ink-2)}
.note .t small{color:var(--ink-3);font-size:11.5px}
.note.unread .t b{color:var(--blue)}
.section-title{font-size:13px;font-weight:800;color:var(--ink-2);text-transform:uppercase;letter-spacing:.5px;padding:6px 4px 0}
.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.detail-head .big{font-size:24px;font-weight:800}
.back{background:none;border:none;color:var(--blue);font-weight:700;font-size:14px;padding:6px 0;display:inline-flex;gap:6px;align-items:center}
.tabs{display:flex;background:var(--card);border-radius:12px;padding:4px;gap:4px}
.tabs button{flex:1;border:none;background:none;padding:9px 6px;border-radius:9px;font-size:13px;font-weight:700;color:var(--ink-3)}
.tabs button.on{background:var(--blue);color:#fff}
.list-page{display:flex;justify-content:space-between;align-items:center;padding:8px 4px;font-size:13px;color:var(--ink-3)}
.list-page button{background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:6px 12px;font-weight:700;color:var(--blue)}
.toast{position:fixed;left:50%;bottom:calc(92px + var(--safe-b));transform:translateX(-50%);background:#12263a;color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;z-index:30;max-width:90%;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.toast.bad{background:var(--bad)}
.check{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px}
.check input{width:18px;height:18px}
.theme{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.theme span{font-size:12px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-right:4px}
.theme button{padding:8px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink-2);font-size:13px;font-weight:700}
.theme button.on{background:var(--blue);border-color:var(--blue);color:#fff}
select{background:var(--input);color:var(--ink)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.dev-card .row .l b{font-size:14.5px}

/* ── notification settings: the switch, off on the left, on on the right ── */
.sw{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw i{position:absolute;inset:0;background:var(--line);border-radius:26px;transition:background .2s;cursor:pointer}
.sw i::after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.sw input:checked + i{background:var(--good)}
.sw input:checked + i::after{transform:translateX(20px)}
.sw input:disabled + i{opacity:.45;cursor:default}
.sw.sm{width:38px;height:22px} .sw.sm i::after{width:16px;height:16px} .sw.sm input:checked + i::after{transform:translateX(16px)}
.nset{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--line2)}
.nset:first-child{border-top:none}
.nset .t{flex:1;min-width:0} .nset .t b{display:block;font-size:14.5px} .nset .t p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.35}
.nset .t small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:3px}
.nset .sub{display:flex;gap:16px;margin-top:8px;flex-wrap:wrap}
.nset .sub label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);font-weight:600}
.ncat{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;width:100%}
.ncat .n{font-size:11.5px;color:var(--ink-3);font-weight:600;text-transform:none;letter-spacing:0}
.sev{display:inline-block;width:10px!important;height:10px!important;padding:0!important;margin:5px 0 0!important;border:none!important;border-radius:50%!important;flex-shrink:0}
.sev.info{background:var(--blue)} .sev.warn{background:var(--amber)} .sev.critical{background:var(--bad)} .sev.success{background:var(--good)}
.note .when{white-space:nowrap;font-size:11.5px;color:var(--ink-3);padding-top:2px}
.dayhead{font-size:12px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.5px;padding:8px 4px 2px}
.top .bell{position:relative;background:rgba(255,255,255,.12);border:none;color:#fff;font-size:18px;width:38px;height:38px;border-radius:10px;margin-right:6px}
.top .bell b{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center}
.nav button .dot{min-width:16px;height:16px;padding:0 4px;border-radius:8px;font-size:10px;font-weight:800;color:#fff;line-height:16px;text-align:center;margin-left:18px;margin-top:-4px}

.hero .qrows{margin-top:12px;border-top:1px solid rgba(255,255,255,.18)}
.hero .qrows .q{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:13px}
.hero .qrows .q:last-child{border-bottom:none}
.hero .qrows .q small{text-transform:uppercase;letter-spacing:.4px;font-size:11px;font-weight:600;opacity:.8}
.hero .qrows .q b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.rank{display:inline-block;min-width:22px;height:22px;line-height:22px;border-radius:11px;background:var(--sel);color:var(--blue);font-size:11.5px;font-weight:800;text-align:center;margin-right:8px}
.rank.r1{background:#f6d365;color:#5a3e00} .rank.r2{background:#dfe3e8;color:#3a4d60} .rank.r3{background:#e8c9a8;color:#5a3a1a}

/* a figure that opens: underlined, so a thumb knows */
.stmt .row.tap .l{text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--blue);text-underline-offset:3px;color:var(--blue)}
.stmt .notes .row.tap .l{color:var(--ink);text-decoration-color:var(--ink-3)}
.stmt .notes .row.tap .l small{color:var(--blue)}
.gl .row{align-items:flex-start;padding:9px 0}
.gl .row .l small{white-space:normal}
.gl .v .dr{color:var(--good)} .gl .v .cr{color:var(--bad)}
.gl .v em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);font-weight:600}