/* ── Light theme: blue + white ── */
html.light,
html:not(.dark) {
    --color-background: #eef4fc;
    --color-surface-container: #ffffff;
    --color-surface-container-low: #f8fafc;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-high: #e2ecf8;
    --color-border-subtle: #c7d9ef;
    --color-on-surface: #0c2d4d;
    --color-on-surface-variant: #475569;
    --color-primary: #1d6fd4;
    --color-primary-container: #2563eb;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #0c2d4d;
    --color-accent: #3b82f6;
    --color-glass-bg: rgba(255, 255, 255, 0.96);
    --color-glass-border: #bfdbfe;
    --color-nav-active-bg: #dbeafe;
    --color-nav-active-border: #2563eb;
    --color-main-bg: #e8f0fa;
    --color-header-bg: #ffffff;
    --color-row-stripe: rgba(37, 99, 235, 0.04);
    --color-row-hover: rgba(37, 99, 235, 0.08);
    --color-select2-highlight: #2563eb;
    --color-modal-overlay: rgba(15, 23, 42, 0.45);
    --color-input-bg: #ffffff;
    --color-glow: rgba(37, 99, 235, 0.18);
    --color-glow-border: rgba(37, 99, 235, 0.45);
    --color-table-header-bg: #2563eb;
    --color-table-header-text: #ffffff;
    --color-table-header-border: #1d4ed8;
}

/* ── Dark theme: gold + black ── */
html.dark {
    --color-background: #131313;
    --color-surface-container: #201f1f;
    --color-surface-container-low: #1c1b1b;
    --color-surface-container-lowest: #0e0e0e;
    --color-surface-container-high: #2a2a2a;
    --color-border-subtle: #262626;
    --color-on-surface: #e5e2e1;
    --color-on-surface-variant: #d1c5b1;
    --color-primary: #eec058;
    --color-primary-container: #c09732;
    --color-on-primary: #3f2e00;
    --color-on-primary-container: #443100;
    --color-accent: #d4b361;
    --color-glass-bg: rgba(18, 18, 18, 0.88);
    --color-glass-border: #262626;
    --color-nav-active-bg: #2a2a2a;
    --color-nav-active-border: #eec058;
    --color-main-bg: #000000;
    --color-header-bg: #0e0e0e;
    --color-row-stripe: rgba(28, 27, 27, 0.35);
    --color-row-hover: rgba(42, 42, 42, 0.6);
    --color-select2-highlight: #c09732;
    --color-modal-overlay: rgba(0, 0, 0, 0.72);
    --color-input-bg: #201f1f;
    --color-glow: rgba(192, 151, 50, 0.15);
    --color-glow-border: rgba(192, 151, 50, 0.4);
    --color-table-header-bg: var(--color-surface-container-high);
    --color-table-header-text: var(--color-on-surface-variant);
    --color-table-header-border: var(--color-border-subtle);
}

/* Force surfaces to follow theme (Tailwind CDN + CSS vars) */
html.light body,
html:not(.dark) body {
    background-color: var(--color-background) !important;
    color: var(--color-on-surface) !important;
}

html.dark body {
    background-color: var(--color-background) !important;
    color: var(--color-on-surface) !important;
}

