/* Two-mode theme system. This is the only selectable visual theme layer. */
:root,
html[data-theme="light"] {
    color-scheme: light;
    --theme-primary: #1f63f3;
    --theme-primary-rgb: 31, 99, 243;
    --theme-primary-hover: #174ed0;
    --theme-accent: #1f63f3;
    --theme-bg: #f5f7fb;
    --theme-bg-elevated: #ffffff;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f8faff;
    --theme-surface-hover: #f0f5ff;
    --theme-card: var(--theme-surface);
    --theme-border: #dde4ee;
    --theme-border-strong: #c8d3e2;
    --theme-heading: #111827;
    --theme-text: #1b263d;
    --theme-muted: #69758c;
    --theme-text-muted: var(--theme-muted);
    --theme-shadow: 0 4px 14px rgba(15, 23, 42, .07);
    --theme-shadow-lg: 0 12px 30px rgba(15, 23, 42, .10);
    --theme-success: #16a35b;
    --theme-warning: #f97316;
    --theme-danger: #ef4444;
    --primary-blue: var(--theme-primary);
    --primary-rgb: var(--theme-primary-rgb);
    --primary: var(--theme-primary);
    --primary-dark: var(--theme-primary-hover);
    --primary-soft: #eaf1ff;
    --primary-light: #eaf1ff;
    --accent: var(--theme-accent);
    --bg-app: var(--theme-bg);
    --bg-global: var(--theme-bg);
    --surface: var(--theme-surface);
    --surface-muted: var(--theme-surface-soft);
    --surface-elevated: var(--theme-surface);
    --border-soft: var(--theme-border);
    --border: var(--theme-border);
    --border-default: var(--theme-border);
    --border-hover: var(--theme-border-strong);
    --text-dark: var(--theme-heading);
    --text-main: var(--theme-text);
    --text-primary: var(--theme-text);
    --text-muted: var(--theme-muted);
    --text-secondary: var(--theme-muted);
    --table-header-bg: var(--theme-surface-soft);
    --table-header-text: var(--theme-text);
    --table-header-border: var(--theme-border);
    --table-row-hover: var(--theme-surface-hover);
    --card-shadow: var(--theme-shadow);
    --card-shadow-hover: var(--theme-shadow-lg);
    --app-bg: var(--theme-bg);
    --app-surface: var(--theme-surface);
    --app-surface-soft: var(--theme-surface-soft);
    --app-border: var(--theme-border);
    --app-border-strong: var(--theme-border-strong);
    --app-text: var(--theme-text);
    --app-text-soft: var(--theme-heading);
    --app-muted: var(--theme-muted);
    --app-primary: var(--theme-primary);
    --app-primary-dark: var(--theme-primary-hover);
    --app-primary-soft: #eaf1ff;
    --app-shadow: var(--theme-shadow);
    --app-shadow-strong: var(--theme-shadow-lg);
    --ios-primary: var(--theme-primary);
    --ios-primary-rgb: var(--theme-primary-rgb);
    --ios-primary-softer: var(--primary-soft);
    --ios-bg: var(--theme-bg);
    --ios-surface: var(--theme-surface);
    --ios-surface-2: var(--theme-surface-soft);
    --ios-border: var(--theme-border);
    --ios-text: var(--theme-text);
    --ios-text-2: var(--theme-muted);
    --ios-muted: var(--theme-muted);
    --ios-shadow: var(--theme-shadow);
    --ios-shadow-strong: var(--theme-shadow-lg);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --theme-primary: #3478ff;
    --theme-primary-rgb: 52, 120, 255;
    --theme-primary-hover: #5b92ff;
    --theme-accent: #3478ff;
    --theme-bg: #081321;
    --theme-bg-elevated: #0d1927;
    --theme-surface: #121f2d;
    --theme-surface-soft: #172534;
    --theme-surface-hover: #1b2c3e;
    --theme-card: var(--theme-surface);
    --theme-border: #29384a;
    --theme-border-strong: #3b4c61;
    --theme-heading: #f4f7fc;
    --theme-text: #e2e8f2;
    --theme-muted: #9aa8ba;
    --theme-text-muted: var(--theme-muted);
    --theme-shadow: 0 7px 20px rgba(0, 0, 0, .22);
    --theme-shadow-lg: 0 18px 42px rgba(0, 0, 0, .32);
    --theme-success: #23c66b;
    --theme-warning: #ff8a1c;
    --theme-danger: #ff5454;
    --primary-blue: var(--theme-primary);
    --primary-rgb: var(--theme-primary-rgb);
    --primary: var(--theme-primary);
    --primary-dark: var(--theme-primary-hover);
    --primary-soft: rgba(52,120,255,.16);
    --primary-light: rgba(52,120,255,.16);
    --accent: var(--theme-accent);
    --bg-app: var(--theme-bg);
    --bg-global: var(--theme-bg);
    --surface: var(--theme-surface);
    --surface-muted: var(--theme-surface-soft);
    --surface-elevated: var(--theme-bg-elevated);
    --border-soft: var(--theme-border);
    --border: var(--theme-border);
    --border-default: var(--theme-border);
    --border-hover: var(--theme-border-strong);
    --text-dark: var(--theme-heading);
    --text-main: var(--theme-text);
    --text-primary: var(--theme-text);
    --text-muted: var(--theme-muted);
    --text-secondary: var(--theme-muted);
    --table-header-bg: var(--theme-surface-soft);
    --table-header-text: var(--theme-text);
    --table-header-border: var(--theme-border);
    --table-row-hover: var(--theme-surface-hover);
    --card-shadow: var(--theme-shadow);
    --card-shadow-hover: var(--theme-shadow-lg);
    --app-bg: var(--theme-bg);
    --app-surface: var(--theme-surface);
    --app-surface-soft: var(--theme-surface-soft);
    --app-border: var(--theme-border);
    --app-border-strong: var(--theme-border-strong);
    --app-text: var(--theme-text);
    --app-text-soft: var(--theme-heading);
    --app-muted: var(--theme-muted);
    --app-primary: var(--theme-primary);
    --app-primary-dark: var(--theme-primary-hover);
    --app-primary-soft: rgba(52,120,255,.16);
    --app-shadow: var(--theme-shadow);
    --app-shadow-strong: var(--theme-shadow-lg);
    --ios-primary: var(--theme-primary);
    --ios-primary-rgb: var(--theme-primary-rgb);
    --ios-primary-softer: var(--primary-soft);
    --ios-bg: var(--theme-bg);
    --ios-surface: var(--theme-surface);
    --ios-surface-2: var(--theme-surface-soft);
    --ios-border: var(--theme-border);
    --ios-text: var(--theme-text);
    --ios-text-2: var(--theme-muted);
    --ios-muted: var(--theme-muted);
    --ios-shadow: var(--theme-shadow);
    --ios-shadow-strong: var(--theme-shadow-lg);
}

html,
body.app-shell,
body.app-shell .industrial-shell,
body.app-shell .app-workspace,
body.app-shell .app-main,
body.app-shell .app-container {
    background: var(--theme-bg);
    color: var(--theme-text);
}

body.app-shell {
    transition: background-color .2s ease, color .2s ease;
}

body.app-shell .app-topbar,
body.app-shell .app-statusbar {
    color: var(--theme-text);
    background: color-mix(in srgb, var(--theme-surface) 96%, transparent);
    border-color: var(--theme-border);
}

body.app-shell :where(.card, .card-custom, .content-panel, .metric-card, .table-card, .modern-card, .modal-content, .dropdown-menu, .notifications-container) {
    color: var(--theme-text);
    background: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow);
}

body.app-shell :where(.form-control, .form-select, .input-group-text, .select2-selection) {
    color: var(--theme-text);
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
}

body.app-shell :where(.form-control, .form-select)::placeholder {
    color: var(--theme-muted);
}

body.app-shell :where(.table, .table-base, .modern-table) {
    --bs-table-color: var(--theme-text);
    --bs-table-bg: var(--theme-surface);
    --bs-table-striped-color: var(--theme-text);
    --bs-table-striped-bg: var(--theme-surface-soft);
    --bs-table-hover-color: var(--theme-heading);
    --bs-table-hover-bg: var(--theme-surface-hover);
    --bs-table-border-color: var(--theme-border);
    color: var(--theme-text);
    background: var(--theme-surface);
}

body.app-shell :where(.table, .table-base, .modern-table) thead th {
    color: var(--table-header-text);
    background: var(--table-header-bg);
    border-color: var(--table-header-border);
}

