:root {
  --ink: #1f2937;
  --muted: #64748b;
  --muted-2: #475569;
  --line: #e5e7eb;
  --line-strong: #dbe2ea;
  --paper: #ffffff;
  --bg: #f5f7fb;
  --surface-soft: #f8fafc;
  --brand: #1976d2;
  --brand-strong: #1565c0;
  --brand-soft: #eff6ff;
  --blue: #2563eb;
  --green: #16a34a;
  --red: #dc2626;
  --amber: #ea580c;
  --cyan: #0891b2;
  --purple: #7c3aed;
  --radius: 20px;
  --shadow: 0 8px 22px rgba(31, 41, 55, .06);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding-bottom: 92px;
}
a { color: inherit; }
.staff-shell { width: min(760px,100%); margin: 0 auto; padding: 16px 14px 32px; }

.staff-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px max(14px,calc((100vw - 760px)/2 + 14px));
  box-shadow: 0 4px 16px rgba(31,41,55,.035);
}
.staff-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.staff-brand img { width:48px; height:34px; object-fit:contain; }
.staff-brand span { display:flex; flex-direction:column; }
.staff-brand strong { font-size:14px; color:var(--ink); }
.staff-brand small { font-size:11px; color:var(--muted); }
.staff-profile { display:flex; gap:8px; align-items:center; text-decoration:none; font-size:13px; color:var(--muted); }
.staff-eyebrow { text-transform:uppercase; letter-spacing:.11em; font-size:11px; font-weight:800; color:var(--muted); }