.bg-background { background-color: var(--color-background) !important; }
.bg-surface-container { background-color: var(--color-surface-container) !important; }
.bg-surface-container-low { background-color: var(--color-surface-container-low) !important; }
.bg-surface-container-lowest { background-color: var(--color-surface-container-lowest) !important; }
.bg-surface-container-high { background-color: var(--color-surface-container-high) !important; }
.text-on-surface { color: var(--color-on-surface) !important; }
.text-on-surface-variant { color: var(--color-on-surface-variant) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-on-primary { color: var(--color-on-primary) !important; }
.text-on-primary-container { color: var(--color-on-primary-container) !important; }
.border-border-subtle { border-color: var(--color-border-subtle) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-container { background-color: var(--color-primary-container) !important; }

.admin-main-bg {
    background-color: var(--color-main-bg) !important;
    font-size: 0.9375rem;
}

.admin-main-bg h2 {
    font-size: 1.625rem !important;
}

.glass-panel {
    background: var(--color-glass-bg) !important;
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-glass-border) !important;
}

.gold-glow {
    transition: all 0.2s;
}

.gold-glow:hover {
    box-shadow: 0 0 15px var(--color-glow);
    border-color: var(--color-glow-border) !important;
}

.nav-active {
    color: var(--color-primary) !important;
    font-weight: 700;
    border-right: 2px solid var(--color-nav-active-border) !important;
    background: var(--color-nav-active-bg) !important;
}

html.light input:not([type="checkbox"]):not([type="radio"]),
html.light select,
html.light textarea,
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]),
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: var(--color-input-bg) !important;
    color: var(--color-on-surface) !important;
    border-color: var(--color-border-subtle) !important;
}

html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea {
    background-color: var(--color-input-bg) !important;
    color: var(--color-on-surface) !important;
    border-color: var(--color-border-subtle) !important;
}

select,
select.text-on-surface {
    color: var(--color-on-surface) !important;
    background-color: var(--color-input-bg) !important;
}

select option {
    background-color: var(--color-surface-container);
    color: var(--color-on-surface);
}

/* Tailwind forms plugin can force dark text on selects */
select:not(.select2-hidden-accessible) {
    color: var(--color-on-surface) !important;
}

/* DataTables */
.dataTables_wrapper { color: var(--color-on-surface-variant); }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--color-surface-container) !important;
    border: 1px solid var(--color-border-subtle) !important;
    color: var(--color-on-surface) !important;
}

table.dataTable thead th {
    background: var(--color-table-header-bg) !important;
    color: var(--color-table-header-text) !important;
    border-bottom: 1px solid var(--color-table-header-border) !important;
}

/* Dashboard / panel tables keep their own subtle headers */
table:not(.dataTable) thead th {
    background: transparent !important;
    color: inherit !important;
    border-bottom-color: inherit !important;
}

.admin-shell-header {
    background-color: var(--color-header-bg) !important;
    color: var(--color-on-surface);
    box-shadow: 0 1px 0 var(--color-border-subtle);
    z-index: 100;
}

.admin-shell-main {
    z-index: 1;
    margin-top: 4rem;
    height: calc(100vh - 4rem);
    height: calc(100dvh - 4rem);
    scroll-padding-top: 1rem;
}

table.dataTable tbody td {
    color: var(--color-on-surface) !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    background: var(--color-surface-container) !important;
}

table.dataTable tbody tr:hover td {
    background: var(--color-surface-container-high) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--color-on-surface-variant) !important;
    background: var(--color-surface-container) !important;
    border: 1px solid var(--color-border-subtle) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single {
    background-color: var(--color-input-bg) !important;
    border-color: var(--color-border-subtle) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-on-surface) !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--color-on-surface-variant) !important;
}

.select2-dropdown {
    background: var(--color-surface-container) !important;
    border-color: var(--color-border-subtle) !important;
}

.select2-container--default .select2-results__option {
    color: var(--color-on-surface) !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--color-select2-highlight) !important;
    color: var(--color-on-primary) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--color-input-bg) !important;
    border-color: var(--color-border-subtle) !important;
    color: var(--color-on-surface) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--color-on-surface-variant) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--color-on-surface-variant) transparent !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--color-on-surface-variant) !important;
    margin-right: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--color-primary) !important;
}

/* Tabular product Select2 (sales & purchases) */
.select2-dropdown.product-s2-dropdown {
    min-width: min(640px, 94vw) !important;
    width: auto !important;
}

.product-s2-dropdown .select2-results__option {
    padding: 0 !important;
}

.product-s2-header,
.product-s2-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(88px, 1fr) minmax(72px, 88px);
    gap: 10px;
    padding: 7px 12px;
    align-items: center;
}

.product-s2-header {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-on-surface-variant);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-surface-container-high);
    position: sticky;
    top: 0;
    z-index: 1;
}

