/* =========================================================
   Chronos — Main Stylesheet
   ========================================================= */

/* ── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-bg:          #f4f6f9;
  --color-surface:     #ffffff;
  --color-border:      #e0e4eb;
  --color-text:        #1a1d23;
  --color-muted:       #6b7280;
  --color-primary:     #2563eb;
  --color-primary-dark:#1d4ed8;
  --color-success:     #16a34a;
  --color-warning:     #d97706;
  --color-danger:      #dc2626;
  --color-kiosk-bg:    #0f172a;
  --color-kiosk-card:  #1e293b;
  --color-kiosk-accent:#3b82f6;
  --radius:            10px;
  --shadow:            0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:         0 8px 32px rgba(0,0,0,.14);
  --font:              -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html, body { height: 100%; font-family: var(--font); color: var(--color-text); }
body { background: var(--color-bg); -webkit-text-size-adjust: 100%; }

/* Prevent iOS zoom on input focus */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Minimum touch target size */
button, .btn, a.btn { min-height: 44px; min-width: 44px; }

/* ── Utilities ──────────────────────────────────────────── */
.hidden { display: none !important; }
.mt-4  { margin-top: 1.5rem; }
.mb-4  { margin-bottom: 1.5rem; }

/* ── Alerts ─────────────────────────────────────────────── */
.alert {
  padding: .75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: .9rem;
}
.alert-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem 1.2rem; border-radius: var(--radius);
  font-size: .9rem; font-weight: 600; cursor: pointer;
  border: none; transition: background .15s, transform .08s;
  white-space: nowrap;
}
.btn:hover { opacity: .92; }
.btn:active { transform: scale(.97); }

