/* MSU-SOS shared page styles: layout, jumplinks, filter, smart table, cards, pager */
:root {
  /* colour tokens (light + dark) live in assets/msu-header.css */
  --radius: 12px;
  --font: Roboto, Sarabun, "Helvetica Neue", Arial, sans-serif;
  --font-nav: "Google Sans Flex", Sarabun, Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--on-surface); transition: background-color .2s, color .2s; font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
.material-icons { font-size: 20px; line-height: 1; vertical-align: middle; }

/* ---------- Jumplinks (WeatherNext style) ---------- */
.jumplinks {
  --nav-btn: 48px;
  position: sticky; top: calc(var(--hdr-height) + 12px); z-index: 100;
  display: flex; align-items: center;
  width: fit-content; max-width: calc(100% - 32px);
  margin: 16px auto; padding: 0;
  background: var(--surface-container);
  border-radius: 9999px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--outline-variant), 0 2px 8px -2px var(--shadow);
  transition: box-shadow .3s ease, background-color .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1), opacity .3s ease;
}
/* floating: stays on top while the page scrolls */
.jumplinks.is-stuck {
  background: color-mix(in srgb, var(--surface-container) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 0 0 1px var(--outline-variant), 0 10px 28px -8px var(--shadow);
}
/* idle: slides up out of view; any activity brings it back (msu-ui.js) */
.jumplinks.is-idle { transform: translateY(calc(-100% - var(--hdr-height) - 24px)); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .jumplinks { transition: opacity .2s ease, box-shadow .3s ease; }
  .jumplinks.is-idle { transform: none; }
}
.jumplinks__list { display: flex; margin: 0; padding: 0 2px; list-style: none; overflow-x: auto; scrollbar-width: none; white-space: nowrap; scroll-behavior: smooth; }
.jumplinks__list::-webkit-scrollbar { display: none; }
.jumplinks__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 5px 2px; padding: 10px 22px;
  border: 2px solid transparent; border-radius: 9999px;
  color: var(--primary); text-decoration: none;
  font: 500 1.09375rem/1.45 var(--font-nav); letter-spacing: .01188em;
  transition: background-color .2s, color .2s;
}
.jumplinks__link .material-icons { font-size: 20px; }
.jumplinks__link:hover:not(.jumplinks__link--active) { background: var(--surface-container-higher); }
.jumplinks__link:focus-visible { outline: 2px solid var(--on-surface); outline-offset: 0; }
.jumplinks__link--active { background: var(--primary); color: var(--on-primary); }
.jumplinks__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--nav-btn); height: var(--nav-btn); border: 0; border-radius: 9999px;
  background: var(--surface-container); display: none; place-items: center; cursor: pointer; z-index: 2;
}
.jumplinks__btn::before { content: ""; position: absolute; top: 0; height: 100%; width: calc(var(--nav-btn) + 20px); z-index: -1; }
.jumplinks__btn--prev { left: 2px; }
.jumplinks__btn--prev::before { left: 0; background: linear-gradient(90deg, var(--surface-container) 60%, transparent); }
.jumplinks__btn--next { right: 2px; }
.jumplinks__btn--next::before { right: 0; background: linear-gradient(270deg, var(--surface-container) 60%, transparent); }
.jumplinks__btn.is-visible { display: grid; }
.jumplinks__btn:hover { background: var(--surface-container-higher); }
/* wrapper must not box the sticky menu in (sticky only moves inside its parent) */
.jumplinks-wrap { display: contents; }

/* ---------- Page ---------- */
main { max-width: 1440px; margin: 0 auto; padding: 0 24px 24px; }

/* ---------- Filter panel ---------- */
.filter { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius); margin-bottom: 16px; }
.filter__bar { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; }
.filter__toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 8px 4px; cursor: pointer; font-weight: 500; font-size: 15px; }
.filter__toggle .chev { transition: transform .2s; color: var(--on-surface-variant); }
.filter.is-open .filter__toggle .chev { transform: rotate(180deg); }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 12px; display: none; place-items: center; }
.badge.on { display: inline-grid; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 16px; background: var(--surface-container-higher); font-size: 12px; white-space: nowrap; }
.chip button { border: 0; background: transparent; cursor: pointer; padding: 0; display: grid; place-items: center; color: var(--on-surface-variant); }
.chip .material-icons { font-size: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 18px; border: 0; cursor: pointer; font-weight: 500; white-space: nowrap; }
.btn-reset { background: var(--btn-neutral); color: var(--on-btn-neutral); }
.btn-reset:hover { background: var(--btn-neutral-hover); }
.btn-detail { background: var(--detail); color: var(--on-detail); border-radius: 8px; height: 34px; }
.btn-detail:hover { background: var(--detail-hover); }
.btn-detail:focus-visible { outline: 2px solid var(--on-surface); outline-offset: 2px; }
.btn-detail--icon { width: 40px; height: 40px; padding: 0; border-radius: 12px; }
.btn-detail--icon .material-icons { font-size: 22px; }
.filter__body { display: none; border-top: 1px solid var(--outline-variant); padding: 16px; }
.filter.is-open .filter__body { display: block; }
.filter__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 16px; }
.filter__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* Case List: 4 fields per row (v0.3.31) */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-size: 12px; color: var(--on-surface-variant); font-weight: 500; }
.field .control { position: relative; }
.field input, .field select {
  width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--outline); border-radius: 8px; background: var(--surface);
  outline: none; transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none;
}
.field select { padding-right: 36px; cursor: pointer; }
.field .control .material-icons { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--on-surface-variant); }
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field input[type="search"] { padding-right: 36px; }
.field input[type="date"] { padding-right: 8px; }
.field--sort { display: none; }

