/* ===================== Hero ===================== */
.hero {
  position: relative; padding: 120px 0 90px; overflow: hidden;
  background:
    radial-gradient(circle at 82% 15%, rgba(226,166,59,0.10), transparent 45%),
    linear-gradient(180deg, #0c1016 0%, #0a0d12 100%);
  border-bottom: 1px solid var(--border-1);
}
.hero-grid-bg {
  position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background-image: linear-gradient(var(--border-1) 1px, transparent 1px), linear-gradient(90deg, var(--border-1) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 75%);
}
.hero-light-sweep {
  position: absolute; top: 0; bottom: 0; width: 220px; left: -260px;
  background: linear-gradient(100deg, transparent, rgba(226,166,59,0.16) 45%, rgba(226,166,59,0.28) 50%, rgba(226,166,59,0.16) 55%, transparent);
  animation: hero-sweep 7s ease-in-out infinite;
}
@keyframes hero-sweep {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 260px)); }
}
@media (prefers-reduced-motion: reduce) { .hero-light-sweep { animation: none; opacity: 0; } }
.hero-watermark {
  position: absolute; top: -8%; right: -6%; pointer-events: none; z-index: 0;
  filter: drop-shadow(0 0 40px rgba(226,166,59,0.0));
  animation: hero-watermark-flicker 6.5s ease-in-out infinite;
}
@keyframes hero-watermark-flicker {
  0%, 100% { opacity: 0.05; filter: drop-shadow(0 0 0px rgba(226,166,59,0)); }
  8% { opacity: 0.05; }
  12% { opacity: 0.16; filter: drop-shadow(0 0 26px rgba(226,166,59,0.22)); }
  16% { opacity: 0.06; }
  45% { opacity: 0.07; filter: drop-shadow(0 0 0px rgba(226,166,59,0)); }
  52% { opacity: 0.2; filter: drop-shadow(0 0 32px rgba(226,166,59,0.28)); }
  60% { opacity: 0.08; }
  80% { opacity: 0.08; }
  88% { opacity: 0.17; filter: drop-shadow(0 0 24px rgba(226,166,59,0.2)); }
  94% { opacity: 0.06; }
}
@media (prefers-reduced-motion: reduce) { .hero-watermark { animation: none; opacity: 0.08; } }
@media (max-width: 860px) { .hero-watermark { display: none; } }
.hero-content { position: relative; max-width: 720px; z-index: 1; }
.hero h1 { font-size: 54px; margin: var(--sp-4) 0 var(--sp-4); }
.hero .lead { font-size: 17px; color: var(--text-2); max-width: 560px; margin-bottom: var(--sp-6); }
.hero-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.hero-stats { display: flex; gap: var(--sp-7); margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--border-1); }
.hero-stats .stat-num { font-family: var(--font-display); font-size: 28px; color: var(--accent-strong); }
.hero-stats .stat-label { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
@media (max-width: 720px) { .hero h1 { font-size: 36px; } .hero { padding: 80px 0 60px; } .hero-stats { gap: var(--sp-5); flex-wrap: wrap; } }

/* ===================== Booking entry section ===================== */
.booking-entry { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 780px) { .booking-entry { grid-template-columns: 1fr; } }
.booking-entry-card {
  padding: var(--sp-6); border: 1px solid var(--border-1); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface-1), var(--bg-1));
  display: flex; flex-direction: column; gap: var(--sp-4); transition: border-color 0.15s, transform 0.15s;
}
.booking-entry-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.booking-entry-card.primary { border-color: var(--accent-border); }
.booking-entry-icon { width: 46px; height: 46px; border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.booking-entry-card h3 { margin-bottom: 4px; }

/* ===================== Capability strip ===================== */
.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 980px) { .capability-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .capability-grid { grid-template-columns: 1fr; } }
.capability-item { padding: var(--sp-5); border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface-1); }
.capability-item .num { font-family: var(--font-mono); color: var(--accent); font-size: 12px; margin-bottom: var(--sp-2); }

/* ===================== Service catalog ===================== */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 980px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .service-grid { grid-template-columns: 1fr; } }
/* flex: 1 lets the card grow to fill its wrapper on the Service Catalog
   page (where a Book/Quote button row sits below it in a flex column) so
   cards with shorter descriptions/subitems still push their price-tag and
   the buttons beneath them down to a common baseline across the row,
   instead of each card's button row floating at a different height. Inert
   where ServiceCard is a direct grid item (booking/quote flows) since
   flex-grow only applies inside a flex container. */
.service-card { padding: var(--sp-5); border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface-1); cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.service-card:hover { border-color: var(--accent-border); background: var(--surface-2); }
.service-card.selected { border-color: var(--accent); box-shadow: var(--shadow-accent-glow); }
.service-card .icon-badge { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-2); color: var(--accent); font-size: 18px; margin-bottom: var(--sp-2); }
.service-card .price-tag { font-size: 12.5px; color: var(--text-3); margin-top: auto; padding-top: var(--sp-2); }
.service-subitems { font-size: 12px; color: var(--text-3); }

/* ===================== Booking flow shell ===================== */
.booking-shell { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-6); align-items: start; }
@media (max-width: 980px) { .booking-shell { grid-template-columns: 1fr; } }
.booking-main { min-width: 0; }
.booking-sidebar { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }

.summary-card { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-md); overflow: hidden; }
.summary-card-header { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-1); background: var(--surface-2); }
.summary-card-header .eyebrow { margin-bottom: 2px; }
.summary-card-body { padding: var(--sp-5); }
.summary-line { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13.5px; color: var(--text-1); }
.summary-line .amount { color: var(--text-0); font-weight: 600; font-family: var(--font-mono); }
.summary-line.muted { color: var(--text-3); font-size: 12.5px; }
.summary-total { display: flex; justify-content: space-between; padding-top: var(--sp-3); margin-top: var(--sp-2); border-top: 1px solid var(--border-2); font-size: 16px; font-weight: 700; color: var(--text-0); }
.summary-total .amount { color: var(--accent-strong); font-family: var(--font-mono); }
.position-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 3px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-1); margin: 2px 4px 2px 0; }

