/* ===== Zypher Cloud — Frontend Styles ===== */

/* Customer-message pulse badge in Job Register (added 2026-05-07).
   Green dot that breathes so the row visibly demands attention — Front Desk
   was missing customer messages buried in audit_log. Click clears it
   (auto-mark-read on opening the job's comment thread). */
.msg-pulse {
  display: inline-block;
  background: #16a34a;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 6px;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
  animation: msg-pulse-anim 1.6s infinite;
  vertical-align: middle;
}
.msg-pulse:hover {
  background: #15803d;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.25);
}
@keyframes msg-pulse-anim {
  0%   { box-shadow: 0 0 0 0   rgba(22, 163, 74, 0.7); }
  60%  { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0   rgba(22, 163, 74, 0); }
}

:root {
  --brand: #1F4E79;
  --brand-light: #E0EAF4;
  --line: #e5e7eb;
  --bg: #f3f4f6;
  --muted: #6b7280;
  --text: #1f2937;
  --success: #15803d;
  --warning: #d97706;
  --danger: #c62828;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  /* Sticky-footer layout: keeps .app-footer pinned to the bottom of the viewport */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#app-screen,
#login-screen { flex: 1 0 auto; }

input, select, textarea, button {
  font: inherit;
  font-family: inherit;
}

/* ===== Role Picker Screen — shown before login ===== */
#role-picker-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, var(--brand) 0%, #2d5a8a 100%);
}
.role-picker-card {
  background: #fff;
  padding: 36px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
  width: 100%;
  max-width: 480px;
  text-align: center;
}
.role-pick-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 12px;
}
.role-pick-btn {
  background: #f9fafb;
  border: 2px solid var(--line);
  padding: 14px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
  width: 100%;
  font-family: inherit;
  color: inherit;
}
.role-pick-btn:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(31, 78, 121, .15);
}
.role-pick-btn:active { transform: translateY(0); }
.role-pick-btn:focus-visible {
  outline: 3px solid var(--brand-light);
  outline-offset: 2px;
  border-color: var(--brand);
}
.role-pick-icon {
  font-size: 32px;
  flex-shrink: 0;
  line-height: 1;
}
.role-pick-text { flex: 1; }
.role-pick-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
}
.role-pick-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* "Sign in as <role>" hint badge above the login form */
.login-mode-hint {
  background: var(--brand-light);
  color: var(--brand);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 18px;
}
.back-to-picker {
  color: var(--brand);
  text-decoration: none;
}
.back-to-picker:hover { text-decoration: underline; }

/* ===== Login Screen ===== */
#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, var(--brand) 0%, #2d5a8a 100%);
}

.login-card {
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
  width: 100%;
  max-width: 400px;
}

.login-logo {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 12px;
  border-radius: 12px;
  object-fit: contain;
}

.header-logo {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  padding: 2px;
}

.login-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 8px;
}

.login-card h1 {
  margin: 0 0 4px;
  text-align: center;
  color: var(--brand);
  font-size: 24px;
}

.login-sub {
  text-align: center;
  color: var(--muted);
  margin: 0 0 24px;
  font-size: 13px;
}

.login-hint {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin-top: 20px;
}

.login-hint code {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
}

.error-message {
  color: var(--danger);
  font-size: 13px;
  text-align: center;
  margin: 8px 0;
  min-height: 18px;
}

/* ===== Header ===== */
/* ============================================================ */
/* HEADER — exact match to v0859                                 */
/* ============================================================ */
header {
  background: var(--brand);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* Brand text wrapper — title on top, designer credit small below */
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.header-credit {
  color: rgba(255,255,255,.7);
  font-size: 11px;
  font-style: italic;
  letter-spacing: .3px;
  user-select: none;
}
@media print {
  .header-credit { display: none; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}

header h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.version-badge {
  background: rgba(255,255,255,.18);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  letter-spacing: .3px;
  font-weight: 500;
  opacity: .9;
  white-space: nowrap;
}

/* Session pill — "🛡️ ASIF KHAN | Logout" style (matches v0859 #sessionPanel) */
.session-panel {
  background: rgba(255,255,255,.12);
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
#sessionLabel {
  white-space: nowrap;
}
#sessionBtn,
#sessionAltBtn,
#noticeBtn {
  background: rgba(255,255,255,.2);
  color: #fff;
  border: 0;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  margin-left: 6px;
  font-family: inherit;
}
#sessionBtn:hover,
#sessionAltBtn:hover,
#noticeBtn:hover {
  background: rgba(255,255,255,.3);
}
/* Mode-lock button is slightly less prominent than primary Sign Out */
#sessionAltBtn {
  background: rgba(255,255,255,.1);
  font-size: 10px;
}
/* Notice button — same translucent style but a thin yellow accent border
   so it's findable without screaming. */
#noticeBtn {
  background: rgba(245,180,0,.18);
  border: 1px solid rgba(245,180,0,.45);
  font-size: 10px;
}
#noticeBtn:hover {
  background: rgba(245,180,0,.30);
}

/* 3-button role switcher (matches v0859 EXACTLY) */
.role-switch {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,.1);
  padding: 3px;
  border-radius: 6px;
}
.role-switch button,
.role-btn {
  background: transparent;
  color: rgba(255,255,255,.8);
  border: 0;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .15s;
}
.role-switch button:hover:not(:disabled),
.role-btn:hover:not(:disabled) {
  color: #fff;
}
.role-switch button.active,
.role-btn.active {
  background: #fff;
  color: var(--brand);
}
.role-switch button:disabled,
.role-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.version {
  color: #4ade80;
  margin-left: 8px;
  font-size: 16px;
}

.version.offline {
  color: #f87171;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
}

.role-badge {
  background: rgba(255,255,255,.2);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

/* ===== Nav ===== */
#main-nav {
  display: flex;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
  overflow-x: auto;
}

#main-nav button {
  background: transparent;
  border: 0;
  padding: 14px 18px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 3px solid transparent;
}

#main-nav button:hover {
  color: var(--brand);
}

#main-nav button.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

/* ===== Main content ===== */
main {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.panel {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  margin-bottom: 16px;
}

.panel h2 {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--text);
}

/* ===== Forms ===== */
.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.field input, .field select, .field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 14px;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}

.uc {
  text-transform: uppercase;
}

.req {
  color: var(--danger);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }

@media (max-width: 700px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ===== Buttons ===== */
.btn-primary, .btn-ghost, .btn-danger, .btn-success {
  padding: 8px 16px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: opacity .2s;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}

.btn-primary:hover { opacity: .9; }

.btn-ghost {
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--brand);
}

.btn-ghost:hover { background: var(--brand-light); }

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-success {
  background: var(--success);
  color: #fff;
}

