/* ===== Design tokens — macOS system palette ===== */
:root {
  --bg: #f2f2f7;
  --bg-deep: #e8e8ed;
  --chrome: rgba(246, 246, 248, 0.82);
  --sidebar: rgba(238, 238, 243, 0.72);
  --surface: #ffffff;
  --surface-2: #f6f6f8;
  --surface-sunken: #ececf0;

  --text: #1c1c1e;
  --text-2: #505057;
  --text-3: #6a6a72;
  --sep: rgba(60, 60, 67, 0.13);
  --sep-strong: rgba(60, 60, 67, 0.24);

  --accent: #007aff;
  --accent-fill: #0066d6;
  --accent-soft: rgba(0, 122, 255, 0.12);
  --ok: #1f7a36;
  --ok-fill: #34c759;
  --ok-soft: rgba(52, 199, 89, 0.14);
  --warn: #ad4f00;
  --warn-fill: #ff9500;
  --warn-soft: rgba(255, 149, 0, 0.15);
  --bad: #d70015;
  --bad-fill: #ff3b30;
  --bad-soft: rgba(255, 59, 48, 0.13);
  --pending: #8944ab;
  --pending-fill: #af52de;
  --pending-soft: rgba(175, 82, 222, 0.13);
  --info: #0a5fbf;
  --info-soft: rgba(0, 122, 255, 0.12);
  --idle: #8e8e93;
  --bad-solid: #c4000f;
  --warn-solid: #9c4700;

  --r-win: 12px;
  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 7px;
  --shadow-win: 0 24px 64px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-pop: 0 18px 44px rgba(0, 0, 0, 0.22);
  --hair: inset 0 0 0 0.5px var(--sep-strong);

  --ui: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Noto Sans Thai", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1c1e;
    --bg-deep: #131315;
    --chrome: rgba(44, 44, 46, 0.78);
    --sidebar: rgba(36, 36, 38, 0.7);
    --surface: #2c2c2e;
    --surface-2: #343437;
    --surface-sunken: #232325;
    --text: #f5f5f7;
    --text-2: #b8b8be;
    --text-3: #9e9ea5;
    --sep: rgba(255, 255, 255, 0.11);
    --sep-strong: rgba(255, 255, 255, 0.18);
    --accent: #0a84ff;
    --accent-fill: #0b6ad6;
    --accent-soft: rgba(10, 132, 255, 0.2);
    --ok: #4cd964;
    --ok-fill: #30d158;
    --ok-soft: rgba(48, 209, 88, 0.16);
    --warn: #ffab2e;
    --warn-fill: #ff9f0a;
    --warn-soft: rgba(255, 159, 10, 0.17);
    --bad: #ff8a82;
    --bad-fill: #ff453a;
    --bad-soft: rgba(255, 69, 58, 0.17);
    --pending: #cf8ae8;
    --pending-fill: #bf5af2;
    --pending-soft: rgba(191, 90, 242, 0.18);
    --info: #64b5ff;
    --info-soft: rgba(10, 132, 255, 0.18);
    --idle: #98989d;
    --shadow-win: 0 28px 70px rgba(0, 0, 0, 0.55);
    --shadow-pop: 0 20px 50px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #1c1c1e;
  --bg-deep: #131315;
  --chrome: rgba(44, 44, 46, 0.78);
  --sidebar: rgba(36, 36, 38, 0.7);
  --surface: #2c2c2e;
  --surface-2: #343437;
  --surface-sunken: #232325;
  --text: #f5f5f7;
  --text-2: #b8b8be;
  --text-3: #9e9ea5;
  --sep: rgba(255, 255, 255, 0.11);
  --sep-strong: rgba(255, 255, 255, 0.18);
  --accent: #0a84ff;
  --accent-fill: #0b6ad6;
  --accent-soft: rgba(10, 132, 255, 0.2);
  --ok: #4cd964;
  --ok-fill: #30d158;
  --ok-soft: rgba(48, 209, 88, 0.16);
  --warn: #ffab2e;
  --warn-fill: #ff9f0a;
  --warn-soft: rgba(255, 159, 10, 0.17);
  --bad: #ff8a82;
  --bad-fill: #ff453a;
  --bad-soft: rgba(255, 69, 58, 0.17);
  --pending: #cf8ae8;
  --pending-fill: #bf5af2;
  --pending-soft: rgba(191, 90, 242, 0.18);
  --info: #64b5ff;
  --info-soft: rgba(10, 132, 255, 0.18);
  --idle: #98989d;
  --shadow-win: 0 28px 70px rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 20px 50px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { accent-color: var(--accent); caret-color: var(--accent); scrollbar-color: var(--sep-strong) transparent; }
::selection { background: var(--accent-soft); color: var(--text); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--sep-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ไอคอน SVG ชุดเดียวทั้งระบบ */
.ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico .ico-fill { fill: currentColor; stroke: none; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 600px at 15% -10%, var(--accent-soft), transparent 60%),
    var(--bg-deep);
  color: var(--text);
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ===== หน้าต่างแบบ macOS ===== */
.desk { padding: clamp(0px, 2.2vw, 28px); min-height: 100vh; }

.window {
  max-width: 1320px;
  margin: 0 auto;
  background: var(--bg);
  border-radius: var(--r-win);
  box-shadow: var(--shadow-win), var(--hair);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: min(880px, calc(100vh - 56px));
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--chrome);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 0.5px solid var(--sep);
  position: sticky;
  top: 0;
  z-index: 20;
}

.lights { display: flex; gap: 8px; flex: none; }
.lights i { width: 12px; height: 12px; border-radius: 50%; display: block; box-shadow: var(--hair); }
.lights i:nth-child(1) { background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }

.win-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.win-title small { display: block; font-weight: 400; font-size: 11px; color: var(--text-2); }
.spacer { flex: 1; }

.seg {
  display: flex;
  background: var(--surface-sunken);
  padding: 2px;
  border-radius: 8px;
  box-shadow: var(--hair);
  gap: 2px;
}
.seg button {
  border: 0;
  background: transparent;
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
.seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), var(--hair);
}

