/* ─── Design tokens ─────────────────────────────────────────────────────── */
/* Base values are plain sRGB hex/rgba so the kiosk still renders on browsers
   without oklch()/color-mix() support (pre-Chrome 111 / Safari 15.4). A var()
   holding an unparseable color invalidates the whole declaration, which used
   to make e.g. the green Continue button vanish instead of falling back.
   The oklch() versions are layered on top inside @supports further down. */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Light theme */
  --bg:        #faf8f4;
  --bg-elev:   #ffffff;
  --bg-sunk:   #f3f0ea;
  --ink:       #1c222b;
  --ink-2:     #50565e;
  --ink-3:     #8b8f97;
  --line:      #e4e1db;
  --line-strong: #d1cdc7;

  /* Sage accent */
  --accent:      #5bae5f;
  --accent-ink:  #0b3e12;
  --accent-soft: #dbf3db;

  /* Accent/danger derivatives (were color-mix()) */
  --accent-border: #418145;
  --accent-press:  #4e9752;
  --accent-glow:   rgba(91,174,95,0.55);
  --accent-ring:   rgba(91,174,95,0.50);
  --accent-pulse:  rgba(91,174,95,0.40);
  --accent-line:   rgba(91,174,95,0.30);
  --accent-line-2: rgba(91,174,95,0.25);

  --danger:        #da534f;
  --danger-soft:   #ffe7e4;
  --danger-border: #943633;
  --danger-press:  #bd4744;
  --danger-glow:   rgba(218,83,79,0.50);

  --warn:      #eba941;
  --warn-soft: #ffefd5;
  --warn-ink:  #241100;
  --warn-line: rgba(235,169,65,0.50);

  --scrim: rgba(0,0,0,0.40);

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.03);
  --shadow:    0 2px 4px rgba(0,0,0,0.04), 0 12px 28px -8px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 16px -4px rgba(0,0,0,0.08), 0 24px 48px -12px rgba(0,0,0,0.18);
}

/* ─── Dark theme ────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:        #07090d;
  --bg-elev:   #0e1217;
  --bg-sunk:   #030407;
  --ink:       #eeebe5;
  --ink-2:     #a1a5ab;
  --ink-3:     #66696f;
  --line:      #21242a;
  --line-strong: #31363d;

  --accent:      #67bb6b;
  --accent-ink:  #c6e9c6;
  --accent-soft: #09200b;

  --accent-border: #4b8a4e;
  --accent-press:  #59a25c;
  --accent-glow:   rgba(103,187,107,0.55);
  --accent-ring:   rgba(103,187,107,0.50);
  --accent-pulse:  rgba(103,187,107,0.40);
  --accent-line:   rgba(103,187,107,0.30);
  --accent-line-2: rgba(103,187,107,0.25);

  --danger:        #ef6661;
  --danger-soft:   #2e100e;
  --danger-border: #a2433f;
  --danger-press:  #d05853;
  --danger-glow:   rgba(239,102,97,0.50);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.2);
  --shadow:    0 2px 4px rgba(0,0,0,0.3), 0 12px 28px -8px rgba(0,0,0,0.45);
  --shadow-lg: 0 8px 16px -4px rgba(0,0,0,0.4), 0 24px 48px -12px rgba(0,0,0,0.6);
}

/* ─── Wide-gamut upgrade ────────────────────────────────────────────────── */
/* Modern browsers get the original oklch() tokens. Everything below this
   block references the variables only, so both paths render identically
   apart from color fidelity. */