/* ===================== Config form panel ===================== */
.config-panel { display: flex; flex-direction: column; gap: var(--sp-4); }
.qty-stepper { display: flex; align-items: center; border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; width: fit-content; }
.qty-stepper button { background: var(--surface-3); border: none; color: var(--text-0); width: 38px; height: 38px; font-size: 16px; }
.qty-stepper button:hover { background: var(--surface-2); }
.qty-stepper input { width: 60px; text-align: center; border: none; background: var(--surface-1); height: 38px; color: var(--text-0); }
.chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-option { padding: 9px 16px; border: 1px solid var(--border-2); border-radius: 20px; font-size: 13px; cursor: pointer; color: var(--text-1); background: var(--surface-2); }
.chip-option:hover { border-color: var(--border-strong); }
.chip-option.selected { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-strong); }

/* ===================== Addon services list ===================== */
.addon-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--border-1); }
.addon-row:last-child { border-bottom: none; }
.addon-row .addon-info { display: flex; align-items: center; gap: 12px; }
.addon-row .addon-price { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); }

/* ===================== Confirmation page ===================== */
.confirmation-hero { text-align: center; padding: var(--sp-7) 0 var(--sp-5); }
.confirmation-icon { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--status-available); color: var(--status-available); display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto var(--sp-4); }
.booking-number { font-family: var(--font-mono); font-size: 28px; color: var(--accent-strong); letter-spacing: 0.03em; margin: var(--sp-2) 0; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-6); }
@media (max-width: 640px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-item .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); margin-bottom: 4px; }
.detail-item .v { font-size: 14.5px; color: var(--text-0); font-weight: 500; }

/* ===================== Public Track page ===================== */
.track-hero .eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.track-search-row {
  display: flex; align-items: center; gap: 10px; background: var(--surface-1); border: 1px solid var(--border-2);
  border-radius: var(--radius-md); padding: 6px 6px 6px 16px; transition: border-color 0.15s ease;
}
.track-search-row:focus-within { border-color: var(--accent); }
.track-search-row > svg { flex: 0 0 auto; color: var(--text-3); }
.track-search-input { border: none !important; background: transparent !important; padding: 10px 4px !important; flex: 1; }
.track-search-input:focus { outline: none; }
.track-result-card { animation: wiz-fade-slide-in 0.4s ease both; }
.track-result-icon {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: var(--accent-bg); color: var(--accent-strong); border: 1px solid var(--accent-border);
}
.track-result-empty { text-align: center; padding: var(--sp-6) var(--sp-5); }
.track-result-empty-icon {
  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center;
  background: rgba(224,86,76,0.12); color: var(--danger);
}
@media (prefers-reduced-motion: reduce) {
  .track-result-card { animation: none; }
}

/* ===================== Admin shell (horizontal top nav) ===================== */
.admin-shell { min-height: 100vh; display: flex; flex-direction: column; }
.admin-topnav {
  position: sticky; top: 0; z-index: 60; background: var(--bg-1);
  border-bottom: 1px solid var(--border-1);
}
.admin-topnav-row {
  display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-5); height: 58px;
}
.admin-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 17px; color: var(--text-0); flex-shrink: 0; }
.admin-brand-suffix { font-size: 12px; color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase; }
.admin-nav-scroll {
  display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; min-width: 0;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  -webkit-overflow-scrolling: touch;
  /* Room for the thin scrollbar below the links so it doesn't sit flush
     against admin-topnav's bottom border — it read as a stray unstyled bar
     wedged between the menu and the page content otherwise. */
  padding-bottom: 6px; margin-bottom: -6px;
}
/* An unstyled scrollbar renders with the OS's default (often a chunky flat
   gray bar on Windows/Chrome) — style it to a slim, on-brand thumb so the
   nav reads as an intentional, interactive scroll strip rather than a
   layout glitch. */
.admin-nav-scroll::-webkit-scrollbar { height: 4px; }
.admin-nav-scroll::-webkit-scrollbar-track { background: transparent; }
.admin-nav-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.admin-nav-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.admin-nav-group { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.admin-nav-divider { width: 1px; height: 22px; background: var(--border-1); margin: 0 var(--sp-2); flex-shrink: 0; }
.admin-nav-link {
  display: flex; align-items: center; gap: 7px; padding: 8px 12px; font-size: 13px; font-weight: 500;
  color: var(--text-2); border-radius: var(--radius-sm); white-space: nowrap; flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.admin-nav-link:hover { color: var(--text-0); background: var(--surface-1); }
.admin-nav-link.active { color: var(--accent-strong); background: var(--accent-bg); }
.admin-topnav-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.admin-user-chip { font-size: 12.5px; color: var(--text-2); text-align: right; line-height: 1.3; }
.admin-user-chip strong { color: var(--text-0); font-weight: 600; display: block; }
.admin-main { padding: var(--sp-6); min-width: 0; flex: 1; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-6); flex-wrap: wrap; gap: var(--sp-3); }
.admin-page-title { display: flex; flex-direction: column; gap: 2px; }
.admin-page-title .eyebrow { margin-bottom: 2px; }
@media (max-width: 900px) {
  .admin-topnav-row { height: auto; flex-wrap: wrap; padding: 10px var(--sp-4); gap: var(--sp-3); }
  /* flex: 1 (desktop) sets flex-basis: 0%, so a plain "width: 100%" override
     is ignored on a flex item — it kept shrinking to fit row 1 instead of
     wrapping. flex-basis: 100% forces it onto its own full-width line. */
  .admin-nav-scroll { order: 3; flex: 1 1 100%; width: auto; }
  .admin-user-chip { display: none; }
}

/* Overview/KPI stat-card grids — shared across every "cards at the top of
   a page" spot in the app (Dashboard, Bookings, Quotations, Customers,
   Finance & Billing, Warehouse, Supervisor Dashboard, Exceptions, Customer
   Profitability, the customer portal, etc). Previously `repeat(4, 1fr)` /
   `repeat(8, 1fr)` CSS grid: a FIXED column count that always stretches to
   fill the full container width, so each card grows as wide as 1/4 (or
   1/8) of the page — oversized on a wide desktop — and a partial last row
   (any card count not an exact multiple of the column count, which is most
   of them) sits flush against the LEFT edge with empty track space on the
   right, which reads as "not centered" even though the grid itself
   technically spans edge to edge.
   flex-wrap (not CSS grid) is deliberate here: grid's `justify-content`
   centers the ENTIRE shared column-track structure as one unit, so a
   partial last row still starts flush left within that shared structure —
   only the block as a whole ends up centered, not that row. A wrapping
   flex container centers each LINE of items independently, so every row —
   including a partial final row of, say, 4 cards where the row above had
   6 — is centered on its own. Cards get a fixed-ish basis (never grow past
   it, shrink only if the viewport is too narrow) so they stay small and
   consistent regardless of how many share a row. */
.kpi-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.kpi-grid .stat-card { flex: 0 1 190px; min-width: 150px; padding: var(--sp-4); }
.kpi-grid .stat-card .label { font-size: 10.5px; }
.kpi-grid .stat-card .value { font-size: 24px; margin-top: 4px; }
.kpi-grid .stat-card .delta { font-size: 11px; margin-top: 4px; }

/* Compact variant — for status/type overview rows that can carry up to 8-10
   cards (Bookings/Quotations/Customers list-page overviews) where the
   default .kpi-grid's larger basis would still wrap to 2-3 rows. Narrower
   cap than .kpi-grid, same wrap/per-row-centering behavior. */
.kpi-grid-compact { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.kpi-grid-compact .stat-card { flex: 0 1 140px; min-width: 110px; }
.stat-card-compact { padding: var(--sp-3) var(--sp-4); }
.stat-card-compact .label { font-size: 10.5px; }
.stat-card-compact .value { font-size: 22px; margin-top: 4px; }
.stat-card-compact .delta { font-size: 11px; margin-top: 4px; }
.chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-6); }
@media (max-width: 980px) { .chart-grid { grid-template-columns: 1fr; } }