/* ---------- Smart table ---------- */
.table-card { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius); overflow: hidden; }
.table-scroll { overflow-x: auto; }
table.smart-table { width: 100%; border-collapse: collapse; table-layout: fixed; }   /* fixed column widths via <colgroup> */
.smart-table th, .smart-table td { padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--outline-variant); overflow-wrap: anywhere; }
.smart-table thead th { background: var(--surface-container); font-weight: 600; font-size: 13px; color: var(--on-surface); white-space: nowrap; position: sticky; top: 0; }
.smart-table th.sortable { cursor: pointer; user-select: none; }
.smart-table th.sortable:hover { background: var(--surface-container-higher); }
.smart-table th .sort { display: inline-flex; align-items: center; gap: 4px; }
.smart-table th .sort .material-icons { font-size: 18px; opacity: .25; transition: opacity .15s, transform .15s; }
.smart-table th[aria-sort="ascending"] .sort .material-icons { opacity: 1; transform: rotate(180deg); }
.smart-table th[aria-sort="descending"] .sort .material-icons { opacity: 1; }
.smart-table tbody tr:nth-child(even) { background: var(--row-alt); }
.smart-table tbody tr:hover { background: var(--row-hover); }
.smart-table td.c-id { font-weight: 500; white-space: nowrap; }
.smart-table td.c-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.smart-table td.c-act, .smart-table th.c-act { text-align: right; overflow-wrap: normal; }
.smart-table thead th { overflow: hidden; text-overflow: ellipsis; }
.empty { padding: 40px 16px; text-align: center; color: var(--on-surface-variant); }
.empty .material-icons { font-size: 40px; display: block; margin: 0 auto 8px; opacity: .5; }

.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--cancel { background: var(--st-cancel-bg); color: var(--st-cancel-fg); }
.status--active { background: var(--st-active-bg); color: var(--st-active-fg); }
.status--done   { background: var(--st-done-bg);   color: var(--st-done-fg); }

/* ---------- Pager ---------- */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 10px 16px; flex-wrap: wrap; color: var(--on-surface-variant); font-size: 13px; }
.pager select { height: 32px; border: 1px solid var(--outline); border-radius: 6px; padding: 0 6px; background: var(--surface); }
.pager__pages { display: flex; gap: 4px; }
.pager__pages button { min-width: 34px; height: 34px; border: 1px solid transparent; border-radius: 17px; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0 6px; }
.pager__pages button:hover:not(:disabled) { background: var(--surface-container-higher); }
.pager__pages button.on { background: var(--primary); color: var(--on-primary); }
.pager__pages button:disabled { opacity: .35; cursor: default; }

/* ---------- Cards ---------- */
.cards { display: none; }
.card { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card__id { font-weight: 600; font-size: 15px; word-break: break-all; }
.card__patient { font-size: 16px; font-weight: 500; }
.card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13.5px; }
.card dt { color: var(--on-surface-variant); display: flex; align-items: center; gap: 6px; }
.card dt .material-icons { font-size: 16px; }
.card dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.card .btn-detail { width: 100%; height: 40px; }
.card .btn-detail.btn-detail--icon { width: 44px; height: 44px; }
.card__actions { display: flex; gap: 8px; align-items: center; }   /* Case List card: Detail + Export (v0.3.18) */
.card__actions .btn-detail { flex: 1; }
.card .btn-export-one { width: 44px; height: 40px; flex: none; }

