* { box-sizing: border-box; }
/* !important: some elements (e.g. printTagLink) also carry an inline
   display style for when they ARE shown -- inline styles otherwise
   beat a plain class every time, which would leave "hidden" a no-op
   on exactly those elements. */
.hidden { display: none !important; }
body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #101418;
  color: #f2f2f2;
}

/* ---------------- Board (TV) ---------------- */
.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  background: #1a1f26;
  border-bottom: 2px solid #333;
}
.board-header h1 { margin: 0; font-size: 28px; letter-spacing: 1px; }
#clock { font-size: 22px; color: #aab; }

.board-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 16px 0;
}
.board-tab-btn {
  padding: 10px 18px; font-size: 15px;
  background: #1a1f26; color: #ccc; border: 1px solid #333; border-radius: 8px;
}
.board-tab-btn.active { background: #2a5d8a; color: #fff; border-color: #2a5d8a; }

.export-btn {
  padding: 10px 18px; font-size: 14px;
  background: #263447; color: #cdd; border: 1px solid #345; border-radius: 8px;
}
.export-btn.active { background: #2a5d8a; color: #fff; border-color: #2a5d8a; }

.move-status {
  margin: 0 16px 12px; padding: 12px 16px; border-radius: 8px;
  background: rgba(42,93,138,.15); border: 1px solid rgba(42,93,138,.4);
  color: #cfe0ee; font-size: 15px; text-align: center;
}
.move-status.err { background: rgba(255,157,157,.12); border-color: rgba(255,157,157,.35); color: #ff9d9d; }
.move-status.hidden { display: none; }

.slot-cell.move-selected {
  outline: 3px solid #f0b74f; outline-offset: -3px;
}

.board-search-row { display: flex; gap: 8px; padding: 0 16px 12px; }
.board-search-input {
  flex: 1; padding: 10px 14px; font-size: 15px; border-radius: 8px;
  border: 1px solid #333; background: #0d1116; color: #fff;
}

.slot-cell.search-highlight {
  outline: 3px solid #5fd88a; outline-offset: -3px;
  animation: search-pulse 1s ease-in-out 3;
}
@keyframes search-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95,216,138,.6); }
  50% { box-shadow: 0 0 0 8px rgba(95,216,138,0); }
}

