/* =========================================================================
   Timeclock v4 — "SaaS" design language, DIS Technology branding.
   Polished modern SaaS aesthetic (Linear / Notion / Vercel family):
   soft neutrals, subtle shadow surfaces (no borders), 12px corners,
   two-color DIS palette (red primary CTA, blue secondary accent),
   600-weight display headings, generous spacing.
   Built on Tabler's CSS variables so Bootstrap utility classes still work.
   ========================================================================= */

:root {
  /* Brand — DIS Technology two-color palette. DIS red is the primary CTA
     (Sign In, Clock In, Save); DIS blue is the secondary accent (links,
     active nav, secondary buttons, "TAP CARD" icon). */
  --tblr-primary:        #c41e3a;     /* DIS red */
  --tblr-primary-rgb:    196, 30, 58;
  --tblr-primary-fg:     #ffffff;
  --tblr-primary-dark:   #9a1830;     /* DIS red-dark */
  --tblr-primary-lt:     #fce7eb;     /* pale red tint, for tinted backgrounds */

  --tc-brand:            #c41e3a;
  --tc-brand-rgb:        196, 30, 58;
  --tc-brand-fg:         #ffffff;
  --tc-brand-tint:       #fce7eb;     /* pale red, real color, not 8% hint */
  --tc-brand-surface:    #fce7eb;     /* alias for tinted action surfaces (NFC pane) */

  /* DIS blue — secondary accent: links, active sidebar, secondary buttons,
     the "TAP CARD" icon. Reserve DIS red for the primary CTA. */
  --tc-dis-blue:         #1e4db8;
  --tc-dis-blue-dark:    #153a8a;
  --tc-dis-blue-light:   #3a6de0;
  --tc-dis-blue-tint:    #e3ecff;      /* pale blue, for secondary surfaces */

  --tc-success:          #10b981;     /* emerald-500, softer than v3 green-600 */
  --tc-danger:           #dc2626;     /* red-600 */
  --tc-warning:          #d97706;     /* amber-600 — status only, never brand */
  --tc-info:             #1e4db8;     /* DIS blue */

  /* Surfaces — soft neutrals. Shadows, not borders. */
  --tc-bg:               #fafafa;     /* zinc-50, app background, faint cool tint */
  --tc-bg-sunken:        #f4f4f5;     /* zinc-100, for table headers / tfoot */
  --tc-surface:          #ffffff;     /* pure white cards */
  --tc-border:           #e4e4e7;     /* zinc-200, very subtle, only used on dividers */
  --tc-border-strong:    #d4d4d8;    /* zinc-300 */

  --tc-radius:           12px;        /* cards, modal */
  --tc-radius-sm:        8px;         /* buttons, inputs, badges */
  --tc-radius-pill:      999px;

  /* Typography — system stack (Tabler default), tightened weight ramp. */
  --tc-font:             "Inter", system-ui, -apple-system, "Segoe UI",
                         Roboto, Helvetica, Arial, sans-serif;
  --tc-mono:             ui-monospace, "JetBrains Mono", "SF Mono",
                         "Roboto Mono", "Courier New", monospace;
  --tc-text:             #18181b;    /* zinc-900 */
  --tc-muted:            #71717a;    /* zinc-500 */
  --tc-text-strong:      #18181b;

  /* Sidebar — light surface like Linear, brand-tinted active state. */
  --tc-sidebar-width:    15rem;
  --tc-sidebar-bg:       #ffffff;
  --tc-sidebar-fg:       #18181b;
  --tc-sidebar-muted:    #a1a1aa;     /* zinc-400 */
  --tc-sidebar-active-bg: rgba(30, 77, 184, 0.08);   /* DIS blue tint */
  --tc-sidebar-active-fg: #1e4db8;                    /* DIS blue, stronger for label */
  --tc-sidebar-divider:   #f4f4f5;    /* zinc-100 */

  /* Shadow scale — one scale, used sparingly. */
  --tc-shadow-card:      0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
  --tc-shadow-card-hover: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06),
                          0 0 0 1px rgba(0,0,0,0.06);
  --tc-shadow-pop:       0 8px 24px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06);
}

