/* =============================================================
   Doodad Dude — Styles v6 · Apple Liquid Glass Design System
   =============================================================
   Core principles applied:
   · Translucent frosted-glass surfaces (backdrop-filter blur)
   · Vibrancy: UI elements appear to glow through their background
   · SF Pro Display / SF Pro Text via -apple-system fallback + Inter
   · Spring-physics transitions (cubic-bezier tension curves)
   · Continuous corner radii (squircle-like, 18-22px)
   · Layered depth: each surface sits on a distinct depth plane
   · Orange (#FF6B00) + Blue (#007AFF) accent system (brand-matched)
   · Specular highlights: 1px top-edge shine on glass panels
   · Dark mode deep background with luminous blur layers above
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

/* ──────────────────────────────────────────────────────────
   DESIGN TOKENS
   ────────────────────────────────────────────────────────── */
:root {
  /* === Brand accents === */
  --orange:        #FF6B00;
  --orange-light:  #FF8C2A;
  --orange-dim:    #FF6B0088;
  --orange-glow:   rgba(255,107,0,0.22);
  --orange-ultra:  rgba(255,107,0,0.08);
  --blue:          #007AFF;   /* Apple HIG system blue */
  --blue-dark:     #0055CC;
  --blue-glow:     rgba(0,122,255,0.22);
  --blue-ultra:    rgba(0,122,255,0.08);
  --danger:        #FF453A;   /* Apple HIG red */
  --success:       #30D158;   /* Apple HIG green */
  --warning:       #FFD60A;   /* Apple HIG yellow */

  /* === Deep background (near-black, slight warm tint) === */
  --bg:            #080808;
  --bg-mesh:       radial-gradient(ellipse 80% 60% at 20% 10%,
                     rgba(255,107,0,0.06) 0%, transparent 60%),
                   radial-gradient(ellipse 60% 40% at 80% 80%,
                     rgba(0,122,255,0.07) 0%, transparent 60%),
                   #080808;

  /* === Glass surface layers (progressively lighter) === */
  --glass-0:       rgba(255,255,255,0.03);  /* deepest — almost invisible */
  --glass-1:       rgba(255,255,255,0.06);  /* panels */
  --glass-2:       rgba(255,255,255,0.10);  /* cards */
  --glass-3:       rgba(255,255,255,0.14);  /* inputs, hovered items */
  --glass-4:       rgba(255,255,255,0.20);  /* modals, popovers */

  /* === Specular highlight (top-edge shine) === */
  --shine:         rgba(255,255,255,0.18);
  --shine-strong:  rgba(255,255,255,0.28);

  /* === Borders (always translucent white) === */
  --border:        rgba(255,255,255,0.09);
  --border-hi:     rgba(255,255,255,0.16);
  --border-glow:   rgba(255,107,0,0.30);

  /* === Text === */
  --text:          rgba(255,255,255,0.92);
  --text-dim:      rgba(255,255,255,0.55);
  --text-muted:    rgba(255,255,255,0.30);
  --text-micro:    rgba(255,255,255,0.20);

  /* === Blur values (tuned for 90-120fps GPU rasterization) === */
  --blur-sm:       blur(8px);
  --blur-md:       blur(12px);
  --blur-lg:       blur(16px);
  --blur-xl:       blur(24px);

  /* === Repair view (orange-warm layer) === */
  --rv-accent:     #FF6B00;
  --rv-glow:       rgba(255,107,0,0.22);
  --rv-bg:         #080604;
  --rv-surface:    rgba(255,107,0,0.05);
  --rv-surface2:   rgba(255,107,0,0.08);
  --rv-border:     rgba(255,107,0,0.12);
  --rv-border-hi:  rgba(255,107,0,0.28);

  /* === Radius === */
  --radius:        18px;   /* Apple continuous corner */
  --radius-sm:     11px;
  --radius-xs:     7px;
  --radius-pill:   999px;

  /* === Shadows === */
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:     0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg:     0 24px 64px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4);
  --shadow-glow-orange: 0 0 32px rgba(255,107,0,0.30), 0 4px 16px rgba(255,107,0,0.20);
  --shadow-glow-blue:   0 0 24px rgba(0,122,255,0.28), 0 4px 12px rgba(0,122,255,0.18);

  /* === Typography === */
  --font-body: -apple-system, 'SF Pro Text', 'Inter', sans-serif;
  --font-display: -apple-system, 'SF Pro Display', 'Inter', sans-serif;
  --font-mono:  'SF Mono', 'Menlo', 'Space Mono', monospace;
  --font-cond:  -apple-system, 'SF Pro Display', 'Inter', sans-serif;

  /* === Spring transitions === */
  --spring:        0.28s cubic-bezier(0.34, 1.56, 0.64, 1);  /* bouncy spring */
  --ease:          0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition:    var(--ease);
}

/* ──────────────────────────────────────────────────────────
   BASE
   ────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--bg-mesh);
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: var(--radius-xs); }

/* ──────────────────────────────────────────────────────────
   GLASS MIXIN (applied inline via class combos)
   ────────────────────────────────────────────────────────── */
.glass {
  background: var(--glass-2);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-hi);
  box-shadow: var(--shadow-md),
              inset 0 1px 0 var(--shine);  /* specular top edge */
}

/* ──────────────────────────────────────────────────────────
   HEADER — frosted glass bar
   ────────────────────────────────────────────────────────── */
.app-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,8,8,0.78);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--shine), var(--shadow-sm);
  transform: translateZ(0);
}
.header-inner {
  width: 100%; margin: 0;
  padding: 0 1.5rem; height: 58px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.85rem; }
.brand-logo { height: 36px; width: auto; object-fit: contain; }
.brand-icon {
  font-size: 1.5rem; display: inline-block;
  animation: spin-slow 14s linear infinite;
  filter: drop-shadow(0 0 6px var(--orange));
  will-change: transform;
  transform: translateZ(0);
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.6) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.brand-tagline {
  font-size: 0.62rem; color: var(--text-muted);
  letter-spacing: 0.08em; text-transform: uppercase;
  font-family: var(--font-mono);
}
.header-actions { display: flex; gap: 0.5rem; align-items: center; }

/* Repair mode banner */
.repair-mode-banner {
  background: linear-gradient(90deg, rgba(255,107,0,0.14) 0%, transparent 70%);
  border-top: 1px solid rgba(255,107,0,0.25);
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.3rem 1.5rem; font-size: 0.75rem;
}
.rm-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange);
  animation: rm-blink 1.6s ease-in-out infinite;
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--orange), 0 0 16px rgba(255,107,0,0.4);
}
@keyframes rm-blink { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.3; transform:scale(0.8); } }
.rm-label {
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.68rem; letter-spacing: 0.12em;
  color: var(--orange); text-transform: uppercase;
}
.rm-ticket { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); }
.rm-status { margin-left: auto; font-size: 0.65rem; color: var(--text-muted); font-family: var(--font-mono); }

/* ──────────────────────────────────────────────────────────
   BUTTONS — liquid glass style
   ────────────────────────────────────────────────────────── */
button {
  cursor: pointer; font-family: var(--font-body);
  border: none; outline: none; transition: var(--spring);
}

/* Primary — filled pill */
.btn-primary {
  background: linear-gradient(160deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: #fff; font-weight: 600; font-size: 0.88rem;
  padding: 0.58rem 1.3rem; border-radius: var(--radius-pill);
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-glow-blue), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover {
  transform: scale(1.03) translateY(-1px);
  box-shadow: 0 0 36px rgba(0,122,255,0.45), 0 8px 24px rgba(0,122,255,0.3),
              inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-primary:active { transform: scale(0.97); transition: 0.1s ease; }

/* Ghost — glass pill */
.btn-ghost {
  background: var(--glass-2);
  color: var(--text-dim); border: 1px solid var(--border-hi);
  font-size: 0.84rem; font-weight: 500; padding: 0.52rem 1.1rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 var(--shine);
}
.btn-ghost:hover {
  background: var(--glass-3); color: var(--text);
  border-color: rgba(255,255,255,0.24);
  transform: scale(1.02);
}

.btn-full { width: 100%; text-align: center; }
.btn-sm { font-size: 0.78rem !important; padding: 0.38rem 0.85rem !important; }

.btn-back {
  background: none; border: none;
  color: var(--blue); font-size: 0.88rem; font-weight: 600;
  cursor: pointer; padding: 0.3rem 0;
  display: flex; align-items: center; gap: 0.3rem;
  transition: var(--ease);
}
.btn-back:hover { color: var(--text); transform: translateX(-2px); }

/* Action buttons in repair topbar */
.btn-cash-out {
  background: linear-gradient(160deg, var(--success), #00A844);
  color: #fff; font-weight: 700; font-size: 0.85rem;
  padding: 0.52rem 1.1rem; border-radius: var(--radius-pill);
  box-shadow: 0 0 20px rgba(48,209,88,0.30), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-cash-out:hover {
  transform: scale(1.04) translateY(-1px);
  box-shadow: 0 0 32px rgba(48,209,88,0.50), inset 0 1px 0 rgba(255,255,255,0.3);
}

.btn-label-print {
  background: var(--glass-2);
  color: var(--warning); border: 1px solid rgba(255,214,10,0.30);
  font-size: 0.82rem; font-weight: 600; padding: 0.48rem 0.95rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 var(--shine);
}
.btn-label-print:hover {
  background: rgba(255,214,10,0.12); border-color: var(--warning);
  transform: scale(1.03);
}

.btn-edit-ticket {
  background: var(--glass-2);
  color: var(--text-dim); border: 1px solid var(--border-hi);
  font-size: 0.82rem; font-weight: 500; padding: 0.48rem 0.95rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 var(--shine);
}
.btn-edit-ticket:hover { background: var(--glass-3); color: var(--text); transform: scale(1.02); }

.btn-trash-icon {
  background: var(--glass-2);
  border: 1px solid rgba(255,69,58,0.28); border-radius: var(--radius-sm);
  color: var(--danger); font-size: 1rem;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0;
  box-shadow: inset 0 1px 0 var(--shine);
}
.btn-trash-icon:hover {
  background: rgba(255,69,58,0.16); border-color: var(--danger);
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(255,69,58,0.30), inset 0 1px 0 var(--shine);
}

.pulse-once { animation: pulse 1.2s ease 1s 1; }
@keyframes pulse {
  0%,100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 8px rgba(0,122,255,0.18), 0 0 0 16px rgba(0,122,255,0.06); }
}

/* ──────────────────────────────────────────────────────────
   VIEWS
   ────────────────────────────────────────────────────────── */
.view { display: none; width: 100%; padding: 1.5rem 1.5rem 6rem; }
.view.active { display: block; animation: glassReveal 0.38s cubic-bezier(0.34,1.56,0.64,1); will-change: transform, opacity; }
.view:not(.active) { display: none !important; }
/* Full-bleed split-pane views (scheduling, kanban) strip padding so their
   own grid fills edge-to-edge on any screen width */
.view.view-fullbleed { padding: 0 !important; overflow: hidden; }
@keyframes glassReveal {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ──────────────────────────────────────────────────────────
   DASHBOARD
   ────────────────────────────────────────────────────────── */
.dashboard-toolbar { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.search-wrap { flex: 1; min-width: 220px; position: relative; }
.search-icon {
  position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
  font-size: 1rem; color: var(--text-muted); pointer-events: none; z-index: 1; line-height: 1;
}
.search-wrap input { width: 100%; padding: 0.65rem 0.9rem 0.65rem 2.5rem; }
.filter-wrap select { min-width: 170px; }

.ticket-stats { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.stat-chip {
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.28rem 0.9rem;
  font-size: 0.74rem; font-weight: 600; font-family: var(--font-mono);
  color: var(--text-dim); cursor: pointer; transition: var(--spring);
  box-shadow: inset 0 1px 0 var(--shine);
}
.stat-chip:hover {
  background: var(--glass-3); border-color: var(--orange);
  color: var(--orange); transform: scale(1.04);
  box-shadow: var(--shadow-glow-orange), inset 0 1px 0 var(--shine-strong);
}
.stat-chip strong { color: var(--text); }

.tickets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; }

/* Ticket card — glass card with depth */
.ticket-card {
  background: var(--glass-1);
  backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem;
  cursor: pointer; transition: var(--spring);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--shine);
}
/* Specular left accent bar */
.ticket-card::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-dim) 100%);
  transition: var(--spring);
}
/* Subtle inner glow on hover */
.ticket-card::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%);
  pointer-events: none;
}
.ticket-card:hover {
  transform: translateY(-4px) scale(1.01);
  background: var(--glass-2);
  border-color: rgba(255,107,0,0.28);
  box-shadow: var(--shadow-md), var(--shadow-glow-orange), inset 0 1px 0 var(--shine-strong);
}
.ticket-card:hover::before { width: 4px; }
.ticket-card:active { transform: translateY(-1px) scale(0.995); transition: 0.1s ease; }

.tc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
.tc-id {
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted);
  background: var(--glass-2); padding: 0.18rem 0.55rem;
  border-radius: var(--radius-pill); border: 1px solid var(--border);
}
.tc-name { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.18rem; letter-spacing: -0.01em; }
.tc-phone { font-size: 0.78rem; color: var(--text-dim); font-family: var(--font-mono); }
.tc-device { font-size: 0.8rem; color: var(--orange-light); font-weight: 600; margin: 0.45rem 0 0.2rem; }
.tc-repair {
  font-size: 0.78rem; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tc-dropoff { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); margin-top: 0.4rem; }
.tc-balance-chip {
  display: inline-block; margin-top: 0.4rem;
  font-size: 0.65rem; font-family: var(--font-mono); font-weight: 700;
  padding: 0.12rem 0.55rem; border-radius: var(--radius-pill);
}
.tc-balance-chip.owed { background: rgba(255,107,0,0.12); color: var(--orange-light); border: 1px solid rgba(255,107,0,0.28); }
.tc-balance-chip.paid { background: rgba(48,209,88,0.10); color: var(--success); border: 1px solid rgba(48,209,88,0.25); }
.tc-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 0.85rem; padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}
.tc-appt { font-size: 0.72rem; color: var(--text-muted); font-family: var(--font-mono); }

/* Status pills — glass-tinted */
.status-pill {
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.22rem 0.7rem; border-radius: var(--radius-pill);
  display: inline-block;
}
.status-Checked\ In      { background: rgba(0,122,255,0.15); color: #70B9FF; border: 1px solid rgba(0,122,255,0.28); }
.status-Diagnosing       { background: rgba(255,214,10,0.13); color: var(--warning); border: 1px solid rgba(255,214,10,0.28); }
.status-Waiting\ for\ Parts { background: rgba(255,107,0,0.12); color: var(--orange-light); border: 1px solid rgba(255,107,0,0.25); }
.status-In\ Repair       { background: rgba(255,107,0,0.15); color: var(--orange-light); border: 1px solid rgba(255,107,0,0.30); }
.status-Completed        { background: rgba(48,209,88,0.14); color: var(--success); border: 1px solid rgba(48,209,88,0.30); }
.status-Picked\ Up       { background: rgba(255,255,255,0.06); color: var(--text-muted); border: 1px solid var(--border); }
.status-Closed           { background: rgba(48,209,88,0.20); color: #5EE88A; border: 1px solid rgba(48,209,88,0.40); font-weight: 800; }
/* Hyphen variants (used in JS) */
.status-Checked-In       { background: rgba(0,122,255,0.15); color: #70B9FF; border: 1px solid rgba(0,122,255,0.28); }
.status-Waiting-for-Parts { background: rgba(255,107,0,0.12); color: var(--orange-light); border: 1px solid rgba(255,107,0,0.25); }
.status-In-Repair        { background: rgba(255,107,0,0.15); color: var(--orange-light); border: 1px solid rgba(255,107,0,0.30); }
.status-Picked-Up        { background: rgba(255,255,255,0.06); color: var(--text-muted); border: 1px solid var(--border); }

/* Empty state */
.empty-state { display: none; text-align: center; padding: 5rem 1rem; }
.empty-state.visible { display: block; }
.empty-icon { font-size: 3.5rem; margin-bottom: 1rem; filter: drop-shadow(0 0 20px rgba(255,107,0,0.3)); }
.empty-state h2 { font-size: 1.4rem; color: var(--text-dim); margin-bottom: 0.5rem; font-weight: 600; letter-spacing: -0.02em; }
.empty-state p { color: var(--text-muted); margin-bottom: 1.5rem; }

/* ──────────────────────────────────────────────────────────
   TICKET CREATION FORM
   ────────────────────────────────────────────────────────── */
.form-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.form-title-wrap { flex: 1; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.form-title-wrap h1 {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.65) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ticket-id-badge {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--orange);
  background: var(--orange-ultra); border: 1px solid rgba(255,107,0,0.28);
  padding: 0.2rem 0.7rem; border-radius: var(--radius-pill);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
}
.form-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.25rem; align-items: start; }

/* Glass cards */
.card {
  background: var(--glass-1);
  backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem;
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--shine);
  transition: var(--ease);
}
.card:last-child { margin-bottom: 0; }
.card-sticky { position: sticky; top: 80px; }
.card-header {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1.1rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.card-icon { font-size: 1.1rem; filter: drop-shadow(0 0 4px rgba(255,255,255,0.15)); }
.card-header h2 {
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-dim); flex: 1;
}
.staff-badge {
  font-size: 0.6rem; font-family: var(--font-mono);
  background: var(--orange-ultra); color: var(--orange-light);
  border: 1px solid rgba(255,107,0,0.28); padding: 0.14rem 0.55rem;
  border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.06em;
}

/* Form fields */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.field { display: flex; flex-direction: column; gap: 0.32rem; }
.field-full { grid-column: 1 / -1; }
label {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted);
}
.req { color: var(--orange); }

/* Glass inputs */
input[type="text"], input[type="tel"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], input[type="number"], textarea, select {
  background: var(--glass-2);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-body);
  font-size: 0.92rem; padding: 0.62rem 0.9rem;
  width: 100%; outline: none; transition: var(--ease);
  appearance: none; -webkit-appearance: none;
  box-shadow: inset 0 1px 0 var(--shine), inset 0 -1px 0 rgba(0,0,0,0.15);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.5); cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, textarea:focus, select:focus {
  border-color: rgba(255,107,0,0.50);
  background: var(--glass-3);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.14),
              inset 0 1px 0 var(--shine-strong),
              inset 0 -1px 0 rgba(0,0,0,0.15);
}
textarea { resize: vertical; min-height: 80px; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center;
  padding-right: 2.4rem; cursor: pointer;
}
.field-hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.45rem; }

/* Password */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 2.8rem; }
.btn-toggle-pass {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: var(--text-muted); padding: 0.25rem;
  z-index: 2; line-height: 1; transition: var(--ease);
}
.btn-toggle-pass:hover { color: var(--text); transform: translateY(-50%) scale(1.15); }

/* Checkboxes */
.checkboxes { gap: 0.55rem; }
.checkbox-label {
  display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer;
  font-size: 0.85rem; color: var(--text-dim); font-weight: 400;
  text-transform: none; letter-spacing: normal;
  transition: var(--ease);
}
.checkbox-label:hover { color: var(--text); }
.checkbox-label input[type="checkbox"] {
  width: 17px; height: 17px; min-width: 17px;
  background: var(--glass-2); border: 1px solid var(--border-hi);
  border-radius: 5px; padding: 0; cursor: pointer;
  margin-top: 2px; accent-color: var(--orange);
  transition: var(--ease);
}

/* Waiver */
.waiver-text {
  background: var(--glass-1);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1rem 1.1rem; font-size: 0.81rem; line-height: 1.7;
  color: var(--text-dim); margin-bottom: 1.25rem;
  max-height: 260px; overflow-y: auto;
}
.waiver-text h4 {
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text);
  margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
}
.waiver-text .waiver-clause { margin-bottom: 0.75rem; }
.waiver-text .clause-title {
  font-weight: 700; color: var(--orange-light); font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  display: block; margin-bottom: 0.2rem;
}

/* Signature */
.signature-section h3 {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 0.75rem;
}
.sig-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.9rem; }
.sig-tab {
  background: var(--glass-1); backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--text-muted); font-size: 0.78rem; font-weight: 600;
  padding: 0.38rem 1rem; cursor: pointer; transition: var(--spring);
}
.sig-tab.active {
  background: linear-gradient(160deg, var(--orange) 0%, var(--orange-light) 100%);
  border-color: transparent; color: #fff;
  box-shadow: var(--shadow-glow-orange), inset 0 1px 0 rgba(255,255,255,0.25);
}
.sig-tab:hover:not(.active) { background: var(--glass-2); color: var(--text); transform: scale(1.03); }
.sig-panel { display: none; }
.sig-panel.active { display: block; }
.canvas-wrap {
  position: relative; background: var(--glass-1);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; margin-bottom: 0.5rem; touch-action: none;
  box-shadow: inset 0 1px 0 var(--shine);
}
#signatureCanvas { display: block; width: 100%; height: 160px; cursor: crosshair; }
.canvas-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 0.84rem; pointer-events: none; transition: opacity 0.2s;
}

/* Summary panel */
.summary-body { display: flex; flex-direction: column; gap: 0.42rem; margin-bottom: 1rem; }
.summary-row { display: flex; gap: 0.5rem; font-size: 0.82rem; align-items: baseline; }
.s-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); font-weight: 700; min-width: 70px;
}
.s-val { color: var(--text); font-weight: 500; word-break: break-word; flex: 1; }
.summary-actions { display: flex; flex-direction: column; gap: 0.5rem; }

/* ──────────────────────────────────────────────────────────
   REPAIR VIEW — warm orange glass layer
   ────────────────────────────────────────────────────────── */
.repair-view-bg {
  background: var(--rv-bg);
  background-image: radial-gradient(ellipse 70% 50% at 30% 20%,
    rgba(255,107,0,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%,
    rgba(255,140,42,0.05) 0%, transparent 60%);
  background-attachment: fixed;
  max-width: 100% !important;
  padding: 0 0 4rem !important;
}

/* Repair topbar */
.rv-topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: rgba(15,8,2,0.75);
  backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
  border-bottom: 1px solid var(--rv-border);
  box-shadow: 0 1px 0 rgba(255,107,0,0.12), var(--shadow-sm);
  flex-wrap: wrap; position: sticky; top: 0; z-index: 50;
}
.rv-back { color: var(--orange) !important; font-weight: 600; }
.rv-back:hover { color: var(--text) !important; }
.rv-topbar-center { flex: 1; display: flex; align-items: center; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }
.rv-ticket-label {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text); text-transform: uppercase;
}
.rv-status-badge {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--orange);
  background: rgba(255,107,0,0.12); border: 1px solid var(--rv-border-hi);
  padding: 0.2rem 0.8rem; border-radius: var(--radius-pill);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  box-shadow: 0 0 12px rgba(255,107,0,0.18), inset 0 1px 0 var(--shine);
}
.rv-topbar-right { display: flex; gap: 0.5rem; align-items: center; }

