/* Aurolab Dealer Portal design system (bundle.css from the Aurolab Dealer Portal design system artifact).
   Fonts are loaded by base.html (Google Fonts <link>), so the original @import is removed. */
/* Aurolab Dealer Portal: aurolab.css + aurolab-app.css + aurolab-motion.css + aurolab-stock.css */

/* ===== Aurolab Dealer Portal — component styles (prefix al-) ===== */
:root { --al-ease: cubic-bezier(.2,.8,.2,1); --al-fast: 160ms; --al-med: 320ms; --al-slow: 700ms; }
html, body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 22px; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
.al-tabnum { font-variant-numeric: tabular-nums; }

/* ---------- Motion primitives ---------- */
@keyframes al-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes al-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes al-slide-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes al-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes al-spin { to { transform: rotate(360deg); } }
@keyframes al-shimmer { from { transform: translateX(-120%); } to { transform: translateX(220%); } }
@keyframes al-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes al-draw { from { stroke-dashoffset: var(--len, 400); } to { stroke-dashoffset: 0; } }
@keyframes al-skeleton { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.al-rise { animation: al-rise var(--al-slow) var(--al-ease) both; }
.al-stagger > * { animation: al-rise 520ms var(--al-ease) both; }
.al-stagger > *:nth-child(1){animation-delay:40ms}.al-stagger > *:nth-child(2){animation-delay:90ms}.al-stagger > *:nth-child(3){animation-delay:140ms}.al-stagger > *:nth-child(4){animation-delay:190ms}.al-stagger > *:nth-child(5){animation-delay:240ms}.al-stagger > *:nth-child(6){animation-delay:290ms}.al-stagger > *:nth-child(7){animation-delay:340ms}.al-stagger > *:nth-child(8){animation-delay:390ms}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }

/* ---------- Button ---------- */
.al-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding: 0 20px; border-radius: var(--radius-md); border: 1px solid transparent; font: 600 14px/1 var(--font-sans); cursor: pointer; transition: transform var(--al-fast) var(--al-ease), box-shadow var(--al-med) var(--al-ease), background-color var(--al-fast); white-space: nowrap; }
.al-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.al-btn:active { transform: translateY(1px) scale(.99); }
.al-btn--primary { background: var(--brand-500); color: var(--on-brand); }
.al-btn--primary:hover { background: var(--brand-600); box-shadow: var(--shadow-brand); transform: translateY(-1px); }
.al-btn--primary::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 100%); transform: translateX(-120%); pointer-events: none; }
.al-btn--primary:hover::after { animation: al-shimmer 900ms var(--al-ease); }
.al-btn--secondary { background: var(--surface); color: var(--brand-text); border-color: var(--border-strong); }
.al-btn--secondary:hover { background: var(--brand-50); border-color: var(--brand-text); }
.al-btn--accent { background: var(--secondary); color: var(--on-secondary); }
.al-btn--accent:hover { filter: brightness(1.06); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.al-btn--ghost { background: transparent; color: var(--ink-muted); }
.al-btn--ghost:hover { background: var(--brand-100); color: var(--ink); }
.al-btn--sm { height: 34px; padding: 0 14px; font-size: 13px; }
.al-btn--block { width: 100%; }
.al-btn .al-arrow { transition: transform var(--al-fast) var(--al-ease); }
.al-btn:hover .al-arrow { transform: translateX(3px); }
.al-btn[aria-busy="true"] { pointer-events: none; }
.al-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: al-spin 700ms linear infinite; }

/* ---------- Field (floating label) ---------- */
.al-field { position: relative; }
.al-field input { width: 100%; height: 56px; padding: 22px 48px 6px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font: 400 15px/1 var(--font-sans); transition: border-color var(--al-fast), box-shadow var(--al-med) var(--al-ease), background var(--al-fast); }
.al-field input:hover { border-color: var(--ink-muted); }
.al-field input:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--shadow-focus); }
.al-field label { position: absolute; left: 16px; top: 18px; color: var(--ink-muted); font-size: 15px; pointer-events: none; transform-origin: left top; transition: transform var(--al-med) var(--al-ease), color var(--al-fast); }
.al-field input:focus + label, .al-field input:not(:placeholder-shown) + label { transform: translateY(-11px) scale(.78); color: var(--brand-text); font-weight: 600; }
.al-field input:not(:focus):not(:placeholder-shown) + label { color: var(--ink-muted); }
.al-field .al-field-icon { position: absolute; right: 14px; top: 16px; width: 24px; height: 24px; color: var(--ink-muted); transition: color var(--al-fast); background: none; border: 0; padding: 0; cursor: pointer; }
.al-field input:focus ~ .al-field-icon { color: var(--brand-text); }
.al-field--error input { border-color: var(--danger); }
.al-field--error input + label, .al-field--error input:not(:focus):not(:placeholder-shown) + label { color: var(--danger); }
.al-field-hint { margin-top: 6px; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.al-field--error .al-field-hint { color: var(--danger); }

/* ---------- Search ---------- */
.al-search { position: relative; display: flex; align-items: center; }
.al-search svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--ink-muted); }
.al-search input { width: 100%; height: 42px; padding: 0 64px 0 42px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-raised); color: var(--ink); font: 400 14px var(--font-sans); transition: all var(--al-med) var(--al-ease); }
.al-search input::placeholder { color: var(--ink-muted); }
.al-search input:focus { outline: none; background: var(--surface); border-color: var(--brand-500); box-shadow: var(--shadow-focus); }
.al-kbd { position: absolute; right: 10px; padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--ink-muted); font: 500 11px var(--font-mono); background: var(--surface); }

/* ---------- Card ---------- */
.al-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.al-card--hover { transition: transform var(--al-med) var(--al-ease), box-shadow var(--al-med) var(--al-ease); }
.al-card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.al-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 20px var(--space-6); border-bottom: 1px solid var(--border); }
.al-card-title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; }
.al-card-sub { margin: 2px 0 0; font-size: 12px; line-height: 18px; color: var(--ink-muted); }

/* ---------- KPI ---------- */
.al-kpi { padding: 20px var(--space-6); display: grid; gap: 6px; position: relative; overflow: hidden; }
.al-kpi-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); display: flex; align-items: center; gap: 8px; }
.al-kpi-icon { width: 32px; height: 32px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--brand-100); color: var(--brand-text); }
.al-kpi-value { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.al-kpi-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-muted); }
.al-delta { font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.al-delta--up { color: var(--success); } .al-delta--down { color: var(--danger); }
.al-spark path { fill: none; stroke: var(--brand-500); stroke-width: 2; stroke-linecap: round; stroke-dasharray: var(--len, 400); animation: al-draw 1400ms var(--al-ease) both 200ms; }
.al-spark .al-spark-area { fill: var(--brand-100); stroke: none; animation: al-fade 1200ms ease both 600ms; }

/* ---------- Badge ---------- */
.al-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; white-space: nowrap; }
.al-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.al-badge--success { background: var(--success-soft); color: var(--success); }
.al-badge--success::before { animation: al-pulse 2s infinite; }
.al-badge--warning { background: var(--warning-soft); color: var(--warning); }
.al-badge--danger { background: var(--danger-soft); color: var(--danger); }
.al-badge--info { background: var(--brand-100); color: var(--brand-text); }
.al-badge--saas { background: var(--surface-raised); color: var(--accent); border: 1px solid var(--border); }
.al-badge--saas::before { display: none; }