.btn-primary  { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary { background: #e5e7eb; color: var(--color-text); }
.btn-danger   { background: var(--color-danger); color: #fff; }
.btn-success  { background: var(--color-success); color: #fff; }
.btn-warning  { background: var(--color-warning); color: #fff; }
.btn-ghost    { background: transparent; color: var(--color-muted); border: 1px solid var(--color-border); }
.btn-full     { width: 100%; }
.btn-sm       { padding: .3rem .8rem; font-size: .82rem; border-radius: 6px; }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: .15rem .55rem;
  border-radius: 999px; font-size: .78rem; font-weight: 600;
}
.badge-green { background: #dcfce7; color: #15803d; }
.badge-gray  { background: #f3f4f6; color: #6b7280; }
.badge-red   { background: #fee2e2; color: #b91c1c; }

/* ── Forms ─────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group label { font-size: .83rem; font-weight: 600; color: var(--color-muted); }
.form-group-sm { max-width: 160px; }
.form-group-action { justify-content: flex-end; flex-direction: row; align-items: flex-end; gap: .4rem; }
.form-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.form-control {
  padding: .5rem .75rem; border: 1px solid var(--color-border);
  border-radius: 8px; font-size: .9rem; background: var(--color-surface);
  transition: border-color .15s;
  width: 100%;
}
.form-control:focus { outline: none; border-color: var(--color-primary); }
.required { color: var(--color-danger); }
.inline-form { padding: 1rem; }

/* ── Cards ─────────────────────────────────────────────── */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--color-border);
  background: #fafbfc;
}
.card-header h2 { font-size: 1rem; font-weight: 700; }
.card-hint { padding: .5rem 1.25rem; font-size: .88rem; color: var(--color-muted); }

/* ── Tables ─────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.data-table th {
  background: #f8fafc; padding: .65rem 1rem;
  text-align: left; font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-muted); border-bottom: 1px solid var(--color-border);
}
.data-table td {
  padding: .65rem 1rem; border-bottom: 1px solid #f1f3f5;
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #f8fafc; }
.row-inactive td { opacity: .55; }
.row-warning td { background: #fffbeb !important; }
.edit-row td { background: #f0f4ff !important; padding: .75rem 1rem; }
.actions-cell { white-space: nowrap; }
.empty-state { padding: 2rem; text-align: center; color: var(--color-muted); font-style: italic; }
.hours-cell { font-variant-numeric: tabular-nums; text-align: right; }
.json-cell { font-size: .75rem; max-width: 200px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uuid-short { font-size: .82rem; }
.correction-note { color: var(--color-warning); cursor: help; }
.warning-text { color: var(--color-warning); font-size: .82rem; }

/* Punch type colours */
.punch-type { font-weight: 600; font-size: .82rem; }
.punch-clock-in   { color: #16a34a; }
.punch-lunch-out  { color: #d97706; }
.punch-lunch-in   { color: #2563eb; }
.punch-clock-out  { color: #6b7280; }

/* Status badges */
.status-badge { font-size: .82rem; font-weight: 600; }
.status-clocked-in  { color: #16a34a; }
.status-at-lunch    { color: #d97706; }
.status-clocked-out { color: #9ca3af; }

/* ── Admin Layout ────────────────────────────────────────── */
.admin-layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px; min-height: 100vh;
  background: #1e293b; color: #cbd5e1;
  display: flex; flex-direction: column;
  flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.sidebar-brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.25rem 1rem 1rem;
  font-size: 1.1rem; font-weight: 800;
  color: #f8fafc; border-bottom: 1px solid #334155;
}
.brand-icon { font-size: 1.4rem; }
.brand-name { letter-spacing: -.01em; }

.sidebar-section {
  padding: .9rem 1rem .3rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #64748b;
}

.sidebar-nav { list-style: none; flex: 1; }
.sidebar-nav li a {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem; font-size: .88rem; font-weight: 500;
  color: #94a3b8; border-radius: 0; transition: background .12s, color .12s;
}
.sidebar-nav li a:hover, .sidebar-nav li a.active {
  background: #334155; color: #f1f5f9; text-decoration: none;
}
.nav-icon { font-size: 1rem; }

.sidebar-footer {
  padding: 1rem; border-top: 1px solid #334155;
  display: flex; flex-direction: column; gap: .5rem;
}
.sidebar-user { font-size: .82rem; color: #94a3b8; }
.btn-logout { font-size: .82rem; color: #f87171; }
.sidebar-kiosk-link { padding: .5rem 1rem 1rem; }
.sidebar-kiosk-link a { font-size: .8rem; color: #60a5fa; }

.admin-content {
  flex: 1; padding: 2rem; overflow-y: auto; max-width: 1200px;
}

.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem;
}
.page-header h1 { font-size: 1.5rem; font-weight: 800; }
.page-date { font-size: .88rem; color: var(--color-muted); }

/* ── Dashboard stat cards ────────────────────────────────── */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 1.25rem; text-align: center;
  box-shadow: var(--shadow);
}
.stat-number { font-size: 2.2rem; font-weight: 800; color: var(--color-text); }
.stat-label  { font-size: .82rem; color: var(--color-muted); margin-top: .25rem; }
.stat-card-green .stat-number { color: var(--color-success); }
.stat-card-yellow .stat-number { color: var(--color-warning); }
.stat-card-gray .stat-number { color: #9ca3af; }

/* ── Warning banner ─────────────────────────────────────── */
.warning-banner {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius);
  padding: .75rem 1rem; margin-bottom: 1rem; font-size: .88rem;
}
.warning-banner ul { margin: .4rem 0 0 1.2rem; }
.warning-banner li { color: #92400e; }

/* ── Pagination ─────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 1rem; border-top: 1px solid var(--color-border);
}
.page-info { font-size: .88rem; color: var(--color-muted); }

/* Actor badge */
.actor-badge { font-size: .78rem; padding: .15rem .45rem; border-radius: 4px; font-weight: 600; }
.actor-admin    { background: #eff6ff; color: #1d4ed8; }
.actor-employee { background: #f0fdf4; color: #15803d; }
.actor-system   { background: #f9fafb; color: #6b7280; }

/* ── Login Page ─────────────────────────────────────────── */
.login-page { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); }
.login-container {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.login-card {
  background: var(--color-surface); border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 2.5rem; width: 100%; max-width: 400px;
}
.login-logo { text-align: center; margin-bottom: 2rem; }
.brand-icon-lg { font-size: 3rem; }
.login-logo h1 { font-size: 1.8rem; font-weight: 800; margin: .5rem 0 .25rem; }
.login-subtitle { color: var(--color-muted); font-size: .9rem; }
.login-form .form-group { margin-bottom: 1.25rem; }

/* ── Kiosk theme tokens — light (default) ────────────────── */
:root {
  --kiosk-bg:           #f0f4f8;
  --kiosk-bg-2:         #ffffff;
  --kiosk-text:         #1a1d23;
  --kiosk-text-muted:   #6b7280;
  --kiosk-text-faint:   #9ca3af;
  --kiosk-border:       #d1d9e6;
  --kiosk-card-bg:      #ffffff;
  --kiosk-card-hover:   #e8eef7;
  --kiosk-card-border:  #cbd5e1;
  --kiosk-header-border:#d1d9e6;
  --kiosk-keypad-bg:    #e8eef7;
  --kiosk-keypad-border:#c8d3e0;
  --kiosk-keypad-hover: #d1dce9;
  --kiosk-keypad-color: #1a1d23;
  --kiosk-dot-border:   #94a3b8;
  --kiosk-accent:       #2563eb;
  --kiosk-pin-name:     #1a1d23;
  --kiosk-status-color: #4b5563;
  --kiosk-success-name: #1a1d23;
  --kiosk-success-sub:  #6b7280;
  --kiosk-countdown:    #9ca3af;
  --kiosk-locked-title: #1a1d23;
  --kiosk-locked-msg:   #4b5563;
  --kiosk-locked-faint: #9ca3af;
  --kiosk-locked-code:  #2563eb;
  --kiosk-toggle-bg:    #e2e8f0;
  --kiosk-toggle-color: #374151;
}

/* ── Kiosk theme tokens — dark ───────────────────────────── */
.kiosk-page.dark {
  --kiosk-bg:           #0f172a;
  --kiosk-bg-2:         #1e293b;
  --kiosk-text:         #e2e8f0;
  --kiosk-text-muted:   #94a3b8;
  --kiosk-text-faint:   #64748b;
  --kiosk-border:       #334155;
  --kiosk-card-bg:      #1e293b;
  --kiosk-card-hover:   #243050;
  --kiosk-card-border:  #334155;
  --kiosk-header-border:#334155;
  --kiosk-keypad-bg:    #1e293b;
  --kiosk-keypad-border:#334155;
  --kiosk-keypad-hover: #334155;
  --kiosk-keypad-color: #e2e8f0;
  --kiosk-dot-border:   #475569;
  --kiosk-accent:       #3b82f6;
  --kiosk-pin-name:     #f8fafc;
  --kiosk-status-color: #94a3b8;
  --kiosk-success-name: #f8fafc;
  --kiosk-success-sub:  #94a3b8;
  --kiosk-countdown:    #475569;
  --kiosk-locked-title: #f8fafc;
  --kiosk-locked-msg:   #94a3b8;
  --kiosk-locked-faint: #475569;
  --kiosk-locked-code:  #60a5fa;
  --kiosk-toggle-bg:    #334155;
  --kiosk-toggle-color: #cbd5e1;
}

/* ── Kiosk Page ─────────────────────────────────────────── */
.kiosk-page {
  background: var(--kiosk-bg);
  color: var(--kiosk-text);
  min-height: 100vh;
  transition: background .25s, color .25s;
}

.kiosk-container { max-width: 900px; margin: 0 auto; padding: 1rem 1.5rem; }

.kiosk-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid var(--kiosk-header-border);
  margin-bottom: 2rem;
}
.kiosk-header .brand-name { color: var(--kiosk-text); font-size: 1.1rem; font-weight: 800; }
.kiosk-header .brand-icon { font-size: 1.4rem; }
.kiosk-header .kiosk-brand { display: flex; align-items: center; gap: .5rem; }

.kiosk-time {
  font-size: 1.5rem; font-weight: 700; color: var(--kiosk-text-muted);
  font-variant-numeric: tabular-nums;
}
.kiosk-device-name { font-size: .8rem; color: var(--kiosk-text-faint); }

/* ── Theme toggle button ─────────────────────────────────── */
.theme-toggle {
  background: var(--kiosk-toggle-bg);
  color: var(--kiosk-toggle-color);
  border: none; border-radius: 999px;
  padding: .35rem .7rem; font-size: 1.15rem;
  cursor: pointer; line-height: 1;
  transition: background .2s, transform .1s;
  display: flex; align-items: center; gap: .3rem;
}
.theme-toggle:hover { opacity: .85; }
.theme-toggle:active { transform: scale(.93); }

.kiosk-prompt { text-align: center; margin-bottom: 2rem; }
.kiosk-prompt h2 { font-size: 1.3rem; font-weight: 600; color: var(--kiosk-text-muted); }

/* Employee grid */
.employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  justify-content: center;
}

.employee-card {
  background: var(--kiosk-card-bg);
  border: 2px solid var(--kiosk-card-border);
  border-radius: 14px;
  padding: 1.5rem 1rem;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.employee-card:hover {
  border-color: var(--kiosk-accent);
  background: var(--kiosk-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(37,99,235,.12);
}
.employee-card:active { transform: scale(.97); }

.employee-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--kiosk-accent);
  color: #fff; font-size: 1.5rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.employee-name { font-size: .95rem; font-weight: 600; color: var(--kiosk-text); }

.no-employees { grid-column: 1/-1; text-align: center; color: var(--kiosk-text-faint); padding: 3rem; }

/* ── Locked kiosk ─────────────────────────────────────────── */
.kiosk-locked-screen {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem; text-align: center;
}
.locked-icon { font-size: 4rem; margin-bottom: 1rem; }
.locked-title { font-size: 2rem; font-weight: 800; color: var(--kiosk-locked-title); margin-bottom: .75rem; }
.locked-message { color: var(--kiosk-locked-msg); font-size: 1.1rem; margin-bottom: 1.5rem; line-height: 1.6; }
.locked-device-id { color: var(--kiosk-locked-faint); font-size: .85rem; margin-bottom: 2rem; }
.locked-device-id code { color: var(--kiosk-locked-code); }
.locked-actions .btn { font-size: 1rem; padding: .75rem 2rem; }

/* ── PIN Entry Screen ─────────────────────────────────────── */
.pin-screen, .action-screen, .success-screen {
  max-width: 400px; margin: 0 auto; text-align: center; padding-top: 1rem;
}

.pin-employee-name, .action-employee-name {
  font-size: 1.6rem; font-weight: 800; margin-bottom: 1rem; color: var(--kiosk-pin-name);
}
.pin-prompt { color: var(--kiosk-text-muted); font-size: 1rem; margin-bottom: 1.25rem; }
.pin-lockout { max-width: 360px; margin: 0 auto 1rem; }

.pin-display {
  display: flex; gap: .75rem; justify-content: center; margin-bottom: 1.5rem;
}
.pin-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--kiosk-dot-border); transition: background .1s, border-color .1s;
}
.pin-dot.filled { background: var(--kiosk-accent); border-color: var(--kiosk-accent); }

.pin-error { margin: .75rem auto; max-width: 340px; }

.pin-keypad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .65rem; max-width: 280px; margin: 0 auto 1.5rem;
}
.keypad-btn {
  background: var(--kiosk-keypad-bg);
  border: 1.5px solid var(--kiosk-keypad-border);
  color: var(--kiosk-keypad-color);
  border-radius: 12px; font-size: 1.4rem; font-weight: 700;
  padding: 1rem; cursor: pointer;
  transition: background .1s, transform .08s;
  aspect-ratio: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.keypad-btn:hover { background: var(--kiosk-keypad-hover); }
.keypad-btn:active { transform: scale(.94); }
.keypad-blank { visibility: hidden; cursor: default; }
.keypad-del { font-size: 1.2rem; color: var(--kiosk-text-muted); }

.pin-back { margin-top: 1.25rem; }

/* ── Action screen ─────────────────────────────────────────── */
.action-status { font-size: 1.1rem; color: var(--kiosk-status-color); margin-bottom: 2rem; }
.action-buttons { display: flex; flex-direction: column; gap: .75rem; max-width: 300px; margin: 0 auto; }

.action-btn {
  padding: 1rem; font-size: 1.1rem; font-weight: 700; border-radius: 12px;
  border: none; cursor: pointer; transition: opacity .15s, transform .08s;
  width: 100%;
}
.action-btn:hover { opacity: .9; }
.action-btn:active { transform: scale(.97); }
.btn-clock-in   { background: #16a34a; color: #fff; }
.btn-lunch      { background: #d97706; color: #fff; }
.btn-lunch-end  { background: #2563eb; color: #fff; }
.btn-clock-out  { background: #6b7280; color: #fff; }

/* ── Success screen ─────────────────────────────────────────── */
.success-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 50vh; gap: 1rem;
}
.success-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: #16a34a; color: #fff;
  font-size: 2.5rem; display: flex; align-items: center; justify-content: center;
  animation: pop .3s ease;
}
@keyframes pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.success-name    { font-size: 1.6rem; font-weight: 800; color: var(--kiosk-success-name); }
.success-action  { font-size: 1.1rem; color: var(--kiosk-success-sub); }
.success-time    { font-size: 1.3rem; font-weight: 700; color: var(--kiosk-accent); }
.success-countdown { color: var(--kiosk-countdown); font-size: .9rem; margin-top: .5rem; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — mobile-first breakpoints
   sm  : ≤ 480px  (phones)
   md  : ≤ 768px  (large phones / small tablets)
   ═══════════════════════════════════════════════════════ */

/* ── Kiosk: tablet (≤ 768px) ────────────────────────── */
@media (max-width: 768px) {
  .kiosk-container { padding: .75rem 1rem; }
  .kiosk-header { padding: .75rem 0 1rem; margin-bottom: 1.25rem; }
  .kiosk-time { font-size: 1.2rem; }
  .kiosk-header .brand-name { font-size: 1rem; }
  .kiosk-prompt h2 { font-size: 1.1rem; }
  .kiosk-prompt { margin-bottom: 1.25rem; }
  .employee-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }
  .employee-card { padding: 1.1rem .75rem; border-radius: 12px; }
  .employee-avatar { width: 48px; height: 48px; font-size: 1.3rem; }
  .employee-name { font-size: .88rem; }
  .pin-employee-name, .action-employee-name { font-size: 1.35rem; }
  .pin-keypad { max-width: 260px; gap: .55rem; }
  .keypad-btn { font-size: 1.3rem; padding: .85rem; }
  .success-icon { width: 70px; height: 70px; font-size: 2.2rem; }
  .success-name { font-size: 1.4rem; }
}

/* ── Kiosk: phone (≤ 480px) ─────────────────────────── */
@media (max-width: 480px) {
  .kiosk-container { padding: .6rem .75rem; }
  .kiosk-header { padding: .6rem 0 .9rem; margin-bottom: 1rem; flex-wrap: wrap; gap: .4rem; }
  .kiosk-time { font-size: 1rem; }
  .kiosk-header .brand-name { font-size: .95rem; }
  .kiosk-header .brand-icon { font-size: 1.2rem; }
  .kiosk-prompt { margin-bottom: 1rem; }
  .kiosk-prompt h2 { font-size: 1rem; }

  /* 2-column grid on phones — fits up to ~10 names comfortably */
  .employee-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .employee-card { padding: 1rem .6rem; gap: .55rem; border-radius: 10px; }
  .employee-avatar { width: 42px; height: 42px; font-size: 1.15rem; }
  .employee-name { font-size: .82rem; }

  /* PIN screen */
  .pin-screen, .action-screen, .success-screen { padding-top: .5rem; }
  .pin-employee-name, .action-employee-name { font-size: 1.2rem; margin-bottom: .75rem; }
  .pin-prompt { font-size: .9rem; margin-bottom: 1rem; }
  .pin-display { gap: .6rem; margin-bottom: 1.1rem; }
  .pin-dot { width: 16px; height: 16px; }
  .pin-keypad { max-width: 240px; gap: .5rem; margin-bottom: 1rem; }
  .keypad-btn { font-size: 1.2rem; padding: .75rem; border-radius: 10px; }

  /* Action buttons */
  .action-status { font-size: 1rem; margin-bottom: 1.4rem; }
  .action-btn { font-size: 1rem; padding: .85rem; border-radius: 10px; }
  .action-buttons { max-width: 100%; }

  /* Success */
  .success-icon { width: 64px; height: 64px; font-size: 2rem; }
  .success-name { font-size: 1.3rem; }
  .success-action { font-size: 1rem; }
  .success-time { font-size: 1.15rem; }

  /* Locked screen */
  .locked-title { font-size: 1.5rem; }
  .locked-message { font-size: .95rem; }

  /* Theme toggle */
  .theme-toggle { padding: .3rem .55rem; font-size: 1rem; }
}

/* ── Admin: tablet (≤ 768px) ────────────────────────── */
@media (max-width: 768px) {
  .admin-layout { flex-direction: column; }
  .sidebar { width: 100%; min-height: unset; height: auto; position: static; flex-direction: column; overflow-y: visible; }

  /* Horizontal scrolling nav */
  .sidebar-nav {
    display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding: .25rem .5rem; gap: .1rem;
    scrollbar-width: none;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-nav li { flex-shrink: 0; }
  .sidebar-nav li a { padding: .5rem .75rem; font-size: .8rem; border-radius: 6px; white-space: nowrap; }

  .sidebar-brand { padding: .9rem 1rem .75rem; }
  .sidebar-section { display: none; }
  .sidebar-footer {
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: .5rem;
    padding: .5rem 1rem; border-top: none; border-bottom: 1px solid #334155;
  }
  .sidebar-kiosk-link { padding: .4rem 1rem .5rem; }

  .admin-content { padding: 1rem; max-width: 100%; }
  .page-header { flex-direction: column; align-items: flex-start; gap: .4rem; margin-bottom: 1rem; }
  .page-header h1 { font-size: 1.25rem; }

  /* Stat cards: 2-column */
  .stat-cards { grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1rem; }
  .stat-number { font-size: 1.8rem; }

  /* Tables: horizontal scroll */
  .card { overflow-x: auto; }
  .data-table { min-width: 520px; }
  .data-table th, .data-table td { padding: .55rem .75rem; font-size: .8rem; }

  /* Forms: stack vertically */
  .form-row { flex-direction: column; gap: .75rem; }
  .form-group-sm { max-width: 100%; }
  .form-group-action { flex-direction: row; justify-content: flex-start; }
  .inline-form { padding: .9rem; }
}

/* ── Admin: phone (≤ 480px) ─────────────────────────── */
@media (max-width: 480px) {
  .admin-content { padding: .75rem; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .stat-card { padding: .9rem .75rem; }
  .stat-number { font-size: 1.6rem; }
  .stat-label { font-size: .75rem; }
  .card-header { padding: .75rem 1rem; }
  .card-header h2 { font-size: .9rem; }
  .data-table { min-width: 460px; font-size: .78rem; }
  .data-table th, .data-table td { padding: .45rem .6rem; }
  .actions-cell { display: flex; flex-wrap: wrap; gap: .3rem; }
  .login-card { padding: 1.75rem 1.25rem; }
  .pagination { flex-wrap: wrap; gap: .5rem; padding: .6rem .75rem; }
}

/* ── Employee photo avatar ──────────────────────────────────── */
.employee-avatar-photo {
  object-fit: cover;
  border: 2px solid var(--kiosk-card-border);
  background: transparent;
}

/* ── Admin dark theme ────────────────────────────────────────
   Toggled by adding .admin-dark to <body>.
   Applied instantly via inline script in <head> to avoid flash.
   ─────────────────────────────────────────────────────────── */
body.admin-dark {
  --color-bg:      #0f172a;
  --color-surface: #1e293b;
  --color-border:  #334155;
  --color-text:    #e2e8f0;
  --color-muted:   #94a3b8;
}

body.admin-dark .card-header      { background: #162032; }
body.admin-dark .data-table th    { background: #162032; color: #94a3b8; }
body.admin-dark .data-table td    { border-bottom-color: #1e293b; }
body.admin-dark .data-table tr:hover td { background: #243050; }
body.admin-dark .row-warning td   { background: #292309 !important; }
body.admin-dark .edit-row td      { background: #0f2340 !important; }

body.admin-dark .form-control {
  background: #0f172a; color: #e2e8f0; border-color: #334155;
}
body.admin-dark select.form-control,
body.admin-dark select {
  background: #0f172a; color: #e2e8f0; border-color: #334155;
}

body.admin-dark .btn-secondary    { background: #334155; color: #e2e8f0; }
body.admin-dark .btn-ghost        { border-color: #334155; color: #94a3b8; }

body.admin-dark .badge-green      { background: #14532d; color: #4ade80; }
body.admin-dark .badge-gray       { background: #334155; color: #94a3b8; }
body.admin-dark .badge-red        { background: #450a0a; color: #f87171; }

body.admin-dark .alert-error      { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
body.admin-dark .alert-success    { background: #052e16; color: #86efac; border-color: #14532d; }

body.admin-dark .warning-banner       { background: #292309; border-color: #713f12; }
body.admin-dark .warning-banner li    { color: #fbbf24; }

body.admin-dark .actor-admin      { background: #1e3a5f; color: #93c5fd; }
body.admin-dark .actor-employee   { background: #052e16; color: #86efac; }
body.admin-dark .actor-system     { background: #334155; color: #94a3b8; }

body.admin-dark .punch-clock-in   { color: #4ade80; }
body.admin-dark .punch-lunch-out  { color: #fbbf24; }
body.admin-dark .punch-lunch-in   { color: #60a5fa; }
body.admin-dark .punch-clock-out  { color: #94a3b8; }

body.admin-dark .status-clocked-in  { color: #4ade80; }
body.admin-dark .status-at-lunch    { color: #fbbf24; }
body.admin-dark .status-clocked-out { color: #64748b; }

/* Sidebar gets deeper when body is dark */
body.admin-dark .sidebar             { background: #080f1a; }
body.admin-dark .sidebar-brand       { border-bottom-color: #1e293b; }
body.admin-dark .sidebar-section     { color: #475569; }
body.admin-dark .sidebar-nav li a    { color: #64748b; }
body.admin-dark .sidebar-nav li a:hover,
body.admin-dark .sidebar-nav li a.active { background: #1e293b; color: #e2e8f0; }
body.admin-dark .sidebar-footer      { border-top-color: #1e293b; }

/* Theme toggle button — sits in the sidebar footer */
.admin-theme-toggle {
  background: #334155;
  color: #cbd5e1;
  border: none;
  border-radius: 50%;
  width: 36px; height: 36px;
  min-width: 36px !important; min-height: 36px !important;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .1s;
}
.admin-theme-toggle:hover  { background: #475569; }
.admin-theme-toggle:active { transform: scale(.93); }