/**
 * S.I.D. Detailing Time Track — Staff Interface Styles
 * Dark premium mobile-first design
 */

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

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #0a0e17;
  --surface:  #111827;
  --surface2: #1f2937;
  --border:   #374151;
  --text:     #f9fafb;
  --text2:    #9ca3af;
  --text3:    #6b7280;
  --green:    #10b981;
  --amber:    #f59e0b;
  --red:      #ef4444;
  --blue:     #3b82f6;
  --r:        10px;
  --font:     'Syne', system-ui, sans-serif;
  --mono:     'JetBrains Mono', monospace;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Login Screen
   ============================================================ */
.staff-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59,130,246,0.08), transparent),
    var(--bg);
}

.staff-login__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.staff-login__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.staff-login__logo-mark {
  font-size: 40px;
  color: var(--blue);
  line-height: 1;
}

.staff-login__logo-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text);
}

.brand-sub {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.staff-login__title {
  font-size: 24px;
  font-weight: 800;
  text-align: center;
}

.staff-login__subtitle {
  font-size: 14px;
  color: var(--text2);
  text-align: center;
  margin-top: -12px;
}

.staff-error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5;
  padding: 10px 16px;
  border-radius: var(--r);
  font-size: 14px;
  text-align: center;
  width: 100%;
}

.staff-pin-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.staff-pin-input-wrap { position: relative; }

.staff-pin-input {
  width: 100%;
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  padding: 16px 20px;
  text-align: center;
  letter-spacing: 0.2em;
  outline: none;
  transition: border-color 0.15s;
  -webkit-text-security: disc;
}

.staff-pin-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.15);
}

.staff-login__hint {
  font-size: 12px;
  color: var(--text3);
  text-align: center;
}

/* ============================================================
   Staff App
   ============================================================ */
.staff-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: min(100%, 1440px);
  margin: 0 auto;
}

.staff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 12px;
}