/* ---------- Table ---------- */
.al-table-wrap { overflow-x: auto; }
.al-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.al-table th { position: sticky; top: 0; text-align: left; padding: 12px var(--space-4); background: var(--brand-50); color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--border); white-space: nowrap; }
.al-table td { padding: 14px var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.al-table tbody tr { transition: background var(--al-fast); animation: al-rise 480ms var(--al-ease) both; }
.al-table tbody tr:hover { background: var(--surface-raised); }
.al-table tbody tr:last-child td { border-bottom: 0; }
.al-table .al-num { text-align: right; font-variant-numeric: tabular-nums; }
.al-table .al-actions { text-align: right; width: 1%; white-space: nowrap; }
.al-table tr .al-row-cta { opacity: .85; transition: opacity var(--al-fast); }
.al-table tr:hover .al-row-cta { opacity: 1; }
.al-id { font: 500 13px/20px var(--font-mono); color: var(--ink-muted); padding: 2px 8px; border-radius: var(--radius-sm); background: var(--surface-raised); border: 1px solid var(--border); }
.al-dealer { display: flex; align-items: center; gap: 12px; }
.al-avatar { flex: none; width: 36px; height: 36px; border-radius: var(--radius-full); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--on-brand); background: var(--brand-700); }
.al-avatar--b { background: var(--brand-100); color: var(--ink); } .al-avatar--c { background: var(--accent); color: var(--surface); }
.al-dealer-name { font-weight: 600; } .al-dealer-meta { font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.al-empty { padding: 40px; text-align: center; color: var(--ink-muted); }
.al-skel { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-raised) 0, var(--border) 50%, var(--surface-raised) 100%); background-size: 400px 100%; animation: al-skeleton 1.2s linear infinite; }

/* ---------- Tabs / segmented ---------- */
.al-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--border); position: relative; }
.al-seg button { position: relative; z-index: 1; height: 30px; padding: 0 14px; border: 0; background: none; border-radius: 7px; font: 600 13px var(--font-sans); color: var(--ink-muted); cursor: pointer; transition: color var(--al-fast); }
.al-seg button[aria-selected="true"] { color: var(--ink); }
.al-seg-thumb { position: absolute; top: 4px; bottom: 4px; border-radius: 7px; background: var(--surface); box-shadow: var(--shadow-sm); transition: left var(--al-med) var(--al-ease), width var(--al-med) var(--al-ease); }

/* ---------- Sidebar ---------- */
.al-sidebar { width: 248px; background: var(--brand-900); color: var(--on-brand); display: flex; flex-direction: column; padding: 20px 14px; gap: 4px; }
.al-sidebar-logo { height: 22px; margin: 6px 10px 26px; display: block; }
.al-nav-label { margin: 16px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-300); }
.al-nav-item { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: var(--radius-md); color: var(--brand-300); text-decoration: none; font-weight: 500; cursor: pointer; transition: background var(--al-fast), color var(--al-fast); animation: al-slide-in 480ms var(--al-ease) both; }
.al-nav-item svg { width: 20px; height: 20px; flex: none; transition: transform var(--al-med) var(--al-ease); }
.al-nav-item:hover { background: rgba(255,255,255,.07); color: var(--on-brand); }
.al-nav-item:hover svg { transform: scale(1.1); }
.al-nav-item[aria-current="page"] { background: var(--brand-500); color: var(--on-brand); box-shadow: var(--shadow-brand); font-weight: 600; }
.al-nav-count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); display: grid; place-items: center; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.14); color: var(--on-brand); }
.al-sidebar-foot { margin-top: auto; padding: 14px 12px; border-radius: var(--radius-md); background: rgba(255,255,255,.06); font-size: 12px; line-height: 18px; color: var(--brand-300); }
.al-sidebar-foot strong { color: var(--on-brand); display: block; font-size: 13px; }

/* ---------- Top bar ---------- */
.al-topbar { height: 68px; display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-8); background: var(--surface); border-bottom: 1px solid var(--border); }
.al-crumbs { font-size: 12px; color: var(--ink-muted); } .al-crumbs b { color: var(--ink); font-weight: 600; }
.al-topbar-spacer { flex: 1; }
.al-icon-btn { position: relative; width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; background: transparent; border: 1px solid var(--border); color: var(--ink-muted); cursor: pointer; transition: all var(--al-fast); }
.al-icon-btn:hover { color: var(--brand-text); border-color: var(--brand-text); background: var(--brand-50); }
.al-icon-btn .al-dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); }
.al-user { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: var(--radius-full); border: 1px solid var(--border); cursor: pointer; transition: background var(--al-fast); }
.al-user:hover { background: var(--surface-raised); }
.al-user .al-avatar { width: 32px; height: 32px; font-size: 12px; }
.al-user-name { font-size: 13px; font-weight: 600; line-height: 16px; } .al-user-role { font-size: 11px; color: var(--ink-muted); line-height: 14px; }

/* ---------- Isometric decor (login) ---------- */
.al-iso { position: absolute; width: 64px; height: 64px; transform-style: preserve-3d; animation: al-float 6s ease-in-out infinite; }
.al-iso i { position: absolute; inset: 0; border-radius: 10px; }
.al-iso .t { background: var(--on-brand); transform: rotateX(55deg) rotateZ(45deg); opacity: .22; }
.al-iso .g { inset: 22px; border-radius: 4px; background: var(--brand-900); transform: rotateX(55deg) rotateZ(45deg) translateZ(2px); box-shadow: 0 0 18px var(--accent-bright); opacity: .7; }
.al-orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; animation: al-float 9s ease-in-out infinite; }

/* ---------- Nav groups (dealer menu) ---------- */
.al-nav-group > summary { list-style: none; }
.al-nav-group > summary::-webkit-details-marker { display: none; }
.al-nav-group > summary .al-chev { margin-left: auto; transition: transform var(--al-med) var(--al-ease); }
.al-nav-group[open] > summary .al-chev { transform: rotate(180deg); }
.al-nav-sub { display: grid; gap: 2px; margin: 2px 0 6px 22px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.14); }
.al-nav-sub a { height: 34px; display: flex; align-items: center; padding: 0 10px; border-radius: 8px; color: var(--brand-300); text-decoration: none; font-size: 13px; cursor: pointer; transition: background var(--al-fast), color var(--al-fast); }
.al-nav-sub a:hover { background: rgba(255,255,255,.07); color: var(--on-brand); }
.al-nav-sub a[aria-current="page"] { background: var(--brand-500); color: var(--on-brand); font-weight: 600; box-shadow: var(--shadow-brand); }

/* ---------- Order card + stepper ---------- */
.al-order { padding: 18px var(--space-6); display: grid; gap: 16px; cursor: pointer; }
.al-order-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.al-order-no { font: 600 15px/20px var(--font-mono); }
.al-order-meta { margin-left: auto; display: flex; gap: 24px; font-size: 13px; color: var(--ink-muted); }
.al-order-meta b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.al-steps { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.al-steps::before, .al-steps-fill { content: ""; position: absolute; top: 11px; left: 10%; right: 10%; height: 3px; border-radius: 3px; background: var(--border); }
.al-steps-fill { right: auto; width: 0; background: var(--brand-500); transition: width 1100ms var(--al-ease) 250ms; }
.al-step { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted); text-align: center; }
.al-step i { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); display: grid; place-items: center; color: var(--on-brand); transition: background 300ms, border-color 300ms; }
.al-step.done i { background: var(--brand-500); border-color: var(--brand-500); }
.al-step.done i::after { content: ""; width: 8px; height: 4px; border: 2px solid currentColor; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px,-1px); }
.al-step.now i { border-color: var(--brand-500); box-shadow: var(--shadow-focus); }
.al-step.now { color: var(--ink); font-weight: 600; }
.al-lines { display: none; border-top: 1px dashed var(--border); padding-top: 12px; }
.al-order[aria-expanded="true"] .al-lines { display: block; animation: al-rise 360ms var(--al-ease); }