/* ===================== FIND (admin employee search) ===================== */
.find-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  display: flex; align-items: center; gap: 8px;
  background: var(--accent); color: #14100a; border: none; border-radius: 999px;
  padding: 13px 20px 13px 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: var(--shadow-elevated), 0 0 0 4px rgba(226,166,59,0.14);
  cursor: pointer; transition: transform 0.15s ease, background 0.15s ease;
}
.find-float:hover { background: var(--accent-strong); transform: translateY(-1px) scale(1.03); }
.find-float:active { transform: translateY(0) scale(0.98); }
@media (max-width: 640px) {
  .find-float { right: 16px; bottom: 16px; padding: 13px; }
  .find-float span { display: none; }
}
.find-modal { max-width: 480px; }

/* ===================== Combined floating quick-actions button =====================
   Replaces separately mounting FindButton's own trigger + the old always-
   visible GlobalSearch top-nav bar: one button at the same bottom-right
   .find-float spot, which expands into a short vertical speed-dial of five
   actions (Find, Search, Make Booking, Make a Quotation, Track Shipment) on
   click. FindButton/GlobalSearchPanel/TrackShipmentModal keep their own
   modals — this only decides which one is open. */
.qa-fab-root { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.qa-fab-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.qa-fab-item {
  display: flex; align-items: center; gap: 10px; border: none; cursor: pointer;
  background: var(--surface-1); color: var(--text-0); border: 1px solid var(--border-1);
  border-radius: 999px; padding: 9px 16px 9px 14px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-elevated); white-space: nowrap;
  opacity: 0; transform: translateY(8px) scale(0.94);
  animation: qaFabItemIn 0.18s ease forwards;
}
.qa-fab-item .qa-fab-item-icon {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--accent-bg); color: var(--accent-strong); flex-shrink: 0;
}
.qa-fab-item:hover { background: var(--surface-2); border-color: var(--accent-border); }
@keyframes qaFabItemIn { to { opacity: 1; transform: translateY(0) scale(1); } }
.qa-fab-main {
  display: flex; align-items: center; gap: 8px;
  background: var(--accent); color: #14100a; border: none; border-radius: 999px;
  padding: 13px 20px 13px 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: var(--shadow-elevated), 0 0 0 4px rgba(226,166,59,0.14);
  cursor: pointer; transition: transform 0.15s ease, background 0.15s ease;
}
.qa-fab-main:hover { background: var(--accent-strong); transform: translateY(-1px) scale(1.03); }
.qa-fab-main:active { transform: translateY(0) scale(0.98); }
.qa-fab-main.open { transform: rotate(45deg); }
.qa-fab-main.open:hover { transform: rotate(45deg) scale(1.03); }
/* A slow breathing glow + icon nudge while closed, so the button reads as
   "alive" rather than a static pill sitting in the corner — stops the
   moment the speed-dial opens so it doesn't compete with the menu. */
.qa-fab-main:not(.open) { animation: qaFabBreathe 2.6s ease-in-out infinite; }
.qa-fab-main:not(.open):hover { animation-play-state: paused; }
@keyframes qaFabBreathe {
  0%, 100% { box-shadow: var(--shadow-elevated), 0 0 0 4px rgba(226,166,59,0.14); }
  50% { box-shadow: var(--shadow-elevated), 0 0 0 9px rgba(226,166,59,0.05); }
}
.qa-fab-main:not(.open) svg { animation: qaFabIconNudge 2.6s ease-in-out infinite; }
@keyframes qaFabIconNudge {
  0%, 80%, 100% { transform: scale(1); }
  90% { transform: scale(1.18); }
}
.qa-fab-backdrop { position: fixed; inset: 0; z-index: 89; }
@media (max-width: 640px) {
  .qa-fab-root { right: 16px; bottom: 16px; }
  .qa-fab-main { padding: 13px; }
  .qa-fab-main span { display: none; }
  .qa-fab-item span.qa-fab-item-label { display: inline; }
}

/* AI Investigate (QuickActionsFAB.js's InvestigateModal) — running chat
   transcript + voice controls. Scoped entirely under qa-investigate-*/qa-mic-*
   so nothing here touches any other modal or shared class. */