.staff-header__brand {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.staff-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.staff-nav-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  color: var(--text2);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.staff-nav-btn.is-active {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
}

.staff-nav-btn:hover:not(.is-active) { color: var(--text); }

.staff-content { flex: 1; padding: 24px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.staff-content > * { width: min(100%, 1320px); }

/* ============================================================
   Buttons
   ============================================================ */
.staff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: var(--r);
  border: none;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  transition: all 0.15s;
  min-width: 48px;
}

.staff-btn:disabled { opacity: 0.5; pointer-events: none; }
.staff-btn:active   { transform: scale(0.97); }

.staff-btn--primary  { background: var(--blue); color: #fff; width: 100%; }
.staff-btn--primary:hover  { background: #60a5fa; }

.staff-btn--start    { background: var(--green); color: #fff; flex: 1; }
.staff-btn--start:hover   { background: #34d399; }

.staff-btn--pause    { background: var(--amber); color: #0a0e17; flex: 1; }
.staff-btn--pause:hover   { background: #fbbf24; }

.staff-btn--finish   { background: var(--red); color: #fff; flex: 1; }
.staff-btn--finish:hover  { background: #f87171; }

.staff-btn--ghost {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border);
}
.staff-btn--ghost:hover { color: var(--text); border-color: var(--text2); }

.staff-btn--sm { padding: 8px 14px; font-size: 13px; min-height: 36px; }
.staff-btn--lg { padding: 14px 28px; font-size: 16px; }

/* ============================================================
   Job cards
   ============================================================ */
.staff-jobs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.staff-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s;
}

.staff-card--running {
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(16,185,129,0.15);
}

.staff-card--warning {
  border-color: var(--amber);
}

.staff-card--overtime {
  border-color: var(--red);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(239,68,68,0.2); }
  50%       { box-shadow: 0 0 0 4px rgba(239,68,68,0.3); }
}

.staff-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.staff-card__car {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.staff-card__service {
  font-size: 13px;
  color: var(--blue);
  font-weight: 600;
}

.staff-card__customer {
  font-size: 13px;
  color: var(--text2);
}

/* ============================================================
   Timer
   ============================================================ */
.staff-timer {
  font-family: var(--mono);
  font-size: 52px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  padding: 8px 0;
}

.staff-timer--running  { color: var(--green); }
.staff-timer--warning  { color: var(--amber); }
.staff-timer--overtime { color: var(--red); }

/* ============================================================
   Card actions
   ============================================================ */
.staff-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.staff-card__actions .staff-btn {
  flex: 1;
  min-width: 80px;
}

/* ============================================================
   Badges
   ============================================================ */
.staff-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.staff-badge--new       { background: rgba(156,163,175,0.15); color: var(--text2); }
.staff-badge--running   { background: rgba(16,185,129,0.15);  color: var(--green); }
.staff-badge--paused    { background: rgba(245,158,11,0.15);  color: var(--amber); }
.staff-badge--completed { background: rgba(59,130,246,0.15);  color: var(--blue);  }

/* ============================================================
   Forms
   ============================================================ */
.staff-form-wrap h2 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 20px;
}

.staff-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.staff-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.staff-input, .staff-textarea {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}

.staff-input:focus, .staff-textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.staff-textarea { resize: vertical; min-height: 80px; }

.staff-form-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   Detail page
   ============================================================ */
.staff-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.staff-detail__header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.staff-detail__header h2 {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  flex: 1;
}

.staff-detail__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.staff-detail__actions .staff-btn { flex: 1; min-width: 80px; }

.staff-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
}

.staff-dl dt {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 2px;
}

.staff-dl dd { color: var(--text); }
.staff-dl .notes { white-space: pre-wrap; font-size: 13px; color: var(--text2); }

/* ============================================================
   Search
   ============================================================ */
.staff-search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.staff-search-bar .staff-input { flex: 1; }
.staff-search-bar .staff-btn   { width: auto; min-width: 90px; }

.staff-hint {
  text-align: center;
  color: var(--text3);
  padding: 40px 0;
  font-size: 15px;
}

/* ============================================================
   Empty state
   ============================================================ */
.staff-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text3);
}

.staff-empty__icon { font-size: 48px; margin-bottom: 12px; opacity: 0.3; }
.staff-empty p     { font-size: 15px; }

/* ============================================================
   Notification
   ============================================================ */
.staff-notification {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 700;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  white-space: nowrap;
  animation: popup 0.3s ease;
}

@keyframes popup {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

.staff-notification--success { background: var(--green); color: #fff; }
.staff-notification--error   { background: var(--red);   color: #fff; }

/* ============================================================
   Modal
   ============================================================ */
.staff-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9998;
  display: flex;
  align-items: flex-end;
  backdrop-filter: blur(4px);
}

.staff-modal__inner {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 28px 20px 40px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 -20px 50px rgba(0,0,0,0.4);
  animation: slide-up 0.3s ease;
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.staff-modal__inner h3 { font-size: 18px; font-weight: 800; margin-bottom: 20px; }

/* ============================================================
   Responsive — staff interface
   ============================================================ */

/* Tablet portrait (≥600px) — 2 columns */
@media (min-width: 600px) {
  .staff-jobs { display: grid; grid-template-columns: 1fr 1fr; }
  .staff-form-wrap { max-width: 500px; }
  .staff-modal { align-items: center; }
  .staff-modal__inner { border-radius: 20px; }
  .staff-timer { font-size: 44px; }
}

/* Tablet landscape (≥900px) — 3 columns */
@media (min-width: 900px) {
  .staff-jobs { grid-template-columns: repeat(3, 1fr); }
  .staff-timer { font-size: 48px; }
  .staff-content { padding: 28px; }
}

.staff-card__badge-stack{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.staff-badge--overdue{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.32);color:#fecaca;}
.staff-card__vehicle,.staff-detail__vehicle{font-size:12px;color:var(--text2);margin-top:4px;}
.staff-overdue-banner{margin-bottom:14px;padding:12px 14px;border-radius:12px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);color:#fecaca;font-weight:700;}

.staff-form-wrap,.staff-detail,.staff-search,.staff-empty{width:min(100%,980px);margin:0 auto;}
.staff-overdue-banner{width:min(100%,1320px);margin:0 auto 14px;}
.staff-card__meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--text2);font-size:12px;}
.staff-card__meta span{display:inline-flex;align-items:center;gap:4px;}


.staff-help{display:block;margin-top:6px;font-size:12px;opacity:.72;}


.staff-page-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.staff-page-head h2 { font-size:28px; line-height:1.1; margin-bottom:6px; }
.staff-page-meta { color: var(--text2); font-size: 13px; margin: 12px 0 16px; }
.staff-history,.staff-search { width:min(100%,1320px); margin:0 auto; }
.staff-jobs--history .staff-card__badge-stack { align-items:flex-end; }
.staff-jobs--history .staff-badge--completed { background: rgba(16,185,129,.15); color: #6ee7b7; border:1px solid rgba(16,185,129,.28); }
@media (max-width: 820px) {
  .staff-header { flex-wrap: wrap; }
  .staff-nav { width: 100%; justify-content: center; flex-wrap: wrap; }
  .staff-page-head h2 { font-size: 24px; }
}


/* ============================================================
   Theme support
   ============================================================ */
html[data-theme="light"] {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface2: #f0f4fa;
  --border: #d8e1ee;
  --text: #101828;
  --text2: #475467;
  --text3: #667085;
}

/* ============================================================
   Tablet standalone mode
   ============================================================ */
.staff-app--tablet {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  padding-bottom: 108px;
}

.staff-content--tablet {
  align-items: stretch;
  padding: 22px;
}

.staff-app--tablet .staff-content > * {
  width: 100%;
  max-width: none;
}

.staff-app--tablet .staff-form-wrap,
.staff-app--tablet .staff-detail,
.staff-app--tablet .staff-search,
.staff-app--tablet .staff-history,
.staff-app--tablet .staff-empty {
  width: 100%;
  margin: 0;
}

.staff-app--tablet .staff-page-head h2 {
  font-size: 34px;
}

.staff-app--tablet .staff-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  width: 100%;
  max-width: none;
  margin: 0;
  justify-content: start;
  align-content: start;
}

.staff-app--tablet .staff-overdue-banner {
  width: 100%;
  margin: 0 0 16px;
}

.staff-app--tablet .staff-card {
  min-height: 100%;
  padding: 20px;
}

.staff-app--tablet .staff-timer {
  text-align: left;
  font-size: 48px;
}

.staff-dock {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
}

.staff-dock__nav,
.staff-dock__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.staff-dock-btn,
.staff-theme-toggle,
.staff-admin-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.staff-dock-btn.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.staff-dock-btn--ghost {
  color: var(--text2);
}

@media (max-width: 900px) {
  .staff-app--tablet .staff-jobs {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .staff-dock {
    flex-direction: column;
    align-items: stretch;
  }
  .staff-dock__nav, .staff-dock__actions {
    justify-content: center;
  }
}


/* Staff services */
.staff-field--full{grid-column:1 / -1}.staff-service-picker{border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px;background:rgba(255,255,255,.03)}.staff-service-picker__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.staff-service-picker__rows{display:grid;gap:10px}.staff-service-picker__row{display:grid;grid-template-columns:minmax(0,1fr) 80px auto;gap:10px;align-items:center}.staff-service-summary{margin-top:12px;font-size:13px;opacity:.9}.staff-app--tablet .staff-jobs{justify-items:start}.staff-app--tablet .staff-card{width:100%}@media (max-width: 720px){.staff-service-picker__row{grid-template-columns:1fr}}


.staff-card__chips{display:flex;flex-wrap:wrap;gap:8px;}
.staff-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-size:13px;}
.staff-card__live{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:10px;align-items:center;}
.staff-live-meter,.staff-live-hourly{font-family:var(--mono);font-variant-numeric:tabular-nums;border-radius:16px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));padding:12px 14px;min-width:0;}
.staff-live-meter{font-size:34px;font-weight:800;letter-spacing:.03em;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.staff-live-hourly{font-size:20px;font-weight:700;text-align:center;white-space:nowrap;}
.staff-live-meter.running,.staff-live-hourly.running{color:var(--green);border-color:rgba(16,185,129,.32);}
.staff-live-meter.overtime,.staff-live-hourly.overtime{color:var(--red);border-color:rgba(239,68,68,.32);}
.staff-dl [data-meter-job],.staff-dl [data-hourly-job]{font-family:var(--mono);font-variant-numeric:tabular-nums;}
@media (max-width: 820px){.staff-card__live{grid-template-columns:1fr;}.staff-live-meter{text-align:left;font-size:28px;}.staff-live-hourly{text-align:left;}}


.staff-card__live-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px;}
.staff-live-stat{border:1px solid var(--border);border-radius:16px;padding:10px 12px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));min-width:0;}
.staff-live-stat.is-hidden{display:none;}
.staff-live-stat__label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);margin-bottom:6px;}
.staff-live-small{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.staff-live-small.running{color:var(--green);}
.staff-live-small.overtime{color:var(--red);}
.staff-live-meter,.staff-live-hourly,.staff-live-small{line-height:1.1;}
.staff-card__chips{flex-wrap:wrap;}
.staff-card__car,.staff-card__vehicle,.staff-card__service,.staff-card__customer{overflow-wrap:anywhere;}
.staff-app--tablet .staff-content{align-items:stretch;}
.staff-app--tablet .staff-content > *{width:100%;max-width:none;}
.staff-app--tablet .staff-jobs{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;}
.staff-app--tablet .staff-card{min-width:0;}
.staff-app--tablet .staff-live-meter{font-size:28px;text-align:left;}
.staff-app--tablet .staff-live-hourly{text-align:left;font-size:18px;}
.staff-app--tablet .staff-live-small{font-size:18px;}
@media (max-width: 900px){.staff-card__live-grid{grid-template-columns:1fr;}.staff-live-meter{font-size:26px;text-align:left;}.staff-live-hourly{text-align:left;}}


/* v1.4.4 tablet live panel layout */
.staff-card__middle{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:14px;align-items:start;margin-top:6px;}
.staff-card__side{min-width:0;}
.staff-card__side .staff-card__live-grid{margin-top:0;}
.staff-app--tablet .staff-card__middle{grid-template-columns:minmax(0,1fr) minmax(250px,300px);gap:12px;align-items:start;}
.staff-app--tablet .staff-card__service{font-size:14px;margin-top:10px;}
.staff-app--tablet .staff-card__customer{margin-top:8px;}
.staff-app--tablet .staff-card__chips{margin-top:14px;}
.staff-app--tablet .staff-card__side .staff-card__live-grid{grid-template-columns:1fr;gap:10px;}
.staff-app--tablet .staff-live-stat{padding:10px 12px;}
.staff-app--tablet .staff-live-stat__label{font-size:10px;margin-bottom:5px;}
.staff-app--tablet .staff-live-meter{font-size:30px;text-align:right;}
.staff-app--tablet .staff-live-hourly{font-size:22px;text-align:right;}
.staff-app--tablet .staff-live-small{font-size:22px;text-align:right;}
.staff-app--tablet .staff-timer{font-size:64px;line-height:1;letter-spacing:.03em;padding:14px 0 12px;}
@media (max-width: 1100px){
  .staff-card__middle,.staff-app--tablet .staff-card__middle{grid-template-columns:1fr;}
  .staff-app--tablet .staff-card__side .staff-card__live-grid,.staff-card__live-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .staff-app--tablet .staff-live-meter,.staff-app--tablet .staff-live-hourly,.staff-app--tablet .staff-live-small{text-align:left;}
}
@media (max-width: 760px){
  .staff-app--tablet .staff-card__side .staff-card__live-grid,.staff-card__live-grid{grid-template-columns:1fr;}
  .staff-app--tablet .staff-timer{font-size:54px;}
}

/* v1.4.5 tablet budget + centered timer */
.staff-badge-budget{margin-top:10px;min-width:170px;padding:10px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);text-align:right;}
.staff-badge-budget__label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin-bottom:4px;}
.staff-badge-budget__value{display:block;font-family:var(--mono);font-size:30px;line-height:1.05;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--green);}
.staff-badge-budget.overtime .staff-badge-budget__value,.staff-badge-budget.warning .staff-badge-budget__value{color:var(--red);}
.staff-badge-budget.running .staff-badge-budget__value{color:var(--green);}
.staff-card__badge-stack{min-width:190px;align-items:flex-end;}
.staff-card__live-grid{display:grid;grid-template-columns:1fr;gap:10px;align-content:start;}
.staff-live-stat--primary .staff-live-hourly{font-size:28px;}
.staff-timer{display:block;width:100%;text-align:center;margin:8px auto 6px;}
.staff-card .staff-timer{font-size:58px;line-height:1;letter-spacing:.05em;}
.staff-app--tablet .staff-card__top{align-items:flex-start;}
.staff-app--tablet .staff-card__badge-stack{min-width:210px;}
.staff-app--tablet .staff-badge-budget{min-width:190px;padding:12px 16px;}
.staff-app--tablet .staff-badge-budget__value{font-size:34px;}
.staff-app--tablet .staff-card__side .staff-card__live-grid{grid-template-columns:1fr;gap:10px;}
.staff-app--tablet .staff-live-stat{padding:12px 14px;}
.staff-app--tablet .staff-live-stat--primary .staff-live-hourly{font-size:24px;text-align:right;}
.staff-app--tablet .staff-live-small{font-size:24px;text-align:right;}
.staff-app--tablet .staff-timer{font-size:78px;line-height:.96;letter-spacing:.05em;text-align:center;width:100%;margin:10px auto 8px;}
@media (max-width: 980px){
  .staff-card__top,.staff-app--tablet .staff-card__top{grid-template-columns:1fr;display:grid;}
  .staff-card__badge-stack,.staff-app--tablet .staff-card__badge-stack{min-width:0;justify-self:start;align-items:flex-start;}
  .staff-badge-budget,.staff-app--tablet .staff-badge-budget{text-align:left;min-width:0;width:100%;max-width:260px;}
}