.tbtn {
  border: 0;
  background: var(--surface-sunken);
  box-shadow: var(--hair);
  color: var(--text-2);
  width: 30px; height: 28px;
  border-radius: 7px;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 14px;
}
.tbtn:hover { color: var(--text); background: var(--surface); }

/* ===== โครงหน้า ===== */
.body { display: grid; grid-template-columns: 218px 1fr; min-height: 0; }

.sidebar {
  background: var(--sidebar);
  backdrop-filter: saturate(180%) blur(22px);
  border-right: 0.5px solid var(--sep);
  padding: 12px 10px 20px;
  display: flex; flex-direction: column; gap: 18px;
  overflow-y: auto;
}
.side-group > h3, .side-heading {
  margin: 0 0 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
}
.side-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 6px 10px;
  border: 0; background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: start;
  color: var(--text);
  font-size: 13.5px;
}
.side-item:hover { background: var(--sep); }
.side-item[aria-current="page"] { background: var(--accent-fill); color: #fff; font-weight: 500; }
.side-item[aria-current="page"] .count { background: rgba(255, 255, 255, 0.28); color: #fff; }
.side-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.side-item .ico { opacity: 0.8; }
.side-item[aria-current="page"] .ico { opacity: 1; }
.side-item .count {
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--surface-sunken);
  color: var(--text-2);
  padding: 1px 6px; border-radius: 20px;
  box-shadow: var(--hair);
}

.main { min-width: 0; overflow-y: auto; background: var(--bg); }
.pad { padding: clamp(14px, 2.4vw, 26px); }

/* ===== แถบวัน ===== */
.daybar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px clamp(14px, 2.4vw, 26px);
  border-bottom: 0.5px solid var(--sep);
  background: var(--surface);
  position: sticky; top: 0; z-index: 10;
}
.nav-pill { display: flex; gap: 2px; background: var(--surface-sunken); border-radius: 8px; padding: 2px; box-shadow: var(--hair); }
.nav-pill button {
  border: 0; background: transparent; cursor: pointer;
  padding: 4px 10px; border-radius: 6px; color: var(--text-2); font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px;
}
.nav-pill button:active, .tbtn:active, .btn:active { filter: brightness(0.92); }
.nav-pill button:hover { background: var(--surface); color: var(--text); }
.daybar h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.daybar .sub { color: var(--text-2); font-size: 12px; }
.clock {
  font-family: var(--mono); font-size: 26px; font-weight: 500;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.clock small { display: block; font-family: var(--ui); font-size: 11px; color: var(--text-2); font-weight: 400; letter-spacing: 0; }

/* ===== แถบสรุป ===== */
.stats { display: flex; gap: 8px; flex-wrap: wrap; }
.stat {
  display: flex; align-items: baseline; gap: 6px;
  background: var(--surface-sunken); box-shadow: var(--hair);
  border-radius: 20px; padding: 4px 11px; font-size: 12px; color: var(--text-2);
}
.stat b { font-family: var(--mono); font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.stat i { width: 8px; height: 8px; border-radius: 50%; }

/* ===== บอร์ดสะท้อนหน้าจอ ===== */
.floor { margin-bottom: 22px; }
.floor-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 9px;
}
.floor-head h3 { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.floor-head .rule { flex: 1; height: 0.5px; background: var(--sep-strong); }
.floor-head .tally { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }

.room-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--hair);
  padding: 13px 14px 12px;
  text-align: start;
  border: 0;
  cursor: pointer;
  display: grid; gap: 8px;
  color: inherit;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.room-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12), var(--hair); }
.room-card.is-busy { background: linear-gradient(180deg, var(--bad-soft), transparent 58%), var(--surface); }
.room-card.is-soon { background: linear-gradient(180deg, var(--warn-soft), transparent 58%), var(--surface); }

.rc-top { display: flex; align-items: flex-start; gap: 8px; }
.rc-name { font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; line-height: 1.3; }
.rc-code { font-family: var(--mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.04em; }
.chip {
  margin-inline-start: auto; flex: none;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
  background: var(--chip-bg, var(--surface-sunken));
  color: var(--chip-fg, var(--text-2));
  white-space: nowrap;
}
.chip.ok { --chip-bg: var(--ok-soft); --chip-fg: var(--ok); }
.chip.warn { --chip-bg: var(--warn-soft); --chip-fg: var(--warn); }
.chip.bad { --chip-bg: var(--bad-soft); --chip-fg: var(--bad); }
.chip.pending { --chip-bg: var(--pending-soft); --chip-fg: var(--pending); }
.chip.info { --chip-bg: var(--info-soft); --chip-fg: var(--info); }

.rc-now { display: grid; gap: 2px; min-height: 38px; }
.rc-now .t { font-family: var(--mono); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rc-now .who { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-now .free { color: var(--text-3); font-size: 12.5px; }

.rail { height: 4px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; display: flex; }
.rail span { display: block; height: 100%; }
.rail .b { background: var(--bad-fill); }
.rail .p { background: var(--pending-fill); opacity: 0.55; }
.rail .g { background: transparent; }

.rc-foot { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); }
.flag { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-weight: 500; }
.flag .ico, .rc-foot .ico { width: 13px; height: 13px; }
.flag.bad { color: var(--bad); }

/* ===== ตารางเวลา ===== */
.tl-wrap { overflow-x: auto; border-radius: var(--r-lg); box-shadow: var(--hair); background: var(--surface); }
.tl { min-width: 860px; }
.tl-row { display: grid; grid-template-columns: 150px 1fr; border-top: 0.5px solid var(--sep); }
.tl-row:first-child { border-top: 0; }
.tl-head { position: sticky; top: 0; z-index: 4; background: var(--surface-2); }
.tl-label { padding: 8px 12px; font-size: 12.5px; display: flex; flex-direction: column; justify-content: center; gap: 1px; border-inline-end: 0.5px solid var(--sep); }
.tl-label b { font-weight: 600; }
.tl-label span { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.tl-track { position: relative; height: 40px; }
.tl-head .tl-track { height: 26px; }
.tick { position: absolute; top: 0; bottom: 0; border-inline-start: 0.5px solid var(--sep); }
.tick.hour { border-inline-start-color: var(--sep-strong); }
.tick b { position: absolute; top: 5px; inset-inline-start: 4px; font-family: var(--mono); font-size: 11px; color: var(--text-3); font-weight: 500; }
.nowline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bad-fill); z-index: 5; }
.nowline::before { content: ""; position: absolute; top: -3px; inset-inline-start: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad-fill); }

