:root {
    --lightera-purple-1: #6f00d3;
    --lightera-purple-2: #9e0fce;
    --lightera-purple-3: #b063ff;
    --lightera-green: #cdf564;
    --lightera-offwhite: #f2f0ee;
    --lightera-black: #000000;
    --lightera-gray: #31312f;

    --lightera-purple-hover: #b063ff;  /*#5a00ab;*/
    --lightera-green-hover: #cdf564; /*#cdf564;*/
    --lightera-purple-light: rgba(111, 0, 211, 0.08);
    --lightera-purple-border: rgba(111, 0, 211, 0.2);

    /* Sticky grid offsets — must match .topbar-inner height in MainLayout.razor.css */
    --topbar-h: 4.5rem;
    --grid-search-h: 3rem;

    /* Font: Helvetica/Arial — matches shop.lightera.com exactly */
    --font-primary: Helvetica, Arial, sans-serif;
    --font-display: Helvetica, Arial, sans-serif;
}

/* Global link color */
a {
    color: var(--lightera-gray);
}

a:hover {
    color: var(--lightera-purple-1);
}

/* Bootstrap overrides - light */
[data-bs-theme="light"] {
    --bs-body-bg: var(--lightera-offwhite);
    --bs-body-color: var(--lightera-black);
    --bs-primary: var(--lightera-purple-1);
    --bs-primary-rgb: 111, 0, 211;
    --bs-link-color: var(--lightera-gray);
    --bs-link-hover-color: var(--lightera-purple-1);
}

/* Bootstrap overrides - dark */
[data-bs-theme="dark"] {
    --bs-body-bg: #1c1c1a;
    --bs-body-color: var(--lightera-offwhite);
    --bs-primary: var(--lightera-purple-3);
    --bs-primary-rgb: 176, 99, 255;
}