footer.version { text-align: left; color: var(--muted); font-size: 12px; padding: 8px 24px 16px; max-width: 1440px; margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .filter__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Phone / Android / iPad → card layout */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .table-card .table-scroll { display: none; }
  .table-card { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pager { justify-content: center; padding: 16px 0 0; }
  .field--sort { display: flex; }
  .field input, .field select { height: 48px; font-size: 16px; } /* 16px avoids iOS zoom */
}
@media (max-width: 1024px) and (min-width: 721px) {
  .filter__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  main { padding: 0 16px 16px; }
  .cards { grid-template-columns: 1fr; }
  .filter__grid { grid-template-columns: 1fr; }
  .jumplinks__link { padding: 8px 18px; font-size: 1rem; }
  .filter__bar .btn-reset span.lbl { display: none; }
  .filter__bar .btn-reset { width: 36px; padding: 0; }
  .pager__size { display: none; }
  footer.version { padding: 8px 16px 16px; }
}

/* =====================================================================
   Shared components for all MSU-SOS Cloud Services pages
   ===================================================================== */

[hidden] { display: none !important; }

/* ---------- Page heading ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.page-head h1 { margin: 0; font: 500 24px/1.25 var(--font-nav); }
.page-head .sub { color: var(--on-surface-variant); font-size: 13px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
a.btn { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-danger  { background: var(--danger); color: var(--on-danger); }
.btn-danger:hover { background: var(--danger-hover); }
.btn-success { background: var(--success); color: var(--on-success); }
.btn-success:hover { background: var(--success-hover); }
.btn-warning { background: var(--warning); color: var(--on-warning); }
.btn-warning:hover { background: var(--warning-hover); }
.btn-dark { background: var(--primary); color: var(--on-primary); }
.btn-dark:hover { filter: brightness(1.15); }
.btn-outline { background: transparent; color: var(--on-surface); box-shadow: inset 0 0 0 1px var(--outline); }
.btn-outline:hover { background: var(--hover); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn:focus-visible { outline: 2px solid var(--on-surface); outline-offset: 2px; }
.btn .material-icons { font-size: 18px; }
.icon-action { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--on-surface-variant); display: inline-grid; place-items: center; cursor: pointer; }
.icon-action:hover { background: var(--hover); color: var(--on-surface); }
.icon-action--danger { color: var(--danger); }
.icon-action--danger:hover { background: var(--st-red-bg); color: var(--danger); }
.icon-action--warn { color: var(--st-warn-fg); }
.icon-action--warn:hover { background: var(--st-warn-bg); }
.icon-action:focus-visible { outline: 2px solid var(--on-surface); }
.row-actions { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 16px; }

/* ---------- Extra status colours ---------- */
.status--green  { background: var(--st-done-bg);   color: var(--st-done-fg); }
.status--blue   { background: var(--st-active-bg); color: var(--st-active-fg); }
.status--orange { background: var(--st-warn-bg);   color: var(--st-warn-fg); }
.status--grey   { background: var(--st-cancel-bg); color: var(--st-cancel-fg); }
.status--red    { background: var(--st-red-bg);    color: var(--st-red-fg); }

/* ---------- Simple toolbar (filters + actions) ---------- */
.toolbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .field { width: 220px; }
.toolbar .spacer { flex: 1; }
.checkbox { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }

/* ---------- Section home tiles (Portal style) ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 24px; min-height: 196px; border-radius: 24px;
  background: var(--surface); border: 1px solid var(--outline-variant);
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -10px var(--shadow); border-color: var(--outline); }
.tile:focus-visible { outline: 2px solid var(--on-surface); outline-offset: 2px; }
.tile .msu-icon-tile { width: 64px; height: 64px; border-radius: 20px; }
.tile .msu-icon-tile .material-icons { font-size: 34px; }
.tile__label { font: 500 18px/1.3 var(--font-nav); }
.tile__desc { color: var(--on-surface-variant); font: 400 14px/1.45 var(--font-nav); margin-top: -8px; }
.tile__arrow { position: absolute; top: 24px; right: 20px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--on-surface-variant); transition: background-color .2s, color .2s, transform .2s; }
.tile:hover .tile__arrow { background: var(--surface-container-higher); color: var(--on-surface); transform: translateX(2px); }
.tile__soon { align-self: flex-start; margin-top: auto; font-size: 11.5px; padding: 2px 10px; border-radius: 10px; background: var(--surface-container); color: var(--on-surface-variant); }
.section-hero { padding: 8px 0 24px; }
.section-hero h1 { margin: 0 0 6px; font: 500 30px/1.2 var(--font-nav); }
.section-hero p { margin: 0; color: var(--on-surface-variant); font: 400 15px/1.5 var(--font-nav); }

/* ---------- Dialog ---------- */
/* v0.3.41 (user 2026-10-24: "popup ของระบบทั้งหมด align Top … หน้าต่างไม่ขยับ ขึ้น-ลง"): every popup sits at the top — switching a
   choice / tab inside changes only its bottom edge */
.dialog-backdrop { position: fixed; inset: 0; z-index: 500; background: var(--scrim); display: none; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; }
.dialog-backdrop.is-open { display: flex; animation: dlg-fade .15s ease; }
@keyframes dlg-fade { from { opacity: 0; } to { opacity: 1; } }
.dialog { width: 100%; max-width: 560px; max-height: calc(94vh - 16px); display: flex; flex-direction: column; background: var(--surface); color: var(--on-surface); border-radius: 24px; box-shadow: 0 24px 48px -12px var(--shadow); overflow: hidden; }
.dialog__head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 8px; }
.dialog__head h2 { margin: 0; flex: 1; font: 500 20px/1.3 var(--font-nav); }
.dialog__body { padding: 8px 24px 16px; overflow-y: auto; }
.dialog__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 20px; border-top: 1px solid var(--outline-variant); }
.dialog p.confirm { margin: 8px 0; font-size: 15px; }

