@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  --ink: #12172B;
  --ink-soft: #1D2444;
  --ink-line: #2B3260;
  --paper: #F5F6FA;
  --card: #FFFFFF;
  --border: #E5E7F0;
  --blue: #3B5BFF;
  --blue-deep: #2947D6;
  --blue-soft: #EEF1FF;
  --mint: #14C79A;
  --mint-soft: #E7FAF4;
  --amber: #F5A524;
  --amber-soft: #FEF3E0;
  --coral: #EF4444;
  --coral-soft: #FDEAEA;
  --text: var(--ink);
  --slate: #6B7280;
  --slate-dark: #333A4D;
  --gray: #D8DBE6;
  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ---------- Dark mode ---------- */
/* Applied via <html data-theme="dark">, set server-side from a cookie
   (no flash of the wrong theme on load) and toggled client-side by
   theme-toggle.js. --ink itself is intentionally NOT overridden here —
   it's the sidebar's background color, which is already dark navy and
   correct as-is in both themes; only the variables that represent "page
   surface" and "body text" need to flip. */
[data-theme="dark"] {
  --paper: #0D1020;
  --card: #171B30;
  --border: #2A2F4A;
  --text: #E4E6F5;
  --slate: #9298B8;
  --slate-dark: #C4C8E0;
  --gray: #3A3F5C;
  --blue-soft: #1B2050;
  --mint-soft: #0F2E28;
  --amber-soft: #332A12;
  --coral-soft: #3A1818;
}
[data-theme="dark"] body { background: var(--paper); }
[data-theme="dark"] .card,
[data-theme="dark"] .kiosk-tile { box-shadow: none; }

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--paper); }
h1, h2, h3 { font-family: var(--font-head); margin: 0; }
a { color: var(--blue); text-decoration: none; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--slate); }
.small { font-size: 0.75rem; }