@supports (color: oklch(0.5 0.1 145)) {
  :root {
    --bg:        oklch(0.98 0.006 85);
    --bg-elev:   oklch(1 0 0);
    --bg-sunk:   oklch(0.955 0.008 85);
    --ink:       oklch(0.25 0.02 260);
    --ink-2:     oklch(0.45 0.015 260);
    --ink-3:     oklch(0.65 0.012 260);
    --line:      oklch(0.91 0.008 85);
    --line-strong: oklch(0.85 0.01 85);

    --accent:      oklch(0.68 0.14 145);
    --accent-ink:  oklch(0.32 0.09 145);
    --accent-soft: oklch(0.94 0.04 145);

    --danger:      oklch(0.62 0.17 25);
    --danger-soft: oklch(0.95 0.03 25);
    --warn:        oklch(0.78 0.14 75);
    --warn-soft:   oklch(0.96 0.04 75);
    --warn-ink:    oklch(0.2 0.05 70);

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.04), 0 2px 6px oklch(0 0 0 / 0.03);
    --shadow:    0 2px 4px oklch(0 0 0 / 0.04), 0 12px 28px -8px oklch(0 0 0 / 0.10);
    --shadow-lg: 0 8px 16px -4px oklch(0 0 0 / 0.08), 0 24px 48px -12px oklch(0 0 0 / 0.18);
  }

  [data-theme="dark"] {
    --bg:        oklch(0.14 0.01 260);
    --bg-elev:   oklch(0.18 0.012 260);
    --bg-sunk:   oklch(0.11 0.008 260);
    --ink:       oklch(0.94 0.008 85);
    --ink-2:     oklch(0.72 0.01 260);
    --ink-3:     oklch(0.52 0.01 260);
    --line:      oklch(0.26 0.012 260);
    --line-strong: oklch(0.33 0.014 260);

    --accent:      oklch(0.72 0.14 145);
    --accent-ink:  oklch(0.90 0.06 145);
    --accent-soft: oklch(0.22 0.05 145);

    --danger:      oklch(0.68 0.17 25);
    --danger-soft: oklch(0.22 0.05 25);

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3), 0 2px 6px oklch(0 0 0 / 0.2);
    --shadow:    0 2px 4px oklch(0 0 0 / 0.3), 0 12px 28px -8px oklch(0 0 0 / 0.45);
    --shadow-lg: 0 8px 16px -4px oklch(0 0 0 / 0.4), 0 24px 48px -12px oklch(0 0 0 / 0.6);
  }
}

/* Derived colors get the same treatment where color-mix() is available.
   color-mix() lands later than oklch() in Safari, so it needs its own test. */
@supports (color: color-mix(in oklch, red 50%, transparent)) {
  :root, [data-theme="dark"] {
    --accent-border: color-mix(in oklch, var(--accent) 80%, black);
    --accent-press:  color-mix(in oklch, var(--accent) 90%, black);
    --accent-glow:   color-mix(in oklch, var(--accent) 55%, transparent);
    --accent-ring:   color-mix(in oklch, var(--accent) 50%, transparent);
    --accent-pulse:  color-mix(in oklch, var(--accent) 40%, transparent);
    --accent-line:   color-mix(in oklch, var(--accent) 30%, transparent);
    --accent-line-2: color-mix(in oklch, var(--accent) 25%, transparent);

    --danger-border: color-mix(in oklch, var(--danger) 75%, black);
    --danger-press:  color-mix(in oklch, var(--danger) 90%, black);
    --danger-glow:   color-mix(in oklch, var(--danger) 50%, transparent);

    --warn-line: color-mix(in oklch, var(--warn) 50%, transparent);
    --scrim:     color-mix(in oklch, black 40%, transparent);
  }
}

/* ─── Reset / base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  height: 100%;
  overflow: hidden;
}

button, input, select, textarea { font-family: inherit; }

:focus-visible {
  outline: 3px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ─── Animations ────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 var(--accent-pulse); }
  70%  { box-shadow: 0 0 0 18px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes tick {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ─── App shell ─────────────────────────────────────────────────────────── */
.app {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header" "content" "footer";
}

/* ─── Header ────────────────────────────────────────────────────────────── */
header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.header-divider {
  width: 1px;
  height: 36px;
  background: var(--line);
}

/* Brand mark */
.brand-mark { display: flex; align-items: center; }
.brand-logo { height: 36px; width: auto; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }

/* Location chip */
.location-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-sunk);
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
  transition: border-color 120ms, color 120ms;
}
.loc-chip-chevron { opacity: 0.5; }
.location-chip-interactive { cursor: pointer; }
.location-chip-interactive:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.location-chip-interactive:hover .loc-chip-chevron { opacity: 1; }

/* Clock in header */
.header-clock {
  text-align: right;
  line-height: 1;
}

#clock {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -1px;
  color: var(--ink);
  text-align: right;
}

.clock-date {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
  font-weight: 500;
}

/* Navigation buttons */
.navigation-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink-2);
  transition: background 120ms;
}
.btn-icon:hover { background: var(--bg-sunk); }

/* Back button — styled as a pill */
#backBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  width: auto;
  background: var(--bg-sunk);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
#backBtn::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.hidden { display: none !important; }

/* ─── Pages / steps ─────────────────────────────────────────────────────── */
.page {
  display: none;
  grid-area: content;
  overflow-x: hidden;
  overflow-y: auto;
}

.step { display: none; }

.page.active { display: block; }
.step.active { display: block; }

.page.overlay.loading {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.page.overlay.loading.active {
  display: flex;
}

/* ─── Loading / splash ──────────────────────────────────────────────────── */
#insta-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 40px;
  animation: fadeIn 0.3s ease;
}

.splash-brand { display: flex; align-items: center; justify-content: center; }
.splash-logo { height: 56px; width: auto; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.splash-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2.5px solid var(--line-strong);
  border-top-color: var(--accent);
  animation: spin 0.75s linear infinite;
}

#splash-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  text-align: center;
  margin: 0;
}

/* ─── Login page ────────────────────────────────────────────────────────── */
.page.setup {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: auto;
}
.page.setup.active {
  display: flex;
  animation: fadeUp 400ms ease both;
}

.login.miniCard {
  width: min(520px, 100%);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 40px;
}

.login.miniCard .panel-heading {
  text-align: center;
  margin-bottom: 32px;
  padding: 0;
}

.login-icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.login-icon svg { width: 28px; height: 28px; }

.login.miniCard h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.6px;
}

.login.miniCard p {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 15px;
}

/* Login form */
#loginForm {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Override old Bootstrap input-group styles */
.input-group label.input-group-addon {
  display: block;
  padding: 0;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
  width: auto;
}

.form-control, input[type="text"], input[type="password"], input[type="number"], input[type="date"] {
  width: 100%;
  padding: 16px 18px;
  font-size: 18px;
  background: var(--bg-sunk);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  outline: none;
  transition: border-color 120ms;
  -webkit-appearance: none;
  appearance: none;
}

.form-control:focus, input[type="text"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="date"]:focus {
  border-color: var(--accent);
}

/* Submit/action buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.1px;
  cursor: pointer;
  border: none;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn:active { transform: scale(0.97); }

.btn-block { width: 100%; }

.btn-default {
  background: var(--bg-elev);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 14px 20px;
  font-size: 16px;
  border-radius: 14px;
  min-height: 52px;
}

.btn-lg {
  padding: 18px 24px;
  font-size: 18px;
  border-radius: 16px;
  min-height: 64px;
}

.btn-success {
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset,
              0 6px 14px -4px var(--accent-glow);
}
.btn-success:hover {
  background: var(--accent-press);
}

.btn-info {
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset,
              0 6px 14px -4px var(--accent-glow);
}

.btn-danger {
  background: var(--danger);
  color: white;
  border: 1px solid var(--danger-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset,
              0 6px 14px -4px var(--danger-glow);
}
.btn-danger:hover {
  background: var(--danger-press);
}

/* ─── Keypad step ───────────────────────────────────────────────────────── */
.step.employeeBadge {
  height: 100%;
  display: none;
  place-items: center;
  padding: 32px;
}
.step.employeeBadge.active {
  display: grid;
  animation: fadeUp 400ms ease both;
}