/* 3-col grid */
.rv-grid {
  display: grid; grid-template-columns: 300px 1fr 280px;
  gap: 0; min-height: calc(100vh - 120px);
  max-width: 1600px; margin: 0 auto;
}
.rv-col-left {
  padding: 1.25rem;
  border-right: 1px solid var(--rv-border);
  display: flex; flex-direction: column; gap: 1rem;
}
.rv-col-mid { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.rv-col-right {
  padding: 1.25rem; border-left: 1px solid var(--rv-border);
  background: rgba(0,0,0,0.12);
}

/* Customer tile */
.rv-customer-tile {
  background: rgba(255,107,0,0.06);
  backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--rv-border-hi);
  border-radius: var(--radius); padding: 1.1rem;
  display: flex; align-items: center; gap: 1rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,107,0,0.15);
}
.rv-customer-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 800;
  color: #fff; flex-shrink: 0;
  box-shadow: var(--shadow-glow-orange), inset 0 1px 0 rgba(255,255,255,0.3);
  cursor: pointer;
  transition: var(--spring);
}
.rv-customer-avatar:hover {
  transform: scale(1.10);
  box-shadow: 0 0 32px rgba(255,107,0,0.55), 0 8px 20px rgba(255,107,0,0.3),
              inset 0 1px 0 rgba(255,255,255,0.35);
}
.rv-customer-name { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.18rem; letter-spacing: -0.01em; }
.rv-customer-primary { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-dim); margin-bottom: 0.45rem; }
.rv-contact-expand-btn {
  background: none; border: none; color: var(--orange);
  font-size: 0.76rem; font-weight: 600; cursor: pointer; padding: 0;
  transition: var(--ease);
}
.rv-contact-expand-btn:hover { color: var(--text); }

/* Contact panels */
.rv-contact-detail {
  background: var(--rv-surface); backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--rv-border); border-radius: var(--radius-sm);
  padding: 0.85rem; animation: fadeUp 0.22s ease;
  box-shadow: inset 0 1px 0 rgba(255,107,0,0.10);
}
.rv-contact-row { display: flex; gap: 0.6rem; font-size: 0.8rem; margin-bottom: 0.38rem; align-items: baseline; }
.rv-ct-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); min-width: 56px; }
.rv-contact-actions { margin-top: 0.75rem; }
.rv-contact-edit-form {
  background: var(--rv-surface); backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--rv-border-hi); border-radius: var(--radius-sm);
  padding: 0.9rem; animation: fadeUp 0.22s ease;
  box-shadow: inset 0 1px 0 rgba(255,107,0,0.12);
}
.rv-edit-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.75rem; }

/* Customer notes tile */
.rv-customer-notes-tile {
  background: var(--rv-surface);
  backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--rv-border); border-radius: var(--radius);
  padding: 1rem; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,107,0,0.08);
}
.rv-cust-notes-list { max-height: 140px; overflow-y: auto; margin-bottom: 0.6rem; }
.rv-cust-notes-composer textarea { font-size: 0.82rem; }

/* Device / Status / Balance tiles */
.rv-device-tile, .rv-status-tile, .rv-balance-tile {
  background: var(--rv-surface);
  backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--rv-border);
  border-radius: var(--radius); padding: 1rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,107,0,0.08);
}
.rv-tile-header {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.75rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rv-border);
}
.rv-tile-title {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted);
}
.rv-device-model { font-size: 0.95rem; font-weight: 700; color: var(--orange); margin-bottom: 0.6rem; letter-spacing: -0.01em; }
.rv-device-row { display: flex; gap: 0.5rem; font-size: 0.78rem; margin-bottom: 0.28rem; align-items: baseline; flex-wrap: wrap; }
.rv-dt-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); min-width: 74px; }

/* Status select */
.rv-status-select {
  background: var(--rv-surface2); backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--rv-border-hi); color: var(--orange);
  font-weight: 700; font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 0.6rem;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(255,107,0,0.12);
}
.rv-status-select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.15), inset 0 1px 0 rgba(255,107,0,0.15);
}
.rv-save-status {
  background: linear-gradient(160deg, var(--orange) 0%, var(--orange-light) 100%);
  color: #fff; font-weight: 700; width: 100%;
  border-radius: var(--radius-sm); padding: 0.5rem;
  font-size: 0.85rem; transition: var(--spring);
  box-shadow: var(--shadow-glow-orange), inset 0 1px 0 rgba(255,255,255,0.2);
}
.rv-save-status:hover {
  transform: scale(1.02) translateY(-1px);
  box-shadow: 0 0 32px rgba(255,107,0,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Balance tile */
.rv-balance-tile { border-color: rgba(255,107,0,0.20); }
.rv-balance-row { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-dim); padding: 0.22rem 0; }
.rv-bal-val { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text); }
.rv-paid { color: var(--success) !important; }
.rv-balance-due { border-top: 1px solid var(--rv-border); margin-top: 0.25rem; padding-top: 0.4rem !important; font-weight: 700; }
.rv-due { color: var(--orange-light) !important; font-size: 1rem !important; }

/* Password row */
.rv-password-row { display: flex; gap: 0.5rem; font-size: 0.78rem; align-items: baseline; }
.rv-password-val { font-family: var(--font-mono); letter-spacing: 0.1em; }
.rv-toggle-pass-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.85rem; padding: 0 0.2rem; transition: var(--ease);
}
.rv-toggle-pass-btn:hover { color: var(--text); transform: scale(1.15); }

/* rv-card (mid and right col cards) */
.rv-card {
  background: var(--rv-surface);
  backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--rv-border); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,107,0,0.08);
}
.rv-card-header {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1.1rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rv-border);
}
.rv-card-header h2 { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); flex: 1; }

/* Notes */
.rv-notes-composer { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rv-border); }
.rv-add-note-btn {
  background: linear-gradient(160deg, var(--orange) 0%, var(--orange-light) 100%);
  color: #fff; font-weight: 700; font-size: 0.85rem;
  padding: 0.52rem 1rem; border-radius: var(--radius-sm); width: 100%;
  box-shadow: var(--shadow-glow-orange), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: var(--spring);
}
.rv-add-note-btn:hover { transform: scale(1.02); box-shadow: 0 0 28px rgba(255,107,0,0.45), inset 0 1px 0 rgba(255,255,255,0.25); }
.rv-notes-list { display: flex; flex-direction: column; gap: 0.6rem; max-height: 420px; overflow-y: auto; }
.note-templates { font-size: 0.82rem; }
.note-item {
  background: var(--rv-surface2);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--rv-border); border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem; animation: slideIn 0.22s ease;
  box-shadow: inset 0 1px 0 rgba(255,107,0,0.07);
}
.note-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.32rem; }
.note-ts { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); }
.note-edited { font-size: 0.62rem; font-family: var(--font-mono); background: rgba(255,214,10,0.10); color: var(--warning); border: 1px solid rgba(255,214,10,0.22); padding: 0.08rem 0.4rem; border-radius: 3px; }
.note-text { font-size: 0.83rem; color: var(--text); line-height: 1.5; word-break: break-word; }
.note-actions { display: flex; gap: 0.4rem; margin-top: 0.45rem; }
.note-btn {
  background: var(--glass-1); border: 1px solid var(--border);
  border-radius: var(--radius-xs); color: var(--text-muted);
  font-size: 0.7rem; font-weight: 600; padding: 0.14rem 0.55rem; cursor: pointer;
  transition: var(--spring); font-family: var(--font-body);
}
.note-btn:hover { color: var(--text); border-color: var(--border-hi); transform: scale(1.04); }
.note-btn.edit-btn:hover { color: var(--orange); border-color: var(--orange); }
.note-btn.save-btn { color: var(--success); border-color: var(--success); }
.note-edit-input {
  width: 100%; margin-top: 0.4rem; font-size: 0.84rem; padding: 0.45rem 0.65rem;
  background: var(--rv-surface2); border: 1px solid var(--orange);
  border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body);
  outline: none; resize: vertical; min-height: 60px;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.12);
}

/* Scan */
.rv-scan-card { border-color: rgba(255,107,0,0.20); }
.scan-live-badge {
  font-size: 0.58rem; font-family: var(--font-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: rgba(255,107,0,0.12); color: var(--orange);
  border: 1px solid rgba(255,107,0,0.28); padding: 0.1rem 0.55rem;
  border-radius: var(--radius-pill); animation: scan-pulse 2.2s ease infinite;
}
@keyframes scan-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,107,0,0); }
  50%      { box-shadow: 0 0 0 4px rgba(255,107,0,0.15); }
}
.rv-scan-input-wrap { margin-bottom: 1rem; }
.rv-scan-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); display: block; margin-bottom: 0.35rem; }
.rv-scan-row { display: flex; gap: 0.5rem; }
.rv-scan-input {
  flex: 1; background: var(--rv-surface2);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border: 2px solid var(--rv-border-hi); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-mono); font-size: 1rem;
  padding: 0.65rem 0.9rem; outline: none; transition: var(--ease);
  box-shadow: inset 0 1px 0 rgba(255,107,0,0.08);
}
.rv-scan-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255,107,0,0.15), inset 0 1px 0 rgba(255,107,0,0.10);
}
.rv-scan-input.scan-flash {
  background: rgba(255,107,0,0.12); border-color: var(--orange);
  animation: scanFlash 0.5s ease;
}
@keyframes scanFlash { 0% { background: rgba(255,107,0,0.30); border-color: var(--orange); } 100% { background: var(--rv-surface2); } }
.btn-scan-go {
  background: linear-gradient(160deg, var(--orange) 0%, var(--orange-light) 100%);
  color: #fff; font-weight: 800; font-size: 1rem; padding: 0 1.3rem;
  border-radius: var(--radius-sm); min-height: 48px; white-space: nowrap;
  box-shadow: var(--shadow-glow-orange), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: var(--spring);
}
.btn-scan-go:hover { transform: scale(1.04); box-shadow: 0 0 28px rgba(255,107,0,0.50), inset 0 1px 0 rgba(255,255,255,0.25); }
.rv-scan-pending {
  background: rgba(255,107,0,0.07);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--rv-border-hi); border-radius: var(--radius-sm);
  padding: 0.85rem; margin-bottom: 0.75rem; animation: fadeUp 0.2s ease;
  box-shadow: inset 0 1px 0 rgba(255,107,0,0.12);
}
.rv-pending-inner { font-size: 0.87rem; color: var(--text); margin-bottom: 0.75rem; }
.rv-pending-inner strong { color: var(--orange); }
.rv-pending-inner .rv-pend-stock-ok  { color: var(--success); font-weight: 700; }
.rv-pending-inner .rv-pend-stock-low { color: var(--warning); font-weight: 700; }
.rv-pending-inner .rv-pend-stock-out { color: var(--danger); font-weight: 700; }
.rv-pending-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* Scan table */
.rv-scan-table-wrap { overflow-x: auto; }
.rv-scan-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.rv-scan-table th { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700; text-align: left; padding: 0 0.5rem 0.6rem; border-bottom: 1px solid var(--rv-border); }
.rv-scan-table td { padding: 0.52rem 0.5rem; border-bottom: 1px solid var(--rv-border); color: var(--text-dim); vertical-align: middle; }
.rv-scan-table td:first-child { color: var(--text); font-weight: 600; }
.rv-scan-table td:nth-child(2) { font-family: var(--font-mono); font-size: 0.7rem; }
.rv-scan-table td:nth-child(3) { text-align: center; font-weight: 700; color: var(--text); }
.rv-scan-empty-row td { text-align: center; color: var(--text-muted); font-style: italic; padding: 1.25rem 0; border-bottom: none; }
.btn-remove-scan { background: rgba(255,69,58,0.12); border: 1px solid rgba(255,69,58,0.25); border-radius: var(--radius-xs); color: var(--danger); font-size: 0.72rem; padding: 0.18rem 0.55rem; cursor: pointer; transition: var(--spring); }
.btn-remove-scan:hover { background: rgba(255,69,58,0.22); transform: scale(1.08); }
.th-installed { color: var(--text-muted); font-size: 0.62rem; }
.installed-check { font-size: 0.85rem; cursor: pointer; color: var(--text-muted); background: none; border: none; transition: var(--spring); }
.installed-check:hover { transform: scale(1.2); }
.installed-check.checked { color: var(--success); filter: drop-shadow(0 0 4px var(--success)); }
@keyframes rowFlash { 0% { background: rgba(255,107,0,0.18); } 100% { background: transparent; } }
.rv-row-new { animation: rowFlash 1s ease; }

/* Payment history */
.ph-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.ph-table th { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700; text-align: left; padding: 0 0.35rem 0.5rem; border-bottom: 1px solid var(--rv-border); }
.ph-table td { padding: 0.4rem 0.35rem; border-bottom: 1px solid var(--rv-border); color: var(--text-dim); font-size: 0.75rem; }
.ph-table tr:last-child td { border-bottom: none; }
.ph-empty { font-size: 0.78rem; color: var(--text-muted); font-style: italic; padding: 0.5rem 0; }
.ph-type-badge { font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1rem 0.4rem; border-radius: 3px; display: inline-block; }
.ph-type-deposit { background: rgba(0,122,255,0.12); color: #70B9FF; border: 1px solid rgba(0,122,255,0.25); }
.ph-type-partial  { background: rgba(255,214,10,0.10); color: var(--warning); border: 1px solid rgba(255,214,10,0.22); }
.ph-type-final    { background: rgba(48,209,88,0.10); color: var(--success); border: 1px solid rgba(48,209,88,0.22); }
.ph-balance-row { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; padding: 0.55rem 0.65rem; border-radius: var(--radius-sm); background: var(--rv-surface2); border: 1px solid var(--rv-border-hi); box-shadow: inset 0 1px 0 rgba(255,107,0,0.08); }
.ph-balance-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.ph-balance-amount { font-family: var(--font-mono); font-weight: 800; font-size: 0.9rem; }
.ph-balance-amount.owed { color: var(--orange-light); }
.ph-balance-amount.zero { color: var(--success); }

/* ──────────────────────────────────────────────────────────
   MODAL OVERLAYS — deep glass
   ────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-overlay[style*="display: flex"], .modal-overlay[style*="display:flex"] {
  animation: overlayIn 0.25s ease;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
  background: var(--glass-4);
  backdrop-filter: var(--blur-xl); -webkit-backdrop-filter: var(--blur-xl);
  border: 1px solid var(--border-hi);
  border-radius: 22px; width: 100%; max-width: 580px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--shine-strong);
  animation: modalSpring 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}
@keyframes modalSpring {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.modal-box-receipt { max-width: 460px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem 0;
}
.modal-title-wrap { display: flex; align-items: center; gap: 0.7rem; }
.modal-icon { font-size: 1.25rem; filter: drop-shadow(0 0 6px rgba(255,255,255,0.2)); }
.modal-title-wrap h2 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.modal-close {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: var(--glass-2); color: var(--text-dim); font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: var(--spring); backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  box-shadow: inset 0 1px 0 var(--shine);
}
.modal-close:hover { background: var(--glass-3); color: var(--text); transform: scale(1.12) rotate(90deg); }

/* Payment modal */
.payment-body { padding: 1rem 1.5rem; }
.payment-customer-strip { background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; margin-bottom: 1rem; display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-dim); box-shadow: inset 0 1px 0 var(--shine); }
.payment-customer-strip strong { color: var(--text); }
.payment-section { margin-bottom: 1rem; }
.payment-section-header { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.6rem; }
.pmt-inv-search-wrap { position: relative; flex: 1; max-width: 260px; }
.pmt-inv-search { font-size: 0.78rem !important; padding: 0.35rem 0.65rem !important; }
.pmt-inv-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #0f1422; backdrop-filter: var(--blur-xl); -webkit-backdrop-filter: var(--blur-xl); border: 1px solid rgba(0, 180, 255, 0.45); border-radius: var(--radius-sm); box-shadow: 0 16px 44px rgba(0,0,0,0.9), 0 4px 12px rgba(0,0,0,0.6); z-index: 350; max-height: 220px; overflow-y: auto; }
.pmt-inv-item { padding: 0.55rem 0.85rem; font-size: 0.82rem; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.07); color: #e2eaf4; transition: var(--ease); }
.pmt-inv-item:hover { background: rgba(0, 122, 255, 0.25); color: #ffffff; }
.pmt-inv-item:last-child { border-bottom: none; }
.line-items-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.line-item-empty { font-size: 0.8rem; color: var(--text-muted); text-align: center; padding: 0.75rem 0; }
.line-item-row { display: grid; grid-template-columns: 1fr 100px 28px; gap: 0.5rem; align-items: center; }
.li-desc, .li-amount { font-size: 0.84rem !important; padding: 0.42rem 0.65rem !important; }
.btn-add-line { font-size: 0.76rem; font-weight: 700; color: var(--orange); background: rgba(255,107,0,0.10); border: 1px solid rgba(255,107,0,0.28); border-radius: var(--radius-pill); padding: 0.28rem 0.8rem; cursor: pointer; transition: var(--spring); }
.btn-add-line:hover { background: rgba(255,107,0,0.18); transform: scale(1.04); }
.btn-remove-line { background: rgba(255,69,58,0.10); border: 1px solid rgba(255,69,58,0.22); border-radius: var(--radius-xs); color: var(--danger); font-size: 0.78rem; padding: 0.22rem 0.45rem; cursor: pointer; transition: var(--spring); }
.btn-remove-line:hover { background: rgba(255,69,58,0.20); transform: scale(1.08); }
.payment-totals { background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; margin-bottom: 0.75rem; box-shadow: inset 0 1px 0 var(--shine); }
.totals-row { display: flex; justify-content: space-between; font-size: 0.84rem; padding: 0.2rem 0; color: var(--text-dim); }
.tax-row { font-size: 0.76rem; color: var(--text-muted); }
.totals-divider { height: 1px; background: var(--border); margin: 0.4rem 0; }
.grand-total { font-weight: 800; font-size: 0.95rem !important; color: var(--text) !important; }
.grand-total span:last-child { font-family: var(--font-mono); color: var(--orange) !important; }
.deposits-summary-row span:last-child { color: var(--success); font-family: var(--font-mono); font-weight: 700; }
.balance-outstanding { font-weight: 700; }
.balance-outstanding span:last-child { font-family: var(--font-mono); color: var(--orange-light); }
.balance-zero span:last-child { color: var(--success) !important; }
.modal-ledger-list { display: flex; flex-direction: column; gap: 0.3rem; }
.modal-ledger-row { display: flex; gap: 0.75rem; font-size: 0.76rem; align-items: center; padding: 0.28rem 0; border-bottom: 1px solid var(--border); }
.modal-ledger-row:last-child { border-bottom: none; }
.ml-ts { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); flex-shrink: 0; }
.ml-method { color: var(--text-dim); }
.ml-amt { font-family: var(--font-mono); font-weight: 700; color: var(--text); margin-left: auto; }
.new-payment-form { border-top: 1px solid var(--border); padding-top: 0.75rem; }
.new-payment-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem; margin-bottom: 0.75rem; }
.new-payment-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.btn-deposit-rec { background: var(--glass-2); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); border: 1px solid var(--border-hi); border-radius: var(--radius-pill); color: var(--text-dim); font-size: 0.84rem; font-weight: 600; padding: 0.52rem 1.1rem; cursor: pointer; transition: var(--spring); box-shadow: inset 0 1px 0 var(--shine); }
.btn-deposit-rec:hover { background: var(--glass-3); color: var(--text); transform: scale(1.03); }
.btn-pay-full { padding: 0.58rem 1.1rem; font-size: 0.85rem; border-radius: var(--radius-pill); }

