/* ══════════════════════════════════════════════════════════════
   Aevum Aevi · Site Theme — Sudlows Light
   Applied to: dashboard, scan, activity, report

   Loaded after each page's inline <style> so :root overrides
   cascade correctly via the CSS custom property cascade.

   Sudlows palette:
     Primary red  #e11f23
     White        #ffffff
     Dark text    #313131
   ══════════════════════════════════════════════════════════════ */

/* ── Variable overrides ──────────────────────────────────── */
:root {
  --bg:       #ffffff;
  --surface:  #f0f0f0;   /* slightly more distinct against white */
  --surface2: #e4e4e4;
  --border:   #b8b8b8;   /* darker — card edges clearly visible */
  --text:     #1e1e1e;   /* near-black — maximum readability */
  --muted:    #525252;   /* darkened for better contrast on light surfaces */
  --green:    #15803d;
  --orange:   #b84d00;   /* darkened — was #c2570a (barely AA), now 5.4:1 */
  --red:      #b91c1c;
  --blue:     #c0181b;    /* --blue used as primary action → Sudlows red */
  --primary:  #e11f23;
  --radius:   14px;
}

html { color-scheme: light; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-size: 20px;       /* larger for easier reading for senior users */
  line-height: 1.6;      /* WCAG SC 1.4.12 recommends 1.5 minimum */
}

/* ── Focus indicators (WCAG AA) ──────────────────────────── */
*:focus-visible {
  outline: 3px solid var(--primary) !important;
  outline-offset: 3px;
}

/* ── Reduced motion — vestibular / motion sensitivity ────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Keep spinner visible but static rather than blank */
  .spinner {
    animation: none !important;
    border-top-color: var(--primary) !important;
    opacity: 0.6;
  }
}

/* ══════════════════════════════════════════════════════════════
   CARD / SURFACE CONTRAST — visible edges, gentle shadow
   ══════════════════════════════════════════════════════════════ */

.card,
.stat-card,
.out-card,
.assets-list,
.checkout-detail,
.form-card,
.table-wrap,
.detail-card,
.scan-list,
.tl-card,
.event-card {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09) !important;
}

/* ══════════════════════════════════════════════════════════════
   FONT FAMILY — Outfit (dashboard) falls back to system font
   ══════════════════════════════════════════════════════════════ */

html, body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ══════════════════════════════════════════════════════════════
   BRAND BAR
   ══════════════════════════════════════════════════════════════ */