.step.employeeBadge .card {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Hide old panel chrome */
.step.employeeBadge .panel { background: none; border: none; box-shadow: none; }
.step.employeeBadge .panel-heading { display: none; }
.step.employeeBadge .panel-body { padding: 0; }

/* Step label */
.step-label {
  text-align: center;
}
.step-eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.step-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.8px;
  margin: 0;
}

/* Badge display */
.badge-display {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px;
  text-align: center;
}

.badge-display-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

#PunchNumber {
  font-family: var(--font-mono);
  font-size: 56px;
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--ink);
  min-height: 72px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: none;
  background: transparent;
  width: 100%;
  padding: 0;
  border-radius: 0;
  outline: none;
}

#PunchNumber:focus { border-color: transparent; }

/* Long inputs (e.g. the 17 digit logout code) must stay fully visible */
#PunchNumber.punch-number-long  { font-size: 40px; letter-spacing: 2px; }
#PunchNumber.punch-number-xlong { font-size: 26px; letter-spacing: 1px; }

/* Numpad table */
.punchInTable {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
  border-collapse: separate;
}

.punchInTable tbody { display: contents; }
.punchInTable tr    { display: contents; }

.punchInTable td {
  display: block;
  padding: 0;
}

.PunchPadBtn, #clearButton, #OpenEmployee {
  width: 100%;
  height: 84px;
  padding: 0;
  border-radius: 20px;
  background: var(--bg-elev);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 80ms, background 120ms;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#clearButton {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--bg-sunk);
}

#OpenEmployee {
  background: var(--accent);
  color: white;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  border: 1px solid var(--accent-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset,
              0 6px 14px -4px var(--accent-glow);
}

.PunchPadBtn:active, #clearButton:active {
  transform: scale(0.96);
  background: var(--accent-soft);
}

#OpenEmployee:active { transform: scale(0.97); }

/* ─── Employee picker step ──────────────────────────────────────────────── */
.step.punchOptions {
  height: 100%;
  display: none;
  padding: 48px 32px 32px;
  overflow-y: auto;
}
.step.punchOptions.active {
  display: block;
  animation: fadeUp 400ms ease both;
}

.step.employees {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.employees-inner {
  width: min(720px, 100%);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.step.punchOptions .employees button,
.step.punchOptions .employeeList button {
  width: 100%;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms, border-color 120ms;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin-bottom: 12px;
  min-height: auto;
}

.step.punchOptions .employees button:last-child,
.step.punchOptions .employeeList button:last-child {
  margin-bottom: 0;
}

.step.punchOptions .employees button:hover,
.step.punchOptions .employeeList button:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  background: var(--bg-elev);
}

.step.punchOptions .employeeList {
  width: min(720px, 100%);
  margin: 0 auto;
}

/* Employee avatar */
.employee-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}

.employee-info { flex: 1; min-width: 0; }
.employee-name { font-size: 20px; font-weight: 600; letter-spacing: -0.3px; }

.fontSizeSmall {
  font-size: 14px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 3px;
}

/* ─── Punch confirmation step ───────────────────────────────────────────── */
.step.punchConfirmation {
  height: 100%;
  display: none;
  overflow-y: auto;
  padding: 32px 32px 48px;
}
.step.punchConfirmation.active {
  display: block;
  animation: fadeUp 400ms ease both;
}

.punch-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
}

/* Confirmation card */
.punch-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Employee identity row */
.employee-identity {
  display: flex;
  align-items: center;
  gap: 18px;
}

.employee-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  flex-shrink: 0;
}

.employee-meta { min-width: 0; }

.employee-eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}