/* Receipt */
.receipt-body { padding: 1.25rem; font-size: 0.88rem; }
.receipt-shop-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; color: var(--orange); text-align: center; }
.receipt-meta { text-align: center; color: var(--text-muted); font-size: 0.72rem; font-family: var(--font-mono); margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--border-hi); }
.receipt-section-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0.85rem 0 0.4rem; }
.receipt-line { display: flex; justify-content: space-between; padding: 0.2rem 0; color: var(--text-dim); }
.receipt-line span:last-child { font-family: var(--font-mono); }
.receipt-divider { height: 1px; background: var(--border); margin: 0.5rem 0; }
.receipt-total-line { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 800; color: var(--text); padding: 0.3rem 0; }
.receipt-total-line span:last-child { font-family: var(--font-mono); color: var(--orange); }
.receipt-paid-stamp { text-align: center; margin-top: 1rem; padding: 0.5rem; background: rgba(48,209,88,0.10); border: 1px solid rgba(48,209,88,0.28); border-radius: var(--radius-sm); color: var(--success); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 0 16px rgba(48,209,88,0.20); }
.receipt-actions { display: flex; gap: 0.6rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
.receipt-actions button { flex: 1; }

/* Toast */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--glass-4);
  backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-hi); border-radius: var(--radius-pill);
  padding: 0.65rem 1.5rem; font-size: 0.86rem; font-weight: 600;
  color: var(--text); z-index: 999; opacity: 0; pointer-events: none;
  transition: all 0.32s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--shine-strong);
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { border-color: rgba(48,209,88,0.5); color: var(--success); box-shadow: var(--shadow-lg), 0 0 24px rgba(48,209,88,0.25), inset 0 1px 0 var(--shine); }
.toast.error   { border-color: rgba(255,69,58,0.5);  color: var(--danger);  box-shadow: var(--shadow-lg), 0 0 24px rgba(255,69,58,0.25),  inset 0 1px 0 var(--shine); }
.toast.info    { border-color: rgba(0,122,255,0.5);  color: #70B9FF;        box-shadow: var(--shadow-lg), 0 0 24px rgba(0,122,255,0.25),   inset 0 1px 0 var(--shine); }

/* ──────────────────────────────────────────────────────────
   LABEL PRINT
   ────────────────────────────────────────────────────────── */
#labelPrintArea { display: none; }
.picked-up-bar { display: flex; justify-content: flex-end; margin-bottom: 0.75rem; }

/* ──────────────────────────────────────────────────────────
   PRINT MEDIA
   ────────────────────────────────────────────────────────── */
@media print {
  body > *:not(#receiptModal):not(#labelPrintArea) { display: none !important; }
  #receiptModal { position: static !important; background: white !important; backdrop-filter: none !important; }
  .modal-box { box-shadow: none !important; border: none !important; max-height: none !important; backdrop-filter: none !important; }
  .receipt-actions { display: none !important; }
  body.print-label #receiptModal { display: none !important; }
  body.print-label #labelPrintArea {
    display: flex !important; flex-direction: column;
    width: 4in; height: 6in; padding: 0.28in 0.3in;
    font-family: 'Barlow', 'Inter', sans-serif; color: #111; background: #fff;
    box-sizing: border-box;
  }

  /* ── Header: logo + shop phone ── */
  .label-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.15in; padding-bottom: 0.14in; border-bottom: 2.5pt solid #111;
  }
  .label-logo-wrap { display: flex; align-items: center; gap: 0.1in; min-width: 0; }
  .label-logo-img { height: 0.55in; width: auto; max-width: 1.6in; object-fit: contain; }
  .label-logo-fallback {
    height: 0.5in; width: 0.5in; border-radius: 8pt; background: #111; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 20pt; flex-shrink: 0;
  }
  .label-shop-name { font-size: 15pt; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; }
  .label-shop-phone { font-size: 11pt; font-weight: 700; color: #333; white-space: nowrap; font-family: var(--font-mono, monospace); }

  /* ── Ticket number: the big, unmissable badge ── */
  .label-ticket-badge {
    margin-top: 0.16in; padding: 0.12in 0; text-align: center;
    border: 2.5pt solid #111; border-radius: 10pt;
  }
  .label-ticket-eyebrow { font-size: 8.5pt; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #666; margin-bottom: 1pt; }
  .label-ticket-num { font-size: 34pt; font-weight: 800; letter-spacing: 0.01em; color: #111; line-height: 1; }

  /* ── Field rows: device / customer / phone ── */
  .label-fields { margin-top: 0.2in; }
  .label-field { padding: 0.09in 0; border-bottom: 1pt solid #ddd; }
  .label-field:last-child { border-bottom: none; }
  .label-field-eyebrow { font-size: 8pt; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #777; margin-bottom: 1pt; }
  .label-field-value { font-size: 15pt; font-weight: 700; color: #111; line-height: 1.2; word-break: break-word; }

  /* ── Passcode: boxed so it can't be missed ── */
  .label-passcode-box {
    margin-top: 0.2in; padding: 0.13in 0.15in; text-align: center;
    border: 2pt dashed #111; border-radius: 8pt; background: #f7f7f7;
  }
  .label-passcode-eyebrow { font-size: 8.5pt; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #555; margin-bottom: 3pt; }
  .label-passcode-value { font-size: 22pt; font-weight: 800; letter-spacing: 0.12em; font-family: var(--font-mono, monospace); color: #111; }
  .label-passcode-value.declined { font-size: 12pt; font-weight: 700; letter-spacing: normal; font-family: inherit; color: #777; font-style: italic; }

  /* ── Footer: drop-off date/time, pinned to bottom center ── */
  .label-footer { margin-top: auto; padding-top: 0.15in; border-top: 1pt solid #ddd; text-align: center; }
  .label-footer-eyebrow { font-size: 7.5pt; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #888; }
  .label-footer-value { font-size: 10.5pt; font-weight: 700; color: #333; margin-top: 1pt; }
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .rv-grid { grid-template-columns: 260px 1fr; }
  .rv-col-right { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--rv-border); }
}
@media (max-width: 900px) {
  .form-layout { grid-template-columns: 1fr; }
  .card-sticky { position: static; }
  .rv-grid { grid-template-columns: 1fr; }
  .rv-col-left { border-right: none; border-bottom: 1px solid var(--rv-border); }
}
@media (max-width: 600px) {
  .header-inner { padding: 0 1rem; }
  .brand-tagline { display: none; }
  .view { padding: 1rem 0.9rem 5rem; }
  .form-grid { grid-template-columns: 1fr; }
  .field-full { grid-column: 1; }
  .tickets-grid { grid-template-columns: 1fr; }
  .new-payment-grid { grid-template-columns: 1fr; }
  .new-payment-actions { flex-direction: column; }
  .rv-topbar { gap: 0.5rem; }
  .rv-topbar-right { gap: 0.35rem; }
  .rv-topbar-right .btn-label-print,
  .rv-topbar-right .btn-edit-ticket { display: none; }
  .line-item-row { grid-template-columns: 1fr 75px 28px; }
}

/* ──────────────────────────────────────────────────────────
   BOTTOM NAV — glass floating pill
   ────────────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 200;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.bottom-nav-btn {
  display: flex; align-items: center; gap: 0.55rem;
  background: var(--glass-3);
  backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-hi); border-radius: var(--radius-pill);
  padding: 0.58rem 1.2rem 0.58rem 0.9rem;
  color: var(--text-dim); font-size: 0.84rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: var(--spring);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--shine);
}
.bottom-nav-btn:hover {
  background: var(--glass-4); color: var(--text);
  border-color: rgba(255,107,0,0.35);
  box-shadow: var(--shadow-glow-orange), var(--shadow-md), inset 0 1px 0 var(--shine-strong);
  transform: scale(1.05) translateY(-2px);
}
.bnb-icon { font-size: 1.05rem; }
.bnb-label { letter-spacing: -0.01em; }

/* ──────────────────────────────────────────────────────────
   INVENTORY PAGE
   ────────────────────────────────────────────────────────── */
.inv-view { padding-bottom: 5rem; }
.inv-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.inv-title-wrap { display: flex; align-items: center; gap: 0.75rem; flex: 1; }
.inv-page-icon { font-size: 1.8rem; filter: drop-shadow(0 0 8px rgba(255,107,0,0.3)); }
.inv-page-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.2rem; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.6) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.inv-page-sub { font-size: 0.72rem; color: var(--text-muted); font-family: var(--font-mono); }
.inv-toolbar { margin-bottom: 1rem; }
.inv-main-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.25rem; }
.inv-main-tab {
  background: var(--glass-1); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--text-muted); font-size: 0.8rem; font-weight: 600;
  padding: 0.45rem 1.1rem; cursor: pointer; transition: var(--spring);
  box-shadow: inset 0 1px 0 var(--shine);
}
.inv-main-tab.active {
  background: linear-gradient(160deg, var(--orange) 0%, var(--orange-light) 100%);
  border-color: transparent; color: #fff;
  box-shadow: var(--shadow-glow-orange), inset 0 1px 0 rgba(255,255,255,0.2);
}
.inv-main-tab:hover:not(.active) { background: var(--glass-2); color: var(--text); transform: scale(1.03); }
.inv-tab-bar { display: flex; gap: 0.4rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.inv-tab-btn {
  background: var(--glass-1); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--text-muted); font-size: 0.78rem; font-weight: 600;
  padding: 0.4rem 0.95rem; cursor: pointer; transition: var(--spring);
  box-shadow: inset 0 1px 0 var(--shine);
}
.inv-tab-btn.active {
  background: linear-gradient(160deg, var(--orange) 0%, var(--orange-light) 100%);
  border-color: transparent; color: #fff;
  box-shadow: var(--shadow-glow-orange), inset 0 1px 0 rgba(255,255,255,0.2);
}
.inv-tab-btn:hover:not(.active) { background: var(--glass-2); color: var(--text); transform: scale(1.03); }

/* Inventory table */
.inv-table-wrap {
  background: var(--glass-1);
  backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-md), inset 0 1px 0 var(--shine);
}
.inv-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.inv-table thead { background: var(--glass-2); border-bottom: 1px solid rgba(255,107,0,0.28); }
.inv-table th { padding: 0.7rem 0.9rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); text-align: left; white-space: nowrap; }
.inv-table tbody tr { border-bottom: 1px solid var(--border); transition: var(--ease); }
.inv-table tbody tr:last-child { border-bottom: none; }
.inv-table tbody tr:hover { background: var(--glass-2); }
.inv-table td { padding: 0.68rem 0.9rem; color: var(--text); vertical-align: middle; }
.inv-name-cell  { font-weight: 600; max-width: 220px; }
.inv-sku-cell   { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim); }
.inv-price-cell { font-family: var(--font-mono); font-weight: 700; color: var(--success); }
.inv-notes-cell { font-size: 0.78rem; color: var(--text-muted); max-width: 200px; }
.inv-actions-cell { white-space: nowrap; text-align: right; width: 70px; }
.inv-cat-badge { display: inline-flex; align-items: center; gap: 0.28rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); white-space: nowrap; backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); }
.inv-cat-service { background: rgba(0,122,255,0.12); color: #70B9FF; border: 1px solid rgba(0,122,255,0.25); }
.inv-cat-part    { background: rgba(255,107,0,0.10); color: var(--orange-light); border: 1px solid rgba(255,107,0,0.22); }
.inv-cat-device  { background: rgba(48,209,88,0.10); color: var(--success); border: 1px solid rgba(48,209,88,0.25); }
.inv-stock-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; padding: 0.18rem 0.55rem; border-radius: var(--radius-xs); white-space: nowrap; }
.inv-stock-ok  { background: rgba(48,209,88,0.10);  color: var(--success);       border: 1px solid rgba(48,209,88,0.28); }
.inv-stock-low { background: rgba(255,214,10,0.10); color: var(--warning);        border: 1px solid rgba(255,214,10,0.28); }
.inv-stock-out { background: rgba(255,69,58,0.10);  color: var(--danger);         border: 1px solid rgba(255,69,58,0.25); }
.inv-stock-infinite { font-size: 0.78rem; color: var(--blue); font-family: var(--font-mono); font-weight: 700; }
.btn-inv-edit, .btn-inv-delete {
  background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-xs);
  color: var(--text-muted); cursor: pointer; font-size: 0.78rem;
  padding: 0.2rem 0.45rem; transition: var(--spring); margin-left: 0.25rem;
  box-shadow: inset 0 1px 0 var(--shine);
}
.btn-inv-edit:hover   { color: var(--orange); border-color: rgba(255,107,0,0.4); background: rgba(255,107,0,0.08); transform: scale(1.08); }
.btn-inv-delete:hover { color: var(--danger);  border-color: rgba(255,69,58,0.4);  background: rgba(255,69,58,0.08); transform: scale(1.08); }
.inv-empty-msg { padding: 3.5rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.9rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.inv-empty-icon { font-size: 2.8rem; filter: drop-shadow(0 0 16px rgba(255,107,0,0.2)); margin-bottom: 0.25rem; }

/* Inventory modal */
.inv-modal-box { max-width: 520px; width: 95%; }
.inv-modal-body { padding: 1.25rem 1.5rem; }
.inv-modal-footer { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0.9rem 1.5rem 1.25rem; border-top: 1px solid var(--border); }
.inv-infinite-field { align-items: center; flex-direction: row !important; justify-content: space-between; }
.inv-infinite-label { display: flex; flex-direction: column; gap: 0.15rem; }
.inv-infinite-hint { font-size: 0.64rem; color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: normal; }
.inv-toggle-wrap { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.inv-toggle-wrap input[type="checkbox"] { display: none; }
.inv-toggle-slider { width: 40px; height: 24px; background: var(--glass-2); border: 1px solid var(--border-hi); border-radius: var(--radius-pill); position: relative; transition: var(--spring); cursor: pointer; box-shadow: inset 0 1px 0 var(--shine); }
.inv-toggle-slider::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.6); top: 2px; left: 2px; transition: var(--spring); box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
input#invFieldInfinite:checked ~ .inv-toggle-slider { background: linear-gradient(160deg, var(--orange), var(--orange-light)); border-color: transparent; box-shadow: var(--shadow-glow-orange); }
input#invFieldInfinite:checked ~ .inv-toggle-slider::after { transform: translateX(16px); background: #fff; }
.inv-toggle-text { font-size: 0.72rem; color: var(--text-muted); font-family: var(--font-mono); }

/* ── SKU clickable ── */
.inv-sku-clickable { cursor: pointer; position: relative; transition: color var(--ease); }
.inv-sku-clickable:hover { color: var(--orange-light); }
.inv-sku-clickable::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: var(--orange-light); transition: width 0.2s ease; }
.inv-sku-clickable:hover::after { width: 100%; }

/* ── PO styles ── */
.po-toolbar { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.po-filter-wrap select { min-width: 180px; }
.po-list { display: flex; flex-direction: column; gap: 0.75rem; }
.po-empty-msg { text-align: center; color: var(--text-muted); padding: 3rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.po-card { background: var(--glass-1); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; cursor: pointer; transition: var(--spring); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--shine); }
.po-card:hover { background: var(--glass-2); border-color: rgba(255,107,0,0.25); transform: translateY(-2px); box-shadow: var(--shadow-md), var(--shadow-glow-orange), inset 0 1px 0 var(--shine-strong); }
.po-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
.po-card-supplier { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.po-card-num { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); background: var(--glass-2); padding: 0.18rem 0.55rem; border-radius: var(--radius-pill); border: 1px solid var(--border); }
.po-card-meta { font-size: 0.76rem; color: var(--text-muted); font-family: var(--font-mono); margin-bottom: 0.4rem; }
.po-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.po-status-pill { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); }
.po-status-Ordered            { background: rgba(0,122,255,0.12); color: #70B9FF; border: 1px solid rgba(0,122,255,0.25); }
.po-status-In\ Progress       { background: rgba(255,214,10,0.12); color: var(--warning); border: 1px solid rgba(255,214,10,0.25); }
.po-status-Closed---Completed { background: rgba(48,209,88,0.12); color: var(--success); border: 1px solid rgba(48,209,88,0.25); }
.po-status-Closed---Incomplete{ background: rgba(255,69,58,0.10);  color: var(--danger);  border: 1px solid rgba(255,69,58,0.22); }

/* PO detail view */
.po-detail-view { padding: 0 !important; max-width: 100% !important; }
.po-detail-header { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; background: var(--glass-1); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); }
.po-detail-title-wrap { flex: 1; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.po-detail-title-wrap h1 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.po-status-badge { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.22rem 0.75rem; border-radius: var(--radius-pill); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); }
.po-detail-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.po-detail-grid { display: grid; grid-template-columns: 320px 1fr; gap: 1.5rem; padding: 1.5rem; max-width: 1400px; margin: 0 auto; }
.po-info-card { background: var(--glass-1); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm), inset 0 1px 0 var(--shine); }
.po-info-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); }
.po-info-header h2 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); flex: 1; }
.po-info-row { display: flex; gap: 0.5rem; font-size: 0.8rem; margin-bottom: 0.32rem; align-items: baseline; }
.po-info-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); min-width: 70px; }
.po-ev-row { display: flex; gap: 0.5rem; font-size: 0.8rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border); align-items: center; }
.po-ev-row:last-child { border-bottom: none; }
.po-ev-name { flex: 1; color: var(--text); }
.po-ev-exp  { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.74rem; }
.po-ev-rec  { font-family: var(--font-mono); font-weight: 700; color: var(--success); font-size: 0.74rem; }
.po-audit-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 0.28rem 0; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.po-audit-row:last-child { border-bottom: none; }
.po-audit-row span:last-child { font-family: var(--font-mono); color: var(--text); }
.po-scanner-card { background: rgba(255,107,0,0.06); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); border: 1px solid var(--rv-border-hi); border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,107,0,0.10); }
.po-items-table-wrap { overflow-x: auto; }
.po-items-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.po-items-table th { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700; padding: 0.5rem 0.65rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.po-items-table td { padding: 0.52rem 0.65rem; border-bottom: 1px solid var(--border); color: var(--text-dim); vertical-align: middle; }
.po-items-table tbody tr:last-child td { border-bottom: none; }
.po-items-table tbody tr:hover { background: var(--glass-1); }
.po-item-qty-rec { font-family: var(--font-mono); font-weight: 700; color: var(--success); }
.po-item-status-done  { color: var(--success); font-size: 0.72rem; font-weight: 700; }
.po-item-status-part  { color: var(--warning);  font-size: 0.72rem; font-weight: 700; }
.po-item-status-none  { color: var(--text-muted); font-size: 0.72rem; }
.po-scan-pending { background: rgba(255,107,0,0.07); border: 1px solid var(--rv-border-hi); border-radius: var(--radius-sm); padding: 0.85rem; margin-bottom: 0.75rem; animation: fadeUp 0.2s ease; }
.po-modal-box { max-width: 560px; width: 95%; }
.po-supplier-wrap { position: relative; }
.po-supplier-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #0f1422; backdrop-filter: var(--blur-xl); -webkit-backdrop-filter: var(--blur-xl); border: 1px solid rgba(0, 180, 255, 0.45); border-radius: var(--radius-sm); box-shadow: 0 16px 44px rgba(0,0,0,0.9), 0 4px 12px rgba(0,0,0,0.6); z-index: 350; max-height: 200px; overflow-y: auto; }
.po-supplier-item { padding: 0.55rem 0.85rem; font-size: 0.82rem; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.07); color: #e2eaf4; transition: var(--ease); }
.po-supplier-item:hover { background: rgba(0, 122, 255, 0.25); color: #ffffff; }
.po-item-search-wrap { position: relative; margin-bottom: 0.75rem; }
.po-item-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #0f1422; backdrop-filter: var(--blur-xl); -webkit-backdrop-filter: var(--blur-xl); border: 1px solid rgba(0, 180, 255, 0.45); border-radius: var(--radius-sm); box-shadow: 0 16px 44px rgba(0,0,0,0.9), 0 4px 12px rgba(0,0,0,0.6); z-index: 350; max-height: 220px; overflow-y: auto; }
.po-item-option { padding: 0.55rem 0.85rem; font-size: 0.82rem; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.07); color: #e2eaf4; transition: var(--ease); }
.po-item-option:hover { background: rgba(0, 122, 255, 0.25); color: #ffffff; }
.po-selected-items { display: flex; flex-direction: column; gap: 0.4rem; }
.po-no-items { font-size: 0.78rem; color: var(--text-muted); text-align: center; padding: 0.75rem; }
.po-selected-item { display: flex; align-items: center; gap: 0.6rem; background: var(--glass-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.45rem 0.65rem; box-shadow: inset 0 1px 0 var(--shine); }
.po-sel-name { flex: 1; font-size: 0.82rem; color: var(--text); }
.po-sel-qty { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.po-sel-qty input { width: 55px !important; padding: 0.3rem 0.5rem !important; text-align: center; }
.po-sel-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; padding: 0.1rem 0.25rem; transition: var(--spring); }
.po-sel-remove:hover { color: var(--danger); transform: scale(1.2); }

/* ──────────────────────────────────────────────────────────
   PHONE SEARCH & AUTO-FILL
   ────────────────────────────────────────────────────────── */
.phone-search-wrap { position: relative; }
.phone-search-wrap input { width: 100%; }
.customer-phone-field { position: relative; }
.phone-autofill-badge {
  display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem;
  background: rgba(48,209,88,0.09);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid rgba(48,209,88,0.28); border-radius: var(--radius-sm);
  padding: 0.26rem 0.65rem; font-size: 0.72rem; font-weight: 600;
  color: var(--success); font-family: var(--font-mono); animation: fadeUp 0.18s ease;
  box-shadow: inset 0 1px 0 rgba(48,209,88,0.12);
}
.pab-icon { font-size: 0.85rem; }
.pab-text { flex: 1; }
.pab-clear { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.76rem; padding: 0 0.15rem; line-height: 1; transition: var(--ease); }
.pab-clear:hover { color: var(--danger); transform: scale(1.15); }
.phone-search-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #0f1422;
  backdrop-filter: var(--blur-xl); -webkit-backdrop-filter: var(--blur-xl);
  border: 1px solid rgba(0, 180, 255, 0.45); border-radius: var(--radius-sm);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.6); z-index: 350;
  overflow: hidden; max-height: 240px; overflow-y: auto;
  animation: fadeUp 0.15s ease;
}
.psd-item { padding: 0.6rem 0.95rem; font-size: 0.84rem; color: #e2eaf4; font-family: var(--font-mono); cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.08); transition: var(--ease); }
.psd-item:last-child { border-bottom: none; }
.psd-item:hover { background: rgba(0, 122, 255, 0.25); color: #ffffff; }

/* ──────────────────────────────────────────────────────────
   DEVICE MODEL SMART SEARCH & AUTOCOMPLETE
   ────────────────────────────────────────────────────────── */
.device-search-wrap { position: relative; width: 100%; }
.device-search-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #0f1422;
  backdrop-filter: var(--blur-xl, blur(20px)); -webkit-backdrop-filter: var(--blur-xl, blur(20px));
  border: 1px solid rgba(0, 180, 255, 0.45);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.6);
  z-index: 350;
  overflow: hidden; max-height: 290px; overflow-y: auto;
  animation: fadeUp 0.15s ease;
}
.dsd-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.9rem; font-size: 0.84rem; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: var(--ease, 0.15s ease);
}
.dsd-item:last-child { border-bottom: none; }
.dsd-item:hover, .dsd-item.active {
  background: rgba(0, 122, 255, 0.25);
}
.dsd-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.dsd-name-row { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.dsd-brand { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--orange, #ff6b00); letter-spacing: 0.05em; }
.dsd-name { font-weight: 600; color: #ffffff; }
.dsd-models { font-family: var(--font-mono, monospace); font-size: 0.72rem; color: #a4b8ce; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsd-models span.matched { color: var(--cyan, #00d2ff); font-weight: 700; background: rgba(0, 210, 255, 0.18); padding: 0.05rem 0.25rem; border-radius: 3px; }
.dsd-meta { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; margin-left: 0.5rem; }
.dsd-category-badge {
  font-size: 0.68rem; padding: 0.15rem 0.45rem; border-radius: 4px;
  background: rgba(255,255,255,0.12); color: #d0e0f2;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────
   ACTIVITY LOG (audit trail in repair view)
   ────────────────────────────────────────────────────────── */
.rv-activity-tile { padding: 0.9rem 1rem !important; }
.al-box {
  background: rgba(0,8,28,0.7);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid rgba(0,70,180,0.18); border-radius: var(--radius-sm);
  max-height: 180px; overflow-y: auto;
  padding: 0.4rem 0;
  scrollbar-width: thin; scrollbar-color: rgba(255,107,0,0.2) transparent;
  box-shadow: inset 0 1px 0 rgba(0,100,255,0.08);
}
.al-box::-webkit-scrollbar { width: 3px; }
.al-box::-webkit-scrollbar-thumb { background: rgba(255,107,0,0.25); border-radius: 2px; }
.al-entry { display: grid; grid-template-columns: auto 1fr; column-gap: 0.5rem; row-gap: 0; font-family: var(--font-mono); font-size: 0.65rem; line-height: 1.45; border-bottom: 1px solid rgba(255,255,255,0.03); padding: 0.32rem 0.65rem; }
.al-entry:last-child { border-bottom: none; }
.al-time { color: rgba(255,255,255,0.22); white-space: nowrap; grid-row: 1; }
.al-action { color: var(--orange); font-weight: 700; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; grid-row: 1; }
.al-detail { color: rgba(255,255,255,0.30); font-size: 0.62rem; grid-column: 1 / -1; grid-row: 2; }
.al-empty { font-family: var(--font-mono); font-size: 0.68rem; color: rgba(255,255,255,0.15); text-align: center; padding: 0.75rem 0.5rem; font-style: italic; }

/* ──────────────────────────────────────────────────────────
   CUSTOMER HISTORY MODAL
   ────────────────────────────────────────────────────────── */
.modal-box-wide { max-width: 900px; width: 96vw; }
.ch-body { padding: 1.25rem 1.5rem; overflow-x: auto; max-height: 65vh; overflow-y: auto; }
.ch-empty { text-align: center; color: var(--text-muted); font-size: 0.9rem; padding: 2rem 0; }
.ch-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 640px; }
.ch-table thead { background: var(--glass-2); border-bottom: 1px solid rgba(255,107,0,0.28); position: sticky; top: 0; backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); }
.ch-table th { padding: 0.6rem 0.8rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); text-align: left; white-space: nowrap; }
.ch-table tbody tr { border-bottom: 1px solid var(--border); transition: var(--ease); }
.ch-table tbody tr:hover { background: var(--glass-1); }
.ch-table tbody tr:last-child { border-bottom: none; }
.ch-table td { padding: 0.62rem 0.8rem; vertical-align: middle; }
.ch-current-row { background: rgba(255,107,0,0.07) !important; }
.ch-current-row td { color: var(--text) !important; }
.ch-num    { font-family: var(--font-mono); font-size: 0.72rem; color: var(--blue); font-weight: 700; white-space: nowrap; }
.ch-device { color: var(--text); max-width: 220px; }
.ch-date   { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); white-space: nowrap; }
.ch-money  { font-family: var(--font-mono); font-weight: 700; text-align: right; white-space: nowrap; }
.ch-paid   { color: var(--success); }
.ch-owed   { color: var(--orange-light); }
.ch-zero   { color: var(--success); }

/* ──────────────────────────────────────────────────────────
   MISC
   ────────────────────────────────────────────────────────── */
.note-templates { font-size: 0.82rem; }
.rv-cust-notes-list .note-item { padding: 0.55rem 0.7rem; }
.rv-cust-notes-list .note-text { font-size: 0.78rem; }

/* =============================================================
   AUTH SYSTEM — Login, Auto-Blur, Admin Panel
   ============================================================= */

/* ── LOGIN SCREEN ── */
.login-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  background-image: var(--bg-mesh);
  background-attachment: fixed;
}
.login-bg-orb {
  position: fixed; border-radius: 50%;
  pointer-events: none; filter: blur(80px); opacity: 0.18;
}
.login-bg-orb-1 {
  width: 500px; height: 500px;
  top: -100px; left: -80px;
  background: radial-gradient(circle, var(--orange) 0%, transparent 70%);
  animation: orbFloat 8s ease-in-out infinite;
}
.login-bg-orb-2 {
  width: 400px; height: 400px;
  bottom: -80px; right: -60px;
  background: radial-gradient(circle, var(--blue) 0%, transparent 70%);
  animation: orbFloat 10s ease-in-out infinite reverse;
}
@keyframes orbFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-30px) scale(1.06); }
}