body.app-shell :where(.text-dark, h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

body.app-shell .text-muted,
body.app-shell .form-text {
    color: var(--theme-muted) !important;
}

body.app-shell .btn-primary {
    color: #fff;
    background: var(--theme-primary);
    border-color: var(--theme-primary);
}

body.app-shell .btn-outline-primary {
    color: var(--theme-primary);
    border-color: color-mix(in srgb, var(--theme-primary) 62%, var(--theme-border));
}

body.app-shell .btn-outline-primary:hover {
    color: #fff;
    background: var(--theme-primary);
    border-color: var(--theme-primary);
}

html[data-theme="dark"] body.app-shell :where(.btn-light, .btn-outline-secondary, .btn-outline-dark) {
    color: var(--theme-text);
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

html[data-theme="dark"] body.app-shell :where(.card-header, .card-footer, .modal-header, .modal-footer, .vidal-panel-header) {
    color: var(--theme-text) !important;
    background: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] body.app-shell :where(.modal-body, .list-group-item, .dropdown-item, .bg-white, .bg-light, .table-light, .table-secondary) {
    color: var(--theme-text) !important;
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] body.app-shell :where(.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-info, .btn-outline-success, .btn-outline-warning, .btn-outline-danger) {
    color: var(--theme-text) !important;
    background: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] body.app-shell :where(.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-info, .btn-outline-success, .btn-outline-warning, .btn-outline-danger):hover {
    color: var(--theme-primary) !important;
    background: var(--primary-soft) !important;
    border-color: color-mix(in srgb, var(--theme-primary) 42%, var(--theme-border)) !important;
}

html[data-theme="dark"] body.app-shell :where(.form-control, .form-select, .input-group-text, textarea, input[type="search"], .select2-container--bootstrap-5 .select2-selection, .select2-container .select2-selection--single) {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] body.app-shell :where(.form-control, textarea)::placeholder {
    color: var(--theme-muted) !important;
}

html[data-theme="dark"] body.app-shell :where(table.table, .table, .table-base, .modern-table) {
    --bs-table-bg: var(--theme-surface);
    --bs-table-color: var(--theme-text);
    --bs-table-border-color: var(--theme-border);
    --bs-table-striped-bg: var(--theme-surface-soft);
    --bs-table-striped-color: var(--theme-text);
    --bs-table-hover-bg: var(--theme-surface-hover);
    --bs-table-hover-color: var(--theme-heading);
    color: var(--theme-text) !important;
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] body.app-shell .table > :not(caption) > * > * {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] body.app-shell .table tbody tr:nth-child(even) > * {
    background-color: var(--theme-surface-soft) !important;
}

html[data-theme="dark"] body.app-shell :where(.table-warning, .table-info, .table-success, .table-danger) > * {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface-soft) !important;
}

html[data-theme="dark"] body.app-shell :where(.text-dark, .text-body, .text-black) {
    color: var(--theme-heading) !important;
}

html[data-theme="dark"] body.app-shell :where(.border, .border-top, .border-end, .border-bottom, .border-start) {
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] body.app-shell .btn-close {
    filter: invert(1) grayscale(1);
}

.theme-picker,
[data-theme-picker] {
    color: var(--theme-text);
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
}

@media (prefers-reduced-motion: reduce) {
    body.app-shell { transition: none; }
}

/* ==========================================================
   PROJECT global UI standardization layer
   ----------------------------------------------------------
   This file is loaded last. Keep app-wide color decisions here
   so each view only worries about layout, not theme plumbing.
   ========================================================== */

body.app-shell {
    --ui-bg: var(--theme-bg);
    --ui-bg-elevated: var(--theme-bg-elevated);
    --ui-surface: var(--theme-surface);
    --ui-surface-soft: var(--theme-surface-soft);
    --ui-surface-hover: var(--theme-surface-hover);
    --ui-border: var(--theme-border);
    --ui-border-strong: var(--theme-border-strong);
    --ui-heading: var(--theme-heading);
    --ui-text: var(--theme-text);
    --ui-muted: var(--theme-muted);
    --ui-primary: var(--theme-primary);
    --ui-primary-rgb: var(--theme-primary-rgb);
    --ui-shadow: var(--theme-shadow);
    --ui-shadow-lg: var(--theme-shadow-lg);
    --bs-body-bg: var(--ui-bg);
    --bs-body-color: var(--ui-text);
    --bs-border-color: var(--ui-border);
    --bs-heading-color: var(--ui-heading);
    --bs-secondary-color: var(--ui-muted);
    --bs-tertiary-bg: var(--ui-surface-soft);
}

html,
body.app-shell,
body.app-shell :where(.industrial-shell, .app-workspace, .app-main, .app-container, .container, .container-fluid, .page-wrapper, .view-shell, .dashboard-core, .page-container) {
    color: var(--ui-text) !important;
    background-color: var(--ui-bg) !important;
}

body.app-shell :where(h1, h2, h3, h4, h5, h6, .topbar-brand, .card-title, .modal-title, .page-title, .section-title, .fw-bold, .fw-semibold) {
    color: var(--ui-heading) !important;
}

body.app-shell :where(p, label, .form-label, .form-check-label, .small, small, .text-body, .text-dark, .text-black) {
    color: var(--ui-text) !important;
}

body.app-shell :where(.text-muted, .form-text, .help-text, .page-subtitle, .section-subtitle, .text-secondary) {
    color: var(--ui-muted) !important;
}

body.app-shell :where(.bg-white, .bg-body, .bg-light, .surface, .surface-card) {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
}

body.app-shell :where(.border, .border-top, .border-end, .border-bottom, .border-start) {
    border-color: var(--ui-border) !important;
}

body.app-shell .app-topbar,
body.app-shell .app-statusbar {
    color: var(--ui-text) !important;
    background: color-mix(in srgb, var(--ui-surface) 94%, transparent) !important;
    border-color: var(--ui-border) !important;
    box-shadow: 0 1px 0 var(--ui-border) !important;
    backdrop-filter: blur(14px);
}

body.app-shell .topbar-search,
body.app-shell .topbar-icon,
body.app-shell .theme-picker,
body.app-shell [data-theme-picker] {
    color: var(--ui-text) !important;
    background: var(--ui-surface-soft) !important;
    border-color: var(--ui-border) !important;
}

body.app-shell .topbar-search input,
body.app-shell .topbar-search input::placeholder {
    color: var(--ui-muted) !important;
}

body.app-shell .topbar-icon:hover,
body.app-shell .theme-picker:hover,
body.app-shell [data-theme-picker]:hover {
    color: var(--ui-primary) !important;
    background: color-mix(in srgb, var(--ui-primary) 12%, var(--ui-surface)) !important;
    border-color: color-mix(in srgb, var(--ui-primary) 38%, var(--ui-border)) !important;
}

body.app-shell .department-views-nav {
    width: min(100% - clamp(18px, 3vw, 54px), 1920px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 14px auto 0;
    padding: 8px;
    color: var(--ui-text);
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
    box-shadow: var(--ui-shadow);
}

body.app-shell .department-views-nav-label {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    color: var(--ui-heading);
    border-right: 1px solid var(--ui-border);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

body.app-shell .department-views-nav-label i {
    color: var(--ui-primary);
    font-size: 16px;
}

body.app-shell .department-views-nav-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

body.app-shell .department-views-nav-link,
body.app-shell .department-views-nav-link:visited {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 0 13px;
    color: var(--ui-text) !important;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

body.app-shell .department-views-nav-link i {
    color: inherit !important;
    font-size: 15px;
}

body.app-shell .department-views-nav-link:hover,
body.app-shell .department-views-nav-link:focus {
    color: var(--ui-primary) !important;
    border-color: color-mix(in srgb, var(--ui-primary) 30%, var(--ui-border));
    background: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-surface));
    outline: none;
}

body.app-shell .department-views-nav-link.active,
body.app-shell .department-views-nav-link.active:hover,
body.app-shell .department-views-nav-link.active:focus,
body.app-shell .department-views-nav-link.active:visited {
    color: #fff !important;
    border-color: var(--ui-primary) !important;
    background: var(--ui-primary) !important;
    box-shadow: 0 8px 20px rgba(var(--ui-primary-rgb), .24);
}

body.app-shell .department-views-nav-link.active i,
body.app-shell .department-views-nav-link.active span {
    color: #fff !important;
}

@media (max-width: 820px) {
    body.app-shell .department-views-nav {
        width: calc(100% - 20px);
        grid-template-columns: 1fr;
        gap: 6px;
        margin-top: 10px;
        border-radius: 14px;
    }

    body.app-shell .department-views-nav-label {
        min-height: 30px;
        padding: 0 8px 4px;
        border-right: 0;
        border-bottom: 1px solid var(--ui-border);
    }

    body.app-shell .department-views-nav-link {
        min-height: 38px;
        padding: 0 11px;
        font-size: 11px;
    }
}

body.app-shell :where(.card, .card-custom, .modern-card, .content-panel, .metric-card, .table-card, .panel, .summary-card, .stat-card, .dashboard-card, .kpi-card, .import-card, .import-preview-card, .import-summary, .inventory-card, .location-card, .receive-card, .bol-card, .modal-content, .offcanvas, .dropdown-menu, .list-group-item, .notifications-container) {
    color: var(--ui-text) !important;
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow) !important;
}

body.app-shell :where(.card-header, .card-footer, .modal-header, .modal-footer, .offcanvas-header, .offcanvas-footer, .dropdown-header, .table-toolbar, .panel-header, .panel-footer) {
    color: var(--ui-text) !important;
    background: var(--ui-surface-soft) !important;
    border-color: var(--ui-border) !important;
}

body.app-shell :where(.modal-body, .offcanvas-body, .dropdown-item) {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
}

body.app-shell .dropdown-item:hover,
body.app-shell .dropdown-item:focus,
body.app-shell .list-group-item:hover {
    color: var(--ui-heading) !important;
    background-color: var(--ui-surface-hover) !important;
}

body.app-shell :where(.form-control, .form-select, .input-group-text, textarea, input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="password"]) {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

body.app-shell :where(.form-control, textarea, input)::placeholder {
    color: var(--ui-muted) !important;
    opacity: .78 !important;
}

body.app-shell :where(.form-control:focus, .form-select:focus, textarea:focus, input:focus) {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: color-mix(in srgb, var(--ui-primary) 58%, var(--ui-border)) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--ui-primary-rgb), .14) !important;
}

