/* HSH EOMS product shell. Mobile-first; one stylesheet, system fonts, no CDN.
   Brand note: the logo is the official HSH artwork; the colour tokens below are NEUTRAL
   placeholders, not an official HSH palette. Replace them here when an approved guideline exists.
   Status colours are semantic and separate from brand colours, and never carry meaning alone. */
:root{
  --brand:#173943;          /* deep teal from the Water prototype (not an official HSH guideline) */
  --gold:#b99255;           /* prototype accent: header rule only */
  --brand-ink:#ffffff;
  --ink:#16232d;--ink-2:#3c4b56;--muted:#5d6c77;--line:#d5dde2;--line-2:#e8edf0;
  --bg:#f4f6f8;--surface:#ffffff;--focus:#1a73c9;
  --ok:#17663a;--ok-bg:#e6f4ec;
  --attn:#7a5300;--attn-bg:#fff3d1;
  --bad:#a4161a;--bad-bg:#fde8e7;
  --stale:#4d5961;--stale-bg:#eef1f3;
  --none:#4d5961;--none-bg:#ffffff;
  --policy:#5b4a8a;--policy-bg:#f1eefa;
  --paused:#4d5961;--paused-bg:#f2f4f5;
  --test:#7a4f0a;--test-bg:#fff1c4;
  --radius:12px;--tap:48px;
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);
  --tabbar:64px;--rail:220px;
}
*{box-sizing:border-box}[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  color:var(--ink);background:var(--bg);overflow-x:hidden}
a{color:var(--brand)}img{max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip{position:absolute;left:8px;top:-60px;background:#fff;padding:10px 14px;z-index:50;border-radius:8px}
.skip:focus{top:8px}

/* ---------------------------------------------------------------- app bar */
.appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:calc(8px + var(--safe-top)) calc(12px + var(--safe-right)) 8px calc(12px + var(--safe-left));
  background:var(--surface);border-bottom:3px solid var(--gold);min-height:56px}
.appbar .logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);min-height:44px}
.appbar .logo img{width:42px;height:42px}
.appbar .logo .org{display:flex;flex-direction:column;line-height:1.15}
.appbar .logo .org strong{font-size:15px;letter-spacing:.03em;color:var(--ink);white-space:nowrap}
.appbar .logo .org small{font-size:11px;color:var(--muted);display:none}
.appbar .system{flex:1;font-weight:700;letter-spacing:.06em;font-size:15px;text-transform:uppercase;min-width:0;
  padding-left:10px;border-left:1px solid var(--line)}
.appbar .system summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:44px}
.appbar .system summary::-webkit-details-marker{display:none}
.appbar .system[open] .menu{display:block}
.menu{position:absolute;right:8px;top:56px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(10,30,45,.16);min-width:240px;padding:6px;z-index:30;text-transform:none;letter-spacing:0;font-weight:400}
.menu a,.menu button{display:flex;align-items:center;width:100%;min-height:var(--tap);padding:8px 12px;border:0;background:none;
  color:var(--ink);text-decoration:none;font:inherit;border-radius:8px;text-align:left;cursor:pointer}
.menu a:hover,.menu button:hover{background:var(--bg)}
.menu .who{padding:10px 12px;border-bottom:1px solid var(--line-2);margin-bottom:4px}
.menu .who strong{display:block}
.user{position:relative}
.user summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:var(--brand);color:var(--brand-ink);font-weight:700}
.user summary::-webkit-details-marker{display:none}
.user .menu{right:0;top:52px}
.testmark{display:flex;justify-content:center;align-items:center;gap:6px;background:var(--test-bg);color:var(--test);
  font-size:12px;font-weight:700;letter-spacing:.04em;padding:4px 12px;border-bottom:1px solid #e9cf86;text-align:center}

/* ---------------------------------------------------------------- layout */
.layout{min-height:calc(100vh - 56px)}
main{max-width:880px;margin:0 auto;padding:12px calc(16px + var(--safe-right)) calc(var(--tabbar) + 28px + var(--safe-bottom)) calc(16px + var(--safe-left))}
main.no-tabs{padding-bottom:32px}
h1{font-size:22px;line-height:1.25;margin:8px 0 12px}
h2{font-size:17px;margin:22px 0 8px}
h3{font-size:16px;margin:0}
p{margin:6px 0}
.lead{color:var(--ink-2)}
.muted{color:var(--muted);font-size:14px}
.small{font-size:13px}

/* ---------------------------------------------------------------- tab bar / rail */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--surface);border-top:1px solid var(--line);
  padding:0 var(--safe-right) var(--safe-bottom) var(--safe-left);min-height:var(--tabbar)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--tabbar);
  text-decoration:none;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.tabbar a svg{width:24px;height:24px}
