/* ── Reset & variables ─────────────────────────────────────────────────── */
:root {
  /* Aligned with the public site (wokfood.ca) warm design system */
  --primary:    #E8570A;
  --primary-dk: #c8480a;
  --bg:         #FBF7F1;   /* warm off-white page */
  --surface:    #FFFFFF;   /* cards */
  --surface-2:  #F4EEE5;   /* subtle fills */
  --text:       #1F1A16;   /* warm near-black */
  --text-muted: #5E544B;   /* secondary text */
  --border:     #ECE3D7;   /* hairlines */
  --success:    #2F7D55;
  --success-bg: #E7F2EB;
  --danger:     #B23A2E;
  --danger-bg:  #F6E7E4;
  --info-bg:    #dbeafe;
  --info-text:  #1e40af;
  --radius:     18px;
  --radius-sm:  12px;
  --shadow:     0 1px 2px rgba(31,26,22,.04), 0 8px 24px -12px rgba(31,26,22,.18);
  --dark:       #17120F;   /* warm dark surfaces (header, login) */
  --nav-h:      64px;
  --header-h:   52px;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

/* ── App header ─────────────────────────────────────────────────────────── */
.app-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--dark); /* warm dark — matches the site's hero/footer */
  height: var(--header-h);
  padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  color: #fff;
}
.app-header-left  { display: flex; align-items: center; gap: 8px; }
.app-logo         { font-size: 1.3rem; }
.app-title        { font-size: 1rem; font-weight: 700; letter-spacing: -0.3px; }
.app-version      { font-size: 0.7rem; color: rgba(255,255,255,0.35); font-weight: 400; }
.app-header-right { display: flex; align-items: center; gap: 12px; }
.user-chip        { font-size: 0.8rem; color: rgba(255,255,255,0.65); }
.logout-link      { color: rgba(255,255,255,0.6); font-size: 1.1rem; text-decoration: none; }
.logout-link:hover { color: #fff; }

.lang-toggle {
  display: flex; background: rgba(255,255,255,0.1); border-radius: 6px; overflow: hidden;
}
.lang-btn {
  padding: 4px 8px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.4px;
  color: rgba(255,255,255,0.55); text-decoration: none; transition: background 0.15s, color 0.15s;
}
.lang-btn:hover  { color: #fff; background: rgba(255,255,255,0.15); }
.lang-btn.active { color: #fff; background: var(--primary); }

/* ── Bottom nav ─────────────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface); border-top: 1px solid var(--border);
  display: flex; z-index: 200;
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-decoration: none; color: var(--text-muted);
  font-size: 0.62rem; gap: 2px; padding: 6px 2px;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav a.active { color: var(--primary); }
.nav-icon { font-size: 1.3rem; line-height: 1; }

/* ── Content ────────────────────────────────────────────────────────────── */
.content { padding: 16px; max-width: 760px; margin: 0 auto; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border-radius: 14px;
  padding: 18px 16px; margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.card-title {
  font-size: 1rem; font-weight: 700; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.card-header-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.card-header-row .card-title { margin-bottom: 0; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
  position: relative;
  padding: 11px 38px 11px 14px;   /* room for the close button */
  border-radius: 8px; margin-bottom: 14px; font-size: 0.9rem;
  line-height: 1.5;
}

/* Close button. Errors and warnings stay until dismissed, so there has to be
   a way to dismiss them. */
.alert-close {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 6px;
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  color: inherit; opacity: 0.55;
  -webkit-tap-highlight-color: transparent;
}
.alert-close:hover,
.alert-close:focus { opacity: 1; background: rgba(0,0,0,0.07); }
.alert-success { background: var(--success-bg); color: #065f46; }
.alert-danger  { background: var(--danger-bg);  color: #991b1b; }
.alert-info    { background: var(--info-bg);     color: var(--info-text); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-group   { margin-bottom: 14px; }
.form-label   { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 5px; color: var(--text-muted); }
.form-control {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 1rem; font-family: inherit; color: var(--text); background: #fff;
  transition: border-color 0.15s; -webkit-appearance: none;
}
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,93,4,0.12); }
.form-row  { display: flex; gap: 12px; }
.form-check { margin-bottom: 14px; font-size: 0.9rem; }
.form-check label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 10px 18px; border: none; border-radius: 8px;
  font-size: 0.95rem; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: opacity 0.12s, transform 0.08s;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.btn:active    { transform: scale(0.97); opacity: 0.85; }
.btn-primary   { background: var(--primary); color: #fff; }
.btn-secondary { background: var(--border);  color: var(--text); }
.btn-danger    { background: var(--danger);  color: #fff; }
.btn-sm        { padding: 6px 12px; font-size: 0.82rem; border-radius: 6px; }
.btn-block     { width: 100%; }
.btn-row       { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.mb-2          { margin-bottom: 14px; }

/* ── Today card ─────────────────────────────────────────────────────────── */
.today-card       { border-top: 3px solid var(--primary); }
.today-header     { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.today-label      { font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
                    letter-spacing: 0.5px; color: var(--primary); }
.today-date       { font-size: 0.95rem; font-weight: 700; }
.today-shift-time { font-size: 1.05rem; font-weight: 600; margin-bottom: 4px;
                    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.clock-status-bar {
  background: var(--success-bg);
  color: #065f46;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  margin: 12px 0 10px;
}

/* ── Shift block (today, with embedded clock button) ────────────────────── */
.shift-block {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.shift-block:last-of-type { border-bottom: none; }

.shift-block-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.shift-block-info { min-width: 0; flex: 1; }
.shift-block-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.shift-block-action { flex-shrink: 0; }

.sched-badge {
  display: inline-block;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

/* Compact per-shift clock button */
.shift-clock-btn {
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.08s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.shift-clock-btn:active { transform: scale(0.96); }
.shift-clock-btn.in  { background: var(--success); }
.shift-clock-btn.out { background: var(--danger); }
.shift-clock-btn.btn-block-sm { width: 100%; margin-top: 6px; }

/* Scheduled vs worked summary line */
.sched-vs-worked {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.diff-chip {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
.diff-chip.over  { background: #fef3c7; color: #92400e; }   /* worked more */
.diff-chip.under { background: #e0e7ff; color: #3730a3; }   /* worked less */

/* ── Recent hours list (scheduled vs worked) ────────────────────────────── */
.recent-list { margin-top: 14px; }
.recent-day {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.recent-day:last-child { border-bottom: none; }
.recent-day-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.recent-date { font-weight: 700; font-size: 0.9rem; }
.rd-time-row {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.recent-day-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.rd-sched  { }
.rd-worked strong { color: var(--text); }
.rd-times {
  background: var(--bg);
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 0.76rem;
}

/* ── Hours summary (recent hours + estimated pay) ───────────────────────── */
.hours-summary {
  display: flex;
  gap: 10px;
}
.hours-summary-item {
  flex: 1;
  background: var(--bg);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}
.hsi-value {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hsi-pay   { color: var(--primary); }
.hsi-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Clock button ───────────────────────────────────────────────────────── */
.clock-card  { text-align: center; padding: 24px 20px; }
.time-big    { font-size: 3rem; font-weight: 800; letter-spacing: -2px; line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.elapsed-label { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 4px; }
.clock-btn {
  width: 100%; padding: 22px; font-size: 1.3rem; font-weight: 800;
  border: none; border-radius: 14px; cursor: pointer; color: #fff;
  transition: transform 0.1s, opacity 0.15s; font-family: inherit; margin-top: 16px;
  -webkit-tap-highlight-color: transparent;
}
.clock-btn:active { transform: scale(0.97); }
.clock-btn.in  { background: var(--success); }
.clock-btn.out { background: var(--danger); }

/* ── Person list (who's on) ─────────────────────────────────────────────── */
.person-list { list-style: none; }
.person-row  {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.person-row:last-child { border-bottom: none; }
.person-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.person-meta { font-size: 0.82rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status-dot.on  { background: var(--success); box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
.status-dot.off { background: var(--border); }

.elapsed-chip {
  background: var(--success-bg); color: #065f46;
  font-size: 0.75rem; padding: 2px 7px; border-radius: 10px; font-weight: 600;
}
.badge-count {
  background: var(--primary); color: #fff;
  font-size: 0.75rem; padding: 1px 7px; border-radius: 10px; font-weight: 600;
}

/* ── Dashboard stats list ───────────────────────────────────────────────── */
.stats-list { list-style: none; }

.stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.stats-row:last-child { border-bottom: none; }

.stats-name {
  font-size: 0.95rem;
  font-weight: 600;
}
.stats-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stats-cost {
  font-size: 0.82rem;
  color: var(--primary);
  font-weight: 600;
}
.stats-hours {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  min-width: 52px;
  text-align: right;
}
.stats-hours-zero {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.95rem;
}
.period-label { font-size: 0.78rem; color: var(--text-muted); text-align: right; }
.period-note  { font-size: 0.72rem; color: var(--text-muted); margin-left: 4px; }

.period-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--border);
}
.period-nav-label  { text-align: center; flex: 1; }
.period-nav-main   { font-size: 0.9rem; font-weight: 700; }
.period-nav-sub    { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

/* ── KPI grid ───────────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.kpi-tile {
  background: var(--bg);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
}
.kpi-tile-live { background: var(--success-bg); }
.kpi-diff-over  { color: var(--danger); }
.kpi-diff-under { color: var(--success); }
.stats-sub { font-size: 0.76rem; margin-top: 2px; }
.day-compare {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 2px 0 10px;
}
.kpi-value {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-cost { color: var(--primary); }
.kpi-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 6px;
  font-weight: 600;
}

/* Fixed payroll line */
.payroll-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 10px;
}
.payroll-label { font-size: 0.85rem; font-weight: 600; display: flex; flex-direction: column; }
.payroll-label .text-muted { font-size: 0.72rem; font-weight: 400; margin-top: 1px; }
.payroll-value { font-size: 1.05rem; font-weight: 800; color: var(--text); white-space: nowrap; }

/* Stats total row */
.stats-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--border);
  font-size: 0.9rem;
  font-weight: 600;
}
.stats-total-value { font-size: 1.15rem; font-weight: 800; color: var(--primary); }

/* ── Employee hours total ───────────────────────────────────────────────── */
.my-hours-total {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ── My schedule / shift rows ───────────────────────────────────────────── */
.schedule-day { margin-bottom: 14px; }
.schedule-day-header {
  font-weight: 700; font-size: 0.88rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.shift-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.shift-time { font-weight: 600; font-size: 0.95rem; }
.shift-loc  { font-size: 0.82rem; color: var(--text-muted); }
.shift-position { font-size: 0.82rem; font-weight: 400; color: var(--text-muted); }

/* ── Horizontal schedule grid ───────────────────────────────────────────── */
.week-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.week-label { text-align: center; }
.week-label-main { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }
.week-label-date { font-size: 0.85rem; font-weight: 700; }

.sched-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sched-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
}

.sched-table th {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 8px 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  min-width: 80px;
}
.sched-table th.sched-today-col { background: #fff3e0; color: var(--primary); }

.sched-emp-col { min-width: 90px !important; text-align: left !important; }

.sched-emp-cell {
  border: 1px solid var(--border);
  padding: 8px 10px;
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  background: var(--bg);
  vertical-align: middle;
}

.sched-day-cell {
  border: 1px solid var(--border);
  padding: 5px 4px;
  vertical-align: top;
  min-width: 80px;
}
.sched-day-cell.sched-today-col { background: #fffaf5; }

.sched-chip {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--primary); color: #fff;
  border-radius: 4px; padding: 2px 4px 2px 5px;
  font-size: 0.72rem; margin-bottom: 3px; gap: 2px;
}
.sched-chip-time {
  color: inherit; text-decoration: none; flex: 1;
  font-weight: 600;
}
.sched-chip-del {
  background: none; border: none; color: rgba(255,255,255,0.8);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px;
  font-family: inherit;
}
.sched-chip-del:hover { color: #fff; }

.sched-add-btn {
  display: block; text-align: center; color: var(--text-muted);
  font-size: 1rem; text-decoration: none; line-height: 1.4;
  border-radius: 3px; transition: color 0.1s;
}
.sched-add-btn:hover { color: var(--primary); }

/* ── Unavailability collapsible section (employee home) ─────────────────── */
.unavail-summary {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  padding: 0;
  margin: -2px 0 0;
}
.unavail-summary::-webkit-details-marker { display: none; }
.unavail-summary::after {
  content: '›';
  margin-left: auto;
  font-size: 1.2rem;
  color: var(--text-muted);
  transition: transform 0.2s;
}
details[open] .unavail-summary::after { transform: rotate(90deg); }
details > *:not(summary) { margin-top: 0; }

/* ── Unavailability banner (schedule builder) ───────────────────────────── */
.unavail-banner {
  background: #fee2e2;
  color: #991b1b;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
  margin-bottom: 10px;
  line-height: 1.4;
}

/* ── Admin schedule — vertical day cards ────────────────────────────────── */
.schedule-day-card        { padding: 14px 16px; }
.schedule-day-card.today  { border-left: 3px solid var(--primary); }

.schedule-day-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.schedule-day-label  { font-weight: 700; font-size: 0.9rem; }
.today-label         { color: var(--primary); }

.shift-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border);
}
.shift-item:last-child { border-bottom: none; }
.shift-item-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.shift-emp   { font-weight: 600; font-size: 0.9rem; }
.shift-time  { font-size: 0.82rem; color: var(--text-muted); }
.shift-notes { font-size: 0.78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-item-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Employee checkbox group (multi-select on add shift) ────────────────── */
.emp-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.emp-cb-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 0.15s, background 0.15s;
}
.emp-cb-label:has(input:checked) {
  border-color: var(--primary);
  background: rgba(232,93,4,0.05);
  font-weight: 600;
}
.emp-cb-label input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Admin employees ────────────────────────────────────────────────────── */
.emp-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border);
}
.emp-row:last-child { border-bottom: none; }
.emp-inactive { opacity: 0.55; }
.emp-info  { min-width: 0; }
.emp-name  { font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.emp-meta  { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.emp-actions { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.badge-inactive {
  background: var(--border); color: var(--text-muted);
  font-size: 0.7rem; padding: 1px 6px; border-radius: 4px; font-weight: 600;
}
.form-card { border-top: 3px solid var(--primary); }

/* ── Hours table ────────────────────────────────────────────────────────── */
.hours-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.hours-table th {
  text-align: left; padding: 7px 6px;
  border-bottom: 2px solid var(--border);
  color: var(--text-muted); font-size: 0.75rem;
  text-transform: uppercase; font-weight: 700;
}
.hours-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.hours-table tbody tr:last-child td { border-bottom: none; }
.total-row td { font-weight: 700; padding-top: 10px; }
.hours-action-cell { text-align: right; width: 1%; white-space: nowrap; }

/* Weekly split inside a pay period (Sunday → Saturday) */
.hours-table .week-head-row td {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding-top: 10px; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.hours-table .week-head-row td strong { color: var(--primary); }
.hours-table .week-total-row td {
  border-bottom: 2px solid var(--border);
  font-weight: 600; color: var(--text-muted);
  font-size: 0.8rem; padding-bottom: 10px;
}
.hours-table .week-total-row td strong { color: var(--text); }
.week-breakdown td { font-size: 0.82rem; }

/* Scheduled vs worked comparison, shown per employee card */
.sched-compare {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--text-muted);
  margin: 6px 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.sched-compare strong { color: var(--text); }
.sched-diff-flag { color: var(--primary); font-weight: 700; }
.total-badge {
  background: var(--primary); color: #fff;
  padding: 3px 10px; border-radius: 10px; font-weight: 700; font-size: 0.85rem;
}

/* ── Login ──────────────────────────────────────────────────────────────── */
.login-body { background: var(--dark); }
.login-page {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.login-logo      { font-size: 3rem; margin-bottom: 4px; }
.login-app-name  { color: #fff; font-size: 1.4rem; font-weight: 800; margin-bottom: 2px; }
.login-subtitle  { color: rgba(255,255,255,0.45); font-size: 0.85rem; margin-bottom: 28px; }
.login-card {
  width: 100%; max-width: 360px; background: #fff;
  border-radius: 18px; padding: 28px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.login-lang-toggle { margin-top: 20px; font-size: 0.85rem; }
.login-lang-toggle a { color: rgba(255,255,255,0.5); text-decoration: none; }
.login-lang-toggle a:hover { color: #fff; }

/* ── Login credentials ──────────────────────────────────────────────────── */
.login-username {
  font-family: 'SF Mono', Consolas, 'Courier New', monospace;
  font-size: 0.88rem; font-weight: 700; color: var(--primary);
  background: var(--bg); padding: 2px 7px; border-radius: 5px;
}
.login-url-box {
  background: var(--bg); border-radius: 8px; padding: 9px 12px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}

/* ── Labor cost estimates ───────────────────────────────────────────────── */
.cost-badge {
  background: var(--primary); color: #fff;
  padding: 3px 10px; border-radius: 10px; font-weight: 700; font-size: 0.85rem;
  white-space: nowrap;
}
.cost-cell  { color: var(--primary); font-weight: 600; white-space: nowrap; }
.src-tag {
  display: inline-block; margin-left: 6px;
  font-size: 0.68rem; font-weight: 600; white-space: nowrap;
  background: #e0e7ff; color: #3730a3;
  border-radius: 8px; padding: 1px 7px; vertical-align: middle;
}
.shift-cost { font-size: 0.76rem; color: var(--primary); font-weight: 700; margin-left: 4px; }

/* ── Break tracking ─────────────────────────────────────────────────────── */
.break-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.78rem; font-weight: 600;
  background: #fef3c7; color: #92400e;
  border-radius: 10px; padding: 2px 8px; margin-left: 8px;
}
.rd-break {
  display: inline-flex; align-items: center; gap: 3px;
  background: #fef3c7; color: #92400e;
  padding: 1px 7px; border-radius: 8px; font-size: 0.76rem;
}

/* ── Impersonation ──────────────────────────────────────────────────────── */
.impersonate-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #1a2332;
  color: #fff;
  font-size: 0.85rem;
  padding: 8px 16px;
  position: sticky;
  top: 0;
  z-index: 200;
}
.impersonate-back {
  background: var(--primary, #E8570A);
  color: #fff;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.impersonate-back:hover { opacity: 0.85; }

.impersonate-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px dashed var(--primary, #E8570A);
  cursor: pointer;
  transition: color 0.15s;
}
.impersonate-link:hover { color: var(--primary, #E8570A); }

/* ── Correction requests ────────────────────────────────────────────────── */
.correction-details { margin-top: 8px; }
.correction-details > summary {
  font-size: 0.78rem; color: var(--text-muted);
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 0; user-select: none;
}
.correction-details > summary::-webkit-details-marker { display: none; }
.correction-details > summary:hover,
.correction-details[open] > summary { color: var(--primary); }
.correction-details > form {
  padding: 12px; background: var(--bg);
  border-radius: 8px; margin-top: 6px;
}
.correction-chip {
  display: inline-block; font-size: 0.75rem; font-weight: 600;
  color: #92400e; background: #fef3c7;
  border-radius: 10px; padding: 2px 8px; margin-top: 6px;
}
.correction-admin-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border);
}
.correction-admin-row:last-child { border-bottom: none; }
.correction-admin-info { flex: 1; min-width: 0; }
.correction-admin-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 2px; }
.correction-admin-date { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 6px; }
.correction-admin-times { display: flex; flex-direction: column; gap: 3px; font-size: 0.82rem; color: var(--text-muted); }
.correction-admin-note { font-style: italic; color: var(--text); }
.correction-admin-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; align-items: flex-start; padding-top: 2px; }

/* ── Utilities ──────────────────────────────────────────────────────────── */
.text-muted { color: var(--text-muted); }
.text-sm    { font-size: 0.85rem; }
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 14px; }
.mt-3 { margin-top: 22px; }
em.text-muted { font-style: italic; }

/* ── Dark mode ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #17120F;   /* warm near-black */
    --surface:    #241C17;   /* warm dark card */
    --surface-2:  #2C221A;   /* subtle fills */
    --text:       #FBF7F1;
    --text-muted: #B3A899;
    --border:     #3A2F26;
    --success-bg: #1A2E22;
    --success:    #4CAF78;
  }
  .form-control { background: #1F1A16; color: #FBF7F1; border-color: #3A2F26; }
  .bottom-nav   { background: #241C17; border-top-color: #3A2F26; }
  .sched-table th, .sched-emp-cell { background: #1F1A16; }
  .pay-kpi-owing { background: #2A1A10; }
  .pay-kpi-clear { background: var(--success-bg); }
  .pay-pill-progress, .pay-lead-owing { background: #2A1A10; }
  .pay-info-note { --pay-info-bg: #162030; --pay-info-text: #8ab8e0; }
  .pay-hero-amount { color: var(--text); }
  .pay-summary-source.is-estimate { background: #2A1A10; color: var(--primary); }
  .pay-period-card { border-top-color: var(--border); }
}

/* ============================================================
   Design-system alignment with the public site (wokfood.ca)
   Colors come from the remapped :root tokens above; this block
   adds the matching typography, shape (radii), and shadows so the
   tool reads as the same family while staying fully functional.
   ============================================================ */

/* Type: Hanken Grotesk body, Spectral for the wordmark + card titles */
body, .login-body {
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.app-title, .login-app-name, .card-title {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  letter-spacing: -0.01em;
}
.app-title b, .login-app-name b { color: var(--primary); font-weight: 700; }

/* Shape + shadow: softer cards, warm elevation (matches the site) */
.card        { border-radius: var(--radius); box-shadow: var(--shadow); }
.login-card  { border-radius: var(--radius); box-shadow: 0 18px 40px -16px rgba(31,26,22,.45); }
.btn         { border-radius: 12px; }
.btn-sm      { border-radius: 10px; }

/* Warm accent tints (replace the old orange #e85d04 rgba values) */
.form-control:focus           { box-shadow: 0 0 0 3px rgba(232,87,10,.14); }
.emp-cb-label:has(input:checked) { background: rgba(232,87,10,.06); }
.status-dot.on                { box-shadow: 0 0 0 3px rgba(47,125,85,.22); }

/* Spectral on the two big hero numerals (clock + pay) — everywhere else stays
   Hanken Grotesk; these are the two numbers an employee reads at a glance. */
.main-clock-time, .pay-hero-amount {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
}
.sched-table th.sched-today-col { background: color-mix(in oklab, var(--primary) 12%, var(--surface)); }
.sched-day-cell.sched-today-col { background: color-mix(in oklab, var(--primary) 6%, var(--surface)); }

/* ── Inventaire — module décompte ────────────────────────────────────────── */
.inv-subnav {
  display: flex; gap: 6px; margin-bottom: 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.inv-subnav-link {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px;
  background: var(--surface-2, #f4eee5); color: var(--text-muted);
  text-decoration: none; font-size: 0.82rem; font-weight: 600;
  border: 1px solid var(--border);
}
.inv-subnav-link.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.inv-cat-head {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
  margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}

/* ── Feuille de décompte type Excel ───────────────────────────────────────── */
.inv-sheet-head { margin-bottom: 12px; }

/* Encadré « Comment ça marche » */
.inv-help {
  margin: 10px 0 14px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2, #faf6f0); font-size: 0.86rem;
}
.inv-help > summary {
  cursor: pointer; font-weight: 700; color: var(--text);
  list-style: none; user-select: none;
}
.inv-help > summary::-webkit-details-marker { display: none; }
.inv-help-list { margin: 8px 0 6px; padding-left: 18px; }
.inv-help-list li { margin: 4px 0; line-height: 1.45; }
.inv-help-ex { margin: 6px 0 0; color: var(--text-muted); font-style: italic; line-height: 1.45; }

/* ── Help tip (? icon: hover on desktop, tap on mobile) ────────────────────── */
.help-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-left: 6px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface-2, #faf6f0); color: var(--text-muted);
  font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
  vertical-align: middle; position: relative; -webkit-appearance: none;
}
.help-tip:hover, .help-tip:focus-visible, .help-tip.open {
  color: var(--text); border-color: var(--text-muted); outline: none;
}
/* Tooltip bubble */
.help-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%);
  width: max-content; max-width: 240px;
  padding: 8px 10px; border-radius: 8px;
  background: #1a2332; color: #fff;
  font-size: 0.78rem; font-weight: 500; line-height: 1.4;
  text-align: left; white-space: normal;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  opacity: 0; visibility: hidden; transition: opacity 0.12s;
  z-index: 60; pointer-events: none;
}
/* Little arrow under the bubble */
.help-tip::before {
  content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #1a2332;
  opacity: 0; visibility: hidden; transition: opacity 0.12s;
  z-index: 60; pointer-events: none;
}
.help-tip:hover::after, .help-tip:focus-visible::after, .help-tip.open::after,
.help-tip:hover::before, .help-tip:focus-visible::before, .help-tip.open::before {
  opacity: 1; visibility: visible;
}
/* Keep the bubble inside the viewport near the right edge */
.help-tip.tip-left::after  { left: auto; right: -4px; transform: none; }
.help-tip.tip-left::before { left: auto; right: 4px;  transform: none; }

/* Conteneur scrollable horizontalement sur petit écran */
.inv-sheet-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 -16px;                 /* déborde des marges de la carte */
  border-top: 1px solid var(--border);
}
.inv-sheet {
  border-collapse: collapse;
  width: 100%; min-width: 680px;   /* garde la mise en page « tableau » */
  font-size: 0.85rem;
}
.inv-sheet col.col-nom   { width: auto; }
.inv-sheet col.col-fmt   { width: 96px; }
.inv-sheet col.col-unite { width: 64px; }
.inv-sheet col.col-four  { width: 110px; }
.inv-sheet col.col-prix  { width: 76px; }
.inv-sheet col.col-stock { width: 104px; }
.inv-sheet col.col-seuil { width: 104px; }
.inv-sheet col.col-ac    { width: 84px; }

.inv-sheet th, .inv-sheet td {
  border: 1px solid var(--border);
  padding: 5px 8px; text-align: left; vertical-align: middle;
}
.inv-sheet .num { text-align: right; }

/* Bande de section (comme les titres colorés de l'Excel) */
.inv-sheet .inv-band td {
  background: #32281e; color: #fff;
  font-weight: 700; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 7px 10px; border-color: #32281e;
  position: sticky; left: 0;
}

/* En-tête de colonnes */
.inv-sheet .inv-colhead th {
  background: var(--surface-2, #f4eee5); color: var(--text-muted);
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  white-space: nowrap;
}
.inv-sheet .inv-th-ac { background: #fdf3c4; color: #8a6d00; }

/* Lignes d'articles : bandes alternées */
.inv-sheet .inv-itemrow:nth-child(even) { background: #faf8f5; }
.inv-sheet .inv-itemrow.inv-row--ac     { background: #fff7ed; }
.inv-sheet .c-nom  { font-weight: 600; }
.inv-sheet .c-fmt, .inv-sheet .c-unite, .inv-sheet .c-four, .inv-sheet .c-prix {
  color: var(--text-muted); font-size: 0.8rem;
}

/* Cellules de saisie : champ qui remplit toute la cellule */
.inv-sheet .c-stock, .inv-sheet .c-seuil { padding: 2px; }
.inv-input-en-stock, .inv-input-seuil {
  width: 100%; box-sizing: border-box;
  min-height: 44px; padding: 8px 10px;
  text-align: center; font-size: 1.1rem; font-weight: 600;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
  -moz-appearance: textfield;
}
/* Retire les flèches du champ numérique (elles volaient la place pour taper) */
.inv-input-en-stock::-webkit-outer-spin-button,
.inv-input-en-stock::-webkit-inner-spin-button,
.inv-input-seuil::-webkit-outer-spin-button,
.inv-input-seuil::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.inv-input-en-stock { background: #fffdf5; }
.inv-input-en-stock:focus, .inv-input-seuil:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(232,93,4,0.18);
}

/* Colonne « À commander » : fond jaune comme l'Excel */
.inv-sheet .c-ac { background: #fdf9e3; font-weight: 700; }
.inv-sheet .inv-itemrow.inv-row--ac .c-ac { background: #fde9c8; }
.inv-ac-val { color: var(--text-muted); font-size: 0.95rem; }
.inv-ac-nonzero { color: #b83a00; }

/* Indicateur de sauvegarde automatique */
.inv-autosave { font-weight: 600; margin-left: 6px; font-size: 0.8rem; white-space: nowrap; }
.inv-autosave.is-saving { color: var(--text-muted); }
.inv-autosave.is-saved  { color: #2f7d55; }
.inv-autosave.is-error  { color: #b23a2e; }
.inv-input-en-stock, .inv-input-seuil { transition: box-shadow 0.2s ease; }
.inv-input-en-stock.inv-saving, .inv-input-seuil.inv-saving { box-shadow: 0 0 0 2px #e0a96d; }
.inv-saved-flash { box-shadow: 0 0 0 2px #6ac08c !important; }

/* ── Tableau liste de commande ────────────────────────────────────────────── */
.inv-commande-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 4px;
}
.inv-commande-table th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
  border-bottom: 2px solid var(--border); padding: 5px 4px;
}
.inv-commande-table th.num,
.inv-commande-table td.num { text-align: right; }
.inv-commande-table td {
  padding: 6px 4px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.inv-commande-table tr:last-child td { border-bottom: none; }
.inv-order-group { margin-bottom: 6px; }

.badge-low {
  display: inline-block; font-size: 0.62rem; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; vertical-align: middle;
  background: var(--danger-bg, #f6e7e4); color: var(--danger, #b23a2e);
}
.badge-status {
  display: inline-block; font-size: 0.62rem; font-weight: 700;
  padding: 1px 8px; border-radius: 999px; vertical-align: middle; margin-left: 4px;
  background: var(--surface-2, #f4eee5); color: var(--text-muted);
}
.badge-ordered  { background: color-mix(in oklab, var(--primary) 16%, var(--surface)); color: var(--primary); }
.badge-received { background: var(--success-bg, #e7f2eb); color: var(--success, #2f7d55); }
.badge-cancelled{ background: var(--danger-bg, #f6e7e4); color: var(--danger, #b23a2e); }

/* ── Payments ──────────────────────────────────────────────────────────── */
.pay-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px dashed var(--border);
}

.pay-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}

.pay-section-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
}

.pay-kpi-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.pay-kpi {
  flex: 1;
  min-width: 90px;
  background: var(--surface-2, #f8f5f1);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}

.pay-kpi-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.pay-kpi-lbl {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin-top: 2px;
}

.pay-kpi-clear  { background: var(--success-bg, #e7f2eb); }
.pay-kpi-clear  .pay-kpi-val { color: var(--success, #2f7d55); }
.pay-kpi-owing  { background: #fff5ed; }
.pay-kpi-owing  .pay-kpi-val { color: var(--primary); }

/* Lead metrics — the two things employees actually care about */
.pay-lead-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.pay-lead {
  flex: 1;
  min-width: 0;
  background: var(--surface-2, #f8f5f1);
  border-radius: 10px;
  padding: 12px 14px;
}
.pay-lead-lbl {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.pay-lead-val {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.pay-lead-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Friendly empty state when no shift is scheduled this period */
.pay-empty-state {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2, #f8f5f1);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.pay-empty-icon { font-size: 1.5rem; line-height: 1; opacity: 0.85; }
.pay-empty-title { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.pay-empty-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 3px; }

/* ── Employee pay page (Mes paiements) ──────────────────────────────────── */
/* Mobile-first redesign — hero number + collapsed period cards */

.pay-hero {
  text-align: center;
  padding: 20px 16px 10px;
  margin-bottom: 4px;
}
.pay-hero-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.pay-hero-amount {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pay-hero-hours {
  font-size: 1.6rem;
  letter-spacing: -1px;
}
.pay-hero-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Period card — collapsible <details> */
.pay-period-card {
  border-top: 3px solid var(--border);
  padding: 0;
  overflow: hidden;
}
.pay-period-card[open] {
  border-top-color: var(--primary);
}

/* Summary row (always visible) */
.pay-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pay-summary::-webkit-details-marker { display: none; }
.pay-summary::after {
  content: '▾';
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.pay-period-card[open] .pay-summary::after {
  transform: rotate(180deg);
}

.pay-summary-left { min-width: 0; flex: 1; }
.pay-summary-date {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 3px;
}
.pay-summary-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.78rem;
}
.pay-summary-hours { color: var(--text-muted); }
.pay-summary-right {
  text-align: right;
  flex-shrink: 0;
}
.pay-summary-amount {
  font-weight: 800;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.pay-summary-status { margin-top: 3px; }

/* Source badge on collapsed summary */
.pay-summary-source {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.pay-summary-source.is-official {
  background: var(--success-bg);
  color: var(--success);
}
.pay-summary-source.is-estimate {
  background: #fff5ed;
  color: var(--primary);
}

/* Expanded detail */
.pay-detail {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
}

/* Money breakdown — simple rows, no receipt table */
.pay-breakdown {
  margin: 10px 0;
}
.pay-bd-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.9rem;
}
.pay-bd-row .pay-bd-val {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pay-bd-subhead {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding-top: 10px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.pay-bd-ded .pay-bd-val { color: var(--text-muted); }
.pay-bd-total {
  border-top: 2px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
  font-weight: 800;
}
.pay-bd-total .pay-bd-val {
  font-size: 1.05rem;
  color: var(--primary);
}
.pay-bd-total.is-paid .pay-bd-val { color: var(--success); }
.pay-bd-payment .pay-bd-val { color: var(--success); }
.pay-period-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.pay-period-head .card-title { margin-bottom: 0; }

.pay-pill {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.pay-pill-progress { background: #fff5ed; color: var(--primary); }
.pay-pill-paid     { background: var(--success-bg, #e7f2eb); color: var(--success, #2f7d55); }
.pay-pill-due      { background: var(--primary); color: #fff; }

.pay-receipt { font-size: 0.92rem; margin-bottom: 4px; }
.pay-receipt-line {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 5px 0;
}
.pay-receipt-line .pr-lbl { color: var(--text-muted); min-width: 0; }
.pay-receipt-line .pr-val {
  font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pay-receipt-total { border-top: 1.5px solid var(--border); margin-top: 2px; }
.pay-receipt-total .pr-lbl { color: var(--text); font-weight: 700; }
.pay-receipt-total .pr-val { font-weight: 700; }
.pay-receipt-payment .pr-lbl,
.pay-receipt-payment .pr-val { color: var(--success, #2f7d55); }

/* Deductions are money taken off, not money received — never green. */
.pay-receipt-deduction .pr-lbl,
.pay-receipt-deduction .pr-val { color: var(--muted, #64748b); }
.pay-receipt-balance { border-top: 2px solid var(--border); margin-top: 2px; padding-top: 8px; }
.pay-receipt-balance .pr-lbl { color: var(--text); font-weight: 800; }
.pay-receipt-balance .pr-val { font-weight: 800; font-size: 1.05rem; color: var(--primary); }
.pay-receipt-balance.is-paid .pr-lbl,
.pay-receipt-balance.is-paid .pr-val { color: var(--success, #2f7d55); }

.pay-payday-note { font-size: 0.8rem; color: var(--text-muted); margin: 6px 0 2px; }
.pay-payday-note strong { color: var(--text); }

.pay-hours { margin-top: 10px; border-top: 1px solid var(--border); }
.pay-hours > summary {
  font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 6px; padding: 10px 0 6px;
}
.pay-hours > summary::-webkit-details-marker { display: none; }
.pay-hours > summary::after { content: '▾'; margin-left: auto; transition: transform 0.15s; }
.pay-hours[open] > summary::after { transform: rotate(180deg); }
.pay-hours[open] > summary { color: var(--primary); }
.pay-hours .recent-list { margin-top: 0; }

/* Lead tile variants (owed vs. settled) */
.pay-lead-owing { background: #fff5ed; }
.pay-lead-owing .pay-lead-val { color: var(--primary); }
.pay-lead-clear { background: var(--success-bg, #e7f2eb); }
.pay-lead-clear .pay-lead-val { color: var(--success, #2f7d55); }

/* Quiet clarification note (e.g. a payment spanning multiple periods) */
.pay-info-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--pay-info-bg, #eef4fb);
  color: var(--pay-info-text, #1c4a73);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.8rem;
  line-height: 1.45;
  margin-bottom: 4px;
}

.pay-add-form {
  background: var(--surface-2, #f8f5f1);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.pay-section-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tips-block {
  margin-bottom: 6px;
}

/* Tip line-items inside the hours table */
.hours-table .tip-row td {
  background: #fff7f0;
}
.hours-table .tip-row .src-tag {
  font-weight: 600;
}

/* ── Payroll entry grid (admin) ─────────────────────────────────────────── */
/* Fields mirror the Employeur D report so the admin can read down the stub
   and across the grid without translating between two vocabularies. */

.payroll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 12px;
  margin-bottom: 12px;
}

.pg-cell { display: block; }

.pg-lbl {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted, #64748b);
  font-weight: 600;
  margin-bottom: 3px;
}

.pg-num { text-align: right; font-variant-numeric: tabular-nums; }

.pg-section-lbl {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted, #64748b);
  font-weight: 700;
  margin: 14px 0 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #e8ecf0);
}


/* Declared tips sit apart from the earnings grid — they are taxed but never
   deposited, so they must not read as money still owed. */
.pg-declared {
  background: #fff8ed;
  border: 1px solid #f0dcc0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.pg-help {
  font-size: 0.74rem;
  line-height: 1.45;
  color: #8a6534;
  margin: 6px 0 0;
}

.pg-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  background: var(--surface-2, #f8f5f1);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.pg-totals strong {
  display: block;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--text, #1a2332);
}

.pg-t-net-wrap strong { color: var(--success, #0d6e3b); }

.pg-more {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted, #64748b);
  padding: 6px 0;
}

/* Draft / published state */
.stub-status-pill {
  display: inline-block;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 700;
}
.stub-status-pill.is-published { background: #e0f2f1; color: #00695c; }
.stub-status-pill.is-draft     { background: #fde8e8; color: #a12622; }

/* ── Employee: pay-stub list ────────────────────────────────────────────── */

.stub-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border, #e8ecf0);
  text-decoration: none;
  color: inherit;
}
.stub-list-row:last-child { border-bottom: none; }

/* The label column must be allowed to shrink, or the net-pay figure pushes it
   past the card edge on a narrow phone. */
.stub-list-main   { flex: 1; min-width: 0; }
.stub-list-period { display: block; font-weight: 600; font-size: 0.9rem; }
.stub-list-sub    { display: block; font-size: 0.76rem; color: var(--muted, #64748b); margin-top: 2px; }
.stub-list-net    { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Declared tips on the employee pay page — money already in hand, shown
   apart from the deposit total so it never reads as owed. */
.pay-declared-note {
  background: #fff8ed;
  border: 1px solid #f0dcc0;
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 12px;
}
.pay-declared-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.86rem;
  color: #7c4a03;
  font-weight: 600;
}
.pay-declared-top strong { font-variant-numeric: tabular-nums; }
.pay-declared-note p {
  margin: 5px 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: #8a6534;
}

/* ── Main clock card (unified shift + clock) ──────────────────────────────── */
.main-clock-card {
  border-top: 3px solid var(--primary);
  text-align: center;
  padding: 24px 20px 20px;
}
.clock-greeting {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.clock-greeting strong { color: var(--primary); }
.clock-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.main-clock-time {
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: -3px;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.main-clock-idle { color: var(--text-muted); }
.main-clock-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.main-clock-btn {
  width: 100%;
  padding: 18px;
  font-size: 1.15rem;
  font-weight: 800;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  transition: transform 0.1s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.main-clock-btn:active { transform: scale(0.97); }
.main-clock-btn.in  { background: var(--success); }
.main-clock-btn.out { background: var(--danger); }

/* Shift info inside the clock card (when not clocked in) */
.main-shift-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 10px 0 0;
}
.main-shift-icon { font-size: 1.3rem; line-height: 1; }
.main-shift-times { text-align: left; }
.main-shift-times strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}
.main-shift-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.main-shift-notes {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 8px 0 0;
  text-align: center;
}

/* Shift badge when clocked in */
.main-shift-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--text-muted);
  background: var(--bg);
  border-radius: 8px;
  padding: 5px 12px;
  margin-top: 6px;
}

/* No shift today */
.main-no-shift {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 12px;
}

/* Next shift preview (when no shift today) */
.main-next-shift {
  background: var(--bg);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.main-next-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.main-next-date { font-weight: 600; color: var(--text); }
.main-next-time { font-weight: 600; }

/* Scheduled vs worked summary inside the clock card */
.main-sched-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.main-sched-item strong { color: var(--text); }

/* ── Unavailability bar (compact button on home page) ────────────────────── */
.unavail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.12s;
}
.unavail-bar:active { opacity: 0.7; }
.unavail-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
}
.unavail-bar-add {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
}

/* ── Next-shift teaser (Home → Horaire link) ──────────────────────────────
   Same tappable-row look as .unavail-bar, generalized for any "go see more"
   link on Home. */
.teaser-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.12s;
}
.teaser-bar:active { opacity: 0.7; }
.teaser-bar-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.teaser-bar-label { font-size: 0.78rem; color: var(--text-muted); }
.teaser-bar-main  { font-weight: 700; font-size: 0.95rem; }
.teaser-bar-arrow { color: var(--primary); font-weight: 700; flex-shrink: 0; }

/* ── Today's team (Horaire tab — who's scheduled/working today) ──────────── */
.person-row.own-row { background: rgba(232,87,10,.06); border-radius: 10px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; }

/* ── Week grouping headers (Horaire tab) ──────────────────────────────────── */
.sched-week-head {
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin: 18px 0 8px; padding-top: 10px; border-top: 1px solid var(--border);
}
.sched-week-head:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ── Time-off status pills (mirrors .pay-pill) ─────────────────────────────── */
.timeoff-pill {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; display: inline-block;
}
.timeoff-pill-pending  { background: #fff5ed; color: var(--primary); }
.timeoff-pill-approved { background: var(--success-bg, #e7f2eb); color: var(--success, #2f7d55); }
.timeoff-pill-denied   { background: var(--danger-bg, #f6e7e4); color: var(--danger, #b23a2e); }

.timeoff-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.timeoff-row:last-child { border-bottom: none; }
.timeoff-row-info { min-width: 0; }
.timeoff-row-dates { font-weight: 600; font-size: 0.92rem; }
.timeoff-row-reason { font-size: 0.82rem; color: var(--text-muted); }
.timeoff-row-note { font-size: 0.78rem; color: var(--text-muted); font-style: italic; margin-top: 2px; }

/* ── Admin: pending time-off review card (mirrors .correction-admin-row) ──── */
.timeoff-admin-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.timeoff-admin-row:last-child { border-bottom: none; }
/* min-width below lets the row wrap the actions block onto its own line on a
   narrow screen instead of squeezing the name/reason into a sliver next to it. */
.timeoff-admin-info { flex: 1 1 200px; min-width: 200px; }
.timeoff-admin-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 2px; }
.timeoff-admin-dates { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px; }
.timeoff-admin-reason { font-style: italic; color: var(--text); font-size: 0.88rem; }
.timeoff-admin-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; align-items: flex-start; padding-top: 2px; }

/* Delete sits inline with the reason text instead of crowding the
   approve/deny buttons — small and muted until touched, since it's a
   destructive action riding along with a line of text, not a primary action. */
.timeoff-delete-inline {
  background: none; border: none; padding: 2px 4px; margin-left: 2px;
  font-size: 0.82rem; line-height: 1; cursor: pointer;
  opacity: 0.55; border-radius: 5px; vertical-align: -1px;
  -webkit-tap-highlight-color: transparent;
}
.timeoff-delete-inline:hover,
.timeoff-delete-inline:focus { opacity: 1; background: rgba(0,0,0,0.06); }

/* Approved time-off banner on admin schedule day cards — same shape as
   .unavail-banner but a distinct (green) tint so the two read apart. */
.timeoff-banner {
  background: var(--success-bg, #e7f2eb);
  color: #1a5c3c;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.82rem;
  margin-bottom: 10px;
}