.login-card {
  background: var(--glass-2);
  backdrop-filter: var(--blur-xl); -webkit-backdrop-filter: var(--blur-xl);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--shine-strong);
  padding: 2.5rem 2.2rem 2rem;
  width: min(400px, 92vw);
  position: relative; z-index: 1;
  animation: loginCardIn 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(32px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-shake {
  animation: loginShake 0.45s cubic-bezier(0.36,0.07,0.19,0.97) both !important;
}
@keyframes loginShake {
  10%,90%  { transform: translateX(-3px); }
  20%,80%  { transform: translateX(5px); }
  30%,50%,70% { transform: translateX(-5px); }
  40%,60%  { transform: translateX(5px); }
}

.login-logo-wrap {
  text-align: center; margin-bottom: 2rem;
}
.login-logo-icon {
  font-size: 2.4rem; line-height: 1;
  animation: spinIcon 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}
@keyframes spinIcon {
  from { transform: rotate(-90deg) scale(0.5); opacity: 0; }
  to   { transform: rotate(0) scale(1); opacity: 1; }
}
.login-logo-name {
  font-size: 1.45rem; font-weight: 800;
  color: var(--text); letter-spacing: -0.02em;
  margin-top: 0.4rem;
}
.login-logo-sub {
  font-size: 0.72rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-top: 0.2rem;
}

.login-form { display: flex; flex-direction: column; gap: 1rem; }
.login-field { display: flex; flex-direction: column; gap: 0.35rem; }
.login-label {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-dim);
}
.login-pin-hint { font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.login-input {
  background: var(--glass-3);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body); font-size: 0.92rem;
  padding: 0.65rem 0.85rem;
  outline: none; width: 100%;
  transition: var(--ease);
  box-shadow: inset 0 1px 0 var(--shine);
}
.login-input:focus {
  border-color: var(--orange-light);
  box-shadow: 0 0 0 2px var(--orange-glow), inset 0 1px 0 var(--shine);
}
.login-pin-wrap { position: relative; }
.login-pin-input { letter-spacing: 0.2em; font-size: 1.1rem; padding-right: 2.8rem; }
.login-pin-eye {
  position: absolute; right: 0.75rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: var(--text-muted);
  transition: var(--ease);
}
.login-pin-eye:hover { color: var(--text); }

/* PIN dots indicator */
.login-pin-dots, .unlock-pin-dots {
  display: flex; gap: 0.5rem; justify-content: center;
  margin-top: 0.45rem;
}
.lpd {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--border-hi);
  background: transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.lpd-opt { border-style: dashed; opacity: 0.5; }
.lpd-filled {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.15);
}

.login-error {
  font-size: 0.78rem; color: var(--danger);
  min-height: 1.1em; font-weight: 500;
  text-align: center;
}

.login-btn {
  background: var(--orange);
  color: #fff; font-weight: 700;
  border: none; border-radius: var(--radius-sm);
  padding: 0.78rem 1rem; font-size: 0.95rem;
  cursor: pointer; width: 100%; margin-top: 0.4rem;
  transition: var(--spring);
  box-shadow: 0 4px 16px rgba(255,107,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
}
.login-btn:hover:not(:disabled) {
  background: var(--orange-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(255,107,0,0.45);
}
.login-btn:active:not(:disabled) { transform: translateY(0); }
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.login-footer {
  text-align: center; font-size: 0.66rem;
  color: var(--text-micro); margin-top: 1.6rem;
  font-family: var(--font-mono); letter-spacing: 0.04em;
}

/* Demo credentials hint */
.login-demo-hint {
  background: rgba(0,122,255,0.07);
  border: 1px solid rgba(0,122,255,0.18);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.85rem; margin-top: 0.5rem;
  font-size: 0.72rem; color: var(--text-dim);
  font-family: var(--font-mono); line-height: 1.7;
  text-align: center;
}

/* ── CONTENT BLUR ── */
.content-blurred {
  filter: blur(18px) saturate(0.4);
  pointer-events: none;
  user-select: none;
  transition: filter 0.35s ease;
}

/* ── BLUR OVERLAY ── */
.blur-overlay {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,8,8,0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.25s ease;
}
/* Unlock modal must sit above blur-overlay */
#unlockModal {
  z-index: 1200 !important;
}
#adminPanel, #editUserModal {
  z-index: 1100 !important;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.blur-overlay-card {
  background: var(--glass-3);
  backdrop-filter: var(--blur-xl); -webkit-backdrop-filter: var(--blur-xl);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--shine);
  padding: 2.2rem 2rem;
  text-align: center; width: min(340px, 90vw);
  animation: loginCardIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}
.blur-overlay-icon { font-size: 2.5rem; margin-bottom: 0.65rem; }
.blur-overlay-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.4rem; }
.blur-overlay-sub { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 1.4rem; }
.blur-overlay-btn {
  background: var(--orange); color: #fff;
  font-weight: 700; border: none;
  border-radius: var(--radius-sm); padding: 0.65rem 2rem;
  font-size: 0.92rem; cursor: pointer;
  transition: var(--spring);
  box-shadow: 0 4px 16px rgba(255,107,0,0.35);
}
.blur-overlay-btn:hover { background: var(--orange-light); transform: translateY(-1px); }

/* ── UNLOCK MODAL ── */
.unlock-modal-box { max-width: 360px; width: 95%; }
.unlock-body { padding: 1.25rem 1.5rem; }
.unlock-desc { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 1rem; }
.unlock-pin-wrap { position: relative; }

/* ── AUTO-BLUR NAV ITEM ── */
.autoblur-nav-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}
.autoblur-toggle-wrap {
  position: relative; display: inline-block;
  width: 38px; height: 22px; cursor: pointer;
}
.autoblur-toggle-wrap input { opacity: 0; width: 0; height: 0; }
.autoblur-slider {
  position: absolute; inset: 0;
  background: var(--glass-3); border: 1px solid var(--border);
  border-radius: 11px;
  transition: var(--ease);
}
.autoblur-slider::before {
  content: ''; position: absolute;
  width: 16px; height: 16px; border-radius: 50%;
  left: 2px; top: 2px;
  background: var(--text-muted);
  transition: var(--spring);
}
.autoblur-toggle-wrap input:checked + .autoblur-slider {
  background: rgba(255,107,0,0.25); border-color: var(--orange-light);
}
.autoblur-toggle-wrap input:checked + .autoblur-slider::before {
  background: var(--orange);
  transform: translateX(16px);
}

/* ── USER NAV ITEM ── */
.user-nav-item {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.85rem;
  border-left: 1px solid var(--border);
  margin-left: 0.25rem;
}
.user-nav-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--orange-glow); border: 1px solid var(--orange-dim);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.7rem; color: var(--orange-light);
  font-family: var(--font-mono); flex-shrink: 0;
}
.user-nav-info { display: flex; flex-direction: column; gap: 0.05rem; }
.user-nav-name { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.user-nav-role { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.user-nav-logout {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem;
  padding: 0.25rem 0.35rem; border-radius: var(--radius-xs);
  transition: var(--ease);
}
.user-nav-logout:hover { color: var(--danger); background: rgba(255,69,58,0.1); }

/* ── ADMIN NAV BUTTON ── */
.admin-nav-btn { color: var(--orange-light) !important; }
.admin-nav-btn .bnb-icon { color: var(--orange) !important; }

/* ── ADMIN PANEL ── */
.admin-panel-box { max-width: 580px; width: 96vw; }
.admin-body { padding: 1.25rem 1.5rem; max-height: 70vh; overflow-y: auto; }
.admin-section-title {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.admin-user-list { display: flex; flex-direction: column; gap: 0.5rem; }
.admin-user-row {
  display: flex; align-items: center; gap: 0.85rem;
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  box-shadow: inset 0 1px 0 var(--shine);
  transition: var(--ease);
}
.admin-user-row-me { border-color: var(--orange-dim); background: var(--orange-ultra); }
.admin-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--glass-3); border: 1px solid var(--border-hi);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.78rem;
  font-family: var(--font-mono); color: var(--text-dim); flex-shrink: 0;
}
.admin-user-info { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.admin-user-name { font-size: 0.88rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 0.5rem; }
.admin-you-badge {
  font-size: 0.6rem; background: var(--orange-glow);
  border: 1px solid var(--orange-dim); border-radius: 4px;
  padding: 0 0.35rem; color: var(--orange-light); font-weight: 700;
}
.admin-user-role-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.68rem; font-weight: 700;
  border-radius: 4px; padding: 0.12rem 0.5rem;
  width: fit-content;
}
.role-admin {
  background: rgba(255,107,0,0.1); color: var(--orange-light);
  border: 1px solid var(--orange-dim);
}
.role-standard {
  background: rgba(0,122,255,0.09); color: #5eafff;
  border: 1px solid rgba(0,122,255,0.22);
}
.admin-user-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.btn-danger-soft { color: var(--danger) !important; }
.btn-danger-soft:hover { background: rgba(255,69,58,0.1) !important; }

.admin-add-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.admin-add-grid .btn-primary { grid-column: 1 / -1; }

/* =============================================================
   DASHBOARD v2 — Filter Sidebar + Enhanced Ticket Cards
   ============================================================= */

/* ── TOP BAR ── */
.db-topbar {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1rem 1.25rem 0.6rem;
  max-width: 1400px; margin: 0 auto;
}
.db-search-wrap {
  flex: 1; position: relative;
  display: flex; align-items: center;
}
.db-search-icon {
  position: absolute; left: 0.9rem;
  font-size: 1.1rem; color: var(--text-muted);
  pointer-events: none;
}
.db-search-wrap input {
  width: 100%; padding: 0.6rem 2.4rem 0.6rem 2.4rem;
  background: var(--glass-2);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 0.88rem; outline: none;
  transition: var(--ease);
  box-shadow: inset 0 1px 0 var(--shine);
}
.db-search-wrap input:focus {
  border-color: var(--orange-light);
  box-shadow: 0 0 0 2px var(--orange-glow), inset 0 1px 0 var(--shine);
}
.db-search-clear {
  position: absolute; right: 0.7rem;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.8rem;
  padding: 0.2rem 0.3rem; line-height: 1;
  transition: var(--ease);
}
.db-search-clear:hover { color: var(--danger); }

.db-sort-wrap { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.db-sort-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.db-sort-select {
  background: var(--glass-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-size: 0.82rem; padding: 0.5rem 0.75rem; outline: none;
  cursor: pointer; transition: var(--ease);
}
.db-sort-select:focus { border-color: var(--orange-light); }

/* ── DASHBOARD LAYOUT ── */
.db-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  max-width: 1400px; margin: 0 auto;
  align-items: start;
  min-height: calc(100vh - 120px);
}

/* ── FILTER SIDEBAR ── */
.db-filter-sidebar {
  padding: 0.9rem 0.9rem 1.5rem;
  border-right: 1px solid var(--border);
  position: sticky; top: 0;
  max-height: 100vh; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,107,0,0.15) transparent;
}
.dbf-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.dbf-title { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); }
.dbf-clear-all {
  background: none; border: none; cursor: pointer;
  font-size: 0.68rem; color: var(--orange-light);
  font-weight: 600; padding: 0.1rem 0.3rem;
  border-radius: var(--radius-xs); transition: var(--ease);
}
.dbf-clear-all:hover { background: var(--orange-ultra); }

.dbf-section { margin-bottom: 1.1rem; }
.dbf-section-label {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.dbf-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.dbf-pill {
  background: var(--glass-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); color: var(--text-dim);
  font-size: 0.72rem; font-weight: 600;
  padding: 0.28rem 0.65rem; cursor: pointer;
  transition: var(--spring);
  white-space: nowrap;
}
.dbf-pill:hover { border-color: var(--orange-dim); color: var(--text); background: var(--orange-ultra); }
.dbf-pill.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,107,0,0.35);
}

.dbf-date-custom {
  display: flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem;
}
.dbf-date-input {
  flex: 1; background: var(--glass-2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); color: var(--text); font-size: 0.72rem;
  padding: 0.32rem 0.5rem; outline: none; transition: var(--ease);
  min-width: 0;
}
.dbf-date-input:focus { border-color: var(--orange-light); }
.dbf-date-sep { color: var(--text-muted); font-size: 0.7rem; flex-shrink: 0; }

/* Active filter chips inside sidebar */
.dbf-active-summary { margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px solid var(--border); }
.dbf-active-label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); margin-bottom: 0.4rem; }
.dbf-active-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.dbf-active-chip {
  background: rgba(255,107,0,0.12); border: 1px solid var(--orange-dim);
  border-radius: var(--radius-pill); color: var(--orange-light);
  font-size: 0.68rem; font-weight: 600; padding: 0.22rem 0.55rem;
  cursor: pointer; transition: var(--ease);
}
.dbf-active-chip:hover { background: rgba(255,107,0,0.22); }

/* ── CONTENT AREA ── */
.db-content { padding: 0 1rem 1.5rem; min-width: 0; }
.db-results-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0 0.6rem; margin-bottom: 0.25rem;
}
#dbResultsCount {
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.db-filter-toggle {
  display: none; /* shown on mobile via media query */
  background: var(--glass-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-dim);
  font-size: 0.75rem; padding: 0.35rem 0.75rem; cursor: pointer;
  transition: var(--ease);
}
.db-filter-toggle:hover { border-color: var(--orange-dim); color: var(--text); }

/* ── TICKET CARDS v2 ── */
.tickets-grid {
  display: flex; flex-direction: column; gap: 0.55rem;
}

.ticket-card {
  background: rgba(22, 22, 28, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), transform var(--ease), box-shadow var(--ease);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--shine);
  position: relative; overflow: hidden;
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: 88px;
}
.ticket-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: transparent;
  transition: background var(--ease);
  border-radius: 3px 0 0 3px;
}
.ticket-card:hover {
  border-color: var(--orange-dim);
  background: var(--glass-2);
  transform: translateX(2px);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--shine-strong), -2px 0 12px rgba(255,107,0,0.1);
}
.ticket-card:hover::before { background: var(--orange); }
.ticket-card:focus { outline: 2px solid var(--orange-dim); outline-offset: 2px; }

