/* Timeclock — styles.css
 * Implements DESIGN.md (the design system) verbatim. If you need to add a
 * new rule, add the source-of-truth entry to DESIGN.md first, then mirror it
 * here. The order below matches DESIGN.md's section numbering.
 */

/* ---------------------------------------------------------------- 1. Type */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/Inter-Variable.woff2') format('woff2-variations'),
       url('/static/fonts/Inter-Variable.woff2') format('woff2');
}

/* ---------------------------------------------------------------- 2. Color */

:root {
  /* Brand */
  --accent:    #FFDA1F;  /* Dynamic Systems yellow — backgrounds + stripes only */
  --accent-dk: #d4b113;  /* darker yellow for hover/visited */
  --brand-bg:  #000000;
  --brand-on:  #ffffff;

  /* Punch state (universal traffic-light, NOT brand) */
  --in:        #16a34a;
  --out:       #dc2626;
  --open:      #f59e0b;

  /* Surface + text */
  --bg:        #ffffff;
  --surface:   #ffffff;
  --fg:        #0a0a0a;
  --muted:     #6b7280;
  --border:    #e5e7eb;
  --ot-bg:     #fef3c7;
  --wk-bg:     #f9fafb;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;

  --r: 8px;
  --r-punch: 16px;
}

/* ---------------------------------------------------------------- 3-4. Reset + base */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0 0 var(--s-3) 0; line-height: 1.2; font-weight: 700; }
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
p { margin: 0 0 var(--s-3) 0; }

/* Links: black text with a yellow underline (dynsys brand pattern — yellow
   as accent, never as text on white because of contrast). */
a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:visited {
  color: #404040;
  text-decoration-color: var(--accent-dk);
}
a:hover { text-decoration-color: var(--accent-dk); }
.link { color: var(--fg); text-decoration-color: var(--accent); }

.muted { color: var(--muted); }

/* Focus rings are universal and visible. Never disable. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r);
}
.btn-punch:focus-visible { outline-width: 4px; }

/* ---------------------------------------------------------------- 5. Buttons */

