/* NCS One Mobile — one column, portrait, no horizontal scroll.
   THEME: html[data-theme=light|dark] is set by the inline boot script in index.html (Auto follows the
   phone; a manual pick is remembered per device). Never theme by @media alone — the Android WebView
   does not reliably report prefers-color-scheme, which is why dark mode "did nothing" in v2. */
:root,html[data-theme=light]{color-scheme:light;
  --bg:#f3f5f8;--surface:#ffffff;--surface-2:#f6f8fb;--surface-3:#eef2f7;--border:#e3e8ef;--border-strong:#cfd7e2;
  --text:#0f172a;--text-2:#334155;--muted:#64748b;
  --primary:#0c5a86;--primary-ink:#0c5a86;--primary-soft:#e3f1fb;--on-primary:#ffffff;--primary-btn:#0c5a86;
  --accent:#15803d;--accent-soft:#dcfce7;--warn:#b45309;--warn-soft:#fef3c7;--danger:#b91c1c;--danger-soft:#fee2e2;--info:#1d4ed8;--info-soft:#dbeafe;
  --hdr-bg:rgba(255,255,255,.92);--shadow:0 1px 2px rgba(15,23,42,.06),0 1px 1px rgba(15,23,42,.04);--shadow-up:0 -6px 24px rgba(15,23,42,.12);
  --toast-bg:#0f172a;--toast-fg:#fff;--backdrop:rgba(15,23,42,.45);
  --radius:12px;--gutter:12px;--tap:44px;--bar:60px;--hdr:52px;--rail:236px}