.qa-investigate-modal .modal-body { max-height: 70vh; overflow-y: auto; }
.qa-investigate-turns { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.qa-investigate-turn { display: flex; flex-direction: column; gap: 6px; }
.qa-investigate-q {
  align-self: flex-end; display: flex; align-items: center; gap: 6px;
  background: var(--accent-bg); color: var(--text-0); border: 1px solid var(--accent-border);
  border-radius: 12px 12px 2px 12px; padding: 7px 12px; font-size: 13px; font-weight: 600;
  max-width: 85%;
}
.qa-investigate-a {
  align-self: flex-start; background: var(--surface-1); border: 1px solid var(--border-1);
  border-radius: 12px 12px 12px 2px; padding: 10px 13px; max-width: 92%;
}
.qa-investigate-pending { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.qa-investigate-a-error { color: var(--danger); font-size: 13px; }
.qa-investigate-a-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.qa-investigate-replay {
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; border: 1px solid var(--border-1); background: var(--surface-0);
  color: var(--text-1); cursor: pointer; flex-shrink: 0;
}
.qa-investigate-replay:hover { background: var(--accent-bg); color: var(--accent-strong); border-color: var(--accent-border); }
.qa-investigate-voice-error {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  background: rgba(224,86,76,0.1); border: 1px solid rgba(224,86,76,0.35); color: var(--danger);
  border-radius: 8px; padding: 9px 11px; font-size: 12.5px; margin-bottom: 12px; line-height: 1.4;
}
.qa-investigate-dismiss { background: none; border: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; flex-shrink: 0; }
.qa-investigate-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qa-mic-btn {
  display: flex; align-items: center; gap: 7px; border: 1px solid var(--border-1); background: var(--surface-1);
  color: var(--text-0); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.qa-mic-btn:hover { background: var(--surface-2); }
.qa-mic-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.qa-mic-btn-listening { background: rgba(224,86,76,0.12); border-color: rgba(224,86,76,0.4); color: var(--danger); animation: qaMicPulse 1.4s ease-in-out infinite; }
@keyframes qaMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,86,76,0.28); }
  50% { box-shadow: 0 0 0 6px rgba(224,86,76,0); }
}
.qa-investigate-autospeak { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); cursor: pointer; user-select: none; }
.qa-investigate-autospeak input { cursor: pointer; }

/* ===================== Portal shell (legacy vertical sidebar) =====================
   Superseded by the unified .topnav below, which both AdminApp and PortalApp
   render now via <TopNav>. Left in place only in case anything still
   references it; no page currently renders .portal-shell/.portal-sidebar. */
.portal-shell { display: grid; grid-template-columns: 220px 1fr; }
.portal-sidebar { border-right: 1px solid var(--border-1); padding: var(--sp-5) 0; }
.portal-main { padding: var(--sp-6); min-width: 0; }
@media (max-width: 860px) { .portal-shell { grid-template-columns: 1fr; } .portal-sidebar { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border-1); padding: var(--sp-3) var(--sp-4); } }

/* ===================== Unified horizontal top nav (admin + portal) =====================
   One shared bar (see components/TopNav.tsx) for both the staff console and
   the customer portal, so they read as one product. Glass surface + a slim
   moving accent gradient + a gradient "active" pill (vs. the old flat
   tint) is what makes this read as high-end rather than a plain link list;
   the mobile burger + slide-down panel is a real second layout, not a
   squeeze of the desktop one. */
.topnav {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, rgba(14,19,25,0.96), rgba(14,19,25,0.88));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-1);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.topnav::before {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 15%, var(--accent-strong) 50%, var(--accent) 85%, transparent);
  opacity: 0.75;
}
.topnav-row { display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-5); height: 60px; }
.topnav-brand {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  transition: opacity 0.15s ease;
}
.topnav-brand:hover { opacity: 0.85; }
.topnav-brand-suffix {
  font-family: var(--font-display); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; color: var(--accent-strong);
  background: linear-gradient(135deg, rgba(226,166,59,0.16), rgba(226,166,59,0.04));
  border: 1px solid var(--accent-border);
}
.topnav-scroll {
  display: flex; align-items: center; gap: 4px; overflow-x: auto; flex: 1; min-width: 0;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  -webkit-overflow-scrolling: touch; padding-bottom: 6px; margin-bottom: -6px;
}
.topnav-scroll::-webkit-scrollbar { height: 4px; }
.topnav-scroll::-webkit-scrollbar-track { background: transparent; }
.topnav-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.topnav-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.topnav-group { display: flex; align-items: center; gap: 1px; flex-shrink: 0; padding: 3px; border-radius: 999px; transition: background 0.2s ease; }
.topnav-group:hover { background: rgba(255,255,255,0.03); }
.topnav-divider { width: 1px; height: 20px; background: var(--border-1); margin: 0 var(--sp-2); flex-shrink: 0; }
.topnav-link {
  position: relative; display: flex; align-items: center; gap: 7px; padding: 8px 13px; font-size: 13px; font-weight: 500;
  color: var(--text-2); border-radius: 999px; white-space: nowrap; flex-shrink: 0;
  transition: color 0.18s ease, background 0.18s ease;
}
.topnav-link svg { transition: transform 0.18s ease; }
.topnav-link:hover { color: var(--text-0); background: var(--surface-2); }
.topnav-link:hover svg { transform: translateY(-1px); }
.topnav-link.active {
  color: #14100a; font-weight: 600;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  box-shadow: 0 2px 10px rgba(226,166,59,0.35), 0 0 0 1px rgba(226,166,59,0.4);
}
.topnav-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--status-occupied); color: #fff; font-size: 10px; font-weight: 700;
}

/* ===================== Nav dropdowns (Operations / Warehouse / Commercial) =====================
   A dropdown trigger renders and highlights exactly like a plain .topnav-link
   (active parent = same gradient pill) with a caret appended; the menu itself
   is a small glass panel anchored under the trigger, not a second visual
   language. Enterprise-compact by design — this is what keeps the admin bar
   from needing 20 flat items across it. */
.topnav-dropdown { position: relative; flex-shrink: 0; }
.topnav-dropdown-trigger { border: none; background: transparent; cursor: pointer; font-family: inherit; }
.topnav-caret { transition: transform 0.15s ease; opacity: 0.7; }
.topnav-dropdown-trigger.open .topnav-caret { transform: rotate(180deg); }
.topnav-dropdown-trigger.open:not(.active) { background: var(--surface-2); color: var(--text-0); }
.topnav-dropdown-menu {
  position: absolute; z-index: 70; min-width: 220px;
  display: flex; flex-direction: column; gap: 1px; padding: 6px;
  background: linear-gradient(180deg, rgba(18,24,33,0.98), rgba(14,19,25,0.98));
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--border-1); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  animation: topnavSlide 0.15s ease;
}
.topnav-dropdown-menu .topnav-link { width: 100%; border-radius: var(--radius-sm); }
.topnav-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.topnav-user-chip { font-size: 12.5px; color: var(--text-2); text-align: right; line-height: 1.3; }
.topnav-user-chip strong { color: var(--text-0); font-weight: 600; display: block; }

/* Global smart search (task #48). Originally a persistent field in the
   admin TopNav's rightSlot; now rendered as a modal panel
   (GlobalSearchPanel, components/GlobalSearch.tsx) opened from the combined
   floating quick-actions button's "Search" action, so the top nav stays
   uncluttered — same box/result styling, just hosted inside a
   .overlay/.modal instead of a persistent bar with a floating dropdown.
   Distinct from FindButton.tsx's floating FIND action/modal: FIND resolves
   an exact code to one authoritative match, this fuzzy-matches across
   categories. */
