/* All diagrams face the teacher: source row 1 is drawn nearest the bottom podium. */
.seat-viewport {
  max-width:100%; min-width:0; max-height:min(64dvh,640px); overflow:auto;
  overscroll-behavior:contain; touch-action:none; cursor:grab;
  border:1px solid #cbd7e5; border-radius:12px; background:#f4f7fb;
  scrollbar-gutter:stable; -webkit-overflow-scrolling:touch;
}
.seat-viewport:focus-visible { outline:3px solid #437cd2; outline-offset:3px; }
.seat-viewport.is-panning,.seat-viewport.is-panning * { cursor:grabbing!important; user-select:none!important; }
.seat-canvas {
  display:flex; flex-direction:column; gap:16px;
  width:max-content; min-width:100%; box-sizing:border-box; padding:14px;
  margin:0;
}
.seat-canvas.room-diagram {
  display:grid; grid-template-areas:"seats" "podium";
  grid-template-columns:minmax(0,1fr); gap:16px;
}
.seat-canvas>.diagram-seats { min-width:0; width:100%; }
.seat-podium {
  display:flex; align-items:center; justify-content:center; align-self:center; flex-shrink:0; width:min(100%,440px); min-width:120px; height:32px;
  margin:0; justify-self:center; border-radius:6px 6px 2px 2px;
  background:linear-gradient(120deg,#d7e3f0,#f0f4f8); border:1px solid #9ab1c9;
  color:#314e6b; font-weight:650; letter-spacing:.2em; writing-mode:horizontal-tb;
}
.hall-diagram .seat-podium { width:100%; }
.room-diagram.mini.podium-bottom { grid-template-areas:"seats" "podium"; }
.room-diagram.mini>.seat-podium { min-width:0; margin:0; }
.seat-pan-hint { margin:6px 0 0; color:#75869a; font-size:12px; }
.seat-viewport .live-seat-grid.detail,
.seat-viewport .seat-map,
.seat-viewport .hall-schematic-grid { min-width:0; margin:0; gap:7px; }
.seat-viewport .live-seat-grid.detail { grid-template-columns:repeat(var(--live-columns),minmax(88px,1fr)); }
#live-room-detail .seat-viewport .detail-seat {
  min-width:0; min-height:74px; padding:7px 6px; border-radius:7px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px;
}
#live-room-detail .seat-viewport .detail-seat .seat-code { font-size:10px; line-height:1.2; }
#live-room-detail .seat-viewport .detail-seat strong { font-size:12px; line-height:1.25; }
#live-room-detail .seat-viewport .detail-seat .live-student-name { font-size:12px; line-height:1.3; }
#live-room-detail .seat-viewport .detail-seat .live-cell-status { font-size:10px; line-height:1.2; }
#live-room-detail .live-detail-plan { padding:0; background:none; }
#live-room-detail .live-stat-panel { margin-bottom:10px; }
#live-room-detail .live-panel-heading { margin-bottom:8px; }
#live-room-detail .live-detail-summary .live-stat-item { padding:9px 12px; }
#live-room-detail .live-detail-summary .live-stat-number strong { font-size:25px; }
#live-room-detail .live-session-label { margin-bottom:10px; padding:12px 14px; }
#live-room-detail .live-session-label p { margin:4px 0 0; }
#live-room-detail .live-key-panel { margin:8px 0; }
#live-room-detail .live-view-toolbar { padding:8px 0; }
.live-range-controls.grid-search { display:block; margin:0 0 8px; }
.live-range-controls.grid-search .field { max-width:420px; }
.seat-search-muted { opacity:.22; }
.seat-search-hit { outline:3px solid #ca7c22; outline-offset:1px; }
.seat-map { grid-template-columns:repeat(var(--seat-columns),minmax(88px,1fr)); }
.seat-map .seat-map-cell { min-height:56px; padding:7px; font-size:12px; }
.seat-canvas .hall-schematic-grid { grid-template-columns:repeat(var(--hall-columns),minmax(94px,1fr)); }
.seat-canvas .hall-seat { min-width:0; min-height:62px; padding:7px; gap:3px; }
.seat-canvas .hall-seat strong,.seat-canvas .hall-student-name { font-size:12px; }
.seat-canvas .hall-seat>span:first-child { font-size:10px; }
.hall-plan-controls .hall-view-switch { display:flex; gap:6px; align-items:end; }
.hall-plan-controls .hall-view-switch button { min-height:42px; }
.hall-plan-controls .hall-view-switch button.active { color:#fff; background:#264b78; border-color:#264b78; }
.allocation-room>.seat-viewport { margin-top:12px; }
@media (max-width:600px) {
  .seat-viewport { max-height:58dvh; border-radius:9px; }
  .seat-canvas.room-diagram { padding:10px; gap:12px; }
  #live-room-detail .seat-viewport { max-height:56dvh; }
  #live-room-detail .live-session-label { padding:10px; }
  #live-room-detail .live-session-label strong { font-size:15px; }
  #live-room-detail .live-detail-summary { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
  #live-room-detail .live-detail-summary .live-stat-item { padding:7px 4px; min-width:0; }
  #live-room-detail .live-detail-summary .live-stat-item>span { font-size:10px; line-height:1.4; }
  #live-room-detail .live-detail-summary .live-stat-number strong { font-size:20px; }
  #live-room-detail .live-detail-summary .live-stat-number em { display:none; }
  .hall-plan-controls { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
}
@media print {
  .seat-viewport { overflow:visible!important; max-height:none!important; border:0; border-radius:0; }
  .seat-canvas.room-diagram { width:100%; min-width:0; padding:0; }
  .seat-pan-hint { display:none; }
  .seat-search-muted { opacity:1; }
  .seat-search-hit { outline:0; }
  .seat-viewport .seat-map { grid-template-columns:repeat(var(--seat-columns),minmax(0,1fr)); }
  .seat-viewport .seat-map-cell { min-height:9mm; padding:1.3mm; }
  .seat-podium.podium-marker { height:6mm; font-size:9pt; }
}
/* Fit mode keeps ordinary room columns visible on narrow screens; enlargement pans the same full map. */
.seat-map-tools { display:flex; align-items:center; gap:5px; margin:7px 0; }
.seat-map-tools button { border:1px solid #cbd7e5; background:#fff; border-radius:6px; padding:7px 13px; color:#37516f; font:inherit; font-size:12px; cursor:pointer; }
.seat-map-tools button.active { background:#254b79; border-color:#254b79; color:white; }
.seat-map-tools>span { font-size:11px; color:#75869a; margin-left:auto; }
.seat-viewport[data-seat-zoom="fit"] .seat-canvas.room-diagram { width:100%; min-width:0; }
.seat-viewport[data-seat-zoom="fit"] .live-seat-grid.detail { grid-template-columns:repeat(var(--live-columns),minmax(0,1fr)); }
.seat-viewport[data-seat-zoom="fit"] .seat-map { grid-template-columns:repeat(var(--seat-columns),minmax(0,1fr)); }
.seat-viewport[data-seat-zoom="fit"] .hall-schematic-grid { grid-template-columns:repeat(var(--hall-columns),minmax(0,1fr)); }
.seat-viewport[data-seat-zoom="fit"] .seat-map-cell,
.seat-viewport[data-seat-zoom="fit"] .hall-seat { min-width:0; overflow-wrap:anywhere; }
@media(max-width:600px) {
  .seat-map-tools>span { font-size:10px; max-width:150px; text-align:right; }
  .seat-viewport[data-seat-zoom="fit"] { --seat-row-min:53px; scrollbar-gutter:auto; }
  .seat-viewport[data-seat-zoom="fit"] .seat-canvas.room-diagram { padding:6px; gap:9px; }
  .seat-viewport[data-seat-zoom="fit"] .live-seat-grid.detail,
  .seat-viewport[data-seat-zoom="fit"] .seat-map,
  .seat-viewport[data-seat-zoom="fit"] .hall-schematic-grid { gap:3px; }
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .detail-seat { min-height:53px; padding:4px 2px; gap:2px; align-items:center; text-align:center; overflow:hidden; }
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .detail-seat strong,
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .detail-seat .live-student-name { font-size:10px; line-height:1.15; overflow-wrap:anywhere; }
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .detail-seat .live-cell-status { font-size:8px; line-height:1.1; letter-spacing:-.03em; }
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .detail-seat .seat-code { font-size:8px; }
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .detail-seat .live-alert-reason { font-size:8px; }
  .seat-viewport[data-seat-zoom="fit"] .seat-map-cell,
  .seat-viewport[data-seat-zoom="fit"] .hall-seat { min-height:53px; padding:4px 2px; font-size:10px; }
  .seat-viewport[data-seat-zoom="fit"] .hall-seat strong,
  .seat-viewport[data-seat-zoom="fit"] .hall-seat .hall-student-name { font-size:9px; }
  .seat-viewport[data-seat-zoom="fit"] .hall-diagram .detail-seat strong,
  .seat-viewport[data-seat-zoom="fit"] .hall-diagram .detail-seat .live-student-name { font-size:9px!important; }
}
@media print { .seat-map-tools { display:none; } }
/* Override the older live detail ID rules as well as the general grid defaults. */
#live-room-detail .seat-viewport .live-seat-grid.detail { grid-template-columns:repeat(var(--live-columns),minmax(88px,1fr)); min-width:0; margin:0; padding:0; gap:7px; }
#live-room-detail .seat-viewport[data-seat-zoom="fit"] .live-seat-grid.detail { grid-template-columns:repeat(var(--live-columns),minmax(0,1fr)); }
@media(max-width:600px) {
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .live-seat-grid.detail { gap:3px; }
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .detail-seat .live-cell-status { gap:2px; }
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .detail-seat .live-cell-status::before { width:5px; height:5px; flex-basis:5px; }
}
/* Keep fit-mode rows compact; the enlarged view exposes full identity text. */
@media(max-width:600px) {
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .detail-seat { height:57px; min-height:57px; }
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .detail-seat strong { font-size:8px; white-space:nowrap; }
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .detail-seat .live-student-name { width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .detail-seat .live-cell-status { display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .detail-seat .live-cell-status::before { display:none; }
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .hall-diagram .live-seat-grid.detail { --seat-row-min:28px; }
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .hall-diagram .detail-seat { height:28px; min-height:28px; padding:2px 1px; gap:1px; }
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .hall-diagram .detail-seat strong,
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .hall-diagram .detail-seat .live-student-name,
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .hall-diagram .detail-seat .live-alert-reason { display:none; }
  #live-room-detail .seat-viewport[data-seat-zoom="fit"] .hall-diagram .detail-seat .live-cell-status { font-size:6px; }
}