/* ---------- Theme toggle ---------- */
.al-theme-toggle svg { transition: transform var(--al-med) var(--al-ease); }
.al-theme-toggle:hover svg { transform: rotate(-25deg); }

/* ===================================================================
   Bootstrap / DataTables bridge: opt in with <body class="al-bs">.
   Lets the existing Bootstrap + jQuery DataTables pages pick up the
   system without rewriting their markup.
   =================================================================== */
.al-bs { --bs-primary: var(--brand-500); --bs-primary-rgb: 1,100,129; --bs-link-color: var(--brand-text); --bs-link-hover-color: var(--brand-700); --bs-body-bg: var(--page); --bs-body-color: var(--ink); --bs-border-color: var(--border); --bs-border-radius: var(--radius-md); font-family: var(--font-sans); background: var(--page); color: var(--ink); }
.al-bs .btn { border-radius: var(--radius-md); font-weight: 600; transition: transform var(--al-fast) var(--al-ease), box-shadow var(--al-med) var(--al-ease), background-color var(--al-fast); }
.al-bs .btn-primary { background: var(--brand-500); border-color: var(--brand-500); color: var(--on-brand); }
.al-bs .btn-primary:hover, .al-bs .btn-primary:focus { background: var(--brand-600); border-color: var(--brand-600); box-shadow: var(--shadow-brand); transform: translateY(-1px); }
.al-bs .btn-outline-primary { color: var(--brand-text); border-color: var(--border-strong); }
.al-bs .btn-outline-primary:hover { background: var(--brand-50); color: var(--brand-text); border-color: var(--brand-text); }
.al-bs .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--ink); }
.al-bs .card-header { background: transparent; border-bottom: 1px solid var(--border); font-weight: 600; }
.al-bs .form-control, .al-bs .form-select, .al-bs .dataTables_filter input, .al-bs .dataTables_length select { background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--radius-md); min-height: 40px; }
.al-bs .form-control:focus, .al-bs .form-select:focus, .al-bs .dataTables_filter input:focus { border-color: var(--brand-500); box-shadow: var(--shadow-focus); outline: none; }
.al-bs .table { --bs-table-bg: var(--surface); --bs-table-color: var(--ink); --bs-table-hover-bg: var(--surface-raised); --bs-table-striped-bg: var(--surface-raised); border-color: var(--border); }
.al-bs .table thead th, .al-bs table.dataTable thead th { background: var(--brand-50); color: var(--ink-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.al-bs .table tbody tr { animation: al-rise 480ms var(--al-ease) both; }
.al-bs .page-item.active .page-link, .al-bs .dataTables_paginate .paginate_button.current { background: var(--brand-500) !important; border-color: var(--brand-500) !important; color: var(--on-brand) !important; border-radius: 8px; }
.al-bs .page-link, .al-bs .dataTables_paginate .paginate_button { color: var(--brand-text) !important; background: var(--surface); border-color: var(--border); }
.al-bs .navbar, .al-bs .top_nav { background: var(--surface); border-bottom: 1px solid var(--border); }
.al-bs .badge.bg-primary { background: var(--brand-100) !important; color: var(--brand-text); }
.al-bs .alert-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.al-bs .alert-success { background: var(--success-soft); color: var(--success); border-color: transparent; }

/* ===================================================================
   Aurolab Dealer Portal: application shell and legacy-markup bridge.
   Loaded after the DeskApp CSS, aurolab-tokens.css and aurolab.css.
   The AJAX fragments still print the JSP-era markup (.customers tables,
   the .steps timeline, inline colours); the rules under "Legacy markup"
   restyle it to the design system without changing the HTML.
   =================================================================== */

body.al-bs { margin: 0; min-height: 100vh; }
.al-content a:not(.al-btn):not(.al-icon-btn) { color: var(--brand-text); }
.al-bs h1, .al-bs h2, .al-bs h3, .al-bs h4, .al-bs h5, .al-bs h6 { color: var(--ink); font-family: var(--font-sans); }

/* ---------- Shell ---------- */
.al-app { display: flex; min-height: 100vh; }
.al-app > .al-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; flex: none; z-index: 40; }
.al-sidebar a.al-nav-item, .al-sidebar .al-nav-sub a { text-decoration: none; }
.al-sidebar .al-nav-item:focus-visible, .al-sidebar .al-nav-sub a:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.al-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.al-topbar { position: sticky; top: 0; z-index: 30; }
.al-topbar a.al-icon-btn { text-decoration: none; }
.al-user { cursor: default; }
.al-user-name { color: var(--ink); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-content { padding: 28px 32px 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; }
.al-content > * { min-width: 0; }
.al-menu-btn { display: none; }
.al-sidebar-scrim { display: none; }

/* Theme toggle shows a sun in dark mode, a moon in light mode. */
.al-theme-toggle .al-sun { display: none; }
[data-theme="dark"] .al-theme-toggle .al-sun { display: block; }
[data-theme="dark"] .al-theme-toggle .al-moon { display: none; }

@media (max-width: 991px) {
  .al-app > .al-sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform var(--al-med) var(--al-ease); }
  .al-app.al-nav-open > .al-sidebar { transform: none; box-shadow: var(--shadow-lg); }
  .al-app.al-nav-open .al-sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(1, 47, 61, .45); }
  .al-menu-btn { display: grid; }
  .al-topbar { padding: 0 16px; }
  .al-content { padding: 20px 16px 40px; }
  .al-user > div { display: none; }
}

/* ---------- Page header, filters, card bodies ---------- */
.al-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.al-page-head h1 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.01em; }
.al-page-head p { margin: 4px 0 0; color: var(--ink-muted); }
.al-page-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.al-date-range { color: var(--ink-muted); font-size: 13px; font-weight: 600; }
.al-date-range:empty { display: none; }

