:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --text: #1d2433;
  --muted: #667085;
  --border: #e3e7ef;
  --primary: #3454d1;
  --primary-ink: #ffffff;
  --primary-soft: #e8edfc;
  --accent: #0f9d8a;
  --class-bg: #eef3ff;
  --class-edge: #3454d1;
  --lock-bg: #fff6e5;
  --lock-edge: #e19a1c;
  --danger: #c62828;
  --danger-soft: #fdecec;
  --ok: #1b7f4b;
  --ok-soft: #e7f6ee;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Sarabun', 'Tahoma', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
small, .muted { color: var(--muted); }

/* ---------- แถบบน ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .6rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--primary); color: var(--primary-ink); font-size: 1.1rem;
}
.nav { display: flex; align-items: center; gap: .25rem; flex: 1; }
.nav > a { padding: .45rem .8rem; border-radius: 8px; color: var(--muted); font-weight: 500; }
.nav > a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav > a.on { background: var(--primary-soft); color: var(--primary); }
.nav-user { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.nav-user form { margin: 0; }
.who { font-weight: 500; white-space: nowrap; }
.who small { display: block; font-weight: 400; font-size: .78rem; line-height: 1.1; }
.chip {
  padding: .2rem .65rem; border-radius: 999px;
  background: var(--ok-soft); color: var(--ok); font-size: .85rem; font-weight: 600; white-space: nowrap;
}
.nav-toggle, .nav-burger { display: none; }

/* ---------- เนื้อหา ---------- */
.page { max-width: 1280px; margin: 0 auto; padding: 1.5rem; }
.center { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-head p { margin: 0; color: var(--muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}
.card + .card { margin-top: 1rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat { display: block; color: var(--text); }
.stat:hover { text-decoration: none; border-color: var(--primary); }
.stat .label { color: var(--muted); font-size: .9rem; }
.stat .value { font-size: 2rem; font-weight: 700; line-height: 1.2; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---------- ฟอร์ม ---------- */
label { display: block; font-weight: 500; margin-bottom: .3rem; }
.field { margin-bottom: 1rem; }
input[type=text], input[type=password], select {
  width: 100%;
  font: inherit;
  padding: .55rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
input:focus, select:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.hint { font-size: .85rem; color: var(--muted); margin-top: .25rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 600;
  padding: .55rem 1.1rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--primary); color: var(--primary-ink);
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); }
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }
.btn-sm { padding: .3rem .7rem; font-size: .9rem; }

.alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.alert-error { background: var(--danger-soft); color: var(--danger); }
.alert-ok { background: var(--ok-soft); color: var(--ok); }
.alert-info { background: var(--primary-soft); color: var(--primary); }

.auth { width: 100%; max-width: 400px; }
.auth .brand { justify-content: center; margin-bottom: 1.25rem; font-size: 1.2rem; }
.auth h1 { font-size: 1.3rem; text-align: center; }
.auth p.lead { text-align: center; color: var(--muted); margin-top: 0; }

/* ---------- ตารางข้อมูล ---------- */
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); text-align: left; }
table.list th { font-size: .85rem; color: var(--muted); font-weight: 600; }
table.list td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bar { height: 6px; border-radius: 3px; background: var(--primary-soft); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--primary); }

/* ---------- ตารางสอน ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.toolbar .field { margin: 0; min-width: 260px; flex: 1; }
.tabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.tabs a { padding: .4rem .9rem; border-radius: 8px; color: var(--muted); font-weight: 500; }
.tabs a.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
.tabs a:hover { text-decoration: none; }

.tt-wrap { overflow-x: auto; margin-top: 1rem; }
table.tt { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
table.tt th { font-weight: 600; font-size: .85rem; color: var(--muted); padding: .35rem .2rem; text-align: center; }
table.tt th .t { display: block; font-weight: 400; font-size: .72rem; }
table.tt th.day { width: 88px; text-align: left; padding-left: .6rem; color: var(--text); font-size: .95rem; }
table.tt td { height: 74px; vertical-align: top; padding: 0; }
.slot {
  height: 100%;
  padding: .35rem .45rem;
  border-radius: 8px;
  font-size: .8rem;
  line-height: 1.3;
  overflow: hidden;
}
.slot.empty { background: var(--surface-2); border: 1px dashed var(--border); }
.slot.class { background: var(--class-bg); border-left: 3px solid var(--class-edge); }
.slot.lock { background: var(--lock-bg); border-left: 3px solid var(--lock-edge); }
.slot b { display: block; font-size: .88rem; }
.slot .line { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; color: var(--muted); margin-top: .75rem; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: .3rem; }
.legend .c { background: var(--class-bg); border-left: 3px solid var(--class-edge); }
.legend .l { background: var(--lock-bg); border-left: 3px solid var(--lock-edge); }

.print-head, .print-foot { display: none; }
.tt-summary { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: .75rem; }
.tt-summary strong { font-size: 1.1rem; }

/* ---------- ส่วนประกอบเพิ่มเติม ---------- */
.brand-logo { width: 34px; height: 34px; object-fit: contain; }
.who { color: var(--text); }
.who:hover { text-decoration: none; color: var(--primary); }
.grow { flex: 1; }
.nowrap { white-space: nowrap; }
.req { color: var(--danger); }
.spacer { flex: 1; }
.narrow { max-width: 560px; }
.form-card { max-width: 920px; }
.table-wrap { overflow-x: auto; }

