/* frontend/css/modules/mailroom.css
   ══════════════════════════════════════════════════════════════════
   Mailroom module — Manage tab + full-screen continuous-scan camera.
   Shell classes (.v-shell/.v-sidebar/.topbar/.bnav/.sheet) come from
   the app's inline stylesheet; this file styles only mailroom-specific
   pieces. Palette via the app's CSS variables.
   ══════════════════════════════════════════════════════════════════ */

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

/* ── Toolbar + filter chips ──────────────────────────────────────── */
.mail-toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 0.6rem 1rem 0;
}
.mail-search { flex: 1; min-width: 160px; }
.mail-batch-select { max-width: 260px; }
.mail-batch-select:hover { border-color: var(--gold); }

/* Unified controls (owner cleanup 2026-09-09): every control on the
   manage screen — Scan, Add, search, batch picker, Reset, pager —
   shares one height, radius, face and type size. 16px on touch
   (inputs/selects under 16px make iOS zoom); compact on desktop. */
.mail-toolbar .btn-action,
.mail-pager .btn-action,
#mail-counter-reset,
.mail-search,
.mail-batch-select {
  box-sizing: border-box; height: 38px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--gold-border);
  background: var(--navy-input); color: var(--cream);
  font-family: inherit; font-size: 16px; font-weight: 400;
  letter-spacing: 0.02em; text-transform: none;
}
.mail-toolbar .btn-action:hover,
.mail-pager .btn-action:hover,
#mail-counter-reset:hover { border-color: var(--gold); }
.mail-toolbar .btn-action.btn-primary {
  background: var(--gold); border-color: transparent; color: #fff; font-weight: 500;
}
@media (min-width: 700px) {
  .mail-toolbar .btn-action, .mail-pager .btn-action, #mail-counter-reset,
  .mail-search, .mail-batch-select { height: 34px; font-size: 0.78rem; }
}

.mail-chips {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding: 0.6rem 1rem 0.2rem;
}
/* The filter row fills the FULL width at every size (owner
   2026-09-17): the two dropdowns stretch to share the row and its
   edges line up with the toolbar and tiles above; only New batch
   keeps its natural size. */
.mail-chips { flex-wrap: nowrap; }
.mail-chips select { flex: 1 1 0; min-width: 0; max-width: none; }
.mail-chips #mail-counter-reset { flex: 0 0 auto; }
/* Desktop: mailroom sheets read as centered panels, not full-bleed
   bottom sheets (2026-09-17 — same treatment as the visitors sheets).
   The scan sheet is excluded: the camera view wants the space. */
@media (min-width: 900px) {
  #mail-package-sheet, #mail-recipient-sheet, #mail-signature-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;
  }
  #mail-package-sheet.open, #mail-recipient-sheet.open, #mail-signature-sheet.open {
    transform: translate(-50%, 0);
  }
}
/* With the 220px sidebar showing (≥1024px), center the sheets on the
   content column, not the viewport (owner 2026-09-17) */
@media (min-width: 1024px) {
  #mail-package-sheet, #mail-recipient-sheet, #mail-signature-sheet { left: calc(50% + 110px); }
}