.al-filters, .al-filters.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.al-filters > * { flex: none; max-width: none; padding: 0; }
.al-filters label { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.al-filters .form-control { width: 180px; height: 42px; }
.al-filters .al-search { width: 280px; margin-left: auto; }
.al-card-body { padding: 20px 24px; overflow-x: auto; }
.al-card-body:empty { display: none; }
.al-card > .al-card-body + .al-card-body { border-top: 1px solid var(--border); }
.al-toolbar { display: flex; gap: 12px; align-items: center; justify-content: flex-end; padding: 16px 24px 0; }
.al-toolbar .al-search { width: 320px; }

/* Loading state printed while an AJAX fragment loads (#loaderimg). */
#loaderimg { padding: 40px 0; }
#loaderimg img { display: none; }
#loaderimg::before { content: ""; display: block; width: 28px; height: 28px; margin: 0 auto 10px; border-radius: 50%; border: 3px solid var(--brand-500); border-right-color: transparent; animation: al-spin 700ms linear infinite; }
#loaderimg p { color: var(--ink-muted) !important; margin: 0; }

/* No-data block the page scripts insert (an <img> and a <p>). */
.al-bs img[src*="no-data.png"] { width: 180px !important; opacity: .9; }

/* ---------- Legacy markup: tables ---------- */
.al-bs table.customers { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.al-bs table.customers th { padding: 12px 16px; background: var(--brand-50); color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: left; border: 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
.al-bs table.customers td { padding: 12px 16px; text-align: left; border: 0; border-bottom: 1px solid var(--border); vertical-align: middle; font-variant-numeric: tabular-nums; }
.al-bs table.customers tr:last-child td { border-bottom: 0; }
.al-bs table.customers tr { transition: background var(--al-fast); }
.al-bs table.customers tr:hover { background: var(--surface-raised); }
.al-bs table.customers tbody tr, .al-bs table.customers > tr { animation: al-rise 420ms var(--al-ease) both; }
.al-bs table.customers td { white-space: nowrap; }   /* dates and IDs break at their hyphens otherwise; the card scrolls */
.al-bs table.customers form { margin: 0; display: inline; }
/* Shipped orders: invoice / shipment detail CSV buttons. */
.al-bs .download-btn, .al-bs .download-detail-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: var(--radius-md); background: var(--surface) !important; border: 1px solid var(--border-strong) !important; color: var(--brand-text) !important; transition: background var(--al-fast), border-color var(--al-fast), transform var(--al-fast) var(--al-ease); }
.al-bs .download-btn:hover, .al-bs .download-detail-btn:hover { background: var(--brand-50) !important; border-color: var(--brand-text) !important; transform: translateY(-1px); }
.al-bs table.customers .btn-primary, .al-bs table.customers input[type="submit"] { height: 34px; padding: 0 14px; font-size: 13px; }

/* Ledger / payment totals printed with inline colours. */
.al-bs td[style*="#deb887"] { background: var(--brand-50) !important; color: var(--ink) !important; }
.al-bs td[style*="#008080"] { background: var(--brand-500) !important; color: var(--on-brand) !important; }

/* Headline figures printed by the fragments (outstanding, opening balance). */
.al-bs h3[style*="f31302"] { color: var(--ink) !important; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; text-align: left !important; margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.al-bs h3[style*="f31302"] span { display: block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.al-bs h5[style*="f31302"] { color: var(--ink-muted) !important; font-size: 13px; font-weight: 500; text-align: left !important; margin: 0 0 16px; }
.al-bs h4[style*="039dfc"] { color: var(--brand-text) !important; font-size: 15px; font-weight: 600; text-align: left !important; margin: 0 0 14px; }

/* ---------- Legacy markup: live-order cards and the step timeline ---------- */
.al-bs .card.accordion { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 16px !important; transition: box-shadow var(--al-med) var(--al-ease), transform var(--al-med) var(--al-ease); animation: al-rise 520ms var(--al-ease) both; }
.al-bs .card.accordion:hover { box-shadow: var(--shadow-md); }
.al-bs .card.accordion .bg-dark { background: var(--surface-raised) !important; color: var(--ink) !important; border-bottom: 1px solid var(--border); border-radius: 0 !important; text-align: left !important; padding: 14px 24px !important; font-size: 13px; }
.al-bs .card.accordion .bg-dark .text-uppercase { color: var(--ink-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.al-bs .card.accordion .bg-dark .text-medium { color: var(--ink); font: 600 15px/20px var(--font-mono); text-transform: none; margin-left: 6px; }
.al-bs .card.accordion .bg-dark span[style*="position:absolute"] { color: var(--ink-muted) !important; right: 24px !important; }
.al-bs .card.accordion div[style*="303841"] { background: var(--brand-50) !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; text-align: left !important; padding: 8px 24px !important; font-weight: 600; }
.al-bs .card.accordion div[style*="303841"] span { background: transparent !important; color: var(--brand-text) !important; }
.al-bs .card.accordion .card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; padding: 18px 24px; }
.al-bs .card.accordion .card-body > .col-md-2 h6 { float: none !important; margin: 0 0 4px !important; font: 600 13px/20px var(--font-mono); color: var(--ink); }
.al-bs .card.accordion .card-body > .col-md-2 h6 + h6 { text-decoration: none !important; }
.al-bs a.openProductModal { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); color: var(--brand-text); font: 600 12px var(--font-sans); text-decoration: none; transition: background var(--al-fast), border-color var(--al-fast); }
.al-bs a.openProductModal:hover { background: var(--brand-50); border-color: var(--brand-text); }

.al-bs .steps { padding: 8px 0 !important; }
.al-bs .steps .step .step-icon-wrap::before, .al-bs .steps .step .step-icon-wrap::after { height: 3px; background-color: var(--border); }
.al-bs .steps .step.completed .step-icon-wrap::before, .al-bs .steps .step.completed .step-icon-wrap::after { background-color: var(--brand-500); }
.al-bs .steps .step .step-icon { width: 36px; height: 36px; line-height: 34px; border: 2px solid var(--border-strong); background: var(--surface); color: var(--ink-muted); font-size: 14px; transition: background 300ms, border-color 300ms; }
.al-bs .steps .step.completed .step-icon { background: var(--brand-500); border-color: var(--brand-500); color: var(--on-brand); }
.al-bs .steps .step .step-title { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--ink); }
.al-bs .steps .step p.text-muted { color: var(--ink-muted) !important; font-size: 12px; margin: 0; }
.al-bs .steps .step1 .step-icon { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--surface-raised); border: 1px solid var(--border); overflow: hidden; }
.al-bs .steps .step1 .step-icon img { max-width: 32px; max-height: 32px; }
.al-bs .steps .step-title[class] { color: var(--ink); }
.al-bs .card.accordion + .panel { display: none; }

/* ---------- Legacy markup: pending-order sections ---------- */
.al-bs .mb-30.accordion { background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 12px !important; transition: box-shadow var(--al-med) var(--al-ease); animation: al-rise 520ms var(--al-ease) both; }
.al-bs .mb-30.accordion:hover { box-shadow: var(--shadow-md); }
.al-bs .mb-30.accordion .card-body { padding: 16px 20px; }
.al-bs .mb-30.accordion h5 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.al-bs .mb-30.accordion .col-sm:first-child h5 { color: var(--brand-text); }
.al-bs .panel1 { background: var(--surface) !important; padding: 0 !important; margin: 0 0 16px !important; border-radius: var(--radius-lg); }

/* ---------- Bootstrap pieces used by the pages ---------- */
.al-bs .modal-content { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.al-bs .modal-header { background: var(--surface-raised) !important; border-bottom: 1px solid var(--border) !important; }
.al-bs .modal .close { color: var(--ink-muted); text-shadow: none; opacity: 1; }
.al-bs .dropdown-divider { border-top-color: var(--border); }
.al-bs .form-control::placeholder { color: var(--ink-muted); }
.al-bs input.al-btn { -webkit-appearance: none; appearance: none; }

/* ---------- Visit details (Dailycallplan) ---------- */
.al-bs .filter-bar { background: var(--surface) !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; margin: 0 !important; padding: 18px 24px !important; }
.al-bs .filter-bar label { color: var(--ink-muted) !important; }
.al-bs .filter-bar input, .al-bs .filter-bar select { border-color: var(--border-strong) !important; background: var(--surface) !important; color: var(--ink) !important; height: 42px; border-radius: var(--radius-md) !important; }
.al-bs .btn-filter { background: var(--brand-500) !important; border-radius: var(--radius-md) !important; height: 42px; padding: 0 18px !important; }
.al-bs .btn-filter:hover { background: var(--brand-600) !important; box-shadow: var(--shadow-brand); }
.al-bs .btn-reset { color: var(--brand-text) !important; border-color: var(--border-strong) !important; background: var(--surface) !important; border-radius: var(--radius-md) !important; height: 42px; }
.al-bs .visit-header { background: var(--surface-raised) !important; color: var(--ink) !important; border-bottom: 1px solid var(--border); border-radius: 0 !important; padding: 14px 24px !important; }
.al-bs .visit-header .badge-count { background: var(--brand-100) !important; color: var(--brand-text) !important; }
.al-bs .visit-table-wrap { border: 0 !important; border-radius: 0 !important; padding: 8px 16px 16px; }
.al-bs .error-box { background: var(--danger-soft) !important; border-color: transparent !important; color: var(--danger) !important; border-radius: var(--radius-md) !important; }

/* ---------- Dark theme fixes for DeskApp components ---------- */
[data-theme="dark"] .al-bs .datepicker, [data-theme="dark"] .al-bs .datepicker--content { background: var(--surface); color: var(--ink); }
[data-theme="dark"] .al-bs table.dataTable tbody tr { background: var(--surface); color: var(--ink); }


/* =====================================================================
   Aurolab Dealer Portal — "Aperture" layer (prefix al-).
   The signature of the combined portal: lens rings, a teal aurora and
   focus-pull motion. Load after aurolab.css. Everything here respects
   prefers-reduced-motion (the rule at the end of aurolab.css).
   ===================================================================== */

@keyframes al-orbit { to { transform: rotate(360deg); } }
@keyframes al-orbit-rev { to { transform: rotate(-360deg); } }
@keyframes al-orbit-node { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes al-sweep { 0% { stroke-dashoffset: var(--len, 600); } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes al-drift-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(8%, -6%) scale(1.15); } }
@keyframes al-drift-b { 0%,100% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-10%, 8%) scale(.9); } }
@keyframes al-focus { 0% { filter: blur(6px); opacity: 0; transform: scale(1.04); } 100% { filter: blur(0); opacity: 1; transform: none; } }
@keyframes al-marquee { to { transform: translateX(-50%); } }
@keyframes al-glint { 0%, 70% { transform: translateX(-140%) rotate(20deg); } 100% { transform: translateX(240%) rotate(20deg); } }
@keyframes al-topline { 0% { transform: scaleX(0); } 60% { transform: scaleX(.7); } 100% { transform: scaleX(.92); } }
@keyframes al-word-in { from { opacity: 0; transform: translateY(60%); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes al-word-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-60%); filter: blur(4px); } }
@keyframes al-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes al-fill { from { width: 0; } }

