/* frontend/css/modules/visitors.css
   ══════════════════════════════════════════════════════════════════
   Visitors module — front-desk check-in, evacuation view, admin.
   Shell classes (.v-shell/.v-sidebar/.topbar/.bnav/.sheet) come from
   the app's inline stylesheet; this file styles only visitors-specific
   pieces (.vis-* prefix). Palette via the app's CSS variables.
   ══════════════════════════════════════════════════════════════════ */

/* ── Board polish (owner 2026-09-17) ─────────────────────────────── */
/* Cap content width — full-bleed rows on a wide desktop read as empty */
.vis-tab-panel { max-width: 1040px; margin: 0 auto; width: 100%; }

/* Tally tiles (mailroom pattern) */
.vis-tiles {
  display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap;
  padding: 1rem 1rem 0;
}
.vis-tile {
  flex: 1; min-width: 110px;
  background: var(--navy-card, var(--navy-input));
  border: 1px solid var(--gold-border);
  border-radius: 12px; padding: 10px 14px;
}
.vis-tile-label {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted);
}
.vis-tile-value {
  font-size: 1.5rem; font-weight: 700; color: var(--cream);
  font-variant-numeric: tabular-nums;
}

/* Board sections as cards; rows flatten to divided list items inside.
   Double class beats .vis-section's own padding without !important */
.vis-section.vis-board-card {
  background: var(--navy-card, var(--navy-input));
  border: 1px solid var(--gold-border);
  border-radius: 12px; padding: 12px 14px; margin: 0.7rem 1rem 0;
}
.vis-board-card .vis-row {
  background: transparent; border: none; border-radius: 0;
  border-bottom: 1px solid var(--gold-border);
  margin-bottom: 0; padding: 9px 2px;
}
.vis-board-card .vis-row:last-child { border-bottom: none; }