/* Card header row */
.tc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.45rem; gap: 0.5rem;
}
.tc-header-left { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.tc-header-right { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; }

.tc-id-badge {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 800;
  color: var(--orange-light);
  background: rgba(255,107,0,0.1); border: 1px solid rgba(255,107,0,0.22);
  border-radius: var(--radius-xs); padding: 0.1rem 0.45rem;
  white-space: nowrap; flex-shrink: 0;
}
.tc-name {
  font-size: 0.92rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Days active badge */
.tc-days-badge {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 800;
  border-radius: var(--radius-xs); padding: 0.12rem 0.45rem;
  letter-spacing: 0.02em; white-space: nowrap;
}
.days-badge-ok   { background: rgba(48,209,88,0.12); border: 1px solid rgba(48,209,88,0.25); color: #30D158; }
.days-badge-warn { background: rgba(255,214,10,0.12); border: 1px solid rgba(255,214,10,0.3); color: #FFD60A; }
.days-badge-crit { background: rgba(255,69,58,0.14); border: 1px solid rgba(255,69,58,0.3); color: var(--danger); animation: critPulse 2s ease-in-out infinite; will-change: opacity; }
@keyframes critPulse { 0%,100%{opacity:1;} 50%{opacity:0.7;} }

/* Device row */
.tc-device-row {
  display: flex; align-items: center; gap: 0.45rem;
  margin-bottom: 0.3rem;
}
.tc-brand-icon { font-size: 0.9rem; flex-shrink: 0; }
.tc-device-name { font-size: 0.82rem; font-weight: 600; color: var(--text-dim); }
.tc-phone-inline {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted);
  margin-left: auto; white-space: nowrap;
}

/* Repair description */
.tc-repair {
  font-size: 0.78rem; color: var(--text-muted); line-height: 1.45;
  margin-bottom: 0.45rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer row */
.tc-footer {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin-top: 0.2rem;
}
.tc-dropoff { font-size: 0.69rem; color: var(--text-muted); font-family: var(--font-mono); }
.tc-appt    { font-size: 0.69rem; color: var(--text-muted); font-family: var(--font-mono); }

/* Balance chip */
.tc-balance-chip {
  font-size: 0.68rem; font-weight: 800; font-family: var(--font-mono);
  border-radius: var(--radius-xs); padding: 0.1rem 0.45rem;
  margin-left: auto;
}
.tc-balance-chip.owed { background: rgba(255,107,0,0.12); border: 1px solid rgba(255,107,0,0.28); color: var(--orange-light); }
.tc-balance-chip.paid { background: rgba(48,209,88,0.1); border: 1px solid rgba(48,209,88,0.25); color: var(--success); }

/* Stat chips — active state */
.stat-chip-active {
  background: rgba(255,107,0,0.15) !important;
  border-color: var(--orange-dim) !important;
  color: var(--orange-light) !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .db-layout { grid-template-columns: 1fr; }
  .db-filter-sidebar {
    display: none; position: fixed; inset: 0; z-index: 700;
    background: rgba(8,8,8,0.96); backdrop-filter: var(--blur-xl);
    border: none; padding: 1.5rem;
    overflow-y: auto; max-height: 100vh;
  }
  .db-filter-sidebar.db-filter-sidebar-open { display: block; }
  .db-filter-toggle { display: inline-flex; }
  .db-content { padding: 0 0.75rem 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   SLIDEOUT NAVIGATION  (feature: left-edge hover slide-out)
   ══════════════════════════════════════════════════════════════ */
.slideout-nav {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
}

/* Invisible hover trigger strip — catches mouseenter before panel is visible */
.slideout-trigger {
  position: absolute;
  left: 0;
  top: -80px;
  width: 8px;
  height: calc(100% + 160px);
  background: transparent;
  cursor: pointer;
}

.slideout-panel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: #121217;
  border: 1px solid rgba(255,255,255,0.10);
  border-left: none;
  border-radius: 0 14px 14px 0;
  padding: 0.65rem 0.5rem;
  box-shadow: 4px 0 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translate3d(-110%, 0, 0);
  transition: transform 0.28s cubic-bezier(0.34, 1.28, 0.64, 1);
  pointer-events: none;
  min-width: 150px;
  will-change: transform;
  contain: layout paint;
}

.slideout-nav.open .slideout-panel {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.slideout-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0.6rem 0.85rem;
  color: rgba(255,255,255,0.80);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-body, sans-serif);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.slideout-btn:hover {
  background: rgba(255,107,0,0.14);
  border-color: rgba(255,107,0,0.30);
  color: #ff8c2a;
  transform: translateX(2px);
}

.slideout-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
}

.slideout-label {
  font-size: 0.82rem;
}

/* ══════════════════════════════════════════════════════════════
   DEVICE TRADE-IN  — button + wrapper
   ══════════════════════════════════════════════════════════════ */
.rv-trade-in-wrap {
  display: flex;
  justify-content: flex-end;
  padding: 0.65rem 0.25rem 0.1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 0.75rem;
}

.btn-trade-in {
  background: linear-gradient(135deg, rgba(0,122,255,0.18), rgba(0,122,255,0.08));
  border: 1px solid rgba(0,122,255,0.35);
  color: #5aafff;
  padding: 0.5rem 1rem;
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
  font-family: var(--font-body, sans-serif);
  letter-spacing: 0.01em;
}

.btn-trade-in:hover {
  background: linear-gradient(135deg, rgba(0,122,255,0.28), rgba(0,122,255,0.15));
  border-color: rgba(0,122,255,0.55);
  color: #90d0ff;
  transform: translateY(-1px);
}

/* Trade-In modal read-only section */
.trade-in-readonly-section {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.25rem;
}

.trade-in-readonly-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.40);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.trade-in-readonly-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.trade-in-ro-field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.40);
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.trade-in-ro-input {
  width: 100%;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 7px;
  padding: 0.4rem 0.65rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.50);
  font-family: var(--font-body, sans-serif);
  cursor: not-allowed;
  user-select: none;
}

.trade-in-ro-input[readonly] {
  pointer-events: none;
  font-style: italic;
}

/* TRADE IN - CLOSED status pill colour */
.status-TRADE-IN---CLOSED,
.status-pill.status-TRADE-IN---CLOSED {
  background: rgba(90,175,255,0.14) !important;
  color: #5aafff !important;
  border-color: rgba(90,175,255,0.30) !important;
}
.rv-status-badge.status-TRADE-IN---CLOSED {
  background: rgba(90,175,255,0.18);
  color: #5aafff;
  border-color: rgba(90,175,255,0.35);
}

/* ══════════════════════════════════════════════════════════════
   ACTIVITY LOG — username / actor display
   ══════════════════════════════════════════════════════════════ */
.al-entry {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  align-items: baseline;
  gap: 0.1rem 0.55rem;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.al-entry:last-child { border-bottom: none; }

.al-time {
  font-size: 0.65rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted, rgba(255,255,255,0.30));
  grid-column: 1;
  grid-row: 1;
  white-space: nowrap;
}

.al-actor {
  font-size: 0.67rem;
  font-weight: 700;
  color: #ff8c2a;
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.al-action {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  grid-column: 1 / -1;
  grid-row: 2;
}

.al-detail {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.40);
  grid-column: 1 / -1;
  grid-row: 3;
  font-family: var(--font-mono, monospace);
}

/* ══════════════════════════════════════════════════════════════
   CUSTOMER HISTORY — clickable ticket number links
   ══════════════════════════════════════════════════════════════ */
.ch-ticket-link {
  color: #5aafff;
  text-decoration: none;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  border-bottom: 1px dashed rgba(90,175,255,0.40);
  transition: color 0.12s, border-color 0.12s;
  padding-bottom: 1px;
}

.ch-ticket-link:hover {
  color: #90d0ff;
  border-bottom-color: rgba(144,208,255,0.65);
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════
   DROPDOWN READABILITY IMPROVEMENTS
   (applies to all <select> elements and popup menus system-wide)
   ══════════════════════════════════════════════════════════════ */
select,
select option {
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 10px 14px !important;
  color: #f2f6fc !important;
  background-color: #111522 !important;
}

/* Hover & selected state for option elements */
select option:hover,
select option:focus,
select option:checked {
  background-color: #1e263d !important;
  color: #ffffff !important;
}

/* Override the select element itself with fully opaque surface, high contrast border, and clear shadow */
select {
  padding: 0.55rem 0.95rem !important;
  background: #111522 !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  cursor: pointer;
  appearance: auto;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}

select:focus {
  outline: none;
  border-color: rgba(0, 180, 255, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.22), 0 6px 18px rgba(0,0,0,0.6) !important;
}

/* Universal autocomplete & context dropdown polish */
.dropdown-menu,
.autocomplete-dropdown,
.phone-search-dropdown,
.device-search-dropdown,
.pmt-inv-dropdown,
.po-supplier-dropdown,
.po-item-dropdown {
  background: #0f1422 !important;
  border: 1px solid rgba(0, 180, 255, 0.45) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,0.92), 0 4px 12px rgba(0,0,0,0.65) !important;
}

/* Light mode overrides for dropdowns */
@media (prefers-color-scheme: light) {
  select,
  select option {
    background-color: #ffffff !important;
    color: #111111 !important;
  }
  select option:hover,
  select option:checked {
    background-color: #e5edf8 !important;
    color: #000000 !important;
  }
  select {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.30) !important;
    color: #111111 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
}


/* ═══════════════════════════════════════════════════════════════
   SLIDEOUT NAV — active state highlight  [NEW]
   ═══════════════════════════════════════════════════════════════ */
.slideout-btn.slideout-active {
  background: rgba(255,107,0,0.16);
  border-color: rgba(255,107,0,0.35);
  color: #ff8c2a;
}

/* ═══════════════════════════════════════════════════════════════
   REPORTS PAGE  [NEW]
   ═══════════════════════════════════════════════════════════════ */
.rpt-view { padding-bottom: 4rem; }

/* Header */
.rpt-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.rpt-title-wrap { display: flex; align-items: center; gap: 0.75rem; flex: 1; }
.rpt-page-icon  { font-size: 1.8rem; filter: drop-shadow(0 0 8px rgba(255,107,0,0.3)); }
.rpt-page-title {
  font-family: var(--font-display, sans-serif); font-size: 1.4rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.18rem;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.6) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.rpt-page-sub { font-size: 0.72rem; color: var(--text-muted, rgba(255,255,255,0.3)); font-family: var(--font-mono, monospace); }
.rpt-header-actions { display: flex; gap: 0.5rem; }

/* Filter bar */
.rpt-filter-bar {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.5rem; flex-wrap: wrap;
  background: var(--glass-1, rgba(255,255,255,0.05));
  border: 1px solid var(--border, rgba(255,255,255,0.09));
  border-radius: 14px; padding: 0.65rem 1rem;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.rpt-quick-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.rpt-quick-btn {
  background: var(--glass-2, rgba(255,255,255,0.08));
  border: 1px solid var(--border, rgba(255,255,255,0.09));
  border-radius: 999px; color: var(--text-dim, rgba(255,255,255,0.55));
  font-size: 0.76rem; font-weight: 600; padding: 0.32rem 0.85rem;
  cursor: pointer; transition: all 0.18s ease;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.rpt-quick-btn:hover  { background: rgba(255,107,0,0.14); border-color: rgba(255,107,0,0.3); color: #ff8c2a; }
.rpt-quick-btn.active { background: linear-gradient(160deg,#FF6B00,#FF8C2A); border-color: transparent; color: #fff; box-shadow: 0 0 16px rgba(255,107,0,0.35); }
.rpt-date-inputs { display: flex; align-items: center; gap: 0.4rem; }
.rpt-date-input { width: 130px; font-size: 0.8rem !important; padding: 0.32rem 0.6rem !important; border-radius: 8px !important; }
.rpt-date-sep { color: var(--text-muted, rgba(255,255,255,0.3)); font-size: 0.8rem; }
.rpt-global-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-left: auto; }
.rpt-filter-select { font-size: 0.78rem !important; padding: 0.32rem 0.7rem !important; border-radius: 8px !important; min-width: 140px; }

/* KPI cards */
.rpt-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.rpt-kpi-card {
  display: flex; align-items: center; gap: 0.85rem;
  background: var(--glass-1, rgba(255,255,255,0.05));
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border, rgba(255,255,255,0.09));
  border-radius: 16px; padding: 1.1rem 1.2rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.10);
  transition: transform 0.2s ease;
}
.rpt-kpi-card:hover { transform: translateY(-2px); }
.rpt-kpi-icon { font-size: 1.8rem; filter: drop-shadow(0 0 6px rgba(255,255,255,0.15)); flex-shrink: 0; }
.rpt-kpi-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted, rgba(255,255,255,0.3)); margin-bottom: 0.25rem; }
.rpt-kpi-value { font-family: var(--font-mono, monospace); font-size: 1.35rem; font-weight: 800; color: var(--text, rgba(255,255,255,0.92)); line-height: 1; }
.rpt-kpi-sub { font-size: 0.65rem; color: var(--text-muted, rgba(255,255,255,0.3)); margin-top: 0.18rem; }

/* Charts */
.rpt-charts-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.rpt-chart-card {
  background: var(--glass-1, rgba(255,255,255,0.05));
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border, rgba(255,255,255,0.09));
  border-radius: 16px; padding: 1.1rem 1.2rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.rpt-chart-header { margin-bottom: 0.75rem; }
.rpt-chart-title { font-size: 0.82rem; font-weight: 700; color: var(--text, rgba(255,255,255,0.92)); display: block; }
.rpt-chart-sub   { font-size: 0.65rem; color: var(--text-muted, rgba(255,255,255,0.3)); }
.rpt-chart-area  { position: relative; }
.rpt-chart-area canvas { width: 100% !important; }
.rpt-donut-wrap { display: flex; align-items: center; gap: 0.5rem; }
.rpt-donut-legend { display: flex; flex-direction: column; gap: 0.35rem; }
.rpt-legend-item { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; }
.rpt-legend-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rpt-legend-label{ color: var(--text-dim, rgba(255,255,255,0.55)); flex: 1; }
.rpt-legend-pct  { color: var(--text, rgba(255,255,255,0.92)); font-weight: 700; font-family: var(--font-mono, monospace); font-size: 0.7rem; }

/* Transaction table */
.rpt-table-card {
  background: var(--glass-1, rgba(255,255,255,0.05));
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border, rgba(255,255,255,0.09));
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.rpt-table-header { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--border, rgba(255,255,255,0.09)); }
.rpt-table-title  { font-size: 0.85rem; font-weight: 700; color: var(--text, rgba(255,255,255,0.92)); }
.rpt-table-count  { font-size: 0.72rem; color: var(--text-muted, rgba(255,255,255,0.3)); font-family: var(--font-mono, monospace); }
.rpt-table-wrap   { overflow-x: auto; }
.rpt-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.rpt-table th { padding: 0.65rem 1rem; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted, rgba(255,255,255,0.3)); text-align: left; border-bottom: 1px solid var(--border, rgba(255,255,255,0.09)); white-space: nowrap; background: var(--glass-1, rgba(255,255,255,0.04)); }
.rpt-th-sortable { cursor: pointer; user-select: none; }
.rpt-th-sortable:hover { color: var(--text, rgba(255,255,255,0.92)); }
.rpt-tx-row { border-bottom: 1px solid var(--border, rgba(255,255,255,0.06)); transition: background 0.15s; }
.rpt-tx-row:last-child { border-bottom: none; }
.rpt-tx-row:hover { background: var(--glass-1, rgba(255,255,255,0.04)); }
.rpt-table td { padding: 0.65rem 1rem; vertical-align: middle; color: var(--text-dim, rgba(255,255,255,0.55)); }
.rpt-td-ts { white-space: nowrap; }
.rpt-ts-date { font-family: var(--font-mono, monospace); font-size: 0.68rem; color: var(--text-muted, rgba(255,255,255,0.3)); }
.rpt-ts-time { font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--text, rgba(255,255,255,0.92)); font-weight: 700; }
.rpt-ticket-link { color: #5aafff; font-family: var(--font-mono, monospace); font-weight: 700; cursor: pointer; font-size: 0.8rem; text-decoration: underline; text-decoration-style: dotted; }
.rpt-ticket-link:hover { color: #fff; }
.rpt-customer-name  { color: var(--text, rgba(255,255,255,0.92)); font-weight: 600; }
.rpt-customer-phone { font-family: var(--font-mono, monospace); font-size: 0.68rem; color: var(--text-muted, rgba(255,255,255,0.3)); }
.rpt-td-amount strong { color: var(--text, rgba(255,255,255,0.92)); font-family: var(--font-mono, monospace); font-size: 0.92rem; }
.btn-rpt-receipt { background: rgba(0,122,255,0.12); border: 1px solid rgba(0,122,255,0.28); border-radius: 8px; color: #5aafff; font-size: 0.72rem; font-weight: 600; padding: 0.28rem 0.65rem; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.btn-rpt-receipt:hover { background: rgba(0,122,255,0.22); color: #fff; }
.rpt-td-items { max-width: 200px; font-size: 0.76rem; }
.rpt-empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 3.5rem 1rem; text-align: center; }
.rpt-empty-icon { font-size: 2.8rem; filter: grayscale(0.4); }
.rpt-empty-msg  { color: var(--text-muted, rgba(255,255,255,0.3)); font-size: 0.88rem; }

/* ═══════════════════════════════════════════════════════════════
   CALENDAR PAGE  [NEW]
   ═══════════════════════════════════════════════════════════════ */
.cal-view { padding-bottom: 2rem; }

.cal-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.cal-title-wrap { display: flex; align-items: center; gap: 0.75rem; flex: 1; }
.cal-page-icon  { font-size: 1.8rem; filter: drop-shadow(0 0 8px rgba(0,122,255,0.3)); }
.cal-page-title {
  font-family: var(--font-display, sans-serif); font-size: 1.4rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.18rem;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.6) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cal-page-sub { font-size: 0.72rem; color: var(--text-muted, rgba(255,255,255,0.3)); font-family: var(--font-mono, monospace); }
.cal-header-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.cal-view-toggle { display: flex; background: var(--glass-1, rgba(255,255,255,0.05)); border: 1px solid var(--border, rgba(255,255,255,0.09)); border-radius: 999px; overflow: hidden; }
.cal-view-btn { background: transparent; border: none; color: var(--text-dim, rgba(255,255,255,0.55)); font-size: 0.76rem; font-weight: 600; padding: 0.32rem 0.85rem; cursor: pointer; transition: all 0.18s; }
.cal-view-btn.active { background: linear-gradient(160deg,#007AFF,#0055CC); color: #fff; box-shadow: 0 0 14px rgba(0,122,255,0.3); }

/* Grid wrapper: sticky time column + scrollable days */
.cal-grid-wrap {
  display: flex;
  background: var(--glass-1, rgba(255,255,255,0.04));
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border, rgba(255,255,255,0.09));
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.07);
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

/* Time label column */
.cal-time-col {
  display: flex; flex-direction: column;
  min-width: 56px; flex-shrink: 0;
  border-right: 1px solid var(--border, rgba(255,255,255,0.07));
  background: rgba(0,0,0,0.15);
  position: sticky; left: 0; z-index: 2;
}
.cal-time-spacer { height: 40px; flex-shrink: 0; border-bottom: 1px solid var(--border, rgba(255,255,255,0.06)); }
.cal-time-slot-label {
  height: 64px; flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 4px;
  font-family: var(--font-mono, monospace); font-size: 0.62rem;
  color: var(--text-muted, rgba(255,255,255,0.3));
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.04));
}

/* Day columns grid */
.cal-days-grid {
  display: grid;
  flex: 1;
  min-width: 0;
}
.cal-day-col { display: flex; flex-direction: column; border-right: 1px solid var(--border, rgba(255,255,255,0.07)); }
.cal-day-col:last-child { border-right: none; }

.cal-day-header {
  height: 40px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  position: sticky; top: 0; z-index: 1;
}
.cal-day-name { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted, rgba(255,255,255,0.3)); }
.cal-day-num  { font-size: 0.88rem; font-weight: 800; color: var(--text-dim, rgba(255,255,255,0.55)); line-height: 1.2; }
.cal-today .cal-day-header { background: rgba(0,122,255,0.10); border-color: rgba(0,122,255,0.25); }
.cal-today-num { color: #007AFF !important; background: rgba(0,122,255,0.15); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }

.cal-slot {
  height: 64px; flex-shrink: 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.04));
  padding: 2px 3px; display: flex; flex-direction: column; gap: 2px;
  position: relative; overflow: hidden;
}
.cal-slot:hover { background: rgba(255,255,255,0.02); }

