/*
 * Dark-theme fixes — plain CSS loaded AFTER the Vite bundle (no build step needed on this server).
 * Mirrored in resources/css/app.css so a future `vite build` produces the same look.
 *
 * Fixes:
 *  1. Elevation was inverted: cards (surface-container-lowest #020617) were darker than the
 *     page (#0f172a). Cards now sit slightly ABOVE the page background.
 *  2. Softer, calmer slate palette with readable secondary text.
 *  3. Hero banners were huge bright-indigo blocks — now a deep slate-indigo gradient.
 *  4. White CTA buttons (bg-on-primary / .prism-btn-on-primary-surface) glowed pure white
 *     in dark mode — now frosted-glass buttons that fit the dark heroes.
 */

/* ---- 1+2. Dark palette (overrides the .dark token block in the compiled CSS) ---- */
.dark {
  --color-primary: #6366f1;             /* indigo-500 — accents, small buttons, links */
  --color-on-primary: #ffffff;
  --color-primary-container: #312e81;   /* indigo-900 — gradient tail on primary buttons */

  --color-surface: #0b1220;             /* page background — deepest layer */
  --color-surface-container-lowest: #111a2c; /* cards — one step above the page */
  --color-surface-container-low: #182338;
  --color-surface-container: #1e2a42;
  --color-surface-container-high: #27354f;
  --color-surface-container-highest: #31405c;

  --color-on-surface: #e7ecf5;
  --color-on-surface-variant: #a9b4c6;
  --color-outline-variant: #2c3950;
  --color-outline: #8b97ab;

  --shadow-bento: 0px 4px 24px rgba(0, 0, 0, 0.5), 0px 8px 48px rgba(0, 0, 0, 0.4);
  --shadow-prism: 0 10px 40px -10px rgba(0, 0, 0, 0.6);
  --shadow-indigo-glow: 0 10px 40px -10px rgba(99, 132, 255, 0.25);
}