.grid {
  padding: 16px;
}
.cooler-section {
  margin-bottom: 28px;
}
.cooler-title {
  font-size: 20px;
  font-weight: bold;
  color: #dfe3ea;
  border-bottom: 2px solid #2a5d8a;
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}
.shelf-card {
  background: #1a1f26;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 6px;
}
.shelf-title {
  font-size: 13px;
  text-align: center;
  color: #9aa;
  margin-bottom: 4px;
  font-weight: bold;
}
.slot-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.slot-mini-grid.single {
  grid-template-columns: 1fr;
}
.slot-cell {
  border-radius: 4px;
  padding: 8px 4px;
  text-align: center;
  font-size: 11px;
  cursor: pointer;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.slot-empty { background: #1f3d2b; color: #7fd99a; }
.slot-occupied { background: #4a1d1d; color: #ff9d9d; }
.slot-cell .code { font-weight: bold; }
.slot-cell .name { font-size: 11.5px; font-weight: bold; opacity: 0.95; }
.slot-cell .home { font-size: 10px; opacity: 0.85; }
.slot-cell .date { font-size: 9.5px; opacity: 0.7; }

.detail-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
}
.detail-overlay.hidden { display: none; }
.detail-card {
  background: #1a1f26;
  border: 2px solid #444;
  border-radius: 10px;
  min-width: 320px;
  max-width: min(92vw, 480px);
  max-height: 88vh;
  position: relative;
  font-size: 18px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}
/* Scrolls independently of .close-btn, which stays pinned in the corner
   so it's still reachable after scrolling down through long content. */
.detail-card-body {
  padding: 24px 32px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: none;
}
.close-btn {
  position: absolute; top: 8px; right: 12px; z-index: 1;
  background: none; border: none; color: #f2f2f2; font-size: 24px; cursor: pointer;
}
.detail-card label { display: block; margin-top: 10px; font-size: 13px; color: #aab; }
.detail-card input, .detail-card select {
  width: 100%; font-size: 16px; padding: 8px; margin-top: 4px;
  border-radius: 6px; border: 1px solid #333; background: #0d1116; color: #fff;
}
.detail-card .occupant-block {
  border-top: 1px solid #333; padding-top: 10px; margin-top: 10px;
}
.case-qr-row {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.case-line { margin: 0; text-align: center; }
p.case-line + p.case-line { margin-top: 6px; }
.case-qr-thumb {
  width: 140px; height: 140px; max-width: 100%;
  background: #fff; padding: 8px; border-radius: 8px; flex-shrink: 0;
}
.detail-card .save-occupant-btn {
  margin-top: 10px; padding: 10px; font-size: 14px; width: 100%;
  background: #2a5d8a; color: #fff; border: none; border-radius: 6px;
}
.detail-card .save-status { font-size: 13px; margin-top: 6px; min-height: 16px; }
.detail-card .save-status.ok { color: #7fd99a; }
.detail-card .save-status.err { color: #ff9d9d; }

.detail-card .move-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.detail-card .move-here-btn, .detail-card .move-staging-btn {
  padding: 10px; font-size: 14px; width: 100%; border: none; border-radius: 6px; color: #fff;
}
.detail-card .move-here-btn { background: #333; }
.detail-card .move-staging-btn { background: #5c2a2a; }

.detail-card .cremate-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.detail-card .cremate-btn {
  padding: 10px; font-size: 14px; width: 100%; border: none; border-radius: 6px; color: #fff; background: #5c2a2a;
}
.detail-card .cremate-form-inline { margin-top: 10px; }
.detail-card .cremate-form-inline.hidden { display: none; }
.detail-card .cremate-form-inline .primary-btn { margin-top: 12px; }
.detail-card .cremate-form-inline .secondary-btn { margin-top: 8px; }

.detail-card .release-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.detail-card .release-btn, .detail-card .checkout-btn, .detail-card .inventory-link-btn {
  padding: 10px; font-size: 14px; width: 100%; border: none; border-radius: 6px; color: #fff;
  box-sizing: border-box; display: block; text-align: center; text-decoration: none;
}
.detail-card .release-btn { background: #5c2a2a; }
.detail-card .checkout-btn { background: #3a4a5c; }
.detail-card .inventory-link-btn { background: #2a5d8a; }
.detail-card .sig-canvas {
  width: 100%; height: 120px; background: #fff; border-radius: 6px;
  touch-action: none; margin-top: 4px; display: block;
}
.detail-card .release-form-inline, .detail-card .checkout-form-inline { margin-top: 10px; }
.detail-card .release-form-inline.hidden, .detail-card .checkout-form-inline.hidden { display: none; }
.detail-card .release-form-inline .primary-btn,
.detail-card .checkout-form-inline .primary-btn { margin-top: 12px; }
.detail-card .release-form-inline .secondary-btn,
.detail-card .checkout-form-inline .secondary-btn { margin-top: 8px; }

.checked-out-panel { margin: 0 16px 16px; background: #1a1f26; border: 1px solid #333; border-radius: 8px; padding: 12px 16px; }
.checked-out-panel.hidden { display: none; }
.checked-out-title { font-weight: bold; color: #f0b74f; margin-bottom: 8px; }
.checked-out-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #263042; }
.checked-out-row:last-child { border-bottom: none; }
.checked-out-info { font-size: 14px; }
.checked-out-meta { font-size: 12.5px; color: #9aa; }
.checked-out-row .checkin-btn {
  padding: 8px 14px; font-size: 13px; background: #2a5d8a; color: #fff;
  border: none; border-radius: 6px; white-space: nowrap;
}

.board-confirm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center; z-index: 30;
}
.board-confirm-overlay.hidden { display: none; }
.board-confirm-card {
  background: #1a1f26; border: 2px solid #444; border-radius: 10px;
  padding: 24px 32px; max-width: min(92vw, 380px); max-height: 88vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: none;
  text-align: center; font-size: 16px; line-height: 1.5;
}

.detail-card .history-flag-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 8px 0; border-bottom: 1px solid #263042; font-size: 14px;
}
.detail-card .history-flag-row:last-child { border-bottom: none; }
.detail-card .history-flag-btns { display: flex; gap: 6px; }
.detail-card .flag-toggle-btn {
  padding: 6px 14px; font-size: 13px; border: 1px solid #333; border-radius: 6px;
  background: #0d1116; color: #ccc;
}
.detail-card .flag-toggle-btn.active-yes { background: #1f3d2b; border-color: #2f6a45; color: #7fd99a; }
.detail-card .flag-toggle-btn.active-no { background: #4a1d1d; border-color: #7a3030; color: #ff9d9d; }

/* ---------------- Scan (tablet) ---------------- */
.scan-body { padding: 16px; max-width: 520px; margin: 0 auto; }
.scan-header h1 { font-size: 22px; text-align: center; }

.staff-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding: 10px 12px; background: #1a1f26; border-radius: 8px; border: 1px solid #333;
}
.staff-row label { font-size: 13px; color: #aab; white-space: nowrap; }
.staff-row select {
  flex: 1; font-size: 15px; padding: 8px; border-radius: 6px;
  border: 1px solid #333; background: #0d1116; color: #fff;
}
.staff-row.unset { border-color: rgba(240,183,79,.5); }

.info-form.attention { border: 1px solid rgba(240,183,79,.5); }

.mode-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mode-btn {
  flex: 1 1 30%; padding: 12px 4px; font-size: 13.5px;
  background: #1a1f26; color: #ccc; border: 1px solid #333; border-radius: 8px;
}
.mode-btn.active { background: #2a5d8a; color: #fff; border-color: #2a5d8a; }

.home-screen { margin-bottom: 16px; }
.home-scan-btn {
  width: 100%; padding: 24px; font-size: 20px; font-weight: 700;
  background: #2a5d8a; color: #fff; border: none; border-radius: 12px; margin-bottom: 14px;
}
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-mode-btn {
  padding: 18px 8px; font-size: 15px;
  background: #1a1f26; color: #ccc; border: 1px solid #333; border-radius: 10px;
}
.smart-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.smart-actions button, .smart-actions a {
  padding: 12px; font-size: 15px; width: 100%; border: none; border-radius: 8px;
  color: #fff; background: #333; text-decoration: none; display: block; text-align: center; box-sizing: border-box;
}

.scan-panel { background: #1a1f26; border-radius: 10px; padding: 20px; text-align: center; }
.step-label { font-size: 18px; margin-bottom: 12px; color: #aab; }
.scan-input {
  width: 100%; font-size: 22px; padding: 16px; text-align: center;
  border-radius: 8px; border: 2px solid #2a5d8a; background: #0d1116; color: #fff;
}
.status-msg { margin-top: 14px; font-size: 16px; min-height: 24px; }
.status-msg.ok { color: #7fd99a; }
.status-msg.err { color: #ff9d9d; }

.camera-btn {
  width: 100%; margin-top: 12px; padding: 18px; font-size: 19px; font-weight: 600;
  background: #263447; color: #cdd; border: 1px solid #345; border-radius: 8px;
}
.camera-panel { margin-top: 14px; }
.camera-panel.hidden { display: none; }
.camera-panel video {
  width: 100%; border-radius: 8px; border: 2px solid #2a5d8a; background: #000;
}
.camera-panel .secondary-btn { margin-top: 10px; }
.camera-panel video.tap-to-capture { cursor: pointer; }
.camera-tap-hint { text-align: center; color: #aab; font-size: 13px; margin: 8px 0 0; }

/* QR-scan camera preview: a smaller square viewfinder instead of the full
   rectangle, since only a centered square area is needed to frame a code.
   Inventory/document photo capture keep the full-width rectangle above. */
#cameraVideo, #boardCameraVideo {
  width: min(100%, 320px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 auto;
  display: block;
}

.pending-badge {
  background: rgba(240,183,79,.12); border: 1px solid rgba(240,183,79,.35);
  color: #f0b74f; border-radius: 8px; padding: 10px 14px; font-size: 14px;
  margin-bottom: 14px; text-align: center;
}
.pending-badge.hidden { display: none; }
.pending-badge.synced { background: rgba(95,216,138,.12); border-color: rgba(95,216,138,.35); color: #5fd88a; }

.info-form { background: #1a1f26; border-radius: 10px; padding: 20px; margin-top: 16px; }
.info-form.hidden { display: none; }
.info-form label { display: block; margin-top: 10px; font-size: 14px; color: #aab; }
.info-form input, .info-form select {
  width: 100%; font-size: 18px; padding: 10px; margin-top: 4px;
  border-radius: 6px; border: 1px solid #333; background: #0d1116; color: #fff;
}
/* The browser's built-in date/time picker icons default to a dark glyph
   that barely shows up against this dark input background -- inverting
   turns it white so it actually stands out. (A background badge behind
   it would defeat the point -- a white icon needs to sit on the dark
   input, not on its own light patch -- so this is just the icon itself,
   enlarged and with a bigger tap target.) */
.info-form input[type="date"]::-webkit-calendar-picker-indicator,
.info-form input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
  padding: 4px;
  transform: scale(1.4);
  transform-origin: right center;
}
.primary-btn {
  margin-top: 16px; width: 100%; padding: 14px; font-size: 17px;
  background: #2a5d8a; color: #fff; border: none; border-radius: 8px;
}
.secondary-btn {
  width: 100%; padding: 12px; font-size: 15px;
  background: #333; color: #ccc; border: none; border-radius: 8px;
}

/* Immediate "I registered your tap" feedback on every button-like
   element app-wide (scan station, board, admin) -- darkens the instant
   a finger presses down, back to normal on release. Darken rather than
   red, since red already means something specific elsewhere (Release,
   Cremate danger actions) and using it here would blur that signal.
   touch-action:manipulation drops the ~300ms tap delay some mobile
   browsers add, so this feels instant rather than laggy. */
button, .primary-btn, .secondary-btn, .home-mode-btn, .home-scan-btn, .camera-btn {
  touch-action: manipulation;
}
button:active, .primary-btn:active, .secondary-btn:active,
.home-mode-btn:active, .home-scan-btn:active, .camera-btn:active {
  filter: brightness(0.72);
}
/* The "working, please wait" state a busy action switches to (see
   withBusy() in scan.js/board.js/admin.js) -- greyed out and inert
   instead of the press-darken above, so mid-request looks clearly
   different from "ready to tap again". */
button:disabled, .primary-btn:disabled, .secondary-btn:disabled,
.home-mode-btn:disabled, .home-scan-btn:disabled, .camera-btn:disabled {
  opacity: 0.55; cursor: not-allowed; filter: none;
}
.reset-row { margin-top: 20px; }

.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid #263042; font-size: 14px;
}
.history-row:last-child { border-bottom: none; }
.history-when { color: #889; white-space: nowrap; }
.history-desc { text-align: right; color: #ddd; }

.inventory-list { display: flex; flex-direction: column; gap: 10px; }
.inventory-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid #263042;
}
.inventory-row:last-child { border-bottom: none; }
.inventory-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: 6px;
  background: #0d1116; flex-shrink: 0; cursor: pointer;
}
.inventory-info { flex: 1; font-size: 14px; text-align: left; }
.inventory-delete-btn {
  padding: 6px 12px; font-size: 13px; background: #4a1d1d; color: #ff9d9d;
  border: none; border-radius: 6px; flex-shrink: 0;
}
.inventory-photo-preview {
  width: 100%; max-height: 200px; object-fit: contain; border-radius: 8px;
  margin-top: 8px; background: #0d1116;
}

.inventory-pending-list {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
}
.inventory-pending-list.hidden { display: none; }
.inventory-pending-item { position: relative; width: 72px; text-align: center; }
.inventory-pending-item img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 6px;
  background: #0d1116; display: block;
}
.inventory-pending-item .pending-time { font-size: 10px; color: #aab; margin-top: 2px; }
.inventory-pending-item .pending-remove-btn {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 50%; background: #5c2a2a; color: #fff; border: none;
  font-size: 13px; line-height: 1; padding: 0;
}