.gsearch-box {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-md);
  color: var(--text-3); transition: border-color 0.15s ease, background 0.15s ease;
}
.gsearch-box:focus-within { border-color: var(--accent-border); background: var(--surface-2); color: var(--text-2); }
.gsearch-box-modal { padding: 11px 14px; }
.gsearch-box-modal .gsearch-input { font-size: 15px; }
.gsearch-input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--text-0); font-size: 13px; font-family: inherit;
}
.gsearch-input::placeholder { color: var(--text-3); }
.gsearch-clear { display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-3); cursor: pointer; padding: 2px; }
.gsearch-clear:hover { color: var(--text-1); }
.gsearch-loading, .gsearch-empty { padding: var(--sp-4); text-align: center; color: var(--text-3); font-size: 12.5px; }
.gsearch-group { margin-bottom: 4px; }
.gsearch-group-modal { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-1); }
.gsearch-group-modal:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.gsearch-group-label {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px 4px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
}
.gsearch-result {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 8px;
  background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-1);
  font-size: 13px; font-family: inherit; transition: background 0.12s ease;
}
.gsearch-result:hover { background: var(--surface-2); }
.gsearch-result-label { font-weight: 600; color: var(--text-0); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.gsearch-result-sub { flex: 1; min-width: 0; color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-result-meta { flex-shrink: 0; font-size: 10px; }
.topnav-burger {
  display: none; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-1); background: var(--surface-1);
  color: var(--text-1); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;
}
.topnav-burger:hover { color: var(--accent-strong); border-color: var(--accent-border); }
.topnav-mobile-panel { display: none; }

@media (max-width: 900px) {
  .topnav-row { padding: 8px var(--sp-4); height: auto; gap: var(--sp-3); }
  .topnav-scroll { display: none; }
  .topnav-user-chip { display: none; }
  .topnav-burger { display: flex; }
  .topnav-mobile-panel {
    display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4) var(--sp-4);
    border-top: 1px solid var(--border-1); animation: topnavSlide 0.18s ease;
    /* .topnav's own background is a gradient fading down to 0.88 alpha —
       fine for the slim closed bar, but once the mobile panel expands the
       nav's height, that faded lower portion sits directly over page
       content and reads as "transparent, hard to see/select" on a phone
       (reported live). Give the open panel its own solid, nearly-opaque
       background so every link in it is fully legible regardless of what's
       scrolled behind — same fix already applied to .mobile-nav-panel for
       the identical failure mode on the public site. */
    background: rgba(10,13,18,0.97);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .topnav-mobile-panel .topnav-divider { display: none; }
  .topnav-mobile-panel .topnav-link { width: 100%; }
  /* Dropdown groups become accordion sections on mobile — tap the header to
     expand in place, rather than a floating menu that has nowhere good to
     anchor on a narrow screen. */
  .topnav-mobile-group { display: flex; flex-direction: column; }
  .topnav-mobile-group .topnav-dropdown-trigger { width: 100%; justify-content: flex-start; }
  .topnav-mobile-group .topnav-caret { margin-left: auto; }
  .topnav-mobile-submenu {
    display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 10px; padding-left: 14px;
    border-left: 2px solid var(--border-1);
  }
}
@keyframes topnavSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ===================== Admin header v2 (components/AdminTopNav.tsx) =====================
   Text-only Management/Operations/Commercial/Finance domains + a compact
   Settings/Notifications/User action cluster. Deliberately a SEPARATE
   class namespace ("anav-*") from .topnav-* above — .topnav is still used
   as-is by the customer portal (PortalApp.tsx) and is untouched by this
   redesign, which only replaces the admin console's own header. Same glass
   surface + accent top-line language as .topnav so the product still reads
   as one system, but no gradient "pill" actives (a subtle underline
   instead, per spec) and no icons beside the four domain labels. */
.anav {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, rgba(14,19,25,0.97), rgba(14,19,25,0.90));
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-1);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.anav::before {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 15%, var(--accent-strong) 50%, var(--accent) 85%, transparent);
  opacity: 0.7;
}
.anav-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: 0 var(--sp-5); height: 54px; position: relative; }
.anav-brand { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; transition: opacity 0.15s ease; }
.anav-brand:hover { opacity: 0.85; }
.anav-brand-suffix { font-size: 11px; color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; }
/* Absolutely centered on the full header row (not just the flex slot
   between brand and actions) — brand and actions aren't equal width, so
   a plain `flex: 1; justify-content: center` middle slot centers relative
   to the leftover space rather than the true page center. Taken out of
   flow so it doesn't fight `justify-content: space-between` on the row. */
.anav-domains { display: flex; align-items: center; justify-content: center; gap: var(--sp-6); height: 100%; position: absolute; left: 50%; top: 0; transform: translateX(-50%); }

/* Trigger: a small per-domain icon (subtly animated on hover/active) sits
   ahead of the label — added on top of the original text-only design per
   later feedback; still no pill fill, active/hover still read primarily
   through color + the underline below. */
.anav-domain-trigger {
  position: relative; height: 100%; display: flex; align-items: center; gap: 7px;
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-2);
  padding: 0; white-space: nowrap; transition: color 0.15s ease;
}
.anav-domain-trigger::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); border-radius: 2px 2px 0 0;
  transform: scaleX(0); transform-origin: center; transition: transform 0.15s ease, opacity 0.15s ease;
  opacity: 0;
}
.anav-domain-trigger:hover { color: var(--text-0); }
.anav-domain-trigger.open { color: var(--text-0); }
.anav-domain-trigger.active { color: var(--accent-strong); }
.anav-domain-trigger.active::after,
.anav-domain-trigger.open::after { transform: scaleX(1); opacity: 1; }
.anav-domain-icon { flex-shrink: 0; transition: transform 0.2s ease; }
.anav-domain-trigger:hover .anav-domain-icon { transform: translateY(-1px) scale(1.12); }
.anav-domain-trigger.active .anav-domain-icon,
.anav-domain-trigger.open .anav-domain-icon { animation: anavIconPop 0.35s ease; }
@keyframes anavIconPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.28) rotate(-6deg); }
  100% { transform: scale(1); }
}

/* ---- Dropdown panel (shared by domains, Settings, Notifications) ----
   Positioned via inline left/top computed in AdminNavDropdown.tsx from
   getBoundingClientRect() — `position: fixed` is required for those
   viewport-relative coordinates to stay correct regardless of page scroll. */