html[data-theme=dark]{color-scheme:dark;
  --bg:#15171b;--surface:#1f2227;--surface-2:#262a30;--surface-3:#2d3239;--border:#30353d;--border-strong:#3d434c;
  --text:#e8ebef;--text-2:#c4cad2;--muted:#98a2ae;
  --primary:#56b8f0;--primary-ink:#7cc8f5;--primary-soft:#12324a;--on-primary:#06202f;--primary-btn:#3aa6e6;
  --accent:#4ade80;--accent-soft:#12301f;--warn:#fbbf24;--warn-soft:#3a2b0a;--danger:#f87171;--danger-soft:#3b1414;--info:#93c5fd;--info-soft:#16243d;
  --hdr-bg:rgba(21,23,27,.92);--shadow:none;--shadow-up:0 -6px 24px rgba(0,0,0,.5);
  --toast-bg:#e8ebef;--toast-fg:#0f172a;--backdrop:rgba(0,0,0,.6)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;min-width:0}
/* SCROLL FIX: only BODY clips sideways; the clip propagates to the viewport, so the document itself
   scrolls vertically. (v2 set overflow-x:hidden on html AND body, which turned body into its own
   scroll container — the Android WebView then refused to scroll the page at all.) */
html{margin:0;background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--text);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
img,canvas,svg,video{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:13px}.right{text-align:right}.nowrap{white-space:nowrap}.num{font-variant-numeric:tabular-nums}
.ok-t{color:var(--accent)}.warn-t{color:var(--warn)}.bad-t{color:var(--danger)}.info-t{color:var(--info)}

/* ---- header: calm surface bar, not a solid blue slab ---- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;height:calc(var(--hdr) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 8px 0 var(--gutter);background:var(--hdr-bg);-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border);color:var(--text)}
.topbar .brand{width:28px;height:28px;border-radius:8px;flex:0 0 auto}
.topbar h1{flex:1;margin:0;font-size:18px;font-weight:750;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{min-width:var(--tap);height:var(--tap);border:0;border-radius:12px;background:transparent;color:inherit;font-size:22px;line-height:1;padding:0;display:inline-flex;align-items:center;justify-content:center}
.iconbtn:active{background:var(--surface-3)}
.topbar #backBtn{margin-left:-10px;font-size:30px;color:var(--primary-ink)}
.syncdot{width:9px;height:9px;border-radius:50%;background:#94a3b8;flex:0 0 auto;margin:0 6px}.syncdot[data-state=ok]{background:#22c55e}.syncdot[data-state=err]{background:#ef4444}.syncdot[data-state=busy]{background:#f59e0b}
.offline{background:var(--warn-soft);color:var(--warn);padding:8px var(--gutter);font-size:14px}
.updbar{display:block;width:100%;border:0;text-align:left;background:var(--info-soft);color:var(--info);padding:10px var(--gutter);font-size:14px;font-weight:650;min-height:var(--tap)}html.tab .updbar{margin-left:var(--rail);width:auto}

main{padding:10px var(--gutter) calc(var(--bar) + 88px + env(safe-area-inset-bottom));width:100%}
body.inshell main{padding-bottom:calc(88px + env(safe-area-inset-bottom))}

.section-title{margin:18px 2px 8px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:baseline;gap:6px}.section-title span{font-weight:500;text-transform:none;letter-spacing:0}
.section-title:first-child{margin-top:4px}

/* ---- cards & rows ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;width:100%;overflow:hidden;overflow-wrap:anywhere;box-shadow:var(--shadow)}
.card.tap{cursor:pointer}.card.tap:active{background:var(--surface-2)}
.card.flush{padding:0}
.card h3{margin:0 0 3px;font-size:15px;font-weight:650;display:flex;justify-content:space-between;gap:8px;align-items:baseline}.card h3>span:last-child:not(:first-child){font-weight:500;color:var(--muted);font-size:13px;white-space:nowrap;flex:0 0 auto}
.card h3>:first-child{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;white-space:normal}
.card .sub{font-size:14px;color:var(--text-2)}
.card.accent-l{border-left:4px solid var(--primary)}.card.warn-l{border-left:4px solid var(--warn)}.card.bad-l{border-left:4px solid var(--danger)}.card.ok-l{border-left:4px solid var(--accent)}
/* labels take their natural width and never wrap; the VALUE gets the rest and wraps. (The old
   1fr/auto split let a long value crush the label column to 2 letters a line.) */
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 12px;font-size:13.5px;margin-top:5px;line-height:1.35}.kv span{color:var(--muted);white-space:nowrap;overflow-wrap:normal}.kv b{text-align:right;overflow-wrap:anywhere;font-weight:600}
.row{display:flex;align-items:center;gap:10px;min-height:var(--tap)}.row .grow{flex:1;min-width:0}
.rows>.row{padding:10px 14px;border-bottom:1px solid var(--border)}.rows>.row:last-child{border-bottom:0}
.rows>.row.tap:active{background:var(--surface-2)}
.amount{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.actions-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.actions-row .btn{flex:1 1 auto;min-width:0}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;min-height:var(--tap);overflow:hidden;box-shadow:var(--shadow)}.kpi.tap{cursor:pointer}.kpi.tap:active{background:var(--surface-2)}
.kpi .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}.kpi .v{font-size:20px;font-weight:800;margin-top:2px;overflow-wrap:anywhere;line-height:1.15;font-variant-numeric:tabular-nums}.kpi .s{font-size:12px;color:var(--muted);margin-top:4px;overflow-wrap:anywhere}
.kpi.warn .v{color:var(--warn)}.kpi.danger .v{color:var(--danger)}.kpi.accent .v{color:var(--accent)}.kpi.wide{grid-column:1/-1}

/* ---- chips / segmented ---- */
.chips{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:4px var(--gutter) 8px;margin:0 calc(-1 * var(--gutter));scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:14px;color:var(--text);white-space:nowrap}.chip.on{background:var(--primary-btn);color:var(--on-primary);border-color:var(--primary-btn)}
.seg{display:flex;background:var(--surface-3);border-radius:12px;padding:3px;gap:3px;margin-bottom:10px}.seg button{flex:1;min-height:var(--tap);border:0;border-radius:9px;background:transparent;font-size:14px;font-weight:600;color:var(--muted);padding:0 6px}.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}

.search{display:flex;gap:8px;margin-bottom:8px}.search input{flex:1;min-width:0;height:var(--tap);border:1px solid var(--border);border-radius:12px;padding:0 14px;font-size:16px;background:var(--surface);color:var(--text)}