/* Events inside slots */
.cal-event {
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(255,107,0,0.15);
  border: 1px solid rgba(255,107,0,0.35);
  border-radius: 6px; padding: 2px 5px;
  cursor: pointer; transition: all 0.15s;
  overflow: hidden; min-height: 0;
}
.cal-event:hover { background: rgba(255,107,0,0.25); transform: scale(1.02); z-index: 1; box-shadow: 0 2px 8px rgba(255,107,0,0.3); }
.cal-evt-ticket { font-size: 0.58rem; font-family: var(--font-mono, monospace); color: #ff8c2a; font-weight: 700; line-height: 1.2; }
.cal-evt-name   { font-size: 0.66rem; font-weight: 700; color: rgba(255,255,255,0.9); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-evt-device { font-size: 0.6rem; color: rgba(255,255,255,0.45); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Status colour coding */
.cal-evt-checked-in      { background: rgba(0,122,255,0.15);  border-color: rgba(0,122,255,0.35); }
.cal-evt-diagnosing      { background: rgba(255,214,10,0.13); border-color: rgba(255,214,10,0.30); }
.cal-evt-waiting-parts   { background: rgba(255,107,0,0.12);  border-color: rgba(255,107,0,0.28); }
.cal-evt-in-repair       { background: rgba(255,107,0,0.18);  border-color: rgba(255,107,0,0.40); }
.cal-evt-completed       { background: rgba(48,209,88,0.14);  border-color: rgba(48,209,88,0.35); }
.cal-evt-picked-up       { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); }
.cal-evt-closed          { background: rgba(48,209,88,0.20);  border-color: rgba(48,209,88,0.40); }

/* Responsive */
@media (max-width: 900px) {
  .rpt-kpi-row    { grid-template-columns: 1fr 1fr; }
  .rpt-charts-row { grid-template-columns: 1fr; }
  .rpt-filter-bar { flex-direction: column; align-items: stretch; }
  .rpt-global-filters { margin-left: 0; }
}
@media (max-width: 600px) {
  .rpt-kpi-row { grid-template-columns: 1fr; }
  .rpt-header-actions, .cal-header-actions { flex-wrap: wrap; }
  .cal-grid-wrap { max-height: calc(100vh - 260px); }
}

/* =============================================================
   SIDEBAR NAV + HAMBURGER + KANBAN + CALENDAR + ADMIN VIEW
   ============================================================= */

/* ── HAMBURGER ── */
.hamburger-btn {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 0.5rem; border-radius: var(--radius-xs);
  transition: var(--ease); margin-right: 0.5rem;
}
.hamburger-btn:hover { background: var(--glass-2); }
.hamburger-line {
  display: block; width: 20px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: var(--ease);
}

/* ── SIDEBAR ── */
.sidebar-overlay {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
  will-change: opacity;
}
.sidebar-overlay.visible, #sidebarOverlay.visible { opacity: 1 !important; pointer-events: auto !important; }

.sidebar, #sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 240px; z-index: 1500;
  background: #0d0d12;
  border-right: 1px solid rgba(255,255,255,0.09);
  box-shadow: 4px 0 40px rgba(0,0,0,0.7);
  display: flex; flex-direction: column;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.3s cubic-bezier(0.34,1.2,0.64,1);
  overflow: hidden;
  min-height: 0;
  will-change: transform;
  contain: layout paint;
}
.sidebar.open, #sidebar.open { transform: translate3d(0, 0, 0) !important; }

.sidebar-header {
  padding: 1.1rem 1rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: relative;
}
.sidebar-shop-name {
  font-size: 1.05rem; font-weight: 800;
  color: var(--text); letter-spacing: -0.01em;
}
.sidebar-shop-tagline {
  font-size: 0.65rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.09em;
  margin-top: 0.18rem;
}
.sidebar-close {
  position: absolute; top: 0.85rem; right: 0.75rem;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.85rem;
  padding: 0.25rem 0.4rem; border-radius: var(--radius-xs);
  transition: var(--ease);
}
.sidebar-close:hover { color: var(--text); background: var(--glass-2); }

.sidebar-nav {
  display: flex; flex-direction: column;
  gap: 0.15rem; padding: 0.75rem 0.6rem;
  flex: 1 1 0;        /* grow to fill, shrink when viewport is short */
  min-height: 0;      /* needed so overflow-y works inside a flexbox */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.sidebar-btn {
  display: flex; align-items: center; gap: 0.65rem;
  background: transparent; border: 1px solid transparent;
  border-radius: 9px; padding: 0.6rem 0.8rem;
  color: rgba(255,255,255,0.72); font-size: 0.83rem;
  font-weight: 600; cursor: pointer; width: 100%; text-align: left;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.sidebar-btn:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text);
}
.sidebar-btn.sidebar-active {
  background: rgba(255,107,0,0.14);
  border-color: rgba(255,107,0,0.28);
  color: var(--orange-light);
}
.sidebar-icon { font-size: 1rem; flex-shrink: 0; }
.sidebar-label { flex: 1; }

.sidebar-spacer { flex: 0 0 0; }  /* user section anchored to bottom */

/* ── SIDEBAR USER SECTION ── */
.sidebar-user-section {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 0.8rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  flex-shrink: 0;     /* always visible — never squashed off screen */
}
.sidebar-user-card {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.5rem;
  background: var(--glass-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.sidebar-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--orange-glow); border: 1px solid var(--orange-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800; color: var(--orange-light);
  font-family: var(--font-mono); flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: 0.8rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 0.62rem; color: var(--text-muted); }
.sidebar-user-edit {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.78rem;
  padding: 0.2rem; border-radius: 4px; transition: var(--ease);
}
.sidebar-user-edit:hover { color: var(--text); background: var(--glass-2); }

.sidebar-blur-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.5rem; font-size: 0.78rem; color: var(--text-dim);
}
.sidebar-blur-icon { font-size: 0.9rem; }
.sidebar-blur-label { flex: 1; }

.sidebar-action-row {
  display: flex; gap: 0.4rem;
}
.sidebar-lock-btn, .sidebar-logout-btn {
  flex: 1; background: var(--glass-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-dim);
  font-size: 0.72rem; font-weight: 600; cursor: pointer;
  padding: 0.42rem 0.5rem; transition: var(--ease);
}
.sidebar-lock-btn:hover { border-color: var(--orange-dim); color: var(--orange-light); background: var(--orange-ultra); }
.sidebar-logout-btn:hover { border-color: rgba(255,69,58,0.4); color: var(--danger); background: rgba(255,69,58,0.08); }

/* ── KANBAN + CALENDAR VIEW ── */
#kanbanCalendarView { padding: 0; overflow: hidden; }

.kc-mobile-toggle {
  display: none;
  gap: 0.4rem; padding: 0.75rem 1rem 0;
}
.kc-toggle-btn {
  flex: 1; background: var(--glass-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-dim);
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  padding: 0.5rem; transition: var(--ease);
}
.kc-toggle-btn.kc-active {
  background: var(--orange-ultra); border-color: var(--orange-dim); color: var(--orange-light);
}

.kc-split-layout {
  display: grid;
  grid-template-columns: 60% 40%;
  height: calc(100vh - 56px);
  overflow: hidden;
}

/* ── PANE HEADERS ── */
.kc-pane-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem 1rem 0.6rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: rgba(8,8,8,0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.kc-pane-title { font-size: 0.85rem; font-weight: 800; color: var(--text); letter-spacing: 0.02em; }
.kc-cal-controls { display: flex; align-items: center; gap: 0.5rem; }
.kc-btn {
  background: var(--glass-2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); color: var(--text-dim);
  font-size: 1rem; padding: 0.2rem 0.6rem; cursor: pointer;
  transition: var(--ease);
}
.kc-btn:hover { border-color: var(--orange-dim); color: var(--orange-light); }
.kc-cal-month-label { font-size: 0.82rem; font-weight: 700; color: var(--text); min-width: 130px; text-align: center; }
.kc-view-toggle { display: flex; gap: 0.25rem; }
.kc-view-btn {
  background: var(--glass-2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); color: var(--text-dim);
  font-size: 0.7rem; padding: 0.22rem 0.6rem; cursor: pointer;
  transition: var(--ease);
}
.kc-view-btn.kc-view-active {
  background: var(--orange-ultra); border-color: var(--orange-dim); color: var(--orange-light);
}

/* ── CALENDAR PANE ── */
.kc-calendar-pane {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.kc-calendar-grid {
  flex: 1; overflow-y: auto; padding: 0.5rem;
}

.cal-month-grid {
  display: grid; grid-template-columns: repeat(7,1fr);
  gap: 1px; background: var(--border);
}
.cal-dow {
  background: rgba(8,8,8,0.9); padding: 0.4rem 0.5rem;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); text-align: center;
}
.cal-day {
  background: var(--glass-0); min-height: 90px;
  padding: 0.35rem 0.4rem;
  cursor: default;
  transition: background 0.15s;
  position: relative;
}
.cal-day:hover { background: var(--glass-1); }
.cal-day-blank { background: rgba(4,4,4,0.6); }
.cal-today { background: rgba(255,107,0,0.06) !important; }
.cal-today .cal-day-num { color: var(--orange-light); font-weight: 800; }
.cal-day-num { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.3rem; }
.cal-day-items { display: flex; flex-direction: column; gap: 2px; }

.cal-item {
  border-radius: 4px; padding: 0.12rem 0.35rem;
  font-size: 0.65rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 0.15s, transform 0.1s;
  user-select: none;
}
.cal-item:hover { opacity: 0.85; transform: scale(1.02); }
.cal-item-low    { background: rgba(48,209,88,0.18); border-left: 2px solid var(--success); color: #4ade80; }
.cal-item-medium { background: rgba(255,214,10,0.15); border-left: 2px solid var(--warning); color: #fbbf24; }
.cal-item-high   { background: rgba(255,69,58,0.15); border-left: 2px solid var(--danger); color: #f87171; }
.cal-item-more { font-size: 0.6rem; color: var(--text-muted); padding: 0.08rem 0.35rem; }

/* Week view */
.cal-week-grid {
  display: grid; grid-template-columns: repeat(7,1fr);
  gap: 1px; background: var(--border);
  height: 100%;
}
.cal-week-col { background: var(--glass-0); display: flex; flex-direction: column; }
.cal-today-col { background: rgba(255,107,0,0.04); }
.cal-week-header {
  padding: 0.4rem 0.5rem; font-size: 0.65rem; font-weight: 700;
  color: var(--text-muted); text-align: center;
  border-bottom: 1px solid var(--border);
  background: rgba(8,8,8,0.7);
}
.cal-week-day-num { color: var(--text-dim); }
.cal-week-body { flex: 1; padding: 0.3rem; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }

/* ── KANBAN PANE ── */
.kc-kanban-pane {
  display: flex; flex-direction: column;
  overflow: hidden; background: rgba(6,6,8,0.6);
}
.kc-kanban-board {
  flex: 1; display: flex; gap: 0;
  overflow-x: auto; overflow-y: hidden;
  padding: 0.6rem;
  scrollbar-width: thin; scrollbar-color: rgba(255,107,0,0.15) transparent;
}

.kanban-col {
  flex-shrink: 0; width: 200px;
  display: flex; flex-direction: column;
  background: rgba(14,14,18,0.7);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-right: 0.5rem;
  overflow: hidden;
}
.kanban-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
.kanban-col-title { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
.kanban-col-count {
  font-size: 0.62rem; background: var(--glass-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.06rem 0.42rem; color: var(--text-muted); font-family: var(--font-mono);
}

.kanban-cards {
  flex: 1; overflow-y: auto; padding: 0.5rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  min-height: 80px;
  scrollbar-width: thin; scrollbar-color: rgba(255,107,0,0.1) transparent;
  transform: translateZ(0);
  contain: layout style;
}

/* Drop zone highlight */
.kanban-cards:empty::after {
  content: 'Drop here'; font-size: 0.68rem; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  min-height: 60px; border: 1px dashed var(--border); border-radius: var(--radius-xs);
  opacity: 0.5;
}

.kanban-card {
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.6rem 0.65rem;
  cursor: pointer; cursor: grab;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--shine);
  position: relative;
  contain: layout style paint;
}
.kanban-card:hover {
  border-color: var(--orange-dim);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--shine);
}
.kanban-card.dragging { opacity: 0.4; transform: rotate(2deg); }

.kc-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.kc-ticket-num {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 800;
  color: var(--orange-light); background: rgba(255,107,0,0.1);
  border: 1px solid rgba(255,107,0,0.2); border-radius: 4px;
  padding: 0.05rem 0.35rem;
}
.kc-prio-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.kc-customer { font-size: 0.78rem; font-weight: 700; color: var(--text); margin-bottom: 0.18rem; }
.kc-device { font-size: 0.68rem; color: var(--text-dim); margin-bottom: 0.3rem; }
.kc-bottom-row { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.kc-days { font-size: 0.6rem; font-family: var(--font-mono); color: var(--text-muted); margin-left: auto; }
.kc-due { font-size: 0.6rem; font-family: var(--font-mono); color: var(--text-muted); }
.kc-due.overdue { color: var(--danger); font-weight: 700; }
.kc-due.due-today { color: var(--warning); font-weight: 700; }

/* ── TICKET SLIDEOUT PANEL ── */
.ticket-slideout-overlay {
  position: fixed; inset: 0; z-index: 1600;
  background: rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.ticket-slideout-overlay.visible { opacity: 1; pointer-events: auto; }

.ticket-slideout {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(400px,95vw); z-index: 1700;
  background: #0f0f14;
  border-left: 1px solid rgba(255,255,255,0.1);
  box-shadow: -8px 0 40px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.3s cubic-bezier(0.34,1.2,0.64,1);
  overflow: hidden;
  will-change: transform;
  contain: layout paint;
}
.ticket-slideout.open { transform: translate3d(0, 0, 0); }

.ts-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.ts-title-wrap { display: flex; align-items: center; gap: 0.6rem; }
.ts-ticket-num {
  font-family: var(--font-mono); font-size: 0.88rem; font-weight: 800;
  color: var(--orange-light);
}
.ts-status-badge {
  font-size: 0.68rem; font-weight: 700;
  border-radius: var(--radius-pill); padding: 0.14rem 0.6rem;
}
.ts-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; padding: 0.3rem 0.4rem;
  border-radius: var(--radius-xs); transition: var(--ease);
}
.ts-close:hover { color: var(--text); background: var(--glass-2); }

.ts-body { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; }
.ts-section { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.2rem; }
.ts-field-row { display: flex; flex-direction: column; gap: 0.3rem; }
.ts-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); }
.ts-val { font-size: 0.85rem; color: var(--text); }
.ts-date-input, .ts-select {
  background: var(--glass-2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); color: var(--text);
  font-size: 0.82rem; padding: 0.45rem 0.65rem; outline: none;
  transition: var(--ease); width: 100%;
}
.ts-date-input:focus, .ts-select:focus { border-color: var(--orange-light); }

.ts-priority-wrap { display: flex; gap: 0.4rem; }
.ts-priority-btn {
  flex: 1; background: var(--glass-2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); color: var(--text-dim);
  font-size: 0.72rem; font-weight: 700; padding: 0.32rem 0;
  cursor: pointer; transition: var(--ease);
}
.ts-priority-btn[data-priority="low"].ts-priority-active   { background: rgba(48,209,88,0.18); border-color: rgba(48,209,88,0.4); color: #4ade80; }
.ts-priority-btn[data-priority="medium"].ts-priority-active { background: rgba(255,214,10,0.15); border-color: rgba(255,214,10,0.4); color: #fbbf24; }
.ts-priority-btn[data-priority="high"].ts-priority-active   { background: rgba(255,69,58,0.15); border-color: rgba(255,69,58,0.4); color: #f87171; }

.ts-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }

/* ── ADMIN VIEW (full page) ── */
.admin-view {
  max-width: 860px; margin: 0 auto; padding: 1.5rem 1.25rem;
}
.admin-view-header {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem;
}
.admin-view-title { font-size: 1.25rem; font-weight: 800; color: var(--text); }

.admin-tab-bar {
  display: flex; gap: 0.3rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.admin-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted); font-size: 0.8rem; font-weight: 600;
  padding: 0.55rem 0.85rem; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--orange-light); border-bottom-color: var(--orange); }

.admin-tab-pane { display: none; }
.admin-tab-pane.active { display: block; }

.admin-settings-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.admin-setting-row { display: flex; align-items: center; gap: 0.85rem; }
.admin-setting-label { font-size: 0.75rem; font-weight: 700; color: var(--text-dim); min-width: 90px; }
.admin-setting-row .login-input { flex: 1; }

.admin-color-swatches { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.admin-color-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid transparent; cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.admin-color-swatch:hover { transform: scale(1.15); }
.admin-color-swatch.swatch-active { border-color: rgba(255,255,255,0.7); transform: scale(1.1); }

.admin-tab-visibility-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.admin-toggle-row {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.82rem; color: var(--text-dim); cursor: pointer;
}
.admin-toggle-row input { accent-color: var(--orange); width: 14px; height: 14px; cursor: pointer; }

.admin-kanban-cols { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.75rem; }
.admin-col-row {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--glass-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.5rem 0.75rem;
}
.admin-col-drag { color: var(--text-muted); cursor: grab; font-size: 1rem; }
.admin-col-name-input { flex: 1; }
.admin-add-col-row {
  display: flex; gap: 0.5rem; align-items: center;
}
.admin-add-col-row .login-input { flex: 1; }

.admin-supplier-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; }
.admin-supplier-input { flex: 1; }

.admin-hint { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.85rem; }
.admin-setting-hint {
  font-size: 0.69rem; color: var(--text-muted);
  display: block; margin-top: 0.18rem; margin-left: calc(90px + 0.85rem);
}
.admin-setting-row { flex-wrap: wrap; }
.admin-secret-wrap {
  flex: 1; display: flex; align-items: center; gap: 0.4rem;
}
.admin-secret-wrap .login-input { flex: 1; }
.admin-reveal-btn {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0 0.55rem; height: 36px; cursor: pointer; font-size: 0.85rem;
  color: var(--text-dim); transition: background 0.15s;
  flex-shrink: 0;
}
.admin-reveal-btn:hover { background: var(--glass-2); }

.admin-phoneconfig-setup-steps {
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.7;
}
.admin-phoneconfig-setup-steps ol { margin: 0.35rem 0 0 1.1rem; padding: 0; }
.admin-phoneconfig-setup-steps li { margin-bottom: 0.2rem; }
.admin-phoneconfig-setup-steps code {
  background: var(--glass-2); border-radius: 3px;
  padding: 0 4px; font-size: 0.72rem;
}





/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .kc-split-layout { grid-template-columns: 1fr; }
  .kc-mobile-toggle { display: flex; }
  .kc-mobile-hidden { display: none !important; }
  .kc-calendar-pane, .kc-kanban-pane { height: calc(100vh - 110px); }
  .kanban-card { cursor: pointer; }
}

/* ══════════════════════════════════════════════════════════════
   KANBAN — IMPROVED DRAG AND DROP
   ══════════════════════════════════════════════════════════════ */
.kc-drag-ph {
  background: rgba(255, 107, 0, 0.08);
  border: 2px dashed rgba(255, 107, 0, 0.40);
  border-radius: var(--radius-xs, 6px);
  margin: 0.2rem 0;
  pointer-events: none;
  transition: height 0.12s ease;
}
.kanban-cards.kc-drop-active {
  background: rgba(255, 107, 0, 0.04);
}
.kanban-col.kc-col-active {
  border-color: rgba(255, 107, 0, 0.40);
  box-shadow: 0 0 0 1px rgba(255, 107, 0, 0.25), inset 0 0 20px rgba(255,107,0,0.03);
}
.kanban-col.kc-col-active .kanban-col-header {
  background: rgba(255, 107, 0, 0.07);
}
.kanban-card.dragging {
  opacity: 0.3;
  transform: rotate(1.5deg) scale(1.02);
  cursor: grabbing;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}

/* ══════════════════════════════════════════════════════════════
   STAFF MANAGEMENT VIEW
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   STAFF MANAGEMENT VIEW
   Uses real design tokens: --glass-*, --border, --text, --text-dim,
   --text-muted, --orange, --radius-sm, --radius-xs, --shadow-sm
   ══════════════════════════════════════════════════════════════ */
.staff-view {
  padding: 1.5rem;
  width: 100%;
}
.staff-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.staff-title-wrap { display: flex; align-items: center; gap: 0.75rem; flex: 1; }
.staff-page-icon  { font-size: 1.8rem; }
.staff-page-title {
  font-size: 1.5rem; font-weight: 800; margin: 0;
  color: var(--text); letter-spacing: -0.02em;
}
.staff-page-sub { font-size: 0.82rem; color: var(--text-muted); margin: 0; }

.staff-table-card {
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.staff-table-wrap { overflow-x: auto; }
.staff-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.staff-table th {
  background: rgba(255,255,255,0.03);
  padding: 0.65rem 1rem;
  text-align: left;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.staff-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.staff-table tr:last-child td { border-bottom: none; }
.staff-row-inactive td { opacity: 0.45; }
.staff-th-actions { text-align: right; }
.staff-actions-cell { display: flex; gap: 0.4rem; justify-content: flex-end; flex-wrap: wrap; }
.staff-avatar-cell { display: flex; align-items: center; gap: 0.5rem; }
.staff-empty-row { text-align: center; color: var(--text-muted); padding: 2.5rem !important; }

.staff-status-badge {
  display: inline-block; padding: 0.18rem 0.6rem;
  border-radius: 999px; font-size: 0.72rem; font-weight: 700;
}
.staff-active   { background: rgba(48,209,88,0.15);  color: #30D158; border: 1px solid rgba(48,209,88,0.25); }
.staff-inactive { background: rgba(255,69,58,0.12);  color: #FF453A; border: 1px solid rgba(255,69,58,0.25); }

.staff-add-panel {
  background: var(--glass-1);
  border: 1px solid var(--orange-dim);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.staff-add-title {
  font-size: 0.72rem; font-weight: 800; color: var(--orange-light);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.staff-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem; margin-bottom: 0.75rem;
}
.staff-add-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.75rem; }

/* ══════════════════════════════════════════════════════════════
   SCHEDULING VIEW — Two-pane split, mirrors Kanban/Calendar
   Left pane: clock widget + punch history
   Right pane: full-width shift board (kanban-col grid by day)
   ══════════════════════════════════════════════════════════════ */
.view.scheduling-view {
  /* fullbleed — padding handled by inner layout */
  display: none;
  width: 100%;
  height: calc(100vh - 58px);
  overflow: hidden;
  flex-direction: column;
}
.view.scheduling-view.active {
  display: flex !important;
}

/* ── Top header bar ── */
.sched-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(8,8,8,0.7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  flex-shrink: 0;
}
.sched-title-wrap { display: flex; align-items: center; gap: 0.65rem; }
.sched-page-icon  { font-size: 1.4rem; }
.sched-page-title { font-size: 1rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; margin: 0; }
.sched-page-sub   { font-size: 0.72rem; color: var(--text-muted); margin: 0; }
.sched-topbar-actions { display: flex; gap: 0.5rem; align-items: center; }

/* Week navigation controls */
.sched-week-nav { display: flex; align-items: center; gap: 0.4rem; }
.sched-week-label {
  font-size: 0.8rem; font-weight: 700; color: var(--text);
  min-width: 180px; text-align: center;
}

/* ── Two-pane split layout ── */
.sched-split-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  flex: 1;
  overflow: hidden;
}

/* ── LEFT PANE: Clock + Punch History ── */
.sched-left-pane {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
  background: rgba(8,8,10,0.6);
}
.sched-pane-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 0.9rem 0.55rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: rgba(8,8,8,0.5);
}
.sched-pane-title {
  font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-dim);
}
.sched-left-body { flex: 1; overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 1rem; }

/* Clock widget */
.sched-clock-widget {
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.2rem 1rem;
  text-align: center;
  display: flex; flex-direction: column; gap: 0.55rem; align-items: center;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--shine);
}
.sched-clock-time {
  font-family: var(--font-mono); font-size: 2.2rem; font-weight: 700;
  color: var(--text); letter-spacing: 0.04em; line-height: 1;
}
.sched-clock-date { font-size: 0.75rem; color: var(--text-muted); }
.sched-user-display {
  font-size: 0.85rem; font-weight: 700; color: var(--text);
  background: var(--glass-1); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 0.3rem 0.75rem; width: 100%;
}
.sched-user-label {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted);
}
.sched-status-chip {
  display: inline-block; padding: 0.2rem 0.75rem;
  border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  background: var(--glass-2); color: var(--text-muted);
  border: 1px solid var(--border);
}
.sched-clocked-in { background: rgba(48,209,88,0.15); color: #30D158; border-color: rgba(48,209,88,0.3); }
.sched-session-timer { font-size: 0.8rem; color: var(--text-dim); }
.sched-session-label { color: var(--text-muted); }

.sched-clock-btn {
  width: 100%; padding: 0.75rem 1rem; border: none;
  border-radius: var(--radius-xs);
  font-size: 0.85rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; transition: opacity 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.sched-clock-btn:active { transform: scale(0.97); }
.sched-clock-in  { background: var(--orange); color: #fff; }
.sched-clock-out { background: #FF453A; color: #fff; }

/* Mini punch history inside left pane */
.sched-mini-history { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; min-height: 0; }
.sched-mini-history-title {
  font-size: 0.65rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--text-muted); margin-bottom: 0.1rem;
}
.sched-mini-punch-list { display: flex; flex-direction: column; gap: 0.3rem; overflow-y: auto; flex: 1; }
.sched-mini-punch {
  background: var(--glass-1); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 0.4rem 0.6rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.sched-mini-punch-name { font-size: 0.75rem; font-weight: 700; color: var(--text); }
.sched-mini-punch-times { font-size: 0.68rem; color: var(--text-muted); font-family: var(--font-mono); }
.sched-mini-punch-delta { font-size: 0.65rem; font-weight: 700; }
.sched-mini-punch-filter {
  background: var(--glass-1); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 0.3rem 0.5rem;
  color: var(--text); font-size: 0.78rem; width: 100%;
  margin-bottom: 0.4rem;
}

/* ── RIGHT PANE: Shift board ── */
.sched-right-pane {
  display: flex; flex-direction: column;
  overflow: hidden; background: rgba(6,6,8,0.6);
}
.sched-board-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 0.9rem 0.55rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: rgba(8,8,8,0.5);
}

/* The shift board reuses kanban-col / kanban-cards / kanban-card classes exactly */
.sched-shift-board {
  flex: 1; display: flex; gap: 0;
  overflow-x: auto; overflow-y: hidden;
  padding: 0.6rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,107,0,0.15) transparent;
}

/* Shift card — extends kanban-card with shift-specific content layout */
.shift-card {
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.55rem 0.65rem;
  cursor: grab;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--shine);
  position: relative; user-select: none;
}
.shift-card:hover {
  border-color: var(--orange-dim);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--shine);
}
.shift-card.dragging { opacity: 0.35; transform: rotate(2deg); cursor: grabbing; }
.shift-card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.25rem;
}
.shift-card-name {
  font-size: 0.8rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 80%;
}
.shift-card-role-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.shift-card-time {
  font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--orange-light); font-weight: 600;
  background: rgba(255,107,0,0.1); border: 1px solid rgba(255,107,0,0.2);
  border-radius: 4px; padding: 0.04rem 0.35rem;
  display: inline-block; margin-bottom: 0.2rem;
}
.shift-card-hours {
  font-size: 0.65rem; color: var(--text-muted); font-family: var(--font-mono);
}
.shift-card-del {
  position: absolute; top: 0.3rem; right: 0.3rem;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.65rem; opacity: 0;
  transition: opacity 0.15s; padding: 0.1rem 0.2rem;
  border-radius: 3px;
}
.shift-card:hover .shift-card-del { opacity: 1; }
.shift-card-del:hover { color: var(--danger); background: rgba(255,69,58,0.12); }

/* "Add shift" inline button inside drop zones */
.shift-add-btn {
  width: 100%; background: none; border: 1px dashed var(--border);
  border-radius: var(--radius-xs); color: var(--text-muted);
  font-size: 0.7rem; padding: 0.45rem; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  text-align: center;
}
.shift-add-btn:hover { border-color: var(--orange-dim); color: var(--orange-light); }

/* Add-shift inline form (appears inside column below button) */
.shift-add-form {
  background: var(--glass-3);
  border: 1px solid var(--orange-dim);
  border-radius: var(--radius-xs);
  padding: 0.6rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.shift-add-form select,
.shift-add-form input[type="time"] {
  background: var(--glass-1); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text); font-size: 0.75rem;
  padding: 0.3rem 0.5rem; width: 100%;
}
.shift-add-form-row { display: flex; gap: 0.35rem; }
.shift-add-form-row input { flex: 1; }
.shift-form-actions { display: flex; gap: 0.35rem; }
.shift-form-actions button { flex: 1; font-size: 0.72rem; padding: 0.35rem 0; }