.ev {
  position: absolute; top: 5px; bottom: 5px;
  border-radius: var(--r-sm);
  padding: 3px 8px;
  font-size: 11.5px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border: 0; cursor: pointer; text-align: start;
  background: var(--accent-fill); color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.ev.pending { background: var(--pending-soft); color: var(--pending); box-shadow: inset 0 0 0 1px var(--pending-fill); }
.ev.rejected { display: none; }
.ev b { font-family: var(--mono); font-weight: 500; opacity: 0.85; margin-inline-end: 5px; }

/* ===== การ์ด/ตาราง ทั่วไป ===== */
.panel { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--hair); overflow: hidden; }
.panel > header {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 0.5px solid var(--sep); background: var(--surface-2);
}
.panel > header h3 { margin: 0; font-size: 13.5px; font-weight: 600; }
.list { display: flex; flex-direction: column; }
.row {
  display: grid; gap: 3px;
  padding: 11px 14px; border-top: 0.5px solid var(--sep);
  text-align: start;
}
.list .row:first-child { border-top: 0; }
.row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-top strong { font-size: 13.5px; font-weight: 600; }
.row .meta { font-size: 12px; color: var(--text-2); display: flex; gap: 10px; flex-wrap: wrap; }
.row .meta code { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); }
.row-actions { display: flex; gap: 6px; margin-inline-start: auto; }

.btn {
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  padding: 6px 13px; font-size: 13px; font-weight: 500;
  background: var(--surface-sunken); color: var(--text); box-shadow: var(--hair);
}
.btn:hover { filter: brightness(0.97); }
.btn.primary { background: var(--accent-fill); color: #fff; box-shadow: none; }
.btn.good { background: var(--ok-soft); color: var(--ok); }
.btn.danger { background: var(--bad-soft); color: var(--bad); }
.btn.sm { padding: 3px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.empty { padding: 34px 20px; text-align: center; color: var(--text-3); font-size: 13px; }
.empty b { display: block; color: var(--text-2); font-size: 14px; margin-bottom: 3px; }

/* ===== ฟอร์ม ===== */
.form { display: grid; gap: 14px; padding: 16px; }
.fgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.field { display: grid; gap: 5px; min-width: 0; }
.field > label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--surface);
  border: 0; box-shadow: inset 0 0 0 1px var(--sep-strong);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-size: 13.5px;
}
.field textarea { resize: vertical; min-height: 64px; }
.field .hint { font-size: 12px; color: var(--text-3); }
.field.bad input, .field.bad select { box-shadow: inset 0 0 0 1.5px var(--bad-fill); }

.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.check {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--surface-2); box-shadow: var(--hair);
  font-size: 12.5px; cursor: pointer;
}
.check input { accent-color: var(--accent); width: 15px; height: 15px; }
.check:has(input:checked) { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }

.notice {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--r-md);
  font-size: 12.5px; line-height: 1.45;
  background: var(--warn-soft); color: var(--warn);
}
.notice.bad { background: var(--bad-soft); color: var(--bad); }
.notice.ok { background: var(--ok-soft); color: var(--ok); }
.notice.info { background: var(--info-soft); color: var(--info); }

.form-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }

/* ===== แผงรายละเอียดห้อง (sheet) ===== */
.sheet-bg {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(3px);
  display: grid; place-items: start center;
  padding: clamp(12px, 5vh, 60px) 14px;
  overflow-y: auto;
}
.sheet {
  width: min(680px, 100%);
  background: var(--bg);
  border-radius: var(--r-win);
  box-shadow: var(--shadow-pop), var(--hair);
  overflow: hidden;
  animation: rise 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } .room-card { transition: none; } }

.sheet-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; background: var(--chrome); border-bottom: 0.5px solid var(--sep);
}
.sheet-head h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.sheet-head .sub { font-size: 12px; color: var(--text-2); font-family: var(--mono); }
.sheet-body { padding: 16px; display: grid; gap: 14px; }

.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.spec div { background: var(--surface); border-radius: var(--r-md); padding: 10px 12px; box-shadow: var(--hair); }
.spec dt { font-size: 11px; color: var(--text-3); margin-bottom: 2px; }
.spec dd { margin: 0; font-size: 14px; font-weight: 600; }
.spec dd.mono { font-family: var(--mono); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12px; padding: 3px 9px; border-radius: 20px; background: var(--surface); box-shadow: var(--hair); color: var(--text-2); }

.stars { display: inline-flex; gap: 1px; color: var(--warn-fill); }
.stars .ico { width: 13px; height: 13px; }
.stars .off { color: var(--sep-strong); }
.stars.muted { color: var(--text-3); }
.rate-input { display: flex; gap: 3px; }
.rate-input button { border: 0; background: transparent; cursor: pointer; color: var(--sep-strong); padding: 4px; border-radius: 6px; display: inline-flex; }
.rate-input button .ico { width: 22px; height: 22px; }
.rate-input button:hover { color: var(--warn); }
.rate-input button[aria-pressed="true"] { color: var(--warn-fill); }

.review { display: grid; gap: 4px; padding: 11px 14px; border-top: 0.5px solid var(--sep); }
.review-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.review p { margin: 0; font-size: 13.5px; }

/* ===== ตัวบ่งชี้การเชื่อมต่อ ===== */
.conn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-3); }
.conn i { width: 7px; height: 7px; border-radius: 50%; background: var(--idle); }
.conn.live i { background: var(--ok-fill); }
.conn.local i { background: var(--warn-fill); }