.product-s2-row .product-s2-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-s2-row .product-s2-company {
    font-size: 0.88em;
    color: var(--color-on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-s2-row .product-s2-stock {
    font-size: 0.88em;
    font-family: var(--font-mono, ui-monospace, monospace);
    text-align: right;
    color: var(--color-on-surface);
    white-space: nowrap;
}

.product-s2-row--loading {
    padding: 8px 12px;
    color: var(--color-on-surface-variant);
    font-style: italic;
}

/* Selected product: show full name (wrap lines instead of ellipsis) */
.select2-container.product-s2-select {
    width: 100% !important;
    max-width: none !important;
}

.select2-container.product-s2-select .select2-selection--single {
    height: auto !important;
    min-height: 38px;
    overflow: visible !important;
}

.select2-container.product-s2-select .select2-selection--single .select2-selection__rendered {
    display: block !important;
    white-space: normal !important;
    word-break: break-word;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.35 !important;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 1.75rem;
    height: auto !important;
}

#purchase-form .select2-container.product-s2-select .select2-selection--single,
#sale-form .select2-container.product-s2-select .select2-selection--single {
    height: auto !important;
}

#purchase-form .select2-container.product-s2-select .select2-selection__rendered,
#sale-form .select2-container.product-s2-select .select2-selection__rendered {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.35 !important;
}

.purchase-products-table .product-line-cell,
.sale-products-table .product-line-cell {
    min-width: 14rem;
    max-width: 24rem;
    vertical-align: top;
    white-space: normal;
}

.purchase-products-table .product-line-cell .select2-container,
.sale-products-table .product-line-cell .select2-container {
    max-width: none !important;
}

.select2-container.product-s2-select .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0;
}

.select2-container.product-s2-select .select2-selection--single .select2-selection__clear {
    margin-top: 2px;
}

.product-s2-selection-text {
    display: block;
    white-space: normal;
    word-break: break-word;
}

.select2-results__option--highlighted .product-s2-row .product-s2-company,
.select2-results__option--highlighted .product-s2-row .product-s2-stock {
    color: inherit;
    opacity: 0.92;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: color-mix(in srgb, var(--color-primary) 14%, var(--color-input-bg)) !important;
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border-subtle)) !important;
    color: var(--color-on-surface) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--color-on-surface-variant) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--color-primary) !important;
}

.select2-container--default .select2-selection--multiple {
    background-color: var(--color-input-bg) !important;
    border-color: var(--color-border-subtle) !important;
    min-height: 38px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--color-on-surface) !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
    background: transparent !important;
    color: var(--color-on-surface) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--color-on-surface-variant) !important;
}

.purchase-products-table tbody tr:nth-child(even),
.sale-products-table tbody tr:nth-child(even) {
    background: var(--color-row-stripe) !important;
}

.purchase-products-table tbody tr.item-row:hover,
.sale-products-table tbody tr.item-row:hover {
    background: var(--color-row-hover) !important;
}

/* Theme toggle icons */
html.light #admin-theme-toggle .theme-icon-light,
html:not(.dark) #admin-theme-toggle .theme-icon-light {
    display: none !important;
}

html.light #admin-theme-toggle .theme-icon-dark,
html:not(.dark) #admin-theme-toggle .theme-icon-dark {
    display: inline !important;
}

html.dark #admin-theme-toggle .theme-icon-light {
    display: inline !important;
}

html.dark #admin-theme-toggle .theme-icon-dark {
    display: none !important;
}

#admin-theme-toggle .theme-label-light,
#admin-theme-toggle .theme-label-dark {
    display: none;
}

html.light #admin-theme-toggle .theme-label-light,
html:not(.dark) #admin-theme-toggle .theme-label-light {
    display: inline;
}

html.dark #admin-theme-toggle .theme-label-dark {
    display: inline;
}

/* Real-time admin toasts */
.admin-toast-stack {
    position: fixed;
    top: calc(4rem + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(100% - 2rem, 28rem);
    pointer-events: none;
}

.admin-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-surface-container-high);
    border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border-subtle));
    border-left: 4px solid var(--color-primary);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .28s ease, transform .28s ease;
}