.anav-dropdown-root { position: relative; height: 100%; display: flex; align-items: center; }
.anav-panel {
  position: fixed; z-index: 75;
  background: linear-gradient(180deg, rgba(18,24,33,0.98), rgba(14,19,25,0.98));
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--border-1); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  padding: var(--sp-3);
  animation: topnavSlide 0.15s ease;
  max-height: calc(100vh - 90px); overflow-y: auto;
}
.anav-panel-list { min-width: 240px; }

/* Every domain panel is now [sections-block | AI insight column] — the
   insight column (components/DomainInsightPanel.js) is new; the sections
   layout itself is unchanged (a single stacked list for Management, a
   row of columns for the other three), just nested one level deeper so it
   can sit beside the insight column instead of filling the whole panel. */
.anav-panel-inner { display: flex; align-items: stretch; gap: var(--sp-5); }
.anav-panel-sections { display: flex; flex-direction: column; gap: 1px; min-width: 190px; }
.anav-panel-columns .anav-panel-sections { flex-direction: row; align-items: flex-start; gap: var(--sp-6); }
.anav-panel-columns .anav-panel-sections .anav-section { min-width: 190px; }

.anav-section { display: flex; flex-direction: column; gap: 1px; }
.anav-section + .anav-section { margin-top: var(--sp-2); }
.anav-panel-columns .anav-section + .anav-section { margin-top: 0; }

/* ---- AI Insight column (right side of every domain dropdown) ---- */
.anav-insight {
  flex-shrink: 0; width: 200px; padding-left: var(--sp-5); margin-left: 2px;
  border-left: 1px solid var(--border-1); display: flex; flex-direction: column; gap: var(--sp-3);
}
.anav-insight-head {
  display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-strong);
}
.anav-insight-loading { font-size: 12px; color: var(--text-3); margin: 0; }
.anav-insight-stats { display: flex; flex-direction: column; gap: var(--sp-3); }
.anav-insight-stat { display: flex; flex-direction: column; gap: 1px; }
.anav-insight-stat-value { font-family: var(--font-display); font-size: 20px; color: var(--text-0); line-height: 1.1; }
.anav-insight-stat-label { font-size: 11px; color: var(--text-3); }
.anav-insight-cta { width: 100%; justify-content: center; margin-top: auto; }
.anav-section-label {
  padding: 6px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}
.anav-item {
  display: block; padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--text-1); white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease;
}
a.anav-item:hover { color: var(--text-0); background: var(--surface-2); }
a.anav-item.active { color: var(--accent-strong); background: var(--accent-bg); font-weight: 600; }
.anav-item-soon {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; background: transparent; border: none; font: inherit; text-align: left;
  color: var(--text-3); cursor: pointer;
}
.anav-item-soon:hover { color: var(--text-2); background: var(--surface-2); }
.anav-item-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; color: var(--text-3);
  background: var(--surface-3); border: 1px solid var(--border-2); flex-shrink: 0;
}

/* ---- Right-side action cluster ---- */
.anav-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.anav-icon-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.anav-icon-btn:hover { color: var(--text-0); background: var(--surface-2); }
.anav-icon-btn.open { color: var(--text-0); background: var(--surface-2); border-color: var(--border-2); }
.anav-icon-btn.active { color: var(--accent-strong); }
.anav-badge-dot {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--status-occupied); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 1; border: 2px solid var(--bg-1);
}
/* Fires once when a genuinely new (not-yet-seen) unread notification
   arrives from the 60s poll — see AdminNotificationPanel.js's seenIds
   tracking, which is what stops this from firing on every routine poll.
   POP (scale up) -> RING (shake while enlarged) -> POP back to normal,
   settling once, never a repeating/continuous animation — matches an
   enterprise operations tone rather than a playful consumer one. */
.anav-bell-alert { animation: anavBellPopRing 0.9s cubic-bezier(.34,1.56,.64,1); }
@keyframes anavBellPopRing {
  0%   { transform: scale(1) rotate(0); }
  14%  { transform: scale(1.32) rotate(0); }
  28%  { transform: scale(1.14) rotate(-12deg); }
  42%  { transform: scale(1.14) rotate(10deg); }
  56%  { transform: scale(1.14) rotate(-8deg); }
  70%  { transform: scale(1.16) rotate(5deg); }
  86%  { transform: scale(1.04) rotate(0); }
  100% { transform: scale(1) rotate(0); }
}
/* CRITICAL/HIGH get a stronger pop and a brief glow ring — still one settle,
   never a continuous flash (spec: no "constant distraction" alarm). */
.anav-bell-alert-critical { animation: anavBellPopRingCritical 1.1s cubic-bezier(.34,1.56,.64,1); }
@keyframes anavBellPopRingCritical {
  0%   { transform: scale(1) rotate(0); box-shadow: 0 0 0 0 rgba(224,86,76,0); }
  12%  { transform: scale(1.5) rotate(0); box-shadow: 0 0 0 6px rgba(224,86,76,0.28); }
  26%  { transform: scale(1.22) rotate(-14deg); box-shadow: 0 0 0 3px rgba(224,86,76,0.18); }
  40%  { transform: scale(1.22) rotate(12deg); }
  54%  { transform: scale(1.22) rotate(-9deg); }
  68%  { transform: scale(1.24) rotate(6deg); box-shadow: 0 0 0 3px rgba(224,86,76,0.14); }
  84%  { transform: scale(1.06) rotate(0); box-shadow: 0 0 0 0 rgba(224,86,76,0); }
  100% { transform: scale(1) rotate(0); box-shadow: 0 0 0 0 rgba(224,86,76,0); }
}
.anav-badge-pop { animation: anavBadgePop 0.5s ease; }
@keyframes anavBadgePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.5); }
  100% { transform: scale(1); }
}
.anav-badge-pop-critical { animation: anavBadgePopCritical 0.7s ease; }
@keyframes anavBadgePopCritical {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(224,86,76,0.55); }
  40% { transform: scale(1.7); box-shadow: 0 0 0 5px rgba(224,86,76,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(224,86,76,0); }
}
/* Motion-sensitive users still get the badge count, the priority label, and
   sound where the browser allows it — only the pop/shake/glow motion itself
   is removed (spec: "reduce or remove the animation while preserving...
   The notification must remain fully understandable without animation."). */