/* ---- 3. Hero banners: deep slate-indigo instead of bright indigo ---- */
.dark .selection-on-inverse.bg-primary {
  background-color: #171f33;
  background-image: linear-gradient(135deg, #1b2440 0%, #171f33 55%, #131a2b 100%);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --tw-ring-color: rgba(255, 255, 255, 0.06);
}

/* ---- 4. CTA buttons that were pure white on dark heroes → frosted glass ---- */
.dark .selection-on-inverse .bg-on-primary,
.dark .prism-btn-on-primary-surface {
  background-color: rgba(255, 255, 255, 0.1);
  color: #eef2ff;
  --tw-ring-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
.dark .selection-on-inverse .bg-on-primary:hover,
.dark .prism-btn-on-primary-surface:hover {
  background-color: rgba(255, 255, 255, 0.16);
}
.dark .prism-btn-on-primary-surface:active {
  background-color: rgba(255, 255, 255, 0.2);
}
.dark .prism-btn-on-primary-surface svg,
.dark .selection-on-inverse .bg-on-primary svg {
  color: #eef2ff;
}

/* Outline buttons on heroes (e.g. “Back to loads”) — keep border readable on the darker hero */
.dark .selection-on-inverse .border-on-primary\/55 {
  border-color: rgba(255, 255, 255, 0.3);
}

/* ---- Small polish ---- */
/* KPI trend pill (green) had no dark variant — brighten text on dark cards */
.dark .stat-trend-success {
  color: #6ee7b7;
  --tw-ring-color: rgba(110, 231, 183, 0.25);
  background-color: rgba(16, 185, 129, 0.14);
}
/* Top bar tint matches the new page background instead of near-black */
.dark .dark\:bg-slate-950\/80 {
  background-color: rgba(11, 18, 32, 0.85);
}

/* ===================== UI components (both themes, no build step) ===================== */

/* ---- Toast notifications ---- */
.qds-toast-wrap {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(26rem, calc(100vw - 2rem));
}
.qds-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.35;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.28);
  animation: qds-toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes qds-toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
.qds-toast-success { background-color: #e7fbf1; border: 1px solid #94efc4; color: #04724d; }
.dark .qds-toast-success { background-color: #0c2b21; border-color: rgba(52, 211, 153, 0.35); color: #6ee7b7; }
.qds-toast-error { background-color: #fdeeee; border: 1px solid #f5b5b5; color: #9f1239; }
.dark .qds-toast-error { background-color: #2d1418; border-color: rgba(251, 113, 133, 0.35); color: #fda4af; }

/* ---- Submit-button loading spinner ---- */
.qds-btn-loading {
  pointer-events: none;
  opacity: 0.75;
}
.qds-btn-loading::after {
  content: "";
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
  flex-shrink: 0;
  display: inline-block;
  border-radius: 9999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: qds-spin 0.7s linear infinite;
}
@keyframes qds-spin { to { transform: rotate(360deg); } }

/* ---- Pagination: recolor Laravel's gray/blue defaults to the app theme ---- */
nav[role="navigation"] .bg-white { background-color: var(--color-surface-container-lowest); }
nav[role="navigation"] .border-gray-300 { border-color: var(--color-outline-variant); }
nav[role="navigation"] .ring-gray-300 { --tw-ring-color: var(--color-outline-variant); }
nav[role="navigation"] .text-gray-700,
nav[role="navigation"] .text-gray-500,
nav[role="navigation"] .text-gray-600 { color: var(--color-on-surface-variant); }
nav[role="navigation"] .text-gray-400 { color: var(--color-on-surface-variant); opacity: 0.55; }
nav[role="navigation"] .hover\:bg-gray-50:hover,
nav[role="navigation"] .hover\:bg-gray-100:hover { background-color: var(--color-surface-container-low); }
nav[role="navigation"] .focus\:border-blue-300:focus { border-color: var(--color-primary); }
.dark nav[role="navigation"] .dark\:bg-gray-800,
.dark nav[role="navigation"] .dark\:bg-gray-900 { background-color: var(--color-surface-container-low); }
.dark nav[role="navigation"] .dark\:border-gray-600 { border-color: var(--color-outline-variant); }
.dark nav[role="navigation"] .dark\:text-gray-300,
.dark nav[role="navigation"] .dark\:text-gray-400,
.dark nav[role="navigation"] .dark\:text-gray-600 { color: var(--color-on-surface-variant); }
.dark nav[role="navigation"] .dark\:hover\:bg-gray-700:hover,
.dark nav[role="navigation"] .dark\:hover\:bg-gray-800:hover { background-color: var(--color-surface-container-high); }
.dark nav[role="navigation"] .dark\:bg-gray-700 { background-color: var(--color-surface-container-high); }

/* ---- Clickable table rows ---- */
.qds-row-link { cursor: pointer; }

/* ---- Load status timeline (load detail page) ---- */
.qds-timeline { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 0.25rem 0; }
.qds-timeline-step { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; flex: 1; min-width: 4.5rem; position: relative; }
.qds-timeline-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.8rem;
  left: calc(50% + 1.1rem);
  right: calc(-50% + 1.1rem);
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-outline-variant);
}
.qds-timeline-step.is-done:not(:last-child)::after { background-color: var(--color-primary); }
.qds-timeline-dot {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  background-color: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  border: 2px solid var(--color-outline-variant);
  z-index: 1;
}
.qds-timeline-step.is-done .qds-timeline-dot {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.qds-timeline-step.is-current .qds-timeline-dot {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-surface-container-lowest);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.qds-timeline-label {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-on-surface-variant);
  text-align: center;
  white-space: nowrap;
}
.qds-timeline-step.is-current .qds-timeline-label { color: var(--color-primary); }
.qds-timeline-step.is-done .qds-timeline-label { color: var(--color-on-surface); }

/* Locked (readonly) date fields: visible flatpickr input mirrors the lock */
input.prism-input[disabled] { cursor: not-allowed; opacity: 0.85; }

/* ---- Flatpickr calendar: compact, responsive, themed ---- */
.flatpickr-calendar {
  font-family: inherit;
  width: 272px;
  max-width: calc(100vw - 20px);
  border-radius: 0.9rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.18);
  font-size: 13px;
}
.flatpickr-rContainer, .flatpickr-days { width: 100%; }
.dayContainer { width: 100%; min-width: 0; max-width: none; }
.flatpickr-day {
  max-width: none;
  height: 32px;
  line-height: 32px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
}
.flatpickr-innerContainer { padding: 0 6px 6px; }
span.flatpickr-weekday { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.flatpickr-current-month { font-size: 0.95rem; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { font-weight: 700; }
.flatpickr-time { max-height: 44px; }
.flatpickr-time input { font-size: 13px; font-weight: 700; }
.flatpickr-time .flatpickr-am-pm { font-size: 12px; font-weight: 800; }

/* Dark mode */
.dark .flatpickr-calendar {
  background: #182338;
  border: 1px solid #2c3950;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  color: #e7ecf5;
}
.dark .flatpickr-calendar.arrowTop:before, .dark .flatpickr-calendar.arrowTop:after { border-bottom-color: #182338; }
.dark .flatpickr-calendar.arrowBottom:before, .dark .flatpickr-calendar.arrowBottom:after { border-top-color: #182338; }
.dark .flatpickr-months .flatpickr-month,
.dark .flatpickr-current-month,
.dark .flatpickr-current-month .cur-month,
.dark .flatpickr-current-month .cur-month:hover,
.dark .flatpickr-current-month .flatpickr-monthDropdown-months,
.dark .flatpickr-current-month input.cur-year { background: transparent; color: #e7ecf5; fill: #e7ecf5; }
.dark .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: #182338; }
.dark .flatpickr-months .flatpickr-prev-month svg, .dark .flatpickr-months .flatpickr-next-month svg { fill: #a9b4c6; }
.dark .flatpickr-months .flatpickr-prev-month:hover svg, .dark .flatpickr-months .flatpickr-next-month:hover svg { fill: #e7ecf5; }
.dark span.flatpickr-weekday { color: #a9b4c6; background: transparent; }
.dark .flatpickr-day { color: #e7ecf5; }
.dark .flatpickr-day.prevMonthDay, .dark .flatpickr-day.nextMonthDay, .dark .flatpickr-day.flatpickr-disabled { color: #5b6b85; }
.dark .flatpickr-day:hover, .dark .flatpickr-day.inRange { background: #27354f; border-color: #27354f; }
.dark .flatpickr-day.today { border-color: #6366f1; }
.dark .flatpickr-day.selected, .dark .flatpickr-day.selected:hover,
.dark .flatpickr-day.startRange, .dark .flatpickr-day.endRange { background: #6366f1; border-color: #6366f1; color: #ffffff; }

/* Dark mode: the time row (hour/minute/AM-PM) was white with invisible text */
.dark .flatpickr-time { border-top: 1px solid #2c3950; background: #182338; }
.dark .flatpickr-time input,
.dark .flatpickr-time .flatpickr-am-pm,
.dark .flatpickr-time .flatpickr-time-separator { background: transparent; color: #e7ecf5; }
.dark .flatpickr-time input:hover, .dark .flatpickr-time input:focus,
.dark .flatpickr-time .flatpickr-am-pm:hover, .dark .flatpickr-time .flatpickr-am-pm:focus,
.dark .flatpickr-time .numInputWrapper:hover { background: #27354f; }
.dark .numInputWrapper span.arrowUp:after { border-bottom-color: #a9b4c6; }
.dark .numInputWrapper span.arrowDown:after { border-top-color: #a9b4c6; }
.dark .numInputWrapper span:hover { background: #31405c; }

/* ---- Breadcrumbs ---- */
.qds-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-size: 0.7rem; font-weight: 700; color: var(--color-on-surface-variant); }
.qds-crumbs a { color: var(--color-on-surface-variant); text-decoration: none; }
.qds-crumbs a:hover { color: var(--color-primary); text-decoration: underline; }
.qds-crumbs .sep { opacity: 0.45; }
.qds-crumbs .current { color: var(--color-on-surface); }

/* ═══════════════════════════════════════════
   Account security / 2FA (v7)
   Self-contained styles for classes missing from the compiled bundle.
   ═══════════════════════════════════════════ */
.qds-note { border-radius: 0.75rem; border: 1px solid transparent; padding: 1rem 1.25rem; }
.qds-note-warn { border-color: rgba(252, 211, 77, 0.7); background: #fffbeb; }
.dark .qds-note-warn { border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.1); }
.qds-note-warn .qds-note-icon { color: #f59e0b; }
.qds-note-ok { border-color: rgba(110, 231, 183, 0.7); background: #ecfdf5; }
.dark .qds-note-ok { border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.1); }
.qds-note-ok .qds-note-icon { color: #10b981; }

.qds-codes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 640px) { .qds-codes-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qds-code-chip {
    display: block; border-radius: 0.5rem; padding: 0.5rem 0.75rem; text-align: center;
    font-size: 0.75rem; font-weight: 900; letter-spacing: 0.05em; font-family: ui-monospace, monospace;
    background: #ffffff; color: #1e293b; box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.8);
    user-select: all; -webkit-user-select: all;
}
.dark .qds-code-chip { background: rgba(15, 23, 42, 0.6); color: #f1f5f9; box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.25); }

.qds-otp-input {
    font-size: 1.25rem !important; font-weight: 900 !important;
    letter-spacing: 0.3em !important; text-align: center !important;
}

.qds-btn-sm { padding: 0.625rem 1.25rem !important; font-size: 0.75rem !important; }

.qds-error-text { color: #dc2626; }
.dark .qds-error-text { color: #f87171; }
.qds-hover-error:hover { color: #dc2626 !important; }
.dark .qds-hover-error:hover { color: #f87171 !important; }

/* ═══════════════════════════════════════════
   Dashboard redesign (v8)
   ═══════════════════════════════════════════ */

/* Hero — layered gradient, dot grid, glow */
.qds-hero {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(130deg, #4f46e5 0%, #6366f1 45%, #7c72f7 100%);
}
.dark .qds-hero {
    background-image: linear-gradient(130deg, #312e81 0%, #4338ca 55%, #4f46e5 100%);
}
.qds-hero-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(105deg, transparent 35%, #000 100%);
    mask-image: linear-gradient(105deg, transparent 35%, #000 100%);
}
.qds-hero-route { display: none; position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: 0.5; }
@media (min-width: 1280px) { .qds-hero-route { display: block; } }
.qds-hero-clock { text-align: right; }
.qds-hero-clock-time { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: #fff; }
.qds-hero-clock-date { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(224, 231, 255, 0.75); margin-top: 0.3rem; }
@media (max-width: 640px) { .qds-hero-clock { text-align: left; } }
.qds-hero-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    border-radius: 0.75rem; padding: 0.65rem 1.15rem;
    font-size: 0.75rem; font-weight: 800;
    background: rgba(255, 255, 255, 0.94); color: #4338ca;
    box-shadow: 0 10px 22px -10px rgba(15, 23, 42, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.qds-hero-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(15, 23, 42, 0.5); }
.qds-hero-btn-ghost {
    display: inline-flex; align-items: center; gap: 0.5rem;
    border-radius: 0.75rem; padding: 0.65rem 1.15rem;
    font-size: 0.75rem; font-weight: 800;
    background: rgba(255, 255, 255, 0.14); color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    transition: background 0.15s ease;
}
.qds-hero-btn-ghost:hover { background: rgba(255, 255, 255, 0.22); }

/* Pipeline strip */
.qds-pipe { display: flex; height: 0.7rem; border-radius: 9999px; overflow: hidden; background: var(--color-surface-container); }
.qds-pipe-seg { transition: width 0.6s ease; }
.qds-pipe-seg + .qds-pipe-seg { border-left: 2px solid var(--color-surface-container-lowest); }
.qds-pipe-booked { background: linear-gradient(90deg, #6366f1, #818cf8); }
.qds-pipe-transit { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.qds-pipe-delivered { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
.qds-pipe-completed { background: linear-gradient(90deg, #10b981, #34d399); }
.qds-pipe-chip {
    display: inline-flex; align-items: center; gap: 0.45rem;
    border-radius: 0.65rem; padding: 0.45rem 0.8rem;
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-on-surface-variant);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-outline-variant) 25%, transparent);
    transition: box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.qds-pipe-chip:hover { color: var(--color-primary); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-primary) 45%, transparent); transform: translateY(-1px); }
.qds-pipe-chip .dot { width: 0.55rem; height: 0.55rem; border-radius: 9999px; flex-shrink: 0; }
.qds-pipe-chip .cnt { font-variant-numeric: tabular-nums; color: var(--color-on-surface); }

/* Stat cards — lift + gradient icon tiles */
.qds-stat { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.qds-stat:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(15, 23, 42, 0.22); }
.dark .qds-stat:hover { box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.55); }
.qds-stat-icon {
    width: 2.6rem; height: 2.6rem; border-radius: 0.8rem;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.qds-stat-icon-primary { background: linear-gradient(135deg, #6366f1, #4f46e5); box-shadow: 0 8px 16px -8px rgba(79, 70, 229, 0.6); }
.qds-stat-icon-success { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 8px 16px -8px rgba(5, 150, 105, 0.6); }
.qds-stat-icon-attention { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 8px 16px -8px rgba(217, 119, 6, 0.6); }

/* Impersonation banner (v8) */
.qds-impersonate-bar {
    position: relative; z-index: 60;
    background: linear-gradient(90deg, #b45309, #d97706);
    color: #fff;
    box-shadow: 0 4px 12px -6px rgba(180, 83, 9, 0.5);
}
.qds-impersonate-leave {
    display: inline-flex; align-items: center;
    border-radius: 9999px; padding: 0.3rem 0.9rem;
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.95); color: #92400e;
    transition: transform 0.15s ease;
}
.qds-impersonate-leave:hover { transform: translateY(-1px); }

/* Portal-wide hero + nav accent (v8) */
.qds-nav-active {
    background: linear-gradient(90deg, #6366f1, #4f46e5);
    color: #fff;
    box-shadow: 0 8px 16px -8px rgba(79, 70, 229, 0.6);
}
.qds-nav-active:hover { color: #fff; }

/* ═══════════════════════════════════════════
   Portal-wide micro-polish (v10)
   ═══════════════════════════════════════════ */

/* text-error utilities were never in the compiled bundle — 12 usages were silently unstyled */
.text-error { color: #e11d48; }
.dark .text-error { color: #fb7185; }
.hover\:text-error:hover { color: #e11d48; }
.dark .hover\:text-error:hover { color: #fb7185; }

/* Primary buttons: lift on hover, press on click, indigo glow */
.prism-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(79, 70, 229, 0.55); }
.prism-btn-primary:active { transform: translateY(0) scale(0.98); }

/* Inputs: smooth focus transition */
.prism-input { transition: box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }

/* Status badges: leading dot in the badge's own color */
.badge-success::before, .badge-error::before, .badge-muted::before,
.badge-load-booked::before, .badge-load-transit::before, .badge-load-delivered::before {
    content: ""; display: inline-block;
    width: 0.4rem; height: 0.4rem; border-radius: 9999px;
    background: currentColor; margin-right: 0.4rem;
    vertical-align: middle; margin-top: -2px;
}

/* Keyboard navigation: one consistent indigo focus ring */
:where(a, button, [role="button"]):focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.8);
    outline-offset: 2px;
}

/* Page depth: faint indigo glow at the top of every page */
body.bg-surface { background-image: radial-gradient(1100px 380px at 85% -8%, rgba(99, 102, 241, 0.07), transparent 70%); }
.dark body.bg-surface { background-image: radial-gradient(1100px 380px at 85% -8%, rgba(99, 102, 241, 0.09), transparent 70%); }

/* Sidebar: icons nudge toward their page on hover */
aside nav a svg { transition: transform 0.18s ease; }
aside nav a:hover svg { transform: translateX(2px) scale(1.06); }

/* Tables: gentle row hover fade */
main tbody tr { transition: background-color 0.15s ease; }

/* Badges on hero banners (v11): pastel card colors clash with the indigo gradient —
   restyle as frosted chips; the status color moves into the leading dot. */
.qds-hero .badge-success, .qds-hero .badge-error, .qds-hero .badge-muted,
.qds-hero .badge-load-booked, .qds-hero .badge-load-transit, .qds-hero .badge-load-delivered {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.qds-hero .badge-success::before { background: #4ade80; }
.qds-hero .badge-error::before { background: #fb7185; }
.qds-hero .badge-muted::before { background: rgba(255, 255, 255, 0.75); }
.qds-hero .badge-load-booked::before { background: #c7d2fe; }
.qds-hero .badge-load-transit::before { background: #fbbf24; }
.qds-hero .badge-load-delivered::before { background: #7dd3fc; }