body.app-shell :where(.form-control[readonly], .form-control:disabled, .form-select:disabled, input:disabled, textarea:disabled) {
    color: var(--ui-muted) !important;
    background-color: var(--ui-surface-soft) !important;
    border-color: var(--ui-border) !important;
    opacity: 1 !important;
}

body.app-shell .select2-container--bootstrap-5 .select2-selection,
body.app-shell .select2-container .select2-selection--single,
body.app-shell .select2-container .select2-selection--multiple {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

body.app-shell .select2-dropdown,
body.app-shell .select2-results__option {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

body.app-shell .select2-container--bootstrap-5 .select2-selection__rendered,
body.app-shell .select2-container .select2-selection__rendered {
    color: var(--ui-text) !important;
}

body.app-shell .select2-container--bootstrap-5 .select2-results__option--highlighted,
body.app-shell .select2-results__option--highlighted {
    color: #fff !important;
    background-color: var(--ui-primary) !important;
}

body.app-shell :where(table.table, .table, .table-base, .modern-table) {
    --bs-table-color: var(--ui-text);
    --bs-table-bg: var(--ui-surface);
    --bs-table-border-color: var(--ui-border);
    --bs-table-striped-color: var(--ui-text);
    --bs-table-striped-bg: color-mix(in srgb, var(--ui-surface-soft) 72%, transparent);
    --bs-table-hover-color: var(--ui-heading);
    --bs-table-hover-bg: color-mix(in srgb, var(--ui-primary) 9%, var(--ui-surface));
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

body.app-shell .table > :not(caption) > * > * {
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
    box-shadow: none !important;
}

body.app-shell .table thead,
body.app-shell .table thead th,
body.app-shell .table-light,
body.app-shell thead.table-light,
body.app-shell .table-secondary {
    color: var(--ui-heading) !important;
    background-color: var(--ui-surface-soft) !important;
    border-color: var(--ui-border) !important;
}

body.app-shell .table tbody tr:hover > * {
    color: var(--ui-heading) !important;
    background-color: color-mix(in srgb, var(--ui-primary) 9%, var(--ui-surface)) !important;
}

body.app-shell .table tfoot,
body.app-shell .table tfoot > tr > * {
    color: var(--ui-heading) !important;
    background-color: var(--ui-surface-soft) !important;
    border-color: var(--ui-border) !important;
}

body.app-shell .table-dark,
body.app-shell thead.table-dark,
body.app-shell .table-dark > :not(caption) > * > * {
    color: #fff !important;
    background-color: #162233 !important;
    border-color: color-mix(in srgb, #fff 12%, transparent) !important;
}

body.app-shell :where(.table-success, .table-info, .table-warning, .table-danger) > :not(caption) > * > *,
body.app-shell :where(.table-success, .table-info, .table-warning, .table-danger) > * {
    color: var(--ui-heading) !important;
    border-color: var(--ui-border) !important;
}

body.app-shell .table-success > * { background-color: color-mix(in srgb, var(--theme-success) 14%, var(--ui-surface)) !important; }
body.app-shell .table-info > * { background-color: color-mix(in srgb, var(--ui-primary) 13%, var(--ui-surface)) !important; }
body.app-shell .table-warning > * { background-color: color-mix(in srgb, var(--theme-warning) 14%, var(--ui-surface)) !important; }
body.app-shell .table-danger > * { background-color: color-mix(in srgb, var(--theme-danger) 13%, var(--ui-surface)) !important; }

body.app-shell :where(.btn-light, .btn-outline-light, .btn-outline-secondary, .btn-outline-dark, .btn-outline-info, .btn-outline-success, .btn-outline-warning, .btn-outline-danger) {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

body.app-shell :where(.btn-light, .btn-outline-light, .btn-outline-secondary, .btn-outline-dark, .btn-outline-info, .btn-outline-success, .btn-outline-warning, .btn-outline-danger):hover,
body.app-shell :where(.btn-light, .btn-outline-light, .btn-outline-secondary, .btn-outline-dark, .btn-outline-info, .btn-outline-success, .btn-outline-warning, .btn-outline-danger):focus {
    color: var(--ui-primary) !important;
    background-color: color-mix(in srgb, var(--ui-primary) 12%, var(--ui-surface)) !important;
    border-color: color-mix(in srgb, var(--ui-primary) 40%, var(--ui-border)) !important;
}

body.app-shell :where(.btn-check:checked + .btn, .btn.active, .btn.show, .nav-pills .nav-link.active, .nav-tabs .nav-link.active, .page-item.active .page-link) {
    color: #fff !important;
    background-color: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
}

body.app-shell :where(.nav-link, .page-link) {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

body.app-shell :where(.nav-link:hover, .page-link:hover) {
    color: var(--ui-primary) !important;
    background-color: color-mix(in srgb, var(--ui-primary) 10%, var(--ui-surface)) !important;
    border-color: color-mix(in srgb, var(--ui-primary) 35%, var(--ui-border)) !important;
}

body.app-shell :where(.badge.bg-light, .text-bg-light) {
    color: var(--ui-heading) !important;
    background-color: var(--ui-surface-soft) !important;
    border: 1px solid var(--ui-border) !important;
}

body.app-shell :where(.alert, .toast, .swal2-popup) {
    color: var(--ui-text) !important;
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

body.app-shell .alert-success { background-color: color-mix(in srgb, var(--theme-success) 13%, var(--ui-surface)) !important; }
body.app-shell .alert-info { background-color: color-mix(in srgb, var(--ui-primary) 12%, var(--ui-surface)) !important; }
body.app-shell .alert-warning { background-color: color-mix(in srgb, var(--theme-warning) 13%, var(--ui-surface)) !important; }
body.app-shell .alert-danger { background-color: color-mix(in srgb, var(--theme-danger) 12%, var(--ui-surface)) !important; }

body.app-shell .notifications-offcanvas,
body.app-shell .notifications-container {
    color: var(--ui-text) !important;
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

body.app-shell .notifications-header {
    color: var(--ui-heading) !important;
    background: var(--ui-surface-soft) !important;
    border-color: var(--ui-border) !important;
}

body.app-shell .notifications-header h5,
body.app-shell .notification-item-title {
    color: var(--ui-heading) !important;
}

body.app-shell .btn-close-notifications,
body.app-shell .notification-item-time,
body.app-shell .no-notifications-placeholder,
body.app-shell .no-notifications-placeholder p {
    color: var(--ui-muted) !important;
}

body.app-shell .notification-item {
    color: var(--ui-text) !important;
    background: color-mix(in srgb, var(--theme-danger) 10%, var(--ui-surface)) !important;
    border-color: var(--theme-danger) !important;
}

body.app-shell .notification-item:hover {
    background: color-mix(in srgb, var(--theme-danger) 14%, var(--ui-surface)) !important;
}

body.app-shell .notification-item-content {
    color: var(--ui-text) !important;
}

body.app-shell .notification-item-meta span {
    color: var(--ui-text) !important;
    background: var(--ui-surface-soft) !important;
    border-color: var(--ui-border) !important;
}

body.app-shell .notification-item-action {
    color: var(--ui-text) !important;
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

body.app-shell .notification-item-action:hover {
    color: #fff !important;
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
}

body.app-shell .notification-item-action.danger {
    color: var(--theme-danger) !important;
}

body.app-shell .notification-item-action.danger:hover {
    color: #fff !important;
    background: var(--theme-danger) !important;
    border-color: var(--theme-danger) !important;
}

body.app-shell .btn-close {
    filter: var(--theme-close-filter, none);
}

html[data-theme="dark"] body.app-shell {
    --theme-close-filter: invert(1) grayscale(1);
}

@media (min-width: 1400px) {
    body.app-shell .app-container {
        width: min(100%, 1920px);
        margin-inline: auto;
    }
}

@media print {
    body.app-shell .app-topbar,
    body.app-shell .department-views-nav,
    body.app-shell .app-statusbar,
    body.app-shell .app-sidebar,
    body.app-shell .no-print {
        display: none !important;
    }

    body.app-shell .industrial-shell,
    body.app-shell .app-workspace,
    body.app-shell .app-main,
    body.app-shell .app-container {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        border: 0 !important;
    }
}

/* ==========================================================
   Vidal department stable color
   ========================================================== */

body.app-shell[data-department="vidal"] {
    --vidal-color: #0f766e;
    --vidal-color-rgb: 15, 118, 110;
    --vidal-dark: #115e59;
    --vidal-soft: #ccfbf1;
    --theme-primary: var(--vidal-color);
    --theme-primary-rgb: var(--vidal-color-rgb);
    --theme-primary-hover: var(--vidal-dark);
    --primary-blue: var(--vidal-color);
    --primary: var(--vidal-color);
    --primary-dark: var(--vidal-dark);
    --primary-rgb: var(--vidal-color-rgb);
    --primary-soft: var(--vidal-soft);
    --primary-light: var(--vidal-soft);
    --dept-color: var(--vidal-color);
    --dept-soft: var(--vidal-soft);
    --ui-primary: var(--vidal-color);
    --ui-primary-rgb: var(--vidal-color-rgb);
}

html[data-theme="dark"] body.app-shell[data-department="vidal"] {
    --vidal-soft: rgba(15, 118, 110, .22);
    --primary-soft: rgba(15, 118, 110, .22);
    --primary-light: rgba(15, 118, 110, .22);
    --dept-soft: rgba(15, 118, 110, .22);
}

/* ==========================================================
   Blanks department polish based on Packing List visual style
   ========================================================== */

body.app-shell[data-department="blanks"] {
    --blanks-orange: #ff5a00;
    --blanks-orange-rgb: 255, 90, 0;
    --blanks-orange-dark: #e94f00;
    --blanks-orange-soft: #fff1e8;
    --theme-primary: var(--blanks-orange);
    --theme-primary-rgb: var(--blanks-orange-rgb);
    --theme-primary-hover: var(--blanks-orange-dark);
    --primary-blue: var(--blanks-orange);
    --primary: var(--blanks-orange);
    --primary-dark: var(--blanks-orange-dark);
    --primary-rgb: var(--blanks-orange-rgb);
    --primary-soft: var(--blanks-orange-soft);
    --primary-light: var(--blanks-orange-soft);
    --dept-color: var(--blanks-orange);
    --dept-soft: var(--blanks-orange-soft);
    --ui-primary: var(--blanks-orange);
    --ui-primary-rgb: var(--blanks-orange-rgb);
}

html[data-theme="dark"] body.app-shell[data-department="blanks"] {
    --blanks-orange-soft: rgba(255, 90, 0, .15);
    --primary-soft: rgba(255, 90, 0, .15);
    --primary-light: rgba(255, 90, 0, .15);
    --dept-soft: rgba(255, 90, 0, .15);
}

body.app-shell[data-department="blanks"] :where(.app-main, .app-container) {
    background:
        radial-gradient(circle at 12% 0, rgba(var(--blanks-orange-rgb), .08), transparent 30rem),
        radial-gradient(circle at 88% 6%, rgba(var(--blanks-orange-rgb), .04), transparent 26rem),
        var(--theme-bg) !important;
}

body.app-shell[data-department="blanks"] :where(
    .card,
    .card-custom,
    .content-panel,
    .blanks-index-card,
    .inventory-clean-shell,
    .inventory-table-card,
    .inventory-kpi,
    .ld-card,
    .tl-location-card,
    .tl-side-card,
    .tl-bottom-summary,
    .pull-filter-card,
    .pull-locations-card,
    .import-card,
    .import-preview-card,
    .import-summary,
    .summary-filters,
    .inventory-summary-wrap,
    .inventory-summary-table
) {
    color: var(--theme-text) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 16px !important;
    background: var(--theme-surface) !important;
    box-shadow: var(--theme-shadow) !important;
}

body.app-shell[data-department="blanks"] :where(
    .card-header,
    .card-header-custom,
    .inventory-page-header,
    .inventory-table-heading,
    .ld-table-head,
    .tl-card-top,
    .blanks-panel-header
) {
    color: var(--theme-heading) !important;
    border-color: var(--theme-border) !important;
    background: color-mix(in srgb, var(--theme-surface) 88%, var(--blanks-orange-soft)) !important;
}

body.app-shell[data-department="blanks"] :where(
    .blanks-page-header h3,
    .page-heading h4,
    .inventory-title-group h1,
    .ld-heading h1,
    .tl-title h1,
    .card-header-custom h1,
    .card-header h3,
    .card-header h4,
    .card-header h5,
    .text-primary,
    .text-success
) {
    color: var(--theme-heading) !important;
}

body.app-shell[data-department="blanks"] :where(
    .inventory-title-icon,
    .blanks-hero-icon,
    .summary-icon.orange,
    .summary-icon.blue,
    .inventory-kpi > span,
    .ld-location-code,
    .tl-location-code,
    .tl-bottom-summary > span > i,
    .tl-side-card h2 + p + .tl-camera-stage,
    .bi.text-primary
) {
    color: var(--blanks-orange) !important;
    background: var(--blanks-orange-soft) !important;
}

body.app-shell[data-department="blanks"] :where(
    .btn-primary,
    .btn-success,
    .inventory-export-btn,
    .ld-button.primary,
    .tl-transfer-button,
    .tl-transfer-summary button,
    .tl-bottom-summary > a
) {
    color: #fff !important;
    border-color: var(--blanks-orange) !important;
    background: linear-gradient(180deg, var(--blanks-orange), var(--blanks-orange-dark)) !important;
    box-shadow: 0 9px 20px rgba(var(--blanks-orange-rgb), .22) !important;
}

body.app-shell[data-department="blanks"] :where(
    .btn-primary:hover,
    .btn-success:hover,
    .inventory-export-btn:hover,
    .ld-button.primary:hover,
    .tl-transfer-button:hover
) {
    color: #fff !important;
    filter: brightness(.98);
    transform: translateY(-1px);
}

body.app-shell[data-department="blanks"] :where(
    .btn-outline-primary,
    .btn-outline-success,
    .btn-outline-secondary,
    .btn-outline-dark,
    .blanks-button,
    .ld-button,
    .tl-outline,
    .tl-filter,
    .tl-manual,
    .tl-row-complete,
    .inventory-header-btn,
    .inventory-location-btn,
    .blanks-row-button
) {
    color: var(--theme-heading) !important;
    border-color: var(--theme-border) !important;
    background: var(--theme-surface) !important;
}

body.app-shell[data-department="blanks"] :where(
    .btn-outline-primary:hover,
    .btn-outline-success:hover,
    .btn-outline-secondary:hover,
    .btn-outline-dark:hover,
    .blanks-button:hover,
    .ld-button:hover,
    .tl-outline:hover,
    .tl-filter:hover,
    .tl-manual:hover,
    .tl-row-complete:hover,
    .inventory-header-btn:hover,
    .inventory-location-btn:hover,
    .blanks-row-button:hover
) {
    color: var(--blanks-orange) !important;
    border-color: color-mix(in srgb, var(--blanks-orange) 40%, var(--theme-border)) !important;
    background: var(--blanks-orange-soft) !important;
}

body.app-shell[data-department="blanks"] :where(
    .nav-tabs .nav-link.active,
    .nav-pills .nav-link.active,
    .page-item.active .page-link,
    .tl-size.selected
) {
    color: #fff !important;
    border-color: var(--blanks-orange) !important;
    background: var(--blanks-orange) !important;
}

body.app-shell[data-department="blanks"] :where(
    .nav-tabs .nav-link:not(.active),
    .nav-pills .nav-link:not(.active)
) {
    color: var(--theme-muted) !important;
    border-color: var(--theme-border) !important;
    background: var(--theme-surface) !important;
}

body.app-shell[data-department="blanks"] :where(
    .table thead,
    .table thead th,
    .table-light,
    .table-secondary,
    .table-base thead th,
    .ld-table th,
    .pallet-side-table thead th
) {
    color: color-mix(in srgb, var(--blanks-orange) 62%, var(--theme-heading)) !important;
    border-color: var(--theme-border) !important;
    background: var(--blanks-orange-soft) !important;
}

body.app-shell[data-department="blanks"] .table-dark,
body.app-shell[data-department="blanks"] thead.table-dark,
body.app-shell[data-department="blanks"] .table-dark > :not(caption) > * > * {
    color: #fff !important;
    background: #182235 !important;
    border-color: color-mix(in srgb, var(--blanks-orange) 20%, #334155) !important;
}

body.app-shell[data-department="blanks"] :where(
    .badge.bg-secondary,
    .badge.bg-light,
    .inventory-import-pill,
    .ld-tag,
    .tl-entry,
    .tl-import,
    .blanks-count-pill,
    .pallet-summary-pill
) {
    color: var(--blanks-orange) !important;
    border: 1px solid color-mix(in srgb, var(--blanks-orange) 24%, var(--theme-border)) !important;
    background: var(--blanks-orange-soft) !important;
}

body.app-shell[data-department="blanks"] :where(
    .form-control:focus,
    .form-select:focus,
    .select2-container--bootstrap-5.select2-container--focus .select2-selection,
    .select2-container--bootstrap-5 .select2-dropdown
) {
    border-color: color-mix(in srgb, var(--blanks-orange) 55%, var(--theme-border)) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--blanks-orange-rgb), .14) !important;
}

body.app-shell[data-department="blanks"] :where(.tl-location-card.selected, .ld-table tbody tr.selected td) {
    border-color: var(--blanks-orange) !important;
    box-shadow: 0 0 0 1px var(--blanks-orange), var(--theme-shadow) !important;
}

body.app-shell[data-department="blanks"] :where(
    .tl-location-card.selected,
    .tl-location-card:hover,
    .ld-table tbody tr:hover td,
    .inventory-row:hover > td,
    .table tbody tr:hover > *
) {
    background-color: color-mix(in srgb, var(--blanks-orange) 7%, var(--theme-surface)) !important;
}

body.app-shell[data-department="blanks"] :where(.location-detail-clean, .transfer-locations-page, .inventory-clean-page) {
    color: var(--theme-text) !important;
    background:
        radial-gradient(circle at 12% 0, rgba(var(--blanks-orange-rgb), .08), transparent 30rem),
        var(--theme-bg) !important;
}

body.app-shell[data-department="blanks"] :where(.tl-size, .ld-composition span) {
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    background: var(--theme-surface-soft) !important;
}

body.app-shell[data-department="blanks"] :where(.tl-size.selected) {
    color: #fff !important;
    background: var(--blanks-orange) !important;
}

@media (max-width: 820px) {
    body.app-shell[data-department="blanks"] :where(.blanks-page-header, .inventory-page-header, .ld-header, .tl-header) {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

body.app-shell[data-department="blanks"] :where(
    .import-hero,
    .preview-head,
    .blanks-page-header,
    .container-fluid.w-100 > .d-flex:first-child
) {
    min-height: 76px;
    padding: 18px !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--theme-surface) 94%, var(--blanks-orange-soft)) !important;
    box-shadow: var(--theme-shadow) !important;
}

body.app-shell[data-department="blanks"] :where(
    .blanks-page,
    .blanks-import-page,
    .page-wrapper,
    .container-fluid.w-100
) {
    color: var(--theme-text) !important;
}

body.app-shell[data-department="blanks"] :where(.blanks-page-header h3, .inventory-title-group h1, .import-hero h1, .container-fluid.w-100 > .d-flex h3)::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 28px;
    margin-right: 10px;
    border-radius: 999px;
    background: var(--blanks-orange);
    vertical-align: -6px;
}

body.app-shell[data-department="blanks"] :where(
    .import-card h2,
    .preview-head h2,
    .inventory-table-heading h3,
    .summary-strip strong
) {
    color: var(--theme-heading) !important;
}

body.app-shell[data-department="blanks"] :where(
    .import-hero p,
    .import-card p,
    .preview-head p,
    .summary-strip span,
    .inventory-table-heading span
) {
    color: var(--theme-muted) !important;
}

body.app-shell[data-department="blanks"] :where(.import-eyebrow, .import-note i) {
    color: var(--blanks-orange) !important;
}

body.app-shell[data-department="blanks"] .summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.app-shell[data-department="blanks"] .summary-strip > div {
    min-height: 88px;
    display: grid;
    align-content: center;
    padding: 15px 18px !important;
    position: relative;
    overflow: hidden;
}

body.app-shell[data-department="blanks"] .summary-strip > div::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--blanks-orange);
}

body.app-shell[data-department="blanks"] .summary-strip strong {
    font-size: clamp(20px, 2vw, 28px);
}

body.app-shell[data-department="blanks"] .summary-filters {
    padding: 14px !important;
}

body.app-shell[data-department="blanks"] :where(
    .assign-status,
    .import-tags span,
    .import-note,
    .size-summary
) {
    color: var(--blanks-orange) !important;
    border: 1px solid color-mix(in srgb, var(--blanks-orange) 24%, var(--theme-border)) !important;
    background: var(--blanks-orange-soft) !important;
}

body.app-shell[data-department="blanks"] :where(.assign-status.status-empty, .badge.bg-danger) {
    color: var(--theme-danger) !important;
    background: color-mix(in srgb, var(--theme-danger) 12%, var(--theme-surface)) !important;
    border-color: color-mix(in srgb, var(--theme-danger) 35%, var(--theme-border)) !important;
}

body.app-shell[data-department="blanks"] :where(.assign-status.status-pending, .table-warning > *) {
    color: var(--theme-warning) !important;
    background: color-mix(in srgb, var(--theme-warning) 13%, var(--theme-surface)) !important;
    border-color: color-mix(in srgb, var(--theme-warning) 35%, var(--theme-border)) !important;
}

body.app-shell[data-department="blanks"] :where(.assign-status.status-complete, .badge.bg-success) {
    color: var(--theme-success) !important;
    background: color-mix(in srgb, var(--theme-success) 12%, var(--theme-surface)) !important;
    border-color: color-mix(in srgb, var(--theme-success) 35%, var(--theme-border)) !important;
}

body.app-shell[data-department="blanks"] .row-error > * {
    background: color-mix(in srgb, var(--theme-danger) 9%, var(--theme-surface)) !important;
}

body.app-shell[data-department="blanks"] .row-ok > * {
    background: color-mix(in srgb, var(--theme-success) 7%, var(--theme-surface)) !important;
}

body.app-shell[data-department="blanks"] .btn-view {
    color: var(--theme-heading) !important;
    border-color: var(--theme-border) !important;
    background: var(--theme-surface) !important;
}

body.app-shell[data-department="blanks"] .btn-view:hover {
    color: var(--blanks-orange) !important;
    border-color: color-mix(in srgb, var(--blanks-orange) 40%, var(--theme-border)) !important;
    background: var(--blanks-orange-soft) !important;
}

/* Blanks layout frame: topbar, department nav, user area and statusbar */
body.app-shell[data-department="blanks"] .app-topbar {
    min-height: 70px;
    padding: 10px clamp(16px, 2vw, 28px) !important;
    color: var(--theme-heading) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--blanks-orange) 16%, var(--theme-border)) !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--theme-surface) 96%, var(--blanks-orange-soft)), var(--theme-surface)) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
}