@media (prefers-reduced-motion: reduce) {
  .anav-bell-alert, .anav-bell-alert-critical { animation: none; }
  .anav-badge-pop, .anav-badge-pop-critical { animation: none; }
}
/* ---- Profile menu (replaces the old always-visible name/role text chip) ---- */
.anav-avatar-btn {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--border-2); background: transparent; cursor: pointer;
  margin-left: var(--sp-2); padding: 0; transition: border-color 0.15s ease, transform 0.15s ease;
}
.anav-avatar-btn:hover { border-color: var(--accent-border); transform: translateY(-1px); }
.anav-avatar-btn.open { border-color: var(--accent); }
.anav-avatar {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #14181f; font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em;
}
.anav-avatar-lg { width: 40px; height: 40px; font-size: 15px; flex-shrink: 0; }
.anav-profile-panel { width: 220px; padding: var(--sp-3); }
.anav-profile-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.anav-profile-id { display: flex; align-items: center; gap: 10px; }
.anav-profile-name { font-size: 13px; font-weight: 700; color: var(--text-0); }
.anav-profile-role { font-size: 11px; color: var(--text-3); text-transform: capitalize; }
.anav-signout { flex-shrink: 0; width: 100%; justify-content: center; }
.anav-burger {
  display: none; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-1); background: var(--surface-1);
  color: var(--text-1); cursor: pointer;
}
.anav-burger:hover { color: var(--accent-strong); border-color: var(--accent-border); }

/* ---- Notifications panel ---- */
.anav-notif-panel { width: 340px; padding: 0; }
.anav-notif-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-2); font-size: 13px; font-weight: 700; color: var(--text-0);
  border-bottom: 1px solid var(--border-1);
}
.anav-notif-markall {
  background: none; border: none; color: var(--accent-strong); font-size: 11.5px; font-weight: 600;
  cursor: pointer; padding: 2px 4px;
}
.anav-notif-markall:disabled { color: var(--text-3); cursor: default; }
.anav-notif-list { max-height: 360px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.anav-notif-empty { padding: var(--sp-5) var(--sp-3); text-align: center; color: var(--text-3); font-size: 12.5px; }
.anav-notif-row {
  display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
  padding: 8px 8px; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer;
  transition: background 0.12s ease;
}
.anav-notif-row:hover { background: var(--surface-2); }
.anav-notif-row.unread { background: rgba(226,166,59,0.06); }
.anav-notif-icon {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%; background: var(--surface-3); color: var(--text-2); margin-top: 1px;
}
.anav-notif-row.unread .anav-notif-icon { background: var(--accent-bg); color: var(--accent-strong); }
.anav-notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anav-notif-title { font-size: 12.5px; font-weight: 600; color: var(--text-0); white-space: normal; }
.anav-notif-row.unread .anav-notif-title { font-weight: 700; }
.anav-notif-time { font-size: 11px; color: var(--text-3); }
.anav-notif-foot { border-top: 1px solid var(--border-1); padding: 8px; }
.anav-notif-viewall {
  display: block; text-align: center; font-size: 12px; font-weight: 600; color: var(--accent-strong);
  padding: 6px; border-radius: var(--radius-sm); transition: background 0.12s ease;
}
.anav-notif-viewall:hover { background: var(--surface-2); }
.anav-notif-row.pri-high { border-left: 3px solid var(--accent-strong); padding-left: 6px; }
.anav-notif-row.pri-critical { border-left: 3px solid var(--danger); padding-left: 6px; }
.anav-notif-title-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.anav-pri-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 999px;
  line-height: 1.5; flex-shrink: 0;
}
.anav-pri-badge.pri-high { color: var(--accent-strong); background: var(--accent-bg); }
.anav-pri-badge.pri-critical { color: var(--danger); background: rgba(224,86,76,0.14); }

/* ---- Notification preview pop-out ---- */
/* Auto-appears near the bell on a genuinely new arrival (see
   AdminNotificationPanel.js's playDoubleRingChime()/setPreview() call
   sites), self-dismisses after PREVIEW_MS, and never marks anything read
   just by being shown — only VIEW/VIEW ALL (which reuses the exact same
   openNotification()/panel-open path a manual click uses) does that. */
.anav-notif-preview {
  position: fixed; top: 58px; right: var(--sp-5); z-index: 260; width: 320px;
  background: var(--surface-1); border: 1px solid var(--border-2); border-left: 3px solid var(--accent);
  border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); padding: 12px 14px;
  animation: anavPreviewIn 0.25s ease both;
}
.anav-notif-preview.pri-high { border-left-color: var(--accent-strong); }
.anav-notif-preview.pri-critical { border-left-color: var(--danger); box-shadow: var(--shadow-elevated), 0 0 0 1px rgba(224,86,76,0.25); }
@keyframes anavPreviewIn {
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .anav-notif-preview { animation: none; } }
.anav-notif-preview-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: 6px; }
.anav-notif-preview-label {
  display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em;
  color: var(--text-2); text-transform: uppercase;
}
.anav-notif-preview.pri-high .anav-notif-preview-label { color: var(--accent-strong); }
.anav-notif-preview.pri-critical .anav-notif-preview-label { color: var(--danger); }
.anav-notif-preview-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.anav-notif-preview-close {
  background: none; border: none; color: var(--text-3); font-size: 16px; line-height: 1; cursor: pointer;
  padding: 0 2px;
}
.anav-notif-preview-close:hover { color: var(--text-0); }
.anav-notif-preview-title { font-size: 13px; font-weight: 700; color: var(--text-0); margin-bottom: 2px; }
.anav-notif-preview-body { font-size: 12px; color: var(--text-2); line-height: 1.4; margin-bottom: 8px; }
.anav-notif-preview-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.anav-notif-preview-item { font-size: 12px; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anav-notif-preview-view { width: 100%; justify-content: center; }
.anav-notif-preview.pri-high .anav-notif-preview-view { border-color: var(--accent-strong); color: var(--accent-strong); }
.anav-notif-preview.pri-high .anav-notif-preview-view:hover { background: var(--accent-bg); }
.anav-notif-preview.pri-critical .anav-notif-preview-view { border-color: var(--danger); color: var(--danger); }
.anav-notif-preview.pri-critical .anav-notif-preview-view:hover { background: rgba(224,86,76,0.1); }

/* ---- Settings panel ---- */
.anav-settings-panel { width: 240px; }
.anav-settings-list { display: flex; flex-direction: column; }

/* ---- Responsive: full desktop layout is required to survive down to
   1024px per spec — only collapse to the burger below that. ---- */
@media (max-width: 1010px) {
  .anav-row { padding: 8px var(--sp-4); height: auto; gap: var(--sp-3); }
  .anav-domains { display: none; }
  .anav-insight { display: none; }
  .anav-burger { display: flex; }
}
.anav-mobile-panel {
  display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--border-1); animation: topnavSlide 0.18s ease;
  background: rgba(10,13,18,0.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.anav-mobile-group { display: flex; flex-direction: column; }
.anav-mobile-trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 10px 8px; border: none; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--text-1);
}
.anav-mobile-trigger.active { color: var(--accent-strong); }
.anav-mobile-caret { transition: transform 0.15s ease; }
.anav-mobile-caret.open { transform: rotate(180deg); }
.anav-mobile-submenu {
  display: flex; flex-direction: column; gap: 2px; margin: 2px 0 8px 8px; padding-left: 12px;
  border-left: 2px solid var(--border-1);
}