[data-bs-theme="dark"] .lightera-card {
    background-color: var(--lightera-gray);
    border-color: rgba(242, 240, 238, 0.15);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .product-card:hover {
    /* background-color: var(--lightera-purple-3) !important; */
    border-color: var(--lightera-purple-3) !important;
    box-shadow: 0 8px 24px rgba(176, 99, 255, 0.3) !important;
}

[data-bs-theme="dark"] .product-card:hover .card-title {
    color: var(--lightera-purple-3) !important;
}

[data-bs-theme="dark"] .lightera-intro-banner {
    background: linear-gradient(135deg, rgba(111, 0, 211, 0.15), rgba(205, 245, 100, 0.05));
}

[data-bs-theme="dark"] .lightera-footer {
    background-color: #1c1c1a;
}

[data-bs-theme="dark"] .paginator {
    border-top-color: rgba(242, 240, 238, 0.15) !important;
}

[data-bs-theme="dark"] .paginator .pagination-text {
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .pss-toggle {
    background-color: var(--lightera-gray);
    border-color: rgba(242, 240, 238, 0.15);
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .pss-menu {
    background-color: var(--lightera-gray);
    border-color: rgba(242, 240, 238, 0.15);
}

[data-bs-theme="dark"] .pss-option {
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .paginator nav button {
    background-color: var(--lightera-gray);
    border-color: rgba(242, 240, 238, 0.15);
}

[data-bs-theme="dark"] .paginator nav button:hover:not([disabled]) {
    background-color: var(--lightera-purple-3);
}

[data-bs-theme="dark"] .lightera-nav {
    background-color: #1c1c1a !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .lightera-nav .nav-link {
    color: rgba(242, 240, 238, 0.85) !important;
}

[data-bs-theme="dark"] .lightera-nav .nav-link:hover,
[data-bs-theme="dark"] .lightera-nav .nav-link.active {
    color: var(--lightera-purple-3) !important;
}

[data-bs-theme="dark"] .lightera-sidebar {
    background-color: var(--lightera-gray);
    border-right-color: rgba(242, 240, 238, 0.15);
}

/* Typography */
body {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
}

/* Global button radius — 8px to match shop.lightera.com visual style */
.btn {
    border-radius: 8px;
}

/* Lightera primary button — subtle rounding (matches shop.lightera.com) */
.lightera-btn-primary {
    background-color: var(--lightera-purple-1);
    border: 1px solid var(--lightera-purple-1);
    color: var(--lightera-offwhite);
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.lightera-btn-primary:hover {
    background-color: var(--lightera-purple-hover);
    border-color: var(--lightera-purple-hover);
    color: var(--lightera-offwhite);
    transform: scale(1.005);
}

.lightera-btn-primary:active {
    transform: scale(0.98);
}

.lightera-btn-primary:disabled {
    opacity: 0.65;
    transform: none;
}

/* Toggle active button — purple bg selected, lime green on hover */
.lightera-btn-toggle-active,
.btn-group .lightera-btn-toggle-active {
    background-color: var(--lightera-purple-1) !important;
    border: 1px solid var(--lightera-purple-1) !important;
    color: var(--lightera-offwhite) !important;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.15s ease;
    position: relative;
    z-index: 2;
}

.lightera-btn-toggle-active:hover,
.btn-group .lightera-btn-toggle-active:hover {
    background-color: var(--lightera-green) !important;
    border-color: var(--lightera-purple-1) !important;
    color: var(--lightera-purple-1) !important;
    transform: scale(1.005);
}

.lightera-btn-toggle-active:active {
    transform: scale(0.98);
}

/* Secondary / outline button — subtle rounding (matches shop.lightera.com) */
.lightera-btn-secondary {
    background: transparent;
    border: 1px solid var(--lightera-purple-1);
    color: var(--lightera-purple-1);
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.lightera-btn-secondary:hover {
    background: var(--lightera-purple-light);
    border-color: var(--lightera-purple-hover);
    color: var(--lightera-purple-1);
    transform: scale(1.005);
}

/* Nav pills — lightera purple instead of Bootstrap blue */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #9e0fce;
    color: #fff;
}
.nav-pills .nav-link {
    color: #9e0fce;
    border-radius: 8px;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-pills .nav-link:hover:not(.active) {
    background-color: rgba(158, 15, 206, 0.08);
    color: #9e0fce;
}

/* Card styles — subtle depth (matches shop.lightera.com) */
.lightera-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.lightera-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Product card — purple fill on hover (matches shop.lightera.com) */
.product-card {
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.product-card:hover {
    /* background-color: var(--lightera-purple-1) !important; */
    border-color: var(--lightera-purple-1) !important;
    box-shadow: 0 8px 24px rgba(111, 0, 211, 0.25) !important;
    transform: translateY(-2px);
}

.product-card:hover .card-title {
    color: var(--lightera-purple-1) !important;
}

/* mix-blend-mode: multiply removed — it hides white product details (e.g. white cables) */

.lightera-card-body {
    padding: 1rem 1.25rem;
}

.lightera-card-header {
    background-color: var(--lightera-purple-1);
    color: white;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    border-bottom: none;
}

/* Nav tabs inside lightera card header — pill style matching quote detail steps */
.lightera-card-header .nav-tabs {
    margin: 0;
    padding: 0.5rem 0.5rem;
    border-bottom: none;
    gap: 0.25rem;
}
.lightera-card-header .nav-tabs .nav-link {
    color: rgba(255,255,255,0.7);
    border: none;
    outline: none;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    background: none;
    border-radius: 0.5rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.lightera-card-header .nav-tabs .nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}
.lightera-card-header .nav-tabs .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,0.18);
    font-weight: 600;
    border: none;
}
.lightera-card-header .nav-tabs .nav-link:focus,
.lightera-card-header .nav-tabs .nav-link:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Badge */
.lightera-badge-accent {
    background-color: var(--lightera-green);
    color: var(--lightera-black);
    font-weight: 600;
}

/* Results grid card — subtle purple outline */
.lightera-results-card {
    border: 1px solid var(--lightera-purple-border);
    border-radius: 0.75rem;
    overflow: visible;
}

.lightera-results-header {
    background: var(--lightera-offwhite);
    border-bottom: 1px solid var(--lightera-purple-border);
    border-radius: 0.75rem 0.75rem 0 0;
    /* Sticky: pins below the topbar while the page scrolls */
    position: sticky;
    top: var(--topbar-h);
    z-index: 10;
}

.lightera-search-icon-btn {
    background: var(--lightera-purple-1);
    border-color: var(--lightera-purple-1);
    color: #fff;
    border-radius: 0.375rem 0 0 0.375rem;
}

/* Keep grid/table content clipped for rounded bottom corners, allow horizontal scroll */
.lightera-results-card > .p-0:last-child {
    /* overflow-x: auto; */ /* REVERT: restore this line and remove overflow: hidden below */
    /* overflow-y: hidden; */ /* REVERT: restore this line and remove overflow: hidden below */
    /* overflow-y: clip; */ /* second attempt — still blocked sticky because overflow-x: auto created a scroll container */
    overflow: hidden; /* clip bottom corners; .table-responsive inside handles its own scroll */
    border-radius: 0 0 0.75rem 0.75rem;
}

.lightera-results-tab {
    background: var(--lightera-purple-1);
    color: #fff;
    padding: 0.65rem 2rem;
    min-width: 14rem;
    border-radius: 0 0 0.5rem 0;
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Inputs — square corners (matches shop.lightera.com) */
.form-control,
.form-select {
    border-radius: 0;
}

/* Brand-colored checkbox/radio pickers */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    accent-color: #b063ff;
}

/* Override Bootstrap's blue for .form-check-input */
.form-check-input:checked {
    background-color: var(--lightera-purple-3) !important;
    border-color: var(--lightera-purple-3) !important;
}
.form-check-input:focus {
    border-color: var(--lightera-purple-3) !important;
    box-shadow: 0 0 0 0.25rem rgba(176, 99, 255, 0.25) !important;
}

/* ── DatePicker wrapper (input + calendar icon) ─────────────────────── */
.datepicker-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
}
.datepicker-wrapper input {
    padding-right: 2.2rem;
}
.datepicker-icon {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.2rem;
    border: none;
    background: transparent;
    color: var(--lightera-purple-1, #6f00d3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.datepicker-icon:hover {
    opacity: 1;
}
.datepicker-icon:disabled {
    cursor: default;
    opacity: 0.3;
}

/* ── Flatpickr brand theme overrides ────────────────────────────────── */
.flatpickr-calendar {
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(111, 0, 211, 0.15);
    border: 1px solid rgba(111, 0, 211, 0.12);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #9e0fce;
    border-color: #9e0fce;
    color: #fff;
}
.flatpickr-day.today {
    border-color: #cdf564;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: #cdf564;
    border-color: #cdf564;
    color: #1a1a2e;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: rgba(205, 245, 100, 0.35);
    border-color: #cdf564;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #9e0fce;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgba(158, 15, 206, 0.05);
}
.flatpickr-current-month input.cur-year:focus {
    outline: none;
    border-color: #9e0fce;
    box-shadow: 0 0 0 2px rgba(158, 15, 206, 0.25);
}
.flatpickr-current-month input.cur-year::selection {
    background: #9e0fce;
    color: #fff;
}

/* ── Custom month picker panel (replaces native <select>) ──────────── */
.fp-month-label {
    cursor: pointer;
    font-weight: 500;
    font-size: inherit;
    color: inherit;
    padding: 0 4px;
    border-radius: 4px;
    transition: background 0.15s;
}
.fp-month-label:hover {
    background: var(--lightera-purple-light, rgba(111, 0, 211, 0.08));
    color: var(--lightera-purple-1, #6f00d3);
}
.fp-month-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: #fff;
    border: 1px solid rgba(111, 0, 211, 0.12);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(111, 0, 211, 0.12);
    padding: 4px 0;
    max-height: 220px;
    overflow-y: auto;
}
.fp-month-item {
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.12s, color 0.12s;
}
.fp-month-item:hover {
    background: var(--lightera-purple-light, rgba(111, 0, 211, 0.08));
    color: var(--lightera-purple-1, #6f00d3);
}
.fp-month-item.active {
    background: var(--lightera-purple-1, #6f00d3);
    color: #fff;
    font-weight: 600;
}
/* Dark mode */
[data-bs-theme="dark"] .fp-month-panel {
    background: #1e1e2e;
    border-color: rgba(158, 15, 206, 0.25);
}
[data-bs-theme="dark"] .fp-month-item:hover {
    background: rgba(158, 15, 206, 0.15);
    color: var(--lightera-purple-3, #b063ff);
}
[data-bs-theme="dark"] .fp-month-item.active {
    background: #9e0fce;
    color: #fff;
}
/* Dark mode */
[data-bs-theme="dark"] .flatpickr-calendar {
    background: #1e1e2e;
    border-color: rgba(158, 15, 206, 0.25);
}
[data-bs-theme="dark"] .flatpickr-day {
    color: #e0e0e0;
}
[data-bs-theme="dark"] .flatpickr-day:hover,
[data-bs-theme="dark"] .flatpickr-day:focus {
    background: rgba(205, 245, 100, 0.2);
    border-color: #cdf564;
}
[data-bs-theme="dark"] .flatpickr-day.selected {
    background: #9e0fce;
    border-color: #9e0fce;
    color: #fff;
}
[data-bs-theme="dark"] .flatpickr-months,
[data-bs-theme="dark"] .flatpickr-weekdays,
[data-bs-theme="dark"] .flatpickr-weekday {
    background: #1e1e2e;
    color: #b0b0b0;
}
[data-bs-theme="dark"] .flatpickr-months .flatpickr-month {
    background: #1e1e2e;
    color: #e0e0e0;
}
[data-bs-theme="dark"] .flatpickr-current-month input.cur-year,
[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
    color: #e0e0e0;
}
[data-bs-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: #b0b0b0;
}

.form-control:focus {
    border-color: var(--lightera-purple-3);
    box-shadow: 0 0 0 0.25rem rgba(111, 0, 211, 0.15);
}

.form-select:focus {
    border-color: var(--lightera-purple-3);
    box-shadow: 0 0 0 0.25rem rgba(111, 0, 211, 0.15);
}

.lightera-input-icon {
    background-color: var(--lightera-purple-1);
    color: white;
    border-color: var(--lightera-purple-1);
}

/* Override Blazor validation green borders with lightera purple */
.form-control.valid,
.form-control.modified.valid {
    border-color: #9e0fce;
}
.form-control.valid:focus,
.form-control.modified.valid:focus {
    border-color: #9e0fce;
    box-shadow: 0 0 0 0.25rem rgba(158, 15, 206, 0.15);
}
.form-control.invalid,
.form-control.modified.invalid {
    border-color: #dc3545;
}
.form-control.invalid:focus,
.form-control.modified.invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.15);
}

/* Modal */
.lightera-modal-header {
    background-color: var(--lightera-purple-1);
    color: white;
    border-bottom: none;
}

.lightera-modal-header .btn-close {
    filter: invert(1);
}

/* Detail view card */
.lightera-detail-card {
    border-radius: 0.75rem;
    overflow: hidden;
}

.lightera-detail-header {
    background: var(--lightera-offwhite);
    border-bottom: 1px solid var(--lightera-purple-border);
    padding: 0;
}

.lightera-detail-tab {
    background: var(--lightera-purple-1);
    color: #fff;
    padding: 0.65rem 2rem;
    border-radius: 0 0 0.5rem 0;
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Navbar — matches ofs-sales.com/CPR_NEW Lightera corporate style */
.lightera-nav {
    background: #fff;
    border: none;
    box-shadow: 0 1px 8px rgba(111, 0, 211, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.lightera-nav .navbar-brand {
    padding: 0.25rem 0;
    outline: none;
    box-shadow: none;
}

.lightera-nav .navbar-brand img {
    height: 48px;
    transition: transform 0.3s ease;
}

.lightera-nav .navbar-brand img:hover {
    transform: scale(1.03);
}

.lightera-nav .nav-link {
    color: #4a4a48 !important;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    transition: color 0.2s ease;
    cursor: pointer;
}

.lightera-nav .nav-link:hover,
.lightera-nav .nav-link.active {
    color: var(--lightera-purple-1) !important;
    background-color: transparent;
}

/* Remove Bootstrap focus outlines from nav elements */
.lightera-nav .nav-link:focus,
.lightera-nav .nav-link:focus-visible,
.lightera-nav .navbar-brand:focus,
.lightera-nav .navbar-brand:focus-visible,
.lightera-nav .btn:focus,
.lightera-nav .btn:focus-visible,
.lightera-nav .dropdown-toggle:focus,
.lightera-nav .dropdown-toggle:focus-visible {
    outline: none;
    box-shadow: none;
}

.lightera-nav .nav-link .bi {
    font-size: 1rem;
}

.lightera-nav .dropdown-item {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.lightera-nav .dropdown-item:hover {
    color: var(--lightera-purple-1);
    background-color: var(--lightera-purple-light);
}

/* Footer — dark gray with purple top border (matches CPR_NEW) */
.lightera-footer {
    background-color: var(--lightera-gray);
    border-top: 3px solid var(--lightera-purple-1);
    font-size: 0.85rem;
    color: var(--lightera-offwhite);
}

.lightera-footer a:hover {
    color: #fff !important;
    opacity: 1 !important;
}

/* Theme toggle button */
.lightera-theme-toggle {
    color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
    background: transparent;
}

.lightera-theme-toggle:hover {
    background-color: rgba(111, 0, 211, 0.08);
    color: var(--lightera-purple-1);
    border-color: var(--lightera-purple-1);
}

/* Loading spinner */
.lightera-spinner {
    background-color: var(--lightera-purple-1);
    width: 0.75rem;
    height: 0.75rem;
}

/* Intro banner */
.lightera-intro-banner {
    background: linear-gradient(135deg, var(--lightera-purple-light), rgba(205, 245, 100, 0.08));
    border-left: 4px solid var(--lightera-purple-1);
}

/* Text color helpers */
.text-purple {
    color: var(--lightera-purple-1);
}

.bg-purple {
    background-color: var(--lightera-purple-1) !important;
}

.border-purple {
    border-color: var(--lightera-purple-1) !important;
}

.list-group-item.active {
    background-color: var(--lightera-purple-3);
    border-color: var(--lightera-purple-3);
}

.list-group-item-action:not(.active):hover,
.list-group-item-action:not(.active):focus {
    background-color: #cdf564;
    color: #000;
}

/* Status badge colors — pill shape (matches shop.lightera.com variant-pills) */
.status-badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 40px;
    white-space: nowrap;
}

.status-draft { background-color: #e9ecef; color: #495057; }
.status-submitted { background-color: #cfe2ff; color: #052c65; }
.status-pending { background-color: #fff3cd; color: #664d03; }
.status-approved { background-color: #d1e7dd; color: #0a3622; }
.status-rejected { background-color: #f8d7da; color: #58151c; }
.status-cancelled { background-color: #e9ecef; color: #6c757d; }
.status-completed { background-color: #d1e7dd; color: #0a3622; }
.status-expired { background-color: #e9ecef; color: #6c757d; }

/* Cart badge (legacy, unused) */
.cart-badge {
    background-color: var(--lightera-green);
    color: var(--lightera-black);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -4px;
    right: -6px;
}

/* Nav cart icon with badge overlay */
.nav-cart-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.nav-cart-link,
.nav-cart-link:focus,
.nav-cart-link:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--lightera-black);
    text-decoration: none;
    border: none;
    outline: none;
    box-shadow: none;
    background: none;
    padding: 0;
}
.nav-cart-link:hover {
    color: var(--lightera-purple);
}
.nav-cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    text-decoration: none;
    background-color: #6f00d3;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 1.5px solid #fff;
}
.nav-cart-badge:hover,
.nav-cart-badge:focus {
    color: #fff;
    text-decoration: none;
}

/* Fade-in animation */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Table padding inside cards (non-QuickGrid tables) */
.lightera-card .table:not(.quickgrid) th {
    padding: 0.75rem 1rem;
    font-weight: 600;
    background: var(--lightera-offwhite);
    border-color: rgba(0, 0, 0, 0.1);
}

.lightera-card .table:not(.quickgrid) td {
    padding: 0.6rem 1rem;
    vertical-align: middle;
}

.lightera-card .table.line-items-grid td {
    vertical-align: top;
}

.table.line-items-grid .form-control {
    border-radius: 0.375rem;
}

/* Sticky column headers for line items grid */
.table.line-items-grid {
    border-collapse: separate;
    border-spacing: 0;
}

.line-items-sticky-row th {
    position: sticky;
    top: 0;
    z-index: 12;
    background: var(--lightera-offwhite, #f2f0ee) !important;
    color: var(--lightera-gray, #31312f) !important;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 -5px 0 0 #f2f0ee;
}
.line-items-sticky-row th:first-child {
    border-top-left-radius: 0.75rem;
}
.line-items-sticky-row th:last-child {
    border-top-right-radius: 0.75rem;
}

.lightera-card .table:not(.quickgrid) tfoot td,
.lightera-card .table:not(.quickgrid) tfoot th {
    padding: 0.75rem 1rem;
}

/* QuickGrid styling */
.quickgrid th {
    background: var(--lightera-offwhite) !important;
    color: var(--lightera-black) !important;
    font-weight: 600;
    border-color: rgba(0, 0, 0, 0.1) !important;
    padding: 0.75rem !important;
}

.quickgrid th:hover {
    background: #e8e6e3 !important;
}

.quickgrid th .col-title {
    color: var(--lightera-black) !important;
}

.quickgrid th .sort-indicator {
    color: var(--lightera-purple-1) !important;
}

/* Server-side sortable column headers */
.sortable-header {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable-header i {
    font-size: 0.7rem;
    margin-left: 0.25rem;
    color: var(--lightera-purple-1);
}

.sortable-header.sorted {
    color: var(--lightera-purple-1) !important;
}

/* Grid loading overlay — shown during sort/page/filter reload */
.grid-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

.grid-loading-overlay .spinner-border.text-purple {
    color: var(--lightera-purple-1) !important;
    width: 2rem;
    height: 2rem;
}

[data-bs-theme="dark"] .grid-loading-overlay {
    background: rgba(30, 30, 28, 0.7);
}

.quickgrid td {
    padding: 0.6rem 0.75rem !important;
    vertical-align: middle;
    border-bottom: none !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-accent-bg: transparent !important;
}

.quickgrid > tbody > tr {
    --bs-table-striped-bg: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
}

/* QuickGrid links — dark text, not blue (matches CPR_NEW) */
.quickgrid td a {
    color: var(--lightera-black);
}

.quickgrid td a:hover {
    color: var(--lightera-purple-1);
}

/* ── Table style: Modern clean rows — white bg, subtle border, neutral hover (all grids) ── */
.lightera-card .table:not(.cart-table) > tbody > tr > td,
.lightera-card .table:not(.cart-table) > tbody > tr:nth-child(odd) > td,
.lightera-card .table:not(.cart-table) > tbody > tr:nth-child(even) > td,
.lightera-results-card .table:not(.portal-table) > tbody > tr > td,
.lightera-results-card .table:not(.portal-table) > tbody > tr:nth-child(odd) > td,
.lightera-results-card .table:not(.portal-table) > tbody > tr:nth-child(even) > td {
    background: #fff !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-accent-bg: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.lightera-card .table:not(.cart-table) > tbody > tr:hover > td,
.lightera-results-card .table:not(.portal-table) > tbody > tr:hover > td {
    background: #f6f6f7 !important;
    --bs-table-bg-state: #f6f6f7 !important;
    --bs-table-hover-bg: #f6f6f7 !important;
}

/* ── PREVIOUS VERSION — uncomment to revert to gray stripes + green hover ──
.lightera-card .table:not(.cart-table):not(.stock-table) > tbody > tr:nth-child(odd) > td,
.lightera-results-card .table:not(.stock-table):not(.portal-table) > tbody > tr:nth-child(odd) > td {
    background: #d9d9d9 !important;
    --bs-table-bg-state: #d9d9d9 !important;
    --bs-table-accent-bg: #d9d9d9 !important;
}

.lightera-card .table:not(.cart-table):not(.stock-table) > tbody > tr:hover > td,
.lightera-results-card .table:not(.stock-table):not(.portal-table) > tbody > tr:hover > td {
    background: #cdf564 !important;
    --bs-table-bg-state: #cdf564 !important;
    --bs-table-hover-bg: #cdf564 !important;
}

.lightera-results-card .table.stock-table > tbody > tr > td,
.lightera-results-card .table.stock-table > tbody > tr:nth-child(odd) > td {
    background: #fff !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-accent-bg: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.lightera-results-card .table.stock-table > tbody > tr:hover > td {
    background: #cdf564 !important;
    --bs-table-bg-state: #cdf564 !important;
    --bs-table-hover-bg: #cdf564 !important;
}
── END PREVIOUS VERSION ──*/

/* ── Purchaser portal card — white bg, clean rows, modern style ── */
.portal-card {
    background: #fff;
    padding: 0.25rem 0.5rem;
}

.portal-card > .p-0:last-child {
    overflow-y: visible;
}

.portal-card .portal-table > thead > tr > th {
    background: var(--lightera-offwhite) !important;
}

/* Option 1: No stripes — all rows white, subtle border separation (Stripe/Shopify style) */
.portal-card .portal-table > tbody > tr > td,
.portal-card .portal-table > tbody > tr:nth-child(odd) > td,
.portal-card .portal-table > tbody > tr:nth-child(even) > td {
    background: #fff !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-accent-bg: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.portal-card .portal-table > tbody > tr:hover > td {
    /* Modern neutral hover (Shopify #f6f6f7) */
    background: #f6f6f7 !important;
    --bs-table-bg-state: #f6f6f7 !important;
    --bs-table-hover-bg: #f6f6f7 !important;
    /* Previous options — uncomment to revert:
       Green solid:       background: #cdf564 !important;
       Green transparent: background: rgba(205, 245, 100, 0.35) !important;
       Offwhite stripes:  (restore nth-child(even) block with #f2f0ee)
    */
}

/* ── Table style: Dashboard cards (white bg, subtle row borders, neutral hover) ── */
.glass-panel .table > tbody > tr > td {
    background: #fff !important;
    --bs-table-bg-state: #fff !important;
    --bs-table-accent-bg: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.glass-panel .table > tbody > tr:hover > td {
    background: #f6f6f7 !important;
    --bs-table-bg-state: #f6f6f7 !important;
    --bs-table-hover-bg: #f6f6f7 !important;
}

/* ── PREVIOUS glass-panel hover — uncomment to revert to green hover ──
.glass-panel .table > tbody > tr:hover > td {
    background: #cdf564 !important;
    --bs-table-bg-state: #cdf564 !important;
    --bs-table-hover-bg: #cdf564 !important;
}
── END PREVIOUS ──*/

/* Bootstrap pagination — Lightera purple instead of blue */
.pagination .page-link {
    color: var(--lightera-purple-1);
    border-color: rgba(111, 0, 211, 0.2);
}

.pagination .page-link:hover {
    color: #fff;
    background-color: var(--lightera-purple-hover);
    border-color: var(--lightera-purple-hover);
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(111, 0, 211, 0.15);
}

.pagination .page-item.active .page-link {
    background-color: var(--lightera-purple-1);
    border-color: var(--lightera-purple-1);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    border-color: rgba(0, 0, 0, 0.1);
}

/* Paginator */
.paginator {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    margin-top: 0;
}

.paginator .pagination-text {
    margin: 0 0.5rem;
    font-size: 0.875rem;
    color: var(--lightera-gray);
}

.paginator nav {
    display: flex;
    margin-left: auto;
    gap: 0.5rem;
    align-items: center;
    padding-right: 0.25rem;
}

.paginator nav button {
    border: 1px solid var(--lightera-purple-border);
    background-color: white;
    border-radius: 0.375rem;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    transition: all 0.2s;
}

.paginator nav button:hover:not([disabled]) {
    background-color: var(--lightera-purple-1);
    border-color: var(--lightera-purple-1);
    color: white;
}

.paginator nav button[disabled] {
    opacity: 0.4;
    cursor: default;
}

.paginator .page-size-selector {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.75rem;
    font-size: 0.8rem;
    color: var(--lightera-gray);
}

/* Custom page-size dropdown (replaces native <select>) */
.pss-dropdown {
    position: relative;
    display: inline-block;
}

.pss-toggle {
    border: 1px solid var(--lightera-purple-border);
    border-radius: 0.375rem;
    padding: 0.15rem 0.5rem 0.15rem 0.35rem;
    font-size: 0.8rem;
    background-color: white;
    color: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 48px;
    justify-content: space-between;
}

.pss-toggle:hover,
.pss-toggle:focus {
    border-color: var(--lightera-purple-1);
}

.pss-chevron {
    font-size: 0.6rem;
    opacity: 0.6;
}

.pss-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 1050;
    min-width: 100%;
    background: white;
    border: 1px solid var(--lightera-purple-border);
    border-radius: 0.375rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    margin-bottom: 2px;
    overflow: hidden;
}

.pss-option {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.pss-option:hover {
    background-color: #b063ff;
    color: #fff;
}

.pss-option.pss-active {
    font-weight: 600;
    color: var(--lightera-purple-1);
}

.pss-option.pss-active:hover {
    color: #fff;
}

/* Accordion overrides */
.accordion-button:not(.collapsed) {
    background-color: var(--lightera-purple-light);
    color: var(--lightera-purple-1);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(111, 0, 211, 0.15);
}

/* Accessibility */
:focus-visible {
    outline: 2px solid var(--lightera-purple-3);
    outline-offset: 2px;
}

h1:focus-visible,
h2:focus-visible,
h3:focus-visible,
h4:focus-visible,
h5:focus-visible,
h6:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .fade-in {
        animation: none;
    }
    .lightera-btn-primary:hover {
        transform: none;
    }
}

/* Skeleton loading placeholder */
.skeleton-results {
    border: 1px solid var(--lightera-purple-border);
    border-radius: 0.75rem;
    overflow: hidden;
    animation: fadeIn 0.2s ease-in-out;
}

.skeleton-results .skeleton-header {
    background: var(--lightera-offwhite);
    border-bottom: 1px solid var(--lightera-purple-border);
    padding: 0;
    display: flex;
    align-items: center;
}

.skeleton-results .skeleton-tab {
    background: var(--lightera-purple-1);
    color: #fff;
    padding: 0.65rem 2rem;
    min-width: 14rem;
    border-radius: 0 0 0.5rem 0;
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
}

.skeleton-row {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.skeleton-row:last-child {
    border-bottom: none;
}

.skeleton-bar {
    height: 0.9rem;
    border-radius: 4px;
    background: linear-gradient(90deg, #e8e6e3 25%, #f2f0ee 50%, #e8e6e3 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
}

[data-bs-theme="dark"] .skeleton-bar {
    background: linear-gradient(90deg, #3a3a38 25%, #4a4a48 50%, #3a3a38 75%);
    background-size: 200% 100%;
}

[data-bs-theme="dark"] .skeleton-results {
    background-color: var(--lightera-gray);
    border-color: rgba(242, 240, 238, 0.15);
}

[data-bs-theme="dark"] .skeleton-results .skeleton-header {
    background: var(--lightera-gray);
    border-bottom-color: rgba(242, 240, 238, 0.15);
}

[data-bs-theme="dark"] .skeleton-row {
    border-bottom-color: rgba(242, 240, 238, 0.05);
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Login page — light background (matches shop.lightera.com) */
.login-bg {
    min-height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    max-width: 420px;
    width: 100%;
    padding: 2.5rem;
}

[data-bs-theme="dark"] .login-bg {
    background-color: #1a1a1a;
}

[data-bs-theme="dark"] .login-card {
    background: #2d2d2d;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ── Context bar (Location / Company dropdowns) ────── */

.lightera-context-bar {
    background-color: var(--lightera-purple-1);
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.lightera-context-bar label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500;
}

.lightera-context-select {
    max-width: 260px;
    min-width: 160px;
    font-size: 0.8rem;
    padding: 0.2rem 1.8rem 0.2rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 0.375rem;
}

.lightera-context-select:focus {
    border-color: var(--lightera-purple-2);
    box-shadow: 0 0 0 2px rgba(116, 58, 213, 0.25);
}

[data-bs-theme="dark"] .lightera-context-bar {
    background-color: #2d2d2d;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .lightera-context-select {
    background-color: #1a1a1a;
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.15);
}

/* Searchable context dropdown */
.lightera-context-select::selection {
    background-color: #cdf564;
    color: #1a1a1a;
}

.context-search-dropdown {
    position: relative;
    display: inline-block;
}

.context-search-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 280px;
    overflow-y: auto;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 100%;
}

.context-search-item {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.context-search-item:hover,
.context-search-item.highlighted {
    background-color: #cdf564;
    color: #1a1a1a;
}

.context-search-item.selected {
    font-weight: 600;
}

.context-search-item.selected:not(.highlighted):not(:hover) {
    background-color: rgba(205, 245, 100, 0.35);
    color: inherit;
}

.context-search-item.disabled {
    color: #999;
    cursor: default;
    font-style: italic;
}

.context-search-item.disabled:hover {
    background-color: transparent;
}

[data-bs-theme="dark"] .context-search-list {
    background: #2d2d2d;
    border-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .context-search-item:hover,
[data-bs-theme="dark"] .context-search-item.highlighted {
    background-color: #cdf564;
    color: #1a1a1a;
}

[data-bs-theme="dark"] .context-search-item {
    color: #e0e0e0;
}

/* ── Searchable select in forms (not in context bar) ── */
.searchable-select-input {
    max-width: none;
    min-width: auto;
    font-size: 0.875rem;
    padding: 0.25rem 1.8rem 0.25rem 0.5rem;
    border: 1px solid #dee2e6;
    background-color: var(--lightera-offwhite);
}

.searchable-select-input:focus {
    border-color: var(--lightera-purple-2);
    box-shadow: 0 0 0 2px rgba(116, 58, 213, 0.25);
}

[data-bs-theme="dark"] .searchable-select-input {
    background-color: #1a1a1a;
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.15);
}

/* Wrapper for input + arrow button */
.searchable-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.searchable-select-wrapper .searchable-select-input {
    flex: 1;
}

/* Arrow toggle button inside the input */
.searchable-select-arrow {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    width: 1.6rem;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.7rem;
    border-radius: 0 0.375rem 0.375rem 0;
    z-index: 2;
    padding: 0;
}

.searchable-select-arrow:hover {
    background-color: rgba(111, 0, 211, 0.08);
    color: var(--lightera-purple-1);
}

.searchable-select-arrow:disabled {
    cursor: default;
    opacity: 0.5;
}

[data-bs-theme="dark"] .searchable-select-arrow {
    color: #aaa;
}

[data-bs-theme="dark"] .searchable-select-arrow:hover {
    background-color: rgba(205, 245, 100, 0.15);
    color: #cdf564;
}

/* Context-bar override: softer hover for the lighter background bar */
.lightera-context-bar .searchable-select-arrow:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #333;
}

/* ── Responsive adjustments ──────────────────────── */

/* Mobile (≤576px) */
@media (max-width: 576px) {
    .lightera-results-tab,
    .lightera-detail-tab,
    .skeleton-results .skeleton-tab {
        min-width: auto;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .login-card {
        margin: 1rem;
        padding: 1.5rem;
    }

    .lightera-card-body {
        padding: 0.75rem !important;
    }

    .lightera-card-header {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* Mobile (<768px) — card layout: each row becomes a stacked card */
@media (max-width: 767.98px) {

    /* Hide column headers — labels move to ::before on each td */
    .quickgrid thead {
        display: none;
    }

    /* Each data row becomes a bordered card */
    .quickgrid tbody tr {
        display: block;
        border: 1px solid rgba(111, 0, 211, 0.15);
        border-radius: 0.5rem;
        margin: 0 0 0.75rem;
        padding: 0.25rem 0;
        background: #fff;
    }

    /* Each cell: flex row — label left, value right */
    .quickgrid tbody td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 0.75rem !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        font-size: 0.875rem;
    }

    .quickgrid tbody td:last-child {
        border-bottom: none !important;
    }

    /* Column label shown before each value */
    .quickgrid tbody td::before {
        font-weight: 600;
        font-size: 0.7rem;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-right: 0.75rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Filler rows fully hidden at mobile */
    .quickgrid tbody tr:not(:has(td > *)) {
        display: none !important;
    }

    /* Allow table-responsive wrapper to show full cards (no horizontal clip) */
    .table-responsive:has(.quickgrid) {
        overflow: visible;
    }

    /* ── Admin column labels ── */

    /* UserAdmin */
    .quickgrid td.col-username::before      { content: "Username"; }
    .quickgrid td.col-name::before          { content: "Full Name"; }
    .quickgrid td.col-company::before       { content: "Company"; }
    .quickgrid td.col-type::before          { content: "Type"; }
    .quickgrid td.col-lastlogin::before     { content: "Last Login"; }
    .quickgrid td.col-email::before         { content: "Email"; }
    .quickgrid td.col-phone::before         { content: "Phone"; }
    .quickgrid td.col-actions-icon::before  { content: ""; display: none; }

    /* AuditLog */
    .quickgrid td.col-timestamp::before  { content: "Timestamp"; }
    .quickgrid td.col-action::before     { content: "Action"; }
    .quickgrid td.col-user::before       { content: "User"; }
    .quickgrid td.col-ip::before         { content: "IP Address"; }
    .quickgrid td.col-data::before       { content: "Data"; }

    /* GroupAdmin */
    .quickgrid td.col-title::before      { content: "Title"; }
    .quickgrid td.col-desc::before       { content: "Description"; }
    .quickgrid td.col-users::before      { content: "Users"; }
    .quickgrid td.col-docs::before       { content: "Documents"; }

    /* DocumentAdmin */
    .quickgrid td.col-doc-date::before   { content: "Date"; }
    .quickgrid td.col-filename::before   { content: "File Name"; }

    /* PageHeaderAdmin */
    .quickgrid td.col-pagekey::before    { content: "Page Key"; }
    .quickgrid td.col-usertype::before   { content: "User Type"; }
    .quickgrid td.col-headertext::before { content: "Header Text"; }
    .quickgrid td.col-active::before     { content: "Active"; }

    /* Shared across grids */
    .quickgrid td.col-status::before     { content: "Status"; }
    .quickgrid td.col-actions::before    { content: ""; }

    /* InventoryGrid */
    .quickgrid td.col-container-id::before { content: "Container ID"; }
    .quickgrid td.col-delivery::before     { content: "Delivery Nbr"; }
    .quickgrid td.col-po-item::before      { content: "PO Item"; }
    .quickgrid td.col-min::before          { content: "MIN"; }
    .quickgrid td.col-part-number::before  { content: "Part Number"; }
    .quickgrid td.col-part-desc::before    { content: "Part Description"; }
    .quickgrid td.col-qty-km::before       { content: "Qty (km)"; }
    .quickgrid td.col-date::before         { content: "Created"; }
    .quickgrid td.col-checkbox::before     { content: ""; display: none; }
}

/* ── InventoryGrid column widths ──────────────────────────────────────────
   These keep the 10-column grid from overflowing a 1280px laptop viewport.
   The truncating span on col-part-desc is the key: it caps the widest
   column so the table total stays within the page-container.
   ────────────────────────────────────────────────────────────────────── */
.quickgrid th.col-checkbox,
.quickgrid td.col-checkbox      { width: 40px;  min-width: 36px;
                                   padding-left: 0.5rem !important;
                                   padding-right: 0.5rem !important; }

.quickgrid th.col-container-id,
.quickgrid td.col-container-id  { width: 110px; min-width: 90px; }

.quickgrid th.col-delivery,
.quickgrid td.col-delivery      { width: 115px; min-width: 90px; }

.quickgrid th.col-po-item,
.quickgrid td.col-po-item       { width: 80px;  min-width: 60px; }

.quickgrid th.col-min,
.quickgrid td.col-min           { width: 72px;  min-width: 60px; }

.quickgrid th.col-part-number,
.quickgrid td.col-part-number   { width: 130px; min-width: 100px; }

.quickgrid th.col-part-desc,
.quickgrid td.col-part-desc     { width: 220px; min-width: 140px; }

.quickgrid th.col-qty-km,
.quickgrid td.col-qty-km        { width: 82px;  min-width: 70px;
                                   text-align: right; }

.quickgrid th.col-date,
.quickgrid td.col-date          { width: 90px;  min-width: 75px; }

.quickgrid th.col-status,
.quickgrid td.col-status        { width: 92px;  min-width: 75px; }

/* ── Audit log inline filter label ── */
.audit-filter-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
    white-space: nowrap;
}

/* ── Inline primary button for filter bars ── */
.lightera-btn-primary {
    background-color: #6f00d3;
    border-color: #6f00d3;
    color: white;
}

.lightera-btn-primary:hover,
.lightera-btn-primary:focus {
    background-color: #5a00aa;
    border-color: #5a00aa;
    color: white;
}

/* ── Icon-only edit button (UserAdmin pencil) ── */
.user-edit-btn {
    padding: 0.25rem 0.4375rem;
    line-height: 1;
    color: #6b7280;
    border-color: #d1d5db;
    background: white;
    border-radius: 6px;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.user-edit-btn:hover {
    color: #6f00d3;
    border-color: #b063ff;
    background: #f5f0ff;
}

.user-edit-btn i {
    font-size: 0.9rem;
    display: block;
}

/* Touch targets — minimum 44px for interactive elements */
@media (pointer: coarse) {
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 0.75rem;
    }

    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .form-control, .form-select {
        min-height: 44px;
    }
}

/* ── Dark mode — additional coverage ────────────── */

[data-bs-theme="dark"] .lightera-card-body {
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .lightera-modal-header {
    background-color: var(--lightera-purple-1);
}

[data-bs-theme="dark"] .modal-content {
    background-color: var(--lightera-gray);
    border-color: rgba(242, 240, 238, 0.15);
}

[data-bs-theme="dark"] .modal-footer {
    border-top-color: rgba(242, 240, 238, 0.15);
}

[data-bs-theme="dark"] .quickgrid th {
    background: #2a2a28 !important;
    color: var(--lightera-offwhite) !important;
    border-color: rgba(242, 240, 238, 0.1) !important;
}

[data-bs-theme="dark"] .quickgrid th:hover {
    background: #3a3a38 !important;
}

[data-bs-theme="dark"] .quickgrid td {
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .quickgrid td a {
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .quickgrid td a:hover {
    color: var(--lightera-purple-3);
}

[data-bs-theme="dark"] .pagination .page-link {
    color: var(--lightera-purple-3);
    background-color: var(--lightera-gray);
    border-color: rgba(242, 240, 238, 0.15);
}

[data-bs-theme="dark"] .pagination .page-link:hover {
    background-color: var(--lightera-purple-3);
    border-color: var(--lightera-purple-3);
    color: #fff;
}

[data-bs-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--lightera-purple-3);
    border-color: var(--lightera-purple-3);
}

[data-bs-theme="dark"] .quickgrid th .col-title {
    color: var(--lightera-offwhite) !important;
}

[data-bs-theme="dark"] .lightera-results-header {
    background: #2a2a28;
    border-bottom-color: rgba(242, 240, 238, 0.15);
}

[data-bs-theme="dark"] .lightera-search-icon-btn {
    background: var(--lightera-purple-2);
    border-color: var(--lightera-purple-2);
}

[data-bs-theme="dark"] .lightera-detail-header {
    background: #2a2a28;
    border-bottom-color: rgba(242, 240, 238, 0.15);
}

[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--lightera-gray);
    border-color: rgba(242, 240, 238, 0.15);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--lightera-purple-light);
    color: var(--lightera-purple-3);
}

[data-bs-theme="dark"] .dropdown-divider {
    border-color: rgba(242, 240, 238, 0.1);
}

[data-bs-theme="dark"] .lightera-theme-toggle {
    color: var(--lightera-offwhite);
    border-color: rgba(242, 240, 238, 0.3);
}

[data-bs-theme="dark"] .lightera-btn-secondary {
    color: var(--lightera-purple-3);
    border-color: var(--lightera-purple-3);
}

[data-bs-theme="dark"] .lightera-btn-secondary:hover {
    background: rgba(176, 99, 255, 0.1);
    border-color: var(--lightera-purple-3);
}

[data-bs-theme="dark"] .alert-info {
    background-color: rgba(176, 99, 255, 0.1);
    border-color: rgba(176, 99, 255, 0.2);
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .status-draft { background-color: #3a3a38; color: #adb5bd; }
[data-bs-theme="dark"] .status-submitted { background-color: rgba(13, 110, 253, 0.15); color: #6ea8fe; }
[data-bs-theme="dark"] .status-pending { background-color: rgba(255, 193, 7, 0.15); color: #ffda6a; }
[data-bs-theme="dark"] .status-approved { background-color: rgba(25, 135, 84, 0.15); color: #75b798; }
[data-bs-theme="dark"] .status-rejected { background-color: rgba(220, 53, 69, 0.15); color: #ea868f; }
[data-bs-theme="dark"] .status-cancelled { background-color: #3a3a38; color: #6c757d; }
[data-bs-theme="dark"] .status-completed { background-color: rgba(25, 135, 84, 0.15); color: #75b798; }
[data-bs-theme="dark"] .status-expired { background-color: #3a3a38; color: #6c757d; }

/* ── Glassmorphism Dashboard ──────────────────────── */

/* Page background — gradient blobs scoped to dashboard only */
.dashboard-page {
    position: relative;
    z-index: 1;
    padding-bottom: 2rem;
}

.dashboard-page::before,
.dashboard-page::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

/* Top-right PURPLE blob (brand primary) */
.dashboard-page::before {
    top: -200px;
    right: -150px;
    width: 700px;
    height: 700px;
    background: radial-gradient(
        circle at center,
        rgba(111, 0, 211, 0.12) 0%,
        rgba(111, 0, 211, 0.04) 40%,
        transparent 70%
    );
    filter: blur(80px);
}

/* Bottom-left GREEN blob (brand accent) */
.dashboard-page::after {
    bottom: -200px;
    left: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(
        circle at center,
        rgba(205, 245, 100, 0.15) 0%,
        rgba(205, 245, 100, 0.05) 45%,
        transparent 70%
    );
    filter: blur(80px);
}

/* Mid-page accent blob (purple/green blend) */
.dashboard-blob-accent {
    position: fixed;
    top: 40%;
    left: 30%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(158, 15, 206, 0.08) 0%,
        rgba(205, 245, 100, 0.04) 40%,
        transparent 60%
    );
    filter: blur(80px);
    pointer-events: none;
    z-index: -1;
}

/* Welcome greeting bar */
.glass-welcome {
    background: linear-gradient(135deg, rgba(111, 0, 211, 0.08), rgba(205, 245, 100, 0.08));
    border: 1px solid rgba(111, 0, 211, 0.10);
    border-left: 4px solid var(--lightera-purple-1);
    border-radius: 0.75rem;
    padding: 1.5rem 2rem;
    box-shadow: 0 2px 8px rgba(111, 0, 211, 0.06);
}

.glass-welcome h2 {
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--lightera-gray);
}

.glass-welcome .subtitle {
    font-size: 0.9rem;
    color: rgba(49, 49, 47, 0.7);
    margin-top: 0.25rem;
}

/* KPI stat cards — highest visual weight on page */
.glass-kpi {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(111, 0, 211, 0.12);
    border-left: 3px solid var(--lightera-purple-1);
    border-radius: 1rem;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 16px rgba(111, 0, 211, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.glass-kpi:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(111, 0, 211, 0.1);
}

.glass-kpi .kpi-value {
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--lightera-gray);
}

.glass-kpi .kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(49, 49, 47, 0.75);
}

.glass-kpi .kpi-icon {
    font-size: 1.5rem;
    color: var(--lightera-purple-1);
    opacity: 0.7;
}

/* Per-KPI accent colors for visual rhythm */
.glass-kpi--pending  { border-left-color: var(--lightera-purple-2); }
.glass-kpi--approved { border-left-color: var(--lightera-green);    }
.glass-kpi--submitted { border-left-color: var(--lightera-purple-1); }
.glass-kpi--shipped  { border-left-color: var(--lightera-purple-3); }

/* ── Stat Cards (Purchaser Dashboard KPIs) ───────── */

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(111, 0, 211, 0.10);
    border-radius: 1rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(111, 0, 211, 0.12);
    border-color: rgba(111, 0, 211, 0.22);
    text-decoration: none;
    color: inherit;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stat-icon--review {
    background: rgba(111, 0, 211, 0.10);
    color: var(--lightera-purple-1);
}

.stat-icon--ready {
    background: rgba(205, 245, 100, 0.25);
    color: #4a7c10;
}

.stat-icon--pending {
    background: rgba(255, 193, 7, 0.15);
    color: #b87800;
}

.stat-icon--shipped {
    background: rgba(158, 15, 206, 0.10);
    color: var(--lightera-purple-2);
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--lightera-gray);
}

.stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(49, 49, 47, 0.65);
}

/* Dark mode stat cards */
[data-bs-theme="dark"] .stat-card {
    background: rgba(28, 28, 26, 0.60);
    border-color: rgba(176, 99, 255, 0.18);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

[data-bs-theme="dark"] .stat-card:hover {
    background: rgba(28, 28, 26, 0.70);
    box-shadow: 0 6px 24px rgba(176, 99, 255, 0.15);
    border-color: rgba(176, 99, 255, 0.35);
}

[data-bs-theme="dark"] .stat-value {
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .stat-label {
    color: rgba(242, 240, 238, 0.6);
}

[data-bs-theme="dark"] .stat-icon--review {
    background: rgba(176, 99, 255, 0.15);
    color: var(--lightera-purple-3);
}

[data-bs-theme="dark"] .stat-icon--ready {
    background: rgba(205, 245, 100, 0.12);
    color: var(--lightera-green);
}

[data-bs-theme="dark"] .stat-icon--pending {
    background: rgba(255, 193, 7, 0.12);
    color: #ffc107;
}

[data-bs-theme="dark"] .stat-icon--shipped {
    background: rgba(158, 15, 206, 0.12);
    color: #d4a6ff;
}

/* ── Glass Containers (chart/content wrappers) ───── */

.glass-container {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(111, 0, 211, 0.10);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.glass-container:hover {
    border-color: rgba(111, 0, 211, 0.18);
    box-shadow: 0 4px 24px rgba(49, 49, 47, 0.06);
}

.glass-container--purple {
    border-color: rgba(111, 0, 211, 0.12);
}

.glass-container--green {
    border-color: rgba(205, 245, 100, 0.25);
}

.glass-container-header {
    background: rgba(49, 49, 47, 0.04);
    padding: 0.65rem 1.25rem;
    border-bottom: 2px solid rgba(111, 0, 211, 0.10);
    font-weight: 700;
    color: var(--lightera-purple-1);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.glass-container-header--green {
    border-bottom-color: rgba(205, 245, 100, 0.25);
    color: var(--lightera-gray);
}

/* Dark mode glass containers */
[data-bs-theme="dark"] .glass-container {
    background: rgba(28, 28, 26, 0.72);
    border-color: rgba(176, 99, 255, 0.15);
}

[data-bs-theme="dark"] .glass-container:hover {
    box-shadow: 0 4px 24px rgba(176, 99, 255, 0.1);
    border-color: rgba(176, 99, 255, 0.25);
}

[data-bs-theme="dark"] .glass-container--green {
    border-color: rgba(205, 245, 100, 0.15);
}

[data-bs-theme="dark"] .glass-container-header {
    background: rgba(176, 99, 255, 0.06);
    border-bottom-color: rgba(176, 99, 255, 0.12);
    color: var(--lightera-purple-3);
}

[data-bs-theme="dark"] .glass-container-header--green {
    border-bottom-color: rgba(205, 245, 100, 0.12);
    color: var(--lightera-offwhite);
}

/* Data-heavy panels (quotes, orders) */
.glass-panel {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(111, 0, 211, 0.10);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.glass-panel:hover {
    border-color: rgba(111, 0, 211, 0.18);
    box-shadow: 0 4px 24px rgba(49, 49, 47, 0.06);
}

/* Panel headers — visible landmark with brand color text */
.glass-panel-header {
    background: rgba(49, 49, 47, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.65rem 1.25rem;
    border-bottom: 2px solid rgba(111, 0, 211, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.glass-panel-header h6 {
    margin: 0;
    font-weight: 700;
    color: var(--lightera-purple-1);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.glass-panel-header h6 .bi {
    color: var(--lightera-purple-2);
}

.glass-panel-header a {
    color: var(--lightera-gray);
    font-size: 0.8rem;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
}

.glass-panel-header a:hover {
    opacity: 1;
    color: var(--lightera-purple-1);
}

/* Quick Actions card — green accent to distinguish from data panels */
.glass-actions {
    background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(205, 245, 100, 0.25);
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
}

/* Subtle green accent line at top of Quick Actions */
.glass-actions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lightera-green), rgba(205, 245, 100, 0.3));
    border-radius: 1rem 1rem 0 0;
    z-index: 1;
}

.glass-actions .glass-panel-header {
    background: rgba(205, 245, 100, 0.06);
    border-bottom-color: rgba(205, 245, 100, 0.18);
}

.glass-actions .glass-panel-header h6 {
    color: var(--lightera-gray);
}

/* Panel row styling (shared by quote & order panels) */
.dashboard-panel-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease;
}

.dashboard-panel-row:last-child {
    border-bottom: none;
}

.dashboard-panel-row:hover {
    background-color: rgba(111, 0, 211, 0.03);
}

/* ── Dark mode glassmorphism ────────────────────── */

[data-bs-theme="dark"] .dashboard-page::before {
    background: radial-gradient(
        circle at center,
        rgba(111, 0, 211, 0.25) 0%,
        rgba(111, 0, 211, 0.08) 40%,
        transparent 70%
    );
}

[data-bs-theme="dark"] .dashboard-page::after {
    background: radial-gradient(
        circle at center,
        rgba(205, 245, 100, 0.08) 0%,
        transparent 60%
    );
}

[data-bs-theme="dark"] .dashboard-blob-accent {
    background: radial-gradient(
        circle,
        rgba(176, 99, 255, 0.12) 0%,
        transparent 60%
    );
}

[data-bs-theme="dark"] .glass-welcome {
    background: linear-gradient(135deg, rgba(111, 0, 211, 0.15), rgba(205, 245, 100, 0.05));
    border-color: rgba(176, 99, 255, 0.2);
    border-left: 4px solid var(--lightera-purple-3);
}

[data-bs-theme="dark"] .glass-welcome h2 {
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .glass-welcome .subtitle {
    color: rgba(242, 240, 238, 0.6);
}

[data-bs-theme="dark"] .glass-kpi {
    background: rgba(28, 28, 26, 0.60);
    border-color: rgba(176, 99, 255, 0.2);
    border-left-color: var(--lightera-purple-3);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(176, 99, 255, 0.08);
}

[data-bs-theme="dark"] .glass-kpi:hover {
    background: rgba(28, 28, 26, 0.70);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.15),
        0 8px 32px rgba(176, 99, 255, 0.15);
    border-color: rgba(176, 99, 255, 0.35);
}

[data-bs-theme="dark"] .glass-kpi--pending  { border-left-color: var(--lightera-purple-3); }
[data-bs-theme="dark"] .glass-kpi--approved { border-left-color: var(--lightera-green); }
[data-bs-theme="dark"] .glass-kpi--submitted { border-left-color: var(--lightera-purple-2); }
[data-bs-theme="dark"] .glass-kpi--shipped  { border-left-color: #d4a6ff; }

[data-bs-theme="dark"] .glass-kpi .kpi-value {
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .glass-kpi .kpi-label {
    color: rgba(242, 240, 238, 0.65);
}

[data-bs-theme="dark"] .glass-kpi .kpi-icon {
    color: var(--lightera-purple-3);
}

[data-bs-theme="dark"] .glass-panel {
    background: rgba(28, 28, 26, 0.78);
    border-color: rgba(176, 99, 255, 0.15);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .glass-panel:hover {
    box-shadow: 0 4px 24px rgba(176, 99, 255, 0.1);
    border-color: rgba(176, 99, 255, 0.25);
}

[data-bs-theme="dark"] .glass-panel-header {
    background: rgba(176, 99, 255, 0.08);
    border-bottom-color: rgba(176, 99, 255, 0.15);
}

[data-bs-theme="dark"] .glass-panel-header h6 {
    color: var(--lightera-purple-3);
}

[data-bs-theme="dark"] .glass-panel-header a {
    color: var(--lightera-purple-3);
}

[data-bs-theme="dark"] .glass-actions {
    background: rgba(28, 28, 26, 0.50);
    border-color: rgba(205, 245, 100, 0.15);
}

[data-bs-theme="dark"] .glass-actions::before {
    background: linear-gradient(90deg, rgba(205, 245, 100, 0.6), rgba(205, 245, 100, 0.1));
}

[data-bs-theme="dark"] .glass-actions .glass-panel-header {
    background: rgba(205, 245, 100, 0.04);
    border-bottom-color: rgba(205, 245, 100, 0.1);
}

[data-bs-theme="dark"] .glass-actions .glass-panel-header h6 {
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .dashboard-panel-row {
    border-bottom-color: rgba(242, 240, 238, 0.08);
}

[data-bs-theme="dark"] .dashboard-panel-row:hover {
    background-color: rgba(176, 99, 255, 0.06);
}

/* ── Glass fallback for browsers without backdrop-filter ── */

@supports not (backdrop-filter: blur(1px)) {
    .glass-welcome { background: linear-gradient(135deg, rgba(111, 0, 211, 0.08), rgba(205, 245, 100, 0.08)); }
    .glass-kpi { background: rgba(255, 255, 255, 0.92); }
    .glass-panel { background: rgba(255, 255, 255, 0.95); }
    .glass-actions { background: rgba(255, 255, 255, 0.90); }
    .stat-card { background: rgba(255, 255, 255, 0.92); }
    .glass-container { background: rgba(255, 255, 255, 0.92); }

    [data-bs-theme="dark"] .glass-welcome { background: linear-gradient(135deg, rgba(111, 0, 211, 0.15), rgba(205, 245, 100, 0.05)); }
    [data-bs-theme="dark"] .glass-kpi { background: rgba(28, 28, 26, 0.92); }
    [data-bs-theme="dark"] .glass-panel { background: rgba(28, 28, 26, 0.95); }
    [data-bs-theme="dark"] .glass-actions { background: rgba(28, 28, 26, 0.90); }
    [data-bs-theme="dark"] .stat-card { background: rgba(28, 28, 26, 0.88); }
    [data-bs-theme="dark"] .glass-container { background: rgba(28, 28, 26, 0.88); }
}

/* ── Glass reduced motion ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .glass-kpi,
    .glass-panel,
    .glass-actions,
    .stat-card,
    .glass-container {
        transition: none;
    }
    .glass-kpi:hover,
    .stat-card:hover {
        transform: none;
    }
}

/* ── Product Quick View Offcanvas ──────────────────── */

.product-offcanvas-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    animation: fadeIn 0.2s ease;
}

.product-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    z-index: 1045;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.25s ease;
}

.product-offcanvas-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes toast-slide-in {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Product card thumbnail image */
.product-card-img {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
}

.product-card-img img {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
}

/* ── Table style: Shopping Cart (white bg, subtle row borders, no striping) ── */
.lightera-card .cart-table > tbody > tr > td,
.lightera-card .cart-table > tbody > tr:nth-child(odd) > td {
    background: #fff !important;
    --bs-table-bg-state: #fff !important;
    --bs-table-accent-bg: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.lightera-card .cart-table > tbody > tr:last-child > td {
    border-bottom: none;
}

[data-bs-theme="dark"] .lightera-card .cart-table > tbody > tr > td,
[data-bs-theme="dark"] .lightera-card .cart-table > tbody > tr:nth-child(odd) > td {
    background: var(--lightera-gray) !important;
    --bs-table-bg-state: var(--lightera-gray) !important;
    --bs-table-accent-bg: var(--lightera-gray) !important;
    border-bottom-color: rgba(242, 240, 238, 0.1);
}

/* Cart line item thumbnail */
.cart-item-img {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.cart-item-img img {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
}

.cart-item-img-placeholder {
    color: #ccc;
    font-size: 1.2rem;
}

[data-bs-theme="dark"] .cart-item-img {
    background: #fff;
    border-color: rgba(242, 240, 238, 0.12);
}

/* Stock inventory thumbnail column width */
.stock-img-col { width: 56px; }

/* Keep image container white even in dark mode so transparent PNGs render correctly */
[data-bs-theme="dark"] .product-card-img {
    background: #fff;
}

/* Dark mode offcanvas */
[data-bs-theme="dark"] .product-offcanvas {
    background: var(--lightera-gray);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .product-offcanvas .border-bottom,
[data-bs-theme="dark"] .product-offcanvas .border-top {
    border-color: rgba(242, 240, 238, 0.12) !important;
}

[data-bs-theme="dark"] .product-offcanvas .table {
    color: var(--lightera-offwhite);
}

/* Mobile: full-width panel */
@media (max-width: 576px) {
    .product-offcanvas {
        width: 100vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-offcanvas {
        animation: none;
    }
    .product-offcanvas-backdrop {
        animation: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   Order Detail — Summary Bar, Line Item Cards, Shipping
   ══════════════════════════════════════════════════════════════ */

/* ── Summary Bar (always visible above tabs) ──────────────── */
.od-summary-bar {
    background-color: var(--lightera-purple-1);
    color: #fff;
    padding: 0.6rem 1.25rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(111, 0, 211, 0.15);
    min-height: 48px;
}

.od-summary-bar .btn {
    font-size: 0.82rem;
    padding: 0.25rem 0.6rem;
}

/* ── Line Item Card ───────────────────────────────────────── */
.od-line-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    background: #fff;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.od-line-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.od-line-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: var(--lightera-offwhite);
}

.od-line-header .line-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--lightera-purple-1);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.od-line-body {
    padding: 0.75rem 1rem;
}

/* ── Pricing Row ──────────────────────────────────────────── */
.od-line-pricing {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.015);
}

.od-line-pricing .pricing-item {
    text-align: center;
    min-width: 80px;
}

.od-line-pricing .pricing-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 600;
}

.od-line-pricing .pricing-value {
    font-weight: 600;
    font-size: 0.95rem;
}

/* ── Shipping Sub-Section ─────────────────────────────────── */
.od-line-shipping {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(111, 0, 211, 0.02);
}

.od-shipping-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lightera-purple-2);
    margin-bottom: 0.25rem;
    padding-left: 0.5rem;
}

.od-shipping-table {
    font-size: 0.85rem;
    width: 100%;
}

.od-shipping-table th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.od-shipping-table td {
    padding: 0.25rem 0.5rem;
}

/* ── Dark Mode ────────────────────────────────────────────── */
[data-bs-theme="dark"] .od-line-card {
    background: var(--lightera-gray);
    border-color: rgba(242, 240, 238, 0.15);
}

[data-bs-theme="dark"] .od-line-header {
    background: #2a2a28;
    border-bottom-color: rgba(242, 240, 238, 0.1);
}

[data-bs-theme="dark"] .od-line-pricing {
    background: rgba(255, 255, 255, 0.03);
    border-top-color: rgba(242, 240, 238, 0.1);
}

[data-bs-theme="dark"] .od-line-shipping {
    background: rgba(111, 0, 211, 0.05);
    border-top-color: rgba(242, 240, 238, 0.1);
}

[data-bs-theme="dark"] .od-shipping-table th {
    color: rgba(242, 240, 238, 0.5);
    border-bottom-color: rgba(242, 240, 238, 0.15);
}

/* ── Mobile: Tab Scroll for 6+ Tabs ──────────────────────── */
@media (max-width: 768px) {
    .lightera-card-header .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .lightera-card-header .nav-tabs::-webkit-scrollbar {
        display: none;
    }
    .lightera-card-header .nav-tabs .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ── Mobile: Summary Bar + Cards ─────────────────────────── */
@media (max-width: 576px) {
    .od-summary-bar {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .od-line-pricing {
        flex-direction: column;
        gap: 0.5rem;
    }

    .od-line-pricing .pricing-item {
        text-align: left;
        display: flex;
        justify-content: space-between;
    }

    .od-shipping-table {
        font-size: 0.8rem;
    }
}

/* ── Product Detail — LATAM-inspired layout ───────────────── */

/* Image container: white background to match catalog card images */
.pd-image-wrap {
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 2rem;
}
[data-bs-theme="dark"] .pd-image-wrap {
    background: rgba(255,255,255,0.05);
}

/* Section divider label above each info group */
.pd-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 0.4rem;
}

/* Material # pill — matches LATAM "Código" badge */
.pd-code-badge {
    display: inline-block;
    background-color: var(--lightera-purple-1);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 8px;
    letter-spacing: 0.02em;
}

/* Price — large, purple, prominent */
.pd-price {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--lightera-purple-1);
    line-height: 1;
}

/* Quantity stepper — matches LATAM −/qty/+ */
.pd-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    overflow: hidden;
}
.pd-qty-stepper button {
    width: 40px;
    height: 42px;
    border: none;
    background: #fff;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    color: #333;
    transition: background 0.15s;
    flex-shrink: 0;
}
.pd-qty-stepper button:hover { background: #f0e8ff; }
.pd-qty-stepper input {
    width: 80px;
    height: 42px;
    border: none;
    border-left: 1px solid #d0d0d0;
    border-right: 1px solid #d0d0d0;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    background: #fff;
}
.pd-qty-stepper input:focus { outline: none; }

/* Availability strip — subtle, inline */
.pd-availability {
    font-size: 0.875rem;
    padding: 0.55rem 0.9rem;
    border-radius: 8px;
    background: #f5faf5;
    border: 1px solid #c3e6cb;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.pd-availability.pd-leadtime {
    background: var(--lightera-purple-light);
    border-color: var(--lightera-purple-border);
}

/* Add to Quote button — pill-shaped, LATAM style */
.pd-add-btn {
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: 50rem;
    font-size: 1rem;
    font-weight: 600;
    background-color: var(--lightera-purple-1);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.1s;
    letter-spacing: 0.01em;
}
.pd-add-btn:hover { background-color: var(--lightera-purple-hover); transform: scale(1.005); }
.pd-add-btn:active { transform: scale(0.98); }

/* Back to Catalog — plain text link, not a button */
.pd-back-link {
    display: block;
    text-align: center;
    font-size: 0.875rem;
    color: var(--lightera-purple-1);
    text-decoration: none;
    padding: 0.5rem 0;
}
.pd-back-link:hover { text-decoration: underline; color: var(--lightera-purple-hover); }

/* Plain section header (replaces purple card header) */
.pd-section-header {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.pd-section-header:hover { background: rgba(0,0,0,0.02); }

[data-bs-theme="dark"] .pd-qty-stepper,
[data-bs-theme="dark"] .pd-qty-stepper button,
[data-bs-theme="dark"] .pd-qty-stepper input {
    background: #2a2a2a;
    border-color: rgba(242,240,238,0.2);
    color: var(--lightera-offwhite);
}
[data-bs-theme="dark"] .pd-qty-stepper button:hover { background: #3a2a50; }
[data-bs-theme="dark"] .pd-section-header { color: rgba(242,240,238,0.6); border-color: rgba(242,240,238,0.1); }
[data-bs-theme="dark"] .pd-image-wrap { background: rgba(255,255,255,0.04); }

/* ══════════════════════════════════════════════════════════════
   Order Detail V2 — LATAM-style card layout with sidebar
   ══════════════════════════════════════════════════════════════ */

/* ── Progress Stepper ─────────────────────────────────────── */
.od2-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem 1rem;
    gap: 0;
}

.od2-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 90px;
    flex: 0 0 auto;
}

.od2-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    z-index: 1;
    transition: all 0.2s ease;
}

.od2-step.completed .od2-step-circle {
    background: var(--lightera-purple-1, #6f00d3);
    color: #fff;
}

.od2-step.current .od2-step-circle {
    background: #fff;
    color: var(--lightera-purple-1, #6f00d3);
    border: 3px solid var(--lightera-purple-1, #6f00d3);
    box-shadow: 0 0 0 4px rgba(111, 0, 211, 0.15);
}

.od2-step.pending .od2-step-circle {
    background: #e9ecef;
    color: #adb5bd;
    border: 2px solid #dee2e6;
}

.od2-step-label {
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 0.4rem;
    text-align: center;
    color: var(--lightera-gray, #31312f);
}

.od2-step.pending .od2-step-label {
    color: #adb5bd;
}

.od2-step-connector {
    position: absolute;
    top: 17px; /* circle center (36px / 2) minus half connector height (3px / 2) */
    left: 50%;
    width: 100%;
    height: 3px;
    background: #dee2e6;
    z-index: 0;
}

.od2-step-connector.completed {
    background: var(--lightera-purple-1, #6f00d3);
}

/* ── Section Cards ────────────────────────────────────────── */
.od2-section {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.od2-section-icon {
    font-size: 1.25rem;
    color: var(--lightera-purple-1, #6f00d3);
    margin-bottom: 0.5rem;
}

.od2-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lightera-gray, #31312f);
    margin-bottom: 1rem;
}

.od2-section-header {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lightera-gray, #31312f);
    margin-bottom: 1rem;
}

/* Key-value pair rows (label then value, close together) */
.od2-field {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.od2-field:last-child {
    border-bottom: none;
}

.od2-field-label {
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.55);
    flex: 0 0 auto;
    min-width: 6.5rem;
}

.od2-field-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lightera-gray, #31312f);
}

/* ── Order Detail Tabs ────────────────────────────────────── */
.od2-tabs {
    display: flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid #dee2e6;
    flex-wrap: wrap;
}

.od2-tab-btn {
    padding: 0.45rem 1.1rem;
    border: none;
    background: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.od2-tab-btn:hover {
    color: var(--lightera-purple-1);
}

.od2-tab-btn:focus,
.od2-tab-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Active tab: white background + purple underline */
.od2-tab-btn.active {
    color: var(--lightera-purple-1);
    background: #fff;
    border-bottom-color: var(--lightera-purple-1);
    border-radius: 8px 8px 0 0;
    font-weight: 600;
}

/* Shipping tab — fixed label widths so values align */
.od2-ship-left .od2-field-label  { min-width: 12.5rem; }
.od2-ship-right .od2-field-label { min-width: 9rem; }

/* ── Tab card: tabs + content in one rounded card ───────── */
.od2-tab-card {
    overflow: hidden;  /* clips tab nav to card's rounded corners */
    position: relative;
}

/* Absolutely-positioned action buttons — always top-right of the tab bar */
.od2-tab-actions {
    position: absolute;
    top: 0.15rem;
    right: 0.75rem;
    display: flex;
    gap: 0.25rem;
    align-items: center;
    z-index: 1;
}

.od2-tab-card .od2-tabs {
    padding: 0 0.5rem;  /* small side padding so first tab doesn't butt against card edge */
    border-radius: 0;   /* nav row itself needs no radius; card provides it */
}

/* ── Tab bar action buttons (icon-only, right-aligned) ──── */
.od2-tab-action-btn {
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid rgba(111, 0, 211, 0.35);
    border-radius: 0.375rem;
    background: #fff;
    color: var(--lightera-purple-1);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.od2-tab-action-btn:hover {
    background: var(--lightera-purple-light);
    border-color: var(--lightera-purple-1);
}

.od2-tab-action-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

[data-bs-theme="dark"] .od2-tab-action-btn {
    background: transparent;
    border-color: rgba(111, 0, 211, 0.45);
    color: var(--lightera-purple-3);
}

/* Purple price value (matching legacy) */
.od2-price-value {
    color: var(--lightera-purple-1, #6f00d3);
    font-weight: 600;
}

/* Green variation note text */
.od2-variation-note {
    color: #3a7a12;
    font-size: 0.8rem;
}

/* Long description preserves line breaks */
.od2-long-desc {
    white-space: pre-wrap;
}

/* REVERT (underline style):
.od2-tab-btn {
    padding: 0.5rem 1.1rem;
    border: none;
    background: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.15s;
}
.od2-tab-btn.active {
    color: var(--lightera-purple-1);
    border-bottom-color: var(--lightera-purple-1);
    font-weight: 600;
}
*/

.od2-tab-panel {
    padding: 1.25rem;
}

/* ── Customer Portal ─────────────────────────────────────── */
.cp-type-col { width: 3rem; }

.cp-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
}

.cp-type-quote {
    background: rgba(111, 0, 211, 0.08);
    color: var(--lightera-purple-1);
}

.cp-type-order {
    background: rgba(25, 135, 84, 0.08);
    color: #198754;
}

[data-bs-theme="dark"] .cp-type-quote {
    background: rgba(111, 0, 211, 0.2);
}

[data-bs-theme="dark"] .cp-type-order {
    background: rgba(25, 135, 84, 0.2);
}

/* ── Right Sidebar Cards ──────────────────────────────────── */
.od2-sidebar-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.od2-sidebar-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--lightera-gray, #31312f);
}

.od2-sidebar-desc {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.od2-sidebar-btn {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--lightera-purple-1, #6f00d3);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--lightera-purple-1, #6f00d3);
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 0.5rem;
}

.od2-sidebar-btn:hover {
    background: rgba(111, 0, 211, 0.06);
    color: var(--lightera-purple-1, #6f00d3);
}

.od2-sidebar-btn:last-child {
    margin-bottom: 0;
}

/* Summary totals */
.od2-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    font-size: 0.85rem;
}

.od2-summary-row.total {
    border-top: 1.5px solid rgba(0, 0, 0, 0.12);
    margin-top: 0.35rem;
    padding-top: 0.65rem;
    font-weight: 700;
    font-size: 0.95rem;
}

/* ── Sticky sidebar on desktop ────────────────────────────── */
@media (min-width: 992px) {
    .od2-sidebar {
        position: sticky;
        top: 1rem;
    }
}

/* ── Dark Mode ────────────────────────────────────────────── */
[data-bs-theme="dark"] .od2-section {
    background: var(--lightera-gray);
    border-color: rgba(242, 240, 238, 0.12);
}

[data-bs-theme="dark"] .od2-section-title {
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .od2-field {
    border-bottom-color: rgba(242, 240, 238, 0.06);
}

[data-bs-theme="dark"] .od2-field-label {
    color: rgba(242, 240, 238, 0.5);
}

[data-bs-theme="dark"] .od2-field-value {
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .od2-sidebar-card {
    background: var(--lightera-gray);
    border-color: rgba(242, 240, 238, 0.12);
}

[data-bs-theme="dark"] .od2-sidebar-title {
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .od2-sidebar-btn {
    background: transparent;
    border-color: var(--lightera-purple-3, #b063ff);
    color: var(--lightera-purple-3, #b063ff);
}

[data-bs-theme="dark"] .od2-step-label {
    color: var(--lightera-offwhite);
}

[data-bs-theme="dark"] .od2-step.pending .od2-step-label {
    color: rgba(242, 240, 238, 0.35);
}

[data-bs-theme="dark"] .od2-step.pending .od2-step-circle {
    background: #2a2a28;
    border-color: rgba(242, 240, 238, 0.15);
    color: rgba(242, 240, 238, 0.3);
}

[data-bs-theme="dark"] .od2-step-connector {
    background: rgba(242, 240, 238, 0.12);
}

[data-bs-theme="dark"] .od2-variation-note {
    color: #7bc74d;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .od2-stepper {
        padding: 1rem 0.25rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .od2-step {
        min-width: 70px;
    }

    .od2-step-circle {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .od2-step-label {
        font-size: 0.65rem;
    }

    .od2-step-connector {
        top: 14px; /* smaller circle (30px / 2) minus half connector height */
    }

    .od2-section {
        padding: 1rem;
    }

    .od2-field {
        flex-direction: column;
        gap: 0.1rem;
    }

    .od2-field-value {
        text-align: left;
    }
}

/* ── Flatpickr brand theme overrides ────────────────────────────────── */
.flatpickr-calendar {
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(111, 0, 211, 0.15);
    border: 1px solid rgba(111, 0, 211, 0.12);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #b063ff;
    border-color: #b063ff;
    color: #fff;
}
.flatpickr-day.today {
    border-color: #6f00d3;
    color: #6f00d3;
    font-weight: 600;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: #6f00d3;
    border-color: #6f00d3;
    color: #fff;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: rgba(176, 99, 255, 0.12);
    border-color: #b063ff;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #6f00d3;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgba(111, 0, 211, 0.05);
}
.flatpickr-current-month input.cur-year:focus {
    outline: none;
    border-color: #6f00d3;
    box-shadow: 0 0 0 2px rgba(111, 0, 211, 0.25);
}
.flatpickr-current-month input.cur-year::selection {
    background: #6f00d3;
    color: #fff;
}

/* ── Datepicker wrapper ── */
.datepicker-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.datepicker-wrapper .form-control {
    padding-right: 2rem;
}
.datepicker-icon {
    position: absolute;
    right: 0.375rem;
    background: none;
    border: none;
    padding: 0.1rem 0.25rem;
    color: #6f00d3;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.datepicker-icon:hover { opacity: 1; }
.datepicker-icon:disabled { opacity: 0.35; cursor: default; }

/* ── Custom month picker panel (replaces native <select>) ── */
.fp-month-label {
    cursor: pointer;
    font-weight: 500;
    font-size: inherit;
    color: inherit;
    padding: 0 4px;
    border-radius: 4px;
    transition: background 0.15s;
}
.fp-month-label:hover {
    background: rgba(111, 0, 211, 0.08);
    color: #6f00d3;
}
.fp-month-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: #fff;
    border: 1px solid rgba(111, 0, 211, 0.15);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(111, 0, 211, 0.12);
    padding: 0.25rem 0;
    max-height: 200px;
    overflow-y: auto;
}
.fp-month-item {
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.1s;
}
.fp-month-item:hover {
    background: rgba(176, 99, 255, 0.12);
    color: #6f00d3;
}
.fp-month-item.active {
    background: #b063ff;
    color: #fff;
    font-weight: 600;
}
}