/* ---------- Forms ---------- */
.form-section { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius); padding: 18px 20px 20px; margin-bottom: 16px; }
.form-section > h2 { margin: 0 0 14px; font: 500 16px/1.3 var(--font-nav); display: flex; align-items: center; gap: 8px; }
.form-section > h2 .material-icons { color: var(--on-surface-variant); }
.form-section > h3 { margin: 16px 0 10px; font: 500 14px/1.3 var(--font-nav); color: var(--on-surface-variant); }
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid > * { grid-column: span 4; min-width: 0; }
.form-grid > .span-1 { grid-column: span 1; } .form-grid > .span-2 { grid-column: span 2; } .form-grid > .span-3 { grid-column: span 3; }
.form-grid > .span-6 { grid-column: span 6; } .form-grid > .span-8 { grid-column: span 8; }
.form-grid > .span-12 { grid-column: 1 / -1; }
.dialog .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dialog .form-grid > * { grid-column: span 1; }
.dialog .form-grid > .span-12 { grid-column: 1 / -1; }
.field textarea { width: 100%; min-height: 76px; padding: 10px 12px; border: 1px solid var(--outline); border-radius: 8px; background: var(--surface); outline: none; resize: vertical; font: inherit; color: inherit; }
.field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--surface-container); color: var(--on-surface-variant); cursor: not-allowed; }
.field .req { color: var(--danger); }
.field .suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--on-surface-variant); font-size: 13px; pointer-events: none; }
.field .error { color: var(--danger); font-size: 12px; display: none; }
.field.is-invalid input, .field.is-invalid select { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.field.is-invalid .error { display: block; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* toggle chips (multi-select) */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip-toggle { height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--outline); background: var(--surface); color: var(--on-surface); cursor: pointer; font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; transition: background-color .15s, border-color .15s; }
.chip-toggle:hover { background: var(--hover); }
.chip-toggle[aria-pressed="true"] { background: var(--selected); border-color: var(--accent); color: var(--accent); }
.chip-toggle[aria-pressed="true"]::before { content: "check"; font-family: "Material Icons"; font-size: 16px; }
.chip-toggle:disabled { cursor: not-allowed; opacity: .6; }

/* segmented radio (Yes / No / N/A, NIHSS scores) */
.q-list { display: flex; flex-direction: column; }
.q { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--outline-variant); }
.q:last-child { border-bottom: 0; }
.q__label { font-weight: 500; }
.q__score { color: var(--accent); font-weight: 600; margin-left: 6px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 14px; border-radius: 17px; border: 1px solid var(--outline); cursor: pointer; font-size: 13px; transition: background-color .15s, border-color .15s; }
.seg span:hover { background: var(--hover); }
.seg input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.seg input:focus-visible + span { outline: 2px solid var(--on-surface); outline-offset: 2px; }
.seg input:disabled + span { cursor: not-allowed; opacity: .6; }
.q--stack { grid-template-columns: 1fr; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--outline-variant); background: var(--surface); border-radius: var(--radius); margin-bottom: 16px; padding: 0 4px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 1 0 auto; padding: 14px 16px 11px; border: 0; background: transparent; cursor: pointer; font-weight: 500; color: var(--on-surface-variant); border-bottom: 3px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tab:hover { background: var(--hover); color: var(--on-surface); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab:focus-visible { outline: 2px solid var(--on-surface); outline-offset: -2px; }
.tab .material-icons { font-size: 18px; }
.tab-panel[hidden] { display: none; }
/* v0.3.71 (user 2026-10-26): a tab row wider than the screen — floating arrows on the side that still has tabs (assets/msu-tabs-scroll.js) */
.tabs-scroll { position: relative; }
.tabs-scroll__btn { position: absolute; top: 0; display: none; align-items: center; justify-content: center; width: 36px; border: 0; padding: 0; cursor: pointer; z-index: 3; color: var(--on-surface); }
.tabs-scroll__btn .material-icons { font-size: 22px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-container-highest, var(--surface)); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.tabs-scroll__btn--prev { left: 0; background: linear-gradient(90deg, var(--surface) 55%, transparent); border-radius: var(--radius) 0 0 var(--radius); }
.tabs-scroll__btn--next { right: 0; background: linear-gradient(270deg, var(--surface) 55%, transparent); border-radius: 0 var(--radius) var(--radius) 0; }
.tabs-scroll__btn.is-visible { display: flex; }

/* ---------- Banner ---------- */
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 13.5px; }
.banner .material-icons { flex: none; }
.banner--warn { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.banner--info { background: var(--st-active-bg); color: var(--st-active-fg); }

/* ---------- Dashboard ---------- */
.dash-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.side-panel { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius); padding: 14px; position: sticky; top: calc(var(--hdr-height) + 84px); max-height: calc(100vh - var(--hdr-height) - 100px); overflow-y: auto; }
.side-panel h3 { margin: 6px 4px 8px; font: 500 12px/1 var(--font-nav); letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-variant); }
.side-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.side-list button { text-align: left; border: 0; background: transparent; padding: 9px 12px; border-radius: 10px; cursor: pointer; font-size: 13.5px; }
.side-list button:hover { background: var(--hover); }
.side-list button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 500; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius); padding: 16px 20px; }
.stat__label { color: var(--on-surface-variant); font-size: 13px; font-weight: 500; }
.stat__value { font: 600 34px/1.15 var(--font-nav); margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat__value small { font-size: 14px; font-weight: 500; color: var(--on-surface-variant); }
.chart-card { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px; }
.chart-card h2 { margin: 0 0 12px; font: 500 16px/1.3 var(--font-nav); }
.months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.month { border: 1px solid var(--outline-variant); border-radius: 10px; padding: 10px 12px; }
.month__name { font-size: 12px; color: var(--on-surface-variant); }
.month__value { font: 600 20px/1.2 var(--font-nav); font-variant-numeric: tabular-nums; }
.month.is-peak { border-color: var(--accent); background: var(--selected); }
.chart-wrap { position: relative; width: 100%; overflow-x: auto; scrollbar-width: thin; }
.chart-wrap svg { display: block; width: 100%; min-width: 560px; height: auto; overflow: visible; }
.chart-wrap .grid-line { stroke: var(--chart-grid); stroke-width: 1; }
.chart-wrap .axis-label { fill: var(--on-surface-variant); font-size: 11px; }
.chart-wrap .bar { fill: var(--chart-1); opacity: .85; }
.chart-wrap .bar:hover { opacity: 1; }
.chart-wrap .value-label { fill: var(--on-surface); font-size: 11px; font-weight: 600; }
.chart-tip { position: absolute; pointer-events: none; background: var(--toast-bg); color: var(--toast-fg); padding: 4px 10px; border-radius: 8px; font-size: 12px; white-space: nowrap; transform: translate(-50%, -120%); display: none; }

/* ---------- KPI report ---------- */
.kpi-card { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.kpi-card__head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; margin: 0; padding: 14px 18px; background: var(--surface-container); border-bottom: 1px solid var(--outline-variant); }
.kpi-card__head dt { font-size: 11.5px; color: var(--on-surface-variant); }
.kpi-card__head dd { margin: 2px 0 0; font-weight: 600; }
.kpi-card table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; }
.kpi-card th, .kpi-card td { padding: 10px 18px; text-align: left; border-bottom: 1px solid var(--outline-variant); font-size: 13.5px; }
.kpi-card tr:last-child td { border-bottom: 0; }
.kpi-card th { font-size: 12px; color: var(--on-surface-variant); font-weight: 600; }
.kpi-card td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-summary .stat__value { font-size: 26px; }
/* KPI Report (v0.3.27): 100% Stacked Bar ผ่าน / เกินเป้า per KPI — collapsed <details> */
.kpi-chart { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius); margin-bottom: 16px; }
.kpi-chart > summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; font: 500 14px/1.3 var(--font-nav); }
.kpi-chart > summary .material-icons { font-size: 20px; color: var(--accent); }
.kpi-chart[open] > summary { border-bottom: 1px solid var(--outline-variant); }
.kpi-bars { display: grid; gap: 12px; padding: 14px 16px 6px; }
.kpi-bar { display: grid; grid-template-columns: minmax(180px, 260px) 1fr minmax(150px, auto); gap: 6px 14px; align-items: center; }
.kpi-bar__label { font-size: 13px; } .kpi-bar__label small { color: var(--on-surface-variant); }
.kpi-bar__track { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: var(--surface-container); }
.kpi-bar__pass, .kpi-bar__fail { display: flex; align-items: center; justify-content: center; color: #fff; font: 600 12px/1 var(--font-nav); font-variant-numeric: tabular-nums; }
.kpi-bar__pass { background: #1e8e3e; } .kpi-bar__fail { background: #d93025; }
.kpi-bar__none { display: flex; align-items: center; padding: 0 10px; font-size: 12px; color: var(--on-surface-variant); }
.kpi-bar__n { font-size: 12.5px; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.kpi-legend { display: flex; gap: 16px; padding: 4px 16px 14px; font-size: 12.5px; color: var(--on-surface-variant); }
.kpi-legend span { display: inline-flex; align-items: center; gap: 6px; } .kpi-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
@media (max-width: 720px) { .kpi-bar { grid-template-columns: 1fr; } }
.hint { text-align: center; color: var(--on-surface-variant); padding: 40px 16px; }
.hint .material-icons { display: block; font-size: 40px; margin: 0 auto 8px; opacity: .5; }

/* ---------- Wide report table ---------- */

.report-table td { overflow-wrap: normal; }
.export-links { display: inline-flex; gap: 4px; }
.export-links .btn { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 14px; }

/* ---------- Responsive additions ---------- */
@media (max-width: 1200px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .form-grid > *, .form-grid > .span-3, .form-grid > .span-2 { grid-column: span 6; }
  .form-grid > .span-1 { grid-column: span 3; }
  .form-grid > .span-8, .form-grid > .span-6 { grid-column: span 12; }
  /* v0.3.71: a dialog grid has 1–2 columns — "span 12" there made 12 hidden columns and squeezed every field into one row (Site details on phones) */
  .dialog .form-grid > .span-8, .dialog .form-grid > .span-6 { grid-column: 1 / -1; }
  .dash-layout { grid-template-columns: 1fr; }
  .side-panel { position: static; max-height: none; padding: 10px; }
  .side-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; }
  .side-list::-webkit-scrollbar { display: none; }
  .side-list button { flex: none; white-space: nowrap; border: 1px solid var(--outline-variant); border-radius: 18px; padding: 7px 14px; }
  .kpi-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar .field { width: calc(50% - 6px); }
  .toolbar .spacer { display: none; }
  .q { grid-template-columns: 1fr; }
}
@media (max-width: 820px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .form-grid > *, .form-grid > .span-3, .form-grid > .span-2 { grid-column: 1 / -1; }
  .form-grid > .span-1 { grid-column: span 6; }
  .dialog .form-grid { grid-template-columns: 1fr; }
  .dialog .form-grid > * { grid-column: 1 / -1; }   /* v0.3.71: one field per line on phones */
  .dialog-backdrop { align-items: flex-start; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px; }   /* top as well (v0.3.41) */
  .dialog { max-width: none; border-radius: 24px; max-height: calc(100vh - 16px - env(safe-area-inset-top, 0px)); }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 12px 14px; }
  .stat__value { font-size: 26px; }
  .months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-card__head { grid-template-columns: 1fr 1fr; }
  .kpi-card th, .kpi-card td { padding: 9px 12px; }
  .toolbar .field { width: 100%; }
  .toolbar .btn { flex: 1; }
  .page-head h1 { font-size: 20px; }
  .section-hero h1 { font-size: 24px; }
  .tile { padding: 16px; min-height: 0; border-radius: 20px; gap: 10px; }
  .tile .msu-icon-tile { width: 52px; height: 52px; border-radius: 16px; }
  .tile .msu-icon-tile .material-icons { font-size: 28px; }
  .tile__label { font-size: 15.5px; }
  .tile__desc { font-size: 12.5px; margin-top: -6px; }
  .tile__arrow { display: none; }
  .tiles { gap: 12px; }
}
@media (max-width: 360px) { .tiles { grid-template-columns: 1fr; } }
.smart-table td.c-num { font-variant-numeric: tabular-nums; font-weight: 500; }

/* ---------- Table / Card switch (monitor only; phone / tablet are always cards) ---------- */
.table-tools { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--outline-variant); }
.view-toggle { display: inline-flex; padding: 3px; border-radius: 18px; background: var(--surface-container); }
.view-toggle button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: transparent; color: var(--on-surface-variant); font: 500 12.5px/1 var(--font-nav); cursor: pointer; }
.view-toggle button .material-icons { font-size: 18px; }
.view-toggle button[aria-checked="true"] { background: var(--surface); color: var(--on-surface); box-shadow: 0 1px 3px var(--shadow); }
.view-toggle button:focus-visible { outline: 2px solid var(--on-surface); outline-offset: 1px; }
.table-card.is-cards { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.table-card.is-cards .table-tools { border: 0; padding: 0 0 10px; }
.table-card.is-cards .table-scroll { display: none; }
.table-card.is-cards .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.table-card.is-cards .pager { justify-content: center; padding: 16px 0 0; }
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .table-tools { display: none; }
  .table-card.is-cards .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) { .table-card.is-cards .cards { grid-template-columns: 1fr; } }