.al-focus-in { animation: al-focus 900ms var(--al-ease) both; }
.al-display { font-family: var(--font-display); letter-spacing: -.02em; }

/* ---------- Aurora: drifting teal light for dark stages ---------- */
.al-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.al-aurora::before, .al-aurora::after, .al-aurora i { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); }
.al-aurora::before { width: 60%; height: 70%; left: -10%; top: -20%; background: rgba(1,100,129,.75); animation: al-drift-a 18s ease-in-out infinite; }
.al-aurora::after { width: 55%; height: 60%; right: -15%; bottom: -15%; background: rgba(27,177,175,.45); animation: al-drift-b 22s ease-in-out infinite; }
.al-aurora i { width: 30%; height: 35%; left: 40%; top: 30%; background: rgba(143,217,216,.18); animation: al-drift-b 14s ease-in-out infinite reverse; }
.al-grid-floor { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--stage-line) 1px, transparent 1px), linear-gradient(90deg, var(--stage-line) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%); }

/* ---------- Aperture: the lens-ring motif (inline SVG) ---------- */
.al-aperture { display: block; overflow: visible; }
.al-aperture .ap-spin { transform-origin: 50% 50%; transform-box: view-box; }
.al-aperture .ap-ticks { stroke: var(--stage-muted); stroke-width: 1.2; opacity: .55; animation: al-orbit 90s linear infinite; }
.al-aperture .ap-dash { fill: none; stroke: var(--secondary); stroke-width: 1.5; stroke-dasharray: 2 10; opacity: .8; animation: al-orbit-rev 60s linear infinite; }
.al-aperture .ap-ring { fill: none; stroke: var(--stage-line); stroke-width: 1; }
.al-aperture .ap-arc { fill: none; stroke-linecap: round; stroke-width: 3; animation: al-orbit 24s linear infinite; }
.al-aperture .ap-arc.a { stroke: var(--secondary); }
.al-aperture .ap-arc.b { stroke: #4aa6c2; animation-duration: 36s; animation-direction: reverse; }
.al-aperture .ap-blades path { fill: rgba(1,100,129,.55); stroke: rgba(143,217,216,.35); stroke-width: 1; }
.al-aperture .ap-blades { animation: al-orbit 40s linear infinite; }
.al-aperture .ap-core { fill: #012f3d; stroke: var(--secondary); stroke-width: 2; }
.al-aperture .ap-iris { fill: none; stroke: rgba(27,177,175,.6); stroke-width: 1; stroke-dasharray: 1 4; animation: al-orbit 20s linear infinite; }
.al-aperture .ap-pupil { fill: var(--secondary); }
.al-aperture .ap-glint { fill: #ffffff; opacity: .85; }
.al-aperture .ap-pulse { fill: none; stroke: var(--secondary); stroke-width: 1.5; transform-origin: 50% 50%; transform-box: fill-box; animation: al-ping 3.2s var(--al-ease) infinite; }

/* Orbiting module nodes around the aperture */
.al-orbit { position: absolute; inset: 0; animation: al-orbit 48s linear infinite; }
.al-orbit-node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.al-orbit-node > span { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: var(--radius-full); background: rgba(1,47,61,.72); border: 1px solid rgba(143,217,216,.28); color: var(--stage-ink); font: 600 12px/1 var(--font-sans); white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: al-orbit-node 48s linear infinite; }
.al-orbit-node > span svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--secondary); color: var(--on-secondary); flex: none; }

/* ---------- Aperture loader (replaces the plain spinner) ---------- */
.al-loader { position: relative; width: 28px; height: 28px; display: inline-block; }
.al-loader::before, .al-loader::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid transparent; }
.al-loader::before { border-top-color: var(--brand-500); border-right-color: var(--brand-500); animation: al-spin 900ms linear infinite; }
.al-loader::after { inset: 6px; border-bottom-color: var(--secondary); border-left-color: var(--secondary); animation: al-spin 700ms linear infinite reverse; }
.al-loader--sm { width: 16px; height: 16px; } .al-loader--sm::after { inset: 4px; }
.al-loader--lg { width: 48px; height: 48px; } .al-loader--lg::after { inset: 10px; }

/* Thin progress line under the top bar while a page or report loads */
.al-topline { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 100; background: var(--grad-lens); transform-origin: left; transform: scaleX(0); pointer-events: none; }
.al-topline.is-on { animation: al-topline 2.4s var(--al-ease) forwards; }