html[data-bs-theme="dark"] {
  /* Same product, dark parity. Deep neutral, not pure black. */
  --tc-bg:               #09090b;    /* zinc-950 */
  --tc-bg-sunken:        #18181b;    /* zinc-900 */
  --tc-surface:          #18181b;    /* near-black cards */
  --tc-border:           #27272a;    /* zinc-800 */
  --tc-border-strong:    #3f3f46;    /* zinc-700 */
  --tc-text:             #fafafa;   /* zinc-50 */
  --tc-muted:            #a1a1aa;    /* zinc-400 */
  --tc-text-strong:      #fafafa;

  --tblr-primary:        #e63950;    /* lighter DIS red for dark */
  --tblr-primary-rgb:    230, 57, 80;
  --tblr-primary-dark:   #c41e3a;
  --tblr-primary-lt:     #2d0a13;    /* deep red tint */

  --tc-brand:            #e63950;
  --tc-brand-rgb:        230, 57, 80;
  --tc-brand-fg:         #09090b;
  --tc-brand-tint:       #2d0a13;     /* deep red tint, opaque — visible on near-black surfaces */
  --tc-brand-surface:    #2d0a13;

  /* DIS blue accent — dark parity */
  --tc-dis-blue:         #3a6de0;
  --tc-dis-blue-dark:    #1e4db8;
  --tc-dis-blue-light:   #6b8df0;
  --tc-dis-blue-tint:    #0e1a3d;

  --tc-success:          #22c55e;
  --tc-danger:           #f87171;
  --tc-warning:          #fbbf24;

  --tc-sidebar-bg:       #09090b;
  --tc-sidebar-fg:       #fafafa;
  --tc-sidebar-muted:    #71717a;
  --tc-sidebar-active-bg: rgba(58, 109, 224, 0.12);   /* DIS blue-light tint */
  --tc-sidebar-active-fg: #6b8df0;                    /* DIS blue-light, readable on dark */
  --tc-sidebar-divider:   #18181b;

  --tc-shadow-card:      0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  --tc-shadow-card-hover: 0 1px 2px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.5),
                          0 0 0 1px rgba(255,255,255,0.06);
  --tc-shadow-pop:       0 8px 24px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}

/* =========================================================================
   Base typography
   ========================================================================= */

body {
  background: var(--tc-bg);
  color: var(--tc-text);
  font-family: var(--tc-font);
  font-size: 0.9375rem;          /* 15px body */
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;              /* NOT 700 — 700 reads heavy (v3 choice) */
  letter-spacing: -0.011em;
  color: var(--tc-text-strong);
}
.h1, h1 { font-size: 1.5rem; line-height: 1.25; }
.h2, h2 { font-size: 1.25rem; line-height: 1.3; }
.h3, h3 { font-size: 1.0625rem; line-height: 1.4; }
.h4, h4 { font-size: 0.9375rem; }
.text-secondary, .text-muted { color: var(--tc-muted) !important; }

/* Tabular numerals for stats / hours so digits align. */
.tnum, .stat-value, .hero-value, .display-6, .table .text-end, code {
  font-feature-settings: "tnum" 1, "cv01" 1;
}

code {
  font-family: var(--tc-mono);
  font-size: 0.8125em;
  color: var(--tc-text);
  background: var(--tc-bg-sunken);
  border: 1px solid var(--tc-border);
  padding: 0.08em 0.4em;
  border-radius: var(--tc-radius-sm);
}

a { color: var(--tc-dis-blue); text-decoration: none; }
a:hover { color: var(--tc-dis-blue-dark); text-decoration: underline; }

/* =========================================================================
   Surfaces — shadow cards, no borders
   ========================================================================= */

.card {
  background: var(--tc-surface);
  border: 0;
  border-radius: var(--tc-radius);
  box-shadow: var(--tc-shadow-card);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--tc-border);
  padding: 0.875rem 1.25rem;
  font-weight: 500;
}
.card-body { padding: 1.25rem; }
.card-title { font-weight: 600; font-size: 1rem; margin: 0; }