/* ===================== Auth pages ===================== */
.auth-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-0); }
/* A minimal top bar — just the logo + a way back to the marketing site —
   rather than the full public Header (services/quote/book links, mobile
   accordion) which would clutter a full-bleed login screen. */
.auth-topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); }
.auth-topbar-home {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  transition: color 0.15s ease;
}
.auth-topbar-home:hover { color: var(--accent-strong); }
.auth-body { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-8); padding: var(--sp-5) var(--sp-5) var(--sp-8); flex-wrap: wrap; }
.auth-card { width: 100%; max-width: 400px; padding: var(--sp-6); border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--surface-1); }

/* ---- Cargo-flow illustration beside the login card ---- */
.auth-visual { position: relative; width: 190px; padding: var(--sp-4) 0; display: none; }
@media (min-width: 900px) { .auth-visual { display: block; } }
.auth-visual-line { position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: var(--border-1); }
.auth-visual-glow {
  position: absolute; left: 12px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 14px 4px var(--accent);
  animation: authGlowTravel 5.4s ease-in-out infinite;
}
@keyframes authGlowTravel {
  0% { top: 4px; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: calc(100% - 16px); opacity: 0; }
}
.auth-visual-stage {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 0;
  animation: authStageFade 5.4s ease-in-out infinite;
}
@keyframes authStageFade {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.auth-visual-icon {
  position: relative; z-index: 1; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1.5px solid var(--border-2); color: var(--accent-strong);
}
.auth-visual-label { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.auth-visual-modes {
  display: flex; align-items: center; gap: 10px; margin: var(--sp-4) 0 0 46px; color: var(--text-3);
}
.auth-visual-modes svg { animation: authModePulse 2.4s ease-in-out infinite; }
.auth-visual-modes svg:nth-child(2) { animation-delay: 0.3s; }
.auth-visual-modes svg:nth-child(3) { animation-delay: 0.6s; }
.auth-visual-modes svg:nth-child(4) { animation-delay: 0.9s; }
@keyframes authModePulse {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

/* ---- Password visibility toggle ---- */
.auth-password-wrap { position: relative; }
.auth-password-wrap .input { padding-right: 38px; }
.auth-password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--text-3); cursor: pointer; border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}
.auth-password-toggle:hover { color: var(--text-0); }

/* ===================== Quotation form ===================== */
.quote-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
@media (max-width: 780px) { .quote-service-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .quote-service-grid { grid-template-columns: 1fr; } }

/* ===================== Loading bay calendar ===================== */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.slot-btn { padding: 10px; text-align: center; border: 1px solid var(--border-2); border-radius: var(--radius-sm); font-size: 12.5px; font-family: var(--font-mono); background: var(--surface-2); color: var(--text-1); }
.slot-btn.available:hover { border-color: var(--accent); cursor: pointer; }
.slot-btn.reserved { color: var(--text-3); background: var(--surface-1); cursor: not-allowed; }
.slot-btn.selected { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-strong); }

/* ===================== Admin Loading & Bays — slot chips ===================== */
/* Each time-slot chip on the admin dock schedule (pages/admin/AdminLoading.js)
   is a real click target: AVAILABLE<->BLOCKED toggles the slot for real via
   PATCH /api/admin/loading-slots/:id/status; RESERVED shows real booking
   detail (when one is on record) rather than allowing an edit. Transform/
   shadow feedback here is the only thing distinguishing "clickable badge"
   from the many purely informational badges elsewhere in the app. */
.admin-slot-chip { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.admin-slot-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
.admin-slot-chip:active { transform: translateY(0); box-shadow: none; }
.admin-slot-chip.busy { pointer-events: none; animation: admin-slot-pulse 0.9s ease-in-out infinite; }
@keyframes admin-slot-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }

/* ===================== Breadcrumb / page header ===================== */
.page-header { padding: var(--sp-6) 0 var(--sp-5); border-bottom: 1px solid var(--border-1); background: var(--bg-1); }
.breadcrumb { font-size: 12.5px; color: var(--text-3); margin-bottom: var(--sp-3); }
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--accent); }

/* ===================== Contact page (Task #107) ===================== */
.contact-grid { display: grid; grid-template-columns: 360px 1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-cards { display: flex; flex-direction: column; gap: var(--sp-4); }
.contact-card { padding: var(--sp-5); }
.contact-card h4 { margin: var(--sp-2) 0 4px; }
.contact-card-value { font-size: 14.5px; font-weight: 600; color: var(--text-1); word-break: break-word; }
a.contact-card-value:hover { color: var(--accent); }
.contact-map-card { padding: 0; overflow: hidden; min-height: 420px; display: flex; }
.contact-map-wrap { position: relative; flex: 1; min-height: 420px; }
.contact-map { width: 100%; height: 100%; min-height: 420px; }
.contact-map-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; background: var(--surface-1); z-index: 1;
}
.contact-map-fallback {
  flex: 1; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--sp-6); color: var(--accent);
}
/* Leaflet ships its own light-theme popup/control chrome — re-skin it to
   match this app's dark surfaces rather than leaving a jarring white box
   floating over a dark page. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface-2); color: var(--text-1); }
.leaflet-popup-content { font-size: 13px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-3); }
.leaflet-control-zoom a { background: var(--surface-2) !important; color: var(--text-1) !important; border-color: var(--border-1) !important; }
.leaflet-control-attribution { background: rgba(10, 13, 18, 0.75) !important; color: var(--text-3) !important; }
.leaflet-control-attribution a { color: var(--text-2) !important; }