body.app-shell[data-department="blanks"] .topbar-brand {
    gap: 12px !important;
    color: var(--theme-heading) !important;
    font-weight: 900 !important;
    letter-spacing: -.035em;
}

body.app-shell[data-department="blanks"] .topbar-brand img {
    width: 38px !important;
    height: 38px !important;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--blanks-orange) 30%, var(--theme-border));
    border-radius: 12px;
    background: var(--blanks-orange-soft);
}

body.app-shell[data-department="blanks"] .topbar-search {
    height: 44px;
    max-width: 340px;
    color: var(--theme-muted) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
    background: var(--theme-surface-soft) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

body.app-shell[data-department="blanks"] .topbar-search i {
    color: var(--blanks-orange) !important;
}

body.app-shell[data-department="blanks"] .topbar-search input {
    color: var(--theme-text) !important;
}

body.app-shell[data-department="blanks"] .theme-picker,
body.app-shell[data-department="blanks"] .topbar-icon {
    height: 42px;
    min-width: 42px;
    color: var(--theme-heading) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
    background: var(--theme-surface) !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .05);
}

body.app-shell[data-department="blanks"] .theme-picker:hover,
body.app-shell[data-department="blanks"] .topbar-icon:hover {
    color: var(--blanks-orange) !important;
    border-color: color-mix(in srgb, var(--blanks-orange) 38%, var(--theme-border)) !important;
    background: var(--blanks-orange-soft) !important;
    transform: translateY(-1px);
}