/* =========================================================================
   Sidebar — light surface, brand-tinted active state (no rail)
   ========================================================================= */

.page .navbar-vertical {
  width: var(--tc-sidebar-width);
  min-height: 100vh;
  position: fixed;
  top: 0; left: 0;
  z-index: 1030;
  background: var(--tc-sidebar-bg) !important;
  border-right: 1px solid var(--tc-border) !important;
}
.page .navbar-vertical + .page-wrapper {
  margin-left: var(--tc-sidebar-width);
  min-height: 100vh;
  background: var(--tc-bg);
}
.page .navbar-brand {
  color: var(--tc-sidebar-fg) !important;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.011em;
}
.page .navbar-brand .avatar {
  background: var(--tc-brand) !important;
  color: var(--tc-brand-fg) !important;
}

.page .nav-link {
  color: var(--tc-sidebar-fg);
  border-radius: var(--tc-radius-sm);
  padding: 0.5rem 0.75rem;
  margin: 2px 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  position: relative;
  display: flex;
  align-items: center;
  transition: background .12s ease, color .12s ease;
}
.page .nav-link:hover {
  background: var(--tc-bg-sunken);
  color: var(--tc-sidebar-fg);
}
.page .nav-link i { color: var(--tc-sidebar-muted); transition: color .12s ease; }

/* Active state: subtle background tint + brand-colored icon and label.
   No vertical rail. */
.page .nav-link.active {
  background: var(--tc-sidebar-active-bg);
  color: var(--tc-sidebar-active-fg);
}
.page .nav-link.active i { color: var(--tc-sidebar-active-fg); }

.page .navbar-toggler {
  color: var(--tc-sidebar-fg);
  border-color: var(--tc-border);
}
.page .dropdown-menu {
  font-size: 0.875rem;
  border-radius: var(--tc-radius);
  box-shadow: var(--tc-shadow-pop);
  border: 1px solid var(--tc-border);
}
.page .dropdown-item i { color: var(--tc-muted); }
.page .dropdown-item:hover { background: var(--tc-bg-sunken); }

/* User chip at sidebar bottom */
.page .border-top { border-color: var(--tc-sidebar-divider) !important; }
.page .btn-ghost-secondary {
  color: var(--tc-sidebar-fg);
  border-radius: var(--tc-radius-sm);
}
.page .btn-ghost-secondary:hover { background: var(--tc-bg-sunken); color: var(--tc-sidebar-fg); }
.page .btn-ghost-danger { color: var(--tc-danger); }
.page .btn-ghost-danger:hover { background: rgba(220,38,38,0.10); color: var(--tc-danger); }

/* =========================================================================
   Buttons — restrained, single brand accent
   ========================================================================= */

.btn { font-weight: 500; border-radius: var(--tc-radius-sm); }
.btn-lg { border-radius: var(--tc-radius-sm); }