/* Required-field markers on the add-recipient sheets (owner 2026-09-17) */
.mail-req { color: var(--gold); font-weight: 700; }
.mail-req-note { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* mail-chip pills — used by the admin sub-tabs (and visitors' clone) */
.mail-chip {
  background: var(--navy-input); border: 1px solid var(--gold-border);
  color: var(--muted); border-radius: 999px; padding: 6px 14px;
  font-size: 0.72rem; font-family: inherit; font-weight: 400;
  letter-spacing: 0.02em; cursor: pointer;
}
.mail-chip:hover { border-color: var(--gold); color: var(--cream); }
.mail-chip.active { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight: 600; }

/* ── Package list ────────────────────────────────────────────────── */
.mail-pkg-list { padding: 0.6rem 1rem; display: flex; flex-direction: column; gap: 5px; }
.mail-pkg-row, .mail-pkg-head {
  /* aligned columns: badge | name | carrier | tracking | when | status */
  display: grid;
  grid-template-columns: 22px minmax(120px, 220px) 72px minmax(0, 1fr) max-content 92px;
  align-items: center; gap: 12px;
}
.mail-pkg-row {
  background: var(--navy-card, var(--navy-input));
  border: 1px solid var(--gold-border);
  border-radius: 10px; padding: 5px 12px; cursor: pointer;
}
.mail-pkg-head { padding: 0 13px; }  /* row padding + 1px border = aligned */
.mail-pkg-head > div {
  font-size: 0.6rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
}
.mail-pkg-status-h { justify-self: end; }
/* batch markers — current batch label + end-of-batch divider */
.mail-pkg-batch-label {
  font-size: 0.6rem; font-weight: 600; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 13px 0;
}
.mail-pkg-divider {
  display: flex; align-items: center; gap: 10px; margin: 5px 0 2px;
  font-size: 0.6rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
}
.mail-pkg-divider::before, .mail-pkg-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--gold-border);
}
.mail-pkg-row:hover { border-color: var(--gold); }
.mail-pkg-name {
  font-size: 0.78rem; color: var(--cream); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mail-pkg-carrier {
  font-size: 0.78rem; color: var(--muted); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mail-pkg-tracking {
  font-size: 0.78rem; color: var(--muted); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mail-pkg-when { font-size: 0.78rem; color: var(--muted); white-space: nowrap; text-align: right; }
.mail-pkg-row .mail-status-chip { justify-self: end; text-align: center; }
/* narrow phones: name gets the space — carrier + tracking live in the
   detail sheet; tiles pack into a tight 3-up grid with the meta below */
@media (max-width: 640px) {
  .mail-pkg-row, .mail-pkg-head {
    grid-template-columns: 22px minmax(0, 1fr) max-content max-content;
    gap: 8px;
  }
  .mail-pkg-tracking, .mail-pkg-carrier { display: none; }
  .mail-pkg-row { padding: 6px 10px; }

  /* compact tally strip — 2×2 of identical tiles (owner 2026-09-25:
     3-up left Total wrapping alone at a different size). The "since"
     line hides here — the batch label atop the list carries the same
     date, and inside a tile it wraps. */
  .mail-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0.4rem 1rem 0.1rem; }
  .mail-tile {
    padding: 5px 10px; min-width: 0;
    display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  }
  .mail-tile-label { font-size: 0.55rem; letter-spacing: 0.08em; }
  .mail-tile-value { font-size: 1rem; }
  .mail-tile-since { display: none; }
  /* "all time · Reset" as one compact right-aligned row under the tiles */
  .mail-tile-meta {
    grid-column: 1 / -1; min-width: 0;
    flex-direction: row; justify-content: flex-end; align-items: center; gap: 12px;
  }

  /* Scan / New batch live in the bottom ribbon on phones — those
     in-page buttons hide. Add manually STAYS in the toolbar (owner
     2026-09-25: its ribbon tab retired for the raised Scan disc; the
     no-photo path keeps one visible tap — intake never blocks).
     Search keeps 16px text (iOS zooms on smaller inputs). */
  .mail-toolbar { padding-top: 0.4rem; }
  #mail-scan-btn, #mail-counter-reset { display: none; }
  /* Add manually + search share one row, same 38px control height —
     search takes the leftover width (owner 2026-09-25: the floating
     natural-width button + full-row search read as clutter) */
  .mail-search { flex: 1 1 0; min-width: 0; border-radius: 8px; }
  .mail-search::placeholder { font-size: 0.8rem; }

  /* filter chips: one swipeable row instead of a ragged wrap */
  .mail-chips {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .mail-chips::-webkit-scrollbar { display: none; }
  .mail-chip { flex: 0 0 auto; }

  .mail-pager { gap: 10px; padding-bottom: 1rem; }
  .mail-pager .btn { padding: 6px 14px; font-size: 0.72rem; }
}
.mail-type-badge {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700;
}
.mail-type-badge.t-student        { background: rgba(80, 150, 255, 0.18); color: #7db4ff; }
.mail-type-badge.t-faculty,
.mail-type-badge.t-faculty_family { background: rgba(80, 220, 150, 0.15); color: #6fdca6; }
.mail-type-badge.t-department     { background: rgba(200, 160, 255, 0.15); color: #c9a5ff; }
.mail-type-badge.t-security       { background: rgba(255, 120, 120, 0.15); color: #ff9c9c; }
.mail-status-chip {
  flex-shrink: 0; border-radius: 999px; padding: 3px 10px;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em;
}
.mail-status-chip.s-scanned          { background: rgba(80, 150, 255, 0.15); color: #7db4ff; }
.mail-status-chip.s-ready_for_pickup { background: rgba(240, 200, 90, 0.15); color: var(--gold); }
.mail-status-chip.s-picked_up        { background: rgba(80, 220, 150, 0.15); color: #6fdca6; }
.mail-status-chip.s-returned         { background: rgba(200, 160, 255, 0.15); color: #c9a5ff; }
.mail-status-chip.s-archived         { background: rgba(160, 160, 160, 0.15); color: #b8b8b8; }
.mail-status-chip.s-security         { background: rgba(255, 120, 120, 0.15); color: #ff9c9c; }
.mail-empty { text-align: center; color: var(--muted); font-size: 0.75rem; padding: 2rem 1rem; }
.mail-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0.4rem 1rem 1.2rem;
}
.mail-page-info { font-size: 0.68rem; color: var(--muted); }

/* ── Detail sheet ────────────────────────────────────────────────── */
.mail-detail-photo {
  width: 100%; max-height: 320px; object-fit: contain;
  border-radius: 10px; background: #000; margin-bottom: 0.8rem;
}
.mail-detail-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
  font-size: 0.74rem; margin-bottom: 0.8rem;
}
.mail-detail-grid dt { color: var(--muted); }
.mail-detail-grid dd { color: var(--cream); margin: 0; word-break: break-word; }
.mail-timeline { border-top: 1px solid var(--gold-border); padding-top: 0.6rem; margin-bottom: 0.8rem; }
.mail-timeline-row { display: flex; gap: 8px; font-size: 0.7rem; padding: 3px 0; }
.mail-timeline-when { color: var(--muted); min-width: 130px; }
.mail-timeline-what { color: var(--cream); }

/* ── Camera overlay ──────────────────────────────────────────────── */
.mail-camera {
  position: fixed; inset: 0; z-index: 900; background: #000;
}
/* Quick-add sheet + toasts open while the camera shell (z 900) is up —
   the shared .sheet/.sheet-ov (301/300) and #toast (600) sit below it */
#mail-recipient-sheet-ov { z-index: 902; }
#mail-recipient-sheet    { z-index: 903; }
/* body-qualified: the shell's inline <style> loads AFTER this file and its
   #toast rule (z 600) would out-order a bare #toast pin of equal specificity */
body #toast              { z-index: 950; }
/* While the camera is up, attention lives at the bottom of the screen —
   toasts become a compact pill above the shutter, matching the camera's
   chip styling instead of the app's full-width card. */
body.mail-cam-open #toast {
  top: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 152px);
  left: 50%; right: auto;
  width: max-content; max-width: 86vw;
  transform: translate(-50%, 12px);
  background: rgba(0, 0, 0, 0.72); color: #fff;
  border-width: 1px; border-radius: 999px;
  padding: 9px 18px; font-size: 0.74rem;
}
body.mail-cam-open #toast.show { transform: translate(-50%, 0); }
.mail-camera video, .mail-camera #mail-cam-freeze {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* freeze-frame shows the WHOLE captured/picked label, letterboxed */
.mail-camera #mail-cam-freeze { object-fit: contain; }
.mail-cam-frame {
  position: absolute; inset: 0; pointer-events: none;
  /* darkened edges + label-framing guide */
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.35);
  -webkit-mask: linear-gradient(#000 0 0) exclude,
    linear-gradient(#000 0 0) 50% 42% / 82% 44% no-repeat;
          mask: linear-gradient(#000 0 0) exclude,
    linear-gradient(#000 0 0) 50% 42% / 82% 44% no-repeat;
}
.mail-cam-guide-border {
  position: absolute; left: 9%; right: 9%; top: 20%; height: 44%;
  border: 1.5px dashed rgba(255, 255, 255, 0.55); border-radius: 14px;
  pointer-events: none;
}
.mail-cam-top {
  position: absolute; left: 0; right: 0;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; z-index: 3;
}
/* Superadmins have the 26px status strip below the notch — drop under it */
body.has-admin-bar .mail-cam-top {
  top: calc(env(safe-area-inset-top, 0px) + 36px);
}
.mail-cam-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.5); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mail-cam-btn.torch-on { background: var(--gold); color: var(--navy); }
.mail-cam-session {
  background: rgba(0, 0, 0, 0.55); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px; padding: 6px 14px; font-size: 0.72rem;
}
.mail-cam-bottom {
  position: absolute; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  z-index: 3;
}
.mail-cam-capture {
  width: 72px; height: 72px; border-radius: 50%;
  background: #fff; border: 5px solid rgba(255, 255, 255, 0.35);
  background-clip: padding-box; cursor: pointer;
}
.mail-cam-capture:active { transform: scale(0.93); }
.mail-cam-capture.busy { opacity: 0.4; pointer-events: none; }
.mail-cam-undo {
  background: rgba(0, 0, 0, 0.55); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px; padding: 6px 14px; font-size: 0.7rem;
  cursor: pointer; max-width: 80vw;
  display: inline-flex; align-items: center; gap: 6px;
}
.mail-cam-undo svg { flex: none; }
.mail-cam-undo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Armed = one tap from a destructive action — read as red */
.mail-cam-undo.armed {
  background: rgba(200, 64, 64, 0.85);
  border-color: rgba(255, 255, 255, 0.45); color: #fff;
}
#mail-security-btn.armed {
  background: var(--red-bg); border-color: var(--red-bd); color: #f09090;
}

/* ── Scan result sheet (over the live camera) ────────────────────── */
.mail-scan-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--navy, #001830);
  border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--gold-border);
  max-height: 76vh; overflow-y: auto;
  padding: 6px 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
}
.mail-scan-title { font-size: 0.9rem; font-weight: 700; color: var(--cream); margin: 0.4rem 0 0.6rem; }
.mail-scan-spinner { text-align: center; color: var(--muted); font-size: 0.78rem; padding: 1.6rem 0; }
.mail-cand {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--gold-border); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 7px; cursor: pointer;
}
.mail-cand.selected { border-color: var(--gold); background: rgba(240, 200, 90, 0.08); }
/* name + email share one line; wraps on narrow screens */
.mail-cand > div:first-child {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0;
}
.mail-cand-name { font-size: 0.8rem; color: var(--cream); font-weight: 600; }
.mail-cand-sub  { font-size: 0.62rem; color: var(--muted); }
.mail-cand-score { margin-left: auto; text-align: right; min-width: 74px; }
.mail-score-bar {
  height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12);
  overflow: hidden; margin-top: 3px;
}
.mail-score-bar > div { height: 100%; background: var(--gold); }
.mail-score-pct { font-size: 0.6rem; color: var(--muted); }
.mail-scan-warn {
  background: rgba(240, 200, 90, 0.12); border: 1px solid var(--gold);
  color: var(--gold); border-radius: 10px; padding: 8px 12px;
  font-size: 0.7rem; margin-bottom: 0.7rem;
}
.mail-scan-error {
  background: rgba(255, 120, 120, 0.1); border: 1px solid rgba(255, 120, 120, 0.4);
  color: #ff9c9c; border-radius: 10px; padding: 8px 12px;
  font-size: 0.7rem; margin-bottom: 0.7rem;
}
.mail-scan-fields { margin: 0.6rem 0; }
.mail-scan-fields summary {
  font-size: 0.68rem; color: var(--muted); cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.mail-field { margin-top: 0.55rem; }
.mail-field label {
  display: block; font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted); margin-bottom: 3px;
}
.mail-field input, .mail-field select, .mail-field textarea {
  width: 100%; background: var(--navy-input);
  border: 1px solid var(--gold-border); border-radius: 8px;
  padding: 8px 11px; font-size: 16px; color: var(--cream); font-family: inherit;
}
/* Every focusable input in mailroom MUST be >=16px — iOS auto-zooms on
   smaller fields and the zoom can stick across navigation. The type-ahead
   input in the scan sheet had no size and was the offender. */
#mail-ta-input {
  width: 100%; background: var(--navy-input);
  border: 1px solid var(--gold-border); border-radius: 8px;
  padding: 8px 11px; font-size: 16px; color: var(--cream); font-family: inherit;
}
.mail-scan-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 0.8rem; flex-wrap: wrap; }
.mail-scan-alt { display: flex; gap: 8px; margin-top: 0.6rem; flex-wrap: wrap; }
.mail-scan-alt .btn { flex: 1; }

/* ── Type-ahead dropdown ─────────────────────────────────────────── */
.mail-ta-wrap { position: relative; }
/* Keyboard up on a phone: the bottom-anchored sheet sits BEHIND the
   iOS keyboard (the keyboard covers the layout viewport rather than
   resizing it — owner hit this typing a manual-add name). While the
   name input has focus the sheet hangs from the TOP instead, which is
   above the keyboard by construction; it drops back on blur. */
@media (max-width: 1023px) {
  #mail-scan-sheet.kb-up {
    top: 0; bottom: auto;
    border-radius: 0 0 18px 18px;
    border-top: none; border-bottom: 1px solid var(--gold-border);
    max-height: 55vh;
    padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
  }
  /* results ride IN-FLOW below the input (desktop pattern) — the
     absolute dropdown was clipped at the sheet's edge; in-flow, the
     sheet's own 55vh scroll shows every name */
  #mail-scan-sheet.kb-up .mail-ta-list {
    position: static;
    margin-top: 6px;
    border-radius: 10px;
    max-height: none;
  }
}
/* Results open = keyboard up: clear the controls below so the dropdown has
   room. "+ Add recipient" stays — the no-match empty state points at it. */
#mail-scan-sheet.ta-open .mail-scan-fields,
#mail-scan-sheet.ta-open .mail-scan-actions { display: none; }
.mail-ta-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 10;
  background: var(--navy, #001830); border: 1px solid var(--gold-border);
  border-radius: 0 0 10px 10px; max-height: 220px; overflow-y: auto;
}
.mail-ta-item { padding: 8px 12px; cursor: pointer; font-size: 0.78rem; color: var(--cream); }
.mail-ta-item:hover, .mail-ta-item.focused { background: rgba(240, 200, 90, 0.1); }
/* "why did this match" hint — the alias that earned the hit */
.mail-ta-alias {
  font-size: 0.65rem; color: var(--gold); border: 1px solid var(--gold-border);
  border-radius: 999px; padding: 0 7px; white-space: nowrap;
}
/* Desktop: the input sits near the bottom of the sheet — the results
   open UPWARD into the empty camera area instead of below the fold,
   and the sheet does NOT collapse while typing (ta-open hiding is a
   phone-keyboard fix; there is no keyboard to make room for here).
   Phones keep the phone-pass-tuned behavior untouched. */
@media (min-width: 1024px) {
  /* Desktop: results are IN-FLOW above the input — the bottom-anchored
     sheet simply grows upward, so nothing can clip or overlap. The
     wrap flips to a column with the list ordered first. Phones keep
     the phone-pass-tuned absolute list + collapsed fields. */
  .mail-ta-wrap { display: flex; flex-direction: column; }
  .mail-ta-wrap label { order: 1; }
  .mail-ta-wrap #mail-ta-input { order: 2; }
  .mail-ta-list {
    position: static; order: 0;
    margin-bottom: 6px;
    border-radius: 10px;
    max-height: 320px;
  }
  #mail-scan-sheet.ta-open .mail-scan-fields  { display: block; }
  #mail-scan-sheet.ta-open .mail-scan-actions { display: flex; }
}
.mail-ta-item .mail-cand-sub { margin-left: 6px; }
.mail-ta-empty { padding: 8px 12px; font-size: 0.7rem; color: var(--muted); }
/* "Wrong person?" escape under a matched card (owner 2026-09-25) —
   link-styled so the happy path stays visually unchanged */
.mail-ta-reveal {
  background: none; border: none; padding: 2px 0 6px; cursor: pointer;
  font-family: inherit; font-size: 0.7rem; color: var(--gold);
  text-decoration: underline; text-underline-offset: 2px;
}

/* ── Scan button in the bottom ribbon ────────────────────────────── */
/* Raised center disc (owner 2026-09-25, vis-checkin-plus pattern but
   larger — scanning is the module's all-day primary action) */
.mail-scan-cam {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  margin: -16px auto 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.mail-scan-cam svg { width: 22px; height: 22px; }
.mail-scan-bnav .bnav-lbl { color: var(--gold); }
.mail-scan-bnav:active .mail-scan-cam { transform: scale(0.92); }

/* ── Admin tab ───────────────────────────────────────────────────── */
.mail-admin-card {
  background: var(--navy-card, var(--navy-input));
  border: 1px solid var(--gold-border); border-radius: 12px;
  padding: 12px 16px; margin: 0.8rem 1rem 0; max-width: 720px;
}
.mail-admin-card-title {
  font-size: 0.62rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;
}
.mail-sync-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--gold-border);
}
.mail-sync-row:last-child { border-bottom: none; }
.mail-sync-name { font-size: 0.82rem; color: var(--cream); font-weight: 600; }
.mail-sync-last { font-size: 0.65rem; color: var(--muted); margin-top: 2px; }
.mail-sync-log-row {
  display: grid; grid-template-columns: 72px 1fr max-content; gap: 10px;
  font-size: 0.68rem; color: var(--muted); padding: 4px 0; align-items: baseline;
}
.mail-sync-log-type { color: var(--cream); font-weight: 600; text-transform: capitalize; }
.mail-sync-log-when { white-space: nowrap; }
.mail-sync-fail { color: #ff9c9c; font-weight: 600; }
.mail-admin-note { font-size: 0.65rem; color: var(--muted); padding: 0.6rem 1rem; }

/* Email log (owner 2026-09-22): filter row shares the unified control
   face; result rows reuse the sync-log grid (type · address · when). */
.mail-emaillog-filters {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.6rem;
}
.mail-emaillog-filters select,
.mail-emaillog-filters input {
  box-sizing: border-box; height: 38px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--gold-border);
  background: var(--navy-input); color: var(--cream);
  font-family: inherit; font-size: 16px;
  /* width:auto defeats inherited full-width input rules — without it
     each control flex-wraps onto its own line (prod 2026-09-22) */
  width: auto; min-width: 0;
}
.mail-emaillog-filters select              { flex: 0 1 130px; }
.mail-emaillog-filters .mail-date-lbl      { flex: 0 1 190px; }
.mail-emaillog-filters input[type="search"] { flex: 1 1 150px; }
@media (max-width: 640px) {
  /* phones (owner 2026-09-25): [type] / [from · to] / [address] —
     the two dates stay side by side (also used by the visitors clone) */
  .mail-emaillog-filters select               { flex: 1 1 100%; }
  .mail-emaillog-filters .mail-date-lbl       { flex: 1 1 40%; }
  .mail-emaillog-filters input[type="search"] { flex: 1 1 100%; }
}
.mail-emaillog-link { cursor: pointer; }
.mail-emaillog-link:hover span:nth-child(2) { color: var(--cream); }
/* visible "opens the package" affordance — cursor alone is invisible */
.mail-emaillog-chev { color: var(--gold); font-weight: 600; }