.tabbar a[aria-current=page]{color:var(--brand)}
.tabbar a[aria-current=page]::before{content:"";position:absolute;top:0;width:48px;height:3px;border-radius:0 0 3px 3px;background:var(--brand)}
.tabbar a{position:relative}
.tabbar a.primary span.ico{display:flex;align-items:center;justify-content:center;width:44px;height:30px;border-radius:15px}
.tabbar a.primary[aria-current=page] span.ico{background:#e3edf5}
@media (min-width:960px){
  .tabbar{top:0;bottom:0;right:auto;width:var(--rail);grid-template-columns:1fr;grid-auto-rows:min-content;border-top:0;z-index:10;
    border-right:1px solid var(--line);padding:104px 10px 16px}
  .tabbar a{flex-direction:row;justify-content:flex-start;gap:12px;min-height:var(--tap);padding:0 14px;border-radius:10px;
    font-size:14px;text-transform:none;letter-spacing:0}
  .tabbar a[aria-current=page]{background:#e9f0f6}
  .tabbar a[aria-current=page]::before{display:none}
  .tabbar a.primary span.ico{width:auto;height:auto;background:none!important}
  .with-tabs main{margin-left:calc(var(--rail) + max(0px,(100vw - var(--rail) - 880px)/2));padding-bottom:40px}
  .appbar .logo .org small{display:block}
}

/* ---------------------------------------------------------------- surfaces */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:10px 0}
.panel.flat{border:0;background:none;padding:0}
.list{list-style:none;margin:0;padding:0}
.list > li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin:8px 0}
.row-link{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;text-decoration:none;color:inherit;min-height:var(--tap)}
.row-link:hover{background:#fafbfc}
.row-main{flex:1;min-width:0}
.row-main .name{font-weight:600}
.chev{color:var(--muted);align-self:center}
.indent-1{margin-left:18px!important}.indent-2{margin-left:36px!important}.indent-3{margin-left:54px!important}
.kv{display:grid;grid-template-columns:minmax(110px,40%) 1fr;gap:4px 12px;margin:6px 0}
.kv dt{color:var(--muted);font-size:14px}.kv dd{margin:0}
details.more > summary{cursor:pointer;color:var(--brand);font-weight:600;min-height:var(--tap);display:flex;align-items:center;list-style:none}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::before{content:"▸";margin-right:8px;transition:transform .15s}
details.more[open] > summary::before{transform:rotate(90deg)}

/* ---------------------------------------------------------------- status (words + time + visual) */
.status{display:flex;gap:10px;align-items:flex-start;border-radius:10px;padding:10px 12px;border:1px solid transparent}
.status .ico{flex:none;width:22px;height:22px;margin-top:1px}
.status .txt{min-width:0}
.status .head{font-weight:700}
.status .detail{font-size:14px;color:var(--ink-2)}
.status .due{font-size:14px;font-weight:600;color:var(--attn)}
.tone-ok{background:var(--ok-bg);color:var(--ok);border-color:#b8dcc6}
.tone-attn{background:var(--attn-bg);color:var(--attn);border-color:#ecd28d}
.tone-bad{background:var(--bad-bg);color:var(--bad);border-color:#f2b8b5;border-width:2px}
.tone-stale{color:var(--stale);border-color:#c5ced4;
  background:repeating-linear-gradient(135deg,var(--stale-bg) 0 8px,#f8f9fa 8px 16px)}
.tone-none{background:var(--none-bg);color:var(--none);border:1px dashed #9aa7b0}
.tone-policy{background:var(--policy-bg);color:var(--policy);border:1px dashed #b7acd9}
.tone-paused{background:var(--paused-bg);color:var(--paused);border-color:#d5dbdf}
.status .head,.status .detail{color:inherit}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px 3px 6px;font-size:13px;font-weight:700;
  border:1px solid transparent;white-space:nowrap}
.chip svg{width:16px;height:16px}
.tag{display:inline-block;border:1px solid var(--line);border-radius:6px;padding:0 6px;font-size:12px;color:var(--ink-2);background:#fff}

/* ---------------------------------------------------------------- summary */
.summary{border-radius:16px;padding:16px;margin:4px 0 12px;border:1px solid var(--line);background:var(--surface)}
.summary .sentence{font-size:19px;font-weight:700;line-height:1.35;margin:4px 0 10px}
.summary .counts{display:flex;flex-wrap:wrap;gap:8px}
.summary a.chip{text-decoration:none}
.summary.tone-ok{border-color:#b8dcc6}.summary.tone-bad{border-color:#f2b8b5;border-width:2px}

/* ---------------------------------------------------------------- record cards */
.rc{background:var(--surface);border:1px solid var(--line);border-radius:16px;margin:12px 0;overflow:hidden}
.rc > details > summary{list-style:none;cursor:pointer;padding:14px 16px;display:block}
.rc > details > summary::-webkit-details-marker{display:none}
.rc .rc-top{display:flex;align-items:flex-start;gap:10px}
.rc .rc-name{font-size:17px;font-weight:700;flex:1}
.rc .rc-where{font-size:13px;color:var(--muted)}
.rc .rc-open{color:var(--brand);font-weight:700;font-size:14px;white-space:nowrap;min-height:28px;display:inline-flex;align-items:center}
.rc details[open] .rc-open{display:none}
.rc .rc-body{padding:0 16px 16px;border-top:1px solid var(--line-2)}
.rc.need{border-left:6px solid #8d99a1}
.q{border:0;margin:14px 0 0;padding:0}
.q legend{font-weight:700;padding:0;margin-bottom:2px}
.q .last{font-size:14px;color:var(--muted);margin:0 0 8px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{position:relative;display:flex;align-items:center;gap:8px;min-height:52px;border:1.5px solid #aab7c0;border-radius:12px;
  padding:8px 12px;background:#fff;cursor:pointer;font-weight:600;line-height:1.25}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .dot{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #8796a0;background:#fff}
.opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.opt:has(input:checked){border-color:var(--brand);background:#eaf2f8;box-shadow:inset 0 0 0 1px var(--brand)}
.opt:has(input:checked) .dot{border-color:var(--brand);background:radial-gradient(circle,var(--brand) 0 5px,#fff 6px)}
.opt.sev-normal:has(input:checked){border-color:var(--ok);background:var(--ok-bg);box-shadow:inset 0 0 0 1px var(--ok)}
.opt.sev-normal:has(input:checked) .dot{border-color:var(--ok);background:radial-gradient(circle,var(--ok) 0 5px,#fff 6px)}
.opt.sev-attention:has(input:checked){border-color:var(--attn);background:var(--attn-bg);box-shadow:inset 0 0 0 1px var(--attn)}
.opt.sev-attention:has(input:checked) .dot{border-color:var(--attn);background:radial-gradient(circle,var(--attn) 0 5px,#fff 6px)}
.opt.sev-abnormal:has(input:checked){border-color:var(--bad);background:var(--bad-bg);box-shadow:inset 0 0 0 1px var(--bad)}
.opt.sev-abnormal:has(input:checked) .dot{border-color:var(--bad);background:radial-gradient(circle,var(--bad) 0 5px,#fff 6px)}
.opt.sev-unknown{border-style:dashed}
.opt.sev-unknown small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.why{margin:10px 0 0;padding:10px;border-radius:10px;background:var(--bg)}
.why .reasons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.reason{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border:1px solid #aab7c0;border-radius:22px;background:#fff;cursor:pointer;font-size:14px}
.reason input{position:absolute;opacity:0}
.reason:has(input:checked){border-color:var(--brand);background:#eaf2f8;font-weight:700}
.reason:has(input:focus-visible){outline:3px solid var(--focus)}
.hint{background:var(--attn-bg);color:var(--attn);border-radius:10px;padding:8px 12px;margin:10px 0 0;font-size:14px}
.save-row{position:sticky;bottom:calc(var(--tabbar) + var(--safe-bottom) + 8px);margin-top:14px;z-index:5}
@media (min-width:960px){.save-row{bottom:12px}}
.saved{background:var(--ok-bg);color:var(--ok);border:1px solid #b8dcc6;border-radius:10px;padding:10px 12px;margin:12px 0 0;font-weight:600}
.send-error,.error{background:var(--bad-bg);color:var(--bad);border:1px solid #f2b8b5;border-radius:10px;padding:10px 12px;margin:10px 0;font-weight:600}
.meter-input{font-size:24px!important;font-weight:700;letter-spacing:.02em;min-height:56px}
.note-fixed{font-size:13px;color:var(--muted);margin-top:8px}
.other-time{margin-top:6px}
.offline-banner{position:sticky;top:57px;z-index:15;background:#2f3b44;color:#fff;padding:10px 16px;font-weight:600;text-align:center}
.update-banner{position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar) + var(--safe-bottom) + 12px);z-index:40;display:flex;
  gap:12px;align-items:center;background:#16232d;color:#fff;border-radius:12px;padding:10px 12px 10px 16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.update-banner span{flex:1}
@media (min-width:960px){.update-banner{left:auto;width:420px;bottom:16px}}
/* While the update banner shows, keep room under the page so it never covers a Lưu button. */
body.has-update main{padding-bottom:calc(var(--tabbar) + 104px + var(--safe-bottom))}
@media (min-width:960px){body.has-update.with-tabs main,body.has-update main{padding-bottom:104px}}

/* ---------------------------------------------------------------- forms & buttons */
label{display:block;margin:12px 0 4px;font-weight:600}
label.inline{display:flex;align-items:center;gap:10px;font-weight:400;min-height:var(--tap);margin:4px 0}
input,select,textarea{font:inherit;font-size:16px;width:100%;min-height:var(--tap);padding:10px 12px;border:1.5px solid #9aa9b3;
  border-radius:10px;background:#fff;color:var(--ink)}
input[type=checkbox],input[type=radio]{width:22px;min-height:22px;height:22px;flex:none;accent-color:var(--brand)}
textarea{min-height:88px}
.help{font-size:14px;color:var(--muted);font-weight:400;margin:2px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:10px 18px;border-radius:12px;
  border:1.5px solid var(--brand);background:var(--brand);color:var(--brand-ink);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn.block{width:100%}
.btn.big{min-height:56px;font-size:17px}
.btn.secondary{background:#fff;color:var(--brand)}
.btn.quiet{background:none;border-color:transparent;color:var(--brand);padding-left:8px;padding-right:8px}
.btn.danger{background:#fff;color:var(--bad);border-color:var(--bad)}
.btn:disabled,.btn[aria-disabled=true]{background:#c9d2d8;border-color:#c9d2d8;color:#4d5961;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.stepper{display:flex;gap:6px;margin:4px 0 14px;padding:0;list-style:none;counter-reset:s}
.stepper li{flex:1;font-size:12px;font-weight:700;color:var(--muted);border-top:4px solid var(--line);padding-top:6px}
.stepper li.on{color:var(--brand);border-color:var(--brand)}
.stepper li.done{color:var(--ok);border-color:var(--ok)}
.types{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:600px){.types{grid-template-columns:1fr 1fr}}
.type-card{display:block;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface);
  text-decoration:none;color:inherit;min-height:72px}
.type-card strong{display:block;font-size:17px;color:var(--ink)}
.type-card:hover{border-color:var(--brand)}
.suggest{border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin:8px 0;background:var(--surface)}
.suggest .hours{display:flex;align-items:center;gap:8px}
.suggest .hours input{max-width:120px}
.review dt{font-weight:600;color:var(--ink-2)}
.timeline{list-style:none;margin:0;padding:0;border-left:3px solid var(--line);margin-left:8px}
.timeline li{position:relative;padding:0 0 14px 16px}
.timeline li::before{content:"";position:absolute;left:-8px;top:6px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid #9aa9b3}
.timeline li.t-bad::before{border-color:var(--bad)}.timeline li.t-attn::before{border-color:var(--attn)}
.timeline li.t-ok::before{border-color:var(--ok)}.timeline li.t-none::before{border-style:dashed}
.timeline li.t-change::before{border-color:var(--brand);border-radius:3px}
.timeline .when{font-size:13px;color:var(--muted)}
.timeline .what{font-weight:600}
.overlay{background:#f6f7fb;border-left:3px solid var(--policy);padding:6px 10px;margin:6px 0;font-size:14px;border-radius:0 8px 8px 0}

/* ---------------------------------------------------------------- login / home */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px calc(24px + var(--safe-bottom))}
.auth .box{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px}
.auth .brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:8px}
.auth .brand img{width:120px;height:120px}
.auth .brand .en{margin:2px 0 0;font-size:14px;color:var(--ink-2)}
.auth .brand .muted{margin:2px 0 0}
.tiles{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:640px){.tiles{grid-template-columns:1fr 1fr}}
.tile{display:block;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);text-decoration:none;color:inherit}
.tile.off{color:var(--muted);background:#fafbfc}
table.plain{border-collapse:collapse;width:100%}table.plain td,table.plain th{border-bottom:1px solid var(--line-2);padding:8px;text-align:left;vertical-align:top}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------------------------------------------------------------- current month (Mốc đầu tháng) */
.month{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:16px 0}
.month h2{margin:0 0 10px;font-size:17px}
.month .kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.month .kpi{background:var(--bg);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.month .kpi .k{font-size:13px;color:var(--muted)}
.month .kpi .v{font-size:24px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.month .facts{margin:0;display:grid;gap:6px}
.month .facts div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;border-top:1px solid var(--line-2);padding-top:6px}
.month .facts dt{color:var(--ink-2)}.month .facts dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.month .asof{margin:10px 0 2px;font-size:14px}
.inline-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 4px}
.inline-form input{width:auto}