.admin-toast-in {
    opacity: 1;
    transform: translateY(0);
}

.admin-toast-out {
    opacity: 0;
    transform: translateY(-8px);
}

.admin-toast-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.admin-toast-icon .material-symbols-outlined {
    font-size: 1.25rem;
}

.admin-toast-body {
    flex: 1;
    min-width: 0;
}

.admin-toast-title {
    font-size: .875rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin-bottom: 2px;
}

.admin-toast-line,
.admin-toast-meta {
    font-size: .75rem;
    color: var(--color-on-surface-variant);
    line-height: 1.4;
}

.admin-toast-meta {
    color: var(--color-primary);
    font-weight: 600;
    margin-top: 2px;
}

.admin-toast-link {
    display: inline-block;
    margin-top: 6px;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-primary);
}

.admin-toast-close {
    border: none;
    background: transparent;
    color: var(--color-on-surface-variant);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.admin-toast-close:hover {
    color: var(--color-on-surface);
}

/* Sidebar collapsible sections */
.sidebar-section .sidebar-section-body {
    display: none;
}

.sidebar-section.is-open .sidebar-section-body {
    display: block;
}

.sidebar-section.is-open .sidebar-chevron {
    transform: rotate(180deg);
}

.sidebar-section-toggle {
    cursor: pointer;
    border: none;
    background: transparent;
}

.sidebar-section-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.sidebar-nav-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.25rem;
}

.sidebar-collapse-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--color-on-surface-variant);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.sidebar-collapse-all-btn:hover {
    color: var(--color-primary);
    background: var(--color-surface-container-high);
}

.sidebar-collapse-all-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Sidebar typography — larger, more readable */
#sidebar {
    width: 16rem !important; /* 256px */
    font-size: 1rem;
}

#sidebar .sidebar-section-toggle {
    padding-top: 0.875rem;
    padding-bottom: 0.375rem;
}

#sidebar .sidebar-section-toggle > span:first-child {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-on-surface) !important;
}

#sidebar .sidebar-chevron {
    font-size: 1.25rem !important;
}

#sidebar nav a {
    font-size: 0.9375rem !important;
    font-weight: 500;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}

#sidebar nav a.nav-active {
    font-weight: 700;
}

#sidebar nav a .material-symbols-outlined {
    font-size: 1.375rem !important;
    width: 1.375rem;
    height: 1.375rem;
}

#sidebar .mb-6 h1 {
    font-size: 1.375rem !important;
    line-height: 1.3;
}

#sidebar .mb-6 > p {
    font-size: 0.75rem !important;
    letter-spacing: 0.12em;
}

#sidebar .border-t p.text-sm {
    font-size: 0.9375rem !important;
}

#sidebar .border-t p.text-\[10px\] {
    font-size: 0.75rem !important;
}

#sidebar .border-t .w-9 {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem !important;
}

/* Admin shell — mobile menu button + layout */
#sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 0.375rem;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-container);
    color: var(--color-on-surface);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

@media (max-width: 1023px) {
    #sidebar-toggle {
        display: inline-flex;
    }
}

#sidebar-toggle:hover {
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border-subtle));
    background: var(--color-surface-container-high);
}

#sidebar-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-shell-header,
.admin-shell-main {
    transition: margin-left 0.25s ease, left 0.25s ease, width 0.25s ease;
}

/* Full-viewport modals — must be direct children of body (see admin-theme.js) */
body > .admin-modal-overlay,
body > [role="dialog"],
body > [role="alertdialog"] {
    z-index: 200 !important;
}

@media (min-width: 1024px) {
    .admin-shell-header {
        left: 16rem;
        right: 0;
        width: auto;
    }

    .admin-shell-main {
        margin-left: 16rem;
    }
}

#sidebar-backdrop {
    transition: opacity 0.2s ease;
}

/* Listing tables — horizontal scroll for wide DataTables */
.glass-panel:has(table.dataTable),
.glass-panel:has(.dataTables_wrapper),
.datatable-scroll-panel {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-surface-container-low);
}