/* ---------- Count button + list popover ---------- */
.count-btn { display: inline-flex; align-items: center; gap: 4px; min-width: 44px; height: 30px; padding: 0 10px; border: 1px solid var(--outline-variant); border-radius: 15px; background: var(--surface); color: var(--accent); font: 600 13px/1 var(--font-nav); cursor: pointer; }
.count-btn:hover, .count-btn[aria-expanded="true"] { background: var(--selected); border-color: var(--accent); }
.count-btn .material-icons { font-size: 16px; }
.count-btn:disabled { color: var(--muted); cursor: default; background: transparent; }
.list-pop { position: fixed; z-index: 600; min-width: 200px; max-width: min(340px, calc(100vw - 16px)); max-height: 50vh; overflow: auto; padding: 6px 0; border-radius: 12px;
  background: var(--surface); color: var(--on-surface); border: 1px solid var(--outline-variant); box-shadow: 0 16px 36px -12px var(--shadow); font-size: 13.5px; }
.list-pop__head { padding: 6px 14px 8px; font: 600 12px/1.3 var(--font-nav); color: var(--on-surface-variant); border-bottom: 1px solid var(--outline-variant); }
.list-pop ul { list-style: none; margin: 0; padding: 4px 0; }
.list-pop li { padding: 6px 14px; display: flex; align-items: center; gap: 8px; }
.list-pop li .material-icons { font-size: 16px; color: var(--on-surface-variant); }
.list-pop__empty { padding: 8px 14px; color: var(--muted); }