/* Email templates editor (owner 2026-09-22) */
.mail-tpl { padding: 0.4rem 0 0.8rem; border-bottom: 1px solid var(--gold-border); }
.mail-tpl:last-child { border-bottom: none; }
.mail-tpl-title {
  font-size: 0.82rem; color: var(--cream); font-weight: 600; margin-bottom: 0.4rem;
}
.mail-tpl-sample {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  padding: 10px 12px; border: 1px dashed var(--gold-border); border-radius: 8px;
  background: var(--navy-input); color: var(--muted);
  font-family: inherit; font-size: 0.75rem; line-height: 1.5;
}
@media (min-width: 700px) {
  .mail-emaillog-filters select,
  .mail-emaillog-filters input { height: 34px; font-size: 0.78rem; }
}

/* ── Phase 3: notify badge · detail actions · signature ──────────── */
.mail-status-chip.notify-bad {
  outline: 1px solid #ff9c9c; color: #ff9c9c;
}
.mail-detail-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0.6rem 0 0.2rem;
  padding-top: 0.6rem; border-top: 1px solid var(--gold-border);
}
.mail-sig-hint { font-size: 0.68rem; color: var(--muted); margin-bottom: 6px; }
.mail-detail-signature {
  display: block; max-width: 260px; width: 100%;
  background: #fdfcf7; border: 1px solid var(--gold-border); border-radius: 8px;
  margin-top: 4px;
}
.mail-sig-canvas {
  width: 100%; height: 160px; display: block; touch-action: none;
  background: #fdfcf7; border: 1px dashed var(--gold-border); border-radius: 10px;
}
.mail-remember-chip {
  display: block; width: 100%; margin-top: 6px; padding: 8px 12px;
  background: var(--navy-input); border: 1px dashed var(--gold-border);
  border-radius: 999px; color: var(--muted); font-size: 0.72rem; cursor: pointer;
  text-align: left;
}
.mail-remember-chip:hover { border-color: var(--gold); color: var(--cream); }
.mail-remember-chip.on {
  background: var(--gold); border-style: solid; border-color: var(--gold);
  color: var(--navy); font-weight: 600;
}