.btn {
  display: inline-block;
  min-height: 48px;
  padding: 12px 24px;
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: transform 80ms ease, background 80ms ease, opacity 80ms ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Primary button — dynsys brand pattern: black bg with white text, yellow
   bottom-stripe accent. Yellow is NEVER a button background with white text
   (fails contrast — see DESIGN.md §2). */
.btn-primary {
  background: var(--brand-bg);
  color: var(--brand-on);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 10px; /* keep total height same as 12px padding + 2px stripe */
}
.btn-primary:hover { background: #1f1f1f; }

.btn-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--fg);
}
.btn-secondary:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.btn-danger {
  background: var(--out);
  color: white;
}
.btn-danger:hover { background: #b91c1c; }

.btn-block { display: block; width: 100%; }

/* The punch button — the whole product on mobile. */
.btn-punch {
  display: block;
  width: 100%;
  min-height: 240px;
  padding: var(--s-4);
  font-size: 32px;
  font-weight: 700;
  color: white;
  border-radius: var(--r-punch);
  border: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 80ms ease, background 200ms ease, opacity 200ms ease;
  position: relative;
}
.btn-punch:active { transform: scale(0.97); }
.btn-punch-in  { background: var(--in); }
.btn-punch-out { background: var(--out); }
.btn-punch:disabled,
.btn-punch.is-loading {
  opacity: 0.6;
  cursor: wait;
}

/* HTMX-aware loading state for the punch button. */
.htmx-request .btn-punch,
.btn-punch.htmx-request {
  opacity: 0.6;
  pointer-events: none;
}

/* ---------------------------------------------------------------- 6. State patterns */

.flash {
  padding: var(--s-3);
  margin: 0 0 var(--s-3) 0;
  border-radius: var(--r);
  font-size: 14px;
}
.flash-error   { background: #fee2e2; color: #991b1b; border-left: 4px solid var(--out); }
.flash-success { background: #d1fae5; color: #065f46; border-left: 4px solid var(--in); }
.flash-info    { background: #dbeafe; color: #1e40af; border-left: 4px solid #3b82f6; }

/* Inline punch confirmation (the "you're done for the day" hero moment). */
.punch-confirm {
  margin-top: var(--s-4);
  padding: var(--s-3);
  text-align: left;
}
.punch-confirm .check {
  color: var(--in);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: var(--s-2);
}
.punch-confirm .today {
  font-size: 32px;
  font-weight: 700;
}
.punch-confirm .period {
  font-size: 20px;
  color: var(--muted);
  margin-top: var(--s-1);
}
.punch-confirm .error { color: var(--out); }

/* "Still open" left-border treatment — used on staff history rows AND admin
   dashboard rows. Reserved for this single semantic meaning per DESIGN.md
   anti-pattern rule. */
.row-still-open {
  border-left: 4px solid var(--open);
  padding-left: var(--s-3);
}
.row-still-open .open-status {
  color: var(--open);
  font-size: 13px;
  font-weight: 600;
}

/* Payroll detail: empty calendar day (no punches). Subtle so worked days
   still pop while missed/off days are visible at a glance. */
tr.row-empty { background: var(--wk-bg); }
tr.row-empty td { color: var(--muted); }

.dot-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--open);
  margin-right: var(--s-1);
  animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Correction request inline cards (DESIGN.md §6.6). */
.correction-card {
  margin: var(--s-2) 0;
  padding: var(--s-2) var(--s-3);
  font-size: 14px;
  border-radius: var(--r);
}
.correction-card.pending {
  background: var(--ot-bg);
  border-left: 4px solid var(--open);
  color: #78350f;
}
.correction-card.rejected {
  background: var(--border);
  border-left: 4px solid var(--muted);
  color: var(--muted);
}

/* ---------------------------------------------------------------- 8. Voice — error pages */

.error-page { max-width: 480px; margin: var(--s-6) auto; padding: var(--s-4); }
.error-page h1 { font-size: 24px; }

/* ---------------------------------------------------------------- 9-10. Layout per viewport */

main { padding: var(--s-3); }

/* ---------------------------------------------------------------- BRAND TOPBAR
 * Sits at the top of every page — auth, staff, admin. White background with
 * the Dynamic Systems logo on the left and a 4px yellow stripe along the
 * bottom edge (the dynsys nav signature). Right side holds employee/admin
 * identity + logout when applicable. */

.brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border-bottom: 4px solid var(--accent);
  position: relative;
}
.brand-bar .brand-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 200px;
}
.brand-bar .brand-right {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 14px;
  color: var(--muted);
}
.brand-bar .brand-right form { display: inline; margin: 0; }
.brand-bar .brand-right button.logout-link {
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  padding: 0;
}

/* On mobile auth pages with no session, the brand-bar still shows (logo
   only, no right-side identity). */
.brand-bar.brand-bar-auth { justify-content: center; padding: var(--s-4); }

@media (max-width: 480px) {
  .brand-bar { padding: var(--s-2) var(--s-3); }
  .brand-bar .brand-logo { height: 32px; }
}

/* Mobile screens (staff): single-column, full-width minus 16px gutters. */
body.v-mobile main { max-width: 430px; margin: 0 auto; padding: var(--s-3); }

/* Admin screens: max 1280px, centered. */
body.v-admin main { max-width: 1280px; margin: 0 auto; padding: var(--s-4); }

/* Admin viewport bridge (DESIGN.md §"Admin viewport bridge"). */
@media (max-width: 1023px) {
  body.v-admin .admin-bridge-hide { display: none; }
  body.v-admin::before {
    content: 'Admin is best on a laptop or desktop.';
    display: block;
    padding: var(--s-3);
    background: var(--ot-bg);
    border-bottom: 1px solid var(--open);
    font-size: 14px;
    text-align: center;
    color: #78350f;
  }
}

/* ---------------------------------------------------------------- AUTH SCREENS */

.auth-page main.auth { max-width: 360px; }
.auth .brand { text-align: center; margin-top: var(--s-5); margin-bottom: var(--s-5); }
.auth .brand .admin-tag {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  vertical-align: middle;
  margin-left: var(--s-2);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.auth .welcome { text-align: center; font-size: 24px; margin-top: var(--s-5); }
.auth h2 { font-size: 24px; text-align: center; margin-bottom: var(--s-2); }
.auth p.muted { text-align: center; font-size: 14px; margin-bottom: var(--s-4); }
.auth .welcome-back { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: var(--s-3); }
.auth .auth-switch { text-align: center; margin-top: var(--s-4); font-size: 14px; }

.auth form { display: block; }
.auth label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-top: var(--s-3);
  margin-bottom: var(--s-1);
}
.auth label.pin-label { text-align: center; }
.auth input[type="text"], .auth input[type="password"], .auth input:not([type]) {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  font: inherit;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--fg);
}
.auth .btn { margin-top: var(--s-4); }