body.app-shell[data-department="blanks"] .notification-badge {
    color: #fff !important;
    border-color: var(--theme-surface) !important;
    background: var(--blanks-orange) !important;
}

body.app-shell[data-department="blanks"] .topbar-active-users {
    color: var(--blanks-orange) !important;
    border: 1px solid color-mix(in srgb, var(--blanks-orange) 24%, var(--theme-border)) !important;
    background: var(--blanks-orange-soft) !important;
}

body.app-shell[data-department="blanks"] .topbar-user {
    min-height: 44px;
    gap: 10px !important;
    padding: 4px 6px 4px 12px;
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    background: var(--theme-surface);
    box-shadow: 0 7px 18px rgba(15, 23, 42, .05);
}

body.app-shell[data-department="blanks"] .topbar-user-text strong {
    color: var(--theme-heading) !important;
}

body.app-shell[data-department="blanks"] .topbar-avatar {
    color: #fff !important;
    background: linear-gradient(180deg, var(--blanks-orange), var(--blanks-orange-dark)) !important;
    box-shadow: 0 8px 18px rgba(var(--blanks-orange-rgb), .24) !important;
}

body.app-shell[data-department="blanks"] .department-views-nav {
    margin-top: 12px;
    border-color: color-mix(in srgb, var(--blanks-orange) 16%, var(--theme-border)) !important;
    background: color-mix(in srgb, var(--theme-surface) 96%, var(--blanks-orange-soft)) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

body.app-shell[data-department="blanks"] .department-views-nav-label {
    color: var(--theme-heading) !important;
    border-color: color-mix(in srgb, var(--blanks-orange) 18%, var(--theme-border)) !important;
}

body.app-shell[data-department="blanks"] .department-views-nav-label i {
    color: var(--blanks-orange) !important;
}

body.app-shell[data-department="blanks"] .department-views-nav-link {
    color: var(--theme-text) !important;
    border-radius: 11px !important;
}

body.app-shell[data-department="blanks"] .department-views-nav-link:hover {
    color: var(--blanks-orange) !important;
    border-color: color-mix(in srgb, var(--blanks-orange) 34%, var(--theme-border)) !important;
    background: var(--blanks-orange-soft) !important;
}

body.app-shell[data-department="blanks"] .department-views-nav-link.active,
body.app-shell[data-department="blanks"] .department-views-nav-link.active:hover,
body.app-shell[data-department="blanks"] .department-views-nav-link.active:focus,
body.app-shell[data-department="blanks"] .department-views-nav-link.active:visited {
    color: #fff !important;
    border-color: var(--blanks-orange) !important;
    background: linear-gradient(180deg, var(--blanks-orange), var(--blanks-orange-dark)) !important;
    box-shadow: 0 9px 20px rgba(var(--blanks-orange-rgb), .24) !important;
}

body.app-shell[data-department="blanks"] .app-statusbar {
    min-height: 50px;
    color: var(--theme-muted) !important;
    border-top: 1px solid color-mix(in srgb, var(--blanks-orange) 14%, var(--theme-border)) !important;
    background: color-mix(in srgb, var(--theme-surface) 96%, var(--blanks-orange-soft)) !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .04) !important;
}