.btn-primary,
.btn-primary:focus {
  --bs-btn-bg: var(--tc-brand);
  --bs-btn-border-color: var(--tc-brand);
  --bs-btn-hover-bg: var(--tblr-primary-dark);
  --bs-btn-hover-border-color: var(--tblr-primary-dark);
  --bs-btn-active-bg: var(--tblr-primary-dark);
  --bs-btn-active-border-color: var(--tblr-primary-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--tc-brand);
  --bs-btn-disabled-border-color: var(--tc-brand);
  background-color: var(--tc-brand) !important;
  border-color: var(--tc-brand) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary.show,
.btn-primary:first-child:active,
.btn-primary.active {
  background-color: var(--tblr-primary-dark) !important;
  border-color: var(--tblr-primary-dark) !important;
  color: #fff !important;
}
.btn-success { --bs-btn-bg: var(--tc-success); --bs-btn-border-color: var(--tc-success); }
.btn-danger  { --bs-btn-bg: var(--tc-danger);  --bs-btn-border-color: var(--tc-danger); }
.btn-warning {
  --bs-btn-bg: var(--tc-warning);
  --bs-btn-border-color: var(--tc-warning);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #b45309;
  --bs-btn-hover-border-color: #b45309;
  --bs-btn-hover-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--tblr-primary);
  --bs-btn-border-color: var(--tc-border);
  --bs-btn-bg: var(--tc-surface);
  --bs-btn-hover-bg: var(--tc-brand-tint);
  --bs-btn-hover-border-color: var(--tblr-primary);
  --bs-btn-hover-color: var(--tblr-primary-dark);
}
.btn-outline-secondary {
  --bs-btn-color: var(--tc-text);
  --bs-btn-border-color: var(--tc-border);
  --bs-btn-bg: var(--tc-surface);
  --bs-btn-hover-bg: var(--tc-bg-sunken);
  --bs-btn-hover-border-color: var(--tc-border-strong);
  --bs-btn-hover-color: var(--tc-text);
}
.btn-outline-success { --bs-btn-color: var(--tc-success); --bs-btn-border-color: var(--tc-border); --bs-btn-bg: var(--tc-surface); --bs-btn-hover-bg: rgba(22,163,74,0.10); --bs-btn-hover-border-color: var(--tc-success); }
.btn-outline-danger  { --bs-btn-color: var(--tc-danger);  --bs-btn-border-color: var(--tc-border); --bs-btn-bg: var(--tc-surface); --bs-btn-hover-bg: rgba(220,38,38,0.10);  --bs-btn-hover-border-color: var(--tc-danger); }
.btn-outline-warning { --bs-btn-color: var(--tc-warning); --bs-btn-border-color: var(--tc-border); --bs-btn-bg: var(--tc-surface); --bs-btn-hover-bg: rgba(217,119,6,0.10); --bs-btn-hover-border-color: var(--tc-warning); --bs-btn-hover-color: var(--tc-warning); }
.btn-outline-info     { --bs-btn-color: var(--tc-dis-blue); --bs-btn-border-color: var(--tc-border); --bs-btn-bg: var(--tc-surface); --bs-btn-hover-bg: var(--tc-dis-blue-tint); --bs-btn-hover-border-color: var(--tc-dis-blue); --bs-btn-hover-color: var(--tc-dis-blue-dark); }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; line-height: 1;
}
.btn-icon i { font-size: 0.95rem; }
.btn i, .nav-link i, .dropdown-item i { vertical-align: -0.125em; font-size: 1.05em; }

/* =========================================================================
   Forms — subtle focus ring (brand), neutral borders
   ========================================================================= */

.form-control, .form-select {
  border-color: var(--tc-border);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-surface);
  color: var(--tc-text);
  font-size: 0.875rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.18);
}
.form-floating > .form-control::placeholder,
.form-floating > .form-select::placeholder { color: transparent; }
.form-floating label { color: var(--tc-muted); }
.form-check-input:checked {
  background-color: var(--tblr-primary);
  border-color: var(--tblr-primary);
}
.form-check-input:focus { border-color: var(--tblr-primary); box-shadow: 0 0 0 2px rgba(var(--tblr-primary-rgb), 0.18); }
.form-hint { color: var(--tc-muted); font-size: 0.8125rem; }

/* =========================================================================
   Tables — relaxed rows, sticky header, hover tint
   ========================================================================= */

.table {
  --bs-table-bg: transparent;
  margin: 0;
  font-size: 0.875rem;
}
.table thead th {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--tc-muted);
  border-bottom: 1px solid var(--tc-border);
  background: var(--tc-bg-sunken);
  padding: 0.75rem 1rem;
  white-space: nowrap;
}
.table tbody td {
  padding: 0.625rem 1rem;
  vertical-align: middle;
  border-color: var(--tc-border);
  color: var(--tc-text);
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--tc-bg-sunken); }
.table tbody tr:hover > * { --bs-table-hover-bg: var(--tc-brand-tint); }
.table-bordered { border: 0; }
.table-bordered th, .table-bordered td { border: 1px solid var(--tc-border); }
.sticky-top { top: 0; z-index: 1020; }
.table form { margin: 0; }
.table .form-control-sm { padding: 0.3125rem 0.625rem; font-size: 0.8125rem; }
.table tfoot th { background: var(--tc-bg-sunken); border-top: 1px solid var(--tc-border); color: var(--tc-text); font-weight: 600; }

