/* Shared official-service theme. Existing application behavior is preserved. */
:root {
  --teal:#174c82; --teal-dark:#12365b; --teal-bg:#eaf1f9;
  --amber:#946000; --amber-bg:#fff4d8; --red:#ac2632; --red-bg:#fff0f1;
  --ink:#172b43; --muted:#465b72; --line:#c5d1de; --bg:#f1f4f8;
  --card:#fff; --shadow:0 2px 8px rgba(18,54,91,.06);
}
* { font-family:'Sarabun','IBM Plex Sans Thai',Tahoma,sans-serif; }
body { font-size:18px; line-height:1.7; }
body::before { content:''; display:block; height:6px; background:#12365b; border-bottom:2px solid #bc964b; }
.wrap { max-width:1240px; padding:24px; }
.service-brand { display:flex; align-items:center; gap:14px; padding:0 0 20px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.service-mark { display:grid; place-items:center; flex:0 0 52px; height:52px; background:var(--teal-dark); color:#fff; border:2px solid #bc964b; border-radius:8px; font-size:30px; font-weight:700; }
.service-brand strong { display:block; font-size:22px; line-height:1.45; color:var(--teal-dark); }
.service-brand span { display:block; font-size:16px; color:var(--muted); }
.header { background:#12365b; border-radius:8px; border-bottom:4px solid #bc964b; padding:20px; gap:16px; }
.header::after { display:none; }
.header small { opacity:1; font-size:16px; letter-spacing:0; color:#e5edf7; }
.header .t,.header .stname { font-size:24px; font-weight:700; line-height:1.5; }
.header button { opacity:1; font-size:16px; min-height:44px; padding:8px 12px; border:1px solid #9bb2cb; border-radius:6px; text-decoration:none; background:#244d77; }
.header .count { font-size:17px; border-radius:6px; background:#244d77; }
.card { border-radius:8px; padding:24px; margin-bottom:20px; }
.card h2,.sec { font-size:22px; font-weight:700; color:var(--teal-dark); }
.card h2 { padding-bottom:12px; border-bottom:1px solid var(--line); }
label { font-size:18px; font-weight:600; color:var(--ink); letter-spacing:0; }
input,select,.search { font-size:18px; min-height:50px; padding:11px 14px; border:1px solid #8398af; border-radius:6px; }
input::placeholder { color:#586b80; opacity:1; }
input:focus,select:focus { border-color:var(--teal); box-shadow:0 0 0 3px #d3e2f3; }
:focus-visible { outline:3px solid #946000; outline-offset:3px; }
.btn { font-size:18px; font-weight:600; min-height:50px; border-radius:6px; box-shadow:none; }
.btn-teal { background:var(--teal); box-shadow:none; }
.btn-teal:hover { background:var(--teal-dark); }
.btn-teal:disabled { background:#d5dde6; color:#43556a; cursor:not-allowed; }
.btn-sm { font-size:16px; min-height:44px; padding:8px 14px; }
.btn-ghost { color:var(--teal-dark); border-color:#9bafc4; }
.btn-red { color:#91202a; border:1px solid #e0a1a7; }
.msg,.loading,.alert { font-size:18px; border-radius:6px; }
.msg { border:1px solid currentColor; }
#screenLogin { padding-top:4vh; max-width:560px; margin:0 auto; }
#screenLogin .logo { display:none; }
#screenLogin h1 { font-size:28px; font-weight:700; line-height:1.5; color:var(--teal-dark); }
#screenLogin p { font-size:18px; margin:12px 0 24px; }
#screenLogin .card { max-width:480px; margin:0 auto; border-top:4px solid var(--teal); }
#screenLogin input { font-size:30px; min-height:64px; letter-spacing:8px; }
.login-help { font-size:16px; margin-bottom:16px; color:var(--muted); }
.tabs { flex-basis:230px; background:#fff; border:1px solid var(--line); padding:10px; border-radius:8px; }
.tabs button { font-size:18px; min-height:54px; border-radius:6px; color:var(--ink); }
.tabs button.active { background:var(--teal-bg); box-shadow:none; border-color:#9bb2cb; }
.assign,.assign .name { font-size:18px; }
.assign .name small { font-size:16px; }
.assign.on { background:var(--teal-bg); border-color:#8aa9ca; }
.assign .top input[type=checkbox] { width:24px; height:24px; min-height:24px; }
.stchip,.chip { font-size:16px; border-radius:6px; padding:8px 12px; }
.stchip { display:inline-flex; align-items:center; min-height:44px; }
.plist,.evinfo,.bigcode .n,.linkbox input,.live { font-size:18px; }
.plist { max-height:440px; }
.plist .p { padding:14px 2px; border-top-style:solid; flex-wrap:wrap; }
.plist .p b { font-size:18px; }
.plist .p .st-tags { font-size:16px; text-align:left; }
.evinfo b { font-size:22px; }
.bigcode { background:var(--teal-bg); border-color:#9bb2cb; border-radius:6px; }
.metric,.st { border-radius:8px; padding:20px; }
.metric p,.st p { font-size:18px; color:var(--ink); }
.metric .v { font-size:36px; }
.metric.blue .v { color:#174c82; } .metric.green .v { color:#11633f; }
.st .n { font-size:26px; } .st .n small { font-size:18px; color:var(--muted); }
.bar { height:8px; background:#dce4ed; }
.mgrid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.stgrid { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
#modal .box { max-width:560px; border-radius:8px; max-height:90vh; overflow:auto; }
#modal h3 { font-size:24px; } #modal .sub { font-size:18px; }
#modal button { font-size:18px; min-height:48px; }
.person { border:1px solid var(--line); border-radius:6px; background:#f4f7fb; }
.person .name { font-size:22px; font-weight:700; } .person .sub { font-size:18px; }
.recent,.recent h3 { font-size:18px; } .recent h3 { color:var(--ink); }
.recent .row { gap:12px; border-top-style:solid; padding:12px 0; }
.recent .row span:last-child { font-size:16px; white-space:nowrap; }
.st-switch button { font-size:18px; min-height:48px; border-radius:6px; }
.station-page .wrap { max-width:600px; }
.station-staff-choice { display:flex; align-items:center; gap:12px; padding:12px; border-bottom:1px solid var(--line); margin:0; cursor:pointer; }
.station-staff-choice input { width:24px; height:24px; min-height:24px; flex:0 0 24px; accent-color:var(--teal); }
.station-staff-choice[hidden] { display:none; }
.station-staff-choice small { display:block; font-size:16px; font-weight:400; margin-top:4px; }
.station-staff-choice .staff-assigned { color:#755000; }
.station-staff-choice .staff-available { color:#11633f; }
.station-live > div:first-child { flex-wrap:wrap; gap:8px; }
.code-row input { min-width:0; font-size:32px; }
@media(max-width:720px) {
  .wrap { padding:16px 12px; }
  .service-brand strong { font-size:19px; } .service-brand span { font-size:15px; }
  .service-brand { gap:10px; margin-bottom:16px; }
  .service-mark { flex-basis:44px; height:44px; }
  .card { padding:18px; }
  .tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex:none; gap:6px; padding:8px; }
  .tabs button { font-size:17px; padding:10px 8px; text-align:left; }
  .tabs button.active::before { display:none; }
  .content { width:100%; }
  .header { flex-wrap:wrap; padding:16px; }
  .row { flex-wrap:wrap; } .row > * { flex:1 1 180px; }
  .mgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric { padding:16px; }
  .assign .sts { padding-left:0; }
  .linkbox input,.st-item input { min-width:0; }
  #screenLogin h1 { font-size:25px; }
  .code-row { gap:8px; } .code-row .btn { padding:12px; }
}

.closure-row{padding:14px 0;border-bottom:1px solid var(--line)}
.closure-choice{display:flex;gap:12px;align-items:flex-start;margin:0 0 8px}
.closure-choice input{width:24px;height:24px;min-height:24px;flex:0 0 24px;margin-top:4px;accent-color:var(--teal)}
/* Account setup and hospital onboarding pages. */
.account-page { margin:0; background:var(--bg); color:var(--ink); font-family:Sarabun,Tahoma,sans-serif; }
.account-page main { background:white; border:1px solid var(--line); border-top:5px solid var(--teal-dark); border-radius:8px; }
.account-page label { display:block; margin:16px 0 6px; }
.account-page input { box-sizing:border-box; width:100%; }
.account-page p { line-height:1.8; }
.account-page .btn { margin-top:20px; width:100%; padding:12px; cursor:pointer; }
.account-page a { color:var(--teal-dark); }
/* Keep permission-restricted and filtered controls hidden, including inline flex rows. */
[hidden] { display:none !important; }
#staffEditDialog::backdrop { background:rgba(18,54,91,.45); }
#staffEditDialog h2 { color:var(--teal-dark);font-size:24px; }
#staffEditDialog input { width:100%; }
#managerChoices label { padding:10px 4px;border-bottom:1px solid var(--line); }