/* ---------- Auth pages ---------- */
.auth-body {
  background: var(--ink);
  background-image: linear-gradient(var(--ink-line) 1px, transparent 1px), linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
  background-size: 28px 28px;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.auth-wrap { width: 100%; max-width: 420px; }
.brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 2rem; }
.brand-center { justify-content: center; }
.brand-mark { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 20px; height: 20px; }
.brand-mark i { display: block; background: var(--blue); }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(3) { background: var(--mint); }
.brand-name { color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; }
.auth-logo { display: block; width: 150px; max-width: 60%; height: auto; margin: 0 auto; background: #fff; padding: 0.9rem 1.1rem; border-radius: 10px; box-sizing: content-box; }
.brand-mark-img { display: block; width: 34px; height: 34px; object-fit: contain; background: #fff; padding: 3px; border-radius: 6px; box-sizing: border-box; flex-shrink: 0; }
.auth-card { background: var(--card); padding: 2rem; }
.auth-card h1 { font-size: 1.15rem; margin-bottom: 0.25rem; }
.auth-card > .muted { margin-bottom: 1.5rem; font-size: 0.85rem; }
.auth-foot { text-align: center; color: #B7BEDD; font-size: 0.8rem; margin-top: 1.5rem; }
.fine-print { font-size: 0.75rem; color: var(--slate); margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.back-link { display: block; text-align: center; font-size: 0.8rem; margin-top: 0.75rem; color: var(--slate); }
.qr-box { display: flex; justify-content: center; margin: 1rem 0; }
.qr-box canvas, .qr-box img { image-rendering: pixelated; }
.qr-box code { background: var(--paper); padding: 0.15rem 0.4rem; font-family: var(--font-mono); }

/* ---------- Forms ---------- */
.stack-form { display: flex; flex-direction: column; gap: 1rem; }
.stack-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; font-weight: 500; color: var(--slate-dark); }
.form-section-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate); margin-top: 0.5rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.form-section-label:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-row-2 > label:only-child { grid-column: 1 / -1; }
.checkbox-label { display: grid !important; grid-template-columns: 16px 1fr !important; align-items: start !important; gap: 0.55rem !important; }
.checkbox-label input[type="checkbox"] { width: 16px !important; height: 16px !important; margin: 0.15rem 0 0 !important; }
/* Everything after the checkbox is wrapped in one span in the markup
   (see signup.php) so it flows as normal inline text — bold/links
   included. .stack-form label is display:flex for the common "label
   above input" pairing; overriding to a two-column grid here (fixed
   checkbox column + flexible text column) avoids the flex-specific
   failure mode this had: every text node and tag between the checkbox
   and the end of a mixed-content label (plain text + <b> + <a>) was
   becoming its OWN flex item and squeezing into garbled fake columns
   with no wrap. Grid doesn't have that ambiguity — there are exactly
   two cells, checkbox and text, regardless of how many tags or text
   nodes the text cell's content contains.
*/
.checkbox-label span { font-weight: 400; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem 1rem; margin-bottom: 0.5rem; }

/* ---------- Photo review dashboard ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-top: 1rem; }
.photo-tile { border: 1px solid var(--border); overflow: hidden; background: var(--paper); }
.photo-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #000; }
.photo-tile-btn { display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; }
.photo-lightbox { position: fixed; inset: 0; background: rgba(6, 9, 20, 0.92); z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; }
.photo-lightbox[hidden] { display: none; }
.photo-lightbox img { max-width: min(90vw, 640px); max-height: 75vh; object-fit: contain; border: 1px solid var(--border); }
.photo-lightbox-caption { color: #fff; font-size: 0.9rem; }
.photo-lightbox-close { position: absolute; top: 1.25rem; right: 1.25rem; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 1rem; cursor: pointer; }
.photo-lightbox-close:hover { background: rgba(255,255,255,0.2); }
.photo-caption { padding: 0.5rem 0.6rem; }
.photo-caption strong { display: block; font-size: 0.8rem; }
@media (max-width: 640px) { .form-row-2 { grid-template-columns: 1fr; } }
.stack-form input, .stack-form select, .stack-form textarea {
  font-family: var(--font-body); font-size: 0.9rem; padding: 0.65rem 0.75rem;
  border: 1px solid var(--border); outline: none; color: var(--text); background: var(--card);
}
.stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); outline: none; }

.btn {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
  padding: 0.65rem 1.1rem; border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); }
.btn-danger { background: var(--coral); color: #fff; }
.btn-outline { background: transparent; border-color: var(--border); color: var(--slate-dark); }
.btn-outline:hover { background: var(--paper); border-color: var(--slate); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.75rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-icon { padding: 0.5rem; }
.btn-mint { background: var(--mint-soft); color: var(--mint); }
.btn-coral { background: var(--coral-soft); color: var(--coral); }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 224px; flex-shrink: 0; background: var(--ink); display: flex; flex-direction: column; max-height: 100vh; position: sticky; top: 0; }
.sidebar .brand { padding: 1.25rem 1.25rem 0.5rem; margin-bottom: 0; flex-shrink: 0; }
.sidebar nav { display: flex; flex-direction: column; gap: 1px; padding: 0.5rem 0.75rem 1rem; flex: 1; overflow-y: auto; }
.nav-group { display: flex; flex-direction: column; }
.nav-group-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #5E6690; padding: 0.9rem 0.75rem 0.3rem; background: none; border: none; width: 100%; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-body); }
.nav-group:first-child .nav-group-label { padding-top: 0.4rem; }
.nav-group-label:hover { color: #8890B5; }
.nav-group-chevron { font-size: 0.6rem; transition: transform 0.15s; opacity: 0.7; }
.nav-group.expanded .nav-group-chevron { transform: rotate(90deg); }
.nav-group-items { display: flex; flex-direction: column; gap: 1px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease; }
.nav-group.expanded .nav-group-items { max-height: 500px; }
.nav-item { padding: 0.55rem 0.75rem; font-size: 0.85rem; color: #9AA1BE; border-left: 2px solid transparent; border-radius: 0 4px 4px 0; transition: background-color 0.12s; }
.nav-item.active { background: var(--ink-soft); color: #fff; border-left-color: var(--mint); font-weight: 500; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.04); }
.sidebar-foot { padding: 1rem 1.25rem; font-size: 0.7rem; color: #6E769B; border-top: 1px solid var(--ink-line); flex-shrink: 0; }
.theme-toggle-btn { display: flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.06); border: 1px solid var(--ink-line); color: #C4C8E0; font-size: 0.72rem; padding: 0.4rem 0.6rem; width: 100%; cursor: pointer; font-family: var(--font-body); }
.theme-toggle-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline; }
.sidebar-toggle { display: none; }

/* ---------- Friendly empty states ---------- */
.empty-state { text-align: center; padding: 2.25rem 1rem; color: var(--slate); }
.empty-state-icon { font-size: 1.75rem; margin-bottom: 0.5rem; opacity: 0.55; display: block; }
.empty-state p { margin: 0 auto; font-size: 0.85rem; max-width: 320px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; background: var(--card); border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 0.75rem; }
.topbar h1 { font-size: 1.05rem; }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.live-clock { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 600; }
.user-chip { font-size: 0.8rem; display: flex; align-items: center; gap: 0.4rem; }
.role-badge { background: var(--blue-soft); color: var(--blue); font-size: 0.65rem; padding: 0.1rem 0.4rem; text-transform: uppercase; letter-spacing: 0.03em; }
.brand-logo { display: block; width: 34px; height: 34px; object-fit: contain; background: #fff; padding: 3px; border-radius: 6px; box-sizing: border-box; flex-shrink: 0; }
.bell-link { position: relative; font-size: 1.1rem; text-decoration: none; color: var(--slate-dark); }
.bell-badge { position: absolute; top: -6px; right: -8px; background: var(--coral); color: #fff; font-size: 0.6rem; font-weight: 600; padding: 1px 4px; border-radius: 8px; min-width: 14px; text-align: center; }
.notif-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 0.75rem 0; border-top: 1px solid var(--border); gap: 0.75rem; }
.notif-row:first-of-type { border-top: none; }
.notif-row.unread { background: var(--blue-soft); margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }
.content { padding: 1.5rem; flex: 1; }

/* ---------- Alerts ---------- */
.alert { padding: 0.8rem 1rem; margin-bottom: 1rem; font-size: 0.85rem; border-left: 3px solid; display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 500; }
.alert-success { background: var(--mint-soft); color: #0B8264; border-color: var(--mint); }
.alert-error { background: var(--coral-soft); color: #B4231F; border-color: var(--coral); }

/* ---------- Cards / stats ---------- */
.card { background: var(--card); border: 1px solid var(--border); padding: 1.25rem; box-shadow: 0 1px 2px rgba(18,23,43,0.04); }
.card h3 { font-size: 0.9rem; margin-bottom: 1rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; align-items: start; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.stat-card { background: var(--card); border: 1px solid var(--border); padding: 1rem; }
.stat-label { font-size: 0.75rem; color: var(--slate); font-weight: 500; margin-bottom: 0.5rem; }
.stat-value { font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; }
.stat-unit { font-size: 0.7rem; font-weight: 400; color: var(--slate); }
.progress { height: 6px; background: var(--paper); margin-top: 0.5rem; }
.progress span { display: block; height: 100%; background: var(--blue); }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.table th { text-align: left; font-weight: 500; color: var(--slate); font-size: 0.75rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
.table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:hover td { background: var(--paper); }

/* ---------- Status ---------- */
.status-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.55rem; font-size: 0.7rem; font-weight: 500; }
.status-pill::before { content: ''; width: 6px; height: 6px; display: inline-block; }
.status-present, .status-Approved { background: var(--mint-soft); color: #0B8264; } .status-present::before, .status-Approved::before { background: var(--mint); }
.status-late, .status-Pending { background: var(--amber-soft); color: #A05A00; } .status-late::before, .status-Pending::before { background: var(--amber); }
.status-absent, .status-Flagged { background: var(--coral-soft); color: #B4231F; } .status-absent::before, .status-Flagged::before { background: var(--coral); }
.status-leave { background: var(--blue-soft); color: var(--blue-deep); } .status-leave::before { background: var(--blue); }
.status-off { background: var(--paper); color: var(--slate); } .status-off::before { background: var(--gray); }
.status-holiday { background: #EFEAFB; color: #5B3FBF; } .status-holiday::before { background: #8B6FE0; }
.status-rest_day { background: var(--paper); color: var(--slate); } .status-rest_day::before { background: var(--gray); }
.status-work_from_home { background: var(--blue-soft); color: var(--blue-deep); } .status-work_from_home::before { background: var(--blue); }
.status-half_day { background: var(--amber-soft); color: #A05A00; } .status-half_day::before { background: var(--amber); }
.status-business_trip { background: #EFEAFB; color: #5B3FBF; } .status-business_trip::before { background: #8B6FE0; }
.status-training { background: #EFEAFB; color: #5B3FBF; } .status-training::before { background: #8B6FE0; }
.ot-text { color: var(--amber); }
.badge { display: inline-block; padding: 0.2rem 0.5rem; font-size: 0.7rem; font-weight: 500; }
.badge-mint { background: var(--mint-soft); color: #0B8264; }
.badge-amber { background: var(--amber-soft); color: #A05A00; }
.badge-coral { background: var(--coral-soft); color: #B4231F; }

.pixel-cell { display: inline-block; width: 16px; height: 16px; }
.status-bg-present { background: var(--mint); } .status-bg-late { background: var(--amber); }
.status-bg-absent { background: var(--coral); } .status-bg-leave { background: var(--blue); }
.status-bg-off { background: var(--gray); } .status-bg-holiday { background: #8B6FE0; }

/* ---------- Clock page ---------- */
.clock-card { max-width: 420px; margin: 2rem auto; background: var(--card); border: 1px solid var(--border); padding: 2.5rem; text-align: center; }
.clock-display { font-family: var(--font-mono); font-size: 2.75rem; font-weight: 600; margin: 0.25rem 0 1.5rem; }
.clock-status-icon { width: 96px; height: 96px; margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: var(--paper); border: 2px solid var(--border); }
.clock-status-icon.in { background: var(--mint-soft); border-color: var(--mint); }
.clock-status-icon.break { background: var(--amber-soft); border-color: var(--amber); }
#cam-preview.active { width: 96px; height: 96px; margin: 0 auto 1.25rem; display: block; border-radius: 50%; border: 2px solid var(--border); object-fit: cover; transform: scaleX(-1); /* mirror, like a normal front-camera preview */ }
.clock-btn-row { display: flex; gap: 0.75rem; }
.clock-btn-row .btn { flex: 1; }
.today-log { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); text-align: left; }
.today-log h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); margin: 0 0 0.5rem; }
.today-log-row { display: flex; justify-content: space-between; padding: 0.35rem 0; font-size: 0.8rem; }
.today-log-row a { text-decoration: none; }
.photo-strip { margin-top: 0.3rem; display: flex; gap: 0.4rem; }
.photo-strip a { text-decoration: none; font-size: 0.9rem; }

/* ---------- Onboarding ---------- */
.onboarding-card { border-color: var(--blue); }
.onboarding-steps { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; }
.onboarding-step { display: flex; gap: 0.75rem; align-items: flex-start; }
.onboarding-check { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--paper); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: var(--slate); }
.onboarding-step.done .onboarding-check { background: var(--mint-soft); color: var(--mint); border-color: var(--mint); }
.onboarding-step.done strong { color: var(--slate); text-decoration: line-through; }

/* ---------- Activity / requests ---------- */
.activity-row, .request-row, .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0; border-top: 1px solid var(--border); font-size: 0.85rem; }
.activity-row:first-of-type, .request-row:first-of-type, .settings-row:first-of-type { border-top: none; }
.rotation-step { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; font-size: 0.85rem; }
.rotation-step select { flex: 1; padding: 0.5rem; border: 1px solid var(--border); font-family: var(--font-body); }
.rotation-step input[type="number"] { padding: 0.5rem; border: 1px solid var(--border); }
.adjust-row td { background: var(--paper); padding: 0.6rem 0.75rem !important; }

/* ---------- Leave calendar ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 1rem; }
.cal-headcell { background: var(--paper); padding: 0.5rem; text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: 0.03em; }
.cal-cell { background: #fff; min-height: 90px; padding: 0.4rem; display: flex; flex-direction: column; gap: 2px; }
.cal-empty { background: var(--paper); }
.cal-today { background: var(--blue-soft); }
.cal-daynum { font-size: 0.75rem; font-weight: 600; color: var(--slate-dark); margin-bottom: 2px; }
.cal-chip { font-size: 0.65rem; background: var(--mint-soft); color: #0B8264; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip.cal-more { background: var(--paper); color: var(--slate); }
@media (max-width: 640px) {
  .cal-cell { min-height: 60px; font-size: 0.7rem; }
  .cal-chip { display: none; }
  .cal-cell.cal-today .cal-chip, .cal-cell:has(.cal-chip) .cal-daynum::after { content: " •"; color: var(--mint); }
}
.request-actions { display: flex; gap: 0.4rem; }
.request-actions form { margin: 0; }

.backup-codes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; background: var(--paper); padding: 1rem; margin: 1rem 0; }
.backup-codes code { font-family: var(--font-mono); font-size: 0.8rem; text-align: center; background: #fff; padding: 0.4rem; border: 1px solid var(--border); }

/* ---------- Bar chart (pure CSS) ---------- */
.bar-chart { display: flex; align-items: flex-end; gap: 0.75rem; height: 200px; padding-top: 1.5rem; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.bar-val { font-size: 0.7rem; color: var(--slate); margin-bottom: 0.35rem; }
.bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; background: var(--paper); }
.bar { width: 100%; background: var(--blue); min-height: 2px; }
.bar-label { font-size: 0.7rem; color: var(--slate); margin-top: 0.4rem; }

/* ---------- Small inline controls (Team / roster) ---------- */
.inline-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
.mini-input { width: 100px; padding: 0.4rem 0.5rem; font-size: 0.8rem; border: 1px solid var(--border); font-family: var(--font-mono); }
/* A native date input needs real room for "dd/mm/yyyy" plus its own
   built-in calendar icon — the base 100px above was set for genuinely
   narrow fields (PINs, small numbers) and reused for date pickers
   without accounting for that, causing the year to visually truncate.
   Higher specificity (element + class) than .mini-input alone, so this
   correctly overrides just for date inputs without affecting every
   other field using the same class. */
input[type="date"].mini-input { width: 150px; }
.mini-select { padding: 0.35rem 0.4rem; font-size: 0.78rem; border: 1px solid var(--border); background: #fff; }
.roster-select { padding: 0.3rem; font-size: 0.75rem; border: 1px solid var(--border); background: #fff; width: 100%; }
.fix-link { font-size: 0.7rem; margin-left: 0.5rem; color: var(--slate); text-decoration: underline; }
.setup-steps { padding-left: 1.25rem; margin: 0.75rem 0 0; }
.setup-steps li { margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--slate-dark); }
.setup-steps code { background: var(--paper); padding: 0.1rem 0.35rem; font-family: var(--font-mono); font-size: 0.8rem; }
.setup-url-box { background: var(--paper); padding: 0.6rem 0.75rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.setup-url-box code { background: #fff; padding: 0.2rem 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; border: 1px solid var(--border); flex: 1; min-width: 200px; }

/* ---------- Settings tabs ---------- */
.settings-tabs { display: flex; gap: 0.25rem; overflow-x: auto; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.settings-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.65rem 0.9rem; font-size: 0.82rem; font-weight: 500; color: var(--slate); white-space: nowrap; cursor: pointer; font-family: var(--font-body); }
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.settings-panel[hidden] { display: none; }

/* ---------- Fingerprint enrollment guide ---------- */
.fingerprint-guide { background: var(--blue-soft); border: 1px solid var(--blue); padding: 0.9rem 1rem; margin-bottom: 1.25rem; font-size: 0.82rem; }
.fingerprint-guide strong { display: block; margin-bottom: 0.4rem; color: var(--blue-deep); }
.fingerprint-guide ol { margin: 0 0 0.5rem; padding-left: 1.1rem; }
.fingerprint-guide li { margin-bottom: 0.3rem; color: var(--slate-dark); }
.fingerprint-guide a { color: var(--blue-deep); font-weight: 500; }

/* ---------- Team: collapsible per-row edit panel ---------- */
.team-edit-row td { background: var(--paper); padding: 1rem 0.75rem !important; }
.team-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.team-edit-field label { display: block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate); margin-bottom: 0.35rem; }

/* ---------- Kiosk ---------- */
.kiosk-body { padding: 2rem 1rem; }
.kiosk-wrap { width: 100%; max-width: 720px; margin: 0 auto; }
.kiosk-card { max-width: 420px; margin: 0 auto; text-align: center; }
.kiosk-search { width: 100%; max-width: 420px; display: block; margin: 0 auto 1.5rem; padding: 0.9rem 1rem; font-size: 1rem; border: 1px solid var(--ink-line); background: var(--ink-soft); color: #fff; }
.kiosk-search::placeholder { color: #8890B5; }
.kiosk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }
.kiosk-tile { background: var(--card); border: 1px solid var(--border); padding: 1.25rem 1rem; text-align: center; color: var(--text); font-weight: 500; font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.25rem; }
.kiosk-tile:hover { border-color: var(--blue); }
.kiosk-check { width: 64px; height: 64px; line-height: 64px; margin: 0 auto 1rem; background: var(--mint-soft); color: var(--mint); font-size: 2rem; border-radius: 50%; }

/* ---------- Setup wizard ---------- */
.wizard-steps { display: flex; justify-content: center; gap: 1.5rem; margin: 1.5rem 0 1rem; }
.wizard-step { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #5E6690; }
.wizard-step.active { color: #fff; }
.wizard-step.done { color: var(--mint); }
.wizard-choice-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 1rem 0; }
.wizard-choice { border: 1px solid var(--border); padding: 1rem; background: var(--paper); }
.wizard-choice strong { display: block; margin-bottom: 0.3rem; }
@media (min-width: 640px) { .wizard-choice-grid { grid-template-columns: repeat(3, 1fr); } }
.setting-recommendation { display: inline-block; background: var(--mint-soft); color: #0B8264; font-size: 0.75rem; padding: 0.3rem 0.6rem; margin-top: 0.5rem; }

/* ---------- Chatbot widget ---------- */
#chatbot-widget { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 50; font-family: var(--font-body); }
#chatbot-toggle { width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: #fff; border: none; font-size: 1.4rem; cursor: pointer; box-shadow: 0 4px 14px rgba(59,91,255,0.4); display: flex; align-items: center; justify-content: center; position: relative; z-index: 51; }
#chatbot-toggle:hover { background: var(--blue-deep); }
#chatbot-panel { position: absolute; bottom: 64px; right: 0; width: 320px; max-width: calc(100vw - 2.5rem); height: 420px; max-height: 70vh; background: var(--card); border: 1px solid var(--border); box-shadow: 0 8px 30px rgba(18,23,43,0.18); display: flex; flex-direction: column; overflow: hidden; }
/* THE ACTUAL BUG: the rule above sets display:flex via an ID selector,
   which has higher CSS specificity than the browser's built-in
   [hidden] { display: none; } rule — so toggling the hidden ATTRIBUTE
   via JS was never actually hiding the panel visually; this rule was
   silently winning that fight the entire time, regardless of what the
   JS correctly set. #chatbot-panel[hidden] has higher specificity than
   #chatbot-panel alone, so this correctly wins instead. */
#chatbot-panel[hidden] { display: none; }
#chatbot-header { padding: 0.9rem 1rem; border-bottom: 1px solid var(--border); background: var(--ink); color: #fff; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
#chatbot-header strong { display: block; font-size: 0.9rem; }
#chatbot-header .muted { color: #9AA1BE; }
#chatbot-close { flex-shrink: 0; background: rgba(255,255,255,0.08); border: none; color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; }
#chatbot-close:hover { background: rgba(255,255,255,0.18); }
#chatbot-messages { flex: 1; overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; }
.chatbot-msg { max-width: 85%; padding: 0.55rem 0.75rem; font-size: 0.85rem; line-height: 1.5; }
.chatbot-msg-bot { background: var(--paper); align-self: flex-start; }
.chatbot-msg-user { background: var(--blue); color: #fff; align-self: flex-end; }
.chatbot-typing { opacity: 0.5; }
.chatbot-suggestions { display: flex; flex-direction: column; gap: 0.35rem; align-self: flex-start; max-width: 92%; }
.chatbot-suggestions button { text-align: left; background: #fff; border: 1px solid var(--border); padding: 0.45rem 0.65rem; font-size: 0.8rem; cursor: pointer; color: var(--blue); }
.chatbot-suggestions button:hover { background: var(--blue-soft); }
#chatbot-form { display: flex; border-top: 1px solid var(--border); }
#chatbot-input { flex: 1; border: none; padding: 0.75rem; font-size: 0.85rem; font-family: var(--font-body); outline: none; }
#chatbot-form button { border: none; background: var(--blue); color: #fff; padding: 0 1rem; cursor: pointer; font-size: 0.8rem; }
[data-theme="dark"] .chatbot-suggestions button { background: var(--card); color: var(--text); }
@media (max-width: 480px) {
  #chatbot-panel { width: calc(100vw - 2rem); right: -0.25rem; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .sidebar { position: fixed; left: -224px; top: 0; bottom: 0; z-index: 20; transition: left 0.2s; }
  .sidebar.open { left: 0; }
  .sidebar-toggle { display: block; position: fixed; top: 0.85rem; left: 1rem; z-index: 21; background: var(--ink); color: #fff; border: none; width: 36px; height: 36px; }
  .content { padding: 1rem; }
  .topbar { padding-left: 3.5rem; }
  /* Touch targets grow slightly on smaller screens — easier to tap accurately */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
  .btn-icon { min-height: 38px; min-width: 38px; }
  .stack-form input, .stack-form select, .stack-form textarea { min-height: 42px; font-size: 16px; } /* 16px avoids iOS auto-zoom on focus */
}

@media (max-width: 480px) {
  .clock-display { font-size: 2.1rem; }
  .clock-card { padding: 1.75rem 1.25rem; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .stat-value { font-size: 1.2rem; }
  .card { padding: 1rem; }
  .kiosk-grid { grid-template-columns: repeat(2, 1fr); }
  .backup-codes { grid-template-columns: repeat(2, 1fr); }
  .topbar-right { gap: 0.6rem; }
  .live-clock { font-size: 1rem; }
}

/* ---------- Print ---------- */
/* window.print() previously printed the whole app shell — sidebar, nav,
   buttons and all. This scopes printing to just the content that matters:
   the page title and whatever card/table is actually being printed. */
@media print {
  .sidebar, .sidebar-toggle, .bell-link, .topbar-right, .settings-tabs,
  .onboarding-card, .fingerprint-guide, .alert, .fix-link,
  form:not(.print-keep) { display: none !important; }
  .app-shell, .main, .content { display: block !important; padding: 0 !important; margin: 0 !important; }
  .topbar { border-bottom: 2px solid #000; padding: 0 0 0.5rem; margin-bottom: 1rem; }
  .topbar h1 { font-size: 1.3rem; }
  .card { border: none !important; box-shadow: none !important; padding: 0 !important; margin-top: 1.25rem !important; page-break-inside: avoid; }
  .card-head { display: flex !important; }
  .card-head form, .card-head a.btn, .card-head button { display: none !important; }
  .table { font-size: 0.8rem; }
  .table th, .table td { border-bottom: 1px solid #999 !important; }
  .status-pill::before { background: currentColor !important; }
  body { background: #fff !important; color: #000 !important; }
  a[href]::after { content: ""; } /* don't print raw URLs after links */
}


/* Neutral notice (payroll export checks) */
.alert-info { background: var(--paper, #f4f5fa); color: var(--ink, #1b2140); border-color: var(--amber, #e0a100); }