.btn-block {
  width: 100%;
  padding: 12px;
  font-size: 15px;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ===== Tables ===== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

th {
  background: #f9fafb;
  font-weight: 600;
  color: #374151;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

tr:hover {
  background: #f9fafb;
}

/* ===== Badges ===== */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-green { background: #dcfce7; color: #166534; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-gray { background: #f3f4f6; color: #374151; }
.badge-pink { background: #fce7f3; color: #9d174d; }
.badge-black { background: #000; color: #fff; }

.repeat-row {
  background: #fef2f2 !important;
  border-left: 3px solid var(--danger);
}

/* ===== KPI cards ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.kpi-card {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.kpi-card .label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.kpi-card .value {
  font-size: 28px;
  font-weight: 700;
  margin-top: 4px;
  color: var(--text);
}

.kpi-card.alert {
  border-color: var(--danger);
  background: #fee2e2;
}

.kpi-card.alert .value {
  color: var(--danger);
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--success);
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  font-weight: 600;
  display: none;
  z-index: 1000;
  font-size: 13px;
}

.toast.error { background: var(--danger); }
.toast.warning { background: var(--warning); }

/* ===== Modal ===== */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 100;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

.modal-backdrop.show { display: flex; }

.modal {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  max-width: 880px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}

.modal h2 {
  margin: 0 0 16px;
  color: var(--brand);
}

/* ===== Search ===== */
.search-box {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--brand);
  border-radius: 5px;
  font-size: 14px;
  margin-bottom: 12px;
}

/* ===== Print area ===== */
.print-area {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

@media print {
  /* Hide app chrome but NOT every <button> globally — print templates may
     legitimately embed buttons (e.g. signature capture placeholders) and
     a blanket rule silently breaks them. Limit to buttons that are NOT
     inside .print-area / #print-area. */
  header, nav, .toast { display: none !important; }
  body > *:not(.print-area):not(#print-area) button { display: none !important; }
  .print-area {
    position: static !important;
    left: 0;
    top: 0;
  }
  body > *:not(.print-area):not(#print-area) {
    display: none !important;
  }
}

/* ===== Empty states ===== */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 14px;
}

/* ===== Status indicators ===== */
.status-Received { color: #2563eb; }
.status-Diagnosed { color: var(--warning); }
.status-In-Repair { color: var(--brand); }
.status-Ready { color: var(--success); }
.status-Delivered { color: var(--muted); }
.status-Cancelled { color: var(--danger); }


/* ======================================================================
   TAG PRINTING — ported from localStorage app (Session 5)
   Yellow tag is 68mm × 118mm portrait, hole at BOTTOM when printed.
 * Prints onto an A4 carrier sheet with the tag taped at top-center
 * (71mm from left, 10mm from top edge).
 * Uses HP LaserJet Pro M126nw via Brave/Chrome; no custom paper sizes.
 */
:root {
  --tag-w: 68mm;
  --tag-h: 118mm;
  --brand: #1F4E79;       /* re-affirm in case missing */
  --brand-hover: #16395a;
  --line: #e5e7eb;
  --muted: #6b7280;
  --ink: #1f2937;
  --panel: #ffffff;
  --ok: #16a34a;
  --warn: #c62828;
  --urgent: #dc2626;
  --easy: #6b7280;
}

/* ----- TAG (portrait 68×118mm, hole at BOTTOM)
   CLEAN ADAPTIVE LAYOUT — grid with `1fr` body row that auto-fits whatever
   vertical space remains after non-flexible sections. Body cells truncate
   with ellipsis when content is too long. Brand always at bottom in its own
   reserved row — never gets pushed off because grid guarantees the slot. */
  .tag-preview-host { padding: 12px; background: #f9fafb; border-radius: 8px; display: inline-block; margin-top: 10px; }
  .tag {
    width: var(--tag-w); height: var(--tag-h);
    background: #fff; border: 1px dashed #bbb;
    padding: 3mm 3.5mm 16mm 3.5mm;     /* Bottom 16mm reserved for hole punch */
    display: flex; flex-direction: column;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #000; overflow: hidden;
    box-sizing: border-box;
    position: relative;
  }
  /* Body absorbs ALL leftover vertical space inside the tag.
     `flex: 1 1 0` = grow + shrink + zero basis → body claims every spare mm.
     Result: bottom group (QR, stages, footer, brand) is automatically pushed
     against the bottom edge of the tag (just above the 16mm hole-punch zone).
     If body has more content than space, individual rows truncate via dd
     ellipsis but ALL 6 rows always render. */
  .tag .t-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }
  /* Job ID - bigger, more prominent. flex:0 0 auto so it doesn't shrink. */
  .tag .t-jobid {
    flex: 0 0 auto;
    font-size: 13pt;
    font-weight: 900;
    font-family: "Courier New", monospace;
    line-height: 1;
    text-align: center;
    border-bottom: 1.2pt solid #000;
    padding-bottom: 1mm;
    margin-bottom: 1.2mm;
    letter-spacing: .5px;
  }
  /* Every other top-level section is fixed-size and doesn't shrink. Only
     .t-body has flex:1 1 auto so it absorbs remaining vertical slack. */
  .tag .t-badges,
  .tag .t-deliver,
  .tag .t-qr,
  .tag .t-stages,
  .tag .t-footer,
  .tag .t-escalation-banner { flex: 0 0 auto; }
  /* Badges - solid printer-safe black via inline table cells */
  .tag .t-badges {
    display: flex;
    gap: 1.5mm;
    margin-bottom: 1.2mm;
    flex-wrap: nowrap;
  }
  /* Every badge sizes to its own content. None compete for equal flex width,
     so URGENT, WARRANTY, VIA DEALER never get clipped regardless of how many
     are present. */
  .tag .t-badge {
    flex: 0 0 auto;
    font-size: 9pt;
    font-weight: 900;
    padding: 1.5mm 2mm;
    text-transform: uppercase;
    letter-spacing: .3px;
    line-height: 1;
    text-align: center;
    border: 1.2pt solid #000;
    white-space: nowrap;
  }
  /* (Removed conditional .has-dealer badge font-shrink — badges now use
     flex:0 0 auto and size to their own content, so all 3 fit naturally.) */
  /* Use solid INK strokes instead of backgrounds for printer reliability:
     High-attention = thick border + bold text (looks bold on yellow).
     To get true solid black, use the print-safe trick: set background via
     a CSS filter that survives most print settings. */
  .tag .tb-warranty, .tag .tb-urgent {
    background: #000 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .tag .tb-paid, .tag .tb-easy {
    background: #fff;
    color: #000;
  }
  /* "VIA DEALER" mark — distinctive double-border on white background.
     Text stays clearly readable; double border is unique among the badges
     (paid/warranty/urgent are all single-border) so dealer-routed tags are
     instantly identifiable in a stack. */
  .tag .tb-dealer {
    background: #fff !important;
    color: #000 !important;
    border: 3pt double #000 !important;
    text-shadow: none;
  }
  /* WALK-IN badge — customer is on premises / collecting in person, so this
     is the highest social-pressure case for the engineer. Solid black with
     thick border so it reads as urgent at a glance, but a tiny "↩" prefix
     in the markup distinguishes it from URGENT. */
  .tag .tb-walkin {
    background: #000 !important;
    color: #fff !important;
    border: 1.5pt solid #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Deliver by - bigger, more prominent */
  .tag .t-deliver {
    background: #fff;
    border: 1.2pt solid #000;
    padding: 1mm 2mm;
    text-align: center;
    line-height: 1.1;
    margin-bottom: 1.5mm;
  }
  .tag .t-deliver .t-lbl {
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: .5px;
  }
  .tag .t-deliver .t-date {
    font-size: 12pt;
    font-weight: 900;
    font-family: "Courier New", monospace;
    display: block;
    margin-top: .5mm;
    letter-spacing: .5px;
  }
  /* Body grid — 6 rows of dt+dd. Each dd truncates with ellipsis if its
     content is too long for one line. Tightened line-height + gap so all
     6 rows fit even when QR/stages/footer/brand also claim their fixed slots. */
  .tag .t-body {
    font-size: 7.5pt;
    line-height: 1.25;
    display: grid;
    grid-template-columns: 13mm 1fr;
    gap: 0 1.5mm;
    align-content: start;
    margin-bottom: 1mm;
    /* (flex+overflow set above in the main .tag rule via .t-body extension) */
  }
  /* When repeat stamp is present, shift ALL content left of the right-edge
     stamp uniformly. One rule on the parent — every section comes along. */
  .tag.has-repeat { padding-right: 10.5mm; }

  /* Body cells (consolidated — single source of truth) */
  .tag .t-body dt {
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    font-size: 6pt;
    letter-spacing: .2px;
    padding-top: .3mm;
  }
  .tag .t-body dd {
    margin: 0;
    font-size: 7.5pt;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
  }
  /* QR block - centered, more space */
  .tag .t-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 0.5mm;
    flex: 0 0 auto;        /* Don't let flex layout stretch this section */
    max-height: 22mm;      /* 18mm QR + caption + margins — hard cap */
    overflow: hidden;
  }
  .tag .t-qr canvas, .tag .t-qr img {
    width: 18mm !important;
    height: 18mm !important;
    max-width: 18mm !important;
    max-height: 18mm !important;
  }
  .tag .t-qr .t-qr-cap {
    font-size: 5.5pt;
    margin-top: .5mm;
    text-align: center;
    font-family: "Courier New", monospace;
    font-weight: 700;
    color: #000;
    line-height: 1.1;
  }
  /* Stages - bigger and bolder */
  .tag .t-stages {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.6mm;
    font-size: 5.5pt;
    border-top: 1pt solid #000;
    padding-top: 1mm;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2px;
    margin-top: 0;        /* body's flex:1 1 0 already pushes us to the bottom */
  }
  .tag .t-stage {
    display: inline-flex;
    align-items: center;
    gap: 1mm;
    justify-content: flex-start;
  }
  .tag .t-box {
    width: 2.2mm; height: 2.2mm;
    border: .8pt solid #000;
    display: inline-block;
    flex-shrink: 0;
  }
  /* Vertical REPEAT CASE stamp - only shows for repeat jobs */
  .tag .t-repeat-stamp {
    position: absolute;
    right: 1mm;
    top: 22mm;
    bottom: 18mm;          /* clear of bottom hole-punch zone, mirrors brand stamp */
    width: 6mm;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .tag .t-repeat-stamp span {
    /* Tightened to fit inside the 6mm right-edge channel without clipping. */
    transform: rotate(-90deg);
    transform-origin: center center;
    white-space: nowrap;
    font-size: 10.5pt;
    font-weight: 900;
    letter-spacing: 2px;
    color: #c62828;
    border: 1.5pt solid #c62828;
    padding: 0.6mm 2.5mm;
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* REPORTED TO TECH TEAM banner — bold UC, solid black, very prominent */
  .tag .t-escalation-banner {
    background: #000 !important;
    color: #fff !important;
    text-align: center;
    font-size: 7pt;
    font-weight: 900;
    letter-spacing: 0.6px;
    padding: 0.6mm 0.5mm;
    margin: 0 0 0.8mm 0;
    border: 0.8pt solid #000;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* When the REPORTED-TO-TECH-TEAM banner is present we lose ~3mm of vertical
     space; compensate by trimming jobid + deliver to keep all 6 body rows. */
  .tag.has-escalation .t-jobid {
    font-size: 11pt;
    padding-bottom: 0.6mm;
    margin-bottom: 0.8mm;
  }
  .tag.has-escalation .t-deliver {
    padding: 0.6mm 2mm;
    margin-bottom: 1mm;
  }
  .tag.has-escalation .t-deliver .t-date { font-size: 11pt; }
  .tag.has-escalation .t-qr { max-height: 19mm; }
  .tag.has-escalation .t-qr canvas,
  .tag.has-escalation .t-qr img {
    width: 16mm !important;
    height: 16mm !important;
    max-width: 16mm !important;
    max-height: 16mm !important;
  }
  /* Footer - engineer + outgoing LR + ZYPHER LABS branding */
  .tag .t-footer {
    font-size: 6pt;
    display: flex;
    flex-direction: column;
    gap: .8mm;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-top: 1mm;
    padding-top: 1mm;
    border-top: 0.5pt dashed #000;
  }
  .tag .t-brand {
    flex: 0 0 auto;
    font-size: 7.5pt;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-align: center;
    margin-top: 1mm;
    padding-top: 0.8mm;
    border-top: 0.8pt solid #000;
    color: #000;
    font-family: "Helvetica Neue", Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ----- PRINT ----- */
  @media print {
    /* Force browsers to print background colors (for solid black badges) */
    * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      color-adjust: exact !important;
    }
    /* A4 carrier sheet approach: tag prints at top-center of A4 page
       Position: 71mm from left (horizontally centered), 10mm from top
       Paste your yellow 68x118mm tag at that exact spot on an A4 sheet
       before feeding it through the printer. */
    @page { size: A4 portrait; margin: 0; }
    html, body { width: 210mm; margin: 0 !important; padding: 0 !important; background: #fff !important; }
    body > *:not(.print-area) { display: none !important; }
    .modal-backdrop, #toast { display: none !important; }
    .print-area { display: block !important; width: 210mm; height: auto; position: relative; }
    /* Wrapper that gives each tag its OWN A4 sheet for batch printing.
       Single-tag flow renders ONE wrapper, multi-tag renders many — each
       gets a fresh page-break-after-always boundary. */
    .tag-page {
      width: 210mm; height: 297mm;
      position: relative;
      page-break-after: always;
      page-break-inside: avoid;
    }
    .tag-page:last-child { page-break-after: auto; }
    .tag {
      border: none !important;
      position: absolute !important;
      top: 10mm !important;
      left: 50% !important;
      width: 68mm !important;
      height: 118mm !important;
      margin: 0 !important;
      transform: translateX(-50%) !important;   /* center the 68mm-wide tag on the actual page */
      page-break-inside: avoid;
    }
    /* Faint guide marks printed at corners of tag area to help with taping.
       Attached to .tag-page (NOT .print-area) so every page in a batch print
       gets its own guide marks — otherwise only page 1 shows them. */
    .tag-page::before, .tag-page::after {
      position: absolute; content: '';
      width: 5mm; height: 5mm;
      border: 0.3pt dashed #999;
    }
    .tag-page::before {
      top: 10mm; left: calc(50% - 34mm);
      border-right: none; border-bottom: none;
    }
    .tag-page::after {
      top: 10mm; left: calc(50% + 34mm - 5mm);
      border-left: none; border-bottom: none;
    }
    /* Positioning label at bottom of every A4 sheet so staff know where to
       tape — placed on each .tag-page so batch prints get one note per page. */
    .tag-page .carrier-note {
      position: absolute;
      bottom: 15mm;
      left: 0; right: 0;
      text-align: center;
      font-family: Arial, sans-serif;
      font-size: 9pt;
      color: #666;
      display: block !important;
    }
  } /* /@media print — tag layout */

/* ============================================================ */
/* REPORTS — Session 7                                            */
/* Screen preview matches print layout; both use .report-sheet    */
/* ============================================================ */

/* Screen-preview styling (visible inside modal) */
#report-preview-container { padding: 4px; }
#report-preview-container .report-sheet {
  background: #fff;
  color: #0f172a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 10pt;
  line-height: 1.45;
  padding: 14mm 16mm;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  max-width: 1100px;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}

/* Header block at top of every report */
.report-sheet .rh-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12mm;
  align-items: center;
  border-bottom: 2pt solid #1F4E79;
  padding-bottom: 6mm;
  margin-bottom: 7mm;
}
.report-sheet .rh-brand { display: flex; align-items: center; gap: 5mm; }
.report-sheet .rh-logo { width: 16mm; height: 16mm; object-fit: contain; }
.report-sheet .rh-brand-name {
  font-size: 15pt; font-weight: 800; color: #1F4E79;
  letter-spacing: 1.6px; line-height: 1;
  text-transform: uppercase;
}
.report-sheet .rh-brand-sub {
  font-size: 9.5pt; color: #6b7280; margin-top: 2mm;
  letter-spacing: 0.2px;
}
.report-sheet .rh-meta { text-align: right; }
.report-sheet .rh-title {
  font-size: 18pt; font-weight: 700; color: #0f172a;
  letter-spacing: -0.2px;
  line-height: 1.15;
}
.report-sheet .rh-subtitle {
  font-size: 10pt; color: #6b7280; margin-top: 1.5mm;
}
.report-sheet .rh-date {
  font-size: 9pt; color: #9ca3af; margin-top: 2.5mm;
  font-variant-numeric: tabular-nums;
}

/* Section header */
.report-sheet .rs-section {
  font-size: 13pt; font-weight: 700; color: #1F4E79;
  margin: 8mm 0 3mm; padding: 2.5mm 3.5mm;
  border-left: 4pt solid #1F4E79;
  background: linear-gradient(90deg, #eef3f9 0%, #f8fafc 100%);
  border-radius: 0 4px 4px 0;
  letter-spacing: 0.2px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.report-sheet .rs-section:first-of-type { margin-top: 4mm; }
/* Soft sub-heading text under a section */
.report-sheet .rs-section + p { color: #6b7280; font-size: 9.5pt; margin: 0 0 3mm; }

/* KPI tile row — defaults to 4 columns; collapses gracefully on narrow modals. */
.report-sheet .rs-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 4mm 0 5mm;
}
.report-sheet .rs-kpi {
  background: linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%);
  border: 1px solid #d8dee5;
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 1px 0 rgba(15,23,42,0.04);
  position: relative;
  overflow: hidden;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.report-sheet .rs-kpi::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: #1F4E79;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.report-sheet .rs-kpi .lbl {
  font-size: 10px; color: #5b6573;
  text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700;
  margin: 0;
}
.report-sheet .rs-kpi .val {
  font-size: 22px; font-weight: 800; line-height: 1.1;
  color: #0f172a; margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.report-sheet .rs-kpi .sub {
  font-size: 11px; color: #6b7280; margin-top: 4px;
}
.report-sheet .rs-kpi.alert { background: linear-gradient(180deg, #fff5f5 0%, #fee2e2 100%); border-color: #fca5a5; }
.report-sheet .rs-kpi.alert::before { background: #c62828; }
.report-sheet .rs-kpi.alert .val { color: #991b1b; }
.report-sheet .rs-kpi.ok { background: linear-gradient(180deg, #f6fff9 0%, #dcfce7 100%); border-color: #86efac; }
.report-sheet .rs-kpi.ok::before { background: #16a34a; }
.report-sheet .rs-kpi.ok .val { color: #166534; }
.report-sheet .rs-kpi.warn { background: linear-gradient(180deg, #fffaf0 0%, #fef3c7 100%); border-color: #fbbf24; }
.report-sheet .rs-kpi.warn::before { background: #d97706; }
.report-sheet .rs-kpi.warn .val { color: #78350f; }
.report-sheet .rs-kpi-row.rs-kpi-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-sheet .rs-kpi-row.rs-kpi-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .report-sheet .rs-kpi-row,
  .report-sheet .rs-kpi-row.rs-kpi-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .report-sheet .rs-kpi-row,
  .report-sheet .rs-kpi-row.rs-kpi-row-2,
  .report-sheet .rs-kpi-row.rs-kpi-row-3 { grid-template-columns: 1fr; }
}

/* Tables in report */
.report-sheet .rs-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 9.5pt;
  margin-top: 2mm;
  border: 1px solid #d8dee5;
  border-radius: 6px;
  overflow: hidden;
}
.report-sheet .rs-table thead th {
  background: linear-gradient(180deg, #1F4E79 0%, #16395e 100%);
  color: #fff;
  text-align: left; padding: 8px 12px;
  font-size: 9pt; text-transform: uppercase; letter-spacing: .4px;
  font-weight: 700;
  border-bottom: 1px solid #16395e;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.report-sheet .rs-table thead th + th { border-left: 1px solid rgba(255,255,255,0.08); }
.report-sheet .rs-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #eef0f3;
  vertical-align: top;
}
.report-sheet .rs-table tbody tr:last-child td { border-bottom: none; }
.report-sheet .rs-table tbody tr:nth-child(even) {
  background: #f8fafc;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.report-sheet .rs-table tbody tr:hover { background: #eff6ff; }
/* Numeric columns: right-aligned tabular figures so digits line up vertically. */
.report-sheet .rs-table td[style*="text-align:right"],
.report-sheet .rs-table th[style*="text-align:right"] {
  font-variant-numeric: tabular-nums;
}
.report-sheet .rs-table tbody tr.alert {
  background: #fee2e2 !important;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.report-sheet .rs-table tbody tr.warn {
  background: #fef3c7 !important;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* Inline badges */
.report-sheet .rs-badge {
  display: inline-block; padding: 0.5mm 2mm; border-radius: 2mm;
  font-size: 8pt; font-weight: 700;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.report-sheet .rs-red { background: #c62828; color: #fff; }
.report-sheet .rs-amber { background: #f59e0b; color: #fff; }
.report-sheet .rs-blue { background: #1F4E79; color: #fff; }
.report-sheet .rs-green { background: #16a34a; color: #fff; }
.report-sheet .rs-black { background: #000; color: #fff; }

/* Empty state */
.report-sheet .rs-empty {
  text-align: center; padding: 18mm 4mm;
  color: #555; font-size: 11pt;
  background: #f9fafb; border-radius: 2mm; border: 0.5pt dashed #d1d5db;
}

/* Footer */
.report-sheet .rh-footer {
  margin-top: 10mm; padding-top: 4mm;
  border-top: 1px solid #e5e7eb;
  text-align: center; font-size: 8.5pt; color: #94a3b8;
  letter-spacing: 0.3px;
}

/* Headline callout cards (used by reports like Dealer Performance to
   surface "top volume", "high warranty %", etc. above the KPIs). */
.report-sheet .rs-headlines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 5mm;
}
.report-sheet .rs-headline {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left-width: 4px;
  border-radius: 6px;
  padding: 10px 14px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.report-sheet .rs-headline .rs-headline-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 700; opacity: 0.8;
}
.report-sheet .rs-headline .rs-headline-val {
  font-size: 13px; font-weight: 700; margin-top: 2px;
}
.report-sheet .rs-headline .rs-headline-sub { font-size: 11px; margin-top: 1px; opacity: 0.85; }
.report-sheet .rs-headline.green { background: #ecfdf5; border-color: #86efac; border-left-color: #16a34a; color: #166534; }
.report-sheet .rs-headline.amber { background: #fffbeb; border-color: #fcd34d; border-left-color: #d97706; color: #78350f; }
.report-sheet .rs-headline.red   { background: #fef2f2; border-color: #fca5a5; border-left-color: #c62828; color: #991b1b; }
.report-sheet .rs-headline.blue  { background: #eff6ff; border-color: #93c5fd; border-left-color: #1e40af; color: #1e3a8a; }

/* PRINT-SPECIFIC */
@media print {
  /* Make report fill the page */
  .print-area:has(.report-sheet) { position: static !important; left: 0 !important; top: 0 !important; }
  .report-sheet {
    padding: 12mm 14mm;
    box-shadow: none !important;
    border: none !important;
    background: #fff !important;
    max-width: none;
  }
  /* Ensure colored elements actually print */
  .report-sheet .rs-section,
  .report-sheet .rs-kpi,
  .report-sheet .rs-kpi.alert,
  .report-sheet .rs-kpi.ok,
  .report-sheet .rs-table thead th,
  .report-sheet .rs-table tbody tr.alert,
  .report-sheet .rs-table tbody tr.warn,
  .report-sheet .rs-table tbody tr:nth-child(even),
  .report-sheet .rs-badge {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* Avoid table breaks awkwardly */
  .report-sheet .rs-table { page-break-inside: auto; }
  .report-sheet .rs-table tr { page-break-inside: avoid; page-break-after: auto; }
  .report-sheet .rs-table thead { display: table-header-group; }
  .report-sheet .rs-table tfoot { display: table-footer-group; }
  /* Stop a section heading from landing alone at the bottom of a page with
     its table starting on the next page (orphan heading). */
  .report-sheet .rs-section,
  .report-sheet h2, .report-sheet h3 {
    page-break-after: avoid;
    break-after: avoid-page;
  }
}

/* Modal needs to be wider for reports. Uses an explicit class set by
   showReportModal so we don't depend on :has() (Safari < 15.4 / older
   embedded WebViews). */
.modal-backdrop .modal.modal-report,
.modal-backdrop .modal:has(.report-sheet) {
  max-width: 1180px;
  width: calc(100vw - 24px);
}

/* Report toolbar (above the report sheet) */
.modal-report .report-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}
.modal-report .report-toolbar-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1F4E79;
  letter-spacing: 0.2px;
}
.modal-report .report-toolbar-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ============================================================ */
/* REQUISITION A4 PRINT SLIP — Session 8                          */
/* ============================================================ */
.req-slip {
  display: none;
  background: #fff;
  color: #111;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: 10pt;
}
.req-slip .rs-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12mm;
  align-items: start;
  border-bottom: 2pt solid #1F4E79;
  padding-bottom: 5mm;
  margin-bottom: 6mm;
}
.req-slip .rs-brand { display: flex; align-items: center; gap: 4mm; }
.req-slip .rs-logo { width: 14mm; height: 14mm; object-fit: contain; }
.req-slip .rs-brand-name {
  font-size: 14pt; font-weight: 800; color: #1F4E79;
  letter-spacing: 1.5px;
}
.req-slip .rs-brand-sub {
  font-size: 9pt; color: #555; margin-top: 2mm;
}
.req-slip .rs-meta { text-align: right; }
.req-slip .rs-title {
  font-size: 16pt; font-weight: 700; letter-spacing: 1px;
}
.req-slip .rs-num {
  font-size: 12pt; color: #555; margin-top: 1mm;
  font-family: "Courier New", monospace;
}
.req-slip .rs-date {
  font-size: 9pt; color: #999; margin-top: 2mm;
}
.req-slip .rs-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
  background: #f9fafb;
  padding: 3mm 4mm;
  border-radius: 1mm;
  font-size: 10pt;
  margin-bottom: 5mm;
}
.req-slip .rs-itable {
  width: 100%; border-collapse: collapse; font-size: 10pt;
  margin-bottom: 8mm;
}
.req-slip .rs-itable thead th {
  background: #1F4E79; color: #fff;
  padding: 2mm 3mm; text-align: left;
  font-size: 9pt; text-transform: uppercase;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.req-slip .rs-itable tbody td {
  padding: 2mm 3mm; border-bottom: 0.3pt solid #e5e7eb;
}
.req-slip .rs-itable tfoot td {
  padding: 3mm; border-top: 1pt solid #000;
  background: #f3f4f6;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.req-slip .rs-sigs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8mm;
  margin-top: 14mm;
}
.req-slip .rs-sig { text-align: center; }
.req-slip .rs-line {
  border-bottom: 1pt solid #000;
  height: 15mm;
  margin-bottom: 2mm;
}
.req-slip .rs-cap {
  font-size: 9pt; color: #555;
}

/* Print mode for slip */
@media print {
  .print-area:has(.req-slip) { position: static !important; left: 0 !important; top: 0 !important; }
  .req-slip {
    display: block !important;
    padding: 12mm 14mm;
  }
  .req-slip .rs-itable thead th,
  .req-slip .rs-itable tfoot td {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ============================================================ */
/* FOOTER — branding line at bottom of every page                 */
/* ============================================================ */
.app-footer {
  flex: 0 0 auto;        /* stay natural size, don't grow */
  width: 100%;
  text-align: center;
  padding: 12px 16px 20px;
  color: #9ca3af;
  font-size: 10px;
  font-style: italic;
  letter-spacing: .3px;
  border-top: 1px solid var(--line);
  background: #fff;
}
@media print {
  .app-footer { display: none !important; }
}

/* ============================================================ */
/* CUSTOMER FEEDBACK FORM — bilingual (S15)                       */
/* Half-page A4, customer fills with pen at intake/dispatch       */
/* ============================================================ */
.feedback-form {
  background: #fff;
  width: 210mm;
  padding: 15mm 20mm 12mm 20mm;
  box-sizing: border-box;
  font-family: Arial, "Helvetica Neue", "Nirmala UI", "Mangal", "Noto Sans Devanagari", sans-serif;
  font-size: 10pt;
  color: #111;
  page-break-after: always;
}
.feedback-form[lang="hi"] {
  line-height: 1.6;
}
.feedback-form[lang="hi"] .fb-rating-label {
  font-size: 11pt;
}
.feedback-form .fb-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2pt solid #000;
  padding-bottom: 3mm;
  margin-bottom: 4mm;
}
.feedback-form .fb-brand-name {
  font-size: 16pt;
  font-weight: 700;
  letter-spacing: 2px;
}
.feedback-form .fb-brand-sub {
  font-size: 9pt;
  color: #555;
  margin-top: 1mm;
}
.feedback-form .fb-jobinfo {
  text-align: right;
  font-size: 10pt;
}
.feedback-form .fb-jobinfo > div { margin-bottom: 1mm; }
.feedback-form .fb-lbl {
  color: #555;
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.feedback-form .fb-title {
  font-size: 15pt;
  font-weight: 700;
  text-align: center;
  margin: 2mm 0 3mm;
}
.feedback-form .fb-greeting {
  font-size: 11pt;
  margin: 3mm 0 2mm;
}
.feedback-form .fb-intro {
  font-size: 10pt;
  line-height: 1.5;
  margin: 0 0 4mm;
  color: #333;
}
.feedback-form .fb-ratings {
  border: 0.8pt solid #000;
  border-radius: 2mm;
  padding: 3mm 4mm;
  margin-bottom: 4mm;
}
.feedback-form .fb-rating-row {
  display: grid;
  grid-template-columns: 60mm 1fr;
  gap: 4mm;
  padding: 2mm 0;
  border-bottom: 0.3pt dashed #999;
  align-items: center;
}
.feedback-form .fb-rating-row:last-of-type { border-bottom: none; }
.feedback-form .fb-rating-label {
  font-weight: 600;
  font-size: 10.5pt;
}
.feedback-form .fb-stars {
  font-size: 18pt;
  letter-spacing: 2mm;
  color: #000;
  font-family: Arial, "Helvetica Neue", sans-serif;
}
.feedback-form .fb-rating-legend {
  font-size: 8.5pt;
  color: #666;
  text-align: center;
  font-style: italic;
  margin-top: 2mm;
  padding-top: 2mm;
  border-top: 0.3pt dashed #999;
}
.feedback-form .fb-comment {
  margin-bottom: 4mm;
}
.feedback-form .fb-comment-line {
  border-bottom: 0.5pt solid #000;
  height: 6mm;
  margin-top: 1mm;
}
.feedback-form .fb-signature {
  display: grid;
  grid-template-columns: 1fr 60mm;
  gap: 8mm;
  margin-top: 6mm;
}
.feedback-form .fb-sig-line {
  border-bottom: 0.8pt solid #000;
  height: 10mm;
}
.feedback-form .fb-sig-label {
  font-size: 9pt;
  color: #555;
  text-align: center;
  margin-top: 1mm;
}
.feedback-form .fb-footer {
  margin-top: 6mm;
  padding-top: 3mm;
  border-top: 0.5pt dashed #999;
  text-align: center;
  font-size: 9pt;
  color: #333;
  line-height: 1.5;
}

/* Print mode — make sure this prints as the only thing on the page */
@media print {
  .print-area:has(.feedback-form) {
    position: static !important;
    left: 0 !important;
    top: 0 !important;
  }
}

/* ============================================================ */
/* Star rating UI for in-app feedback recording                  */
/* ============================================================ */
.star-rating-input {
  display: flex;
  gap: 4px;
  font-size: 24px;
  cursor: pointer;
  user-select: none;
}
.star-rating-input .star {
  color: #d1d5db;
  transition: color .1s, transform .1s;
}
.star-rating-input .star:hover {
  transform: scale(1.15);
}
.star-rating-input .star.filled {
  color: #f59e0b;
}
.star-rating-input.readonly {
  cursor: default;
}
.star-rating-input.readonly .star:hover {
  transform: none;
}

/* ============================================================ */
/* UNIVERSAL SEARCH BAR (S17)                                    */
/* ============================================================ */
/* Universal search bar — styled to match the local HTML version: a light
   sticky strip with a brand-bordered input, status filter, two date pickers
   and a Clear button. All controls share the same height and align on a
   single row whenever there's space; they wrap cleanly otherwise. */
#universal-search-bar {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--el-1);
}
.us-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  width: 100%;
}
.us-input-wrap {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}
.us-input-wrap::before {
  content: '🔍';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
  opacity: .55;
  color: var(--gray-500);
}
.us-filter-row #universal-search,
.us-filter-row #us-status,
.us-filter-row #us-from,
.us-filter-row #us-to,
.us-filter-row > .btn-ghost.btn-sm {
  height: 38px;
  box-sizing: border-box;
  font-family: inherit;
}
#universal-search {
  width: 100%;
  padding: 0 14px 0 36px;
  border: 1px solid var(--gray-300);
  border-radius: var(--r-2);
  font-size: 14px;
  outline: none;
  background: var(--surface-1);
  color: var(--gray-900);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
#universal-search::placeholder { color: var(--gray-400); }
#universal-search:hover:not(:focus) { border-color: var(--gray-400); }
#universal-search:focus {
  border-color: var(--brand-500);
  box-shadow: var(--focus-ring);
}
#us-status,
#us-from,
#us-to {
  padding: 0 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--r-2);
  font-size: 13px;
  background: var(--surface-1);
  color: var(--gray-700);
  flex: 0 0 auto;
  transition: border-color var(--t-fast);
}
#us-status:hover, #us-from:hover, #us-to:hover { border-color: var(--gray-400); }
#us-status:focus, #us-from:focus, #us-to:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--focus-ring);
}
#us-status { min-width: 130px; }
#us-from, #us-to { width: 145px; }
.us-filter-row > .btn-ghost.btn-sm {
  padding: 0 14px;
  font-size: 13px;
  flex: 0 0 auto;
}

/* On narrow screens, allow a tidy two-row collapse:
   Row 1: search (full width)
   Row 2: status + dates + clear (each grows equally) */
@media (max-width: 900px) {
  .us-filter-row { flex-wrap: wrap; }
  .us-input-wrap { flex: 1 1 100%; }
  #us-status     { flex: 1 1 130px; min-width: 120px; }
  #us-from, #us-to { flex: 1 1 130px; width: auto; }
}
.us-results {
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-top: 8px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.us-section {
  padding: 6px 14px;
  background: #f9fafb;
  font-weight: 700;
  font-size: 11px;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--line);
}
.us-row {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: background .1s;
}
.us-row:hover {
  background: #f0f9ff;
}
.us-row:last-child { border-bottom: none; }
.us-row .us-row-main {
  flex: 1;
  font-size: 13px;
}
.us-row .us-row-meta {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.us-empty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.us-match-highlight {
  background: #fef08a;
  font-weight: 700;
  padding: 0 2px;
  border-radius: 2px;
}

/* ============================================================ */
/* LOCKOUT SCREENS — full-tab overlays matching v0859 visual    */
/* ============================================================ */
.lockout-screen {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.lockout-card {
  background: #fff;
  border-radius: 12px;
  padding: 40px 50px;
  max-width: 560px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 24px rgba(31, 78, 121, 0.08);
  border: 1px solid #e0eaf4;
}
.lockout-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}
.lockout-title {
  color: var(--brand);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
}
.lockout-desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 24px;
}
.lockout-btn {
  font-size: 15px;
  padding: 12px 28px;
  width: 100%;
  margin-bottom: 16px;
}
.lockout-info {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 16px;
}
.lockout-footer {
  color: #9ca3af;
  font-size: 11px;
  margin: 0;
  font-style: italic;
}


/* ============================================================ */
/* TOGGLE-GROUP — exact v0859 button group component             */
/* Used for: arrival mode, bill status, warranty, condition,     */
/* priority. Replaces dropdowns with semantic-color buttons.     */
/* ============================================================ */
.toggle-group {
  display: flex;
  gap: 0;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.toggle-group button {
  flex: 1;
  padding: 9px 14px;
  background: #fff;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  border-right: 1px solid #d1d5db;
  transition: background .15s, color .15s, box-shadow .15s, transform .08s;
}
.toggle-group button:last-child {
  border-right: 0;
}
.toggle-group button:hover:not(:disabled):not(.active) {
  background: #f3f4f6;
  color: var(--ink, #1a1a1a);
}
/* Selected state — strong, unmistakable highlight.
   `!important` keeps the active style from being overridden by cached or
   conflicting rules; this is a UX-critical signal so it must win. */
.toggle-group button.active {
  background: var(--brand) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.15);
  font-weight: 700;
  transform: scale(1.01);
  position: relative;
  z-index: 1;
}
/* Semantic colors override the generic blue of .active. Same !important
   discipline so the chosen button's color always shows. */
.toggle-group button.active.sel-warranty { background: #16a34a !important; }
.toggle-group button.active.sel-paid     { background: #c62828 !important; }
.toggle-group button.active.sel-urgent   { background: #d32f2f !important; }
.toggle-group button.active.sel-easy     { background: #6b7280 !important; }
.toggle-group button.active.sel-generic  { background: var(--brand) !important; }
/* Semantic colour variants stack their own background on top of `.active` */
.toggle-group button.active.sel-warranty,
.toggle-group button.sel-warranty { background: #16a34a; color: #fff; }
.toggle-group button.active.sel-paid,
.toggle-group button.sel-paid { background: #c62828; color: #fff; }
.toggle-group button.active.sel-urgent,
.toggle-group button.sel-urgent { background: #d32f2f; color: #fff; }
.toggle-group button.active.sel-easy,
.toggle-group button.sel-easy { background: #6b7280; color: #fff; }
.toggle-group button.active.sel-generic,
.toggle-group button.sel-generic { background: var(--brand); color: #fff; }
.toggle-group button:disabled,
.toggle-group button[disabled] {
  background: #f3f4f6 !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
}

/* ============================================================ */
/* AUTOCOMPLETE DROPDOWN (sku-suggest pattern from v0859)        */
/* Used for: customer name, walk-in city, dealer name            */
/* ============================================================ */
.field.sku-auto {
  position: relative;
}
.sku-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  /* Stronger border + shadow so the floating popup is clearly distinct
     from the form below it. Was confusing operators because the previous
     1px line on white blended into the page and made the popup look like
     a layout glitch hiding the row below. */
  border: 1px solid #93c5fd;
  border-top: 3px solid #2563eb;
  border-radius: 5px;
  margin-top: 2px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 200;
  display: none;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18);
}
.sku-suggest.show {
  display: block;
}
.sku-suggest-item {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.sku-suggest-item:last-child {
  border-bottom: 0;
}
.sku-suggest-item:hover {
  background: #f3f4f6;
}
.sku-suggest-item .s-sku {
  font-family: monospace;
  font-weight: 700;
}
.sku-suggest-item .s-name {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.sku-suggest-item .s-tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  background: #e5e7eb;
  color: #555;
  border-radius: 3px;
  margin-left: 6px;
  font-weight: 600;
}

/* ============================================================ */
/* New Entry form polish — matches v0859 spacing and density    */
/* ============================================================ */
.panel h3 {
  margin: 18px 0 10px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

/* ================================================================
 * MOBILE & TABLET POLISH
 * Layered on top of the existing 700px breakpoint. Targets phones
 * (≤480px) and small tablets (≤768px) so engineers and Front Desk
 * can use the cloud comfortably from a phone.
 * ============================================================== */
@media (max-width: 768px) {
  /* Header: stack brand on top, role buttons below */
  header {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px;
  }
  header h1 { font-size: 14px; }
  .header-credit { font-size: 10px; }
  .session-panel,
  .role-switch {
    margin-left: 0;
  }
  .role-switch {
    flex-wrap: wrap;
  }

  /* Nav tabs scroll horizontally instead of overlapping */
  #main-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding: 0 8px;
  }
  #main-nav button {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 10px 12px;
  }

  /* Universal search: handled by the v2 refinement layer's
     @media (max-width: 900px) rule. No overrides here. */
  #universal-search-bar { padding: 8px 12px; }
  .us-filter-row { gap: 6px; }

  /* Main content padding tightens on small screens */
  main { padding: 10px; }
  .panel { padding: 12px; margin-bottom: 10px; }
  h2 { font-size: 16px; }

  /* Tables: shrink font + row padding for density, allow horizontal scroll */
  table { font-size: 12px; }
  table th, table td { padding: 6px 8px; }

  /* Buttons hit a 44px tap target on phones (Apple/Google guideline) */
  .btn-primary, .btn-ghost, .btn-danger, .btn-success,
  button.role-btn,
  #main-nav button {
    min-height: 40px;
  }
  /* Small action buttons stay smaller but tap-friendly */
  .btn-sm { min-height: 36px; padding: 6px 10px; }

  /* Filter bars on each tab: full-width inputs that wrap into rows */
  .filter-bar { gap: 6px; }
  .filter-bar input,
  .filter-bar select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  .filter-bar input.search-box { flex: 1 1 100%; }

  /* Modal — full-screen on phones */
  .modal {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 92vh !important;
    margin: 4vh auto !important;
    padding: 14px !important;
  }
}

@media (max-width: 480px) {
  /* Even tighter on phones */
  header h1 .version-badge { display: none; }
  .header-credit { display: none; }
  .role-switch button { padding: 5px 8px; font-size: 11px; }
  .panel { padding: 10px; }
  .kpi-card { padding: 10px; }
  .kpi-card .value { font-size: 20px; }
  /* On tiny screens, status filter alone gets full width too */
  #us-status, #us-from, #us-to { flex: 1 1 100%; }
}

/* Make `tel:` links blend in with surrounding text */
a[href^="tel:"] { color: inherit; text-decoration: underline dotted; }

/* =============================================================================
 * v2 DESIGN REFINEMENT LAYER — appended last so it wins on equal specificity.
 *
 * Goals:
 *   • Real design tokens (palette, spacing, radii, shadows, motion)
 *   • Cleaner type rhythm and antialiased rendering
 *   • Proper button/input states (hover/focus/active) with smooth transitions
 *   • Modern depth system (elevations) instead of one weak shadow
 *   • Backdrop blur + spring animation on modals
 *   • Toast slide-in with built-in icons and longer life
 *   • Universal focus-visible rings for keyboard accessibility
 *   • Refined badges — softer palette, higher contrast text
 *   • Tables: sticky header support + soft zebra hover
 *   • Skeleton shimmer + smooth tab transitions
 *
 * Strictly additive: every existing class still works; this layer just makes
 * everything look more refined.
 * ========================================================================== */

:root {
  /* 8-pt spacing scale */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;

  /* Type scale */
  --text-xs: 11px;  --text-sm: 12px;  --text-base: 14px; --text-md: 15px;
  --text-lg: 17px;  --text-xl: 20px;  --text-2xl: 24px;  --text-3xl: 30px;

  /* Radii */
  --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 12px; --r-5: 16px; --r-pill: 999px;

  /* Refined neutral scale (Tailwind-derived but warmer) */
  --gray-50:  #fafbfc; --gray-100: #f4f6f8; --gray-200: #e7eaee;
  --gray-300: #d2d7de; --gray-400: #98a2b3; --gray-500: #667085;
  --gray-600: #475467; --gray-700: #344054; --gray-800: #1d2939;
  --gray-900: #101828;

  /* Brand scale */
  --brand-50:  #eff5fb; --brand-100: #dcebf6; --brand-200: #b8d3e8;
  --brand-300: #8ab5d6; --brand-400: #4d80ad; --brand-500: #1F4E79;
  --brand-600: #163d63; --brand-700: #103050;

  /* Semantic surfaces */
  --surface-1:     #ffffff;
  --surface-2:     #f7f8fa;
  --surface-hover: #f4f6f8;
  --surface-sunken:#eef0f3;

  /* Elevation (Material-inspired, four steps) */
  --el-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --el-2: 0 4px 6px -2px rgba(16, 24, 40, .03), 0 12px 16px -4px rgba(16, 24, 40, .08);
  --el-3: 0 8px 8px -4px rgba(16, 24, 40, .03), 0 20px 24px -4px rgba(16, 24, 40, .08);
  --el-4: 0 24px 48px -12px rgba(16, 24, 40, .18);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 120ms;
  --t-med:  220ms;
  --t-slow: 320ms;

  /* Focus ring — accessibility */
  --focus-ring: 0 0 0 3px rgba(31, 78, 121, 0.30);
  --focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.30);
}

/* ===== Page-level rendering ===== */
body {
  background: var(--surface-2);
  color: var(--gray-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===== Header — refined gradient + bottom shadow separator ===== */
header {
  background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-600) 100%);
  padding: 14px 22px;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 4px 14px rgba(31, 78, 121, .15);
}
header h1 {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ===== Main nav — active underline indicator ===== */
#main-nav button {
  position: relative;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast);
}
#main-nav button.active {
  background: transparent;
  color: var(--brand-500);
  font-weight: 600;
}
#main-nav button.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 14px; right: 14px;
  height: 2px;
  background: var(--brand-500);
  border-radius: 2px 2px 0 0;
  animation: navInd var(--t-med) var(--ease-out);
}
@keyframes navInd { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ===== Panels — subtle border + softer shadow + smooth hover lift ===== */
.panel {
  background: var(--surface-1);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-3);
  padding: var(--space-5);
  box-shadow: var(--el-1);
  margin-bottom: var(--space-4);
  transition: box-shadow var(--t-med) var(--ease-out);
}
.panel h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gray-900);
  margin: 0 0 var(--space-4);
}
.panel h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--gray-700);
  letter-spacing: 0;
}

/* ===== Buttons — proper interaction states ===== */
.btn-primary, .btn-ghost, .btn-danger, .btn-success {
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 9px 16px;
  border-radius: var(--r-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast),
              transform var(--t-fast),
              box-shadow var(--t-fast),
              color var(--t-fast);
  -webkit-appearance: none;
  letter-spacing: 0.01em;
  user-select: none;
}
.btn-primary {
  background: var(--brand-500);
  color: #fff;
  box-shadow: var(--el-1);
}
.btn-primary:hover {
  background: var(--brand-600);
  transform: translateY(-1px);
  box-shadow: var(--el-2);
  opacity: 1;
}
.btn-primary:active { transform: translateY(0); box-shadow: var(--el-1); }
.btn-primary:focus-visible { outline: none; box-shadow: var(--el-1), var(--focus-ring); }

.btn-ghost {
  background: var(--surface-1);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}
.btn-ghost:hover {
  background: var(--surface-hover);
  border-color: var(--gray-400);
  color: var(--gray-900);
}
.btn-ghost:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn-danger { background: #dc2626; color: #fff; box-shadow: var(--el-1); }
.btn-danger:hover { background: #b91c1c; transform: translateY(-1px); box-shadow: var(--el-2); opacity: 1; }
.btn-danger:focus-visible { outline: none; box-shadow: var(--el-1), var(--focus-ring-danger); }

.btn-success { background: #15803d; color: #fff; box-shadow: var(--el-1); }
.btn-success:hover { background: #166534; transform: translateY(-1px); box-shadow: var(--el-2); opacity: 1; }

button:disabled, .btn-primary:disabled, .btn-ghost:disabled, .btn-danger:disabled, .btn-success:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--el-1) !important;
}

/* ===== Form fields — cleaner focus, smoother transitions ===== */
.field input, .field select, .field textarea {
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--r-2);
  font-size: var(--text-base);
  background: var(--surface-1);
  color: var(--gray-900);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:hover:not(:focus):not([readonly]),
.field select:hover:not(:focus),
.field textarea:hover:not(:focus):not([readonly]) {
  border-color: var(--gray-400);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--focus-ring);
}
.field input::placeholder, .field textarea::placeholder { color: var(--gray-400); }
.field input[readonly] { background: var(--surface-sunken); color: var(--gray-600); }
.field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
  letter-spacing: 0;
}

/* ===== Tables — subtler grid, smoother hover, proper sticky header support ===== */
table { background: var(--surface-1); }
thead th {
  background: var(--gray-50);
  font-weight: 600;
  color: var(--gray-600);
  font-size: var(--text-xs);
  letter-spacing: .5px;
  border-bottom: 1px solid var(--gray-200);
  padding: 11px 12px;
  position: sticky;
  top: 0;
}
tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}
tbody tr {
  transition: background var(--t-fast);
}
tbody tr:hover {
  background: var(--surface-hover);
}
tbody tr:last-child td { border-bottom: 0; }

/* ===== Badges — softer palette, refined sizing ===== */
.badge {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .25px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
}
.badge-green { background: #dcfce7; color: #15803d; }
.badge-blue  { background: #dbeafe; color: #1e40af; }
.badge-amber { background: #fef3c7; color: #b45309; }
.badge-red   { background: #fee2e2; color: #b91c1c; }
.badge-gray  { background: var(--gray-100); color: var(--gray-600); }

/* ===== Modal — backdrop blur + spring entrance ===== */
.modal-backdrop {
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal {
  border-radius: var(--r-4);
  box-shadow: var(--el-4);
  border: 1px solid var(--gray-200);
  animation: modalIn var(--t-slow) var(--ease-spring);
}
.modal h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--gray-900);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ===== Toast — slide-in with embedded icon ===== */
.toast {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--r-3);
  box-shadow: var(--el-3);
  font-size: 13.5px;
  font-weight: 500;
  min-width: 240px;
  max-width: 480px;
  background: var(--gray-800);
  color: #fff;
  border-left: 3px solid #22c55e;
}
.toast.error   { background: #b91c1c; color: #fff; border-left-color: #fff; }
.toast.warning { background: #b45309; color: #fff; border-left-color: #fff; }
/* When show class is added, slide in with spring animation */
.toast[style*="display: block"],
.toast[style*="display:block"] {
  display: flex !important;
  animation: toastIn var(--t-slow) var(--ease-spring);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== KPI cards — soft elevation + lift on hover ===== */
.kpi-card {
  background: var(--surface-1);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-3);
  padding: 16px 18px;
  box-shadow: var(--el-1);
  transition: transform var(--t-fast), box-shadow var(--t-med);
}
.kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--el-2);
}
.kpi-card .label {
  font-size: var(--text-xs);
  color: var(--gray-500);
  font-weight: 600;
  letter-spacing: .5px;
}
.kpi-card .value {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 4px;
  line-height: 1.1;
}

/* ===== Universal focus rings for keyboard accessibility ===== */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-2);
}

/* ===== Smooth tab transitions ===== */
.tab {
  animation: tabIn var(--t-med) var(--ease-out);
}
@keyframes tabIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Skeleton shimmer for loading states ===== */
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s linear infinite;
  border-radius: var(--r-2);
}
@keyframes skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== Smooth scroll for in-page anchors ===== */
html { scroll-behavior: smooth; }

/* ===== Empty state polish — gives meaning to the dashes ===== */
.empty-state {
  text-align: center;
  padding: 36px 20px;
  color: var(--gray-500);
  font-size: var(--text-base);
  background: var(--surface-2);
  border: 1px dashed var(--gray-300);
  border-radius: var(--r-3);
}

/* ===== Selection color — branded ===== */
::selection {
  background: var(--brand-200);
  color: var(--brand-700);
}

/* ===== Subtle scrollbar (WebKit only — graceful elsewhere) ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 5px; border: 2px solid var(--surface-2); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ===== Reduced motion respect ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
 * SEARCH BAR — final overrides. Nothing earlier in the file can override these
 * because they appear last AND use !important. This guarantees a single
 * horizontal toolbar regardless of any legacy rules that may exist.
 * ========================================================================== */
#universal-search-bar.us-bar,
#universal-search-bar {
  background: #fff !important;
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 12px 24px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  box-shadow: var(--el-1) !important;
}
#universal-search-bar .us-filter-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0;
}
#universal-search-bar .us-input-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: relative !important;
}
#universal-search-bar .us-input-wrap::before {
  content: '🔍';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
  opacity: .55;
}
#universal-search-bar #universal-search {
  width: 100% !important;
  height: 38px !important;
  padding: 0 14px 0 36px !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--r-2) !important;
  font-size: 14px !important;
  background: #fff !important;
  color: var(--gray-900) !important;
}
#universal-search-bar #universal-search:focus {
  outline: none !important;
  border-color: var(--brand-500) !important;
  box-shadow: var(--focus-ring) !important;
}
#universal-search-bar #us-status,
#universal-search-bar #us-from,
#universal-search-bar #us-to {
  height: 38px !important;
  padding: 0 10px !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--r-2) !important;
  background: #fff !important;
  color: var(--gray-700) !important;
  font-size: 13px !important;
  flex: 0 0 auto !important;
}
#universal-search-bar #us-status { min-width: 130px !important; width: 130px !important; }
#universal-search-bar #us-from,
#universal-search-bar #us-to { width: 145px !important; }
#universal-search-bar > .us-filter-row > .btn-ghost.btn-sm,
#universal-search-bar .us-filter-row > .btn-ghost {
  height: 38px !important;
  padding: 0 14px !important;
  flex: 0 0 auto !important;
  font-size: 13px !important;
  white-space: nowrap;
}

/* On real phones (≤700px) — and only there — let the bar stack to two rows */
@media (max-width: 700px) {
  #universal-search-bar .us-filter-row { flex-wrap: wrap !important; }
  #universal-search-bar .us-input-wrap { flex: 1 1 100% !important; }
  #universal-search-bar #us-status,
  #universal-search-bar #us-from,
  #universal-search-bar #us-to { flex: 1 1 130px !important; width: auto !important; }
}

/* (Removed white-pill redesign block. The original semantic-color toggle
   styles at lines ~1900-1965 are now the sole source of truth — matches
   the local HTML facade: solid dark-blue / red / green background with
   white text on the selected button.) */