/* Column color accents by day (Mon–Sun) */
.sched-col-mon .kanban-col-header { border-top: 2px solid #007AFF; }
.sched-col-tue .kanban-col-header { border-top: 2px solid #30D158; }
.sched-col-wed .kanban-col-header { border-top: 2px solid #FF6B00; }
.sched-col-thu .kanban-col-header { border-top: 2px solid #BF5AF2; }
.sched-col-fri .kanban-col-header { border-top: 2px solid #FFD60A; }
.sched-col-sat .kanban-col-header { border-top: 2px solid #FF375F; }
.sched-col-sun .kanban-col-header { border-top: 2px solid #64D2FF; }
.sched-col-today .kanban-col-header {
  background: rgba(255,107,0,0.07) !important;
}
.sched-col-today .kanban-col-title { color: var(--orange-light) !important; }

/* Punch history detail table (full view in left-pane overflow) */
.sched-delta-pos { color: #30D158; font-weight: 700; }
.sched-delta-neg { color: #FF453A; font-weight: 700; }
.sched-active-badge {
  display: inline-block; padding: 0.12rem 0.45rem;
  background: rgba(48,209,88,0.15); color: #30D158;
  border-radius: 999px; font-size: 0.68rem; font-weight: 700;
  border: 1px solid rgba(48,209,88,0.25);
}

/* ══════════════════════════════════════════════════════════════
   TIMESHEET MODAL
   ══════════════════════════════════════════════════════════════ */
.timesheet-modal-box {
  max-width: 940px; width: 95vw;
  max-height: 90vh;
  display: flex; flex-direction: column;
}
.timesheet-filters {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--glass-1);
}
.ts-filter-row {
  display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap;
}
.ts-filter-row .field { flex: 1; min-width: 140px; margin: 0; }
.ts-filter-row .field label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted); display: block; margin-bottom: 0.3rem;
}
.ts-filter-btn-wrap { display: flex; align-items: flex-end; }
.timesheet-table-wrap { overflow: auto; flex: 1; }
.timesheet-summary {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--glass-1);
}
.ts-summary-row {
  display: flex; gap: 1.5rem; font-size: 0.82rem;
  color: var(--text-dim); flex-wrap: wrap;
}
.ts-summary-row strong { color: var(--text); }

/* Timesheet / punch detail table */
.sched-punch-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.sched-punch-table th {
  background: var(--glass-1); padding: 0.6rem 0.85rem;
  text-align: left; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.sched-punch-table td {
  padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
}
.sched-punch-table tr:last-child td { border-bottom: none; }
.sched-punch-table-wrap {
  background: var(--glass-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow-x: auto;
}

/* Break prompt modal */
.break-prompt-box { max-width: 380px; width: 95%; }
.break-prompt-body { padding: 1.25rem 1.5rem; text-align: center; }
.break-prompt-question { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.4rem; }
.break-prompt-sub { font-size: 0.82rem; color: var(--text-muted); }
.break-prompt-actions {
  display: flex; gap: 0.75rem; padding: 0 1.5rem 1.25rem;
}
.break-prompt-actions button { flex: 1; }

/* Responsive: collapse split on narrow screens */
@media (max-width: 900px) {
  .sched-split-layout { grid-template-columns: 1fr; }
  .sched-left-pane { border-right: none; border-bottom: 1px solid var(--border); max-height: 220px; }
  .sched-shift-board { padding: 0.4rem; }
}

/* ══════════════════════════════════════════════════════════════
   STORE CREDIT — Payment Modal
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   STORE CREDIT — Payment Modal
   ══════════════════════════════════════════════════════════════ */

/* ── Credit available banner ── */
.pmt-credit-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.62rem 0.9rem;
  margin-bottom: 0.85rem;
  background: linear-gradient(135deg,
    rgba(48, 209, 88, 0.12) 0%,
    rgba(48, 209, 88, 0.06) 100%);
  border: 1px solid rgba(48, 209, 88, 0.32);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 18px rgba(48, 209, 88, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: creditBannerIn 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
}
@keyframes creditBannerIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.pmt-credit-banner-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
}
.pmt-credit-banner-text {
  flex: 1;
  font-size: 0.82rem;
  color: var(--success);
  font-weight: 500;
  line-height: 1.4;
}
.pmt-credit-banner-text strong {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.9rem;
  color: #4ade80;
}
.pmt-credit-apply-btn {
  background: rgba(48, 209, 88, 0.18);
  border: 1px solid rgba(48, 209, 88, 0.38);
  border-radius: var(--radius-pill);
  color: var(--success);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
  transition: var(--spring);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.pmt-credit-apply-btn:hover {
  background: rgba(48, 209, 88, 0.28);
  border-color: rgba(48, 209, 88, 0.55);
  transform: scale(1.04);
}

/* ── Store Credit in payment method select ── */
#pmtMethod option[value="Store Credit"]:not(:disabled) {
  color: #34c759;
  font-weight: 700;
}
#pmtMethod option[value="Store Credit"]:disabled {
  color: #555;
}

/* ── Add Store Credit to Account section ── */
.pmt-add-credit-section {
  margin-top: 1.1rem;
  padding: 0.85rem 0.9rem;
  background: rgba(0, 122, 255, 0.05);
  border: 1px solid rgba(0, 122, 255, 0.18);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pmt-add-credit-header {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.pmt-add-credit-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #70b9ff;
  letter-spacing: 0.01em;
}
.pmt-add-credit-sub {
  font-size: 0.67rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.pmt-add-credit-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.pmt-add-credit-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.pmt-add-credit-input {
  width: 110px;
  background: var(--glass-2);
  border: 1px solid rgba(0, 122, 255, 0.28);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 0.88rem;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 0.42rem 0.65rem;
  outline: none;
  transition: var(--ease);
}
.pmt-add-credit-input:focus {
  border-color: rgba(0, 122, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15);
}
.pmt-add-credit-input::placeholder { color: var(--text-muted); font-weight: 400; }

/* System notes in customer history — subtle teal tint */
.cn-system-note {
  background: rgba(0, 122, 255, 0.06);
  border-left: 2px solid rgba(0, 122, 255, 0.35);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  padding-left: 0.55rem;
  opacity: 0.9;
}
.cn-system-badge {
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #70b9ff;
  background: rgba(0, 122, 255, 0.12);
  border: 1px solid rgba(0, 122, 255, 0.22);
  border-radius: 3px;
  padding: 0 0.3rem;
  margin-right: 0.3rem;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════
   STORE CREDIT — CONFIRM BUTTON + REASON FIELD
   ══════════════════════════════════════════════════════════════ */
.pmt-add-credit-reason {
  flex: 1;
  background: var(--glass-2);
  border: 1px solid rgba(0, 122, 255, 0.28);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 0.84rem;
  padding: 0.42rem 0.65rem;
  outline: none;
  transition: var(--ease);
}
.pmt-add-credit-reason:focus {
  border-color: rgba(0, 122, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15);
}
.pmt-add-credit-reason::placeholder { color: var(--text-muted); }

.pmt-add-credit-actions { margin-top: 0.2rem; }

.btn-add-credit-confirm {
  width: 100%;
  background: rgba(0, 122, 255, 0.14);
  border: 1px solid rgba(0, 122, 255, 0.35);
  border-radius: var(--radius-xs);
  color: #70b9ff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.52rem 1rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  letter-spacing: 0.01em;
}
.btn-add-credit-confirm:hover {
  background: rgba(0, 122, 255, 0.22);
  border-color: rgba(0, 122, 255, 0.55);
  color: #a8d4ff;
}
.btn-add-credit-confirm:active { transform: scale(0.98); }

/* Updated sub-text — no longer says "logged automatically" */
.pmt-add-credit-sub { font-style: italic; }

/* ══════════════════════════════════════════════════════════════
   CUSTOMER HISTORY MODAL — CREDIT STRIP + TABS
   ══════════════════════════════════════════════════════════════ */
.ch-credit-strip {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1.5rem;
  background: rgba(48, 209, 88, 0.07);
  border-bottom: 1px solid rgba(48, 209, 88, 0.2);
}
.ch-credit-strip-icon { font-size: 1rem; }
.ch-credit-strip-label {
  font-size: 0.78rem; font-weight: 600; color: var(--text-dim);
}
.ch-credit-strip-amount {
  font-size: 0.95rem; font-weight: 800;
  color: #30D158;
  font-family: var(--font-mono);
}

.ch-tab-bar {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--glass-1);
}
.ch-tab {
  background: none; border: none; cursor: pointer;
  padding: 0.65rem 1.25rem;
  font-size: 0.8rem; font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.ch-tab:hover { color: var(--text-dim); }
.ch-tab.ch-tab-active {
  color: var(--orange-light);
  border-bottom-color: var(--orange);
  background: rgba(255,107,0,0.04);
}

/* Credit history table cells */
.ch-credit-type {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700;
  padding: 0.1rem 0.45rem; border-radius: 4px;
  margin-bottom: 0.2rem;
}
.ch-credit-add  { background: rgba(48,209,88,0.12);  color: #30D158; }
.ch-credit-debit { background: rgba(255,69,58,0.12); color: #FF453A; }
.ch-credit-desc {
  font-size: 0.72rem; color: var(--text-muted); line-height: 1.4;
  max-width: 360px;
}

/* ══════════════════════════════════════════════════════════════
   CUSTOMERS PAGE VIEW
   ══════════════════════════════════════════════════════════════ */
.cust-page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.cust-page-title-wrap {
  display: flex; align-items: center; gap: 0.75rem;
}
.cust-page-icon { font-size: 1.8rem; }
.cust-page-title {
  font-size: 1.5rem; font-weight: 800;
  color: var(--text); letter-spacing: -0.02em; margin: 0;
}
.cust-page-sub { font-size: 0.78rem; color: var(--text-muted); margin: 0; }
.cust-page-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Search bar */
.cust-search-wrap {
  display: flex; align-items: center; gap: 0;
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 0.6rem;
  transition: border-color 0.15s;
  min-width: 280px;
}
.cust-search-wrap:focus-within { border-color: var(--orange-dim); }
.cust-search-icon { color: var(--text-muted); font-size: 1rem; flex-shrink: 0; }
.cust-search-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 0.85rem;
  padding: 0.55rem 0.5rem;
}
.cust-search-input::placeholder { color: var(--text-muted); }
.cust-search-clear {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.75rem;
  padding: 0.2rem 0.1rem; transition: color 0.15s;
}
.cust-search-clear:hover { color: var(--text); }

/* Stats strip */
.cust-stats-strip {
  display: flex; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.cust-stat-chip {
  display: flex; flex-direction: column; gap: 0.15rem;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
  min-width: 140px;
  box-shadow: var(--shadow-sm);
}
.cust-stat-label {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted);
}
.cust-stat-val {
  font-size: 1.2rem; font-weight: 800;
  color: var(--text); font-family: var(--font-mono);
}

/* Table card */
.cust-table-card {
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cust-table-wrap { overflow-x: auto; }
.cust-table {
  width: 100%; border-collapse: collapse; font-size: 0.84rem;
}
.cust-table thead {
  background: var(--glass-2);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
}
.cust-table th {
  padding: 0.6rem 0.9rem;
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); text-align: left; white-space: nowrap;
}
.cust-th-sortable { cursor: pointer; user-select: none; }
.cust-th-sortable:hover { color: var(--text-dim); }
.cust-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.cust-table tbody tr:hover { background: var(--glass-1); }
.cust-table tbody tr:last-child { border-bottom: none; }
.cust-table td { padding: 0.7rem 0.9rem; vertical-align: middle; }
.cust-empty-row {
  text-align: center; color: var(--text-muted);
  padding: 3rem !important; font-size: 0.88rem;
}

/* Row cells */
.cust-td-name {
  display: flex; align-items: center; gap: 0.65rem; min-width: 160px;
}
.cust-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--orange-glow); border: 1px solid var(--orange-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800;
  color: var(--orange-light); font-family: var(--font-mono);
}
.cust-name { font-weight: 700; color: var(--text); }
.cust-alt  { font-size: 0.7rem; color: var(--text-muted); }

.cust-td-phone { white-space: nowrap; }
.cust-phone-link {
  color: var(--blue); text-decoration: none; font-family: var(--font-mono);
  font-size: 0.82rem;
}
.cust-phone-link:hover { text-decoration: underline; }

.cust-td-addr { color: var(--text-dim); max-width: 200px; }
.cust-td-tix  { font-family: var(--font-mono); font-weight: 700; color: var(--text); text-align: center; }
.cust-td-last { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; }
.cust-td-credit { white-space: nowrap; }
.cust-td-actions { white-space: nowrap; }

.cust-credit-badge {
  display: inline-block;
  background: rgba(48,209,88,0.12);
  border: 1px solid rgba(48,209,88,0.25);
  color: #30D158;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  padding: 0.12rem 0.5rem; border-radius: 6px;
}
.cust-no-credit { color: var(--text-muted); font-size: 0.78rem; }

/* ══════════════════════════════════════════════════════════════
   PHONE SYSTEM MODULE STYLES
   ══════════════════════════════════════════════════════════════ */
.phone-system-view {
  padding: 1.5rem 2rem 3rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
}
.phone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.phone-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.phone-page-icon { font-size: 2rem; }
.phone-page-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  font-family: var(--font-condensed);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.phone-page-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.15rem 0 0 0;
}
.phone-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Provider status pill */
.phone-provider-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.phone-provider-pill.status-online {
  background: rgba(48, 209, 88, 0.15);
  border: 1px solid rgba(48, 209, 88, 0.35);
  color: #30D158;
}
.phone-provider-pill.status-offline {
  background: rgba(255, 69, 58, 0.15);
  border: 1px solid rgba(255, 69, 58, 0.35);
  color: #FF453A;
}

/* Subnav */
.phone-subnav {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  overflow-x: auto;
}
.phone-subnav-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.65rem 1.15rem;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.phone-subnav-btn:hover { color: var(--text); }
.phone-subnav-btn.active {
  color: var(--orange-light);
  border-bottom-color: var(--orange);
}

/* Panels */
.phone-panel { display: none; }
.phone-panel.active { display: block; }

/* Stat Cards */
.phone-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.phone-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  box-shadow: var(--shadow-sm);
}
.phone-stat-card .stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.phone-stat-card .stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  font-family: var(--font-mono);
  margin-top: 0.35rem;
}
.text-success { color: #30D158 !important; }
.text-danger  { color: #FF453A !important; }
.text-warning { color: #FF9F0A !important; }
.text-info    { color: #0A84FF !important; }

/* Phone Card */
.phone-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
}
.phone-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
  font-family: var(--font-condensed);
  letter-spacing: 0.02em;
}

/* Dashboard Provider Strip */
.dash-provider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.dash-provider-title { font-size: 0.98rem; color: var(--text); }
.dash-provider-sub { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; }
.dash-provider-caps {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.dash-provider-caps .cap-label { font-size: 0.78rem; color: var(--text-muted); margin-right: 0.35rem; }
.phone-cap-tag {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.74rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

/* Activity Items */
.phone-activity-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.phone-activity-item:last-child { border-bottom: none; }
.phone-activity-item .act-icon { font-size: 1.35rem; }
.phone-activity-item .act-details { flex: 1; min-width: 0; }
.phone-activity-item .act-title { font-size: 0.88rem; color: var(--text); }
.phone-activity-item .act-phone { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); margin-left: 0.4rem; }
.phone-activity-item .act-meta { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.1rem; }

/* Status Chips */
.status-chip {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.chip-active, .chip-answered { background: rgba(48, 209, 88, 0.15); color: #30D158; }
.chip-closed, .chip-missed, .chip-failed { background: rgba(255, 69, 58, 0.15); color: #FF453A; }
.chip-voicemail { background: rgba(255, 159, 10, 0.15); color: #FF9F0A; }
.chip-quote { background: rgba(10, 132, 255, 0.15); color: #0A84FF; }
.chip-verified { background: rgba(48, 209, 88, 0.15); color: #30D158; }
.chip-mismatch { background: rgba(255, 69, 58, 0.15); color: #FF453A; }
.chip-forwarded { background: rgba(191, 90, 242, 0.15); color: #BF5AF2; }

/* Calls Table */
.phone-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.phone-filter-group { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.phone-filter-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.phone-filter-chip:hover { color: var(--text); border-color: var(--border-hover); }
.phone-filter-chip.active {
  background: var(--orange-ultra);
  border-color: var(--orange);
  color: var(--orange-light);
}
.phone-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.phone-table th {
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.phone-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.badge-known-cust { color: var(--blue); font-weight: 600; }
.badge-unknown-cust { color: var(--text-muted); }
.phone-dir-tag { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.phone-time-cell { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); }

/* Voicemail cards */
.phone-voicemail-list { display: flex; flex-direction: column; gap: 1rem; }
.vm-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  transition: border-color 0.15s;
}
.vm-card.vm-unread {
  border-color: var(--orange);
  background: rgba(255, 149, 0, 0.04);
}
.vm-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}
.vm-phone { font-family: var(--font-mono); color: var(--text-muted); margin-left: 0.4rem; font-size: 0.85rem; }
.badge-unread {
  background: var(--orange);
  color: #000;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  margin-left: 0.5rem;
}
.vm-audio-player { margin-bottom: 0.85rem; }
.vm-transcript {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.85rem;
}
.vm-transcript-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
.vm-transcript p { margin: 0.25rem 0 0 0; font-size: 0.88rem; color: var(--text-dim); font-style: italic; }
.vm-actions-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Messages layout */
.phone-messages-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .phone-messages-layout { grid-template-columns: 1fr; }
}
.sms-form-group { margin-bottom: 0.85rem; }
.sms-form-group label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; }
.sms-template-chips { display: flex; flex-direction: column; gap: 0.35rem; }
.sms-feed { display: flex; flex-direction: column; gap: 0.75rem; max-height: 520px; overflow-y: auto; padding-right: 0.5rem; }
.sms-message-card {
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.sms-inbound { background: var(--bg-input); margin-right: 2rem; }
.sms-outbound { background: rgba(10, 132, 255, 0.08); border-color: rgba(10, 132, 255, 0.25); margin-left: 2rem; }
.sms-meta { display: flex; justify-content: space-between; font-size: 0.78rem; margin-bottom: 0.4rem; }
.sms-time { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.72rem; }
.sms-body { font-size: 0.88rem; color: var(--text); line-height: 1.4; }
.sms-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.45rem; }

/* Quote lead cards */
.quote-leads-list { display: flex; flex-direction: column; gap: 0.85rem; }
.quote-lead-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
}
.quote-lead-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.quote-phone { font-family: var(--font-mono); color: var(--text-muted); margin-left: 0.5rem; font-size: 0.85rem; }
.quote-status-tag { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 4px; background: rgba(10, 132, 255, 0.15); color: #0A84FF; }
.quote-lead-body { font-size: 0.84rem; color: var(--text-dim); margin-bottom: 0.75rem; }
.quote-actions { display: flex; gap: 0.5rem; }

/* Settings form */
.settings-section-card { margin-bottom: 1.5rem; }
.settings-help-text { font-size: 0.84rem; color: var(--text-muted); margin-top: -0.5rem; margin-bottom: 1rem; line-height: 1.4; }
.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.settings-field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; }
.test-result-box {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: pre-wrap;
}
.test-box-success { border-color: rgba(48, 209, 88, 0.4); color: #30D158; }
.test-box-error { border-color: rgba(255, 69, 58, 0.4); color: #FF453A; }
.provider-webhook-info {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}
.provider-webhook-info label { font-size: 0.76rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.5rem; display: block; }
.webhook-url-row { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.35rem; }
.webhook-url-row code { color: var(--orange-light); font-family: var(--font-mono); }

/* Simulator pre */
.sim-output-pre {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #30D158;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
}
.call-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  background: var(--bg-input);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.detail-item { font-size: 0.85rem; color: var(--text); }
.detail-lbl { color: var(--text-muted); font-size: 0.78rem; margin-right: 0.35rem; }

/* ══════════════════════════════════════════════════════════════
   PAYMENT SYSTEM MODULE STYLES
   ══════════════════════════════════════════════════════════════ */
.pmt-cat-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pmt-cat-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.pmt-cat-val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #30D158;
  font-size: 0.95rem;
}
.pmt-cat-cnt {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.pmt-ticket-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: rgba(0, 122, 255, 0.15);
  color: #0A84FF;
}
.pmt-method-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.pmt-status-chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  text-transform: capitalize;
}
.pmt-status-chip.status-succeeded {
  background: rgba(48, 209, 88, 0.15);
  color: #30D158;
}
.pmt-status-chip.status-partially_refunded {
  background: rgba(255, 159, 10, 0.15);
  color: #FF9F0A;
}
.pmt-status-chip.status-refunded {
  background: rgba(255, 69, 58, 0.15);
  color: #FF453A;
}
.pmt-status-chip.status-pending {
  background: rgba(10, 132, 255, 0.15);
  color: #0A84FF;
}
.pmt-status-chip.status-failed {
  background: rgba(255, 69, 58, 0.2);
  color: #FF453A;
}
.btn-table-action {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.3rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-table-action:hover {
  border-color: #FF453A;
  color: #FF453A;
  background: rgba(255, 69, 58, 0.08);
}

/* ══════════════════════════════════════════════════════════════
   POS TERMINAL PAYMENT MODAL BANNER
   ══════════════════════════════════════════════════════════════ */
.pos-terminal-banner {
  margin-top: 0.85rem;
  background: rgba(10, 132, 255, 0.08);
  border: 1px solid rgba(10, 132, 255, 0.35);
  border-radius: var(--radius-sm, 8px);
  padding: 0.85rem 1rem;
  transition: all 0.25s ease;
  animation: fadeIn 0.2s ease;
}
.pos-terminal-banner.banner-success {
  background: rgba(48, 209, 88, 0.1);
  border-color: rgba(48, 209, 88, 0.4);
}
.pos-terminal-banner.banner-error {
  background: rgba(255, 69, 58, 0.1);
  border-color: rgba(255, 69, 58, 0.4);
}
.pos-term-banner-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.pos-term-icon {
  font-size: 1.5rem;
}
.pos-term-header-text {
  flex: 1;
}
.pos-term-header-text strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text);
}
.pos-term-subtitle {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 0.15rem;
}
.pos-term-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pos-term-badge.badge-pending {
  background: rgba(10, 132, 255, 0.2);
  color: #0A84FF;
  border: 1px solid rgba(10, 132, 255, 0.4);
}
.pos-term-badge.badge-success {
  background: rgba(48, 209, 88, 0.2);
  color: #30D158;
  border: 1px solid rgba(48, 209, 88, 0.4);
}
.pos-term-badge.badge-error {
  background: rgba(255, 69, 58, 0.2);
  color: #FF453A;
  border: 1px solid rgba(255, 69, 58, 0.4);
}
.pos-term-detail {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  white-space: pre-wrap;
}
.pos-term-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.btn-term-retry {
  background: #0A84FF;
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.45rem 1rem;
  border: none;
  border-radius: var(--radius-pill, 20px);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-term-retry:hover {
  background: #0070E0;
  transform: translateY(-1px);
}
.btn-term-cancel {
  font-size: 0.76rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  background: transparent;
  border: none;
}
.btn-term-cancel:hover {
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════
   DEVICE MANAGEMENT SYSTEM & AI SYNC STYLING
   ═══════════════════════════════════════════════════════════════ */
#devicesView {
  padding-bottom: 4rem;
}
.devices-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.devices-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.devices-title-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--cyan, #00d2ff);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.devices-title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}
.devices-subtitle {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 0;
}
.devices-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.btn-ai-sync {
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.22) 0%, rgba(142, 68, 173, 0.28) 100%);
  border: 1px solid rgba(0, 210, 255, 0.55);
  border-radius: var(--radius-pill);
  color: #e0f7ff;
  font-weight: 700;
  font-size: 0.84rem;
  padding: 0.56rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.25);
}
.btn-ai-sync:hover {
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.35) 0%, rgba(142, 68, 173, 0.42) 100%);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 0 28px rgba(0, 210, 255, 0.45);
}
.ai-sparkle-icon {
  font-size: 1.05rem;
  filter: drop-shadow(0 0 6px #00d2ff);
}

/* Brand Filter Bar */
.brand-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
  scrollbar-width: none;
}
.brand-filter-bar::-webkit-scrollbar { display: none; }
.brand-chip {
  background: var(--glass-1, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: var(--radius-pill);
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.brand-chip:hover {
  background: var(--glass-2, rgba(255,255,255,0.12));
  color: #fff;
}
.brand-chip.active {
  background: #ff6b00;
  border-color: #ff8c2a;
  color: #fff;
  box-shadow: 0 0 16px rgba(255, 107, 0, 0.4);
}

/* Controls Bar */
.devices-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.devices-search-box {
  position: relative;
  flex: 1;
  min-width: 280px;
}
.devices-search-box input {
  width: 100%;
  padding-left: 2.4rem !important;
  padding-right: 2rem !important;
  background: #101524 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: #ffffff;
}
.search-glass-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--text-muted);
  pointer-events: none;
}
.btn-search-clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
}
.btn-search-clear:hover { color: #fff; }

.devices-filter-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.dev-select-filter {
  min-width: 170px;
  background: #101524 !important;
}
.dev-view-toggle {
  display: flex;
  background: #101524;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.dev-view-btn {
  background: transparent;
  color: var(--text-muted);
  padding: 0.45rem 0.75rem;
  border: none;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dev-view-btn.active, .dev-view-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* Stats Strip */
.devices-stats-strip {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--glass-1, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.dev-stat-item strong {
  color: var(--cyan, #00d2ff);
  font-family: var(--font-mono);
}

/* Device Catalog Grid */
.devices-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}
.devices-catalog-grid.list-layout {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Device Card */
.dev-card {
  background: #0f1422;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.dev-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--brand-accent, #ff6b00);
}
.dev-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 180, 255, 0.45);
  box-shadow: 0 8px 28px rgba(0,0,0,0.7), 0 0 16px rgba(0, 180, 255, 0.15);
}
.dev-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.dev-brand-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--orange, #ff6b00);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dev-category-pill {
  font-size: 0.68rem;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: #c0d2e8;
  white-space: nowrap;
}
.dev-model-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
}
.dev-series-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 0.65rem;
}
.dev-models-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}
.dev-model-num-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: rgba(0, 210, 255, 0.12);
  color: #5adaff;
  border: 1px solid rgba(0, 210, 255, 0.25);
}
.dev-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 0.75rem;
  color: var(--text-dim);
}
.dev-meta-pill {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.dev-meta-pill strong {
  color: #fff;
}
.dev-card-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-dev-action {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: #e0e8f2;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-dev-action:hover {
  background: rgba(0, 122, 255, 0.25);
  border-color: rgba(0, 122, 255, 0.5);
  color: #fff;
}

/* List Layout Card Overrides */
.devices-catalog-grid.list-layout .dev-card {
  flex-direction: row;
  align-items: center;
  padding: 0.75rem 1.2rem;
}
.devices-catalog-grid.list-layout .dev-card-top { margin-bottom: 0; min-width: 140px; }
.devices-catalog-grid.list-layout .dev-card-mid { flex: 1; padding: 0 1rem; }
.devices-catalog-grid.list-layout .dev-model-name { font-size: 0.95rem; margin-bottom: 0; }
.devices-catalog-grid.list-layout .dev-models-strip { margin-bottom: 0; }
.devices-catalog-grid.list-layout .dev-card-meta-row { border-top: none; padding-top: 0; gap: 1rem; }

/* Modal Sections */
.dev-editor-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 1.1rem;
}
.dev-editor-sec-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--orange, #ff6b00);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
.dev-sec-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.85rem;
}
.dev-id-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.08);
  padding: 0.18rem 0.5rem;
  border-radius: 4px;
}
.dev-repairs-editor-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.dev-repair-row {
  background: #111522;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.dev-repair-main-fields {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 34px;
  gap: 0.6rem;
  align-items: center;
}
.dev-repair-skus-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.45rem;
  border-top: 1px dashed rgba(255,255,255,0.08);
  font-size: 0.74rem;
}
.dev-sku-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(0, 180, 255, 0.12);
  border: 1px solid rgba(0, 180, 255, 0.3);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  font-family: var(--font-mono);
  color: #72dcff;
}
.dev-sku-pill-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0;
  line-height: 1;
}
.dev-sku-pill-remove:hover { color: var(--danger); }
.btn-attach-sku {
  background: rgba(255,255,255,0.06);
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 0.72rem;
  padding: 0.18rem 0.55rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-attach-sku:hover {
  background: rgba(255, 107, 0, 0.15);
  border-color: #ff6b00;
  color: #fff;
}

/* AI Sync Drawer */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1100;
  display: flex;
  justify-content: flex-end;
  animation: fadeIn 0.2s ease;
}
.ai-sync-drawer {
  width: 92vw;
  max-width: 620px;
  height: 100vh;
  background: #0d121e;
  border-left: 1px solid rgba(0, 180, 255, 0.45);
  box-shadow: -16px 0 50px rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.drawer-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #111626;
}
.drawer-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ai-sparkle-large {
  font-size: 1.8rem;
  filter: drop-shadow(0 0 10px #00d2ff);
}
.drawer-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.drawer-subtitle {
  font-size: 0.76rem;
  color: var(--text-dim);
}
.drawer-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.3rem;
  transition: all 0.15s ease;
}
.drawer-close:hover { color: #fff; transform: scale(1.1); }

.ai-scan-status-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(0, 210, 255, 0.1);
  border-bottom: 1px solid rgba(0, 210, 255, 0.25);
  padding: 0.65rem 1.5rem;
  font-size: 0.78rem;
  color: #72dcff;
}
.ai-status-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00d2ff;
  animation: rm-blink 1.2s infinite;
  box-shadow: 0 0 10px #00d2ff;
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
}
.ai-approval-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.ai-source-badge {
  font-size: 0.68rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: rgba(48, 209, 88, 0.15);
  color: #30d158;
  font-weight: 600;
}
.ai-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.65rem;
}
.ai-detected-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ai-detected-item {
  background: #121828;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 0.9rem;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  transition: all 0.15s ease;
}
.ai-detected-item:hover {
  border-color: rgba(0, 180, 255, 0.4);
}
.ai-detected-info {
  flex: 1;
}
.ai-item-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
.ai-item-brand {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--orange, #ff6b00);
  text-transform: uppercase;
}
.ai-item-name {
  font-weight: 700;
  color: #ffffff;
  font-size: 0.92rem;
}
.ai-item-models {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #72dcff;
  margin-bottom: 0.35rem;
}
.ai-item-repairs {
  font-size: 0.72rem;
  color: var(--text-dim);
}
.drawer-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  background: #111626;
}