/* Badges — subtle, lowercase ok */
.badge {
  font-weight: 500;
  border-radius: var(--tc-radius-sm);
  font-size: 0.6875rem;
  padding: 0.28em 0.55em;
  letter-spacing: 0.01em;
}
.badge.bg-success { background: var(--tc-success) !important; }
.badge.bg-danger  { background: var(--tc-danger)  !important; }
.badge.bg-warning { background: var(--tc-warning) !important; color: #fff !important; }
.badge.bg-secondary { background: var(--tc-muted) !important; }

/* List-group (admin dashboard) */
.list-group-flush > .list-group-item { border-color: var(--tc-border); }

/* =========================================================================
   Alerts — subtle, single border + tint
   ========================================================================= */

.alert {
  border-radius: var(--tc-radius-sm);
  border: 1px solid var(--tc-border);
  background: var(--tc-surface);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.alert-warning { background: rgba(217,119,6,0.08); border-color: rgba(217,119,6,0.25); color: var(--tc-text); }
.alert-success { background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.25); color: var(--tc-text); }
.alert-danger  { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.25); color: var(--tc-text); }
.alert-info, .alert-primary {
  background: var(--tc-brand-tint);
  border-color: rgba(var(--tblr-primary-rgb), 0.25);
  color: var(--tc-text);
}
.alert-secondary { background: var(--tc-bg-sunken); border-color: var(--tc-border); }

/* =========================================================================
   Layout helpers
   ========================================================================= */

.container-xl { max-width: 1180px; }
.page-header { padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--tc-border); }
.page-header .page-title { font-size: 1.5rem; font-weight: 600; margin: 0; letter-spacing: -0.011em; }
.page-header .page-subtitle { font-size: 0.8125rem; color: var(--tc-muted); margin: 0.125rem 0 0; }

/* Centered error / login-ish single column fallback (kept for error.html) */
.page-center { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.container-tight { max-width: 28rem; }
.empty-header {
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--tc-brand);
  letter-spacing: -0.03em;
  font-feature-settings: "tnum" 1;
}
.empty-title { font-size: 1.25rem; font-weight: 600; }
.empty-subtitle { color: var(--tc-muted); }

/* =========================================================================
   Login — edge-to-edge two-pane split (Notion/Linear/Vercel pattern).
   Left pane (brand, 60%) is a brand-tinted surface with the company name
   and tagline; right pane (form, 40%) is white. Replaces the prior
   42rem centered card (brief §3).
   ========================================================================= */

.login-shell {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  min-height: 100vh;
  background: var(--tc-surface);
}
.login-pane__brand {
  background: var(--tc-brand-surface);
  padding: 4rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.login-pane__brand::after {
  /* decorative element — large faint DIS-red ring, anchored bottom-left */
  content: "";
  position: absolute;
  left: -8rem; bottom: -10rem;
  width: 26rem; height: 26rem;
  border-radius: 50%;
  background: rgba(196, 30, 58, 0.10);
  pointer-events: none;
}
.login-pane__form {
  padding: 3rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--tc-surface);
}
.login-pane__brand .login-lockup { margin-bottom: 2.5rem; }
.login-pane__brand .login-tagline {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.011em;
  color: var(--tc-text-strong);
  max-width: 24rem;
  margin: 0;
}
.login-pane__brand .login-tagline-sub {
  font-size: 1rem;
  color: var(--tc-muted);
  margin: 1rem 0 0;
  max-width: 26rem;
}
.login-pane__brand .login-foot {
  font-size: 0.8125rem;
  color: var(--tc-muted);
  position: relative;
  z-index: 1;
}

/* Right-pane form blocks: NFC primary (brand-tinted), password alt (white).
   Stacked vertically — no card wrapper, no hairline (brief §1c, §3). */