/* Tablet quick add + card layout polish */
.staff-card--quick-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:100%;width:100%;padding:28px 20px;border:2px dashed rgba(96,165,250,.45);border-radius:24px;background:rgba(37,99,235,.08);color:var(--text);cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.staff-card--quick-add:hover{transform:translateY(-2px);border-color:rgba(96,165,250,.7);background:rgba(37,99,235,.12);}
.staff-card__quick-plus{font-size:44px;line-height:1;font-weight:800;color:#60a5fa;}
.staff-card__quick-title{font-size:22px;font-weight:700;}
.staff-card__quick-sub{font-size:13px;color:var(--text3);text-align:center;}
.staff-timer{text-align:center;}
.staff-app--tablet .staff-timer{font-size:clamp(54px,6.8vw,82px)!important;line-height:1;text-align:center;justify-content:center;}
.staff-detail .staff-timer{text-align:center;margin-left:auto;margin-right:auto;}
.staff-app--tablet .staff-card__badge-stack{align-items:flex-end;}
.staff-app--tablet .staff-badge-budget{width:min(100%,260px);margin-top:12px;}
.staff-app--tablet .staff-card__actions{justify-content:center;}
.staff-app--tablet .staff-card__actions .staff-btn{flex:1 1 0;min-width:0;}
@media (min-width: 900px){
  .staff-app--tablet .staff-jobs{grid-template-columns:repeat(auto-fit,minmax(360px,1fr));align-items:stretch;}
}


/* v1.4.7 tablet top badge budget + centered timer */
.staff-card__badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.staff-card__badge-stack{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.staff-badge-budget{width:min(100%,280px);text-align:center;align-self:flex-end;}
.staff-badge-budget__label{font-size:11px;letter-spacing:.16em;}
.staff-badge-budget__value{font-size:38px;line-height:1;}
.staff-card .staff-timer{font-size:64px;line-height:1;letter-spacing:.06em;text-align:center;width:100%;display:flex;justify-content:center;}
.staff-app--tablet .staff-card__top{grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:18px;}
.staff-app--tablet .staff-card__badges{justify-content:flex-end;}
.staff-app--tablet .staff-card__badge-stack{min-width:230px;align-items:flex-end;}
.staff-app--tablet .staff-badge-budget{width:min(100%,300px);margin-top:0;padding:14px 18px;}
.staff-app--tablet .staff-badge-budget__value{font-size:42px;}
.staff-app--tablet .staff-timer{font-size:clamp(64px,7.8vw,96px)!important;line-height:.95;letter-spacing:.06em;text-align:center;display:flex;justify-content:center;align-items:center;width:100%;margin:14px auto 10px;}
.staff-app--tablet .staff-card__actions{justify-content:center;}
@media (max-width: 980px){
  .staff-card__badges,.staff-app--tablet .staff-card__badges{justify-content:flex-start;}
  .staff-card__badge-stack,.staff-app--tablet .staff-card__badge-stack{align-items:flex-start;min-width:0;width:100%;}
  .staff-badge-budget,.staff-app--tablet .staff-badge-budget{align-self:flex-start;text-align:left;max-width:320px;}
  .staff-card .staff-timer,.staff-app--tablet .staff-timer{font-size:clamp(54px,8vw,82px)!important;}
}

/* v1.4.9 tablet compact layout */
.staff-app--tablet .staff-card__middle{
  grid-template-columns:minmax(0,1.55fr) minmax(250px,.95fr) !important;
  gap:16px !important;
  align-items:start;
}
.staff-app--tablet .staff-card__main{
  min-width:0;
}
.staff-app--tablet .staff-card__service,
.staff-app--tablet .staff-card__customer,
.staff-app--tablet .staff-card__vehicle,
.staff-app--tablet .staff-card__car{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere;
}
.staff-app--tablet .staff-card__service{
  font-size:15px;
  line-height:1.35;
  max-width:100%;
}
.staff-app--tablet .staff-card__customer{
  font-size:14px;
}
.staff-app--tablet .staff-card__side{
  display:grid;
  grid-template-rows:auto auto;
  gap:10px;
  min-width:0;
}
.staff-live-used{
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  min-width:0;
}
.staff-live-used__label{
  display:block;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text3);
  margin-bottom:8px;
}
.staff-live-used__value{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:6px;
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  line-height:.95;
  color:var(--green);
}
.staff-live-used__value.overtime,
.staff-live-used__value.warning{color:var(--red);}
.staff-live-used__currency{
  font-size:22px;
  font-weight:700;
  opacity:.9;
  transform:translateY(5px);
}
.staff-live-used__amount{
  font-size:48px;
  font-weight:800;
  letter-spacing:-.03em;
  white-space:nowrap;
}
.staff-card__live-grid--split{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
}
.staff-app--tablet .staff-card__live-grid--split .staff-live-stat{
  min-width:0;
}
.staff-app--tablet .staff-live-hourly,
.staff-app--tablet .staff-live-small{
  text-align:right !important;
  font-size:20px !important;
}
.staff-app--tablet .staff-live-stat__label{
  font-size:10px;
  margin-bottom:5px;
}
.staff-app--tablet .staff-timer{
  font-size:clamp(68px,8.4vw,102px) !important;
}
@media (max-width: 1100px){
  .staff-app--tablet .staff-card__middle{
    grid-template-columns:1fr !important;
  }
  .staff-app--tablet .staff-card__side{
    grid-template-columns:1fr;
  }
}
@media (max-width: 720px){
  .staff-card__live-grid--split,
  .staff-app--tablet .staff-card__live-grid--split{
    grid-template-columns:1fr !important;
  }
  .staff-live-used__amount{
    font-size:40px;
  }
}


/* v1.5.0 est. loss parity with current rate */
.staff-live-hourly--loss{
  font-size:28px;
  line-height:1;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.staff-app--tablet .staff-live-hourly--loss{
  text-align:right !important;
  font-size:24px !important;
}


/* v1.5.1 used budget back to top-right and compact two-column metrics */
.staff-app--tablet .staff-card__top{
  grid-template-columns:minmax(0,1.7fr) minmax(220px,.95fr);
  align-items:start;
  column-gap:16px;
}
.staff-app--tablet .staff-card__badge-stack{
  min-width:0;
  width:100%;
  align-items:stretch;
  gap:8px;
}
.staff-app--tablet .staff-card__badges{
  justify-content:flex-end;
}
.staff-app--tablet .staff-live-used{
  width:100%;
  max-width:none;
  padding:12px 14px;
}
.staff-app--tablet .staff-live-used__label{
  margin-bottom:6px;
}
.staff-app--tablet .staff-live-used__value{
  justify-content:flex-end;
}
.staff-app--tablet .staff-live-used__currency{
  font-size:18px;
  transform:translateY(4px);
}
.staff-app--tablet .staff-live-used__amount{
  font-size:56px;
}
.staff-app--tablet .staff-card__middle{
  grid-template-columns:minmax(0,1.7fr) minmax(220px,.95fr) !important;
  gap:16px !important;
}
.staff-app--tablet .staff-card__main{
  padding-right:8px;
}
.staff-app--tablet .staff-card__service,
.staff-app--tablet .staff-card__customer,
.staff-app--tablet .staff-card__vehicle,
.staff-app--tablet .staff-card__car{
  max-width:100%;
  white-space:normal !important;
  overflow-wrap:anywhere;
}
.staff-app--tablet .staff-card__side{
  display:block;
  min-width:0;
}
.staff-app--tablet .staff-card__live-grid--split{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
}
.staff-app--tablet .staff-live-stat{
  min-width:0;
}
.staff-app--tablet .staff-live-hourly,
.staff-app--tablet .staff-live-small,
.staff-app--tablet .staff-live-hourly--loss{
  text-align:right !important;
  font-size:22px !important;
}
@media (max-width: 1100px){
  .staff-app--tablet .staff-card__top,
  .staff-app--tablet .staff-card__middle{
    grid-template-columns:1fr !important;
  }
  .staff-app--tablet .staff-card__badges{
    justify-content:flex-start;
  }
  .staff-app--tablet .staff-live-used__value,
  .staff-app--tablet .staff-live-hourly,
  .staff-app--tablet .staff-live-small,
  .staff-app--tablet .staff-live-hourly--loss{
    text-align:left !important;
    justify-content:flex-start;
  }
}


/* v1.5.2 compact top-left meta and slightly smaller used budget */
.staff-app--tablet .staff-card__hero{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.staff-app--tablet .staff-card__service--top{
  margin-top:4px;
  font-size:15px;
  line-height:1.28;
  color:var(--text);
}
.staff-app--tablet .staff-card__customer--top{
  font-size:13px;
  line-height:1.25;
  color:var(--text2);
}
.staff-app--tablet .staff-card__middle{
  margin-top:4px;
}
.staff-app--tablet .staff-card__main{
  padding-right:12px;
}
.staff-app--tablet .staff-card__chips--compact{
  margin-top:0;
}
.staff-app--tablet .staff-live-used{
  padding:10px 12px;
}
.staff-app--tablet .staff-live-used__amount{
  font-size:50px;
}
.staff-app--tablet .staff-live-used__currency{
  font-size:16px;
  transform:translateY(3px);
}
.staff-app--tablet .staff-card__top{
  align-items:start;
}
@media (max-width: 1100px){
  .staff-app--tablet .staff-card__hero{
    gap:5px;
  }
}


/* v1.5.3 full responsive staff layout for tablet + mobile */
.staff-app--tablet {
  width: 100%;
  max-width: none;
  min-height: 100svh;
}

.staff-content--tablet {
  width: 100%;
  padding: 16px 16px calc(112px + env(safe-area-inset-bottom, 0px));
  align-items: stretch !important;
}

.staff-app--tablet .staff-content > *,
.staff-app--tablet .staff-form-wrap,
.staff-app--tablet .staff-detail,
.staff-app--tablet .staff-search,
.staff-app--tablet .staff-history,
.staff-app--tablet .staff-empty {
  width: 100%;
  max-width: none !important;
}

.staff-app--tablet .staff-page-head,
.staff-app--tablet .staff-search-bar,
.staff-app--tablet .staff-history .staff-search-bar,
.staff-app--tablet .staff-detail,
.staff-app--tablet .staff-form-wrap {
  margin-left: 0;
  margin-right: 0;
}

.staff-app--tablet .staff-jobs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 14px;
  align-items: start;
  justify-items: stretch;
}

.staff-app--tablet .staff-card {
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.staff-app--tablet .staff-card__top {
  grid-template-columns: minmax(0, 1.45fr) minmax(170px, .8fr) !important;
  gap: 14px;
}

.staff-app--tablet .staff-card__hero {
  min-width: 0;
}

.staff-app--tablet .staff-card__car {
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.1;
}

.staff-app--tablet .staff-card__vehicle,
.staff-app--tablet .staff-card__service--top,
.staff-app--tablet .staff-card__customer--top {
  max-width: 100%;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
}

.staff-app--tablet .staff-live-used {
  padding: 10px 12px;
  border-radius: 16px;
}

.staff-app--tablet .staff-live-used__label {
  font-size: 10px;
}

.staff-app--tablet .staff-live-used__currency {
  font-size: 15px;
  transform: translateY(3px);
}

.staff-app--tablet .staff-live-used__amount {
  font-size: clamp(34px, 5vw, 46px);
  line-height: .92;
}

.staff-app--tablet .staff-card__middle {
  grid-template-columns: minmax(0, 1.45fr) minmax(170px, .8fr) !important;
  gap: 14px !important;
}

.staff-app--tablet .staff-card__chips--compact {
  gap: 7px;
}

.staff-app--tablet .staff-chip {
  font-size: 12px;
  padding: 7px 10px;
}

.staff-app--tablet .staff-card__live-grid--split {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.staff-app--tablet .staff-live-stat {
  padding: 10px 12px;
}

.staff-app--tablet .staff-live-stat__label {
  font-size: 10px;
  letter-spacing: .12em;
}

.staff-app--tablet .staff-live-hourly,
.staff-app--tablet .staff-live-small,
.staff-app--tablet .staff-live-hourly--loss {
  font-size: clamp(18px, 2.8vw, 22px) !important;
  line-height: 1.05;
  white-space: nowrap;
}

.staff-app--tablet .staff-timer {
  font-size: clamp(56px, 7vw, 88px) !important;
  line-height: .94;
  margin: 12px auto 8px;
}

.staff-app--tablet .staff-card__actions {
  gap: 8px;
  flex-wrap: wrap;
}

.staff-app--tablet .staff-card__actions .staff-btn {
  flex: 1 1 140px;
}

.staff-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 130;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(10,14,23,0.1), rgba(10,14,23,0.92) 24%, rgba(10,14,23,0.98));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.08);
}

.staff-dock__nav,
.staff-dock__actions {
  width: 100%;
}

.staff-dock__nav {
  overflow-x: auto;
  scrollbar-width: none;
}

.staff-dock__nav::-webkit-scrollbar { display: none; }

.staff-dock-btn,
.staff-theme-toggle,
.staff-admin-link {
  min-height: 46px;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .staff-app--tablet .staff-jobs {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  }

  .staff-app--tablet .staff-card__top,
  .staff-app--tablet .staff-card__middle {
    grid-template-columns: minmax(0, 1fr) 190px !important;
  }
}

@media (max-width: 920px) {
  .staff-content--tablet {
    padding: 14px 14px calc(122px + env(safe-area-inset-bottom, 0px));
  }

  .staff-app--tablet .staff-jobs {
    grid-template-columns: 1fr 1fr;
  }

  .staff-app--tablet .staff-card__top,
  .staff-app--tablet .staff-card__middle {
    grid-template-columns: 1fr !important;
  }

  .staff-app--tablet .staff-card__badge-stack,
  .staff-app--tablet .staff-card__badges {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .staff-app--tablet .staff-live-used__value,
  .staff-app--tablet .staff-live-hourly,
  .staff-app--tablet .staff-live-small,
  .staff-app--tablet .staff-live-hourly--loss {
    text-align: left !important;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .staff-app--tablet .staff-jobs {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .staff-content--tablet {
    padding: 12px 12px calc(132px + env(safe-area-inset-bottom, 0px));
  }

  .staff-app--tablet .staff-card {
    padding: 16px 14px;
    border-radius: 18px;
  }

  .staff-app--tablet .staff-card__chips--compact,
  .staff-app--tablet .staff-card__live-grid--split {
    grid-template-columns: 1fr !important;
  }

  .staff-app--tablet .staff-timer {
    font-size: clamp(46px, 12vw, 68px) !important;
  }

  .staff-dock {
    padding-left: 10px;
    padding-right: 10px;
  }

  .staff-dock__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .staff-admin-link,
  .staff-theme-toggle,
  .staff-dock-btn--ghost {
    justify-content: center;
    text-align: center;
  }
}