/* ═══════════════════════════════════════════════════════════════
   AI LIVE RESEARCH THINKING & TELEMETRY CONSOLE
   ═══════════════════════════════════════════════════════════════ */
.ai-thinking-console {
  background: #080c14;
  border: 1px solid rgba(0, 210, 255, 0.35);
  border-radius: 8px;
  margin: 0 1.5rem 1rem 1.5rem;
  padding: 0.85rem 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 0 15px rgba(0,210,255,0.05);
}
.ai-thinking-console::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00d2ff, #7209b7, #00ff88);
  opacity: 0.8;
}
.ai-thinking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.ai-thinking-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ai-thinking-chip {
  font-size: 0.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: rgba(0, 210, 255, 0.15);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #72dcff;
  font-family: var(--font-mono);
}
.ai-thinking-radar {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 8px #00ff88;
  animation: rm-blink 0.9s infinite ease-in-out;
}
.ai-thinking-log-stream {
  font-family: var(--font-mono), monospace;
  font-size: 0.74rem;
  line-height: 1.5;
  color: #a0c4ff;
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-right: 0.3rem;
}
.ai-thinking-log-line {
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(0, 210, 255, 0.5);
  animation: fadeIn 0.2s ease-in;
}
.ai-thinking-log-line.active {
  background: rgba(0, 210, 255, 0.1);
  color: #ffffff;
  border-left-color: #00ff88;
}
.ai-thinking-log-line.error {
  border-left-color: #ff3b30;
  color: #ff8a80;
  background: rgba(255, 59, 48, 0.1);
}
.ai-thinking-stepper {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}
.ai-step-badge {
  font-size: 0.66rem;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.08);
}
.ai-step-badge.done {
  background: rgba(48, 209, 88, 0.12);
  color: #30d158;
  border-color: rgba(48, 209, 88, 0.3);
}
.ai-step-badge.working {
  background: rgba(0, 210, 255, 0.15);
  color: #00d2ff;
  border-color: rgba(0, 210, 255, 0.4);
  animation: rm-blink 1s infinite;
}

/* ═══════════════════════════════════════════════════════════════
   SUGGESTED REPAIR PARTS INTEGRATION IN TICKETS
   ═══════════════════════════════════════════════════════════════ */
.suggested-parts-card {
  margin-top: 0.85rem;
  background: #0e1422;
  border: 1px solid rgba(0, 180, 255, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  animation: fadeUp 0.2s ease;
}
.spc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.spc-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--cyan, #00d2ff);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.spc-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.spc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
  font-size: 0.8rem;
  transition: all 0.15s ease;
}
.spc-item:hover {
  background: rgba(0, 122, 255, 0.15);
  border-color: rgba(0, 122, 255, 0.3);
}
.spc-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.spc-repair-name {
  font-weight: 600;
  color: #fff;
}
.spc-sku-desc {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #8da4be;
}
.spc-add-btn {
  background: rgba(48, 209, 88, 0.15);
  border: 1px solid rgba(48, 209, 88, 0.35);
  border-radius: var(--radius-pill);
  color: #30d158;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.spc-add-btn:hover {
  background: #30d158;
  color: #000;
  box-shadow: 0 0 12px rgba(48, 209, 88, 0.4);
}

/* =============================================================
   TECH NEWS RSS FEED VIEW STYLES
   ============================================================= */
.news-page-header,
.news-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 1rem;
}

.news-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.news-title-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue, #007aff);
  text-transform: uppercase;
  background: rgba(0, 122, 255, 0.12);
  border: 1px solid rgba(0, 122, 255, 0.25);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  display: inline-block;
  width: fit-content;
}

.news-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

.news-subtitle {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 0;
}

.news-header-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.news-header-title h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

.news-article-count,
.news-stats-pill {
  font-size: 0.78rem;
  color: var(--text-dim);
  background: var(--glass-1);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.news-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.news-cache-status {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
}

.btn-refresh-news {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.refresh-spin-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* Category Bar */
.news-category-bar,
.news-categories-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.news-cat-chip {
  background: var(--glass-1);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.news-cat-chip:hover {
  background: var(--glass-2);
  color: var(--text);
  border-color: var(--border-hi);
  transform: translateY(-1px);
}

.news-cat-chip.active {
  background: rgba(0, 122, 255, 0.2);
  color: #fff;
  border-color: rgba(0, 122, 255, 0.5);
  box-shadow: 0 0 14px rgba(0, 122, 255, 0.3);
}

/* Controls Bar */
.news-controls-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.news-search-box,
.news-search-wrapper {
  position: relative;
  flex: 1;
  min-width: 260px;
}

.news-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

.news-search-box input,
.news-search-input {
  width: 100%;
  padding: 0.6rem 2.2rem 0.6rem 2.25rem;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.85rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.news-search-box input:focus,
.news-search-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

.btn-search-clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.2rem;
  line-height: 1;
}

.btn-search-clear:hover {
  color: var(--text);
}

.news-filter-group,
.news-search-filter-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.news-select-filter,
.news-source-select {
  max-width: 260px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.6rem 0.85rem;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.2s;
}

.news-select-filter:focus,
.news-source-select:focus {
  outline: none;
  border-color: var(--blue);
}

/* Feed Grid */
.news-feed-grid,
#newsFeedContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

/* News Card */
.news-card {
  background: rgba(18, 18, 24, 0.75);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s, border-color 0.22s;
  box-shadow: var(--shadow-sm);
  contain: layout style;
  content-visibility: auto;
  contain-intrinsic-size: 320px;
}

.news-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 255, 255, 0.05);
}

.news-card-media {
  width: 100%;
  height: 180px;
  overflow: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.3);
}

.news-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.news-card:hover .news-card-media img {
  transform: scale(1.05);
}

.news-card-body {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.72rem;
}

.news-badge-source {
  background: var(--badge-color, #3b82f6);
  color: #fff;
  font-weight: 700;
  font-size: 0.68rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.news-badge-cat {
  color: var(--text-dim);
  background: var(--glass-2);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

.news-time {
  margin-left: auto;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.news-card-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.6rem;
}

.news-card-title a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s;
}

.news-card-title a:hover {
  color: var(--blue);
}

.news-card-title .ext-icon {
  font-size: 0.72rem;
  opacity: 0.5;
  margin-left: 0.3rem;
  vertical-align: middle;
}

.news-card-snippet {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 1rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

.news-read-more {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.15s ease;
}

.news-read-more:hover {
  gap: 0.55rem;
  text-decoration: underline;
}

/* Skeleton Loading Shimmer */
@keyframes newsShimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

.news-skeleton-card {
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  height: 340px;
  display: flex;
  flex-direction: column;
}

.news-skeleton-thumb {
  height: 160px;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 800px 100%;
  animation: newsShimmer 1.5s infinite linear;
}

.news-skeleton-content {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.news-skeleton-pill {
  width: 80px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 800px 100%;
  animation: newsShimmer 1.5s infinite linear;
}

.news-skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 800px 100%;
  animation: newsShimmer 1.5s infinite linear;
}

.news-skeleton-line.title {
  height: 18px;
  width: 95%;
}

.news-skeleton-line.title.short {
  width: 65%;
}

.news-skeleton-line.text {
  width: 100%;
}

.news-skeleton-line.text.short {
  width: 80%;
}

.news-skeleton-footer {
  margin-top: auto;
  padding-top: 0.5rem;
}

.news-skeleton-line.time {
  width: 90px;
  height: 12px;
}

/* Empty State */
.news-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  text-align: center;
  background: var(--glass-1);
  border: 1px dashed var(--border-hi);
  border-radius: var(--radius);
  margin-top: 1.5rem;
}

.news-empty-icon {
  font-size: 2.8rem;
  margin-bottom: 0.75rem;
  opacity: 0.7;
}

.news-empty-state h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.news-empty-state p {
  font-size: 0.88rem;
  color: var(--text-dim);
  max-width: 420px;
  margin: 0;
}

/* =============================================================
   DASHBOARD TABS & KANBAN MIGRATION STYLES
   ============================================================= */
.db-view-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}

.db-view-tab {
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 1.15rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.db-view-tab:hover {
  background: var(--glass-2);
  color: var(--text);
  border-color: var(--border-hi);
  transform: translateY(-1px);
}

.db-view-tab.active {
  background: rgba(255, 107, 0, 0.18);
  border-color: rgba(255, 107, 0, 0.45);
  color: #fff;
  box-shadow: 0 0 16px rgba(255, 107, 0, 0.3);
}

.db-tab-content {
  display: none;
  width: 100%;
}

.db-tab-content.active {
  display: block;
  animation: fadeIn 0.2s ease-in-out;
}

.db-kanban-container {
  display: flex;
  flex-direction: column;
  background: rgba(6, 6, 8, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  height: calc(100vh - 200px);
  min-height: 520px;
}

/* Full page Calendar view styles */
.cal-full-layout {
  height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  background: rgba(6, 6, 8, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cal-full-pane {
  border-right: none;
  height: 100%;
}

/* Logo Uploader & Eyedropper Styles */
.admin-logo-upload-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 0;
  flex-wrap: wrap;
}

.admin-logo-preview-box {
  width: 120px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.4);
  border: 1px dashed var(--border-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.admin-logo-preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.admin-logo-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.admin-color-picker-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.admin-eyedropper-btn {
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
}

.admin-eyedropper-btn:hover {
  background: var(--glass-3);
  border-color: var(--orange);
  color: var(--orange-light);
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────
   WORKFLOW SEARCH & LIVE DROPDOWN RESULTS
   ────────────────────────────────────────────────────────── */
.workflow-search-container {
  padding: 0.75rem 1rem;
  background: rgba(8, 8, 12, 0.7);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  position: relative;
}

.workflow-search-wrap {
  position: relative;
  flex: 1;
  max-width: 680px;
}

.workflow-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #0d111c;
  backdrop-filter: var(--blur-xl, blur(20px));
  -webkit-backdrop-filter: var(--blur-xl, blur(20px));
  border: 1px solid rgba(0, 180, 255, 0.45);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.95), 0 4px 16px rgba(0, 0, 0, 0.7);
  z-index: 500;
  max-height: 380px;
  overflow-y: auto;
  animation: fadeUp 0.15s ease;
  transform: translateZ(0);
  contain: layout style;
}

.wsd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  font-size: 0.84rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.15s ease;
}

.wsd-item:last-child {
  border-bottom: none;
}

.wsd-item:hover, .wsd-item.active {
  background: rgba(0, 122, 255, 0.22);
}

.wsd-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.wsd-top-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.wsd-ticket-num {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--cyan, #00d2ff);
  background: rgba(0, 210, 255, 0.12);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.wsd-cust-name {
  font-weight: 600;
  color: #fff;
  font-size: 0.88rem;
}

.wsd-cust-phone {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
}

.wsd-device-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: #c4d7ed;
}

.wsd-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
  margin-left: 0.75rem;
}

.wsd-status-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
}

.wsd-empty {
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-style: italic;
}

/* ──────────────────────────────────────────────────────────
   REPAIR VIEW DEVICE UPDATE BUTTON & MODAL
   ────────────────────────────────────────────────────────── */
.rv-tile-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.rv-change-device-btn {
  background: rgba(0, 122, 255, 0.14);
  border: 1px solid rgba(0, 122, 255, 0.35);
  border-radius: var(--radius-pill);
  color: #70b9ff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.22rem 0.65rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.2s ease;
}

.rv-change-device-btn:hover {
  background: rgba(0, 122, 255, 0.28);
  border-color: #007aff;
  color: #ffffff;
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────
   RMA MANAGEMENT STYLES (Warning theme & Queue table)
   ────────────────────────────────────────────────────────── */
.btn-rma-warning {
  background: linear-gradient(135deg, #ff9500 0%, #ff3b30 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.86rem !important;
  padding: 0.54rem 1.2rem !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid rgba(255, 204, 0, 0.6) !important;
  box-shadow: 0 0 18px rgba(255, 149, 0, 0.45), 0 3px 12px rgba(255, 59, 48, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  letter-spacing: -0.01em;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  animation: rmaGlowPulse 3s infinite alternate ease-in-out;
  will-change: transform, filter;
}

@keyframes rmaGlowPulse {
  0% { filter: drop-shadow(0 0 2px rgba(255, 149, 0, 0.3)); transform: scale(1); }
  100% { filter: drop-shadow(0 0 6px rgba(255, 149, 0, 0.6)); transform: scale(1.02); }
}

.btn-rma-warning:hover {
  transform: scale(1.04) translateY(-1px) !important;
  box-shadow: 0 0 32px rgba(255, 149, 0, 0.7), 0 6px 20px rgba(255, 59, 48, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* RMA Badge & Status */
.rma-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.rma-status-pending {
  background: rgba(255, 149, 0, 0.15);
  color: #ff9f0a;
  border: 1px solid rgba(255, 149, 0, 0.4);
}

.rma-status-submitted {
  background: rgba(0, 122, 255, 0.15);
  color: #64d2ff;
  border: 1px solid rgba(0, 122, 255, 0.4);
}

.rma-status-credited {
  background: rgba(48, 209, 88, 0.15);
  color: #30d158;
  border: 1px solid rgba(48, 209, 88, 0.4);
}

.rma-status-rejected {
  background: rgba(255, 69, 58, 0.15);
  color: #ff453a;
  border: 1px solid rgba(255, 69, 58, 0.4);
}

/* RMA Auto-populated Card */
.rma-part-preview-card {
  background: rgba(15, 20, 32, 0.85);
  border: 1px solid rgba(0, 180, 255, 0.35);
  border-radius: var(--radius-sm, 8px);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.rma-preview-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.rma-preview-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.rma-preview-val {
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
}

.rma-preview-val.mono {
  font-family: var(--font-mono, monospace);
  color: var(--cyan, #00d2ff);
}

.rma-preview-val.stock {
  color: var(--orange-light, #ff9500);
}

/* RMA Batch Action Bar */
.rma-batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 149, 0, 0.12);
  border: 1px solid rgba(255, 149, 0, 0.3);
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.rma-batch-info {
  font-size: 0.85rem;
  font-weight: 600;
  color: #ff9f0a;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rma-filter-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}