.employee-fullname {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.employee-role {
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 2px;
}

/* Status strip */
.status-strip {
  padding: 18px 20px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.status-strip.punched-out {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
}
.status-strip.punched-in {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line-2);
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.punched-in .status-dot {
  background: var(--accent);
  animation: pulseRing 2s infinite;
}
.punched-out .status-dot { background: var(--ink-3); }

.status-strip-label {
  font-size: 14px;
  font-weight: 600;
}
.punched-in .status-strip-label { color: var(--accent-ink); }
.punched-out .status-strip-label { color: var(--ink-2); }

.status-strip-sub {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* Punch form */
#punchConfirmationForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Meal deduction */
#mealDeductionGroup {
  padding: 16px 20px;
  background: var(--bg-sunk);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  transition: all 120ms;
  display: flex;
  align-items: center;
  gap: 14px;
}
#mealDeductionGroup[hidden] { display: none; }

#mealDeductionGroup label {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

#mealDeductionGroup label::before {
  content: '';
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1.5px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#mealDeduction:checked + label::before,
#mealDeductionGroup .fa-check-square ~ label::before {
  background: var(--accent);
  border-color: var(--accent);
}

.meal-label-text {
  font-size: 16px;
  font-weight: 600;
}
.meal-label-sub {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* Input labels in punch form */
#punchConfirmationForm .input-group label.input-group-addon {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

/* Punch buttons */
#punchInBtn, #punchOutBtn {
  width: 100%;
  min-height: 92px;
  font-size: 24px;
  font-weight: 700;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#punchInBtn:active, #punchOutBtn:active { transform: scale(0.98); }

/* Business date group */
.BusinessDateGroup { display: flex; flex-direction: column; }
.BusinessDateGroup label.input-group-addon { margin-bottom: 8px; }

/* Previous punches table */
.employeePreviousLogins {
  margin: 0;
}

/* Previous punch rows (right card) */
.prev-punch-row {
  display: grid;
  grid-template-columns: 52px 1fr 1fr 64px;
  align-items: center;
  padding: 13px 4px;
  border-top: 1px solid var(--line);
}
.prev-punch-row-first { border-top: none; }

.prev-punch-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.prev-punch-time {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink);
}
.prev-punch-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 5px;
}
.prev-punch-dur {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
  text-align: right;
}
.prev-punch-empty {
  padding: 24px 4px;
  font-size: 14px;
  color: var(--ink-3);
  text-align: center;
}

/* Working schedule table */
#employeeWorkingTable {
  margin-bottom: 16px;
  font-size: 14px;
}
#employeeWorkingTable th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-3);
  padding: 0 0 8px;
}
#employeeWorkingTable td {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 6px 0;
  color: var(--ink);
}

#splitter {
  border: none;
  border-top: 1px solid var(--line);
  margin: 16px 0;
}

/* History card (right column) */
.punch-history {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.history-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
}

.history-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.history-title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.history-sub {
  font-size: 13px;
  color: var(--ink-3);
}

.week-total {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--bg-sunk);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.week-total-label {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
}
.week-total-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
}

/* ─── Customer select heading ───────────────────────────────────────────── */
h1.customerSelect {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: center;
  margin: 0 0 8px;
}

/* ─── Modal overlay ─────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--scrim);
  display: none;
  place-items: center;
  padding: 24px;
  animation: fadeIn 180ms ease both;
}

.modal:not(.hidden) {
  display: grid;
}

.modal .confirm,
.modal .status,
.modal .alert {
  display: none;
}

.modal .confirm.active,
.modal .status.active,
.modal .alert.active {
  display: block;
  width: min(560px, calc(100vw - 48px));
}

.modal .card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeUp 260ms ease both;
}

.modal .panel { background: none; border: none; box-shadow: none; }

.modal .panel-heading {
  background: none;
  border-bottom: 1px solid var(--line);
  padding: 20px 24px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal .panel-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Modal buttons */
.modal button.btn {
  margin-bottom: 12px;
}
.modal button.btn:last-child { margin-bottom: 0; }

/* Business unit / punchConfirmation list buttons (legacy) */
.modal .businessUnitList button,
.modal .punchConfirmationStatus button {
  width: 100%;
  margin-bottom: 12px;
  font-size: 18px;
  cursor: pointer;
}

/* Location picker uses a wider card */
.confirm.customerSelectionModal { width: min(640px, calc(100vw - 48px)) !important; }