/* ── Phase 3: admin — health strip ───────────────────────────────── */
.mail-health-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-health-item {
  flex: 1 1 130px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--gold-border); background: var(--navy-input);
}
.mail-health-item.ok   { border-left: 3px solid #7fce8f; }
.mail-health-item.warn { border-left: 3px solid var(--gold); }
.mail-health-item.bad  { border-left: 3px solid #ff9c9c; }
.mail-health-label {
  font-size: 0.62rem; font-weight: 600; color: var(--cream);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mail-health-sub { font-size: 0.65rem; color: var(--muted); margin-top: 2px; }

/* ── Phase 3: admin — features / settings rows ───────────────────── */
.mail-feature-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--gold-border);
}
.mail-feature-row:last-child { border-bottom: none; }
/* ── Settings table (both modules — owner 2026-09-25) ────────────────
   Grid rows: Setting | Warning | Description | Value. Controls adopt
   the site's unified control spec (34px desktop / 38px touch, 16px
   font). Stacks on phones: name+warning, description, full-width
   control. Visitors reuses these classes (mail-switch precedent). */
.mail-set-head, .mail-set-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) 150px minmax(200px, 1.6fr) 250px;
  grid-template-areas: "name warn desc ctl";
  gap: 2px 14px; align-items: center;
  padding: 7px 4px; border-bottom: 1px solid var(--gold-border);
}
.mail-set-head {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.mail-set-row:last-child { border-bottom: none; }
.mail-set-row.master { background: rgba(212, 175, 55, 0.06); border-radius: 8px; }
.mail-set-row.dependent .mail-set-name { padding-left: 14px; }
.mail-set-name { grid-area: name; font-size: 0.78rem; font-weight: 600; color: var(--cream); }
.mail-set-warn { grid-area: warn; min-width: 0; }
.mail-set-warnchip {
  display: inline-block; font-size: 0.56rem; font-weight: 600; color: var(--gold);
  border: 1px solid var(--gold-border); border-radius: 6px; padding: 2px 6px;
  text-transform: uppercase; letter-spacing: 0.05em; max-width: 100%;
}
.mail-set-desc { grid-area: desc; font-size: 0.66rem; color: var(--muted); }
.mail-set-ctl { grid-area: ctl; display: flex; justify-content: flex-end; align-items: center; }
.mail-set-static { font-size: 0.85rem; color: var(--cream); text-align: right; overflow-wrap: anywhere; }
.mail-set-ctl select, .mail-set-ctl input[type="text"], .mail-set-ctl input[type="number"] {
  width: 100%; height: 34px; padding: 0 10px; font-size: 16px;
  background: var(--navy-input); color: var(--cream); font-family: inherit;
  border: 1px solid var(--gold-border); border-radius: 8px;
}
@media (max-width: 760px) {
  .mail-set-head { display: none; }
  .mail-set-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name warn" "desc desc" "ctl ctl";
    align-items: start; row-gap: 3px;
  }
  .mail-set-warn { justify-self: end; }
  .mail-set-ctl { width: 100%; }
  .mail-set-ctl select, .mail-set-ctl input[type="text"], .mail-set-ctl input[type="number"] {
    height: 38px;
  }
}