/* PIN pad. 3x4 grid of 64px round buttons (DESIGN.md §"Staff login"). */
.pinpad { display: block; text-align: center; }
.pin-display {
  margin: var(--s-3) 0;
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  min-height: 16px;
}
.pin-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  background: transparent;
  transition: background 80ms ease, border-color 80ms ease;
}
.pin-dot.on { background: var(--fg); border-color: var(--fg); }
.pin-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  max-width: 280px;
  margin: 0 auto;
}
.pin-key {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 60ms ease, background 60ms ease;
}
.pin-key:active { transform: scale(0.94); background: var(--wk-bg); }
.pin-key-back { font-size: 20px; }
.pin-key-blank {
  border: none;
  background: transparent;
  cursor: default;
  pointer-events: none;
}

/* ---------------------------------------------------------------- PUNCH PAGE (Task 4) */

.punch-page { text-align: center; }
.punch-page .name { font-size: 32px; font-weight: 700; margin-top: var(--s-3); }
.punch-page .wall-clock { font-size: 16px; color: var(--muted); margin-bottom: var(--s-4); }
.punch-page .status {
  margin-top: var(--s-4);
  font-size: 14px;
  color: var(--muted);
  text-align: left;
}
.punch-page .status .status-strong { color: var(--fg); font-weight: 600; font-size: 16px; }
.punch-page .today-list {
  margin-top: var(--s-4);
  font-size: 13px;
  color: var(--muted);
  text-align: left;
}
.punch-page .today-list h3 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--s-1); }
.punch-page .today-list ul { list-style: none; padding: 0; margin: 0; }
.punch-page .today-list li { padding: var(--s-1) 0; }

.dopamine {
  font-size: 48px;
  font-weight: 700;
  text-align: center;
}
.dopamine-label { font-size: 16px; color: var(--muted); text-align: center; }
.dopamine-sub { font-size: 14px; color: var(--muted); text-align: center; margin-top: var(--s-1); }

/* ---------------------------------------------------------------- PAY PERIOD (Task 5) */

.period-page .total { margin: var(--s-4) 0; }
.period-page .day-table { width: 100%; border-collapse: collapse; margin-top: var(--s-3); }
.period-page .day-table th, .period-page .day-table td {
  padding: var(--s-2);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.period-page .day-table .col-hours { text-align: right; font-variant-numeric: tabular-nums; }
.period-page .day-table tr.has-open .col-hours { color: var(--muted); }

.period-page .period-picker { margin-top: var(--s-4); }
.period-page .period-picker select {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s-3);
  font: inherit;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
.period-page .back { display: inline-block; margin-top: var(--s-4); }
.period-page .report-problem {
  font-size: 13px;
  color: var(--accent);
  text-decoration: underline;
  margin-left: var(--s-2);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

/* ---------------------------------------------------------------- ADMIN DASHBOARD (Task 6) */

.readiness {
  padding: var(--s-3);
  border-radius: var(--r);
  margin-bottom: var(--s-5);
  font-size: 16px;
  font-weight: 600;
}
.readiness-green { background: #d1fae5; color: #065f46; border-left: 4px solid var(--in); }
.readiness-yellow { background: var(--ot-bg); color: #78350f; border-left: 4px solid var(--open); }

.dash-section {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border);
}
.dash-section:last-child { border-bottom: none; }
.dash-section header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-3);
}
.dash-section header h2 {
  font-size: 18px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.dash-section header .count { color: var(--muted); font-size: 14px; margin-left: var(--s-1); }
.dash-section .badge {
  display: inline-block;
  background: var(--out);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: var(--s-2);
}

/* Discrete clickable rows (employees, on-the-clock, corrections) ARE cards.
   Section dividers ARE NOT. Per DESIGN.md anti-pattern rule. */
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: var(--s-2);
}
.row .row-meta { color: var(--muted); font-size: 13px; }
.row.row-still-open {
  border-left: 4px solid var(--open);
  padding-left: var(--s-3);
}

/* ---- Admin dashboard: dense / data-tools layout (V3) ----
   Tabular sections, tight rows, max info per vertical inch. All rules
   namespaced under .admin-dash so they don't touch the other admin pages. */

.admin-dash main { max-width: 1100px; padding: 16px 24px; }

.admin-dash .work-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}
.admin-dash .work-head h1 { font-size: 20px; margin: 0; }
.admin-dash .work-head .meta { color: var(--muted); font-size: 14px; }