/* Bright Office-style header. */
.staff-hero {
  background: linear-gradient(135deg,#ffffff 0%,#f8fbff 58%,#eef6ff 100%);
  color: var(--ink);
  padding: 22px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.staff-hero h1 { font-size:27px; margin:5px 0 18px; letter-spacing:-.02em; }
.staff-hero .staff-eyebrow { color:var(--muted); }
.staff-hero-compact h1 { margin-bottom:0; }
.staff-summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.staff-summary-grid > div { background:#fff; border:1px solid var(--line); padding:12px; border-radius:15px; box-shadow:0 3px 10px rgba(31,41,55,.03); }
.staff-summary-grid strong,.staff-summary-grid span { display:block; }
.staff-summary-grid strong { font-size:20px; color:var(--brand-strong); }
.staff-summary-grid span { font-size:11px; color:var(--muted); margin-top:3px; }

.staff-section { margin-top:18px; background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:16px; box-shadow:var(--shadow); }
.staff-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.staff-section-head h2 { font-size:19px; margin:2px 0; }
.staff-section-head > a { font-size:13px; color:var(--blue); font-weight:700; }
.staff-section-head > small { color:var(--muted); font-size:11px; }

.staff-focus-card {
  margin-top: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid #bfdbfe;
  background: linear-gradient(135deg,#fff 0%,#eff6ff 100%);
  box-shadow: var(--shadow);
}
.staff-focus-card.is-live { border-color:#7dd3fc; background:linear-gradient(135deg,#fff 0%,#ecfeff 100%); }
.staff-focus-card.is-pending { border-color:#fdba74; background:linear-gradient(135deg,#fff 0%,#fff7ed 100%); }
.staff-focus-card.is-pending .staff-focus-top { color:#9a3412; }
.staff-focus-top { display:flex; justify-content:space-between; gap:10px; align-items:center; color:var(--brand-strong); font-size:12px; font-weight:800; }
.staff-focus-top span { display:flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.07em; }
.staff-focus-top strong { font-size:18px; }
.staff-focus-card h2 { margin:8px 0 3px; font-size:22px; }
.staff-focus-card p { margin:0 0 14px; color:var(--muted); font-size:13px; }
.staff-focus-actions { display:grid; grid-template-columns:minmax(0,1fr) 50px; gap:9px; }
.staff-icon-button { display:flex; align-items:center; justify-content:center; border-radius:14px; background:#fff; border:1px solid #bfdbfe; color:var(--brand); text-decoration:none; font-size:20px; }

.staff-job-list { display:grid; gap:10px; }
.staff-job-card { display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:18px; text-decoration:none; background:#fff; box-shadow:0 2px 8px rgba(31,41,55,.03); }
.staff-job-card.is-done { opacity:.68; }
.staff-job-card.is-cancelled { opacity:.72; border-color:#cbd5e1; background:#f8fafc; }
.staff-job-card.is-rescheduled { opacity:.76; border-color:#c4b5fd; background:#faf5ff; }
.staff-job-card.is-rescheduled-in { border-color:#93c5fd; background:#f5f9ff; }
.staff-job-card.is-in-progress { border-color:#7dd3fc; background:#f0fdff; box-shadow:0 0 0 2px rgba(8,145,178,.05); }
.staff-job-card.is-report-due { border-color:#c4b5fd; background:#faf5ff; }
.staff-job-card.is-late { border-color:#fdba74; background:#fff7ed; }
.staff-job-time { display:flex; flex-direction:column; }
.staff-job-time strong { font-size:16px; }
.staff-job-time span { font-size:11px; color:var(--muted); }
.staff-job-copy { min-width:0; display:flex; flex-direction:column; }
.staff-job-copy strong { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.staff-job-copy span { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.staff-job-copy small { font-size:11px; color:#94a3b8; margin-top:4px; }
.staff-status { font-size:10px; font-weight:800; padding:6px 8px; border-radius:999px; white-space:nowrap; }
.staff-status.is-done { color:#166534; background:#dcfce7; }
.staff-status.is-cancelled { color:#475569; background:#e2e8f0; }
.staff-status.is-rescheduled { color:#6d28d9; background:#ede9fe; }
.staff-status.is-rescheduled-in { color:#1d4ed8; background:#dbeafe; }
.staff-status.is-pending,.staff-status.is-not-started { color:#92400e; background:#fef3c7; }
.staff-status.is-in-progress { color:#0e7490; background:#cffafe; }
.staff-status.is-finished,.staff-status.is-report-due { color:#6d28d9; background:#ede9fe; }
.staff-status.is-late { color:#9a3412; background:#ffedd5; }

.staff-empty { text-align:center; padding:30px 18px; color:var(--muted); display:flex; flex-direction:column; gap:6px; }
.staff-empty i { font-size:30px; color:#94a3b8; }
.staff-empty strong { color:var(--ink); }
.staff-preview-row { display:grid; grid-template-columns:64px 1fr; gap:10px; padding:9px 0; border-top:1px solid var(--line); }
.staff-preview-row:first-of-type { border-top:0; }
.staff-day-heading { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.staff-day-heading span { font-size:12px; font-weight:800; color:var(--blue); }
.staff-day-heading strong { font-size:18px; }
.staff-day-heading small { margin-left:auto; color:var(--muted); }

.staff-bottom-nav {
  position:fixed;
  left:50%;
  bottom:max(12px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:30;
  width:min(420px,calc(100% - 28px));
  display:grid;
  grid-template-columns:1fr 1fr;
  background:rgba(255,255,255,.97);
  border:1px solid var(--line);
  border-radius:20px;
  padding:7px;
  box-shadow:0 14px 34px rgba(31,41,55,.14);
}
.staff-bottom-nav a { display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; color:#94a3b8; padding:8px; border-radius:14px; font-size:11px; font-weight:650; }
.staff-bottom-nav a i { font-size:19px; }
.staff-bottom-nav a.active { background:#eff6ff; color:var(--brand); }

.staff-back { display:inline-flex; align-items:center; gap:3px; text-decoration:none; color:var(--muted); font-size:13px; font-weight:700; margin:3px 0 12px; }
.staff-job-hero { background:linear-gradient(135deg,#fff 0%,#f8fbff 100%); border:1px solid var(--line); border-top:4px solid var(--brand); border-radius:24px; padding:20px; box-shadow:var(--shadow); }
.staff-job-hero h1 { font-size:27px; margin:4px 0 8px; }
.staff-job-hero p { color:var(--muted); margin:14px 0; }
.staff-job-meta { display:flex; flex-wrap:wrap; gap:8px; }
.staff-job-meta span { display:inline-flex; gap:6px; align-items:center; background:#f8fafc; border:1px solid var(--line); padding:7px 10px; border-radius:999px; font-size:12px; }
.staff-map { display:inline-flex; align-items:center; gap:7px; background:#eff6ff; color:#1d4ed8; font-weight:800; text-decoration:none; padding:10px 13px; border-radius:13px; }

.staff-job-tools { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.staff-alarm-pin { min-height:41px; display:inline-flex; align-items:stretch; overflow:hidden; border:1px solid #fed7aa; border-radius:13px; background:#fff7ed; color:#9a3412; transition:border-color .15s,background .15s,color .15s; }
.staff-alarm-pin-main { display:inline-flex; align-items:center; gap:8px; padding:9px 11px; font-weight:800; }
.staff-alarm-pin-main > i { font-size:15px; }
.staff-alarm-pin-value { min-width:46px; font-variant-numeric:tabular-nums; letter-spacing:.12em; color:#7c2d12; }
.staff-alarm-pin-toggle { width:42px; appearance:none; border:0; border-left:1px solid #fed7aa; background:#ffedd5; color:#c2410c; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:17px; }
.staff-alarm-pin-toggle:hover { background:#fed7aa; }
.staff-alarm-pin-toggle:focus-visible { outline:3px solid #fdba74; outline-offset:-3px; }
.staff-alarm-pin-toggle:disabled { cursor:wait; opacity:.6; }
.staff-alarm-pin.is-revealed { border-color:#86efac; background:#f0fdf4; color:#166534; }
.staff-alarm-pin.is-revealed .staff-alarm-pin-value { color:#14532d; letter-spacing:.08em; }
.staff-alarm-pin.is-revealed .staff-alarm-pin-toggle { border-left-color:#86efac; background:#dcfce7; color:#166534; }
.staff-alarm-pin.is-loading .staff-alarm-pin-value { opacity:.55; }

.staff-execution-copy { color:var(--muted); font-size:13px; line-height:1.5; margin-bottom:12px; }
.staff-execution-readonly { display:flex; gap:12px; align-items:center; padding:14px; border-radius:15px; background:#f8fafc; border:1px solid var(--line); }
.staff-execution-readonly i { font-size:24px; color:var(--brand); }
.staff-execution-readonly span { display:flex; flex-direction:column; }
.staff-execution-readonly small { color:var(--muted); margin-top:2px; }
.staff-execution-readonly.is-complete i { color:var(--green); }
.staff-execution-readonly.is-cancelled { background:#f8fafc; border-color:#cbd5e1; }
.staff-execution-readonly.is-cancelled i { color:#64748b; }
.staff-execution-readonly.is-rescheduled { background:#faf5ff; border-color:#c4b5fd; }
.staff-execution-readonly.is-rescheduled i { color:#7c3aed; }
.staff-running-card { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:12px; }
.staff-running-card.is-finished { grid-template-columns:repeat(3,1fr); }
.staff-running-card > div { background:#f8fafc; border:1px solid var(--line); border-radius:15px; padding:12px; display:flex; flex-direction:column; }
.staff-running-card span { color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-size:10px; font-weight:800; }
.staff-running-card strong { margin-top:3px; font-size:18px; color:var(--ink); }
.staff-running-card small { margin-top:2px; color:var(--muted); font-size:10px; }
.staff-live-timer { font-variant-numeric:tabular-nums; }
.staff-action-button { width:100%; appearance:none; border:0; border-radius:15px; padding:15px 16px; font-size:16px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; }
.staff-action-button.is-start { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.staff-action-button.is-finish { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }

.staff-quick-actions { display:grid; gap:9px; }
.staff-quick-panel { border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; }
.staff-quick-panel summary { list-style:none; cursor:pointer; padding:12px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; align-items:center; }
.staff-quick-panel summary::-webkit-details-marker { display:none; }
.staff-quick-panel summary > span:nth-child(2) { display:flex; flex-direction:column; }
.staff-quick-panel summary small { color:var(--muted); font-size:11px; margin-top:2px; }
.staff-quick-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; }
.staff-quick-icon.is-problem { background:#fff7ed; color:var(--amber); }
.staff-quick-icon.is-supplies { background:#eff6ff; color:var(--brand); }
.staff-quick-form { display:grid; gap:11px; padding:0 12px 12px; border-top:1px solid var(--line); padding-top:12px; }
.staff-secondary-button { appearance:none; border:1px solid #bfdbfe; background:#eff6ff; color:#1d4ed8; border-radius:14px; padding:12px; font:inherit; font-weight:800; cursor:pointer; }
.staff-secondary-button.is-danger { border-color:#fed7aa; background:#fff7ed; color:#c2410c; }
.staff-event-history { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.staff-event-row { display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:8px; align-items:start; padding:8px 0; border-bottom:1px solid #f1f5f9; }
.staff-event-row:last-child { border-bottom:0; }
.staff-event-row > i { color:var(--amber); }
.staff-event-row span { display:flex; flex-direction:column; min-width:0; }
.staff-event-row small { color:var(--muted); font-size:11px; margin-top:2px; white-space:normal; }
.staff-event-row b { font-size:10px; color:var(--green); }

.staff-report-form { display:grid; gap:14px; }
.staff-status-choice { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.staff-status-choice input { position:absolute; opacity:0; pointer-events:none; }
.staff-status-choice span { display:flex; align-items:center; justify-content:center; gap:7px; border:2px solid var(--line); border-radius:16px; padding:14px; font-weight:800; }
.staff-status-choice input:checked + span.is-done { border-color:#22c55e; background:#f0fdf4; color:#166534; }
.staff-field { display:grid; gap:6px; font-size:12px; font-weight:800; color:var(--muted-2); }
.staff-field textarea,.staff-field select,.staff-form input,.staff-form select { width:100%; border:1px solid #cbd5e1; border-radius:14px; padding:12px; background:white; color:var(--ink); font:inherit; font-size:15px; outline:none; }
.staff-field textarea:focus,.staff-field select:focus,.staff-form input:focus,.staff-form select:focus { border-color:#60a5fa; box-shadow:0 0 0 3px #dbeafe; }
.staff-choice-field { margin:0; padding:0; border:0; min-width:0; }
.staff-choice-field legend { margin:0 0 7px; padding:0; font-size:12px; font-weight:800; color:var(--muted-2); }
.staff-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.staff-choice { position:relative; min-width:0; cursor:pointer; }
.staff-choice input { position:absolute; opacity:0; pointer-events:none; }
.staff-choice span { min-height:44px; display:flex; align-items:center; justify-content:center; text-align:center; padding:10px 8px; border:1px solid #cbd5e1; border-radius:13px; background:#fff; color:var(--muted-2); font-size:12px; font-weight:800; line-height:1.2; transition:border-color .15s,background .15s,color .15s,box-shadow .15s; }
.staff-choice input:checked + span { border-color:var(--brand); background:#eff6ff; color:#1565c0; box-shadow:0 0 0 2px rgba(25,118,210,.10); }
.staff-choice input:focus-visible + span { outline:3px solid #bfdbfe; outline-offset:2px; }
.staff-photo-picker { position:relative; display:flex; align-items:center; gap:12px; border:1px dashed #94a3b8; background:#f8fafc; border-radius:18px; padding:14px; cursor:pointer; }
.staff-photo-picker input { position:absolute; inset:0; opacity:0; }
.staff-photo-picker i { font-size:26px; color:var(--brand); }
.staff-photo-picker span { display:flex; flex-direction:column; }
.staff-photo-picker small { color:var(--muted); }
.staff-photo-selection { font-size:12px; color:var(--blue); font-weight:700; }
.staff-existing-photos { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:13px; background:#f8fafc; font-size:12px; }
.staff-existing-photos span { color:var(--muted); }
.staff-primary { appearance:none; border:0; background:var(--brand); color:white; border-radius:15px; padding:14px 16px; font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; cursor:pointer; box-shadow:0 6px 14px rgba(25,118,210,.18); }
.staff-primary:hover { background:var(--brand-strong); color:#fff; }
.staff-form-note { text-align:center; color:var(--muted); font-size:11px; margin:0; }
.staff-alert { padding:12px 14px; border-radius:14px; margin-bottom:12px; font-size:13px; font-weight:650; }
.staff-alert.is-success { background:#dcfce7; color:#166534; }
.staff-alert.is-error { background:#fee2e2; color:#991b1b; }
.staff-alert.is-info { background:#e0f2fe; color:#075985; }
.staff-alert.is-warning { background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; }
.staff-alert.is-neutral { background:#f1f5f9; color:#475569; border:1px solid #cbd5e1; }
.staff-alert.is-rescheduled { background:#f5f3ff; color:#6d28d9; border:1px solid #c4b5fd; }
.mt-tight { margin-top:10px; margin-bottom:0; }

/* Unified visit cancellation and rescheduling. */
.staff-change-banner { margin-top:14px; display:grid; grid-template-columns:46px minmax(0,1fr); gap:13px; align-items:start; padding:16px; border-radius:20px; border:1px solid var(--line); box-shadow:var(--shadow); }
.staff-change-banner > i { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:14px; font-size:22px; }
.staff-change-banner h2 { margin:3px 0 4px; font-size:18px; }
.staff-change-banner p { margin:0; font-size:12px; line-height:1.45; }
.staff-change-banner a { display:inline-flex; align-items:center; gap:6px; margin-top:9px; font-size:12px; font-weight:800; text-decoration:none; }
.staff-change-banner.is-cancelled { background:#f8fafc; border-color:#cbd5e1; color:#475569; }
.staff-change-banner.is-cancelled > i { background:#e2e8f0; color:#64748b; }
.staff-change-banner.is-rescheduled { background:#faf5ff; border-color:#c4b5fd; color:#5b21b6; }
.staff-change-banner.is-rescheduled > i { background:#ede9fe; color:#7c3aed; }
.staff-change-banner.is-rescheduled-in { background:#f5f9ff; border-color:#93c5fd; color:#1e40af; }
.staff-change-banner.is-rescheduled-in > i { background:#dbeafe; color:#2563eb; }
.staff-change-actions { display:grid; gap:10px; }
.staff-change-panel { border:1px solid var(--line); border-radius:17px; background:#fff; overflow:hidden; }
.staff-change-panel summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; align-items:center; padding:13px; }
.staff-change-panel summary::-webkit-details-marker { display:none; }
.staff-change-panel summary > span { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:12px; font-size:19px; }
.staff-change-panel summary > div { display:flex; flex-direction:column; }
.staff-change-panel summary small { margin-top:2px; color:var(--muted); font-size:11px; }
.staff-change-panel.is-cancel summary > span { background:#f1f5f9; color:#64748b; }
.staff-change-panel.is-reschedule summary > span { background:#ede9fe; color:#7c3aed; }
.staff-change-form { display:grid; gap:12px; padding:13px; border-top:1px solid var(--line); background:#fbfdff; }
.staff-change-datetime { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.staff-change-help { margin:-3px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.staff-change-submit { width:100%; appearance:none; border:0; border-radius:14px; padding:13px; font:inherit; font-weight:800; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; }
.staff-change-submit.is-cancel { color:#fff; background:#64748b; }
.staff-change-submit.is-reschedule { color:#fff; background:#7c3aed; }
@media(max-width:430px){ .staff-change-datetime { grid-template-columns:1fr; } }

.staff-login-wrap { min-height:calc(100vh - 32px); display:flex; align-items:center; justify-content:center; }
.staff-login-card { width:min(100%,430px); background:white; border:1px solid var(--line); border-top:4px solid var(--brand); border-radius:26px; padding:24px; box-shadow:0 20px 50px rgba(31,41,55,.10); }
.staff-login-logo { display:block; width:160px; max-height:70px; object-fit:contain; margin:0 auto 18px; }
.staff-login-card h1 { font-size:27px; margin:4px 0; }
.staff-login-card > p { color:var(--muted); margin-top:5px; }
.staff-form { display:grid; gap:14px; }
.staff-form label { display:grid; gap:6px; font-size:12px; font-weight:800; color:var(--muted-2); }

@media (max-width: 360px) {
  .staff-choice-grid { grid-template-columns:1fr; }
}
@media (max-width: 430px) {
  .staff-running-card.is-finished { grid-template-columns:1fr 1fr; }
  .staff-running-card.is-finished > div:last-child { grid-column:1 / -1; }
  .staff-job-card { grid-template-columns:54px minmax(0,1fr); }
  .staff-job-card > .staff-status { grid-column:2; justify-self:start; }
}
@media (min-width:720px) {
  .staff-shell { padding-top:24px; }
  .staff-job-card { padding:16px; }
  .staff-hero { padding:28px; }
  .staff-section { padding:20px; }
}
@media (min-width:900px) {
  body:after { content:"This staff portal is designed for phone and tablet use."; position:fixed; right:18px; bottom:18px; font-size:10px; color:#94a3b8; }
}

/* Persistent staff sign-in */
.staff-form label.staff-remember {
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-soft);
  cursor:pointer;
  color:var(--ink);
}
.staff-form label.staff-remember input {
  appearance:auto;
  width:18px;
  height:18px;
  min-width:18px;
  margin:0;
  padding:0;
  accent-color:var(--brand);
  box-shadow:none;
}
.staff-form label.staff-remember span { display:flex; flex-direction:column; gap:1px; }
.staff-form label.staff-remember strong { font-size:13px; }
.staff-form label.staff-remember small { color:var(--muted); font-size:11px; font-weight:600; }

/* Phase 2C — Employee self-service */
.staff-bottom-nav { grid-template-columns:repeat(3,1fr); }
.staff-me-hero { padding-bottom:20px; }
.staff-me-head { display:flex; align-items:center; gap:14px; }
.staff-me-head h1 { margin:3px 0 2px; }
.staff-me-head p { margin:0; color:var(--muted); font-size:13px; }
.staff-me-avatar { width:66px; height:66px; flex:0 0 66px; border-radius:20px; object-fit:cover; border:1px solid var(--line); background:#fff; box-shadow:0 4px 14px rgba(31,41,55,.06); }
.staff-me-avatar.is-placeholder { display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--brand); background:#eff6ff; }
.staff-me-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:16px; }
.staff-me-kpis > div { display:flex; flex-direction:column; min-width:0; padding:12px; border-radius:15px; background:#fff; border:1px solid var(--line); }
.staff-me-kpis span,.staff-me-metrics span,.staff-holiday-summary span { font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:800; color:var(--muted); }
.staff-me-kpis strong { font-size:19px; color:var(--brand-strong); margin-top:3px; }
.staff-me-kpis small { font-size:10px; color:var(--muted); margin-top:2px; }
.staff-me-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.staff-me-metrics article { display:grid; grid-template-columns:30px minmax(0,1fr); column-gap:7px; padding:12px; border:1px solid var(--line); border-radius:15px; background:#f8fafc; }
.staff-me-metrics article i { grid-row:1 / span 3; font-size:20px; color:var(--brand); align-self:center; }
.staff-me-metrics strong { font-size:18px; margin-top:2px; }
.staff-me-metrics small { color:var(--muted); font-size:10px; }
.staff-me-note { display:flex; gap:8px; padding:10px 12px; margin-top:10px; border-radius:13px; background:#eff6ff; color:#1e40af; font-size:11px; line-height:1.4; }
.staff-me-list,.staff-certificate-list { display:grid; gap:8px; }
.staff-me-row { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:15px; padding:11px; background:#fff; }
.staff-me-row-icon { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#eff6ff; color:var(--brand); font-size:18px; }
.staff-me-row-copy { min-width:0; display:flex; flex-direction:column; }
.staff-me-row-copy strong { font-size:14px; }
.staff-me-row-copy small,.staff-me-row-copy em { font-size:10px; color:var(--muted); font-style:normal; margin-top:2px; }
.staff-me-row > b { max-width:90px; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-size:10px; }
.staff-holiday-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.staff-holiday-summary > div { display:flex; flex-direction:column; padding:10px 7px; background:#f8fafc; border:1px solid var(--line); border-radius:13px; text-align:center; }
.staff-holiday-summary strong { margin-top:3px; font-size:17px; }
.staff-holiday-progress { height:8px; overflow:hidden; margin:10px 0 0; border-radius:999px; background:#e2e8f0; }
.staff-holiday-progress span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#60a5fa,#1976d2); }
.staff-pill { display:inline-flex; align-items:center; border-radius:999px; padding:5px 8px; font-size:9px; font-weight:800; text-transform:uppercase; }
.staff-pill.is-booked { color:#1d4ed8; background:#dbeafe; }
.staff-pill.is-taken { color:#166534; background:#dcfce7; }
.staff-pill.is-cancelled { color:#64748b; background:#e2e8f0; }
.staff-certificate { display:grid; grid-template-columns:42px minmax(0,1fr) 40px; gap:10px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.staff-certificate-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; background:#dcfce7; color:#16a34a; }
.staff-certificate.is-warning .staff-certificate-icon { background:#fff7ed; color:#ea580c; }
.staff-certificate.is-expired .staff-certificate-icon { background:#fee2e2; color:#dc2626; }
.staff-certificate-copy { display:flex; flex-direction:column; min-width:0; }
.staff-certificate-copy strong { font-size:14px; }
.staff-certificate-copy small,.staff-certificate-copy em { font-size:10px; color:var(--muted); font-style:normal; margin-top:2px; }
.staff-certificate-download { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:#eff6ff; color:var(--brand); text-decoration:none; font-size:18px; }
@media(max-width:360px){ .staff-holiday-summary { grid-template-columns:repeat(2,1fr); } .staff-me-metrics { grid-template-columns:1fr; } }

/* Phase 2D — Staff Garage */
.staff-bottom-nav.has-garage { grid-template-columns:repeat(4,1fr); }
.staff-garage-hero p { margin:0; color:var(--muted); font-size:13px; }
.staff-garage-title { display:flex; align-items:center; gap:14px; margin:8px 0 18px; }
.staff-garage-title h1 { margin:0 0 2px; }
.staff-garage-car { width:58px; height:58px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:27px; color:var(--brand); background:var(--brand-soft); border:1px solid #bfdbfe; }
.staff-garage-summary { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.staff-garage-summary > div { background:#fff; border:1px solid var(--line); border-radius:16px; padding:13px; display:flex; flex-direction:column; gap:2px; }
.staff-garage-summary span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:800; }
.staff-garage-summary strong { font-size:18px; color:var(--ink); }
.staff-garage-summary small { font-size:11px; color:var(--muted); line-height:1.35; }
.staff-garage-summary .is-good { border-color:#bbf7d0; background:#f0fdf4; }
.staff-garage-summary .is-good strong { color:#15803d; }
.staff-garage-summary .is-warning { border-color:#fed7aa; background:#fff7ed; }
.staff-garage-summary .is-warning strong { color:#c2410c; }
.staff-garage-summary .is-danger { border-color:#fecaca; background:#fef2f2; }
.staff-garage-summary .is-danger strong { color:#b91c1c; }
.staff-garage-switcher { display:grid; gap:8px; }
.staff-garage-switcher a { display:flex; align-items:center; gap:10px; text-decoration:none; border:1px solid var(--line); border-radius:14px; padding:11px 12px; color:var(--muted-2); }
.staff-garage-switcher a.active { border-color:#93c5fd; background:var(--brand-soft); color:var(--brand-strong); font-weight:800; }
.staff-garage-help { margin:-2px 0 14px; color:var(--muted); font-size:12px; line-height:1.5; }
.staff-garage-form { display:grid; gap:12px; }
.staff-field { display:grid; gap:6px; }
.staff-field > span { font-size:12px; color:var(--muted-2); font-weight:800; }
.staff-field > span small { color:var(--muted); font-weight:500; }
.staff-field input,.staff-field textarea { width:100%; border:1px solid var(--line-strong); border-radius:13px; padding:12px 13px; font:inherit; color:var(--ink); background:#fff; outline:none; }
.staff-field input:focus,.staff-field textarea:focus { border-color:#93c5fd; box-shadow:0 0 0 3px rgba(25,118,210,.08); }
.staff-mileage-input { display:grid; grid-template-columns:1fr auto; align-items:center; border:1px solid var(--line-strong); border-radius:13px; background:#fff; overflow:hidden; }
.staff-mileage-input input { border:0; border-radius:0; min-width:0; }
.staff-mileage-input b { padding:0 13px; color:var(--muted); font-size:12px; }
.staff-full-button { width:100%; border:0; cursor:pointer; justify-content:center; }
.staff-garage-period { margin-top:11px; text-align:center; font-size:11px; color:var(--muted); }
.staff-garage-checks { display:grid; gap:10px; }
.staff-garage-check { min-width:0; margin:0; padding:12px; border:1px solid var(--line); border-radius:16px; }
.staff-garage-check legend { float:none; width:auto; margin:0 0 9px; padding:0; font-size:13px; font-weight:800; color:var(--ink); }
.staff-garage-check legend i { color:var(--brand); margin-right:4px; }
.staff-check-choice { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.staff-check-choice label { min-width:0; cursor:pointer; }
.staff-check-choice input { position:absolute; opacity:0; pointer-events:none; }
.staff-check-choice span { min-height:42px; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); border-radius:12px; font-size:11px; font-weight:800; color:var(--muted); background:#fff; text-align:center; }
.staff-check-choice input:checked + .is-ok { border-color:#86efac; background:#f0fdf4; color:#15803d; box-shadow:0 0 0 2px rgba(22,163,74,.06); }
.staff-check-choice input:checked + .is-attention { border-color:#fdba74; background:#fff7ed; color:#c2410c; box-shadow:0 0 0 2px rgba(234,88,12,.06); }
.staff-garage-history { display:grid; gap:16px; }
.staff-garage-history h3 { font-size:14px; margin:0 0 6px; color:var(--muted-2); }
.staff-garage-history article { display:flex; gap:10px; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.staff-garage-history article span { min-width:0; display:flex; flex-direction:column; }
.staff-garage-history article strong { font-size:13px; }
.staff-garage-history article small { font-size:11px; color:var(--muted); }
.staff-garage-history article em { max-width:45%; font-size:11px; color:var(--muted); font-style:normal; text-align:right; overflow-wrap:anywhere; }
.staff-garage-history article > b { font-size:17px; }
.staff-garage-history .is-good { color:#16a34a; }
.staff-garage-history .is-warning { color:#ea580c; }
@media (min-width:600px) {
  .staff-garage-checks { grid-template-columns:1fr 1fr; }
  .staff-garage-history { grid-template-columns:1fr 1fr; }
}
@media (max-width:380px) {
  .staff-bottom-nav.has-garage a { padding:7px 4px; font-size:10px; }
  .staff-bottom-nav.has-garage a i { font-size:18px; }
  .staff-garage-summary { grid-template-columns:1fr; }
}

/* Phase 3A — Staff Web Push reminders */
.staff-reminder-card { border:1px solid var(--line); border-radius:18px; padding:14px; background:#fff; display:grid; gap:13px; }
.staff-reminder-head { display:flex; align-items:center; gap:11px; }
.staff-reminder-icon { width:44px; height:44px; flex:0 0 44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand); font-size:20px; }
.staff-reminder-card.is-enabled .staff-reminder-icon { background:#dcfce7; color:#16a34a; }
.staff-reminder-card.is-denied .staff-reminder-icon { background:#fee2e2; color:#dc2626; }
.staff-reminder-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.staff-reminder-copy strong { font-size:14px; color:var(--ink); }
.staff-reminder-copy small { font-size:11px; line-height:1.4; color:var(--muted); }
.staff-reminder-types { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.staff-reminder-types span { display:flex; align-items:center; gap:6px; min-height:38px; padding:8px 9px; border:1px solid var(--line); border-radius:12px; background:#f8fafc; color:var(--muted-2); font-size:10px; font-weight:800; }
.staff-reminder-types i { color:var(--brand); font-size:13px; }
.staff-reminder-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.staff-reminder-toggle { border:0; cursor:pointer; justify-content:center; }
.staff-reminder-toggle:disabled,.staff-reminder-test:disabled { opacity:.55; cursor:not-allowed; }
.staff-reminder-test { margin:0; white-space:nowrap; }
.staff-reminder-note { margin:0; }
@media(max-width:380px){ .staff-reminder-types { grid-template-columns:1fr; } .staff-reminder-actions { grid-template-columns:1fr; } .staff-reminder-test { width:100%; justify-content:center; } }