/* ── Toolbar ─────────────────────────────────────────────────────── */
.vis-toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 1rem 1rem 0.4rem;
}
.vis-evac-btn { color: var(--red, #e66); border-color: rgba(230, 100, 100, 0.4); }
.vis-evac-nav svg { color: var(--red, #e66); }

/* ── Sections + rows ─────────────────────────────────────────────── */
.vis-section { padding: 0.6rem 1rem 0.2rem; }
.vis-section-title {
  font-size: 0.62rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.vis-count-chip {
  background: var(--gold); color: var(--navy); border-radius: 999px;
  font-size: 0.62rem; font-weight: 700; padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.vis-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--navy-card, var(--navy-input));
  border: 1px solid var(--gold-border);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 5px;
}
.vis-row-muted { opacity: 0.65; }
.vis-row-main { flex: 1; min-width: 0; }
.vis-row-name {
  font-size: 0.8rem; color: var(--cream); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vis-row-org { color: var(--muted); font-weight: 400; }
.vis-row-sub {
  font-size: 0.68rem; color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vis-badge-warn { color: var(--red, #e66); }
.vis-empty { font-size: 0.72rem; color: var(--muted); padding: 6px 2px; }

/* Desktop: visitors sheets read as centered panels, not full-bleed
   bottom sheets (2026-09-17 — host editor fields sprawled at 1900px).
   ID selectors outrank the global .sheet transform pair. */
@media (min-width: 900px) {
  #vis-checkin-sheet, #vis-host-sheet, #vis-event-sheet {
    left: 50%; right: auto; width: 640px; max-width: 92vw;
    transform: translate(-50%, 100%);
    border: 1.5px solid var(--gold-border); border-bottom: none;
    border-radius: 18px 18px 0 0;
  }
  #vis-checkin-sheet.open, #vis-host-sheet.open, #vis-event-sheet.open {
    transform: translate(-50%, 0);
  }
}
/* With the 220px sidebar showing (≥1024px), the content column's
   center sits half-a-sidebar right of the viewport's — center the
   sheets on the CONTENT, not the screen (owner 2026-09-17) */
@media (min-width: 1024px) {
  #vis-checkin-sheet, #vis-host-sheet, #vis-event-sheet { left: calc(50% + 110px); }
}

/* ── Check-in sheet ──────────────────────────────────────────────── */
.vis-field { margin-bottom: 0.7rem; }
.vis-field label {
  display: block; font-size: 0.62rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px;
}
.vis-field input, .vis-field select {
  width: 100%;
  background: var(--navy-input); border: 1px solid var(--gold-border);
  border-radius: 8px; padding: 9px 12px;
  font-size: 16px; /* iOS zoom floor — app-wide rule */
  color: var(--cream); font-family: inherit;
}
.vis-opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.vis-req { color: var(--gold); text-transform: none; letter-spacing: 0; }

.vis-type-chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* Admin sub-tab bar (mailroom admin pattern) — card-aligned */
.vis-adm-subtabs { margin: 0.8rem 1rem 0; max-width: 720px; }
@media (max-width: 640px) {
  /* one row on phones — chips compact enough that all five fit
     (mailroom subtab treatment); scroll is the tiny-screen safety net */
  .vis-adm-subtabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px; gap: 5px;
  }
  .vis-adm-subtabs::-webkit-scrollbar { display: none; }
  .vis-adm-subtabs .vis-type-chip { flex: 0 0 auto; padding: 7px 9px; font-size: 0.68rem; }
}
.vis-type-chip {
  background: var(--navy-input); border: 1px solid var(--gold-border);
  color: var(--cream); border-radius: 999px; padding: 8px 14px;
  font-size: 0.74rem; font-family: inherit; cursor: pointer;
  min-height: 40px;
}
.vis-type-chip.active { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight: 700; }

.vis-ta-wrap { position: relative; }
.vis-ta-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  background: var(--navy-card, var(--navy-input));
  border: 1px solid var(--gold); border-radius: 0 0 10px 10px;
  max-height: 220px; overflow-y: auto;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.vis-ta-item {
  padding: 9px 12px; font-size: 0.78rem; color: var(--cream); cursor: pointer;
  display: flex; flex-direction: column; gap: 1px;
  border-bottom: 1px solid var(--gold-border);
}
.vis-ta-item:last-child { border-bottom: none; }
.vis-ta-item:hover, .vis-ta-item.focused { background: var(--navy-input); }
.vis-ta-sub { font-size: 0.64rem; color: var(--muted); }
.vis-ta-empty { padding: 9px 12px; font-size: 0.7rem; color: var(--muted); }

.vis-returning, .vis-selected {
  font-size: 0.68rem; color: var(--gold);
  padding: 4px 2px 8px;
}
.vis-sheet-actions {
  display: flex; gap: 8px; justify-content: flex-end; padding-top: 0.4rem;
}

/* ── Desk bottom-nav disc (mail-scan-cam pattern, owner 2026-09-25:
   the "+ Check in" tab retired; Desk is the raised center disc) ──── */
.vis-checkin-plus {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  margin: -16px auto 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.vis-checkin-plus svg { width: 22px; height: 22px; }
.vis-checkin-bnav .bnav-lbl { color: var(--gold); }
.vis-checkin-bnav:active .vis-checkin-plus { transform: scale(0.92); }

/* ── Evacuation view — biggest readable type ─────────────────────── */
.vis-evac-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 1.1rem 1rem 0.5rem;
}
.vis-evac-headline {
  font-size: 1.6rem; font-weight: 700; color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.vis-evac-asof { font-size: 0.75rem; color: var(--muted); flex: 1; }
.vis-evac-search {
  background: var(--navy-input); border: 1px solid var(--gold-border);
  border-radius: 6px; color: var(--cream); font-size: 0.85rem;
  padding: 6px 10px; min-width: 220px;
}
.vis-evac-list { padding: 0.3rem 1rem 1rem; }
/* Card wrapper (board polish 2026-09-17) — same composition as the
   Check in/out board; print styles strip the chrome below */
.vis-evac-card {
  background: var(--navy-card, var(--navy-input));
  border: 1px solid var(--gold-border);
  border-radius: 12px; padding: 6px 14px; margin: 0.4rem 1rem 0;
}
.vis-evac-card .vis-evac-cols { padding: 0.3rem 0 0.2rem; border-bottom: 1px solid var(--gold-border); }
.vis-evac-card .vis-evac-list { padding: 0 0 0.3rem; }
.vis-evac-card .vis-evac-row:last-child { border-bottom: none; }
.vis-evac-cols, .vis-evac-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.75fr; gap: 10px;
  align-items: baseline;
}
.vis-evac-cols { padding: 0.4rem 1rem 0; }
.vis-evac-cols button {
  background: none; border: none; cursor: pointer; text-align: left;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); padding: 4px 2px;
}
.vis-evac-cols button.active { color: var(--cream); }
.vis-evac-row {
  border-bottom: 1px solid var(--gold-border);
  padding: 10px 2px;
}
.vis-evac-name { font-size: 1.15rem; font-weight: 700; color: var(--cream); }
.vis-evac-cell {
  font-size: 0.95rem; color: var(--cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vis-evac-cell.muted { color: var(--muted); }
.vis-evac-dim { opacity: 0.55; }
@media (max-width: 640px) {
  /* phones: name + time up top, org/host beneath — nothing hidden */
  .vis-evac-row {
    grid-template-columns: 1fr auto; gap: 2px 10px;
    grid-template-areas: "name in" "org org" "host host";
  }
  .vis-evac-row .c-name { grid-area: name; }
  .vis-evac-row .c-in   { grid-area: in; }
  .vis-evac-row .c-org  { grid-area: org;  font-size: 0.78rem; color: var(--muted); }
  .vis-evac-row .c-host { grid-area: host; font-size: 0.78rem; color: var(--muted); }
  .vis-evac-cols { grid-template-columns: 1fr auto; }
  .vis-evac-cols [data-evac-sort="org"], .vis-evac-cols [data-evac-sort="host"] { display: none; }
}

/* Print: the evacuation list alone, black on white, muster-point ready */
@media print {
  body.vis-evac-printing * { visibility: hidden; }
  body.vis-evac-printing #vis-tab-evac,
  body.vis-evac-printing #vis-tab-evac * { visibility: visible; }
  body.vis-evac-printing #vis-tab-evac {
    position: absolute; left: 0; top: 0; width: 100%;
  }
  body.vis-evac-printing .vis-evac-headline,
  body.vis-evac-printing .vis-evac-name,
  body.vis-evac-printing .vis-evac-cell { color: #000; }
  body.vis-evac-printing .vis-evac-asof,
  body.vis-evac-printing .vis-evac-cols button { color: #333; }
  body.vis-evac-printing #vis-evac-print,
  body.vis-evac-printing #vis-evac-search { display: none; }
  /* the on-screen card chrome has no place on the muster printout */
  body.vis-evac-printing .vis-evac-card {
    border: none; background: none; border-radius: 0;
    padding: 0; margin: 0;
  }
  body.vis-evac-printing #vis-tab-evac { max-width: none; }
}

/* ── Admin cards ─────────────────────────────────────────────────── */
.vis-admin-card {
  background: var(--navy-card, var(--navy-input));
  border: 1px solid var(--gold-border);
  border-radius: 12px; padding: 12px 14px; margin: 0.7rem 1rem 0;
}
.vis-admin-card-title {
  font-size: 0.62rem; font-weight: 600; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px;
}
.vis-admin-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--gold-border);
}
.vis-admin-row:last-child { border-bottom: none; }
/* Hosts directory rows (owner 2026-09-25): the Edit button never wraps
   under a long name/email — the text block truncates instead. The
   attribute selector outweighs the phone flex-wrap rule below. */
.vis-admin-row[data-host-id] { flex-wrap: nowrap; }
.vis-admin-row[data-host-id] > div:first-child { min-width: 0; }
.vis-admin-row[data-host-id] .vis-admin-name,
.vis-admin-row[data-host-id] .vis-admin-sub {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vis-admin-row[data-host-id] .btn { flex: 0 0 auto; }
.vis-admin-row select, .vis-admin-row input {
  background: var(--navy-input); border: 1px solid var(--gold-border);
  border-radius: 8px; padding: 7px 10px;
  font-size: 16px; color: var(--cream); font-family: inherit;
  max-width: 220px;
}
.vis-admin-name { font-size: 0.78rem; color: var(--cream); font-weight: 600; }
.vis-admin-sub { font-size: 0.66rem; color: var(--muted); margin-top: 1px; }
/* Settings rows render via the shared .mail-set-* table classes
   (mailroom.css): Setting | Warning | Description | Value grid with
   the site-standard 34px/38px controls. */
.vis-admin-note { font-size: 0.66rem; color: var(--muted); padding: 0.9rem 1rem 1.4rem; }

/* Hosts directory filter bar — control sizing is inline on the
   elements (index.html) because the global width:100% control theme
   lives there; this only lays out the row */
.vis-hosts-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.vis-hosts-filters select { padding-top: 9px; padding-bottom: 9px; }
.vis-hosts-filters input  { padding-top: 9px; padding-bottom: 9px; }

.vis-sync-log-row {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 0.68rem; color: var(--muted);
  padding: 4px 0; border-bottom: 1px solid var(--gold-border);
}
.vis-sync-log-row:last-child { border-bottom: none; }
.vis-sync-log-type { color: var(--cream); font-weight: 600; min-width: 56px; }
.vis-sync-log-when { margin-left: auto; white-space: nowrap; }
.vis-sync-fail { color: var(--red, #e66); font-weight: 600; }

.vis-token-revoked {
  font-size: 0.6rem; color: var(--red, #e66); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.vis-token-reveal-box {
  border: 1px dashed var(--gold); border-radius: 10px;
  padding: 10px 12px; margin-top: 8px;
}
.vis-token-code {
  display: block; margin: 6px 0; padding: 8px 10px;
  background: var(--navy-input); border-radius: 6px;
  font-size: 0.78rem; color: var(--cream);
  word-break: break-all; user-select: all;
}

/* narrow phones */
@media (max-width: 640px) {
  .vis-row { padding: 7px 10px; }
  .vis-row .btn { padding: 6px 10px; font-size: 0.66rem; }
  .vis-evac-headline { font-size: 1.3rem; }
  .vis-admin-row { flex-wrap: wrap; }
  .vis-admin-row select, .vis-admin-row input { max-width: none; flex: 1 1 100%; }
}

/* New-visitor first/last split — compact two-up under the name field */
.vis-name-split { display: flex; gap: 8px; }
.vis-name-split .vis-field { flex: 1; margin-bottom: 0.5rem; }

/* Email log (owner 2026-09-22) — rows reuse the mailroom email-log
   classes; the type column widens for "Accountability" */
.vis-emaillog-row.mail-sync-log-row { grid-template-columns: 100px 1fr max-content; }

/* ── Reports tab (V4, design §13) ─────────────────────────────────── */
.vis-rep-optrow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 2px 0 8px; font-size: 0.68rem; color: var(--cream);
}
.vis-rep-check { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.vis-rep-check input { width: auto; accent-color: var(--gold); }
.vis-rep-logged { color: var(--muted); font-size: 0.6rem; }
.vis-rep-chip {
  background: var(--navy-input); border: 1px solid var(--gold);
  border-radius: 999px; color: var(--gold); cursor: pointer;
  font-family: inherit; font-size: 0.64rem; padding: 3px 10px;
}
.vis-rep-badge {
  font-size: 0.58rem; color: var(--gold); border: 1px solid var(--gold-border);
  border-radius: 999px; padding: 1px 6px; white-space: nowrap;
}
.vis-rep-table-wrap { overflow-x: auto; }
.vis-rep-table { width: 100%; border-collapse: collapse; font-size: 0.7rem; }
.vis-rep-table th { text-align: left; padding: 0; white-space: nowrap; }
.vis-rep-table th button {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 0.62rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 6px 8px 6px 0; white-space: nowrap;
}
.vis-rep-table th button.active { color: var(--gold); }
.vis-rep-table td {
  padding: 6px 10px 6px 0; color: var(--cream);
  border-top: 1px solid var(--gold-border); white-space: nowrap;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.vis-rep-table td.muted { color: var(--muted); }
.vis-rep-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 24px; margin-top: 10px;
}
.vis-rep-grid .vis-section-title { margin: 10px 0 2px; }
.vis-rep-bars td { max-width: none; }
.vis-rep-barcell { width: 45%; }
.vis-rep-bar {
  height: 8px; background: var(--gold); border-radius: 4px; min-width: 2px;
}

/* Reports filter bar — mailroom email-log treatment (owner 2026-09-24:
   uniform + compact; the global control theme skips input[type=search]
   and its 13px padding is sheet-scale, not filter-scale). background-
   color (not the shorthand) keeps the global select chevron. */
.vis-rep-filters {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.6rem; align-items: center;
}
.vis-rep-filters select,
.vis-rep-filters input {
  box-sizing: border-box; height: 38px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--gold-border);
  background-color: var(--navy-input); color: var(--cream);
  font-family: inherit; font-size: 16px;
  width: auto; min-width: 0;
}
.vis-rep-filters select               { flex: 0 1 auto; padding-right: 32px; }
.vis-rep-filters .mail-date-lbl       { flex: 0 1 190px; }
.vis-rep-filters input[type="search"] { flex: 1 1 170px; }
/* Icon-only download (owner 2026-09-24: bar fits one line on desktop) */
.vis-rep-filters .vis-rep-dl {
  flex: 0 0 auto; margin-left: auto;
  height: 38px; width: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.vis-rep-filters .vis-rep-dl svg { width: 17px; height: 17px; }
/* Phones: the bar wraps — every control grows so each row fills the
   width evenly instead of ragged-right (owner 2026-09-24) */
@media (max-width: 640px) {
  .vis-rep-filters select,
  .vis-rep-filters input { height: 34px; font-size: 0.78rem; flex: 1 1 130px; }
  /* phones (owner 2026-09-25, mailroom-reports parity): [search ·
     download] / [selects] / [from · to] — dates stay paired */
  .vis-rep-filters input[type="search"] { flex: 1 1 200px; order: 0; }
  .vis-rep-filters .vis-rep-dl { height: 34px; flex: 0 0 44px; order: 1; }
  .vis-rep-filters select { order: 2; }
  /* 40% basis, NOT 0 — zero-basis crammed the pair onto the selects'
     row as overlapping slivers (mailroom parity) */
  .vis-rep-filters .mail-date-lbl { order: 3; flex: 1 1 40%; }
}