/* ---------- Module switcher (Dealer operations ↔ Stock intelligence) ---------- */
.al-modules { position: relative; display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--radius-full); background: var(--surface-raised); border: 1px solid var(--border); }
.al-modules a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px 0 12px; border-radius: var(--radius-full); color: var(--ink-muted); font: 600 13px var(--font-sans); text-decoration: none; white-space: nowrap; transition: color var(--al-med) var(--al-ease); }
.al-modules a svg { width: 18px; height: 18px; }
.al-modules a:hover { color: var(--ink); }
.al-modules a[aria-current="true"] { color: var(--on-brand); }
.al-modules a:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.al-modules-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: var(--radius-full); background: var(--brand-500); box-shadow: var(--shadow-brand); transition: left 420ms var(--al-ease), width 420ms var(--al-ease); }
.al-modules-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%); background-size: 250% 100%; animation: al-shimmer-bg 4s ease-in-out infinite; }
@keyframes al-shimmer-bg { 0%, 60% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

/* Sidebar: module heading with the lens mark */
.al-module-head { display: flex; align-items: center; gap: 10px; margin: 4px 8px 10px; padding: 10px 12px; border-radius: var(--radius-md); background: rgba(255,255,255,.05); border: 1px solid rgba(143,217,216,.14); }
.al-module-head .al-lens { flex: none; }
.al-module-head b { display: block; font: 600 13px/16px var(--font-sans); color: var(--on-brand); }
.al-module-head small { display: block; font-size: 11px; line-height: 14px; color: var(--brand-300); }
.al-lens { width: 28px; height: 28px; border-radius: 50%; position: relative; background: radial-gradient(circle at 50% 50%, var(--secondary) 0 22%, #012f3d 23% 38%, transparent 39%), conic-gradient(from 0deg, var(--secondary), #016481, var(--secondary)); animation: al-orbit 12s linear infinite; }
.al-lens::after { content: ""; position: absolute; left: 30%; top: 26%; width: 4px; height: 4px; border-radius: 50%; background: #fff; }
.al-sidebar .al-nav-item[aria-current="page"]::after, .al-sidebar .al-nav-sub a[aria-current="page"]::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 0 3px rgba(27,177,175,.25); }
.al-sidebar { background: linear-gradient(180deg, var(--brand-900) 0%, var(--brand-800) 100%); }

/* ---------- Stat tile (Stock intelligence KPIs) ---------- */
.al-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.al-stat { --tone: var(--brand-500); --tone-soft: var(--brand-100); --tone-ink: var(--brand-text); position: relative; overflow: hidden; display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); isolation: isolate; transition: transform var(--al-med) var(--al-ease), box-shadow var(--al-med) var(--al-ease), border-color var(--al-med); animation: al-rise 560ms var(--al-ease) both; }
.al-stat::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--al-med); background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(27,177,175,.16), transparent 60%); }
.al-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--tone); }
.al-stat:hover::before { opacity: 1; }
.al-stat-ring { position: absolute; right: -28px; top: -28px; width: 104px; height: 104px; border-radius: 50%; border: 1px dashed var(--tone); opacity: .35; animation: al-orbit 30s linear infinite; }
.al-stat-ring::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; border: 1px solid var(--tone); opacity: .6; }
.al-stat-top { display: flex; align-items: center; gap: 10px; }
.al-stat-icon { width: 34px; height: 34px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--tone-soft); color: var(--tone-ink); flex: none; }
.al-stat-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.al-stat-value { font: 700 28px/34px var(--font-display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.al-stat-sub { font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.al-stat-formula { font: 500 11px/16px var(--font-mono); color: var(--ink-muted); opacity: .85; }
.al-stat--secondary { --tone: var(--secondary); --tone-soft: var(--secondary-soft); --tone-ink: var(--accent); }
.al-stat--success { --tone: var(--success); --tone-soft: var(--success-soft); --tone-ink: var(--success); }
.al-stat--warning { --tone: var(--warning); --tone-soft: var(--warning-soft); --tone-ink: var(--warning); }
.al-stat--danger { --tone: var(--danger); --tone-soft: var(--danger-soft); --tone-ink: var(--danger); }
.al-stat--hero { background: var(--stage); border-color: transparent; color: var(--stage-ink); }
.al-stat--hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 100% 0%, rgba(27,177,175,.35), transparent 60%), radial-gradient(90% 90% at 0% 100%, rgba(1,100,129,.6), transparent 60%); }
.al-stat--hero .al-stat-value { color: #ffffff; } .al-stat--hero .al-stat-label, .al-stat--hero .al-stat-sub, .al-stat--hero .al-stat-formula { color: var(--stage-muted); }
.al-stat--hero .al-stat-icon { background: var(--secondary); color: var(--on-secondary); }
.al-stat--hero .al-stat-ring { border-color: var(--secondary); }

/* Meter: coverage / surplus share */
.al-meter { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--surface-raised); border: 1px solid var(--border); overflow: hidden; }
.al-meter > i { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); border-radius: inherit; background: var(--grad-lens); animation: al-fill 1200ms var(--al-ease) both 300ms; }
.al-meter > i::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: al-glint 3s ease-in-out infinite 1.5s; }
.al-meter--warning > i { background: var(--warning); } .al-meter--danger > i { background: var(--danger); }

/* Division chips (IOL · Pharmacy · Suture · Blade) */
.al-div { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-sm); font: 600 12px var(--font-sans); background: var(--surface-raised); border: 1px solid var(--border); color: var(--ink); }
.al-div::before { content: ""; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--c, var(--brand-500)); }
.al-div--iol { --c: #016481; } .al-div--pharmacy { --c: #1bb1af; } .al-div--suture { --c: #7a929c; } .al-div--blade { --c: #9a5b00; }

/* ---------- Ticker (sign-in footer, announcements) ---------- */
.al-ticker { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.al-ticker-track { display: flex; width: max-content; gap: 32px; animation: al-marquee 50s linear infinite; }
.al-ticker:hover .al-ticker-track { animation-play-state: paused; }
.al-ticker-track span { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--stage-muted); white-space: nowrap; }
.al-ticker-track span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); }

/* ---------- Word cycler (hero headline) ---------- */
.al-cycle { position: relative; display: inline-grid; vertical-align: bottom; overflow: hidden; }
.al-cycle > span { grid-area: 1 / 1; opacity: 0; white-space: nowrap; background: linear-gradient(90deg, #8fd9d8, #1bb1af); -webkit-background-clip: text; background-clip: text; color: transparent; }
.al-cycle > span.is-in { animation: al-word-in 600ms var(--al-ease) both; }
.al-cycle > span.is-out { animation: al-word-out 500ms var(--al-ease) both; }
.al-cycle > span:first-child { opacity: 1; }

/* ---------- Spotlight card (any .al-card can opt in) ---------- */
.al-spot { position: relative; isolation: isolate; }
.al-spot::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity var(--al-med); background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(27,177,175,.35), transparent 55%); }
.al-spot:hover::before { opacity: 1; }