/* ---- buttons ---- */
.btn{min-height:var(--tap);padding:8px 14px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:15px;font-weight:600;overflow-wrap:anywhere;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:active{background:var(--surface-3)}
.btn.primary{background:var(--primary-btn);color:var(--on-primary);border-color:var(--primary-btn)}.btn.primary:active{filter:brightness(.92)}
.btn.success{background:#15803d;color:#fff;border-color:#15803d}.btn.danger{background:#b91c1c;color:#fff;border-color:#b91c1c}
.btn.ghost{border-color:transparent;background:transparent;color:var(--primary-ink)}
.btn.soft{background:var(--primary-soft);border-color:transparent;color:var(--primary-ink)}
.btn.sm{min-height:var(--tap);padding:6px 12px;font-size:14px;border-radius:10px}
.btn.block{display:flex;width:100%}.btn:disabled{opacity:.55}.btn.opt{text-align:left;justify-content:flex-start;margin-bottom:8px;font-weight:500;width:100%}
.fab{position:fixed;right:var(--gutter);bottom:calc(var(--bar) + 16px + env(safe-area-inset-bottom));z-index:25;min-height:56px;padding:0 20px;border-radius:18px;border:0;background:var(--primary-btn);color:var(--on-primary);font-size:16px;font-weight:700;box-shadow:0 6px 18px rgba(12,90,134,.35);display:flex;align-items:center;gap:8px}
body.inshell .fab{bottom:calc(16px + env(safe-area-inset-bottom))}

.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:650;background:var(--surface-3);color:var(--muted);white-space:nowrap;vertical-align:1px}.pill.ok{background:var(--accent-soft);color:var(--accent)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.bad{background:var(--danger-soft);color:var(--danger)}.pill.info{background:var(--info-soft);color:var(--info)}.pill.pri{background:var(--primary-soft);color:var(--primary-ink)}
.empty{padding:40px 12px;text-align:center;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{min-height:76px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);text-align:left;padding:12px;font-size:15px;display:flex;flex-direction:column;justify-content:center;gap:4px;overflow:hidden;box-shadow:var(--shadow)}.tile:active{background:var(--surface-2)}.tile b{overflow-wrap:anywhere}.tile .ic{font-size:22px;line-height:1}
.pad{padding:12px 0}
.note{background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:12px;padding:10px 12px;font-size:14px;color:var(--text-2);margin-bottom:10px}
.note.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}.note.bad{background:var(--danger-soft);border-color:transparent;color:var(--danger)}.note.ok{background:var(--accent-soft);border-color:transparent;color:var(--accent)}

/* ---- forms ---- */
label,.field{display:block;font-size:14px;color:var(--muted);margin-bottom:12px}
label input,label select,label textarea,.input{display:block;width:100%;margin-top:4px;min-height:var(--tap);border:1px solid var(--border-strong);border-radius:12px;padding:0 12px;font-size:16px;background:var(--surface);color:var(--text)}
label textarea,textarea.input{min-height:84px;padding:10px 12px}
label input:focus,label select:focus,label textarea:focus,.input:focus{outline:2px solid var(--primary);outline-offset:0;border-color:transparent}
label .req{color:var(--danger)}
.field .pickbtn{display:flex;width:100%;margin-top:4px;min-height:var(--tap);align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--border-strong);border-radius:12px;padding:8px 12px;font-size:16px;background:var(--surface);color:var(--text);text-align:left}
.field .pickbtn .ph{color:var(--muted)}.field .pickbtn::after{content:'▾';color:var(--muted);flex:0 0 auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.check{display:flex;align-items:center;gap:10px;min-height:var(--tap);color:var(--text);font-size:15px}.check input{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--primary)}
.err{color:var(--danger);font-size:14px;min-height:0;margin-bottom:8px;white-space:pre-line}.err:empty{display:none}
.stepper{display:flex;align-items:center;gap:6px}.stepper button{width:var(--tap);height:var(--tap);border-radius:12px;border:1px solid var(--border-strong);background:var(--surface-2);font-size:22px;font-weight:700;color:var(--text);flex:0 0 auto}.stepper input{flex:1;text-align:center;min-height:var(--tap);border:1px solid var(--border-strong);border-radius:12px;font-size:18px;font-weight:700;background:var(--surface);color:var(--text)}