/* KPI Report: per-case table -> stacked rows in Card mode (phone / tablet always, monitor by switch) */
.kpi-wrap > .table-tools { border: 0; padding: 0 0 10px; }
.kpi-wrap.is-cards .kpi-card table, .kpi-wrap.is-cards .kpi-card tbody, .kpi-wrap.is-cards .kpi-card tr, .kpi-wrap.is-cards .kpi-card td { display: block; min-width: 0; }
.kpi-wrap.is-cards .kpi-card thead { display: none; }
.kpi-wrap.is-cards .kpi-card tr { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 10px 18px; border-bottom: 1px solid var(--outline-variant); }
.kpi-wrap.is-cards .kpi-card tr:last-child { border-bottom: 0; }
.kpi-wrap.is-cards .kpi-card td { padding: 0; border: 0; display: contents; }
.kpi-wrap.is-cards .kpi-card td::before { content: attr(data-label); color: var(--on-surface-variant); font-size: 12px; }
.kpi-wrap.is-cards .kpi-card td:first-child { display: block; grid-column: 1 / -1; font-weight: 600; }
.kpi-wrap.is-cards .kpi-card td:first-child::before { content: none; }
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .kpi-wrap .kpi-card table, .kpi-wrap .kpi-card tbody, .kpi-wrap .kpi-card tr { display: block; min-width: 0; }
  .kpi-wrap .kpi-card thead { display: none; }
  .kpi-wrap .kpi-card tr { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--outline-variant); }
  .kpi-wrap .kpi-card tr:last-child { border-bottom: 0; }
  .kpi-wrap .kpi-card td { padding: 0; border: 0; display: contents; }
  .kpi-wrap .kpi-card td::before { content: attr(data-label); color: var(--on-surface-variant); font-size: 12px; }
  .kpi-wrap .kpi-card td:first-child { display: block; grid-column: 1 / -1; font-weight: 600; }
  .kpi-wrap .kpi-card td:first-child::before { content: none; }
}