body.app-shell[data-department="blanks"] .app-statusbar strong,
body.app-shell[data-department="blanks"] .app-statusbar a {
    color: var(--blanks-orange) !important;
}

html[data-theme="dark"] body.app-shell[data-department="blanks"] .app-topbar,
html[data-theme="dark"] body.app-shell[data-department="blanks"] .department-views-nav,
html[data-theme="dark"] body.app-shell[data-department="blanks"] .app-statusbar {
    background: color-mix(in srgb, var(--theme-surface) 90%, rgba(var(--blanks-orange-rgb), .12)) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22) !important;
}

/* Shipping department: same clean orange system used by Packing/Blanks */
body.app-shell[data-department="shipping"] {
    --shipping-orange: #ff5a00;
    --shipping-orange-rgb: 255, 90, 0;
    --shipping-orange-dark: #e94f00;
    --shipping-orange-soft: #fff1e8;
    --theme-primary: var(--shipping-orange);
    --theme-primary-rgb: var(--shipping-orange-rgb);
    --theme-primary-hover: var(--shipping-orange-dark);
    --theme-accent: var(--shipping-orange);
    --primary-blue: var(--shipping-orange);
    --primary: var(--shipping-orange);
    --primary-rgb: var(--shipping-orange-rgb);
    --primary-dark: var(--shipping-orange-dark);
    --primary-soft: var(--shipping-orange-soft);
    --accent: var(--shipping-orange);
    --dept-color: var(--shipping-orange);
    --dept-color-rgb: var(--shipping-orange-rgb);
    --dept-soft: var(--shipping-orange-soft);
    --ui-primary: var(--shipping-orange);
    --ui-primary-rgb: var(--shipping-orange-rgb);
    --app-primary: var(--shipping-orange);
    --app-primary-dark: var(--shipping-orange-dark);
    --ios-primary: var(--shipping-orange);
    --ios-primary-rgb: var(--shipping-orange-rgb);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--shipping-orange) 8%, transparent), transparent 32%),
        var(--theme-bg);
}

html[data-theme="dark"] body.app-shell[data-department="shipping"] {
    --shipping-orange-soft: rgba(var(--shipping-orange-rgb), .16);
    --primary-soft: rgba(var(--shipping-orange-rgb), .16);
}

body.app-shell[data-department="shipping"] :where(.receive-page, .bol-page, .shipping-locations-page) {
    --blue: var(--shipping-orange) !important;
    --surface: var(--theme-surface) !important;
    --text: var(--theme-text) !important;
    --muted: var(--theme-muted) !important;
    --line: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

body.app-shell[data-department="shipping"] :where(.receive-page, .bol-page, .shipping-locations-page, .shipping-dashboard-shell) {
    width: min(100%, 1680px);
    margin-inline: auto;
}

body.app-shell[data-department="shipping"] :where(
    .shipping-hero,
    .shipping-action-card,
    .shipping-empty-card,
    .receive-header,
    .scanner-panel,
    .result-card,
    .bol-header,
    .bol-summary,
    .bol-content,
    .locations-header,
    .new-location-card,
    .locations-card
) {
    color: var(--theme-text) !important;
    border: 1px solid color-mix(in srgb, var(--shipping-orange) 14%, var(--theme-border)) !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--theme-surface) 96%, var(--shipping-orange-soft)), var(--theme-surface)) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
}

html[data-theme="dark"] body.app-shell[data-department="shipping"] :where(
    .shipping-hero,
    .shipping-action-card,
    .shipping-empty-card,
    .receive-header,
    .scanner-panel,
    .result-card,
    .bol-header,
    .bol-summary,
    .bol-content,
    .locations-header,
    .new-location-card,
    .locations-card
) {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--theme-surface) 92%, rgba(var(--shipping-orange-rgb), .12)), var(--theme-surface)) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .24) !important;
}

body.app-shell[data-department="shipping"] :where(
    .shipping-eyebrow,
    .receive-title span,
    .scanner-copy > span,
    .result-identity > span,
    .bol-title > div > span,
    .locations-title > div > span
) {
    color: var(--shipping-orange) !important;
}

body.app-shell[data-department="shipping"] :where(
    .shipping-hero h1,
    .shipping-action-card strong,
    .shipping-empty-card strong,
    .receive-title h1,
    .scanner-copy h2,
    .result-identity h2,
    .bol-title h1,
    .bol-toolbar h2,
    .locations-title h1,
    .new-location-card h2,
    .locations-card h2
) {
    color: var(--theme-heading) !important;
}

body.app-shell[data-department="shipping"] :where(
    .shipping-hero p,
    .shipping-action-card small,
    .shipping-empty-card small,
    .receive-title p,
    .scanner-copy p,
    .result-identity p,
    .bol-title p,
    .bol-toolbar p,
    .bol-legend,
    .locations-title p,
    .new-location-card p,
    .locations-card p
) {
    color: var(--theme-muted) !important;
}

body.app-shell[data-department="shipping"] :where(
    .shipping-soft-btn,
    .icon-button,
    .locations-link,
    .secondary-button,
    .bol-back,
    .location-icon-button
) {
    color: var(--theme-heading) !important;
    border: 1px solid var(--theme-border) !important;
    background: var(--theme-surface) !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .05) !important;
}

body.app-shell[data-department="shipping"] :where(
    .shipping-soft-btn,
    .icon-button,
    .locations-link,
    .secondary-button,
    .bol-back,
    .location-icon-button
):hover {
    color: var(--shipping-orange) !important;
    border-color: color-mix(in srgb, var(--shipping-orange) 38%, var(--theme-border)) !important;
    background: var(--shipping-orange-soft) !important;
}

body.app-shell[data-department="shipping"] :where(
    .shipping-action-card > span,
    .shipping-empty-card > i,
    .scanner-icon,
    .new-location-card > div > span,
    .location-marker
) {
    color: var(--shipping-orange) !important;
    background: var(--shipping-orange-soft) !important;
    border: 1px solid color-mix(in srgb, var(--shipping-orange) 22%, var(--theme-border)) !important;
}

body.app-shell[data-department="shipping"] .shipping-action-card > .bi-arrow-right-short {
    color: var(--shipping-orange) !important;
}