.login{padding:48px 8px 0;max-width:440px;margin:0 auto}.login-logo{width:76px;height:76px;border-radius:18px;display:block;margin:0 auto 12px}.login h2{text-align:center;margin:0 0 28px;font-size:24px}

.webtabs{position:fixed;left:0;right:0;bottom:0;height:calc(var(--bar) + env(safe-area-inset-bottom));display:flex;background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);z-index:30}
.webtabs button{flex:1;min-width:0;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0}.webtabs button.on{color:var(--primary-ink)}
.webtabs .ico{font-size:21px;line-height:1;filter:grayscale(1);opacity:.7}.webtabs button.on .ico{filter:none;opacity:1}

/* ---- bottom sheets ---- */
#sheetHost .backdrop{position:fixed;inset:0;background:var(--backdrop);z-index:40}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:92vh;background:var(--surface);border-radius:20px 20px 0 0;z-index:41;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .22s;box-shadow:var(--shadow-up)}.sheet.open{transform:none}
.sheet.full{top:0;max-height:none;border-radius:0}
.sheet header{display:flex;align-items:center;gap:8px;padding:8px 8px 8px var(--gutter);border-bottom:1px solid var(--border);padding-top:max(8px,env(safe-area-inset-top))}.sheet:not(.full) header{padding-top:8px}.sheet header h2{flex:1;margin:0;font-size:17px;overflow-wrap:anywhere}
.sheet .body{overflow-y:auto;overscroll-behavior:contain;padding:14px var(--gutter);min-height:60px;flex:1 1 auto}.sheet .actions{display:flex;gap:10px;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border)}.sheet .actions .btn{flex:1}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--border-strong);margin:8px auto 0}
#toastHost{position:fixed;left:var(--gutter);right:var(--gutter);bottom:calc(var(--bar) + 16px + env(safe-area-inset-bottom));z-index:60;pointer-events:none}body.inshell #toastHost{bottom:calc(16px + env(safe-area-inset-bottom))}
.toast{background:var(--toast-bg);color:var(--toast-fg);padding:12px 14px;border-radius:12px;margin-top:8px;opacity:0;transform:translateY(8px);transition:.25s;font-size:15px;overflow-wrap:anywhere;box-shadow:0 6px 18px rgba(0,0,0,.25)}.toast.show{opacity:1;transform:none}.toast.err{background:#991b1b;color:#fff}.toast.warn{background:#92400e;color:#fff}
.photos{display:flex;gap:8px;overflow-x:auto;padding:4px 0}.photos img,.photos .ph{width:92px;height:92px;object-fit:cover;border-radius:10px;flex:0 0 auto;background:var(--surface-2)}
.photos .ph{position:relative;display:inline-block}.photos .ph button{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:16px;line-height:1}
.chart{height:220px;position:relative;width:100%}
table.mini{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}table.mini th,table.mini td{padding:6px 4px;border-bottom:1px solid var(--border);overflow-wrap:anywhere;text-align:left;vertical-align:top}table.mini th{color:var(--muted);font-weight:600;font-size:12px}table.mini .right{text-align:right}
.loadmore{margin:8px 0 16px}
.bar-track{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}.bar-track>i{display:block;height:100%;background:var(--primary)}
.att-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.att-grid button{min-height:44px;border-radius:10px;border:1px solid var(--border);background:var(--surface);font-size:13px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;padding:2px}
.att-grid button small{font-size:12px;font-weight:500;color:var(--muted)}
.att-grid .P{background:var(--accent-soft);color:var(--accent)}.att-grid .A{background:var(--danger-soft);color:var(--danger)}.att-grid .H{background:var(--warn-soft);color:var(--warn)}.att-grid .L{background:var(--info-soft);color:var(--info)}.att-grid .WO{background:var(--surface-3);color:var(--muted)}.att-grid .V{background:var(--primary-soft);color:var(--primary-ink)}

/* ================= TABLET (landscape) — html.tab =================
   Same screens as the phone, laid out for an 11" landscape tab: a permanent side rail instead of the
   bottom bar, card lists as a grid, and list → detail opens SIDE BY SIDE (list stays on the left).
   Sheets become a right-hand drawer. One codebase: every phone fix reaches the tablet automatically. */
html.tab{--tap:40px;--gutter:16px;--hdr:54px}
html.tab body{font-size:14.5px}
.rail{display:none}
html.tab .rail{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:30;background:var(--surface);border-right:1px solid var(--border);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);overflow-y:auto;overscroll-behavior:contain}
.rail .rh{display:flex;align-items:center;gap:10px;padding:12px 16px 10px;font-weight:800;font-size:17px}.rail .rh img{width:30px;height:30px;border-radius:8px}
.rail nav{display:flex;flex-direction:column;gap:2px;padding:4px 8px;flex:1}
.rail nav button{display:flex;align-items:center;gap:12px;min-height:40px;padding:6px 12px;border:0;border-radius:10px;background:transparent;color:var(--text-2);font-size:14.5px;font-weight:600;text-align:left}
.rail nav button .ico{width:22px;text-align:center;font-size:18px;flex:0 0 auto}.rail nav button:active{background:var(--surface-3)}
.rail nav button.on{background:var(--primary-soft);color:var(--primary-ink)}
.rail .rf{padding:10px 16px 14px;border-top:1px solid var(--border);font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}.rail .rf b{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.tab .topbar,html.tab #offline,html.tab main{margin-left:var(--rail);width:auto}
html.tab .updbar{width:calc(100% - var(--rail))}
html.tab body.norail .topbar,html.tab body.norail #offline,html.tab body.norail main{margin-left:0}
html.tab .topbar{padding-left:20px}html.tab .topbar .brand{display:none}
html.tab main{padding:14px 20px 90px}
html.tab .webtabs{display:none!important}
html.tab .fab,html.tab #toastHost{bottom:calc(20px + env(safe-area-inset-bottom))}
html.tab .fab{right:24px}
html.tab #toastHost{left:auto;right:24px;width:min(440px,60vw)}
/* card lists → responsive grid */
html.tab .cardlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px;align-items:start}
html.tab .cardlist>.card{margin-bottom:0}html.tab .cardlist>.loadmore{grid-column:1/-1}
html.tab .kpis{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
html.tab .grid2{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
html.tab .chips{margin:0;padding:4px 0 8px}
html.tab .chart{height:260px}
/* list | detail side by side */
html.tab main.split{display:grid;grid-template-columns:minmax(360px,40%) minmax(0,1fr);padding:0;height:calc(100vh - var(--hdr) - env(safe-area-inset-top));overflow:hidden}
html.tab main.split>.pane{overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 40px;position:relative;min-height:0}
html.tab main.split>.pl{border-right:1px solid var(--border);background:var(--bg)}
html.tab main.split>.pd{background:var(--surface-2)}
html.tab main.split .pl .cardlist{grid-template-columns:1fr}
html.tab main.split .pl .kpis{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
html.tab main.split .pl .fab{position:sticky;bottom:12px;right:auto;margin:12px 0 0 auto;width:max-content}
html.tab main.split .pd .fab{position:absolute}
html.tab .pd-head{display:flex;align-items:center;gap:8px;margin:-4px 0 8px}.pd-head h2{flex:1;margin:0;font-size:17px}
/* sheets → right-hand drawer */
html.tab .sheet{left:auto;top:0;bottom:0;right:0;width:min(560px,70vw);max-height:none;border-radius:0;transform:translateX(100%)}
html.tab .sheet.open{transform:none}html.tab .sheet .grab{display:none}
html.tab .sheet.full{width:min(920px,calc(100vw - var(--rail)))}
html.tab .sheet header{padding-top:max(8px,env(safe-area-inset-top))}
html.tab .login{padding-top:10vh}