/* status switch (replaces Delete in MSU Info Management tables) + single "Edit Detail" button in cards */
.status-switch .material-icons { font-size: 30px; color: var(--muted); }
.status-switch.is-on .material-icons { color: var(--st-active-fg); }
.status-switch:hover.is-on .material-icons { color: var(--success-hover, var(--st-active-fg)); }
.card .btn-detail.btn-edit-detail { width: 44px; height: 44px; padding: 0; }
/* tooltip: shown on mouse over / keyboard focus (touch screens: tap opens the dialog directly) */
.has-tip { position: relative; }
.has-tip .tip { position: absolute; bottom: calc(100% + 8px); right: 0; padding: 5px 10px; border-radius: 8px; background: var(--on-surface); color: var(--surface); font: 500 12px/1.2 var(--font-nav); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; z-index: 5; }
.has-tip .tip::after { content: ""; position: absolute; top: 100%; right: 16px; border: 5px solid transparent; border-top-color: var(--on-surface); }
.has-tip:hover .tip, .has-tip:focus-visible .tip { opacity: 1; transform: none; }

/* "showing only …" line above a list */
.scope-note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--on-surface-variant); margin: 0 0 12px; }
.scope-note .material-icons { font-size: 16px; }

/* case status chip on 2 lines in tables: Thai / English (fits a fixed-width column) */
.status--stack { align-items: flex-start; white-space: normal; border-radius: 10px; padding: 4px 10px; line-height: 1.3; }
.status--stack::before { margin-top: 6px; flex: none; }
.status--stack .st-lines { display: flex; flex-direction: column; }
.status--stack small { font-size: 11px; font-weight: 400; opacity: .85; }

/* ---------- Case header (Case Info, Timestamp): Case ID + buttons stay on top while the page scrolls,
   right under the section menu (Case List · Case Info · Timestamp …) — user, 2026-10-18.
   --jl-h = space taken by the menu (0 while it is hidden), set by msu-ui.js jumplinks() */
.case-head {
  position: sticky; top: calc(var(--hdr-height) + var(--jl-h, 0px)); z-index: 99;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 16px; padding: 8px 0; background: var(--bg);
  transition: top .35s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
}
.case-head.is-stuck { box-shadow: 0 10px 12px -12px var(--shadow); border-bottom: 1px solid var(--outline-variant); }
.case-head h1 { margin: 0; font: 500 22px/1.25 var(--font-nav); }
.case-head .meta { color: var(--on-surface-variant); font-size: 13px; }
.case-head .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
/* the buttons always on their own row under Case ID, at the right — same place on Case Info and Timestamp (user, 2026-10-18) */
.case-head .actions { flex: 1 0 100%; justify-content: flex-end; }
/* case action colours (Case Info, Timestamp): Cancel Change = amber (undo edits, softer than red Cancel Case) · Send Message = blue · Attach File = manila file folder */
:root { --btn-undo-bg: #fff3e0; --btn-undo-fg: #b45309; --btn-undo-line: #f5b871;
  --btn-msg: #1a73e8; --btn-msg-hover: #1765cc; --on-btn-msg: #fff;
  --btn-folder: #f8d775; --btn-folder-hover: #f2ca52; --on-btn-folder: #5c4300; }
:root[data-theme="dark"] { --btn-undo-bg: #3a2a12; --btn-undo-fg: #ffb874; --btn-undo-line: #8a5a1c;
  --btn-msg: #8ab4f8; --btn-msg-hover: #a8c7fa; --on-btn-msg: #0b1d3a;
  --btn-folder: #e2b84f; --btn-folder-hover: #ecc76a; --on-btn-folder: #2b1f00; }
.btn-undo { background: var(--btn-undo-bg); color: var(--btn-undo-fg); box-shadow: inset 0 0 0 1px var(--btn-undo-line); }
.btn-undo:hover { filter: brightness(.97); }
.btn-msg { background: var(--btn-msg); color: var(--on-btn-msg); }
.btn-msg:hover { background: var(--btn-msg-hover); }
.btn-folder { background: var(--btn-folder); color: var(--on-btn-folder); }
.btn-folder:hover { background: var(--btn-folder-hover); }

@media (prefers-reduced-motion: reduce) { .case-head { transition: none; } }

/* v0.3.7: Command / Site tables — the name in the other language (Thai / English) under the shown one */
.name-other { display: block; margin-top: 2px; color: var(--on-surface-variant); font-size: 12px; font-weight: 400; }

/* v0.3.9: MSU Info › Car — Device key of a car (its device / MSU Case Board) */
.devkey { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--outline-variant); border-radius: 12px; }
.devkey__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.devkey__head .material-icons { font-size: 18px; color: var(--on-surface-variant); }
.devkey__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.devkey code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 12.5px/1.5 ui-monospace, Consolas, monospace; background: var(--surface-container); padding: 6px 8px; border-radius: 8px; }