.subnav { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.subnav a { padding: .55rem .9rem; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--text); text-decoration: none; }
.subnav a.on { color: var(--primary); border-bottom-color: var(--primary); }

.grid-wide-left { grid-template-columns: 1.15fr 1fr; align-items: start; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-row { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.form-row .field { min-width: 140px; }
.form-row .field.grow { flex: 1 1 240px; }
.field-check { display: flex; align-items: center; }
.field-check label { font-weight: 400; display: flex; gap: .45rem; align-items: center; margin: 0; }
.form-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.danger-zone { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
form.inline { display: inline; margin: 0; }
textarea, input[type=time], input[type=search], input[type=file] {
  width: 100%; font: inherit; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
}
textarea { resize: vertical; }
input[type=color] { width: 64px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
table.periods input { padding: .35rem .5rem; }

.btn-danger { background: var(--danger); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); cursor: pointer; }
.linkish:hover { text-decoration: underline; }
td.actions { text-align: right; white-space: nowrap; }
td.actions > * { margin-left: .75rem; }
tr.inactive td { color: var(--muted); }
.badge { display: inline-block; padding: .05rem .5rem; border-radius: 6px; font-size: .78rem; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.badge.role-admin { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge.role-editor { background: var(--primary-soft); color: var(--primary); border-color: transparent; }

.radio-card { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px; margin-bottom: .4rem; cursor: pointer; }
.radio-card input { margin-top: .3rem; }
.radio-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }

.logo-row { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1rem; }
.logo-preview { width: 96px; height: 96px; flex: none; display: grid; place-items: center; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-2); font-size: .8rem; text-align: center; }
.logo-preview img { max-width: 88px; max-height: 88px; }
.print-logo { height: 56px; display: block; margin: 0 auto 4px; }

/* ---------- หน้าจัดตาราง ---------- */
table.tt.editable td.cell { cursor: pointer; }
table.tt.editable .slot.empty { display: grid; place-items: center; }
table.tt.editable .slot .plus { color: var(--border); font-size: 1.4rem; font-weight: 300; }
table.tt.editable td.cell:hover .slot.empty { border-color: var(--primary); background: var(--primary-soft); }
table.tt.editable td.cell:hover .slot.empty .plus { color: var(--primary); }
table.tt.editable .slot[data-slot] { cursor: grab; }
table.tt.editable .slot[data-slot]:hover { box-shadow: 0 0 0 2px var(--primary); }
table.tt .slot.dragging { opacity: .4; }
table.tt td.drop-ok .slot.empty { border: 2px solid var(--ok); background: var(--ok-soft); }

.dialog {
  width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(16, 24, 40, .3);
  color: var(--text); background: var(--surface);
}
.dialog::backdrop { background: rgba(16, 24, 40, .45); }
.dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.dialog-head, .dialog-foot { display: flex; align-items: center; gap: .5rem; padding: .9rem 1.25rem; }
.dialog-head { border-bottom: 1px solid var(--border); justify-content: space-between; }
.dialog-head h2 { margin: 0; }
.dialog-body { padding: 1rem 1.25rem; overflow-y: auto; }
.dialog-foot { border-top: 1px solid var(--border); }
.dialog .alert ul { margin: 0; padding-left: 1.1rem; }

.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.segmented label { margin: 0; padding: .5rem .8rem; font-weight: 500; cursor: pointer; display: flex; gap: .35rem; align-items: center; }
.segmented label + label { border-left: 1px solid var(--border); }
.segmented label:has(input:checked) { background: var(--primary-soft); color: var(--primary); }

.pickers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; }
.picker { border: 1px solid var(--border); border-radius: 10px; padding: .6rem; display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.picker-head { display: flex; justify-content: space-between; align-items: center; }
.picker-free { font-weight: 400; font-size: .82rem; color: var(--muted); margin: 0; display: flex; gap: .3rem; align-items: center; }
.picker-chips { display: flex; flex-wrap: wrap; gap: .3rem; min-height: 1.8rem; font-size: .85rem; }
.pchip { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .2rem .1rem .55rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.pchip.bad { background: var(--danger-soft); color: var(--danger); }
.pchip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .25rem; }
.picker-search { padding: .35rem .6rem !important; font-size: .9rem; }
.picker-list { height: 210px; overflow-y: auto; border-top: 1px solid var(--border); padding-top: .25rem; }
.popt { display: flex; gap: .45rem; align-items: flex-start; font-weight: 400; font-size: .88rem; padding: .25rem .3rem; border-radius: 6px; margin: 0; cursor: pointer; }
.popt:hover { background: var(--surface-2); }
.popt input { margin-top: .25rem; }
.popt small { color: var(--muted); }
.popt em { display: block; font-style: normal; font-size: .75rem; color: var(--danger); }
.popt.busy > span { color: var(--muted); }
.pempty { padding: .5rem; font-size: .85rem; }

/* ---------- จอเล็ก ---------- */
@media (max-width: 860px) {
  .pickers { grid-template-columns: 1fr; }
  .picker-list { height: 160px; }
  .grid-wide-left { grid-template-columns: 1fr; }
  .logo-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; padding: .6rem 1rem; }
  .nav-burger { display: block; margin-left: auto; width: 38px; height: 38px; position: relative; cursor: pointer; }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after {
    position: absolute; left: 9px; width: 20px; height: 2px; background: var(--text); content: '';
  }
  .nav-burger span { top: 18px; }
  .nav-burger span::before { top: -6px; left: 0; }
  .nav-burger span::after { top: 6px; left: 0; }
  .nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; }
  .nav-toggle:checked ~ .nav { display: flex; }
  .nav-user { margin: .5rem 0 0; flex-wrap: wrap; }
  .page { padding: 1rem; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ---------- พิมพ์ ---------- */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff; font-size: 12px; }
  .topbar, .no-print, .alert { display: none !important; }
  .page { max-width: none; padding: 0; }
  .card { box-shadow: none; border: 0; padding: 0; }
  .print-head { display: block; text-align: center; margin-bottom: 6px; }
  .print-head h1 { font-size: 18px; margin: 0; }
  .print-head p { margin: 0; font-size: 13px; }
  .print-foot { display: block; margin-top: 10px; white-space: pre-line; text-align: center; }
  .tt-wrap { overflow: visible; margin: 0; }
  table.tt { min-width: 0; border-collapse: collapse; border-spacing: 0; }
  table.tt th, table.tt td { border: 1px solid #555; color: #000; }
  table.tt td { height: 62px; }
  .slot { border-radius: 0; border-left: 0 !important; background: #fff !important; font-size: 11px; }
  .slot.lock { background: #f0f0f0 !important; }
  .slot.empty { border: 0; }
  .slot .line { color: #000; }
  .legend { display: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- แผนการสอน ---------- */
.status { display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.status-todo { color: #b45309; }
.status-done { color: var(--ok); }
.status-over { color: var(--danger); }
.status.status-todo { background: #fff4e0; }
.status.status-done { background: var(--ok-soft); }
.status.status-over { background: var(--danger-soft); }
.check-inline { display: flex; gap: .4rem; align-items: center; font-weight: 400; margin: 0; white-space: nowrap; }
.empty-state { text-align: center; padding: 2rem 1rem; }
.hint-row { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; margin-top: .75rem; }
.linkish.danger { color: var(--danger); }
select[multiple] { padding: .25rem; }

.plan-panel { margin: 1rem 0 .25rem; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.plan-panel-head { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; margin-bottom: .5rem; font-size: .9rem; }
.spacer-left { margin-left: auto; }
.plan-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.plan-chip {
  font: inherit; font-size: .85rem; cursor: pointer;
  display: inline-flex; gap: .35rem; align-items: center;
  padding: .3rem .6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.plan-chip span { font-size: .78rem; font-weight: 600; }
.plan-chip.status-todo span { color: #b45309; }
.plan-chip.status-done span { color: var(--ok); }
.plan-chip.status-over span { color: var(--danger); }
.plan-chip[disabled] { opacity: .55; cursor: default; }
.plan-chip.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px var(--primary-soft); }
body.has-preset table.tt.editable td.cell .slot.empty { border-color: var(--primary); }

/* ---------- รายงาน ---------- */
.field.small { min-width: 0; flex: 0 1 auto; }
.lead-line { margin: .75rem 0 1rem; }
.name-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.name-pill { padding: .3rem .7rem; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: .9rem; }
table.list tfoot th { color: var(--text); border-top: 2px solid var(--border); }
table.overview { border-collapse: collapse; width: 100%; font-size: .78rem; }
table.overview th, table.overview td { border: 1px solid var(--border); padding: .2rem .3rem; vertical-align: top; }
table.overview thead th { background: var(--surface-2); font-weight: 600; text-align: center; }
table.overview th .t { display: block; font-weight: 400; font-size: .7rem; color: var(--muted); }
table.overview th.owner { text-align: left; white-space: nowrap; background: var(--surface-2); }
table.overview td { min-width: 70px; line-height: 1.25; }
table.overview td.class { background: var(--class-bg); }
table.overview td.lock { background: var(--lock-bg); }
.overview-day + .overview-day { margin-top: 1.5rem; }
.owner-page + .owner-page { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px dashed var(--border); }
.print-head.show { display: block; text-align: center; margin-bottom: .5rem; }
.print-head.show h1 { font-size: 1.15rem; margin: 0; }
.print-head.show p { margin: 0; }

@media print {
  .subnav, .page-head { display: none !important; }
  .overview-day, .owner-page { break-after: page; page-break-after: always; }
  .overview-day:last-child, .owner-page:last-child { break-after: auto; page-break-after: auto; }
  .owner-page + .owner-page { margin: 0; padding: 0; border: 0; }
  table.overview { font-size: 9px; }
  table.overview th, table.overview td { border-color: #555; color: #000; }
  table.report { font-size: 12px; }
}

/* ---------- มือถือ (m.php) ---------- */
body.m { background: var(--bg); padding-bottom: env(safe-area-inset-bottom); }
.m-top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem; padding-top: calc(.6rem + env(safe-area-inset-top));
  background: var(--primary); color: var(--primary-ink);
}
.m-top img { width: 38px; height: 38px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; }
.m-school { font-weight: 700; line-height: 1.2; }
.m-term { font-size: .8rem; opacity: .85; }
.m-switch { margin-left: auto; color: var(--primary-ink); border: 1px solid rgba(255,255,255,.5); padding: .25rem .7rem; border-radius: 999px; font-size: .85rem; }
.m-main { max-width: 640px; margin: 0 auto; padding: 1rem; }
.m-h1 { font-size: 1.3rem; margin: .25rem 0 .75rem; }
.m-tabs { display: flex; margin-bottom: .75rem; }
.m-tabs a { flex: 1; text-align: center; }
.m-search { margin-bottom: .75rem; font-size: 1rem; }
.m-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.m-list li + li { border-top: 1px solid var(--border); }
.m-list a { display: flex; justify-content: space-between; gap: .5rem; padding: .8rem 1rem; color: var(--text); }
.m-list a:hover { text-decoration: none; background: var(--surface-2); }
.m-list small { color: var(--muted); }
.m-mine { display: block; margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--primary-soft); font-weight: 600; }
.m-days { display: flex; gap: .35rem; margin-bottom: 1rem; }
.m-days button {
  flex: 1; font: inherit; font-weight: 600; padding: .55rem 0; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
}
.m-days button.today { color: var(--primary); }
.m-days button.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.m-day h2 { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.m-periods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.m-periods li { display: flex; gap: .75rem; padding: .7rem .8rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.m-periods li.class { border-left: 4px solid var(--class-edge); }
.m-periods li.lock { border-left: 4px solid var(--lock-edge); background: var(--lock-bg); }
.m-periods li.free { background: transparent; border-style: dashed; padding-top: .4rem; padding-bottom: .4rem; }
.m-periods li.now { box-shadow: 0 0 0 2px var(--primary); }
.m-when { flex: none; width: 74px; display: flex; flex-direction: column; color: var(--muted); font-size: .8rem; }
.m-when b { font-size: 1.1rem; color: var(--text); }
.m-what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-what strong { font-size: 1.05rem; }
.m-sub { font-size: .9rem; }
.m-line { color: var(--muted); font-size: .9rem; }
.m-now { align-self: flex-start; margin-top: .3rem; font-size: .75rem; font-weight: 700; padding: .05rem .5rem; border-radius: 999px; background: var(--primary); color: var(--primary-ink); }
.m-count { margin-top: .75rem; font-size: .9rem; }
.m-foot { text-align: center; margin-top: 1.5rem; }

/* ค้นหารายวิชาข้างดรอปดาวน์ในฟอร์มคาบ */
.subject-pick { display: flex; gap: .5rem; }
.subject-pick select { flex: 1 1 55%; min-width: 0; }
.subject-search { flex: 1 1 45%; min-width: 0; position: relative; }
.subject-search input[type=search] { width: 100%; }
@media (max-width: 560px) { .subject-pick { flex-direction: column; } }

/* สรุปใต้ตารางครู (พิมพ์ตารางทุกคน) */
.tt-breakdown { margin-top: .6rem; font-size: .92rem; border-top: 1px solid var(--border); }
.tt-breakdown .bd-head, .tt-breakdown .bd-row { display: grid; grid-template-columns: minmax(150px, 22%) 1fr 4rem; gap: .5rem; padding: .25rem .4rem; align-items: baseline; }
.tt-breakdown .bd-head { font-weight: 600; }
.tt-breakdown .bd-mid { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }
.tt-breakdown .bd-head .bd-mid { display: block; text-align: center; }
.tt-breakdown .bd-total { text-align: right; font-weight: 600; }
.tt-breakdown .bd-cls { white-space: nowrap; }
.tt-breakdown .bd-others { border-top: 1px dotted var(--border); }
@media print {
  .tt-breakdown { font-size: 11px; break-inside: avoid; }
  .tt-breakdown .bd-head, .tt-breakdown .bd-row { padding: 1px 4px; }
}

/* รายการแนะนำรายวิชาที่ขึ้นขณะพิมพ์ */
.suggest { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); max-height: 260px; overflow-y: auto;
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.suggest[hidden] { display: none; }
.suggest-item { padding: .45rem .7rem; cursor: pointer; }
.suggest-item.on, .suggest-item:hover { background: var(--primary-soft); }
.suggest-item mark { background: #ffe58a; color: inherit; border-radius: 2px; padding: 0 1px; }
.suggest-empty { padding: .45rem .7rem; color: var(--muted); font-size: .85rem; }

/* ---------- หน้าค้นหา/ดาวน์โหลดตารางสาธารณะ (public.php) ---------- */
body.pub .pub-main { max-width: 1180px; margin: 0 auto; padding: 1rem; }
.pub-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.pub-card { padding: 1rem; }
.pub-note { white-space: pre-line; margin: .75rem 0 0; color: var(--muted); }
.pub-tabs { display: flex; gap: .35rem; margin-bottom: .75rem; flex-wrap: wrap; }
.pub-tabs button, .pub-chips button {
  font: inherit; cursor: pointer; padding: .4rem 1rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-weight: 500;
}
.pub-tabs button.on, .pub-chips button.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.pub-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .25rem 0 .6rem; }
.pub-chips button { padding: .2rem .8rem; font-size: .9rem; }
.pub-group { margin-bottom: 1.5rem; }
.pub-group h2 { margin-bottom: .5rem; }
.pub-group[hidden], .pub-list li[hidden] { display: none !important; }
.pub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pub-list li { display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pub-main-link { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .7rem .9rem; color: var(--text); }
.pub-main-link:hover { text-decoration: none; background: var(--surface-2); }
.pub-main-link small { color: var(--muted); }
.pub-dl { display: grid; place-items: center; padding: 0 .8rem; font-size: .85rem; border-left: 1px solid var(--border); color: var(--primary); }
.pub-dl:hover { background: var(--primary-soft); text-decoration: none; }
.pub-recent { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .75rem; font-size: .9rem; }
.pub-recent[hidden] { display: none; }
.pub-chip { padding: .15rem .7rem; border-radius: 999px; background: var(--primary-soft); font-weight: 600; }
.pub-empty { text-align: center; padding: 2rem 0; }
@media print {
  body.pub { background: #fff; }
  body.pub .pub-main { padding: 0; max-width: none; }
  .pub-card { border: 0; box-shadow: none; padding: 0; }
}