/* ---------- Welcome banner (module home) ---------- */
.al-welcome { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: 28px 32px; background: var(--stage); color: var(--stage-ink); display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 148px; }
.al-welcome h1 { margin: 6px 0 4px; font: 700 26px/32px var(--font-display); letter-spacing: -.02em; color: #ffffff; position: relative; }
.al-welcome p { margin: 0; color: var(--stage-muted); position: relative; max-width: 560px; }
.al-welcome .al-kicker { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stage-muted); }
.al-welcome .al-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); color: var(--secondary); animation: al-pulse 2s infinite; }
.al-welcome .al-aperture { position: relative; flex: none; width: 150px; height: 150px; margin: -20px 0; }
.al-welcome-actions { position: relative; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.al-btn--glass { background: rgba(255,255,255,.08); color: #ffffff; border-color: rgba(143,217,216,.35); }
.al-btn--glass:hover { background: rgba(255,255,255,.14); border-color: var(--secondary); }
@media (max-width: 720px) { .al-welcome .al-aperture { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .al-aurora::before, .al-aurora::after, .al-aurora i, .al-orbit, .al-orbit-node > span, .al-aperture *, .al-ticker-track, .al-lens, .al-stat-ring { animation: none !important; }
}

/* ---------- Context bar (stock pages: live badge, warehouse filter, refresh) ---------- */
.al-context { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.al-context-filter { display: flex; align-items: center; gap: 8px; margin: 0; }
.al-context-filter label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.al-context-filter select { width: auto; min-height: 34px; height: 34px; padding-top: 0; padding-bottom: 0; }
.al-context-spacer { flex: 1; }
@media (max-width: 1180px) { .al-topbar .al-modules a span { display: none; } .al-topbar .al-modules a { padding: 0 10px; } .al-topbar .al-crumbs { display: none; } }
a.al-btn, .al-btn { text-decoration: none; }

/* =====================================================================
   Stock intelligence (formerly AuroStock / AuroPulse) → design-system bridge.
   Loaded by layouts/stock.html after Bootstrap 5 and the Aurolab CSS.
   Restyles the existing page markup (.kpi-card, .filter-card, .page-header,
   inline blue gradients, Bootstrap tables) without editing the pages.
   ===================================================================== */

.al-stock { --bs-primary: var(--brand-500); --bs-primary-rgb: 1,100,129; --bs-link-color: var(--brand-text); --bs-link-color-rgb: 1,100,129; --bs-body-bg: var(--page); --bs-body-color: var(--ink); --bs-border-color: var(--border); --bs-secondary-color: var(--ink-muted); --bs-tertiary-bg: var(--surface-raised); font-size: 14px; }
.al-stock .text-muted { color: var(--ink-muted) !important; }
.al-stock .text-primary { color: var(--brand-text) !important; }
.al-stock .bg-primary { background: var(--brand-500) !important; }

/* Content sits in the shell grid: drop Bootstrap row margins that fight its gap */
.al-stock .al-content > .row { margin-top: 0; }

/* Page header */
.al-stock .page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 0 0 4px; padding: 0; border: 0; }
.al-stock .page-header h5 { font: 700 22px/30px var(--font-display); letter-spacing: -.02em; color: var(--ink); }

/* Filter bar */
.al-stock .filter-card, .al-stock .div-filter-bar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 20px; }
.al-stock .form-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 4px; }
.al-stock .form-control, .al-stock .form-select { background-color: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--radius-md); min-height: 38px; font-size: 13px; }
.al-stock .form-control:focus, .al-stock .form-select:focus { border-color: var(--brand-500); box-shadow: var(--shadow-focus); }
.al-stock .select2-container .select2-selection--single { height: 38px !important; border: 1px solid var(--border-strong) !important; border-radius: var(--radius-md) !important; background: var(--surface) !important; }
.al-stock .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px !important; color: var(--ink) !important; }
.al-stock .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }
.al-stock .select2-container--default .select2-results__option--highlighted { background: var(--brand-500) !important; }
.al-stock .select2-dropdown { background: var(--surface); color: var(--ink); border-color: var(--border); border-radius: var(--radius-md); }

/* Buttons */
.al-stock .btn { border-radius: var(--radius-md); font-weight: 600; transition: transform var(--al-fast) var(--al-ease), box-shadow var(--al-med) var(--al-ease), background-color var(--al-fast); }
.al-stock .btn-primary { background: var(--brand-500); border-color: var(--brand-500); color: var(--on-brand); }
.al-stock .btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); box-shadow: var(--shadow-brand); transform: translateY(-1px); }
.al-stock .btn-success { background: var(--secondary); border-color: var(--secondary); color: var(--on-secondary); }
.al-stock .btn-success:hover { background: var(--secondary-600); border-color: var(--secondary-600); color: var(--on-secondary); }
.al-stock .btn-outline-secondary, .al-stock .btn-outline-primary { color: var(--brand-text); border-color: var(--border-strong); background: var(--surface); }
.al-stock .btn-outline-secondary:hover, .al-stock .btn-outline-primary:hover { background: var(--brand-50); color: var(--brand-text); border-color: var(--brand-text); }

/* KPI cards → stat tiles */
.al-stock .kpi-card { position: relative; overflow: hidden; isolation: isolate; min-height: 0; padding: 18px 20px 16px; border-radius: var(--radius-lg); background: var(--surface) !important; border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--ink); --tone: var(--brand-500); --tone-soft: var(--brand-100); --tone-ink: var(--brand-text); transition: transform var(--al-med) var(--al-ease), box-shadow var(--al-med) var(--al-ease), border-color var(--al-med); animation: al-rise 560ms var(--al-ease) both; }
.al-stock .row > div:nth-child(2) > .kpi-card { animation-delay: 60ms; } .al-stock .row > div:nth-child(3) > .kpi-card { animation-delay: 120ms; } .al-stock .row > div:nth-child(4) > .kpi-card { animation-delay: 180ms; }
.al-stock .kpi-card::before { content: ""; position: absolute; right: -28px; top: -28px; width: 104px; height: 104px; border-radius: 50%; border: 1px dashed var(--tone); opacity: .35; background: none; animation: al-orbit 30s linear infinite; }
.al-stock .kpi-card::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--al-med); background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(27,177,175,.16), transparent 60%); }
.al-stock .kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--tone); }
.al-stock .kpi-card:hover::after { opacity: 1; }
.al-stock .kpi-icon { position: static; width: 34px; height: 34px; margin-bottom: 10px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--tone-soft); color: var(--tone-ink); font-size: 16px; opacity: 1; }
.al-stock .kpi-value { font: 700 26px/32px var(--font-display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.al-stock .kpi-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); opacity: 1; margin-top: 2px; }
.al-stock .kpi-sub { font-size: 12px; color: var(--ink-muted); opacity: 1; }
.al-stock .kpi-formula { font: 500 11px/16px var(--font-mono); color: var(--ink-muted); opacity: .85; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border); background: none; }
.al-stock .kpi-blue, .al-stock .kpi-navy, .al-stock .kpi-indigo, .al-stock .kpi-purple, .al-stock .kpi-slate, .al-stock .kpi-dark { --tone: var(--brand-500); --tone-soft: var(--brand-100); --tone-ink: var(--brand-text); }
.al-stock .kpi-teal { --tone: var(--secondary); --tone-soft: var(--secondary-soft); --tone-ink: var(--accent); }
.al-stock .kpi-emerald, .al-stock .kpi-green { --tone: var(--success); --tone-soft: var(--success-soft); --tone-ink: var(--success); }
.al-stock .kpi-amber { --tone: var(--warning); --tone-soft: var(--warning-soft); --tone-ink: var(--warning); }
.al-stock .kpi-crimson, .al-stock .kpi-red { --tone: var(--danger); --tone-soft: var(--danger-soft); --tone-ink: var(--danger); }
/* The first KPI of a page becomes the dark "hero" tile */
.al-stock .row:has(> div > .kpi-card):not(.row:has(> div > .kpi-card) ~ .row) > div:first-child > .kpi-card.kpi-blue { background: var(--stage) !important; border-color: transparent; }
.al-stock .row:has(> div > .kpi-card):not(.row:has(> div > .kpi-card) ~ .row) > div:first-child > .kpi-card.kpi-blue .kpi-value { color: #fff; }
.al-stock .row:has(> div > .kpi-card):not(.row:has(> div > .kpi-card) ~ .row) > div:first-child > .kpi-card.kpi-blue :is(.kpi-label, .kpi-sub, .kpi-formula) { color: var(--stage-muted); border-color: var(--stage-line); }
.al-stock .row:has(> div > .kpi-card):not(.row:has(> div > .kpi-card) ~ .row) > div:first-child > .kpi-card.kpi-blue .kpi-icon { background: var(--secondary); color: var(--on-secondary); }
.al-stock .row:has(> div > .kpi-card):not(.row:has(> div > .kpi-card) ~ .row) > div:first-child > .kpi-card.kpi-blue::before { border-color: var(--secondary); opacity: .6; }

/* Cards and their inline blue-gradient headers */
.al-stock .card { background: var(--surface); color: var(--ink); border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; overflow: hidden; animation: al-rise 560ms var(--al-ease) both; }
.al-stock .card-header { background: var(--surface) !important; color: var(--ink) !important; border-bottom: 1px solid var(--border) !important; padding: 14px 18px !important; }
.al-stock .card-header .text-white, .al-stock .card-header span, .al-stock .card-header i { color: var(--ink) !important; opacity: 1 !important; }
.al-stock .card-header i { color: var(--brand-text) !important; }
.al-stock .card-header[style*="gradient"]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; transform: rotate(45deg); background: var(--secondary); }
.al-stock [style*="#1e3a6e"], .al-stock [style*="#1a56db"], .al-stock [style*="#1e56c8"] { background: var(--brand-500) !important; }
.al-stock .card-header[style*="#1e3a6e"], .al-stock .card-header[style*="#1a56db"] { background: var(--surface) !important; }
.al-stock [style*="#0d9488"] { background: var(--secondary) !important; color: var(--on-secondary) !important; }