.demo-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
  background: var(--pending-soft); color: var(--pending);
}

@media (max-width: 860px) {
  .body { grid-template-columns: 1fr; }
  .sidebar {
    flex-direction: row; overflow-x: auto; border-right: 0;
    border-bottom: 0.5px solid var(--sep); padding: 8px 10px; gap: 8px; align-items: center;
  }
  .side-group { display: flex; align-items: center; gap: 6px; }
  .side-group > h3, .side-heading { display: none; }
  .side-item { width: auto; white-space: nowrap; }
  .window { min-height: 100vh; border-radius: 0; }
  .desk { padding: 0; }
}

/* ===== ตารางรายสัปดาห์ ===== */
.wk-wrap { overflow-x: auto; border-radius: var(--r-lg); box-shadow: var(--hair); background: var(--surface); }
.wk {
  min-width: 760px;
  display: grid;
  grid-template-columns: 52px repeat(7, 1fr);
  gap: 1px;
  background: var(--sep);
}
.wk > * { background: var(--surface); }
.wk-head {
  padding: 7px 4px; text-align: center; font-size: 12px; line-height: 1.3;
  position: sticky; top: 0; z-index: 3; background: var(--surface-2);
}
.wk-head b { display: block; font-weight: 600; }
.wk-head span { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.wk-head.today { background: var(--accent-soft); }
.wk-head.today b { color: var(--info); }

.wk-col { position: relative; height: var(--wk-h, 660px); }
.wk-col.today { background: linear-gradient(180deg, var(--accent-soft), transparent 22%), var(--surface); }
.wk-col .hr { position: absolute; inset-inline: 0; border-top: 0.5px solid var(--sep); }
.wk-gutter { position: relative; height: var(--wk-h, 660px); background: var(--surface-2); }
.wk-gutter b {
  position: absolute; inset-inline-end: 6px; transform: translateY(-50%);
  font-family: var(--mono); font-size: 11px; color: var(--text-2); font-weight: 500;
}
.wk-now { position: absolute; inset-inline: 0; height: 2px; background: var(--bad-fill); z-index: 4; }

.blk {
  position: absolute;
  border: 0; cursor: pointer; text-align: start;
  border-radius: 7px; padding: 4px 6px 4px 8px;
  overflow: hidden; display: grid; gap: 1px; align-content: start;
  background: hsl(var(--h) 72% 48% / 0.17);
  box-shadow: inset 0 0 0 0.5px hsl(var(--h) 60% 40% / 0.35);
  color: var(--text);
  font-size: 11.5px; line-height: 1.32;
}
.blk:hover { background: hsl(var(--h) 72% 48% / 0.28); }
.blk .t { font-family: var(--mono); font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.blk .s { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.blk .r { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blk.ghost { background: repeating-linear-gradient(45deg, var(--pending-soft) 0 6px, transparent 6px 12px); box-shadow: inset 0 0 0 1px var(--pending-fill); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; padding: 12px 14px; }
.filters .field { min-width: 150px; }

.legend-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 14px; font-size: 11.5px; color: var(--text-2); }
.legend-row span { display: inline-flex; align-items: center; gap: 5px; }
.legend-row i { width: 9px; height: 9px; border-radius: 3px; background: hsl(var(--h) 72% 48%); }

.sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; padding: 12px 14px; }
.sum div { background: var(--surface-2); border-radius: var(--r-md); padding: 9px 12px; box-shadow: var(--hair); }
.sum dt { font-size: 11px; color: var(--text-3); }
.sum dd { margin: 0; font-family: var(--mono); font-size: 18px; font-weight: 500; }
.side-group > h3:not(:first-child), .side-heading:not(:first-child) { margin-top: 14px; }
.wk-gutter b:first-child { transform: none; }
.wk-gutter b:last-child { transform: translateY(-100%); }
.filters { align-items: start; }

/* ===== ตารางแบบรายการสำหรับจอแคบ (มือถือ นศพ./อาจารย์) ===== */
.agenda { display: none; }
.agenda-day { display: grid; gap: 6px; }
.agenda-day + .agenda-day { margin-top: 14px; }
.agenda-day > .agenda-title {
  margin: 0; display: flex; align-items: baseline; gap: 8px;
  font-size: 13.5px; font-weight: 600;
}
.agenda-day > .agenda-title span { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--text-3); }
.agenda-day.today > .agenda-title { color: var(--info); }
.agenda-item {
  display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: start;
  width: 100%; border: 0; cursor: pointer; text-align: start; color: var(--text);
  padding: 10px 12px; border-radius: var(--r-md);
  background: hsl(var(--h) 72% 48% / 0.14);
  box-shadow: inset 0 0 0 0.5px hsl(var(--h) 60% 40% / 0.3);
}
.agenda-item.ghost { background: repeating-linear-gradient(45deg, var(--pending-soft) 0 6px, transparent 6px 12px); box-shadow: inset 0 0 0 1px var(--pending-fill); }
.agenda-item time { font-family: var(--mono); font-size: 12px; line-height: 1.35; color: var(--text-2); font-variant-numeric: tabular-nums; }
.agenda-item time b { display: block; font-weight: 500; color: var(--text); font-size: 13px; }
.agenda-item strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.agenda-item span { display: block; font-size: 12.5px; color: var(--text-2); }
.agenda-empty { font-size: 12.5px; color: var(--text-3); padding: 2px 0 4px; }

@media (max-width: 720px) {
  .wk-wrap { display: none; }
  .agenda { display: block; }
}

/* ===== สถานะกำลังโหลด ===== */
.loading-note { display: flex; align-items: center; gap: 8px; }
.loading-note i {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  border: 2px solid var(--info-soft); border-top-color: var(--info);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading-note i { animation: none; } }

/* ===== จอแคบ: แถบหัวหน้าต่างและแถบเมนู ===== */
@media (max-width: 860px) {
  .titlebar { flex-wrap: wrap; row-gap: 8px; }
  .win-title small { display: none; }
  #legend { display: none; }
  .daybar { gap: 10px; }
  .clock { font-size: 22px; }
}

/* ===== อุปกรณ์สัมผัส: เป้ากดอย่างน้อย 40px ===== */
@media (pointer: coarse) {
  .btn, .nav-pill button, .seg button, .side-item, .tbtn { min-height: 40px; }
  .tbtn { min-width: 40px; }
  .btn.sm { padding-inline: 12px; }
}

/* จอแคบ: หัวหน้าต่างให้เหลือแถวเดียวเท่าที่ทำได้ — โหมดจอสะท้อนเป็นของจอใหญ่เท่านั้น */
@media (max-width: 860px) {
  .titlebar { padding: 8px 12px; gap: 8px; }
  .lights, .tbtn[aria-label="โหมดจอสะท้อน"] { display: none; }
  .win-title { font-size: 12.5px; line-height: 1.3; flex: 1 1 100%; }
  .conn { font-size: 0; gap: 0; }
  .conn i { width: 8px; height: 8px; }
}

/* วันที่ไม่มีคาบ: ย่อเหลือบรรทัดเดียว */
.agenda-day.is-empty { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.agenda-day.is-empty + .agenda-day { margin-top: 8px; }
.agenda-day.is-empty > .agenda-title { color: var(--text-2); font-weight: 500; }
.agenda-day.is-empty .agenda-empty { padding: 0; }

/* ===== ความทนทานพื้นฐาน ===== */
[hidden] { display: none !important; }

/* ===== แผงยืนยัน (dialog) ===== */
.mac-dialog {
  width: min(440px, calc(100vw - 32px));
  border: 0; padding: 0;
  border-radius: var(--r-win);
  background: var(--bg); color: var(--text);
  box-shadow: var(--shadow-pop), var(--hair);
}
.mac-dialog::backdrop { background: rgba(0, 0, 0, 0.32); backdrop-filter: blur(3px); }
.mac-dialog form { display: grid; gap: 12px; padding: 18px; }
.mac-dialog[open] { animation: rise 0.2s cubic-bezier(0.2, 0.9, 0.3, 1); }
.dlg-head { display: flex; align-items: center; gap: 10px; }
.dlg-head h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.dlg-badge { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; background: var(--info-soft); color: var(--info); }
.dlg-badge .ico { width: 18px; height: 18px; }
.dlg-badge.danger { background: var(--bad-soft); color: var(--bad); }
.dlg-badge.warn { background: var(--warn-soft); color: var(--warn); }
.dlg-msg { margin: 0; font-size: 13.5px; color: var(--text-2); }
.dlg-list { margin: 0; padding: 10px 12px 10px 28px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--hair); font-size: 13px; display: grid; gap: 3px; }
.dlg-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.mac-dialog textarea { width: 100%; background: var(--surface); border: 0; box-shadow: inset 0 0 0 1px var(--sep-strong); border-radius: var(--r-sm); padding: 7px 10px; font-size: 13.5px; resize: vertical; }
.btn.danger-solid { background: var(--bad-solid); color: #fff; box-shadow: none; }
.btn.warn-solid { background: var(--warn-solid); color: #fff; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .mac-dialog[open] { animation: none; } }


/* ===== คำอธิบายสี (ไม่ใช่ปุ่ม) ===== */
.side-legend { list-style: none; margin: 0; padding: 2px 10px; display: grid; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.side-legend li { display: flex; align-items: center; gap: 9px; }
.side-legend .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ===== ชิ้นส่วนเล็ก ===== */
.btn-icon, .chip-icon { display: inline-flex; align-items: center; gap: 5px; }
.btn-icon .ico { width: 14px; height: 14px; }
.chip-icon .ico { width: 12px; height: 12px; }
.clash-list { color: var(--bad); }
.pending-note { color: var(--pending); font-weight: 500; }
.field.bad textarea { box-shadow: inset 0 0 0 1.5px var(--bad-fill); }

/* ===== การ์ดตอนนี้ / ถัดไป (ตารางเรียน นศพ.) ===== */
.class-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 10px; }
.nownext { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.nn-tile {
  display: grid; gap: 3px; align-content: start; text-align: start;
  border: 0; cursor: pointer; color: var(--text);
  padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--hair);
}
.nn-tile.now:not(.is-empty) { background: linear-gradient(180deg, hsl(var(--h) 72% 48% / 0.2), hsl(var(--h) 72% 48% / 0.08)), var(--surface); }
.nn-tile.next:not(.is-empty) { background: linear-gradient(180deg, hsl(var(--h) 72% 48% / 0.1), transparent 70%), var(--surface); }
.nn-tile:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1), var(--hair); }
.nn-tile:disabled { cursor: default; }
.nn-label { font-size: 12px; font-weight: 700; color: var(--text-2); }
.nn-tile.now .nn-label { color: var(--bad); }
.nn-room { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; }
.nn-time { font-family: var(--mono); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.nn-title { font-size: 14px; font-weight: 500; }
.nn-meta { font-size: 12.5px; color: var(--text-2); }
.nn-extra { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--info); margin-top: 4px; }
.nn-tile.now .nn-extra { color: var(--bad); }
.nn-tile.is-empty .nn-title { color: var(--text-3); font-weight: 400; }

.live { font-style: normal; font-size: 12px; font-weight: 600; margin-top: 3px; display: block; }
.live.now { color: var(--bad); }
.live.next { color: var(--info); }

/* ===== ฟอร์มลงตาราง ===== */
.plan-preview { border-radius: var(--r-md); background: var(--surface-2); box-shadow: var(--hair); padding: 12px 14px; display: grid; gap: 10px; }
.plan-empty { font-size: 13px; color: var(--text-2); }
.plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--text-2); }
.plan-head b { font-size: 15px; color: var(--text); }
.plan-dates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.plan-dates li { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; padding: 5px 9px; border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--hair); color: var(--ok); min-width: 0; }
.plan-dates li .mono { font-family: var(--mono); color: var(--text); font-variant-numeric: tabular-nums; flex: none; }
.plan-dates li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-dates li.is-clash { background: var(--bad-soft); color: var(--bad); box-shadow: none; }
.prep-disclosure { border-radius: var(--r-md); box-shadow: var(--hair); background: var(--surface); }
.prep-disclosure > summary { cursor: pointer; padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--text-2); list-style-position: inside; }
.prep-disclosure[open] > summary { border-bottom: 0.5px solid var(--sep); }
.prep-disclosure > .checks { padding: 10px 12px; }
.form-actions .hint { font-size: 12px; color: var(--text-3); margin-inline-end: auto; }
.plan-row { grid-template-columns: 124px minmax(0, 1fr) auto; align-items: start; column-gap: 12px; }
.plan-when { font-family: var(--mono); font-size: 12px; white-space: pre-line; color: var(--text-2); line-height: 1.45; font-variant-numeric: tabular-nums; }
.plan-body { display: grid; gap: 3px; min-width: 0; }