.glass-panel:has(table.dataTable)::-webkit-scrollbar,
.glass-panel:has(.dataTables_wrapper)::-webkit-scrollbar,
.datatable-scroll-panel::-webkit-scrollbar {
    height: 8px;
}

.glass-panel:has(table.dataTable)::-webkit-scrollbar-track,
.glass-panel:has(.dataTables_wrapper)::-webkit-scrollbar-track,
.datatable-scroll-panel::-webkit-scrollbar-track {
    background: var(--color-surface-container-low);
    border-radius: 4px;
}

.glass-panel:has(table.dataTable)::-webkit-scrollbar-thumb,
.glass-panel:has(.dataTables_wrapper)::-webkit-scrollbar-thumb,
.datatable-scroll-panel::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
}

.glass-panel:has(table.dataTable) table.dataTable,
.datatable-scroll-panel table.dataTable {
    min-width: max(100%, 48rem);
}

/* Status badges (DataTables AJAX HTML — must be real CSS, not CDN-only utilities) */
.dt-status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    line-height: 1.25;
    border: 1px solid transparent;
}

.dt-status-badge--draft {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.45);
}

.dt-status-badge--pending {
    background: rgba(251, 113, 133, 0.15);
    color: #fb7185;
    border-color: rgba(251, 113, 133, 0.4);
}

.dt-status-badge--ordered,
.dt-status-badge--confirmed,
.dt-status-badge--booker,
.dt-status-badge--admin {
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.dt-status-badge--partial,
.dt-status-badge--processing,
.dt-status-badge--pos {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.4);
}

.dt-status-badge--shipped {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.4);
}

.dt-status-badge--received,
.dt-status-badge--delivered,
.dt-status-badge--completed,
.dt-status-badge--approved,
.dt-status-badge--active {
    background: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
    border-color: rgba(45, 212, 191, 0.4);
}

.dt-status-badge--cancelled,
.dt-status-badge--rejected,
.dt-status-badge--low,
.dt-status-badge--inactive {
    background: rgba(251, 113, 133, 0.12);
    color: #fb7185;
    border-color: rgba(251, 113, 133, 0.35);
}

.dt-status-badge--default {
    background: color-mix(in srgb, var(--color-on-surface-variant) 12%, transparent);
    color: var(--color-on-surface-variant);
    border-color: color-mix(in srgb, var(--color-on-surface-variant) 30%, transparent);
}

html.light .dt-status-badge--draft,
html:not(.dark) .dt-status-badge--draft {
    background: rgba(71, 85, 105, 0.12);
    color: #475569;
    border-color: rgba(71, 85, 105, 0.35);
}

html.light .dt-status-badge--partial,
html:not(.dark) .dt-status-badge--partial,
html.light .dt-status-badge--processing,
html:not(.dark) .dt-status-badge--processing,
html.light .dt-status-badge--pos,
html:not(.dark) .dt-status-badge--pos {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
    border-color: rgba(217, 119, 6, 0.35);
}

html.light .dt-status-badge--shipped,
html:not(.dark) .dt-status-badge--shipped {
    background: rgba(2, 132, 199, 0.12);
    color: #0369a1;
    border-color: rgba(2, 132, 199, 0.35);
}

html.light .dt-status-badge--received,
html:not(.dark) .dt-status-badge--received,
html.light .dt-status-badge--delivered,
html:not(.dark) .dt-status-badge--delivered,
html.light .dt-status-badge--completed,
html:not(.dark) .dt-status-badge--completed,
html.light .dt-status-badge--approved,
html:not(.dark) .dt-status-badge--approved,
html.light .dt-status-badge--active,
html:not(.dark) .dt-status-badge--active {
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
    border-color: rgba(13, 148, 136, 0.35);
}

html.light .dt-status-badge--inactive,
html:not(.dark) .dt-status-badge--inactive {
    background: rgba(225, 29, 72, 0.1);
    color: #be123c;
    border-color: rgba(225, 29, 72, 0.3);
}