body.app-shell[data-department="shipping"] :where(.shipping-action-card:hover, .locations-grid article:hover) {
    border-color: color-mix(in srgb, var(--shipping-orange) 42%, var(--theme-border)) !important;
    box-shadow: 0 18px 38px rgba(var(--shipping-orange-rgb), .12) !important;
    transform: translateY(-1px);
}

body.app-shell[data-department="shipping"] :where(
    .scan-form > div,
    .bol-search,
    .edit-field input,
    .field-block select,
    .new-location-card input,
    .locations-grid article
) {
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    background: var(--theme-surface) !important;
}

body.app-shell[data-department="shipping"] :where(
    .scan-form input,
    .bol-search input,
    .edit-field input,
    .field-block select,
    .new-location-card input
) {
    color: var(--theme-text) !important;
}

body.app-shell[data-department="shipping"] :where(
    .scan-form > div:focus-within,
    .bol-search:focus-within,
    .edit-field input:focus,
    .field-block select:focus,
    .new-location-card input:focus
) {
    border-color: var(--shipping-orange) !important;
    outline: 3px solid rgba(var(--shipping-orange-rgb), .14) !important;
    box-shadow: none !important;
}

body.app-shell[data-department="shipping"] :where(
    .scan-form button,
    .confirm-button,
    .bol-search button,
    .save-bol,
    .new-location-card button
) {
    color: #fff !important;
    border: 0 !important;
    background: linear-gradient(180deg, var(--shipping-orange), var(--shipping-orange-dark)) !important;
    box-shadow: 0 10px 20px rgba(var(--shipping-orange-rgb), .22) !important;
}

body.app-shell[data-department="shipping"] :where(
    .scan-form button,
    .confirm-button,
    .bol-search button,
    .save-bol,
    .new-location-card button
):disabled {
    box-shadow: none !important;
}

body.app-shell[data-department="shipping"] .result-card {
    border-top: 4px solid var(--shipping-orange) !important;
}

body.app-shell[data-department="shipping"] .qr-box {
    border-color: var(--theme-border) !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .04);
}

body.app-shell[data-department="shipping"] .pallet-information > div {
    border: 1px solid color-mix(in srgb, var(--shipping-orange) 12%, var(--theme-border)) !important;
    background: color-mix(in srgb, var(--shipping-orange) 5%, var(--theme-surface)) !important;
}

body.app-shell[data-department="shipping"] .photo-picker {
    border-color: color-mix(in srgb, var(--shipping-orange) 42%, var(--theme-border)) !important;
    background: color-mix(in srgb, var(--shipping-orange) 4%, var(--theme-surface)) !important;
}

body.app-shell[data-department="shipping"] .photo-picker > span i,
body.app-shell[data-department="shipping"] .scan-form i,
body.app-shell[data-department="shipping"] .field-block a {
    color: var(--shipping-orange) !important;
}

body.app-shell[data-department="shipping"] .bol-summary .blue {
    color: var(--shipping-orange) !important;
    background: var(--shipping-orange-soft) !important;
}

body.app-shell[data-department="shipping"] .bol-summary .green {
    color: var(--theme-success) !important;
    background: color-mix(in srgb, var(--theme-success) 12%, var(--theme-surface)) !important;
}

body.app-shell[data-department="shipping"] .bol-summary .red {
    color: var(--theme-danger) !important;
    background: color-mix(in srgb, var(--theme-danger) 12%, var(--theme-surface)) !important;
}

body.app-shell[data-department="shipping"] .bol-summary .violet {
    color: #7c3aed !important;
    background: color-mix(in srgb, #7c3aed 12%, var(--theme-surface)) !important;
}

body.app-shell[data-department="shipping"] .bol-table-head {
    color: var(--theme-muted) !important;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    background: var(--theme-surface-soft);
}

body.app-shell[data-department="shipping"] .bol-record {
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    background: var(--theme-surface) !important;
}

body.app-shell[data-department="shipping"] .bol-record.is-pending {
    border-color: color-mix(in srgb, var(--theme-danger) 42%, var(--theme-border)) !important;
    background: color-mix(in srgb, var(--theme-danger) 8%, var(--theme-surface)) !important;
}

body.app-shell[data-department="shipping"] .bol-record.is-complete {
    border-color: color-mix(in srgb, var(--theme-success) 25%, var(--theme-border)) !important;
    background: color-mix(in srgb, var(--theme-success) 4%, var(--theme-surface)) !important;
}

body.app-shell[data-department="shipping"] :where(.read-field strong, .read-field small) {
    color: inherit;
}

body.app-shell[data-department="shipping"] .locations-grid article {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.app-shell[data-department="shipping"] .location-total {
    color: var(--shipping-orange) !important;
    border: 1px solid color-mix(in srgb, var(--shipping-orange) 22%, var(--theme-border)) !important;
    background: var(--shipping-orange-soft) !important;
}

body.app-shell[data-department="shipping"] .location-alert.success {
    color: var(--theme-success) !important;
    background: color-mix(in srgb, var(--theme-success) 12%, var(--theme-surface)) !important;
}

body.app-shell[data-department="shipping"] .location-alert.error {
    color: var(--theme-danger) !important;
    background: color-mix(in srgb, var(--theme-danger) 12%, var(--theme-surface)) !important;
}

/* Shipping layout frame: topbar, department nav, user area and statusbar */
body.app-shell[data-department="shipping"] .app-topbar {
    min-height: 70px;
    padding: 10px clamp(16px, 2vw, 28px) !important;
    color: var(--theme-heading) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--shipping-orange) 16%, var(--theme-border)) !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--theme-surface) 96%, var(--shipping-orange-soft)), var(--theme-surface)) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
}

body.app-shell[data-department="shipping"] .topbar-brand {
    gap: 12px !important;
    color: var(--theme-heading) !important;
    font-weight: 900 !important;
    letter-spacing: -.035em;
}

body.app-shell[data-department="shipping"] .topbar-brand img {
    width: 38px !important;
    height: 38px !important;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--shipping-orange) 30%, var(--theme-border));
    border-radius: 12px;
    background: var(--shipping-orange-soft);
}

body.app-shell[data-department="shipping"] .topbar-search {
    height: 44px;
    max-width: 340px;
    color: var(--theme-muted) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
    background: var(--theme-surface-soft) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

body.app-shell[data-department="shipping"] .topbar-search i {
    color: var(--shipping-orange) !important;
}

body.app-shell[data-department="shipping"] .topbar-search input {
    color: var(--theme-text) !important;
}

body.app-shell[data-department="shipping"] .theme-picker,
body.app-shell[data-department="shipping"] .topbar-icon {
    height: 42px;
    min-width: 42px;
    color: var(--theme-heading) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
    background: var(--theme-surface) !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .05);
}

body.app-shell[data-department="shipping"] .theme-picker:hover,
body.app-shell[data-department="shipping"] .topbar-icon:hover {
    color: var(--shipping-orange) !important;
    border-color: color-mix(in srgb, var(--shipping-orange) 38%, var(--theme-border)) !important;
    background: var(--shipping-orange-soft) !important;
    transform: translateY(-1px);
}

body.app-shell[data-department="shipping"] .notification-badge {
    color: #fff !important;
    border-color: var(--theme-surface) !important;
    background: var(--shipping-orange) !important;
}

body.app-shell[data-department="shipping"] .topbar-active-users {
    color: var(--shipping-orange) !important;
    border: 1px solid color-mix(in srgb, var(--shipping-orange) 24%, var(--theme-border)) !important;
    background: var(--shipping-orange-soft) !important;
}

body.app-shell[data-department="shipping"] .topbar-user {
    min-height: 44px;
    gap: 10px !important;
    padding: 4px 6px 4px 12px;
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    background: var(--theme-surface);
    box-shadow: 0 7px 18px rgba(15, 23, 42, .05);
}

body.app-shell[data-department="shipping"] .topbar-user-text strong {
    color: var(--theme-heading) !important;
}

body.app-shell[data-department="shipping"] .topbar-avatar {
    color: #fff !important;
    background: linear-gradient(180deg, var(--shipping-orange), var(--shipping-orange-dark)) !important;
    box-shadow: 0 8px 18px rgba(var(--shipping-orange-rgb), .24) !important;
}