.admin-dash .quickbar {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.admin-dash .quickbar .btn { min-height: 36px; padding: 6px 14px; font-size: 14px; }

.admin-dash .dense-section { margin-bottom: var(--s-4); }
.admin-dash .dense-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 0 8px 0;
  border-bottom: 2px solid var(--fg);
}
.admin-dash .dense-head h2 {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.admin-dash .dense-head .count {
  background: var(--fg);
  color: var(--brand-on);
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.admin-dash .dense-head .count.warn { background: var(--out); }
.admin-dash .dense-head .head-action { margin-left: auto; }
.admin-dash .dense-head .head-action a {
  font-size: 13px;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.admin-dash table.dense {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-dash table.dense th,
.admin-dash table.dense td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid var(--border);
}
.admin-dash table.dense th {
  font-weight: 600;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-dash table.dense td.num { font-variant-numeric: tabular-nums; }
.admin-dash table.dense tr.stale td:first-child {
  border-left: 3px solid var(--open);
  padding-left: 5px;
}
.admin-dash table.dense tbody tr:hover td { background: #fafafa; }
.admin-dash table.dense td.actions { text-align: right; white-space: nowrap; }
.admin-dash table.dense td.actions a {
  color: var(--fg);
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  margin-left: var(--s-2);
}
.admin-dash table.dense .empty-cell {
  color: var(--muted);
  padding: 16px 8px;
  text-align: center;
}

.admin-dash .status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.admin-dash .status-dot.on { background: var(--in); }
.admin-dash .status-dot.stale { background: var(--open); animation: dot-pulse 2s ease-in-out infinite; }

/* ---------------------------------------------------------------- PAYROLL (Task 7) */

.payroll-page .header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-4);
  gap: var(--s-3);
  flex-wrap: wrap;
}
.payroll-page .header-bar h1 { margin: 0; font-size: 24px; }
.payroll-page .header-actions { display: flex; gap: var(--s-3); align-items: center; }
.payroll-page .period-control select {
  min-height: 48px;
  padding: 0 var(--s-3);
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
.payroll-page .download-cta { font-size: 14px; }

.payroll-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.payroll-table thead { position: sticky; top: 0; background: var(--surface); }
.payroll-table th, .payroll-table td {
  padding: var(--s-2);
  font-size: 14px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}
.payroll-table th.employee-col, .payroll-table td.employee-col {
  position: sticky; left: 0; background: var(--surface);
  text-align: left;
  font-weight: 600;
  border-right: 1px solid var(--border);
}
.payroll-table td.weekend { background: var(--wk-bg); }
.payroll-table td.ot { background: var(--ot-bg); font-weight: 700; }
.payroll-table tr:hover td { background: var(--wk-bg); }
.payroll-table tr:hover td.employee-col { background: var(--wk-bg); }

/* ---------------------------------------------------------------- EMPLOYEE MGMT (Task 3) */

.emp-list { list-style: none; padding: 0; margin: 0; }
.emp-list li { padding: var(--s-2) 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.emp-list .inactive { color: var(--muted); }
.emp-actions { display: flex; gap: var(--s-2); }
.emp-actions .btn { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.emp-actions form { margin: 0; display: inline; }

.form-row { margin-bottom: var(--s-3); }
.form-row label { display: block; font-size: 14px; font-weight: 600; margin-bottom: var(--s-1); }
.form-row input, .form-row select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  font: inherit;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
.form-error { color: var(--out); font-size: 13px; margin-top: var(--s-1); }
.form-actions { margin-top: var(--s-4); display: flex; justify-content: space-between; align-items: center; }

/* ---------------------------------------------------------------- MANUAL ENTRY (Task 6) */

.manual-form { max-width: 560px; }
.time-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-2);
  align-items: end;
}
.time-pair .dash { padding-bottom: 14px; color: var(--muted); }

/* Labeled time cell (DESIGN.md §10 "Paired time inputs"): type="time" never
   renders placeholder text, so the caption lives inside the box. The label
   wraps the input — whole cell tappable, focus ring shown on the cell. */
.time-pair .time-cell {
  display: block;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  padding: 6px 12px 8px;
  font-weight: 400;
}
.time-pair .time-cell-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 2px;
}
.form-row .time-cell input[type="time"] {
  border: none;
  border-radius: 0;
  min-height: 32px;
  padding: 0;
  background: transparent;
}
.time-pair .time-cell:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.time-cell input[type="time"]:focus-visible { outline: none; }

/* ---------------------------------------------------------------- CORRECTION SHEET (Task 8) */

.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 100;
}
.sheet {
  background: var(--surface);
  border-radius: var(--r-punch) var(--r-punch) 0 0;
  width: 100%;
  max-width: 480px;
  padding: var(--s-4);
  max-height: 90vh;
  overflow-y: auto;
}
.sheet h2 { font-size: 20px; }
.sheet fieldset { border: none; padding: 0; margin: 0 0 var(--s-3) 0; }
.sheet legend { font-size: 14px; font-weight: 600; margin-bottom: var(--s-2); padding: 0; }
.sheet label.radio {
  display: flex;
  align-items: center;
  padding: var(--s-2);
  font-size: 16px;
  gap: var(--s-2);
  cursor: pointer;
}
.sheet input[type="radio"] { transform: scale(1.3); margin-right: var(--s-1); }

/* ---------------------------------------------------------------- PLACEHOLDER */

.placeholder { padding: var(--s-4); }
.placeholder h1 { margin-bottom: var(--s-3); }

/* ---------------------------------------------------------------- 12. PRINT (Task 7) */

@media print {
  body { background: white; color: black; }
  .brand-bar, .header-actions, .period-control, form, button, .btn { display: none !important; }
  body.v-admin::before { display: none !important; }
  .payroll-table thead { display: table-header-group; position: static; }
  .payroll-table tfoot { display: table-footer-group; }
  .payroll-table td.ot { background: white !important; font-style: italic; font-weight: 700; }
  .payroll-table td.weekend { background: white !important; }
  .payroll-page .header-bar h1 { font-size: 18px; }
  /* Each employee timesheet starts on its own page. We use a leading
     spacer div (.print-page-break) rather than page-break-before on the
     <section> itself — Chrome/Edge sometimes ignore break-before on
     siblings of tables with sticky/grouped headers, so an explicit
     empty break element is the most reliable trick. */
  .print-page-break {
    display: block;
    break-before: page;
    page-break-before: always;
    -webkit-column-break-before: page;
    height: 0;
  }
  .payroll-employee-section {
    break-inside: auto;
    page-break-inside: auto;
  }
  .payroll-employee-section header,
  .payroll-employee-section h2 {
    break-after: avoid;
    page-break-after: avoid;
  }
  /* Belt-and-suspenders: also try break-before on the section itself
     for browsers that honor it; the first one is exempt. */
  .payroll-employee-section + .payroll-employee-section {
    break-before: page;
    page-break-before: always;
  }
  @page { margin: 1in; }
}


/* Phase 4/5: banners surfaced on the punch page. Kept minimal — matches the
   flash-style color treatment so they read as informational, not alarming. */
.reminder-banner,
.action-hint,
.ios-install-banner {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.4;
}
.reminder-banner          { background: #fef3c7; color: #92400e; border-left: 4px solid #f59e0b; }
.reminder-banner-offsite  { background: #fee2e2; color: #991b1b; border-left: 4px solid #ef4444; }
.action-hint              { background: #dbeafe; color: #1e40af; border-left: 4px solid #3b82f6; }
.ios-install-banner {
  background: #f3f4f6;
  color: #111827;
  border-left: 4px solid #6b7280;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ios-install-banner[hidden] { display: none; }
.ios-install-dismiss {
  background: transparent;
  border: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  padding: 4px 8px;
}
.push-toggle {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 13px;
  padding: 4px 10px;
  cursor: pointer;
  color: inherit;
}
.push-toggle[disabled] { opacity: 0.6; cursor: default; }

.install-app {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 13px;
  padding: 4px 10px;
  cursor: pointer;
  color: inherit;
}