/* Tables */
.al-stock .table { --bs-table-bg: var(--surface); --bs-table-color: var(--ink); --bs-table-hover-bg: var(--surface-raised); --bs-table-hover-color: var(--ink); --bs-table-striped-bg: var(--surface-raised); --bs-table-striped-color: var(--ink); --bs-table-border-color: var(--border); font-size: 13px; }
.al-stock .table thead th, .al-stock .table thead tr, .al-stock .summary-table thead th { background: var(--brand-50) !important; color: var(--ink-muted) !important; font-size: 11.5px !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--border); white-space: nowrap; }
.al-stock .table tbody tr { transition: background var(--al-fast); }
.al-stock .table td { font-variant-numeric: tabular-nums; }
.al-stock .table-wrapper { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: auto; background: var(--surface); }
.al-stock .num-positive { color: var(--success) !important; } .al-stock .num-negative { color: var(--danger) !important; } .al-stock .num-warning, .al-stock .num-excess { color: var(--warning) !important; }
.al-stock .row-to-order { background: var(--danger-soft) !important; } .al-stock .row-excess-min, .al-stock .row-excess-no-min { background: var(--warning-soft) !important; } .al-stock .row-sufficient { background: var(--success-soft) !important; }
.al-stock .record-badge { background: var(--brand-100) !important; color: var(--brand-text) !important; border-radius: var(--radius-full); font-weight: 600; }

/* Division badges */
.al-stock .badge { border-radius: var(--radius-sm); font-weight: 600; }
.al-stock .div-iol { background: #016481 !important; color: #fff !important; }
.al-stock .div-pharmacy { background: #1bb1af !important; color: #012f3d !important; }
.al-stock .div-suture { background: #4f6470 !important; color: #fff !important; }
.al-stock .div-blade { background: #9a5b00 !important; color: #fff !important; }
.al-stock .bg-amber { background: var(--warning-soft) !important; color: var(--warning) !important; }
.al-stock .bg-crimson { background: var(--danger-soft) !important; color: var(--danger) !important; }

/* Progress bars */
.al-stock .progress { background: var(--surface-raised); border-radius: var(--radius-full); overflow: hidden; }
.al-stock .progress-bar.bg-warning { background: var(--warning) !important; } .al-stock .progress-bar.bg-danger { background: var(--danger) !important; } .al-stock .progress-bar.bg-success { background: var(--success) !important; }
.al-stock .progress-bar { background: var(--grad-lens); animation: al-fill 1200ms var(--al-ease) both; }

/* Alerts, modals */
.al-stock .alert { border-radius: var(--radius-md); border: 0; }
.al-stock .alert-info { background: var(--brand-50); color: var(--brand-text); }
.al-stock .alert-success { background: var(--success-soft); color: var(--success); }
.al-stock .alert-warning { background: var(--warning-soft); color: var(--warning); }
.al-stock .alert-danger { background: var(--danger-soft); color: var(--danger); }
.al-stock .modal-content { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.al-stock .modal-header { background: var(--surface-raised) !important; color: var(--ink) !important; border-bottom: 1px solid var(--border); }

/* The old navbar/tabs/footer are replaced by the shell */
.al-stock > .navbar, .al-stock .tab-nav-wrapper, .al-stock > .footer { display: none !important; }

/* Page loader overlay (#pageLoader) */
.al-stock #pageLoader { background: rgba(1,47,61,.45) !important; }
.al-stock #pageLoader > div { background: var(--surface) !important; color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-lg) !important; }
.al-stock #pageLoader .spinner-border { border: 0; width: 48px !important; height: 48px !important; position: relative; animation: none; }
.al-stock #pageLoader .spinner-border::before, .al-stock #pageLoader .spinner-border::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; }
.al-stock #pageLoader .spinner-border::before { border-top-color: var(--brand-500); border-right-color: var(--brand-500); animation: al-spin 900ms linear infinite; }
.al-stock #pageLoader .spinner-border::after { inset: 10px; border-bottom-color: var(--secondary); border-left-color: var(--secondary); animation: al-spin 700ms linear infinite reverse; }
.al-stock #pageLoader .text-primary { color: var(--brand-text) !important; }

[data-theme="dark"] .al-stock .table { --bs-table-bg: var(--surface); }
[data-theme="dark"] .al-stock .row-to-order td, [data-theme="dark"] .al-stock .row-excess-min td, [data-theme="dark"] .al-stock .row-sufficient td { color: var(--ink); }

.al-grad-lens{background:linear-gradient(120deg,#016481 0%,#0b8a93 55%,#1bb1af 100%)}
:root{--grad-lens:linear-gradient(120deg,#016481 0%,#0b8a93 55%,#1bb1af 100%);--font-display:Sora,Inter,"Segoe UI",system-ui,sans-serif}
[data-theme="dark"]{--grad-lens:linear-gradient(120deg,#0b7c9c 0%,#139a9f 55%,#1bb1af 100%)}