/* ===== จอสะท้อนติดผนัง ===== */
body.is-kiosk { background: var(--bg-deep); }
.kiosk-screen {
  min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto;
  gap: clamp(14px, 1.4vw, 28px);
  padding: clamp(16px, 2vw, 40px);
  background: var(--bg);
}
.k-head { display: flex; align-items: center; gap: clamp(14px, 2vw, 40px); flex-wrap: wrap; }
.k-brand { display: flex; align-items: center; gap: clamp(10px, 1vw, 20px); }
.k-logo { width: clamp(46px, 4vw, 86px); height: auto; border-radius: 50%; flex: none; }
.k-brand h1 { margin: 0; font-size: clamp(22px, 1.9vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.k-brand p { margin: 2px 0 0; font-size: clamp(15px, 1.05vw, 22px); color: var(--text-2); }
.k-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-inline-start: auto; }
.k-pill {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 16px; border-radius: 999px;
  font-size: clamp(15px, 1vw, 21px); font-weight: 600;
  background: var(--surface); box-shadow: var(--hair);
}
.k-pill b { font-family: var(--mono); font-size: clamp(22px, 1.6vw, 34px); font-weight: 500; font-variant-numeric: tabular-nums; }
.k-pill.bad { color: var(--bad); } .k-pill.warn { color: var(--warn); } .k-pill.ok { color: var(--ok); }
.k-clock { font-family: var(--mono); font-size: clamp(44px, 4.4vw, 92px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.k-exit {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--text-3);
  background: transparent; opacity: 0.35; transition: opacity 0.15s ease;
}
.k-exit:hover, .k-exit:focus-visible { opacity: 1; background: var(--surface); box-shadow: var(--hair); }

.k-floors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 24px); align-items: start; }
.k-floor { display: grid; gap: clamp(8px, 0.7vw, 14px); align-content: start; min-width: 0; }
.k-floor h2 {
  margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: clamp(22px, 1.6vw, 34px); font-weight: 700; letter-spacing: -0.02em;
  padding-bottom: 6px; border-bottom: 0.5px solid var(--sep-strong);
}
.k-floor h2 span { font-family: var(--mono); font-size: clamp(14px, 0.95vw, 20px); font-weight: 500; color: var(--text-2); }
.k-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(8px, 0.6vw, 12px); }
.k-row {
  display: grid; gap: 4px;
  padding: clamp(12px, 0.9vw, 18px) clamp(14px, 1vw, 20px);
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--hair);
}
.k-row.is-busy { background: linear-gradient(180deg, var(--bad-soft), transparent 75%), var(--surface); }
.k-row.is-soon { background: linear-gradient(180deg, var(--warn-soft), transparent 75%), var(--surface); }
.k-row-top { display: flex; align-items: flex-start; gap: 10px; }
.k-room { font-size: clamp(22px, 1.75vw, 38px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; min-width: 0; text-wrap: balance; }
.k-status {
  margin-inline-start: auto; flex: none; white-space: nowrap;
  font-size: clamp(15px, 1.05vw, 22px); font-weight: 700;
  padding: 3px 12px; border-radius: 999px;
}
.k-status.bad { background: var(--bad-soft); color: var(--bad); }
.k-status.warn { background: var(--warn-soft); color: var(--warn); }
.k-status.info { background: var(--info-soft); color: var(--info); }
.k-when { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.k-time { font-family: var(--mono); font-size: clamp(22px, 1.6vw, 34px); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.k-left { font-size: clamp(15px, 1vw, 21px); font-weight: 600; color: var(--text-2); }
.k-row.is-busy .k-left { color: var(--bad); }
.k-title { font-size: clamp(16px, 1.1vw, 23px); font-weight: 500; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.k-who { font-size: clamp(14px, 0.95vw, 20px); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-issue { display: inline-flex; align-items: center; gap: 6px; font-size: clamp(13px, 0.85vw, 18px); font-weight: 600; color: var(--bad); }
.k-issue .ico { width: 1.1em; height: 1.1em; }
.k-calm { margin: 0; font-size: clamp(15px, 1vw, 21px); color: var(--text-3); }
.k-idle { display: grid; gap: 6px; }
.k-idle-label { font-size: clamp(13px, 0.85vw, 18px); font-weight: 700; color: var(--ok); }
.k-idle ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.k-idle li {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: clamp(14px, 0.95vw, 20px); font-weight: 500;
  padding: 4px 11px; border-radius: 999px; background: var(--ok-soft); color: var(--text);
}
.k-idle li.has-issue { background: var(--bad-soft); }
.k-idle li .ico { width: 1em; height: 1em; color: var(--bad); }
.k-foot { display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; font-size: clamp(12px, 0.8vw, 16px); color: var(--text-3); }
.k-hint { margin-inline-start: auto; }

@media (max-width: 1200px) { .k-floors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .k-floors { grid-template-columns: 1fr; } .k-summary { margin-inline-start: 0; } }

/* ===== มือถือ: เมนูแถบล่างในระยะนิ้วโป้ง ===== */
@media (max-width: 860px) {
  .sidebar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
    border-bottom: 0; border-top: 0.5px solid var(--sep);
    background: var(--chrome);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .sidebar > .side-group { gap: 2px; }
  .side-item {
    flex-direction: column; gap: 2px; min-width: 76px; padding: 6px 8px;
    font-size: 11px; text-align: center; justify-content: center; position: relative;
  }
  .side-item .ico { width: 20px; height: 20px; }
  .side-item .count { position: absolute; top: 2px; inset-inline-end: 10px; margin: 0; }
  .main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .role-toggle { display: none; }
  .class-filters { grid-template-columns: 1fr 1fr; }
  .field input, .field select, .field textarea, .mac-dialog textarea { font-size: 16px; }
  .plan-row { grid-template-columns: 1fr; row-gap: 6px; }
  .plan-when { white-space: normal; }
  #toast { bottom: calc(86px + env(safe-area-inset-bottom)) !important; }
}


/* ===== โครงหน้า ===== */
.stack { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.stack-lg { gap: 18px; }
.pad-top-only { padding-bottom: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
h1.win-title { margin: 0; }
.title-short { display: none; }
.panel-title { margin: 0; font-size: 13.5px; font-weight: 600; }
.field-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.field-error { font-size: 12px; font-weight: 500; color: var(--bad); }
.list.plain { list-style: none; margin: 0; padding: 0; }
.list-group { padding: 8px 14px 4px; font-size: 12px; font-weight: 700; color: var(--text-2); background: var(--surface-2); border-top: 0.5px solid var(--sep); }
.row.is-muted strong { color: var(--text-3); }
.mono-inline { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.chip-inline { margin-inline-start: 8px; vertical-align: middle; }
.stats-board { margin-bottom: 16px; }
.flag.muted { color: var(--text-3); }
.form-actions.start { justify-content: flex-start; }
.day-picker { padding: 5px 9px; border-radius: var(--r-sm); border: 0; box-shadow: inset 0 0 0 1px var(--sep-strong); background: var(--surface); }
.role-toggle { margin-inline-start: 6px; }
.rc-now .aud { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* toast */
.toast-host { position: fixed; inset-inline: 0; bottom: 22px; display: flex; justify-content: center; z-index: 90; pointer-events: none; padding-inline: 16px; }
.notice.toast { pointer-events: auto; box-shadow: var(--shadow-pop); background: var(--surface); color: var(--text); }
.toast-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--ok-fill); }
.notice.toast.bad .toast-dot { background: var(--bad-fill); }

/* รายการชน */
.clash-list { list-style: none; margin: 4px 0 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--bad-soft); color: var(--bad); font-size: 12.5px; display: grid; gap: 2px; }

/* ===== ตัวเลือกอาจารย์ ===== */
.teacher-picker { display: grid; gap: 8px; }
.picked { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.picked li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-size: 13px; }
.picked-x { border: 0; background: transparent; cursor: pointer; color: var(--text-2); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.picked-x:hover { background: var(--surface); color: var(--bad); }
.picked-x .ico { width: 12px; height: 12px; }
.teacher-picker select { max-width: 360px; }
.picker-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--text-2); }

/* ===== ลงซ้ำหลายวัน ===== */
.repeat-row { align-items: start; }
.weekday-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wd { position: relative; cursor: pointer; }
.wd input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wd span {
  display: grid; place-items: center; min-width: 38px; height: 32px; padding-inline: 8px;
  border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep-strong);
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.wd input:checked + span { background: var(--accent-fill); color: #fff; box-shadow: none; }
.wd input:focus-visible + span { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.plan-dates li.is-warn { background: var(--warn-soft); color: var(--warn); box-shadow: none; }
.plan-dates li .more { flex: none; font-weight: 700; }

/* ===== เมนูแถว "อื่น ๆ" ===== */
.row-menu { position: relative; }
.row-menu > summary { list-style: none; cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu .menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 200px; padding: 4px; display: grid;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-pop), var(--hair);
}
.menu-item { border: 0; background: transparent; text-align: start; padding: 7px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--text); }
.menu-item:hover, .menu-item:focus-visible { background: var(--accent-fill); color: #fff; outline: none; }
.menu-item.danger { color: var(--bad); }
.menu-item.danger:hover, .menu-item.danger:focus-visible { background: var(--bad-solid); color: #fff; }

/* ===== ตารางสัปดาห์: คาบที่ล้นเลน ===== */
.wk-more-wrap { position: absolute; inset-inline-end: 3px; top: 0; bottom: 0; pointer-events: none; }
.wk-more {
  position: absolute; inset-inline-end: 0; z-index: 3; pointer-events: auto;
  border: 0; cursor: pointer; padding: 2px 7px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  background: var(--text); color: var(--bg); box-shadow: var(--shadow-pop);
}
.wk-more-list {
  position: absolute; inset-inline-end: 0; top: 24px; z-index: 6; pointer-events: auto;
  width: 220px; list-style: none; margin: 0; padding: 4px; display: grid; gap: 3px;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-pop), var(--hair);
}
.wk-more-list button {
  width: 100%; border: 0; cursor: pointer; text-align: start; font-size: 12px; padding: 6px 8px; border-radius: 6px;
  color: var(--text); background: hsl(var(--h) 72% 48% / 0.14);
}
.wk-more-list b { font-family: var(--mono); font-weight: 500; }

/* ผังรายวัน: คาบที่ทับกันแบ่งเลน */
.ev.is-lane { padding-block: 0; line-height: 1.35; display: flex; align-items: center; font-size: 11px; }

/* ===== รายการตามวันบนมือถือ ===== */
.agenda-title { margin: 0; }
.agenda-past { margin-bottom: 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--hair); }
.agenda-past > summary { cursor: pointer; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.agenda-past[open] { padding-bottom: 10px; }
.agenda-past[open] > .agenda-day { padding-inline: 12px; }

/* ===== จอสะท้อน ===== */
.k-exit { width: auto; padding: 0 12px; border-radius: 999px; gap: 6px; display: inline-flex; align-items: center; opacity: 0.6; font-size: 14px; }
.k-idle-issue { display: inline-flex; align-items: center; gap: 3px; font-size: 0.85em; font-weight: 700; color: var(--bad); }

/* ===== เมนูเดสก์ท็อป / มือถือ ===== */
.label-short, .nav-more, .more-sheet { display: none; }
.side-item .label-full { min-width: 0; }

@media (max-width: 860px) {
  .title-full, .win-title small { display: none; }
  .title-short { display: inline; }
  .win-title { flex: 1 1 auto; font-size: 13px; }
  .titlebar { flex-wrap: nowrap; }
  .sidebar { overflow-x: visible; justify-content: space-around; }
  .sidebar > .side-group:first-child { display: flex; width: 100%; justify-content: space-around; }
  .side-heading { display: none; }
  .side-item { min-width: 0; flex: 1 1 0; }
  .side-item .label-full { display: none; }
  .side-item .label-short { display: block; }
  .side-item.nav-secondary { display: none; }
  .side-item.nav-more { display: flex; }
  .more-sheet:not([hidden]) {
    display: block; position: fixed; inset-inline: 10px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 45;
    padding: 12px; border-radius: var(--r-win); background: var(--bg); box-shadow: var(--shadow-pop), var(--hair);
  }
  .more-sheet .side-heading { display: block; margin: 0 0 8px 4px; }
  .more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .more-grid .side-item { flex-direction: column; min-height: 64px; background: var(--surface); box-shadow: var(--hair); color: var(--text); }
  .more-grid .side-item[aria-current="page"] { background: var(--accent-fill); color: #fff; }
  .row-menu .menu { inset-inline-end: 0; }
  .wd span { min-width: 42px; height: 40px; }
}

/* ===== harden: การชนแบบเตือน / คำขอที่รอ / toast เลิกทำ ===== */
.clash-list.soft { background: var(--warn-soft); color: var(--warn); }
.clash-list.info { background: var(--pending-soft); color: var(--pending); }
.clash-list li { max-width: 72ch; }
.tag-pending { justify-self: start; margin-top: 4px; }
.blk .pending-text { color: var(--pending); font-weight: 600; }
.notice.toast { align-items: center; }
.toast-msg { flex: 1 1 auto; }
.toast-action { flex: none; margin-inline-start: 8px; }
.legacy-actions { flex-wrap: wrap; justify-content: flex-end; }
.legacy-actions select { max-width: 260px; padding: 4px 8px; border-radius: var(--r-sm); border: 0; box-shadow: inset 0 0 0 1px var(--sep-strong); background: var(--surface); font-size: 12.5px; }

/* ===== รายวิชาและกิจกรรม ===== */
.seg-radio { position: relative; display: flex; }
.seg-radio input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg-radio span {
  padding: 6px 13px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap;
}
.seg-radio input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), var(--hair); }
.seg-radio input:focus-visible + span { outline: 2.5px solid var(--accent); outline-offset: 1px; }
.kind-seg { width: fit-content; max-width: 100%; }
.kind-fields { display: grid; gap: 12px; }
.course-picker { display: grid; gap: 6px; }
.course-picker select { max-width: 420px; }

.cat-head { flex-wrap: wrap; row-gap: 8px; }
.seg-scroll { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.seg-scroll::-webkit-scrollbar { display: none; }
.seg-count {
  display: inline-block; min-width: 18px; margin-inline-start: 6px; padding: 0 5px; border-radius: 999px;
  background: var(--surface-sunken); color: var(--text-2); font-size: 11px; font-weight: 600; line-height: 16px;
  font-variant-numeric: tabular-nums; text-align: center;
}
.seg button[aria-pressed="true"] .seg-count { background: var(--accent-soft); color: var(--info); }
.cat-form { padding: 12px 14px; border-bottom: 0.5px solid var(--sep); }
.cat-lead { margin: 0; font-size: 13px; color: var(--text-2); max-width: 72ch; }
.panel > .cat-lead { padding: 10px 14px 0; }
.cat-grid { grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); }
.cat-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.cat-row.is-editing { background: var(--accent-soft); }
.cat-code {
  font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 6px; background: var(--surface-sunken); color: var(--text-2);
}
.cat-bulk { border-top: 0.5px solid var(--sep); }
.cat-bulk > summary { cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.cat-bulk > .form { padding: 0 14px 14px; }

@media (max-width: 640px) {
  .cat-grid, .cat-inline { grid-template-columns: minmax(0, 1fr); }
  .kind-seg { width: 100%; }
  .kind-seg .seg-radio { flex: 1 1 0; }
  .kind-seg .seg-radio span { flex: 1; display: grid; place-items: center; text-align: center; white-space: normal; }
}

/* ===== เข้าสู่ระบบเจ้าหน้าที่ (เว็บจริง) ===== */
#role-badge { display: inline-flex; align-items: center; gap: 6px; }
.auth-note { font-size: 11.5px; color: var(--text-3); }
@media (max-width: 860px) {
  .auth-note { display: none; }
}

/* ===== ตราศูนย์แพทยศาสตรศึกษาชั้นคลินิก ===== */
.brand-mark { width: 22px; height: 22px; border-radius: 50%; flex: none; margin-inline-end: 2px; }
@media (max-width: 720px) { .brand-mark { width: 20px; height: 20px; } }

/* ===== แผงเข้าสู่ระบบเจ้าหน้าที่ ===== */
.auth-wrap { display: grid; gap: 12px; padding: 18px; }
.auth-body { display: grid; gap: 10px; }
.auth-google { width: 100%; justify-content: center; }
.auth-or { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-3); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 0.5px; background: var(--sep-strong); }
.auth-form { display: grid; gap: 10px; }
.auth-form input { width: 100%; }
.auth-dialog .form-actions { justify-content: flex-end; gap: 8px; }
.auth-dialog .form-actions.start { justify-content: flex-start; margin-top: 8px; }
#auth-code { font-family: var(--mono); font-size: 16px; letter-spacing: 0.18em; }