/* ============================================================================
   Barmaso — Retail › Staff In / Out, and Admin › Staff In / Out Log
   ----------------------------------------------------------------------------
   A phone at a shop's door: two big choices (Out / In), who, the photo, why,
   one Confirm. Below, who is out now and today's record. The CCTV page is the
   same rows for every shop, with the photo a tap away.
   ============================================================================ */

.sio { gap: 16px; max-width: 760px; }
.sio-all { max-width: 980px; }

.sio-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--pt-line);
  border-radius: 14px;
  background: var(--surface, #fff);
  min-width: 0;
}
.sio-card-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--pt-ink); }
.sio-muted { color: var(--pt-muted); font-size: 13px; }
.sio-empty { margin: 0; color: var(--pt-muted); font-size: 14px; }

/* --- Out / In ---------------------------------------------------------------- */
.sio-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sio-mode-btn {
  min-height: 52px;
  border: 2px solid var(--pt-line);
  border-radius: 12px;
  background: var(--surface, #fff);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--pt-ink);
  cursor: pointer;
}
.sio-mode-btn.is-out.is-active { border-color: #d97706; background: #fffbeb; color: #92400e; }
.sio-mode-btn.is-in.is-active { border-color: var(--pt-green-600); background: var(--pt-green-50); color: var(--pt-green-700); }

.sio-field { display: grid; gap: 6px; margin: 0; min-width: 0; }
.sio-reason { resize: vertical; min-height: 56px; }
.sio-time-note { margin: 0; font-size: 13px; color: var(--pt-muted); }
.sio-confirm { min-height: 50px; font-size: 16px; width: 100%; }

/* --- the camera ---------------------------------------------------------------- */
.sio-camera { display: grid; gap: 10px; justify-items: start; }
.sio-camera-note { margin: 0; font-size: 13px; color: var(--pt-muted); }
.sio-camera-note.is-bad { color: #991b1b; }
.sio-camera-open { min-height: 46px; }
.sio-frame { width: 100%; max-width: 360px; border-radius: 12px; overflow: hidden; background: #0f172a; }
.sio-video { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: cover; }
.sio-camera-actions { display: flex; gap: 8px; width: 100%; max-width: 360px; }
.sio-snap { flex: 1; min-height: 48px; }
.sio-shot { display: block; width: 100%; max-width: 240px; border-radius: 12px; border: 1px solid var(--pt-line); }

/* --- who is out now ---------------------------------------------------------- */
.sio-out-list, .sio-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sio-out {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.sio-out-who { min-width: 0; overflow-wrap: anywhere; }
.sio-since { font-size: 13px; font-weight: 700; color: #92400e; white-space: nowrap; }
.sio-out > .btn { grid-column: 1 / -1; justify-self: start; }

/* --- the record ----------------------------------------------------------------- */
.sio-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--pt-line-soft, #eef2f7);
}
.sio-row:first-child { border-top: 0; }
.sio-row-time { font-family: var(--font-mono, monospace); font-size: 14px; font-weight: 700; color: var(--pt-ink); padding-top: 2px; }
.sio-row-main { min-width: 0; overflow-wrap: anywhere; display: grid; gap: 2px; }
.sio-row-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.sio-row-actions:empty { display: none; }
.sio-row-shop {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--pt-green-50);
  color: var(--pt-green-700);
  font-size: 12px;
  font-weight: 600;
}
.sio-badge { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sio-badge.is-out { background: #fef3c7; color: #92400e; }
.sio-badge.is-in { background: var(--pt-green-50); color: var(--pt-green-700); }
.sio-row.is-cancelled .sio-row-main strong, .sio-row.is-cancelled .sio-row-time { text-decoration: line-through; color: var(--pt-muted); }
.sio-cancelled { font-size: 12px; font-weight: 700; color: #991b1b; }

/* --- the CCTV page -------------------------------------------------------------- */
.sio-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.sio-tools .field { display: grid; gap: 6px; margin: 0; min-width: 150px; }
.sio-refresh { min-height: 42px; }
.sio-counts { margin: 0; font-weight: 700; color: var(--pt-ink); }
.sio-updated { margin: -8px 0 0; }
.sio-photo-box { display: grid; place-items: center; min-height: 160px; }
.sio-photo { display: block; max-width: 100%; max-height: 70vh; border-radius: 12px; }

@media (min-width: 720px) {
  .sio-out { grid-template-columns: minmax(0, 1fr) auto auto; }
  .sio-out > .btn { grid-column: auto; }
  .sio-row { grid-template-columns: 56px 72px minmax(0, 1fr) auto; align-items: center; }
  .sio-row-actions { grid-column: auto; justify-content: flex-end; }
}

/* --- History ------------------------------------------------------------------- */
.sio-hist-results { display: grid; gap: 12px; }
.sio-day-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.sio-day-head .sio-muted { font-weight: 600; }
.sio-not-back { font-size: 12px; font-weight: 700; color: #b45309; }
.sio-mode-btn { display: grid; gap: 2px; place-content: center; padding: 6px 8px; }
.sio-mode-main { font-size: 16px; font-weight: 700; }
.sio-mode-sub { font-size: 13px; font-weight: 600; opacity: .85; }

/* Several staff in one Check Out / In (2026-11-01): a tick each. */
.sio-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.sio-pick-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; background: #fff; cursor: pointer; font-size: 15px; }
.sio-pick-row.is-on { border-color: var(--pt-green-600, #059669); background: var(--pt-green-50, #ecfdf5); font-weight: 600; }
.sio-pick-row input { width: 20px; height: 20px; flex: none; }
.sio-picked { color: var(--pt-green-700, #047857); font-weight: 700; }

/* What is missing, beside Confirm; the list to tick, marked (2026-11-02) */
.sio-form-note:empty { display: none; }
.sio-form-note.is-bad { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--danger-soft, #fbe4e2); color: var(--danger, #b9322b); font-weight: 700; }
.sio-picks.is-need { outline: 2px solid var(--danger, #b9322b); outline-offset: 4px; border-radius: 10px; }