.mail-feature-row.master { background: rgba(212, 175, 55, 0.06); border-radius: 8px; padding: 9px 8px; }
.mail-feature-row.dependent { padding-left: 18px; }
.mail-feature-info { min-width: 0; }
.mail-feature-label { font-size: 0.8rem; color: var(--cream); font-weight: 600; }
.mail-feature-sub { font-size: 0.65rem; color: var(--muted); margin-top: 2px; }
.mail-feature-nums { display: flex; gap: 12px; margin-top: 4px; }
.mail-feature-num { font-size: 0.65rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.mail-feature-num input, .mail-feature-wide-num {
  width: 64px; padding: 4px 6px; font-size: 16px;
  background: var(--navy-input); color: var(--cream);
  border: 1px solid var(--gold-border); border-radius: 6px;
}
.mail-feature-text {
  flex: 0 1 260px; padding: 6px 8px; font-size: 16px;
  background: var(--navy-input); color: var(--cream);
  border: 1px solid var(--gold-border); border-radius: 6px;
}

/* Toggle switch */
.mail-switch { position: relative; flex-shrink: 0; width: 40px; height: 22px; }
.mail-switch input { opacity: 0; width: 0; height: 0; }
.mail-switch-slider {
  position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
  background: var(--navy-input); border: 1px solid var(--gold-border);
  transition: background 0.15s;
}
.mail-switch-slider::before {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  left: 2px; top: 2px; background: var(--muted); transition: transform 0.15s, background 0.15s;
}
.mail-switch input:checked + .mail-switch-slider { background: var(--gold); border-color: var(--gold); }
.mail-switch input:checked + .mail-switch-slider::before { transform: translateX(18px); background: var(--navy); }

/* ── Phase 3: admin — notifications / alerts ─────────────────────── */
.mail-notify-stats { display: flex; gap: 8px; margin-bottom: 0.5rem; }
.mail-notify-stats .mail-tile { flex: 1; margin: 0; }
.mail-alert-row {
  display: grid; grid-template-columns: max-content 1fr max-content; gap: 8px;
  font-size: 0.68rem; color: var(--muted); padding: 4px 0; align-items: baseline;
}
.mail-alert-sev { font-weight: 700; text-transform: uppercase; font-size: 0.6rem; }
.mail-alert-sev.sev-high   { color: #ff9c9c; }
.mail-alert-sev.sev-medium { color: var(--gold); }
.mail-alert-sev.sev-low    { color: var(--muted); }
.mail-alert-subj { color: var(--cream); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Phase 3: admin — locations + recipients + aliases ───────────── */
.mail-loc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--gold-border);
}
.mail-loc-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mail-loc-add { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mail-loc-add input {
  flex: 1 1 140px; padding: 6px 8px; font-size: 16px;
  background: var(--navy-input); color: var(--cream);
  border: 1px solid var(--gold-border); border-radius: 6px;
}
/* Admin sub-tabs — mail-chip pills, card-aligned, wrap on phones */
.mail-adm-subtabs {
  display: flex; gap: 8px; margin: 0.8rem 1rem 0; max-width: 720px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  /* one row on phones (owner 2026-09-25): chips compact enough that
     all five FIT — no wrap, no chip hanging off the edge; overflow
     scroll stays only as a tiny-screen safety net */
  .mail-adm-subtabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px; gap: 5px;
  }
  .mail-adm-subtabs::-webkit-scrollbar { display: none; }
  .mail-adm-subtabs .mail-chip { flex: 0 0 auto; padding: 6px 9px; font-size: 0.66rem; }
}

.mail-rec-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mail-rec-toolbar .mail-search { flex: 1 1 160px; }
@media (max-width: 640px) {
  /* phones (owner 2026-09-25): search full row, the two filters share
     a row, the two actions share a row — not one control per line.
     40% basis, NOT 0/auto: zero-basis shrank the selects to their
     first letter and let everything cram onto one line */
  .mail-rec-toolbar .mail-search { flex: 1 1 100%; }
  .mail-rec-toolbar .mail-batch-select { flex: 1 1 40%; min-width: 0; max-width: none; }
  .mail-rec-toolbar .btn-action { flex: 1 1 40%; }
}

/* ── Shared one-line table pattern (package-list style):
     uppercase header row + uniform 0.78rem rows, ellipsis per cell ── */
.mail-tbl-head, .mail-tbl-row {
  display: grid; gap: 10px; align-items: baseline; padding: 6px;
  border-bottom: 1px solid var(--gold-border);
}
.mail-tbl-head {
  font-size: 0.6rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.mail-tbl-row { font-size: 0.78rem; color: var(--muted); }
.mail-tbl-row:last-child { border-bottom: none; }
.mail-tbl-row.clickable { cursor: pointer; border-radius: 6px; }
.mail-tbl-row.clickable:hover { background: var(--navy-input); }
.mail-tbl-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-tbl-cell.c-main { color: var(--cream); font-weight: 600; }
.mail-tbl-cell.c-cap  { text-transform: capitalize; }
.mail-tbl-cell.c-off  { color: #ff9c9c; }

/* Recipients card: Name · Email · Type · Source · Status */
.mail-rec-tbl .mail-tbl-head, .mail-rec-tbl .mail-tbl-row {
  grid-template-columns: 1.2fr 1.6fr 82px 88px 100px;
}
.mail-alias-arrow { color: var(--gold); font-weight: 700; }
/* Recipient editor aliases: contained box + header, same columns */
.mail-alias-edit {
  border: 1px solid var(--gold-border); border-radius: 10px;
  padding: 2px 8px; background: var(--navy-input);
}
.mail-alias-head { grid-template-columns: 1fr 0.9fr 74px 34px; }
.mail-alias-row {
  display: grid; grid-template-columns: 1fr 0.9fr 74px 34px; gap: 10px;
  align-items: center; font-size: 0.78rem; color: var(--muted);
  padding: 4px 6px; border-bottom: 1px solid var(--gold-border);
}
.mail-alias-row:last-child { border-bottom: none; }
.mail-alias-del { padding: 2px 9px; color: var(--red, #ff9c9c); }

@media (max-width: 640px) {
  /* phones: drop the low-value columns, keep one line */
  .mail-rec-tbl .mail-tbl-head, .mail-rec-tbl .mail-tbl-row { grid-template-columns: 1.2fr 82px 100px; }
  .mail-rec-tbl .c-email, .mail-rec-tbl .c-source { display: none; }
}

/* Date filters carry a From/To caption INSIDE the pill, placeholder-
   style (owner 2026-09-25: an empty date input renders as a blank
   pill on iOS). The label IS the pill — border/face/height — and the
   date input sits borderless inside it, still picking up text size/
   color from the bar's descendant input rules. Shared by the visitors
   filter bars too. */
.mail-date-lbl {
  display: inline-flex; align-items: center; gap: 6px;
  box-sizing: border-box; height: 38px; padding: 0 4px 0 10px;
  border-radius: 8px; border: 1px solid var(--gold-border);
  background: var(--navy-input);
  font-size: 0.68rem; color: var(--muted); white-space: nowrap;
  min-width: 0;
}
.mail-date-lbl input[type="date"] {
  flex: 1 1 auto; width: 100%; min-width: 0;
  height: auto; border: none; background: transparent; padding: 0;
}
/* height tracks each bar's control height: every bar compacts to 34px
   on desktop (≥700px rules); the report bars also compact on phones */
@media (min-width: 700px) {
  .mail-date-lbl { height: 34px; }
}
@media (max-width: 640px) {
  .mail-rep-filters .mail-date-lbl,
  .vis-rep-filters .mail-date-lbl { height: 34px; }
}

/* ── Reports tab (Phase 4) — visitors reports treatment ──────────── */
.mail-rep-filters {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.6rem; align-items: center;
}
.mail-rep-filters select,
.mail-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;
}
.mail-rep-filters select               { flex: 0 1 auto; padding-right: 32px; }
.mail-rep-filters .mail-date-lbl       { flex: 0 1 190px; }
.mail-rep-filters input[type="search"] { flex: 1 1 170px; }
.mail-rep-filters .mail-rep-dl {
  flex: 0 0 auto; margin-left: auto;
  height: 38px; width: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.mail-rep-filters .mail-rep-dl svg { width: 17px; height: 17px; }
.mail-rep-optrow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 2px 0 8px;
}
.mail-rep-hint { font-size: 0.66rem; color: var(--muted); }
/* Recipient · Type · Status · Tracking · Scanned · Closed */
.mail-rep-tbl .mail-tbl-head, .mail-rep-tbl .mail-tbl-row {
  grid-template-columns: 1.3fr 92px 118px 1fr 108px 108px;
  align-items: center;
}
.mail-rep-head button {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 0.6rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0; white-space: nowrap;
}
.mail-rep-head button.active { color: var(--gold); }
@media (max-width: 640px) {
  .mail-rep-filters select,
  .mail-rep-filters input { height: 34px; font-size: 0.78rem; flex: 1 1 130px; }
  /* phones (owner 2026-09-25): [search · download] / [range · status]
     / [from · to] — the dates stay paired, download never sits alone */
  .mail-rep-filters input[type="search"] { flex: 1 1 200px; order: 0; }
  .mail-rep-filters .mail-rep-dl { height: 34px; flex: 0 0 44px; order: 1; }
  .mail-rep-filters select { order: 2; }
  /* 40% basis, NOT 0: zero-basis let the pair cram onto the selects'
     row as overlapping slivers — this forces them to wrap as a pair */
  .mail-rep-filters .mail-date-lbl { order: 3; flex: 1 1 40%; }
  /* phones: drop type + tracking, keep one line */
  .mail-rep-tbl .mail-tbl-head, .mail-rep-tbl .mail-tbl-row {
    grid-template-columns: 1.3fr 108px 96px 96px;
  }
  .mail-rep-tbl .c-type, .mail-rep-tbl .c-track { display: none; }
}

/* Desktop: the panels cap at a comfortable width AND center — capped
   but left-hugging read as content squished to one side (owner
   2026-09-17; matches the visitors module's centered panels) */
@media (min-width: 1024px) {
  .mail-tiles, .mail-toolbar, .mail-chips, .mail-pkg-list, .mail-pager,
  .mail-admin-card, .mail-adm-subtabs {
    max-width: 980px; margin-left: auto; margin-right: auto;
  }
}