body.app-shell[data-department="shipping"] .department-views-nav {
    margin-top: 12px;
    border-color: color-mix(in srgb, var(--shipping-orange) 16%, var(--theme-border)) !important;
    background: color-mix(in srgb, var(--theme-surface) 96%, var(--shipping-orange-soft)) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

body.app-shell[data-department="shipping"] .department-views-nav-label {
    color: var(--theme-heading) !important;
    border-color: color-mix(in srgb, var(--shipping-orange) 18%, var(--theme-border)) !important;
}

body.app-shell[data-department="shipping"] .department-views-nav-label i {
    color: var(--shipping-orange) !important;
}

body.app-shell[data-department="shipping"] .department-views-nav-link {
    color: var(--theme-text) !important;
    border-radius: 11px !important;
}

body.app-shell[data-department="shipping"] .department-views-nav-link:hover {
    color: var(--shipping-orange) !important;
    border-color: color-mix(in srgb, var(--shipping-orange) 34%, var(--theme-border)) !important;
    background: var(--shipping-orange-soft) !important;
}

body.app-shell[data-department="shipping"] .department-views-nav-link.active,
body.app-shell[data-department="shipping"] .department-views-nav-link.active:hover,
body.app-shell[data-department="shipping"] .department-views-nav-link.active:focus,
body.app-shell[data-department="shipping"] .department-views-nav-link.active:visited {
    color: #fff !important;
    border-color: var(--shipping-orange) !important;
    background: linear-gradient(180deg, var(--shipping-orange), var(--shipping-orange-dark)) !important;
    box-shadow: 0 9px 20px rgba(var(--shipping-orange-rgb), .24) !important;
}

body.app-shell[data-department="shipping"] .app-statusbar {
    min-height: 50px;
    color: var(--theme-muted) !important;
    border-top: 1px solid color-mix(in srgb, var(--shipping-orange) 14%, var(--theme-border)) !important;
    background: color-mix(in srgb, var(--theme-surface) 96%, var(--shipping-orange-soft)) !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .04) !important;
}

body.app-shell[data-department="shipping"] .app-statusbar strong,
body.app-shell[data-department="shipping"] .app-statusbar a {
    color: var(--shipping-orange) !important;
}

html[data-theme="dark"] body.app-shell[data-department="shipping"] .app-topbar,
html[data-theme="dark"] body.app-shell[data-department="shipping"] .department-views-nav,
html[data-theme="dark"] body.app-shell[data-department="shipping"] .app-statusbar {
    background: color-mix(in srgb, var(--theme-surface) 90%, rgba(var(--shipping-orange-rgb), .12)) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22) !important;
}

@media (max-width: 900px) {
    body.app-shell[data-department="shipping"] .scanner-panel {
        grid-template-columns: 1fr !important;
    }

    body.app-shell[data-department="shipping"] .result-heading,
    body.app-shell[data-department="shipping"] .receive-grid {
        grid-template-columns: 1fr !important;
    }

    body.app-shell[data-department="shipping"] .pallet-information,
    body.app-shell[data-department="shipping"] .bol-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Production department: standardized frame and surfaces */
body.app-shell[data-department="production"] {
    --production-blue: #1f63f3;
    --production-blue-rgb: 31, 99, 243;
    --production-blue-dark: #174ed0;
    --production-blue-soft: #eaf1ff;
    --theme-primary: var(--production-blue);
    --theme-primary-rgb: var(--production-blue-rgb);
    --theme-primary-hover: var(--production-blue-dark);
    --theme-accent: var(--production-blue);
    --primary-blue: var(--production-blue);
    --primary: var(--production-blue);
    --primary-rgb: var(--production-blue-rgb);
    --primary-dark: var(--production-blue-dark);
    --primary-soft: var(--production-blue-soft);
    --accent: var(--production-blue);
    --dept-color: var(--production-blue);
    --dept-color-rgb: var(--production-blue-rgb);
    --dept-soft: var(--production-blue-soft);
    --ui-primary: var(--production-blue);
    --ui-primary-rgb: var(--production-blue-rgb);
    --app-primary: var(--production-blue);
    --app-primary-dark: var(--production-blue-dark);
    --ios-primary: var(--production-blue);
    --ios-primary-rgb: var(--production-blue-rgb);
}

html[data-theme="dark"] body.app-shell[data-department="production"] {
    --production-blue-soft: rgba(var(--production-blue-rgb), .16);
    --primary-soft: rgba(var(--production-blue-rgb), .16);
}

body.app-shell[data-department="production"] .app-topbar {
    min-height: 70px;
    padding: 10px clamp(16px, 2vw, 28px) !important;
    color: var(--theme-heading) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--production-blue) 16%, var(--theme-border)) !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--theme-surface) 96%, var(--production-blue-soft)), var(--theme-surface)) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
}

body.app-shell[data-department="production"] .topbar-brand {
    gap: 12px !important;
    color: var(--theme-heading) !important;
    font-weight: 900 !important;
    letter-spacing: -.035em;
}

body.app-shell[data-department="production"] .topbar-brand img {
    width: 38px !important;
    height: 38px !important;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--production-blue) 30%, var(--theme-border));
    border-radius: 12px;
    background: var(--production-blue-soft);
}

body.app-shell[data-department="production"] .topbar-search {
    height: 44px;
    max-width: 340px;
    color: var(--theme-muted) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
    background: var(--theme-surface-soft) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

body.app-shell[data-department="production"] .topbar-search i {
    color: var(--production-blue) !important;
}

body.app-shell[data-department="production"] .topbar-search input {
    color: var(--theme-text) !important;
}

body.app-shell[data-department="production"] .theme-picker,
body.app-shell[data-department="production"] .topbar-icon {
    height: 42px;
    min-width: 42px;
    color: var(--theme-heading) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
    background: var(--theme-surface) !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .05);
}

body.app-shell[data-department="production"] .theme-picker:hover,
body.app-shell[data-department="production"] .topbar-icon:hover {
    color: var(--production-blue) !important;
    border-color: color-mix(in srgb, var(--production-blue) 38%, var(--theme-border)) !important;
    background: var(--production-blue-soft) !important;
    transform: translateY(-1px);
}

body.app-shell[data-department="production"] .notification-badge {
    color: #fff !important;
    border-color: var(--theme-surface) !important;
    background: var(--production-blue) !important;
}

body.app-shell[data-department="production"] .topbar-active-users {
    color: var(--production-blue) !important;
    border: 1px solid color-mix(in srgb, var(--production-blue) 24%, var(--theme-border)) !important;
    background: var(--production-blue-soft) !important;
}

body.app-shell[data-department="production"] .topbar-user {
    min-height: 44px;
    gap: 10px !important;
    padding: 4px 6px 4px 12px;
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    background: var(--theme-surface);
    box-shadow: 0 7px 18px rgba(15, 23, 42, .05);
}

body.app-shell[data-department="production"] .topbar-user-text strong {
    color: var(--theme-heading) !important;
}

body.app-shell[data-department="production"] .topbar-avatar {
    color: #fff !important;
    background: linear-gradient(180deg, var(--production-blue), var(--production-blue-dark)) !important;
    box-shadow: 0 8px 18px rgba(var(--production-blue-rgb), .24) !important;
}

body.app-shell[data-department="production"] .department-views-nav {
    margin-top: 12px;
    border-color: color-mix(in srgb, var(--production-blue) 16%, var(--theme-border)) !important;
    background: color-mix(in srgb, var(--theme-surface) 96%, var(--production-blue-soft)) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

body.app-shell[data-department="production"] .department-views-nav-label {
    color: var(--theme-heading) !important;
    border-color: color-mix(in srgb, var(--production-blue) 18%, var(--theme-border)) !important;
}

body.app-shell[data-department="production"] .department-views-nav-label i {
    color: var(--production-blue) !important;
}

body.app-shell[data-department="production"] .department-views-nav-link {
    color: var(--theme-text) !important;
    border-radius: 11px !important;
}

body.app-shell[data-department="production"] .department-views-nav-link:hover {
    color: var(--production-blue) !important;
    border-color: color-mix(in srgb, var(--production-blue) 34%, var(--theme-border)) !important;
    background: var(--production-blue-soft) !important;
}

body.app-shell[data-department="production"] .department-views-nav-link.active,
body.app-shell[data-department="production"] .department-views-nav-link.active:hover,
body.app-shell[data-department="production"] .department-views-nav-link.active:focus,
body.app-shell[data-department="production"] .department-views-nav-link.active:visited {
    color: #fff !important;
    border-color: var(--production-blue) !important;
    background: linear-gradient(180deg, var(--production-blue), var(--production-blue-dark)) !important;
    box-shadow: 0 9px 20px rgba(var(--production-blue-rgb), .24) !important;
}

body.app-shell[data-department="production"] .app-statusbar {
    min-height: 50px;
    color: var(--theme-muted) !important;
    border-top: 1px solid color-mix(in srgb, var(--production-blue) 14%, var(--theme-border)) !important;
    background: color-mix(in srgb, var(--theme-surface) 96%, var(--production-blue-soft)) !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .04) !important;
}

body.app-shell[data-department="production"] .app-statusbar strong,
body.app-shell[data-department="production"] .app-statusbar a {
    color: var(--production-blue) !important;
}

html[data-theme="dark"] body.app-shell[data-department="production"] .app-topbar,
html[data-theme="dark"] body.app-shell[data-department="production"] .department-views-nav,
html[data-theme="dark"] body.app-shell[data-department="production"] .app-statusbar {
    background: color-mix(in srgb, var(--theme-surface) 90%, rgba(var(--production-blue-rgb), .12)) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22) !important;
}