.login-block {
  padding: 1.5rem;
  border-radius: var(--tc-radius);
  margin-bottom: 1.25rem;
}
.login-block--nfc { background: var(--tc-brand-surface); }
.login-block--pw  { background: transparent; padding-left: 1.5rem; padding-right: 1.5rem; }
.login-form-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  letter-spacing: -0.011em;
}
.login-form-sub { font-size: 0.9375rem; color: var(--tc-muted); margin: 0 0 1.75rem; }

/* =========================================================================
   Login (legacy centered split — kept for any non-/-routes that fall back
   here; the two-pane .login-shell above supersedes it for /login)
   ========================================================================= */

.login-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 28rem;
  background: var(--tc-surface);
  border-radius: var(--tc-radius);
  box-shadow: var(--tc-shadow-pop);
  overflow: hidden;
}
.login-split__nfc {
  background: var(--tc-brand-surface);
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.login-split__pw {
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* no hairline — the color difference between the DIS-red NFC pane and
     the white password pane is the divider (brief §1c). */
}
.login-split__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--tc-muted);
  margin-bottom: 0.75rem;
}
.login-split__hint { font-size: 0.8125rem; color: var(--tc-muted); margin-top: 0.5rem; }

/* Brand lockup — used on both login compositions. Bumped from 1.125rem
   to 1.875rem per brief §4; subtitle from 0.8125rem to 0.9375rem. */
.login-lockup {
  display: flex; align-items: center; gap: 0.85rem;
  margin-bottom: 2.25rem;
}
.login-lockup .avatar { background: var(--tc-brand); color: var(--tc-brand-fg); }
.login-lockup h1 { font-size: 1.875rem; font-weight: 600; margin: 0; letter-spacing: -0.011em; line-height: 1.2; }
.login-lockup p { font-size: 0.9375rem; color: var(--tc-muted); margin: 0.25rem 0 0; }

@media (max-width: 720px) {
  .login-split { grid-template-columns: 1fr; min-height: auto; }
  .login-split__nfc { padding: 1.75rem 1.5rem 1rem; }
  .login-split__pw { padding: 1.75rem 1.5rem; }
  .login-shell { grid-template-columns: 1fr; min-height: auto; }
  .login-pane__brand { padding: 2.5rem 1.75rem 1.5rem; }
  .login-pane__brand .login-tagline { font-size: 1.5rem; }
  .login-pane__form { padding: 2rem 1.75rem; }
}

/* =========================================================================
   Dashboard composition: hero + stat grid
   ========================================================================= */

.hero-card {
  background: var(--tc-surface);
  border: 0;
  border-radius: var(--tc-radius);
  box-shadow: var(--tc-shadow-card);
  padding: 1.5rem 1.75rem;
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  /* Status indicator: a small dot + tinted top accent, no left rail. */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tc-muted);
}
.hero-card.is-in::before    { background: var(--tc-success); }
.hero-card.is-lunch::before { background: var(--tc-warning); }
.hero-card.is-out::before   { background: var(--tc-muted); }
.hero-card .hero-label {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tc-muted); font-weight: 600;
}
.hero-card .hero-value {
  font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: 0.25rem 0 0;
  letter-spacing: -0.011em; font-feature-settings: "tnum" 1;
}
.hero-card .hero-meta { font-size: 0.8125rem; color: var(--tc-muted); margin-top: 0.25rem; }

/* Stat cards: shadow, no border, brand-tinted icon avatar. */
.stat-card {
  background: var(--tc-surface);
  border: 0;
  border-radius: var(--tc-radius);
  box-shadow: var(--tc-shadow-card);
  padding: 1.25rem;
  height: 100%;
  transition: box-shadow .15s ease;
}
.stat-card:hover { box-shadow: var(--tc-shadow-card-hover); }
.stat-card .stat-label {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tc-muted); font-weight: 600;
}
.stat-card .stat-value {
  font-size: 1.875rem; font-weight: 600; line-height: 1.1; margin: 0.25rem 0;
  letter-spacing: -0.011em; color: var(--tc-text-strong);
}
.stat-card .stat-foot { font-size: 0.75rem; color: var(--tc-muted); }