.brand-bar {
  height: 4px !important;
  background: var(--primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   WORDMARK ICON MARK — always red bg, white stroke
   ══════════════════════════════════════════════════════════════ */

.wordmark-mark {
  background: var(--primary) !important;
  border-radius: 7px !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   STAT CARD ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */

/* Top accent stripes — use light-theme colour values */
.stat-card.stat-total::before { background: var(--primary) !important; }  /* Sudlows red for total */
.stat-card.stat-avail::before  { background: var(--green)   !important; }
.stat-card.stat-out::before    { background: var(--orange)  !important; }

/* Icon box */
.stat-icon {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
}

.stat-card.stat-total .stat-icon { color: var(--primary) !important; }
.stat-card.stat-avail .stat-icon  { color: var(--green)   !important; }
.stat-card.stat-out   .stat-icon  { color: var(--orange)  !important; }

/* ══════════════════════════════════════════════════════════════
   SECTION HEADER ROW + COUNT BADGES
   ══════════════════════════════════════════════════════════════ */

.section-header-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

/* "Currently Out" count — orange on light bg */
.section-count.orange-count {
  background: rgba(184, 77, 0, 0.1) !important;
  color: var(--orange) !important;
  border-color: rgba(184, 77, 0, 0.22) !important;
}

/* Overdue count — red */
.section-count.overdue-count {
  background: rgba(185, 28, 28, 0.1) !important;
  color: var(--red) !important;
  border-color: rgba(185, 28, 28, 0.22) !important;
}

/* "All Assets" neutral count */
.section-count.neutral-count {
  background: var(--surface) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}

/* ══════════════════════════════════════════════════════════════
   SKELETON LOADING — light-theme shimmer
   ══════════════════════════════════════════════════════════════ */

.skeleton-card {
  background: #ffffff !important;
  border-color: var(--border) !important;
  border-left-color: var(--border) !important;
}

.skeleton-line {
  background: linear-gradient(
    90deg,
    var(--border)         0%,
    rgba(0, 0, 0, 0.04)  50%,
    var(--border)        100%
  ) !important;
  background-size: 300% 100% !important;
}

/* ══════════════════════════════════════════════════════════════
   LIVE DOT — stays green on light bg
   ══════════════════════════════════════════════════════════════ */

.live-dot {
  background: var(--green) !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   OUT-CARD hover lift — visible shadow on white bg
   ══════════════════════════════════════════════════════════════ */

.out-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10) !important;
}

/* ══════════════════════════════════════════════════════════════
   NAVIGATION (shared across all 4 pages)
   ══════════════════════════════════════════════════════════════ */

header { border-color: var(--border) !important; }

.wordmark { color: var(--text) !important; }

/* Override rgba(255,255,255,…) which is invisible on white.
   min-height 44px satisfies WCAG 2.5.5 pointer target size.  */
.nav-link {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #555 !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 13px !important;
}

.nav-link:hover {
  color: var(--text) !important;
  background: rgba(0, 0, 0, 0.06) !important;
}

.nav-link.active {
  color: var(--text) !important;
  background: rgba(0, 0, 0, 0.07) !important;
  box-shadow: inset 0 -2px 0 var(--primary) !important;
}

/* ── Manager nav pill + dropdown (injected by JS on all pages) */
.mgr-pill {
  color: var(--text) !important;
  background: #fff !important;
  border-color: var(--border) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 7px 13px !important;
  min-height: 38px !important;
  border-radius: 9px !important;
}

.mgr-pill:hover,
.mgr-pill-active {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background: rgba(225, 31, 35, 0.04) !important;
}

/* Light overrides — base CSS uses dark #1c1c22 bg */
.mgr-menu {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Header strip */
.mgr-header {
  border-bottom-color: var(--border) !important;
}
.mgr-header-label { color: var(--muted) !important; }
.mgr-header-status { color: var(--green) !important; }
.mgr-status-dot    { background: var(--green) !important; box-shadow: 0 0 5px var(--green) !important; }

/* Items */
.mgr-item {
  color: var(--text) !important;
  font-size: 15px !important;
  border-radius: 9px !important;
}
.mgr-item:hover { background: rgba(0, 0, 0, 0.04) !important; }

/* Active item — keep red left accent, lighten the bg tint */
.mgr-item-active {
  background: rgba(225, 31, 35, 0.06) !important;
  box-shadow: inset 3px 0 0 var(--primary) !important;
}
.mgr-item-active:hover { background: rgba(225, 31, 35, 0.09) !important; }

/* Icon boxes */
.mgr-item-icon {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
.mgr-item:hover .mgr-item-icon {
  background: rgba(0, 0, 0, 0.07) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  color: var(--text) !important;
}
.mgr-item-active .mgr-item-icon {
  background: rgba(225, 31, 35, 0.10) !important;
  border-color: rgba(225, 31, 35, 0.20) !important;
  color: var(--primary) !important;
}

.mgr-item-label { font-size: 15px !important; font-weight: 600 !important; color: var(--text) !important; }
.mgr-item-desc  { font-size: 13px !important; color: var(--muted) !important; }
.mgr-divider    { background: var(--border) !important; }

/* Lock button */
.mgr-lock-btn .mgr-item-icon {
  background: rgba(220, 38, 38, 0.06) !important;
  border-color: rgba(220, 38, 38, 0.14) !important;
  color: var(--red) !important;
}
.mgr-lock-btn:hover { background: rgba(220, 38, 38, 0.05) !important; }
.mgr-lock-btn:hover .mgr-item-icon {
  background: rgba(220, 38, 38, 0.12) !important;
  border-color: rgba(220, 38, 38, 0.24) !important;
  color: var(--red) !important;
}

/* ══════════════════════════════════════════════════════════════
   SPINNER
   ══════════════════════════════════════════════════════════════ */

.spinner {
  border-color: var(--border) !important;
  border-top-color: var(--primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   TOAST (hardcoded #1e1e26 in scan + activity)
   ══════════════════════════════════════════════════════════════ */

.toast {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14) !important;
  font-size: 15px !important;
}

.toast-dot { background: var(--green) !important; }

/* ══════════════════════════════════════════════════════════════
   ACTIVITY PAGE — new elements
   ══════════════════════════════════════════════════════════════ */

/* Event count pill badge */
.event-count {
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

/* CSV export button */
.btn-csv {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-height: 36px !important;
  padding: 6px 12px !important;
}

.btn-csv:hover {
  background: var(--surface2) !important;
  border-color: #999 !important;
  color: var(--text) !important;
}

/* Timeline skeleton */
.tl-skel-card {
  background: #ffffff !important;
  border-color: var(--border) !important;
  border-left-color: var(--border) !important;
}

.tl-skel-dot {
  background: var(--border) !important;
}

/* Skeleton shimmer — light theme override */
.tl-skeleton .skeleton-line,
.tl-skel-group .skeleton-line {
  background: linear-gradient(
    90deg,
    var(--border)         0%,
    rgba(0, 0, 0, 0.04)  50%,
    var(--border)        100%
  ) !important;
  background-size: 300% 100% !important;
}

/* Filter input — light theme */
.filter-input {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  font-size: 16px !important;
  min-height: 50px !important;
}

.filter-input::placeholder { color: #aaa !important; }

.filter-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(225, 31, 35, 0.12) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════════
   REPORT PAGE — new elements
   ══════════════════════════════════════════════════════════════ */

/* Stacked section header */
.section-header-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: flex-start !important;
}

.section-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.section-title {
  font-size: 16px !important;
  font-weight: 700 !important;
}

.section-sub {
  font-size: 13px !important;
  color: var(--muted) !important;
}

/* Section count badge — same as dashboard neutral-count */
.section-count.neutral-count {
  background: var(--surface) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
  font-size: 12px !important;
}

/* Action buttons (CSV / Print) */
.btn-action {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-height: 36px !important;
  padding: 6px 12px !important;
}

.btn-action:hover {
  background: var(--surface2) !important;
  border-color: #999 !important;
  color: var(--text) !important;
}

/* Report table skeleton rows */
.skel-row td {
  padding: 13px 20px !important;
  vertical-align: middle !important;
}

/* Skeleton shimmer in report tables — light theme */
.skel-row .skeleton-line {
  background: linear-gradient(
    90deg,
    var(--border)         0%,
    rgba(0, 0, 0, 0.04)  50%,
    var(--border)        100%
  ) !important;
  background-size: 300% 100% !important;
}

/* ══════════════════════════════════════════════════════════════
   SCAN PAGE
   ══════════════════════════════════════════════════════════════ */

/* Cards */
.card,
.checkout-detail {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

.card-label {
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--muted) !important;
}

.asset-name  { color: var(--text) !important; }
.asset-meta  { color: var(--muted) !important; }

.detail-key {
  font-size: 14px !important;
  color: var(--muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Status colours adjusted for light bg */
.status-dot.available   { background: var(--green); box-shadow: 0 0 8px rgba(21,128,61,0.4); }
.status-dot.checked-out { background: var(--orange); box-shadow: 0 0 8px rgba(194,87,10,0.35); }
.status-label.available   { color: var(--green)  !important; }
.status-label.checked-out { color: var(--orange) !important; }

/* Primary action buttons — larger text + taller for easy tapping.
   `color: #0a0a0f` was dark text on a coloured bg; now white. */
.btn-take,
.btn-confirm-take {
  background: var(--primary) !important;   /* Sudlows red replaces blue */
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  min-height: 56px !important;
}

.btn-return,
.btn-confirm-return {
  background: var(--green) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  min-height: 56px !important;
}

.btn-cancel {
  min-height: 52px !important;
  font-size: 16px !important;
}

/* Secondary / cancel buttons */
.btn.secondary,
.btn-cancel {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

.btn.secondary:hover,
.btn-cancel:hover {
  background: var(--surface2) !important;
  color: var(--text) !important;
}

/* Modal — was hardcoded #1c1c22 */
.modal {
  background: #ffffff !important;
  border-color: var(--border) !important;
}

.modal-title { color: var(--text) !important; }
.modal-sub   { color: var(--muted) !important; }

.modal label {
  font-size: 15px !important;    /* was 13px — readable before typing */
  font-weight: 700 !important;
  color: var(--text) !important; /* dark not muted — higher contrast */
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.modal input {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.modal input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(225, 31, 35, 0.15) !important;
  outline: none !important;
}

/* Overdue pill — adjust contrast for light bg */
.pill-overdue {
  background: rgba(200, 25, 25, 0.12) !important;
  color: var(--red) !important;
}

/* Asset photo */
.asset-photo { background: var(--surface) !important; }

/* Sticky action bar — white bg on light theme */
.actions-bar {
  background: #ffffff !important;
  border-top-color: var(--border) !important;
}

/* Minimal scan brand stamp */
.scan-brand       { color: var(--muted) !important; }
.scan-brand-mark  { background: var(--primary) !important; }

/* ══════════════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════════════ */

.stat-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

.stat-label {
  font-size: 15px !important;   /* was 11-13px */
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--muted) !important;
  margin-bottom: 10px !important;
}

.stat-value        { font-size: 40px !important; }
.stat-value.green  { color: var(--green)  !important; }
.stat-value.orange { color: var(--orange) !important; }
.stat-value.red    { color: var(--red)    !important; }

/* Section heading ("Currently Out", "All Assets") */
.section-heading {
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

/* Out-cards — compact tile, preserve left accent border */
.out-card {
  background: #ffffff !important;
  border-top-color:    var(--border) !important;
  border-right-color:  var(--border) !important;
  border-bottom-color: var(--border) !important;
  border-left-color:   var(--orange) !important;
  padding: 14px 16px !important;
}

.out-card.is-overdue {
  border-left-color: var(--red) !important;
  background: rgba(185, 28, 28, 0.03) !important;
}

/* Tile — asset name: readable at a distance */
.out-tile-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--text) !important;
}

.out-tile-type {
  font-size: 13px !important;
  color: var(--muted) !important;
}

/* Thin rule between name and person blocks */
.out-tile-divider {
  background: var(--border) !important;
}

/* Person name — secondary prominent info */
.out-tile-person {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

/* Meta row — job, time, due date */
.out-tile-meta-item {
  font-size: 13px !important;
  color: var(--muted) !important;
}

.out-tile-job {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--orange) !important;
}

/* Overdue badge inside tile */
.out-overdue-badge {
  background: rgba(185, 28, 28, 0.1) !important;
  color: var(--red) !important;
  border-color: rgba(185, 28, 28, 0.25) !important;
  font-size: 12px !important;
}

/* All-clear */
.all-clear {
  background: rgba(21, 128, 61, 0.04) !important;
  border-color: rgba(21, 128, 61, 0.2) !important;
}
.all-clear-icon { background: rgba(21, 128, 61, 0.1) !important; color: var(--green) !important; }
.all-clear-text { font-size: 18px !important; color: var(--green) !important; }
.all-clear-sub  { font-size: 15px !important; color: var(--muted) !important; }

/* Asset rows in "All assets" */
.asset-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  padding: 16px 18px !important;
}

.asset-row-main {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

.asset-row-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  gap: 8px !important;
}

.asset-row:hover { background: rgba(0, 0, 0, 0.04) !important; }

.asset-row-name { font-size: 17px !important; font-weight: 700 !important; }
.asset-row-type { font-size: 14px !important; color: var(--muted) !important; }
.asset-row-tag  { font-size: 13px !important; color: var(--muted) !important; opacity: 0.7 !important; }

/* Status badges — bigger dot, larger text */
.badge        { font-size: 14px !important; padding: 5px 12px 5px 9px !important; }
.badge-dot    { width: 10px !important; height: 10px !important; }    /* was 6px */

.badge.available {
  background: rgba(21, 128, 61, 0.12) !important;
  color: var(--green) !important;
}
.badge.available .badge-dot { background: var(--green) !important; box-shadow: 0 0 6px rgba(21,128,61,0.4) !important; }

.badge.checked-out {
  background: rgba(184, 77, 0, 0.12) !important;
  color: var(--orange) !important;
}
.badge.checked-out .badge-dot { background: var(--orange) !important; }

/* Gear link — 44px touch target for the All Assets list */
.gear-link {
  width: 44px !important;
  height: 44px !important;
  font-size: 20px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--muted) !important;
}
.gear-link:hover {
  background: var(--surface2) !important;
  color: var(--text) !important;
}

/* Compact gear in out-tiles — smaller, fits the tile */
.out-gear {
  width: 32px !important;
  height: 32px !important;
  font-size: 15px !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  color: var(--muted) !important;
}
.out-gear:hover {
  background: var(--surface2) !important;
  color: var(--text) !important;
}

/* Section labels */
.section-label,
.subsection-label {
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--muted) !important;
}

/* Last updated text */
.last-updated { font-size: 14px !important; color: var(--muted) !important; }

/* ══════════════════════════════════════════════════════════════
   ACTIVITY PAGE
   ══════════════════════════════════════════════════════════════ */

.event-count { font-size: 15px !important; color: var(--muted) !important; }

/* Search / filter input */
.filter-input {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  font-size: 17px !important;
  min-height: 50px !important;
}
.filter-input::placeholder { color: var(--muted) !important; }
.filter-input:focus { border-color: var(--primary) !important; }

/* Day group labels — readable for senior users */
.day-label {
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

/* Filter chips */
.filter-btn {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  font-size: 15px !important;
  min-height: 40px !important;
  padding: 8px 16px !important;
}

.filter-btn:hover  { background: var(--surface2) !important; color: var(--text) !important; }
.filter-btn.active { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }

/* Timeline cards */
.tl-card,
.event-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Timeline text — scaled up for readability */
.tl-asset   { font-size: 16px !important; font-weight: 700 !important; color: var(--text) !important; }
.tl-type    { font-size: 13px !important; color: var(--muted) !important; }
.tl-bottom  { font-size: 14px !important; color: var(--muted) !important; }
.tl-by      { font-size: 14px !important; font-weight: 600 !important; color: var(--text) !important; }

.tl-action,
.event-action { font-size: 17px !important; color: var(--text) !important; }

.tl-meta,
.event-meta,
.tl-time,
.event-time   { font-size: 14px !important; color: var(--muted) !important; }

.tl-notes     { font-size: 14px !important; color: var(--muted) !important; }

/* Event dots */
.tl-dot,
.event-dot    { width: 13px !important; height: 13px !important; }

/* Timeline badge colours — fix dark-theme rgba that's invisible on white */
.tl-badge { font-size: 13px !important; padding: 3px 9px !important; }

.tl-badge.checkout {
  background: rgba(185, 28, 28, 0.12) !important;
  color: var(--red) !important;
}
.tl-badge.checkin {
  background: rgba(21, 128, 61, 0.12) !important;
  color: var(--green) !important;
}
.tl-badge.verify {
  background: rgba(0, 0, 0, 0.07) !important;
  color: var(--muted) !important;
}

/* Dot ring shadows — fix dark-theme rgba that's barely visible on white */
.tl-entry.checkout .tl-dot { box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.22) !important; }
.tl-entry.checkin  .tl-dot { box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.22) !important; }
.tl-entry.verify   .tl-dot { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12) !important; }

/* CSV export button */
.btn-csv {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  font-size: 15px !important;
  min-height: 42px !important;
}

.btn-csv:hover {
  background: var(--surface2) !important;
  border-color: #999 !important;
}

/* Empty / loading states */
.empty-state,
.tl-empty {
  color: var(--muted) !important;
  font-size: 16px !important;
}

/* ══════════════════════════════════════════════════════════════
   REPORT PAGE
   ══════════════════════════════════════════════════════════════ */

.section-header { border-color: var(--border) !important; }

/* Report section header title */
.section-header-left h2 { color: var(--text) !important; }
.section-header-left p  { color: var(--muted) !important; }

/* Per-section action buttons (print / CSV) */
.btn-print,
.btn-csv-export {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.btn-print:hover,
.btn-csv-export:hover {
  background: var(--surface2) !important;
  border-color: #999 !important;
}

/* Tables */
.report-table {
  border-color: var(--border) !important;
}

.report-table thead th {
  background: var(--surface) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 14px 16px !important;
}

.report-table tbody tr { border-color: var(--border) !important; }
.report-table tbody tr:hover { background: rgba(0, 0, 0, 0.03) !important; }
.report-table td { color: var(--text) !important; font-size: 16px !important; padding: 14px 16px !important; }

/* Overdue rows in report */
.row-overdue {
  border-left-color: var(--red) !important;
  background: rgba(200, 25, 25, 0.04) !important;
}

/* Status pills in report */
.pill-out      { background: rgba(184, 77, 0, 0.12)   !important; color: var(--orange) !important; }
.pill-in       { background: rgba(21, 128, 61, 0.12)  !important; color: var(--green)  !important; }
.pill-overdue  { background: rgba(185, 28, 28, 0.12)  !important; color: var(--red)    !important; }

/* Report badge variants — fix dark-theme rgba values that appear washed out on white */
.badge-overdue  {
  background: rgba(185, 28, 28, 0.12) !important;
  color: var(--red) !important;
}
.badge-overdue .badge-dot  { background: var(--red) !important; box-shadow: 0 0 5px rgba(185, 28, 28, 0.4) !important; }

.badge-available {
  background: rgba(21, 128, 61, 0.12) !important;
  color: var(--green) !important;
}
.badge-available .badge-dot { background: var(--green) !important; }

.badge-out {
  background: rgba(184, 77, 0, 0.12) !important;
  color: var(--orange) !important;
}
.badge-out .badge-dot { background: var(--orange) !important; }

/* Print header (hidden on screen, visible in print) */
.print-header { color: var(--text) !important; }

/* @media print already uses white bg in the page styles — no override needed */

/* ── Retired notice (scan page) */
.retired-notice {
  background: rgba(0,0,0,0.03) !important;
  border-color: var(--border) !important;
}
.retired-notice-icon {
  background: rgba(0,0,0,0.05) !important;
  color: var(--muted) !important;
}
.retired-notice-title { color: var(--muted) !important; }
.retired-notice-reason { color: var(--muted) !important; }

/* ══════════════════════════════════════════════════════════════
   WORDMARK — scan page uses 11px uppercase; make readable
   ══════════════════════════════════════════════════════════════ */

.wordmark {
  font-size: 15px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

/* ══════════════════════════════════════════════════════════════
   GEAR / SETTINGS ICON LINKS — 44 px touch target (WCAG 2.5.5)
   aria-label is added in the JS template (dashboard.html)
   ══════════════════════════════════════════════════════════════ */

.gear-link {
  width: 44px !important;
  height: 44px !important;
  font-size: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ══════════════════════════════════════════════════════════════
   LINE HEIGHT on key reading surfaces
   ══════════════════════════════════════════════════════════════ */

.modal-sub,
.asset-meta,
.tl-notes,
.event-notes,
.tl-meta,
.event-meta,
.out-card-who,
.section-label,
.page-heading p,
.page-heading-row p {
  line-height: 1.55 !important;
}

/* ══════════════════════════════════════════════════════════════
   SHARED — cards / surfaces that use var(--surface)
   ══════════════════════════════════════════════════════════════ */

/* Generic table wrappers (used across pages) */
.table-wrap {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

thead th {
  color: var(--muted) !important;
  background: var(--surface) !important;
}

tbody tr:hover { background: rgba(0, 0, 0, 0.025) !important; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — medium screens (tablets, narrow desktops)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  header {
    flex-wrap: wrap !important;
  }

  /* Hide "Updated 23:11" on dashboard — frees space for nav + manager pill */
  .last-updated {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — small screens (phones, narrow viewports)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  header {
    padding: 14px 16px !important;
    gap: 10px !important;
  }

  .wordmark {
    display: none !important;
  }

  .header-left {
    gap: 12px !important;
  }

  .nav-link {
    font-size: 14px !important;
    padding: 8px 10px !important;
  }

  /* Manager pill — compact on mobile */
  .mgr-pill {
    font-size: 13px !important;
    padding: 6px 10px !important;
    min-height: 34px !important;
  }

  /* Dropdown menu — full width on mobile */
  .mgr-menu {
    min-width: 220px !important;
  }

  /* Page content — tighter padding */
  .page {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: 44px !important;
  }

  /* Tables — allow horizontal scroll */
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Report tables — allow scroll + readable sizing */
  .report-table {
    font-size: 14px !important;
  }

  .report-table td {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  .report-table thead th {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  /* Dashboard stat cards — shrink on mobile */
  .stat-card {
    padding: 14px 14px 16px !important;
  }

  .stat-value {
    font-size: 32px !important;
  }

  /* Out-cards — single column on narrow screens */
  .out-card {
    padding: 12px 14px !important;
  }

  /* Section headings — slightly smaller */
  .section-heading {
    font-size: 14px !important;
  }

  /* Filter input — smaller height on mobile */
  .filter-input {
    min-height: 44px !important;
    font-size: 15px !important;
  }

  /* CSV/action buttons — compact */
  .btn-csv,
  .btn-action {
    font-size: 12px !important;
    padding: 5px 10px !important;
    min-height: 32px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — very small screens (≤ 380px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {
  .nav-link {
    font-size: 13px !important;
    padding: 6px 8px !important;
  }

  .mgr-pill {
    font-size: 12px !important;
    padding: 5px 8px !important;
    gap: 4px !important;
  }

  /* Hide pill SVG icon on very narrow screens */
  .mgr-pill svg:first-child {
    display: none !important;
  }

  .mgr-menu {
    min-width: 200px !important;
    right: -8px !important;
  }
}