/* Multi-select combo box (was Case Dashboard only — shared by the case filters since v0.3.29, assets/msu-filter.js) */
.mc { position: relative; background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius); padding: 10px 14px; }
.mc__label { display: block; margin: 0 0 6px; font: 500 12px/1 var(--font-nav); letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-variant); }
.mc__box { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 40px; padding: 4px 4px 4px 8px; border: 1px solid var(--outline); border-radius: 10px; background: var(--surface); }
.mc__box:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; }
.mc--picked .mc__in::placeholder { color: var(--on-surface); font-weight: 600; }   /* "2 selected" reads as a value (v0.3.31) */
.mc__in { flex: 1 1 120px; min-width: 90px; height: 30px; border: 0; outline: 0; background: transparent; }
.mc__tog { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--on-surface-variant); }
.mc__list { position: absolute; z-index: 60; left: 14px; right: 14px; top: calc(100% - 6px); margin: 0; padding: 6px; list-style: none; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--outline-variant); border-radius: 12px; box-shadow: 0 12px 28px -10px var(--shadow); }
.mc__list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.mc__list li:hover { background: var(--hover); }
.mc__list li[aria-selected="true"] .material-icons { color: var(--accent); }
.mc__list .mc__none { color: var(--muted); cursor: default; }
.mc--one .mc__list li[aria-selected="true"] { background: var(--selected); color: var(--accent); font-weight: 600; }   /* one item (searchSelect, v0.3.42) */
.mc--one .mc__list li[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }
/* inside a filter grid / toolbar: a normal field (label + control), no card */
.field.mc { padding: 0; border: 0; background: transparent; border-radius: 0; }
.field.mc .mc__label { margin: 0; font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--on-surface-variant); }   /* = .field label */
.field.mc .mc__list { left: 0; right: 0; top: 100%; margin-top: 4px; }
/* v0.3.33 (user 2026-10-23): MSU Site / MSU Car the same size as the other filter boxes — 44 px high, 8 px corners, one line */
.field.mc .mc__box { height: 44px; min-height: 0; flex-wrap: nowrap; gap: 0; padding: 0 4px 0 12px; border-radius: 8px; transition: border-color .15s, box-shadow .15s; }
.field.mc .mc__box:focus-within { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field.mc .mc__in { height: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; min-width: 0; flex: 1 1 auto; }
.field.mc .mc__in:focus { border: 0; box-shadow: none; }
.field.mc .mc__tog { width: 32px; height: 32px; flex: none; }
.toolbar .field--multi { width: 300px; }
.scd-host { display: contents; }
/* KPI Report (v0.3.29): the 3 buttons on one row · the chart scope switch */
.kpi-actions { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 12px; } .kpi-actions .btn { height: 44px; white-space: nowrap; }
.kpi-chart__scope { display: inline-flex; margin: 12px 16px 0; } .kpi-chart__scope button { white-space: nowrap; }
.s100-part { display: flex; align-items: center; justify-content: center; color: #fff; font: 600 12px/1 var(--font-nav); font-variant-numeric: tabular-nums; }   /* Case Dashboard 100% (v0.3.29) */
.kpi-bars__site { font: 600 13px/1.3 var(--font-nav); padding: 10px 0 2px; border-top: 1px dashed var(--outline-variant); } .kpi-bars__site:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 560px) { .kpi-actions { flex-wrap: wrap; width: 100%; } .kpi-chart__scope { display: flex; flex-wrap: wrap; } }   /* the 4 filter fields sit directly in the toolbar / grid */
.field--date .error { display: none; } .field--date.is-invalid .error { display: block; } .field--date.is-invalid input { border-color: var(--danger, #d93025); }
@media (max-width: 720px) { .toolbar .field--multi { width: 100%; } }

/* LINE messages with the sender's result (Site › Line Message · Timestamp › LINE Message) — v0.3.72, shared since v0.3.76 */
.line-outbox { display: flex; flex-direction: column; gap: 8px; }
.line-msg { border: 1px solid var(--outline-variant); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.line-msg pre { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.line-msg__why { margin-top: 4px; font-size: 12px; color: var(--st-error-fg, #b3261e); }   /* LINE's reason when a push failed */
.line-msg__meta .btn { height: 26px; padding: 0 10px; font-size: 12px; margin-left: auto; }
.line-msg__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--on-surface-variant); font-size: 12px; }

/* v0.3.78: MSU Info Management — settings need the password + MFA confirmation (10 minutes) · msu-ui.js settingsBar */
.settings-auth { align-items: center; flex-wrap: wrap; }
.settings-auth .btn { margin-left: auto; }
.settings-auth.is-flash { animation: settings-flash 1.2s ease 2; }
@keyframes settings-flash { 50% { box-shadow: 0 0 0 4px var(--st-warn-fg, #b26a00); } }