/* Brand-tinted icon avatar (replaces v3 filled colored circles). */
.avatar-tint {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--tc-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tc-brand-tint);
  color: var(--tblr-primary);
  font-size: 1.125rem;
  flex: 0 0 auto;
}
.avatar-tint-sm { width: 2rem; height: 2rem; font-size: 0.9375rem; }
.avatar-tint-lg { width: 3rem; height: 3rem; font-size: 1.5rem; }

/* Status dot for inline use */
.status-dot {
  width: 0.5rem; height: 0.5rem; border-radius: var(--tc-radius-pill);
  display: inline-block; vertical-align: middle;
  background: var(--tc-muted);
}
.status-dot.is-in    { background: var(--tc-success); }
.status-dot.is-lunch { background: var(--tc-warning); }
.status-dot.is-out   { background: var(--tc-muted); }

/* =========================================================================
   Terminal / kiosk — dark-forced, DIS-red-on-near-black status pill
   ========================================================================= */

.kiosk-bg {
  background: #09090b;          /* zinc-950, matches dark-mode bg */
  color: #fafafa;
  min-height: 100vh;
}
.kiosk-bg .card {
  background: #18181b;          /* zinc-900 */
  border: 0;
  border-radius: var(--tc-radius);
  box-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}
.terminal-clock {
  font-size: 6.5vw;
  font-weight: 600;
  font-family: var(--tc-mono);
  letter-spacing: -0.04em;
  color: #fafafa;
  font-feature-settings: "tnum" 1;
}
.status-pill {
  font-size: 1.5rem;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border-radius: var(--tc-radius-pill);
  display: inline-block;
  letter-spacing: 0.02em;
}
.status-in    { background: var(--tc-success); color: #fff; }
.status-out   { background: #27272a; color: #a1a1aa; }
.status-lunch { background: var(--tc-warning); color: #fff; }
.scan-input {
  background: #09090b;
  border: 1px solid #27272a;
  color: #fafafa;
  border-radius: var(--tc-radius-sm);
}
.scan-input::placeholder { color: #52525b; }
.scan-input:focus {
  border-color: var(--tc-brand);
  box-shadow: 0 0 0 3px rgba(var(--tc-brand-rgb), 0.18);
}
.last-events { max-height: 38vh; overflow-y: auto; }
.mode-btn {
  font-size: 1.05rem;
  padding: 0.7rem 1rem;
  border-radius: var(--tc-radius-sm);
  opacity: 0.55;
  transition: opacity .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mode-btn.is-active {
  opacity: 1;
  border-color: var(--tc-brand);
  box-shadow: 0 0 0 3px rgba(var(--tc-brand-rgb), 0.18);
}
@media (max-width: 768px) { .terminal-clock { font-size: 11vw; } }

/* Hide nav on terminal page */
.hide-nav .page .navbar-vertical { display: none; }
.hide-nav .page .navbar-vertical + .page-wrapper { margin-left: 0; }

/* =========================================================================
   Responsive sidebar collapse
   ========================================================================= */

@media (max-width: 992px) {
  .page .navbar-vertical { position: relative; width: 100%; min-height: auto; }
  .page .navbar-vertical + .page-wrapper { margin-left: 0; }
}

@media print {
  .navbar-vertical, .alert, .btn, form, .btn-group, .page-header { display: none !important; }
  .page .navbar-vertical + .page-wrapper { margin-left: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; }
  .table { font-size: 0.8125rem; }
}
/* =========================================================================
   DIS logo theme swap — light/dark variants
   ========================================================================= */

html[data-bs-theme="light"] .tc-logo-dark { display: none !important; }
html[data-bs-theme="light"] .tc-logo-light { display: inline !important; }
html[data-bs-theme="dark"] .tc-logo-dark { display: inline !important; }
html[data-bs-theme="dark"] .tc-logo-light { display: none !important; }