/* ─── Location picker modal ─────────────────────────────────────────────── */
.loc-picker-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 20px 24px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.loc-picker-heading-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.loc-picker-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.loc-picker-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.loc-picker-current {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}
.loc-search-section {
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.loc-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.loc-search-icon {
  position: absolute;
  left: 14px;
  color: var(--ink-3);
  pointer-events: none;
}
.loc-search-input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  font-size: 15px;
  background: var(--bg-sunk);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  outline: none;
  color: var(--ink);
  transition: border-color 120ms;
  box-sizing: border-box;
}
.loc-search-input:focus { border-color: var(--accent); }
.loc-search-clear {
  position: absolute;
  right: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.loc-search-count {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-3);
}

/* Location row */
.loc-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-sunk);
  color: var(--ink-3);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 120ms, color 120ms;
}
.loc-item-icon-active {
  background: var(--accent);
  color: white;
}
.loc-item-name { flex: 1; }
.loc-item-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 4px 10px;
  flex-shrink: 0;
}
.customer-item-current {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.customer-item-current:hover { background: var(--accent-soft); }

/* Location selector rows */
.customer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 6px;
  background: var(--bg-sunk);
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 120ms, border-color 120ms;
  box-sizing: border-box;
}
.customer-item:last-child { margin-bottom: 0; }
.customer-item:hover { background: var(--accent-soft); border-color: var(--accent); }
.customer-item:disabled { opacity: 0.5; cursor: default; }
.customer-item svg { flex-shrink: 0; color: var(--ink-2); }
.customer-item span { flex: 1; }
.customer-item .customer-item-arrow { color: var(--ink-3, var(--ink-2)); }

/* ─── Warning modal ─────────────────────────────────────────────────────── */
.modal .alert.warningModal .card {
  border-color: var(--warn-line);
}

.modal .alert.warningModal .panel-heading {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

/* ─── Punch status overlay ──────────────────────────────────────────────── */
.punchConfirmationStatus .body,
.punchConfirmationStatus .options {
  padding: 24px;
}

/* ─── Footer ────────────────────────────────────────────────────────────── */
footer {
  grid-area: footer;
  text-align: center;
  color: var(--ink-3);
  font-size: 12px;
  padding: 8px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  header { padding: 14px 16px; gap: 10px; }

  .location-chip { display: none; }

  .punch-grid {
    grid-template-columns: 1fr;
  }

  .step.punchConfirmation {
    padding: 20px 16px 40px;
  }

  .step.employeeBadge { padding: 20px 16px; }

  #PunchNumber { font-size: 40px; }
  #PunchNumber.punch-number-long  { font-size: 30px; letter-spacing: 1px; }
  #PunchNumber.punch-number-xlong { font-size: 20px; letter-spacing: 0.5px; }
  .PunchPadBtn, #clearButton, #OpenEmployee { height: 68px; font-size: 26px; }
}

/* ─── Fade-in for pages ─────────────────────────────────────────────────── */
.fade-in { animation: fadeIn 600ms ease both; }

/* ─── Remove old Bootstrap/FontAwesome remnants ─────────────────────────── */
.fa, .fad { display: none; }

/* Business unit filter */
#filterBusinessUnit {
  margin-bottom: 16px;
}

/* Settings panel rows */
.settings-panel-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 120ms;
}
.settings-row:hover { background: var(--bg-sunk); }
.settings-row svg { flex-shrink: 0; color: var(--ink-2); }

.settings-row-danger { color: var(--danger); }
.settings-row-danger svg { color: var(--danger); }
.settings-row-danger:hover { background: var(--danger-soft); }

/* Toggle pill */
.toggle-pill {
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: var(--line);
  position: relative;
  flex-shrink: 0;
  transition: background 200ms;
  pointer-events: none;
}
.toggle-pill::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  top: 3px;
  left: 3px;
  transition: transform 200ms;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-pill.on { background: var(--accent); }
.toggle-pill.on::after { transform: translateX(18px); }

/* Auth clearing modal */
.auth-clear-text {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 20px;
  color: var(--ink);
  text-align: center;
  line-height: 1.5;
}