/**
 * cute-admin — soft UI (neumorphism) theme for Bootstrap 4/5 + AdminLTE panels
 *
 * SweetFactory ERP: loaded last by every panel layout (admin, factory, outlet,
 * outlets). Sections 1–12 are the stock theme; section 13 adapts it to this
 * panel — the shell bar, the --sap-* / page token bridge, the page-local
 * component classes, and the control geometry the views were laid out against.
 *
 * Surfaces are lit from the top-left: panels are raised with a dark shadow
 * below-right and a light one above-left; pressed / active / input states sink
 * into the surface instead. Borders survive only as table and list dividers.
 *
 * Load this LAST, after bootstrap / adminlte / plugin CSS. Everything reads the
 * --ca-* tokens below; regenerate them for other colours with
 * scripts/derive_palette.py (defaults: white surface, blue primary, green secondary).
 *
 * Dark mode: set <html data-theme="dark">. Light is the default, with or
 * without the attribute.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

/* Brand — scripts/derive_palette.py --primary/--secondary */
:root {
    --ca-primary: #1d4ed8;
    --ca-primary-hover: #1942b8;
    --ca-primary-active: #143797;
    --ca-primary-rgb: 29,78,216;
    --ca-primary-contrast: #ffffff;
    --ca-secondary: #239447;
    --ca-secondary-hover: #1e7e3c;
    --ca-secondary-active: #186832;
    --ca-secondary-rgb: 35,148,71;
    --ca-secondary-contrast: #ffffff;

    --ca-font-body:    'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ca-font-display: 'Poppins', 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --ca-font-mono:    'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Surface — scripts/derive_palette.py --surface '#e3e8ef' ("Cloud": a cool,
   lightly blue-tinted grey). Soft UI needs a tinted surface: on pure white the
   highlight shadow is invisible and every raised panel collapses into the page.
   Declared on html[data-theme] as well as :root: that selector outranks a page's
   own `:root { ... }` token block regardless of source order, which is how one
   stylesheet re-themes pages that ship their own colours (see SKILL.md, "Page
   token blocks"). */
:root,
html[data-theme="light"] {
    --ca-base: #e3e8ef;
    --ca-shade-dark: #c7cfdb;
    --ca-shade-light: #f7fafd;
    --ca-surface-2: #dae0e8;
    --ca-border: #cad2dd;
    --ca-border-light: #d4dbe5;
    --ca-text: #38404c;
    --ca-text-2: #5e6977;
    --ca-text-3: #7c8899;
    --ca-float-tint: rgba(56,64,76,.18);
    --ca-primary-text: #1d4ed8;
    --ca-secondary-text: #239447;

    /* Status colours are semantic, so they don't follow the surface. */
    --ca-success:    #3f7d2e;
    --ca-success-bg: rgba(95,143,74,.14);
    --ca-warning:    #b86e1c;
    --ca-warning-bg: rgba(232,165,82,.18);
    --ca-error:      #c0503f;
    --ca-error-bg:   rgba(192,80,63,.12);
}

html[data-theme="dark"] {
    --ca-base: #27292e;
    --ca-shade-dark: #1b1d20;
    --ca-shade-light: #32363b;
    --ca-surface-2: #222428;
    --ca-border: #33383f;
    --ca-border-light: #2d3137;
    --ca-text: #dbe4f0;
    --ca-text-2: #99a6b8;
    --ca-text-3: #727d8d;
    --ca-float-tint: rgba(0,0,0,.45);
    --ca-primary-text: #6c8ce6;
    --ca-secondary-text: #44a463;

    --ca-success:    #93c47d;
    --ca-success-bg: rgba(147,196,125,.14);
    --ca-warning:    #e8a552;
    --ca-warning-bg: rgba(232,165,82,.14);
    --ca-error:      #e5806e;
    --ca-error-bg:   rgba(229,128,110,.14);
}

/* Derived — resolved against whichever theme block applies. */
:root,
html[data-theme] {
    --ca-bg:       var(--ca-base);
    --ca-surface:  var(--ca-base);

    --ca-raised:    8px 8px 16px var(--ca-shade-dark), -8px -8px 16px var(--ca-shade-light);
    --ca-raised-sm: 5px 5px 11px var(--ca-shade-dark), -5px -5px 11px var(--ca-shade-light);
    --ca-raised-xs: 3px 3px 7px var(--ca-shade-dark), -3px -3px 7px var(--ca-shade-light);
    --ca-inset:     inset 6px 6px 12px var(--ca-shade-dark), inset -6px -6px 12px var(--ca-shade-light);
    --ca-inset-sm:  inset 4px 4px 8px var(--ca-shade-dark), inset -4px -4px 8px var(--ca-shade-light);
    --ca-inset-xs:  inset 2px 2px 5px var(--ca-shade-dark), inset -2px -2px 5px var(--ca-shade-light);
    /* Overlays (menus, modals) float above the page rather than out of it. */
    --ca-float:     0 18px 40px var(--ca-float-tint), 0 2px 8px var(--ca-float-tint);
    /* Filled accent buttons: outer lift plus a soft inner bevel. */
    --ca-bevel:         inset 2px 2px 4px rgba(255,255,255,.28), inset -2px -2px 5px rgba(0,0,0,.16);
    --ca-bevel-pressed: inset 3px 3px 7px rgba(0,0,0,.28), inset -2px -2px 5px rgba(255,255,255,.18);

    --ca-primary-soft:   rgba(var(--ca-primary-rgb), .10);
    --ca-secondary-soft: rgba(var(--ca-secondary-rgb), .12);
    --ca-info:    var(--ca-secondary);
    --ca-info-bg: var(--ca-secondary-soft);

    --ca-radius:    12px;
    --ca-radius-md: 16px;
    --ca-radius-lg: 20px;

    --ca-sidebar-width:      272px;
    --ca-sidebar-mini-width: 96px;
    --ca-topbar-height:      64px;
    --ca-gutter:             16px;

    --ca-transition: all .18s ease;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body, input, textarea, select, button, label, p, span, div, a, li, td, th {
    font-family: var(--ca-font-body) !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ca-font-display) !important;
    color: var(--ca-text);
    font-weight: 600;
    letter-spacing: -0.01em;
}
body {
    background-color: var(--ca-bg) !important;
    color: var(--ca-text) !important;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--ca-primary-text); text-decoration: none; }
a:hover { color: var(--ca-primary-text); text-decoration: underline; }
hr { border-color: var(--ca-border-light) !important; }
::selection { background: rgba(var(--ca-primary-rgb), .22); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ca-border); border-radius: 4px; border: 2px solid var(--ca-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ca-text-3); }

/* ==========================================================================
   3. AdminLTE layout — top bar spans the page, the sidebar floats as a raised
      panel inset from the edges. Skip this section for other layouts and
      apply the same tokens to their shell (references/frameworks.md).
   ========================================================================== */
.wrapper, .content-wrapper { background-color: var(--ca-bg) !important; }

.main-header.navbar {
    background-color: var(--ca-bg) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    height: var(--ca-topbar-height) !important;
    min-height: var(--ca-topbar-height) !important;
    padding: 0 28px 0 var(--ca-gutter) !important;
    position: fixed !important;
    top: 0; left: 0; right: 0;
    margin-left: 0 !important; /* AdminLTE offsets it by the sidebar width */
    z-index: 1040 !important;
    display: flex !important;
    align-items: center !important;
}
.main-header .navbar-nav { gap: 12px; align-items: center; }
.main-header .navbar-nav > .nav-item > .nav-link {
    height: 40px;
    min-width: 40px;
    padding: 0 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 13px;
    background: var(--ca-surface);
    box-shadow: var(--ca-raised-xs);
    color: var(--ca-text-2) !important;
    transition: var(--ca-transition);
}
.main-header .navbar-nav > .nav-item > .nav-link:hover { color: var(--ca-primary-text) !important; }
.main-header .navbar-nav > .nav-item > .nav-link:active,
.main-header .navbar-nav > .nav-item.show > .nav-link { box-shadow: var(--ca-inset-xs); color: var(--ca-primary-text) !important; }
.main-header .navbar-badge {
    top: -4px; right: -4px;
    border-radius: 999px;
    box-shadow: 0 0 0 3px var(--ca-bg);
}

.main-sidebar {
    background-color: var(--ca-surface) !important;
    border-right: none !important;
    border-radius: var(--ca-radius-lg);
    box-shadow: var(--ca-raised) !important;
    width: calc(var(--ca-sidebar-width) - 2 * var(--ca-gutter)) !important;
    position: fixed !important;
    top: calc(var(--ca-topbar-height) + 4px) !important;
    left: var(--ca-gutter) !important;
    bottom: var(--ca-gutter) !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: 1035 !important;
    overflow: hidden;
}
.main-sidebar.elevation-4 { box-shadow: var(--ca-raised) !important; }
.main-sidebar .brand-link { display: none !important; } /* brand lives in the top bar */
/* The panel has a definite height (top/bottom), so the menu scrolls inside it.
   AdminLTE can hand .sidebar to OverlayScrollbars, whose viewport is absolutely
   positioned — without a real height here the menu renders empty. */
.main-sidebar .sidebar {
    height: 100% !important;
    padding: 0 0 12px !important;
    overflow-y: auto;
    overflow-x: hidden;
}
.main-sidebar .sidebar::-webkit-scrollbar { width: 4px; }

.content-wrapper {
    margin-left: var(--ca-sidebar-width) !important;
    margin-top: var(--ca-topbar-height) !important;
    padding: 20px 28px 28px 12px !important;
    min-height: calc(100vh - var(--ca-topbar-height) - 44px) !important;
}
.main-footer {
    margin-left: var(--ca-sidebar-width) !important;
    background-color: transparent !important;
    border-top: none !important;
    color: var(--ca-text-3) !important;
    font-size: 12px !important;
    padding: 10px 28px 10px 12px !important;
}
.wrapper > .control-sidebar { display: none !important; }

/* Sidebar user panel and menu */
.sidebar .user-panel {
    padding: 12px;
    margin: 12px 12px 4px;
    border-bottom: none;
    border-radius: var(--ca-radius-md);
    box-shadow: var(--ca-inset-sm);
}
.sidebar .user-panel .image img {
    border-radius: 12px;
    box-shadow: var(--ca-raised-xs);
    object-fit: cover;
}
.sidebar .user-panel .info a {
    font-family: var(--ca-font-display) !important;
    color: var(--ca-text) !important;
    font-weight: 600;
}
.nav-sidebar .nav-header {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ca-text-3) !important;
    padding: 18px 14px 6px !important;
}
.nav-sidebar > .nav-item { margin: 4px 12px; position: relative; }
.nav-sidebar .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    width: auto !important;
    border-radius: 14px !important;
    color: var(--ca-text-2) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    transition: var(--ca-transition) !important;
    white-space: nowrap;
    overflow: hidden;
}
.nav-sidebar .nav-link:hover {
    background-color: transparent !important;
    color: var(--ca-text) !important;
    box-shadow: var(--ca-raised-xs);
}
/* Active = pressed into the panel, in the accent colour. */
.nav-sidebar .nav-link.active,
.nav-sidebar .nav-link.active:hover,
.nav-sidebar .menu-open > .nav-link.active {
    background-color: transparent !important;
    color: var(--ca-primary-text) !important;
    font-weight: 700 !important;
    box-shadow: var(--ca-inset-sm) !important;
}
.nav-sidebar .nav-icon {
    width: 18px !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--ca-text-3) !important;
    flex-shrink: 0 !important;
}
.nav-sidebar .nav-link:hover .nav-icon { color: var(--ca-text-2) !important; }
.nav-sidebar .nav-link.active .nav-icon { color: var(--ca-primary-text) !important; }
.nav-sidebar .nav-link > p { margin: 0 !important; display: flex; align-items: center; flex: 1; }
.nav-sidebar .nav-link > p .right { margin-left: auto !important; position: static !important; font-size: 10px !important; }
.nav-treeview { padding: 6px 0 4px 18px !important; }
.nav-treeview > .nav-item { margin: 3px 0; }
.nav-treeview .nav-link { font-size: 12.5px !important; padding: 7px 12px !important; border-radius: var(--ca-radius) !important; }
.nav-treeview .nav-link.active { box-shadow: var(--ca-inset-xs) !important; }

/* Content header */
.content-header { padding: 4px 4px 18px !important; background: transparent !important; }
.content-header h1 { font-size: 22px !important; font-weight: 700 !important; margin: 0 !important; }
.breadcrumb { background: transparent !important; padding: 0 !important; margin: 0 !important; font-size: 12px !important; }
.breadcrumb-item a { color: var(--ca-primary-text); font-weight: 600; }
.breadcrumb-item.active { color: var(--ca-text-2); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ca-text-3); content: "/"; }

/* ==========================================================================
   4. Cards & stat boxes
   ========================================================================== */
.card {
    background-color: var(--ca-surface) !important;
    border: none !important;
    border-radius: var(--ca-radius-lg) !important;
    box-shadow: var(--ca-raised) !important;
    margin-bottom: 28px !important;
}
.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--ca-border-light) !important;
    border-radius: var(--ca-radius-lg) var(--ca-radius-lg) 0 0 !important;
    padding: 16px 22px !important;
}
.card-title { font-family: var(--ca-font-display) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--ca-text) !important; margin: 0 !important; }
.card-body { padding: 22px !important; }
.card-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--ca-border-light) !important;
    border-radius: 0 0 var(--ca-radius-lg) var(--ca-radius-lg) !important;
    padding: 14px 22px !important;
}
/* AdminLTE colour-outlined cards keep their accent as a top rule. */
.card[class*="card-outline"] { border-top: 3px solid var(--ca-primary) !important; }

.info-box, .small-box {
    background: var(--ca-surface) !important;
    color: var(--ca-text) !important;
    border: none !important;
    border-radius: var(--ca-radius-lg) !important;
    box-shadow: var(--ca-raised) !important;
    margin-bottom: 28px !important;
}
.info-box { padding: 20px !important; gap: 16px; align-items: center; }
.info-box-icon {
    width: 52px !important; height: 52px;
    border-radius: var(--ca-radius-md) !important;
    box-shadow: var(--ca-inset-sm) !important;
    background: transparent !important;
    color: var(--ca-primary-text) !important;
}
.info-box-text { font-size: 12px !important; font-weight: 600 !important; color: var(--ca-text-2) !important; text-transform: uppercase; letter-spacing: .06em; }
.info-box-number,
.small-box h3 { font-family: var(--ca-font-mono) !important; font-weight: 500 !important; color: var(--ca-text) !important; }
.small-box .icon { color: var(--ca-text-3) !important; opacity: .35; }
.small-box .small-box-footer {
    background: transparent !important;
    color: var(--ca-primary-text) !important;
    border-top: 1px solid var(--ca-border-light);
    border-radius: 0 0 var(--ca-radius-lg) var(--ca-radius-lg);
}

/* ==========================================================================
   5. Tables
   ========================================================================== */
.table { color: var(--ca-text) !important; background: transparent !important; }
.table thead th {
    background-color: transparent !important;
    border-top: none !important;
    border-bottom: 1px solid var(--ca-border) !important;
    color: var(--ca-text-2) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    padding: 12px 14px !important;
    white-space: nowrap;
}
.table td {
    padding: 12px 14px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--ca-border-light) !important;
    vertical-align: middle !important;
    background-color: transparent;
}
.table tbody tr:last-child td { border-bottom: none !important; }
.table-hover tbody tr:hover td,
.table tbody tr:hover td { background-color: var(--ca-primary-soft) !important; }
.table-striped tbody tr:nth-of-type(odd) td { background-color: rgba(var(--ca-primary-rgb), .03); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--ca-border) !important; }
.table tfoot th, .table tfoot td { border-top: 1px solid var(--ca-border) !important; }

/* DataTables */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--ca-surface) !important;
    border: none !important;
    box-shadow: var(--ca-inset-xs) !important;
    border-radius: var(--ca-radius) !important;
    color: var(--ca-text) !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { color: var(--ca-text-2) !important; font-size: 12px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: none !important;
    border-radius: 10px !important;
    margin: 0 3px !important;
    background: var(--ca-surface) !important;
    box-shadow: var(--ca-raised-xs) !important;
    color: var(--ca-text-2) !important;
    font-weight: 600 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ca-surface) !important;
    color: var(--ca-primary-text) !important;
    box-shadow: var(--ca-inset-xs) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { box-shadow: none !important; color: var(--ca-text-3) !important; }

/* Pagination */
.pagination { gap: 6px; }
.page-link {
    background: var(--ca-surface) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: var(--ca-raised-xs);
    color: var(--ca-text-2) !important;
    font-weight: 600;
    min-width: 34px;
    text-align: center;
}
.page-link:hover { color: var(--ca-primary-text) !important; }
.page-item.active .page-link { color: var(--ca-primary-text) !important; box-shadow: var(--ca-inset-xs); }
.page-item.disabled .page-link { color: var(--ca-text-3) !important; box-shadow: none; }

/* ==========================================================================
   6. Forms — fields sit pressed into the surface
   ========================================================================== */
label, .form-label, .col-form-label { font-size: 12px; font-weight: 600 !important; color: var(--ca-text-2) !important; }

.form-control, .form-select, .custom-select,
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="date"], input[type="search"], input[type="tel"], input[type="url"],
input[type="month"], input[type="time"], input[type="datetime-local"], textarea, select {
    background-color: var(--ca-surface) !important;
    border: 1px solid transparent !important;
    border-radius: var(--ca-radius) !important;
    box-shadow: var(--ca-inset-xs) !important;
    color: var(--ca-text) !important;
    transition: border-color .18s, box-shadow .18s !important;
}
.form-control:focus, .form-select:focus, .custom-select:focus,
input:focus, textarea:focus, select:focus {
    border-color: rgba(var(--ca-primary-rgb), .45) !important;
    box-shadow: var(--ca-inset-sm) !important;
    outline: none !important;
}
.form-control::placeholder { color: var(--ca-text-3) !important; }
.form-control:disabled, .form-control[readonly],
input:disabled, select:disabled, textarea:disabled {
    background-color: var(--ca-surface-2) !important;
    box-shadow: none !important;
    color: var(--ca-text-2) !important;
}
.is-invalid, .form-control.is-invalid { border-color: rgba(192,80,63,.55) !important; }
.invalid-feedback { color: var(--ca-error) !important; font-weight: 600; }
.input-group-text {
    background: var(--ca-surface-2) !important;
    border: none !important;
    color: var(--ca-text-2) !important;
    border-radius: var(--ca-radius) !important;
}
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* Checkboxes, radios, switches — BS4 custom-control and BS5 form-check */
.custom-control-label::before,
.form-check-input {
    background-color: var(--ca-surface) !important;
    border: none !important;
    box-shadow: var(--ca-inset-xs) !important;
}
.custom-checkbox .custom-control-label::before, .form-check-input[type="checkbox"] { border-radius: 6px !important; }
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
    background-color: var(--ca-primary) !important;
    box-shadow: var(--ca-bevel) !important;
}
.custom-switch .custom-control-label::after { background-color: var(--ca-surface) !important; box-shadow: 1px 1px 3px var(--ca-shade-dark) !important; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ca-primary); }

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap4 .select2-selection {
    background-color: var(--ca-surface) !important;
    border: 1px solid transparent !important;
    border-radius: var(--ca-radius) !important;
    box-shadow: var(--ca-inset-xs) !important;
    min-height: 36px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ca-text) !important; line-height: 36px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px !important; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single { border-color: rgba(var(--ca-primary-rgb), .45) !important; box-shadow: var(--ca-inset-sm) !important; }
.select2-dropdown {
    background: var(--ca-surface) !important;
    border: none !important;
    border-radius: var(--ca-radius-md) !important;
    box-shadow: var(--ca-float) !important;
    padding: 4px;
    overflow: hidden;
}
.select2-results__option { color: var(--ca-text) !important; border-radius: 10px; }
.select2-container--default .select2-results__option--highlighted { background-color: var(--ca-primary-soft) !important; color: var(--ca-primary-text) !important; }
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected { background: transparent !important; color: var(--ca-primary-text) !important; font-weight: 700; box-shadow: var(--ca-inset-xs); }
.select2-search--dropdown .select2-search__field { border: none !important; box-shadow: var(--ca-inset-xs) !important; border-radius: var(--ca-radius) !important; background: var(--ca-surface) !important; }

/* ==========================================================================
   7. Buttons — raised by default, pressed in on :active / .active.
      Filled accents carry a soft bevel. Sizes are Bootstrap's own; only the
      look changes, so no button reflows its layout.
   ========================================================================== */
.btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--ca-font-display) !important;
    font-weight: 600 !important;
    border-color: transparent !important;
    border-radius: var(--ca-radius) !important;
    transition: var(--ca-transition) !important;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid rgba(var(--ca-primary-rgb), .55) !important; outline-offset: 2px; box-shadow: none; }
.btn:disabled, .btn.disabled { opacity: .55 !important; transform: none !important; }

/* Filled */
.btn-primary   { --ca-btn: var(--ca-primary);   --ca-btn-hover: var(--ca-primary-hover);   --ca-btn-active: var(--ca-primary-active);   --ca-btn-text: var(--ca-primary-contrast); }
.btn-secondary-accent,
.btn-info      { --ca-btn: var(--ca-secondary); --ca-btn-hover: var(--ca-secondary-hover); --ca-btn-active: var(--ca-secondary-active); --ca-btn-text: var(--ca-secondary-contrast); }
.btn-success   { --ca-btn: var(--ca-success);   --ca-btn-hover: var(--ca-success);         --ca-btn-active: var(--ca-success);          --ca-btn-text: #fff; }
.btn-danger    { --ca-btn: var(--ca-error);     --ca-btn-hover: var(--ca-error);           --ca-btn-active: var(--ca-error);            --ca-btn-text: #fff; }
.btn-warning   { --ca-btn: var(--ca-warning);   --ca-btn-hover: var(--ca-warning);         --ca-btn-active: var(--ca-warning);          --ca-btn-text: #fff; }
.btn-dark      { --ca-btn: var(--ca-text);      --ca-btn-hover: var(--ca-text);            --ca-btn-active: var(--ca-text);             --ca-btn-text: var(--ca-bg); }
/* Dark mode's status colours are light enough to read as text, so filled
   status buttons switch to dark labels to keep their contrast. */
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn-warning { --ca-btn-text: var(--ca-base); }
.btn-primary, .btn-secondary-accent, .btn-info, .btn-success, .btn-danger, .btn-warning, .btn-dark {
    background-color: var(--ca-btn) !important;
    color: var(--ca-btn-text) !important;
    box-shadow: var(--ca-raised-xs), var(--ca-bevel) !important;
}
.btn-primary:hover, .btn-secondary-accent:hover, .btn-info:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-dark:hover {
    background-color: var(--ca-btn-hover) !important;
    color: var(--ca-btn-text) !important;
    box-shadow: var(--ca-raised-sm), var(--ca-bevel) !important;
}
.btn-success:hover, .btn-danger:hover, .btn-warning:hover { filter: brightness(.94); }
.btn-primary:active, .btn-primary.active, .btn-secondary-accent:active, .btn-info:active,
.btn-success:active, .btn-danger:active, .btn-warning:active, .btn-dark:active {
    background-color: var(--ca-btn-active) !important;
    box-shadow: var(--ca-bevel-pressed) !important;
}

/* Raised surface: secondary, default, light, every outline variant */
.btn-secondary, .btn-default, .btn-light,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger,
.btn-outline-warning, .btn-outline-info, .btn-outline-dark, .btn-outline-light {
    background-color: var(--ca-surface) !important;
    color: var(--ca-text) !important;
    box-shadow: var(--ca-raised-xs) !important;
}
.btn-outline-primary { color: var(--ca-primary-text) !important; }
.btn-outline-success { color: var(--ca-success) !important; }
.btn-outline-danger  { color: var(--ca-error) !important; }
.btn-outline-warning { color: var(--ca-warning) !important; }
.btn-outline-info    { color: var(--ca-secondary-text) !important; }
.btn-secondary:hover, .btn-default:hover, .btn-light:hover,
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover, .btn-outline-danger:hover,
.btn-outline-warning:hover, .btn-outline-info:hover, .btn-outline-dark:hover, .btn-outline-light:hover {
    background-color: var(--ca-surface) !important;
    box-shadow: var(--ca-raised-sm) !important;
}
.btn-secondary:hover, .btn-default:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover { color: var(--ca-primary-text) !important; }
.btn-secondary:active, .btn-secondary.active, .btn-default:active, .btn-default.active, .btn-light:active,
.btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-secondary:active, .btn-outline-secondary.active,
.btn-outline-success:active, .btn-outline-danger:active, .btn-outline-warning:active, .btn-outline-info:active, .btn-outline-dark:active {
    box-shadow: var(--ca-inset-xs) !important;
}
.btn-secondary.active, .btn-default.active, .btn-outline-secondary.active { color: var(--ca-primary-text) !important; }

/* Flat */
.btn-link { background: transparent !important; box-shadow: none !important; color: var(--ca-primary-text) !important; }

/* Helpers: icon-only / ghost buttons, flat until hovered */
.btn-ghost, .btn-icon {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ca-text-2) !important;
    border-radius: 11px !important;
}
.btn-icon { width: 32px; height: 32px; padding: 0 !important; }
.btn-ghost:hover, .btn-icon:hover { background: var(--ca-surface) !important; color: var(--ca-primary-text) !important; box-shadow: var(--ca-raised-xs) !important; }
.btn-ghost:active, .btn-icon:active { box-shadow: var(--ca-inset-xs) !important; }

/* Segmented: grouped buttons become separate raised segments; the chosen one
   is pressed in and takes the accent colour. */
.btn-group, .btn-group-toggle { gap: 8px; }
.btn-group > .btn { border-radius: var(--ca-radius) !important; margin: 0 !important; }
.btn-group > .btn.active,
.btn-group > .btn-check:checked + .btn {
    background-color: var(--ca-surface) !important;
    color: var(--ca-primary-text) !important;
    box-shadow: var(--ca-inset-xs) !important;
}

.btn-sm { border-radius: 10px !important; }
.btn-lg { border-radius: var(--ca-radius-md) !important; }

/* ==========================================================================
   8. Tabs & pills (outside the sidebar) — raised options, pressed active one
   ========================================================================== */
.nav-tabs { border-bottom: none !important; gap: 10px; padding: 4px 2px 8px; flex-wrap: wrap; }
.nav-tabs .nav-link {
    border: none !important;
    border-radius: var(--ca-radius) !important;
    margin: 0 !important;
    padding: 8px 18px;
    background: var(--ca-surface) !important;
    box-shadow: var(--ca-raised-xs);
    color: var(--ca-text-2) !important;
    font-family: var(--ca-font-display) !important;
    font-weight: 600;
    transition: var(--ca-transition);
}
.nav-tabs .nav-link:hover { color: var(--ca-text) !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--ca-primary-text) !important; box-shadow: var(--ca-inset-xs); }
.content-wrapper .nav-pills .nav-link, main .nav-pills .nav-link { border-radius: var(--ca-radius) !important; color: var(--ca-text-2); font-weight: 600; }
.content-wrapper .nav-pills .nav-link.active, main .nav-pills .nav-link.active { background: transparent !important; color: var(--ca-primary-text) !important; box-shadow: var(--ca-inset-xs); }

/* ==========================================================================
   9. Badges — pressed-in pills with coloured text
   ========================================================================== */
.badge { font-weight: 700 !important; letter-spacing: .02em; padding: 4px 10px !important; border-radius: 999px !important; border: none !important; box-shadow: var(--ca-inset-xs); }
.badge-primary, .bg-primary.badge   { background: var(--ca-primary-soft) !important; color: var(--ca-primary-text) !important; }
.badge-info, .bg-info.badge         { background: var(--ca-info-bg) !important;      color: var(--ca-secondary-text) !important; }
.badge-success, .bg-success.badge   { background: var(--ca-success-bg) !important;   color: var(--ca-success) !important; }
.badge-warning, .bg-warning.badge   { background: var(--ca-warning-bg) !important;   color: var(--ca-warning) !important; }
.badge-danger, .bg-danger.badge     { background: var(--ca-error-bg) !important;     color: var(--ca-error) !important; }
.badge-secondary, .badge-light, .bg-secondary.badge, .bg-light.badge { background: transparent !important; color: var(--ca-text-2) !important; }
.badge-dark, .bg-dark.badge         { background: var(--ca-text) !important; color: var(--ca-bg) !important; box-shadow: none; }

/* ==========================================================================
   10. Overlays — modals, dropdowns, toasts, SweetAlert2
   ========================================================================== */
.modal-content {
    background-color: var(--ca-surface) !important;
    color: var(--ca-text);
    border: none !important;
    border-radius: 24px !important;
    box-shadow: var(--ca-float) !important;
}
.modal-header { background: transparent !important; border-bottom: 1px solid var(--ca-border-light) !important; padding: 18px 24px !important; }
.modal-title { font-family: var(--ca-font-display) !important; font-weight: 600 !important; color: var(--ca-text) !important; }
.modal-body { padding: 22px 24px !important; }
.modal-footer { background: transparent !important; border-top: 1px solid var(--ca-border-light) !important; padding: 14px 24px !important; gap: 10px; }
.modal-footer > * { margin: 0 !important; }
.modal-backdrop.show { opacity: .38 !important; }
.close, .btn-close { color: var(--ca-text-2) !important; text-shadow: none !important; opacity: .8 !important; }

.dropdown-menu {
    background: var(--ca-surface) !important;
    border: none !important;
    border-radius: var(--ca-radius-md) !important;
    box-shadow: var(--ca-float) !important;
    padding: 6px !important;
}
.dropdown-item { color: var(--ca-text) !important; border-radius: 10px; padding: 8px 12px !important; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ca-primary-soft) !important; color: var(--ca-primary-text) !important; }
.dropdown-item.active, .dropdown-item:active { background: transparent !important; color: var(--ca-primary-text) !important; box-shadow: var(--ca-inset-xs); }
.dropdown-divider { border-top-color: var(--ca-border-light) !important; margin: 6px 4px !important; }
.dropdown-header { color: var(--ca-text-3) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; }

.alert {
    border: none !important;
    border-radius: var(--ca-radius-md) !important;
    box-shadow: var(--ca-inset-xs);
    font-weight: 600;
}
.alert-success { background: var(--ca-success-bg) !important; color: var(--ca-success) !important; }
.alert-danger  { background: var(--ca-error-bg) !important;   color: var(--ca-error) !important; }
.alert-warning { background: var(--ca-warning-bg) !important; color: var(--ca-warning) !important; }
.alert-info    { background: var(--ca-info-bg) !important;    color: var(--ca-secondary-text) !important; }
.alert-primary { background: var(--ca-primary-soft) !important; color: var(--ca-primary-text) !important; }
/* Bootstrap's alert links are fixed dark shades that vanish on dark mode's tints. */
.alert a, .alert .alert-link { color: inherit !important; font-weight: 800; text-decoration: underline; }

#toast-container > div { border-radius: var(--ca-radius-md) !important; box-shadow: var(--ca-float) !important; opacity: 1 !important; }
.toast-success { background-color: var(--ca-success) !important; }
.toast-error   { background-color: var(--ca-error) !important; }
.toast-warning { background-color: var(--ca-warning) !important; }
.toast-info    { background-color: var(--ca-info) !important; }

.swal2-popup { background: var(--ca-surface) !important; border-radius: 24px !important; box-shadow: var(--ca-float) !important; }
.swal2-title { font-family: var(--ca-font-display) !important; color: var(--ca-text) !important; }
.swal2-html-container { color: var(--ca-text-2) !important; }
.swal2-styled.swal2-confirm { background-color: var(--ca-primary) !important; color: var(--ca-primary-contrast) !important; border-radius: var(--ca-radius) !important; box-shadow: var(--ca-raised-xs), var(--ca-bevel) !important; }
.swal2-styled.swal2-cancel  { background-color: var(--ca-surface) !important; color: var(--ca-text) !important; border-radius: var(--ca-radius) !important; box-shadow: var(--ca-raised-xs) !important; }
.swal2-input, .swal2-textarea, .swal2-select { background: var(--ca-surface) !important; border: none !important; box-shadow: var(--ca-inset-xs) !important; border-radius: var(--ca-radius) !important; color: var(--ca-text) !important; }

/* ==========================================================================
   11. Progress & utilities
   ========================================================================== */
.progress {
    background-color: var(--ca-surface) !important;
    box-shadow: var(--ca-inset-xs);
    border-radius: 999px !important;
    height: 10px !important;
    padding: 2px;
}
.progress-bar { border-radius: 999px !important; }
.bg-primary:not(.badge) { background-color: var(--ca-primary) !important; }
.bg-success:not(.badge) { background-color: var(--ca-success) !important; }
.bg-danger:not(.badge)  { background-color: var(--ca-error) !important; }
.bg-warning:not(.badge) { background-color: var(--ca-warning) !important; }
.bg-info:not(.badge)    { background-color: var(--ca-info) !important; }
.bg-white, .bg-light:not(.badge) { background-color: var(--ca-surface) !important; }
.text-primary { color: var(--ca-primary-text) !important; }
.text-success { color: var(--ca-success) !important; }
.text-danger  { color: var(--ca-error) !important; }
.text-warning { color: var(--ca-warning) !important; }
.text-info    { color: var(--ca-secondary-text) !important; }
.text-muted, .text-secondary { color: var(--ca-text-2) !important; }
.text-dark    { color: var(--ca-text) !important; }
.font-mono, .tabular { font-family: var(--ca-font-mono) !important; font-variant-numeric: tabular-nums; }

/* Opt-in shapes for custom markup */
.ca-raised  { background: var(--ca-surface); box-shadow: var(--ca-raised);  border-radius: var(--ca-radius-lg); }
.ca-raised-sm { background: var(--ca-surface); box-shadow: var(--ca-raised-sm); border-radius: var(--ca-radius-md); }
.ca-inset   { background: var(--ca-surface); box-shadow: var(--ca-inset-sm); border-radius: var(--ca-radius-md); }
.ca-paper   { background: #fff; color: #212529; border-radius: var(--ca-radius-lg); box-shadow: var(--ca-raised); overflow: hidden; }

/* ==========================================================================
   12. Responsive
   ========================================================================== */
@media (max-width: 991px) {
    :root, html[data-theme] { --ca-topbar-height: 60px; }
    .content-wrapper { margin-left: 0 !important; padding: 16px !important; }
    .main-footer { margin-left: 0 !important; padding: 10px 16px !important; }
    .main-header.navbar { padding: 0 var(--ca-gutter) !important; }
    .main-sidebar { transform: translateX(calc(-100% - 2 * var(--ca-gutter))); transition: transform .22s ease; }
    .sidebar-open .main-sidebar { transform: translateX(0); }
}
@media (max-width: 575px) {
    .card-body { padding: 16px !important; }
    .card-header { padding: 14px 16px !important; }
}

/* Collapsed (icon-only) sidebar — AdminLTE's body.sidebar-collapse.
   Hovering the strip expands the full menu as an overlay. */
@media (min-width: 992px) {
    body.sidebar-collapse .main-sidebar { width: calc(var(--ca-sidebar-mini-width) - 2 * var(--ca-gutter)) !important; transition: width .18s ease !important; }
    body.sidebar-collapse .content-wrapper,
    body.sidebar-collapse .main-footer { margin-left: var(--ca-sidebar-mini-width) !important; }
    body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link > p,
    body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-header,
    body.sidebar-collapse .main-sidebar:not(:hover) .nav-treeview,
    body.sidebar-collapse .main-sidebar:not(:hover) .user-panel .info { display: none !important; }
    body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item { margin: 6px 10px; }
    body.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link { justify-content: center !important; }
    body.sidebar-collapse .main-sidebar:not(:hover) .user-panel { justify-content: center; margin: 12px 8px 4px; padding: 8px; }
    body.sidebar-collapse .main-sidebar:hover { width: calc(var(--ca-sidebar-width) - 2 * var(--ca-gutter)) !important; box-shadow: var(--ca-raised), var(--ca-float) !important; }
    body.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > p { display: flex !important; }
}

@media (prefers-reduced-motion: reduce) {
    .btn:active { transform: none; }
    * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   13. SweetFactory panel
   ========================================================================== */

/* 13a. Token bridge — the views and layouts still read the old --sap-* names
   and a handful of page-scoped families (--po-*, --dm-*, ...), each page
   redeclaring a light palette in its own `:root`. html[data-theme] outranks
   those blocks wherever they land, so every page follows the theme and dark
   mode without being edited. Geometry tokens (--po-h, ...) are left alone. */
html[data-theme] {
    --sap-blue: var(--ca-primary);
    --sap-blue-hover: var(--ca-primary-hover);
    --sap-blue-active: var(--ca-primary-active);
    --sap-blue-light: var(--ca-primary-soft);
    --sap-primary: var(--ca-primary);
    --sap-primary-hover: var(--ca-primary-hover);
    --sap-primary-light: var(--ca-primary-soft);
    --sap-info: var(--ca-info);
    --sap-info-bg: var(--ca-info-bg);

    --sap-bg: var(--ca-bg);
    --sap-surface: var(--ca-surface);
    --sap-card-bg: var(--ca-surface);
    --sap-surface-2: var(--ca-surface-2);
    --sap-hover: var(--ca-surface-2);
    --sap-tile-hover: var(--ca-surface-2);
    --sap-border: var(--ca-border);
    --sap-border-light: var(--ca-border-light);
    --sap-text: var(--ca-text);
    --sap-text-2: var(--ca-text-2);
    --sap-label: var(--ca-text-2);
    --sap-text-secondary: var(--ca-text-2);
    --sap-text-3: var(--ca-text-3);
    --sap-text-inv: var(--ca-primary-contrast);

    --sap-success: var(--ca-success);
    --sap-success-bg: var(--ca-success-bg);
    --sap-success-light: var(--ca-success-bg);
    --sap-warning: var(--ca-warning);
    --sap-warn: var(--ca-warning);
    --sap-warning-bg: var(--ca-warning-bg);
    --sap-warning-light: var(--ca-warning-bg);
    --sap-error: var(--ca-error);
    --sap-error-bg: var(--ca-error-bg);
    --sap-error-light: var(--ca-error-bg);

    --sap-radius: var(--ca-radius);
    --sap-radius-md: var(--ca-radius-md);
    --sap-radius-lg: var(--ca-radius-lg);
    --sap-shadow-sm: var(--ca-raised-sm);
    --sap-shadow: var(--ca-raised-sm);
    --sap-shadow-hover: var(--ca-raised);
    --sap-shadow-md: var(--ca-float);
    --sap-transition: var(--ca-transition);

    --sap-shell-bg: var(--ca-bg);
    --sap-shell-item: var(--ca-text-2);
    --sap-shell-hover: var(--ca-primary-soft);
    --sap-shell-active: var(--ca-primary-soft);
    --sap-shell-height: var(--ca-topbar-height);
    --sap-control-h: 36px;

    /* Order screens: purchase order, POS, demand, manufacturing, shipment. */
    --po-bg: var(--ca-bg);           --pos-bg: var(--ca-bg);           --dm-bg: var(--ca-bg);           --mo-bg: var(--ca-bg);           --st-bg: var(--ca-bg);
    --po-card: var(--ca-surface);    --pos-card: var(--ca-surface);    --dm-card: var(--ca-surface);    --mo-card: var(--ca-surface);    --st-card: var(--ca-surface);
    --po-soft: var(--ca-surface-2);  --pos-soft: var(--ca-surface-2);  --dm-soft: var(--ca-surface-2);  --mo-soft: var(--ca-surface-2);  --st-soft: var(--ca-surface-2);
    --po-border: var(--ca-border);   --pos-border: var(--ca-border);   --dm-border: var(--ca-border);   --mo-border: var(--ca-border);   --st-border: var(--ca-border);
    --po-ink: var(--ca-text);        --pos-ink: var(--ca-text);        --dm-ink: var(--ca-text);        --mo-ink: var(--ca-text);        --st-ink: var(--ca-text);
    --po-muted: var(--ca-text-2);    --pos-muted: var(--ca-text-2);    --dm-muted: var(--ca-text-2);    --mo-muted: var(--ca-text-2);    --st-muted: var(--ca-text-2);
    --po-accent: var(--ca-primary);  --pos-accent: var(--ca-primary);  --dm-accent: var(--ca-primary);  --mo-accent: var(--ca-primary);  --st-accent: var(--ca-primary);
    --po-accent-soft: var(--ca-primary-soft);  --pos-accent-soft: var(--ca-primary-soft);  --dm-accent-soft: var(--ca-primary-soft);
    --mo-accent-soft: var(--ca-primary-soft);  --st-accent-soft: var(--ca-primary-soft);
    --po-accent-line: rgba(var(--ca-primary-rgb), .35);  --pos-accent-line: rgba(var(--ca-primary-rgb), .35);  --st-accent-line: rgba(var(--ca-primary-rgb), .35);
    --po-accent-dark: var(--ca-primary-active);  --pos-accent-dark: var(--ca-primary-active);
    --po-dark: var(--ca-primary);    --dm-dark: var(--ca-primary);
    --po-success: var(--ca-success); --pos-success: var(--ca-success); --dm-success: var(--ca-success); --mo-success: var(--ca-success); --st-success: var(--ca-success);
    --po-error: var(--ca-error);     --pos-error: var(--ca-error);     --dm-error: var(--ca-error);     --mo-error: var(--ca-error);     --st-error: var(--ca-error);
    --po-warn: var(--ca-warning);    --pos-warn: var(--ca-warning);    --mo-warn: var(--ca-warning);    --st-warn: var(--ca-warning);
    --st-warn-soft: var(--ca-warning-bg);

    /* Outlet home and release notes. */
    --ol-bg: var(--ca-bg);  --ol-card: var(--ca-surface);  --ol-border: var(--ca-border);
    --ol-ink: var(--ca-text);  --ol-muted: var(--ca-text-2);
    --ol-accent: var(--ca-primary);  --ol-accent-soft: var(--ca-primary-soft);
    --ol-green: var(--ca-success);  --ol-green-soft: var(--ca-success-bg);  --ol-amber: var(--ca-warning);
    --rn-bg: var(--ca-bg);  --rn-card: var(--ca-surface);  --rn-border: var(--ca-border);
    --rn-text: var(--ca-text);  --rn-muted: var(--ca-text-2);
    --rn-primary: var(--ca-primary);  --rn-accent: var(--ca-secondary);  --rn-info: var(--ca-info);
    --rn-success: var(--ca-success);  --rn-warning: var(--ca-warning);
}

/* The pages use one accent token both as a fill (strips, buttons) and as text
   (totals, links). In dark mode the fill blue is too dim to read as text and
   the text blue too light for white labels; a mid shade clears both floors
   (white on it ≥ 4.5:1, it on the surface ≥ 3:1). */
html[data-theme="dark"] {
    --ca-primary-mid: color-mix(in srgb, var(--ca-primary) 82%, #fff);
    --sap-blue: var(--ca-primary-mid);   --sap-primary: var(--ca-primary-mid);
    --sap-blue-hover: var(--ca-primary); --sap-primary-hover: var(--ca-primary);
    --po-accent: var(--ca-primary-mid);  --pos-accent: var(--ca-primary-mid);  --dm-accent: var(--ca-primary-mid);
    --mo-accent: var(--ca-primary-mid);  --st-accent: var(--ca-primary-mid);   --ol-accent: var(--ca-primary-mid);
    --rn-primary: var(--ca-primary-mid); --po-dark: var(--ca-primary-mid);     --dm-dark: var(--ca-primary-mid);
}

/* Screens that use amber as their own accent (order edits, outlet returns)
   opt in with `ca-accent-amber` on a wrapper; the theme's amber stays readable
   in both modes. */
.ca-accent-amber {
    --sap-primary: var(--ca-warning);  --sap-primary-hover: var(--ca-warning);  --sap-primary-light: var(--ca-warning-bg);
    --po-accent: var(--ca-warning);    --po-accent-soft: var(--ca-warning-bg);  --po-accent-line: var(--ca-warning-bg);  --po-accent-dark: var(--ca-warning);
    --pos-accent: var(--ca-warning);   --pos-accent-soft: var(--ca-warning-bg); --pos-accent-line: var(--ca-warning-bg); --pos-accent-dark: var(--ca-warning);
}
/* Dark mode's amber is light, so filled amber controls take dark labels. */
html[data-theme="dark"] .ca-accent-amber :is(.btn-sap, .btn-sap-primary, .btn-primary-sap, .btn-sap-go, .btn-fill),
html[data-theme="dark"] .ca-accent-amber :is(.btn-sap, .btn-sap-primary, .btn-primary-sap, .btn-sap-go, .btn-fill):hover,
html[data-theme="dark"] .ca-accent-amber :is(.po-submit, .pos-submit) { color: var(--ca-base) !important; }

/* 13b. Geometry carried over from the previous theme — the views were laid
   out against these control heights and type sizes, so only the look changes. */
html { font-size: 14px; }
body { font-size: .875rem; line-height: 1.5; }
.form-group { margin-bottom: 16px; }
.form-label, label.sap-label, label {
    font-size: 12px !important;
    margin-bottom: 5px !important;
    display: block !important;
}
/* SweetAlert hides its unused checkbox/radio labels with an inline display:none,
   which the blanket rule above would otherwise override into view. */
.swal2-popup label[style*="display: none"],
.swal2-popup label[style*="display:none"] { display: none !important; }

.form-control, .sap-input,
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="date"], input[type="search"], textarea, select {
    font-size: 13px !important;
    padding: 0 10px !important;
    height: var(--sap-control-h) !important;
    line-height: calc(var(--sap-control-h) - 2px) !important;
    width: 100%;
}
/* Textareas are the one control that must keep growing with their content. */
textarea, textarea.form-control, textarea.sap-input {
    height: auto !important;
    padding: 7px 10px !important;
    line-height: 1.5 !important;
}
.input-group-text { font-size: 13px !important; }
.select2-container--bootstrap4 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    height: var(--sap-control-h) !important;
    min-height: var(--sap-control-h) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    font-size: 13px !important;
    line-height: calc(var(--sap-control-h) - 2px) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    height: calc(var(--sap-control-h) - 2px) !important;
    top: 0 !important;
}
.select2-container--default .select2-results__option { font-size: 13px !important; padding: 7px 12px !important; }
.select2-search--dropdown .select2-search__field { padding: 6px 10px !important; font-size: 13px !important; }

.btn, button.btn {
    font-size: 13px !important;
    padding: 7px 16px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    border-width: 1px !important;
    border-style: solid !important;
}
.btn:hover { text-decoration: none !important; }
.btn-sm { padding: 4px 10px !important; font-size: 12px !important; }
.btn-lg { padding: 10px 20px !important; font-size: 14px !important; }

.table { font-size: 13px !important; border-collapse: collapse !important; width: 100% !important; }
.table thead th { padding: 10px 14px !important; }
.table td { padding: 10px 14px !important; }
.card-header { display: flex !important; align-items: center !important; padding: 14px 20px !important; }
.card-body { padding: 20px !important; }
.info-box { min-height: unset !important; display: flex !important; }
.info-box-icon { display: flex; align-items: center; justify-content: center; font-size: 20px !important; flex-shrink: 0 !important; }
.info-box-content { flex: 1 !important; padding: 0 !important; }
.info-box-text { display: block !important; }
.info-box-number { font-size: 22px !important; line-height: 1.2 !important; display: block !important; }
.content-header h1 { font-size: 20px !important; line-height: 1.3 !important; }
.badge { font-size: 11px !important; padding: 3px 9px !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; }
.alert { padding: 12px 16px !important; font-size: 13px !important; }
.dropdown-menu, .dropdown-item { font-size: 13px !important; }
.close { font-size: 20px !important; }
#toast-container > div { font-size: 13px !important; }
.swal2-popup { font-family: inherit !important; font-size: 14px !important; }
.swal2-title { font-size: 18px !important; font-weight: 600 !important; }
.swal2-html-container { font-size: 13px !important; }
.swal2-confirm, .swal2-cancel { font-size: 13px !important; }

/* 13c. Shell bar — product mark, menu / theme buttons, profile, sign-out. */
.main-header.navbar { padding-right: var(--ca-gutter) !important; }
.shell-menu-btn, .theme-toggle {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none;
    border-radius: 13px;
    background: var(--ca-surface);
    box-shadow: var(--ca-raised-xs);
    color: var(--ca-text-2);
    font-size: 15px;
    cursor: pointer;
    transition: var(--ca-transition);
}
.shell-menu-btn { margin-right: 18px; }
.shell-menu-btn:hover, .theme-toggle:hover { color: var(--ca-primary-text); box-shadow: var(--ca-raised-sm); }
.shell-menu-btn:active, .theme-toggle:active { box-shadow: var(--ca-inset-xs); color: var(--ca-primary-text); }
.shell-menu-btn:focus-visible, .theme-toggle:focus-visible,
.profile-trigger:focus-visible, .shell-logout-btn:focus-visible { outline: 2px solid rgba(var(--ca-primary-rgb), .55); outline-offset: 2px; }

.shell-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 0; margin-right: 8px;
    border: none;
    text-decoration: none !important;
    white-space: nowrap;
}
.shell-brand .shell-logo {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--ca-surface);
    box-shadow: var(--ca-raised-sm);
    color: var(--ca-primary-text);
    font-family: var(--ca-font-display) !important;
    font-size: 17px; font-weight: 700;
}
.shell-brand .shell-title {
    display: block;
    color: var(--ca-text);
    font-family: var(--ca-font-display) !important;
    font-size: 15px; font-weight: 700; line-height: 1.2;
}
.shell-brand .shell-subtitle {
    display: block;
    color: var(--ca-text-3);
    font-size: 10.5px; font-weight: 700; line-height: 1.3;
    letter-spacing: .08em; text-transform: uppercase;
}
.shell-brand:hover .shell-logo { box-shadow: var(--ca-raised-xs); }

.shell-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.profile-dropdown { position: relative; }
.profile-trigger {
    display: flex; align-items: center; gap: 10px;
    height: 44px;
    padding: 0 12px 0 5px;
    border: none;
    border-radius: 14px;
    background: var(--ca-surface);
    box-shadow: var(--ca-raised-xs);
    cursor: pointer;
    transition: var(--ca-transition);
}
.profile-trigger:hover { box-shadow: var(--ca-raised-sm); }
.profile-trigger.active { box-shadow: var(--ca-inset-xs); }
.profile-trigger img,
.profile-trigger .profile-avatar-initials {
    width: 34px; height: 34px;
    flex-shrink: 0;
    border: none;
    border-radius: 11px;
    object-fit: cover;
}
.profile-trigger .profile-avatar-initials {
    display: flex; align-items: center; justify-content: center;
    background: var(--ca-primary);
    box-shadow: var(--ca-bevel);
    color: var(--ca-primary-contrast);
    font-family: var(--ca-font-display) !important;
    font-size: 13px; font-weight: 700;
}
.profile-trigger .profile-info { text-align: left; }
.profile-trigger .profile-name { color: var(--ca-text); font-size: 13px; font-weight: 700; line-height: 1.2; }
.profile-trigger .profile-role { color: var(--ca-text-3); font-size: 11px; line-height: 1.2; }
.profile-trigger .chevron { color: var(--ca-text-3); font-size: 10px; transition: transform .15s; }
.profile-trigger.active .chevron { transform: rotate(180deg); }

.profile-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px); right: 0;
    width: 230px;
    padding: 6px;
    border: none;
    border-radius: var(--ca-radius-md);
    background: var(--ca-surface);
    box-shadow: var(--ca-float);
    z-index: 1060;
    overflow: hidden;
}
.profile-menu.show { display: block; }
.profile-menu-header { padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--ca-border-light); background: transparent; }
.profile-menu-header .name { color: var(--ca-text); font-family: var(--ca-font-display) !important; font-size: 13px; font-weight: 600; }
.profile-menu-header .email { color: var(--ca-text-2); font-size: 11px; margin-top: 2px; }
.profile-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--ca-text) !important;
    font-size: 13px; font-weight: 600;
    text-decoration: none !important;
    transition: var(--ca-transition);
}
.profile-menu-item i { width: 16px; text-align: center; color: var(--ca-text-3); font-size: 13px; }
.profile-menu-item:hover { background: var(--ca-primary-soft); color: var(--ca-primary-text) !important; }
.profile-menu-item:hover i { color: var(--ca-primary-text); }
.profile-menu-item.logout, .profile-menu-item.logout i { color: var(--ca-error) !important; }
.profile-menu-item.logout:hover { background: var(--ca-error-bg); }
.profile-menu-divider { height: 1px; margin: 6px 4px; background: var(--ca-border-light); }

.shell-logout-btn, .rn-shell-signin {
    display: inline-flex; align-items: center; gap: 7px;
    height: 40px;
    padding: 0 14px;
    border: none !important;
    border-radius: 13px !important;
    background: var(--ca-surface) !important;
    box-shadow: var(--ca-raised-xs);
    color: var(--ca-error) !important;
    font-family: var(--ca-font-display) !important;
    font-size: 12.5px; font-weight: 600;
    text-decoration: none !important;
    transition: var(--ca-transition);
}
.rn-shell-signin { color: var(--ca-primary-text) !important; }
.shell-logout-btn:hover, .rn-shell-signin:hover { box-shadow: var(--ca-raised-sm); }
.shell-logout-btn:active, .rn-shell-signin:active { box-shadow: var(--ca-inset-xs); }

/* 13d. Sidebar behaviour the stock theme doesn't cover. */
/* AdminLTE injects #sidebar-overlay at z-index 1037, above the sidebar (1035);
   drop it below so the mobile drawer stays clickable. */
#sidebar-overlay { z-index: 1034 !important; }
/* AdminLTE's collapsed-rail offsets (.sidebar-mini.sidebar-collapse ...
   { margin-left: 4.6rem !important }) outrank the section 3/12 selectors, so
   restate the theme's offsets one step more specific. */
body.sidebar-mini.sidebar-collapse .main-header { margin-left: 0 !important; }
@media (min-width: 992px) {
    body.sidebar-mini.sidebar-collapse .content-wrapper,
    body.sidebar-mini.sidebar-collapse .main-footer { margin-left: var(--ca-sidebar-mini-width) !important; }
}
@media (max-width: 991px) {
    body.sidebar-mini.sidebar-collapse .content-wrapper,
    body.sidebar-mini.sidebar-collapse .main-footer { margin-left: 0 !important; }
}
.nav-sidebar .menu-open > .nav-link > p .right { transform: rotate(-90deg); transition: transform .2s; }
.sidebar .user-panel .image img { width: 34px; height: 34px; }
.sidebar .user-panel .info small { color: var(--ca-text-3) !important; }
.sidebar .user-panel .sidebar-avatar-initials {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--ca-primary);
    box-shadow: var(--ca-bevel);
    color: var(--ca-primary-contrast);
    font-family: var(--ca-font-display) !important;
    font-size: 13px; font-weight: 700;
}
@media (min-width: 992px) {
    /* AdminLTE marks the rail .sidebar-focused while keyboard focus is inside it;
       treat that like hover so tabbing through the menu shows the labels. */
    body.sidebar-collapse .main-sidebar.sidebar-focused { width: calc(var(--ca-sidebar-width) - 2 * var(--ca-gutter)) !important; box-shadow: var(--ca-raised), var(--ca-float) !important; }
    body.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link > p { display: flex !important; }
    body.sidebar-collapse .main-sidebar.sidebar-focused .user-panel .info,
    body.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-header { display: block !important; }
    body.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link { gap: 0 !important; padding: 9px 0 !important; }
}
@media (max-width: 991px) {
    .shell-brand .shell-subtitle { display: none; }
    .shell-actions { gap: 10px; }
}

/* 13e. Page-local components — the views define their own buttons, cards and
   inputs. Only look is set here (colour, radius, shadow, font); their padding
   and sizes stay as each page wrote them, so no layout reflows. */

/* Filled primary. Reads --sap-primary rather than --ca-primary so a screen
   that opts into the amber accent keeps it. */
.btn-sap, .btn-sap-primary, .btn-primary-sap, .btn-sap-go, .btn-fill {
    background: var(--sap-primary) !important;
    color: var(--ca-primary-contrast) !important;
    border-color: transparent !important;
    border-radius: var(--ca-radius) !important;
    box-shadow: var(--ca-raised-xs), var(--ca-bevel) !important;
    font-family: var(--ca-font-display) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: var(--ca-transition) !important;
}
/* Filled semantic and full-width submit bars: keep each page's own fill. */
.btn-sap-success, .btn-post, .btn-receive, .btn-issue { background: var(--ca-success) !important; color: #fff !important; }
.btn-sap-danger { background: var(--ca-error) !important; color: #fff !important; }
.btn-warn { background: var(--ca-warning) !important; color: #fff !important; }
html[data-theme="dark"] .btn-sap-success, html[data-theme="dark"] .btn-post, html[data-theme="dark"] .btn-receive,
html[data-theme="dark"] .btn-issue, html[data-theme="dark"] .btn-sap-danger, html[data-theme="dark"] .btn-warn { color: var(--ca-base) !important; }
.btn-sap-success, .btn-post, .btn-receive, .btn-issue, .btn-sap-danger, .btn-warn,
.po-submit, .pos-submit, .st-submit {
    border-color: transparent !important;
    border-radius: var(--ca-radius) !important;
    box-shadow: var(--ca-raised-xs), var(--ca-bevel) !important;
    font-family: var(--ca-font-display) !important;
    text-decoration: none !important;
    transition: var(--ca-transition) !important;
}
.btn-sap:hover, .btn-sap-primary:hover, .btn-primary-sap:hover, .btn-sap-go:hover, .btn-fill:hover,
.btn-sap-success:hover, .btn-post:hover, .btn-receive:hover, .btn-issue:hover, .btn-sap-danger:hover, .btn-warn:hover,
.po-submit:hover:not(:disabled), .pos-submit:hover:not(:disabled), .st-submit:hover:not(:disabled) {
    filter: brightness(.94);
    box-shadow: var(--ca-raised-sm), var(--ca-bevel) !important;
}
.btn-sap:hover, .btn-sap-primary:hover, .btn-primary-sap:hover, .btn-sap-go:hover, .btn-fill:hover { color: var(--ca-primary-contrast) !important; }
.btn-sap:active, .btn-sap-primary:active, .btn-primary-sap:active, .btn-sap-go:active, .btn-fill:active,
.btn-sap-success:active, .btn-post:active, .btn-receive:active, .btn-issue:active, .btn-sap-danger:active, .btn-warn:active,
.po-submit:active, .pos-submit:active, .st-submit:active { box-shadow: var(--ca-bevel-pressed) !important; transform: scale(.98); }
.po-submit:disabled, .pos-submit:disabled, .st-submit:disabled { box-shadow: none !important; opacity: .55; }

/* Raised surface buttons. */
.btn-sap-secondary, .btn-sap-clear, .btn-add-row, .btn-add-extra-cost, .btn-danger-outline, .btn-danger-soft,
.btn-statement, .btn-cancel, .btn-link-sap, .filter-chip {
    background: var(--ca-surface) !important;
    color: var(--ca-text) !important;
    border-color: transparent !important;
    border-radius: var(--ca-radius) !important;
    box-shadow: var(--ca-raised-xs) !important;
    font-family: var(--ca-font-display) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: var(--ca-transition) !important;
}
.filter-chip { border-radius: 999px !important; }
.btn-sap-clear, .btn-add-row, .btn-add-extra-cost, .btn-link-sap, .btn-statement { color: var(--sap-primary) !important; }
html[data-theme="dark"] .btn-sap-clear, html[data-theme="dark"] .btn-add-row, html[data-theme="dark"] .btn-add-extra-cost,
html[data-theme="dark"] .btn-link-sap, html[data-theme="dark"] .btn-statement { color: var(--ca-primary-text) !important; }
.btn-danger-outline, .btn-danger-soft { color: var(--ca-error) !important; }
.btn-sap-secondary:hover, .btn-sap-clear:hover, .btn-add-row:hover, .btn-add-extra-cost:hover, .btn-danger-outline:hover,
.btn-danger-soft:hover, .btn-statement:hover, .btn-cancel:hover, .btn-link-sap:hover, .filter-chip:hover {
    background: var(--ca-surface) !important;
    box-shadow: var(--ca-raised-sm) !important;
}
.btn-sap-secondary:hover, .btn-cancel:hover, .filter-chip:hover { color: var(--ca-primary-text) !important; }
.btn-sap-secondary:active, .btn-sap-clear:active, .btn-add-row:active, .btn-add-extra-cost:active, .btn-danger-outline:active,
.btn-danger-soft:active, .btn-statement:active, .btn-cancel:active, .btn-link-sap:active { box-shadow: var(--ca-inset-xs) !important; }
/* The chosen filter is pressed in and takes the accent, like any active option. */
.filter-chip.active, .filter-chip.on, .filter-chip.is-active {
    background: var(--ca-surface) !important;
    color: var(--ca-primary-text) !important;
    box-shadow: var(--ca-inset-xs) !important;
}
.filter-chip .count { background: var(--ca-surface) !important; box-shadow: var(--ca-inset-xs); color: inherit; }

/* Ghost / icon buttons: flat until hovered, then lift. */
.btn-icon-only, .btn-icon-subtle, .btn-remove, .btn-remove-row {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: var(--ca-transition) !important;
}
.btn-icon-only, .btn-icon-subtle { color: var(--ca-text-2) !important; }
.btn-remove, .btn-remove-row { color: var(--ca-error) !important; }
.btn-icon-only:hover, .btn-icon-subtle:hover, .btn-remove:hover, .btn-remove-row:hover {
    background: var(--ca-surface) !important;
    box-shadow: var(--ca-raised-xs) !important;
}
.btn-icon-only:hover, .btn-icon-subtle:hover { color: var(--ca-primary-text) !important; }
.btn-icon-only:active, .btn-icon-subtle:active, .btn-remove:active, .btn-remove-row:active { box-shadow: var(--ca-inset-xs) !important; }
.btn-icon-only.text-success { color: var(--ca-success) !important; }
.btn-icon-only.text-info    { color: var(--ca-secondary-text) !important; }
.btn-icon-only.text-danger  { color: var(--ca-error) !important; }
.btn-icon-only.text-warning { color: var(--ca-warning) !important; }
.btn-icon-only.text-primary { color: var(--ca-primary-text) !important; }

/* Cards and tiles. Containers are raised; tiles that sit inside a card are a
   step smaller so the shadows don't stack into a smear. */
.sap-card, .po-card, .pos-card, .st-card, .dm-card, .mo-card, .ol-card, .dz-card, .tl-card, .summary-card, .kpi-tile {
    background: var(--ca-surface) !important;
    border: none !important;
    border-radius: var(--ca-radius-lg) !important;
    box-shadow: var(--ca-raised) !important;
}
.summary-tile, .sap-tile, .ol-tile, .cost-tile, .po-tile, .pos-tile, .dm-tile, .mo-tile, .st-tile, .stat-tile,
.outlet-pick-card, .store-picker-panel {
    background: var(--ca-surface) !important;
    border: none !important;
    border-radius: var(--ca-radius-md) !important;
    box-shadow: var(--ca-raised-sm) !important;
}
.sap-card-header, .po-card-head { border-bottom: 1px solid var(--ca-border-light) !important; background: transparent !important; }
.sap-card-header { font-family: var(--ca-font-display) !important; color: var(--ca-text); }
.sap-page-title { font-family: var(--ca-font-display) !important; font-weight: 600 !important; color: var(--ca-text) !important; letter-spacing: -.01em; }

/* Fields sit pressed into the surface. */
.sap-input, .sap-select, .sap-textarea, .po-input, .pos-input, .st-input, .dm-input, .mo-input, .dz-input,
.po-cell-input, .pos-cell-input, .st-cell-input, .dm-cell-input, .cell-input, .cell-select, .pos-cell-select,
.st-cell-select, .st-sum-input, .qty-input, .mini-input {
    background-color: var(--ca-surface) !important;
    border: 1px solid transparent !important;
    border-radius: var(--ca-radius) !important;
    box-shadow: var(--ca-inset-xs) !important;
    color: var(--ca-text) !important;
}
.sap-input:focus, .sap-select:focus, .sap-textarea:focus, .po-input:focus, .pos-input:focus, .st-input:focus,
.dm-input:focus, .mo-input:focus, .dz-input:focus, .po-cell-input:focus, .pos-cell-input:focus, .st-cell-input:focus,
.dm-cell-input:focus, .cell-input:focus, .cell-select:focus, .pos-cell-select:focus, .st-cell-select:focus,
.st-sum-input:focus, .qty-input:focus, .mini-input:focus {
    border-color: rgba(var(--ca-primary-rgb), .45) !important;
    box-shadow: var(--ca-inset-sm) !important;
    outline: none !important;
}
.sap-input:disabled, .sap-input[readonly], .po-input[readonly], .st-input[readonly], .pos-input[readonly] {
    background-color: var(--ca-surface-2) !important;
    box-shadow: none !important;
    color: var(--ca-text-2) !important;
}

/* Legacy helpers from the previous theme, still used by a few views. */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
.status-dot.active   { background: var(--ca-success); }
.status-dot.inactive { background: var(--ca-text-3); }
.status-dot.warning  { background: var(--ca-warning); }
.status-dot.error    { background: var(--ca-error); }
.amount-badge { font-family: var(--ca-font-mono) !important; font-size: 13px; font-weight: 500; color: var(--ca-text); font-variant-numeric: tabular-nums; }
.amount-positive { color: var(--ca-success) !important; }
.amount-negative { color: var(--ca-error) !important; }
.kpi-tile { padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: var(--ca-transition); }
.kpi-tile-icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 13px;
    box-shadow: var(--ca-inset-xs);
    color: var(--ca-primary-text);
    font-size: 17px;
}
.kpi-tile-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ca-text-2); }
.kpi-tile-value { font-family: var(--ca-font-mono) !important; font-size: 25px; font-weight: 500; color: var(--ca-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-tile-sub { font-size: 12px; color: var(--ca-text-2); }
.page-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ca-border-light); }
.page-section-title { font-family: var(--ca-font-display) !important; font-size: 14px; font-weight: 600; color: var(--ca-text); }
.obj-icon {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--ca-surface);
    box-shadow: var(--ca-inset-xs);
    color: var(--ca-primary-text);
    font-size: 13px;
}
.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background: var(--ca-border) !important; }

/* 13f. Field polish — the pressed-in look alone doesn't say where the cursor
   is, and 13b's blanket padding flattens every field that carries an icon. */

/* Focus shows a ring as well as the deeper press, so a keyboard user can
   always see which field they are in. */
.form-control:focus, .form-select:focus, .custom-select:focus,
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus,
.sap-input:focus, .sap-select:focus, .sap-textarea:focus, .po-input:focus, .pos-input:focus, .st-input:focus,
.dm-input:focus, .mo-input:focus, .dz-input:focus, .po-cell-input:focus, .pos-cell-input:focus, .st-cell-input:focus,
.dm-cell-input:focus, .cell-input:focus, .cell-select:focus, .pos-cell-select:focus, .st-cell-select:focus,
.st-sum-input:focus, .qty-input:focus, .mini-input:focus,
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection,
.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: rgba(var(--ca-primary-rgb), .55) !important;
    box-shadow: var(--ca-inset-sm), 0 0 0 3px rgba(var(--ca-primary-rgb), .16) !important;
}
.is-invalid:focus, .form-control.is-invalid:focus {
    border-color: rgba(192,80,63,.7) !important;
    box-shadow: var(--ca-inset-sm), 0 0 0 3px rgba(192,80,63,.16) !important;
}
.btn:focus-visible, a:focus-visible, button:focus-visible,
.custom-control-input:focus-visible ~ .custom-control-label::before {
    outline: 2px solid rgba(var(--ca-primary-rgb), .55) !important;
    outline-offset: 2px;
}

/* Fields with an icon inside keep room for it, or the text runs under it. */
.filter-search-wrapper .sap-input { padding-left: 2.1rem !important; }
.po-search .po-input, .pos-lookup .pos-input, .pos-search .pos-input,
.st-search .st-input, .mo-search .mo-input { padding-right: 2rem !important; }

/* File inputs: the browser's grey button becomes a raised theme button. */
input[type="file"].form-control, input[type="file"].sap-input {
    height: auto !important;
    padding: 5px !important;
    line-height: 1.6 !important;
    cursor: pointer;
}
input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 5px 14px;
    border: none;
    border-radius: calc(var(--ca-radius) - 2px);
    background: var(--ca-surface);
    box-shadow: var(--ca-raised-xs);
    color: var(--ca-primary-text);
    font: 700 12px var(--ca-font-body);
    cursor: pointer;
}
input[type="file"]::file-selector-button:hover { box-shadow: var(--ca-raised-sm); }

/* Date picker (layouts/backend/date-inputs). The field the user sees carries
   a calendar mark where the native one had it. */
input.ca-date-input, input.flatpickr-input:not([type="hidden"]) {
    padding-right: 34px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%237c8899' d='M128 0c13 0 24 11 24 24v40h144V24c0-13 11-24 24-24s24 11 24 24v40h40c35 0 64 29 64 64v320c0 35-29 64-64 64H64c-35 0-64-29-64-64V128c0-35 29-64 64-64h40V24c0-13 11-24 24-24zm272 192H48v256c0 9 7 16 16 16h320c9 0 16-7 16-16V192z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 11px center !important;
    background-size: 13px !important;
    cursor: pointer;
}
.flatpickr-calendar {
    width: 308px;
    padding: 6px;
    background: var(--ca-surface);
    border: none;
    border-radius: var(--ca-radius-md);
    box-shadow: var(--ca-float);
    font-family: var(--ca-font-body);
}
.flatpickr-calendar.static { top: calc(100% + 6px); }
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; }
.flatpickr-months { padding-bottom: 4px; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .cur-month { color: var(--ca-text); fill: var(--ca-text); font-weight: 700; }
.flatpickr-current-month { font-size: 14px; padding-top: 6px; }
.flatpickr-current-month input.cur-year {
    height: auto !important;
    padding: 0 0 0 .5ch !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ca-text) !important;
    font-size: inherit !important;
    font-weight: 700;
    line-height: inherit !important;
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    margin: 4px;
    padding: 7px 9px;
    border-radius: 10px;
    color: var(--ca-text-2);
    fill: var(--ca-text-2);
}
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: var(--ca-primary-soft); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--ca-primary-text); }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--ca-text-2); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--ca-text-2); }
span.flatpickr-weekday { color: var(--ca-text-3); font-size: 11px; font-weight: 700; }
.flatpickr-day {
    color: var(--ca-text);
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}
.flatpickr-day:hover, .flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: var(--ca-primary-soft); border-color: transparent; color: var(--ca-primary-text); }
.flatpickr-day.today { border-color: rgba(var(--ca-primary-rgb), .5); font-weight: 700; }
.flatpickr-day.today:hover { background: var(--ca-primary-soft); color: var(--ca-primary-text); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
    background: var(--ca-primary);
    border-color: var(--ca-primary);
    box-shadow: var(--ca-bevel);
    color: var(--ca-primary-contrast);
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--ca-text-3); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--ca-text-3); opacity: .4; background: transparent; }

/* 13g. Polish for the tinted surface — selects, placeholders, tables, page
   furniture. Look only; no geometry the pages were laid out against. */

/* Native single-choice selects: the browser's own arrow sits oddly on a
   borderless pressed field, so every one carries the theme's chevron. */
select:not([multiple]):not([size]):not(.select2-hidden-accessible) {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 32px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235e6977' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 11px center !important;
    background-size: 14px !important;
    cursor: pointer;
}
select:not([multiple]):not([size]):not(.select2-hidden-accessible):disabled { cursor: not-allowed; opacity: .7; }
html[data-theme="dark"] select:not([multiple]):not([size]):not(.select2-hidden-accessible) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2399a6b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
}
html[data-theme="dark"] input.ca-date-input, html[data-theme="dark"] input.flatpickr-input:not([type="hidden"]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2399a6b8' d='M128 0c13 0 24 11 24 24v40h144V24c0-13 11-24 24-24s24 11 24 24v40h40c35 0 64 29 64 64v320c0 35-29 64-64 64H64c-35 0-64-29-64-64V128c0-35 29-64 64-64h40V24c0-13 11-24 24-24zm272 192H48v256c0 9 7 16 16 16h320c9 0 16-7 16-16V192z'/%3E%3C/svg%3E") !important;
}
/* Option lists follow the theme instead of the OS, which matters in dark mode. */
select option { background: var(--ca-surface); color: var(--ca-text); }

/* Every placeholder, not just .form-control's. */
input::placeholder, textarea::placeholder { color: var(--ca-text-3) !important; opacity: 1 !important; }
/* Select2's placeholder and chevron match. */
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder { color: var(--ca-text-3) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b { border-color: var(--ca-text-2) transparent transparent transparent !important; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
.select2-container--bootstrap4.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--ca-text-2) transparent !important; }
.select2-container--default .select2-selection--single .select2-selection__clear { color: var(--ca-text-3) !important; }
.select2-results__option[aria-disabled="true"] { color: var(--ca-text-3) !important; }
.select2-container--default .select2-results__group { color: var(--ca-text-3) !important; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Required marks and inline hints. */
label .req, label .text-danger, .po-label .req, .pos-label .req { color: var(--ca-error) !important; font-weight: 700; }
.form-text, .text-hint, small.text-muted { color: var(--ca-text-3) !important; }

/* Page tables the views draw themselves: a quiet uppercase header and hairline
   rows, matching the Bootstrap tables the theme already restyles. */
.sap-table { color: var(--ca-text); }
.sap-table thead th {
    background: transparent !important;
    color: var(--ca-text-2) !important;
    border-bottom: 1px solid var(--ca-border) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}
.sap-table tbody td { border-bottom: 1px solid var(--ca-border-light) !important; }
.sap-table tbody tr:last-child td { border-bottom: none !important; }
.sap-table tbody tr:hover, .sap-table tbody tr:hover td { background: var(--ca-primary-soft) !important; }
.sap-table tfoot td, .sap-table tfoot th { border-top: 1px solid var(--ca-border) !important; background: transparent !important; }
.sap-table td[style*="monospace"], .sap-table th[style*="monospace"] { font-family: var(--ca-font-mono) !important; }
.sap-card > .sap-filter-bar, .sap-card > form.sap-filter-bar, .sap-card .filter-bar { border-bottom: 1px solid var(--ca-border-light); background: transparent !important; }

/* Page header furniture. */
.sap-page-header { padding-bottom: 18px !important; }
.sap-page-title { font-size: 21px !important; }
.breadcrumb { background: transparent !important; padding: 0 !important; margin: 0 !important; font-size: 12px; }
.breadcrumb-item a, .breadcrumb-item a.text-muted { color: var(--ca-text-2) !important; }
.breadcrumb-item a:hover { color: var(--ca-primary-text) !important; text-decoration: none; }
.breadcrumb-item.active { color: var(--ca-text) !important; font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ca-text-3) !important; }

/* Tinted banner strips (store headers) become raised panels in the surface
   colour; the accent moves to the figures. */
.store-header-strip {
    background: var(--ca-surface) !important;
    color: var(--ca-text) !important;
    border-radius: var(--ca-radius-lg) !important;
    box-shadow: var(--ca-raised) !important;
}
.store-header-strip .store-name { font-family: var(--ca-font-display) !important; color: var(--ca-text) !important; }
.store-header-strip .store-name .fas { color: var(--ca-primary-text) !important; }
.store-header-strip .store-meta { color: var(--ca-text-2) !important; opacity: 1 !important; }
.store-header-strip .detail-label { color: var(--ca-text-2) !important; }
.store-header-strip .detail-value { color: var(--ca-text) !important; }
.store-header-strip #productCount, .store-header-strip .big-figure { font-family: var(--ca-font-mono) !important; font-weight: 500 !important; color: var(--ca-primary-text) !important; font-variant-numeric: tabular-nums; }

/* Status pills the pages hand-draw sit pressed in like the theme's badges. */
.status-badge, .status-pill, .type-badge, .stock-level, .count-badge { box-shadow: var(--ca-inset-xs); border: none !important; }

/* Empty states. */
.empty-items, .empty-state, .no-results-row td, .po-empty, .pos-empty { color: var(--ca-text-2) !important; }
.empty-items .fas, .empty-state .fas, .po-empty-icon, .pos-empty-icon { color: var(--ca-text-3) !important; }

/* Textarea resize grip and number fields. */
textarea { resize: vertical; }
input[type="number"] { font-variant-numeric: tabular-nums; }

/* Disabled submit bars read as waiting, not broken. */
.po-submit:disabled, .pos-submit:disabled, .st-submit:disabled { background: var(--ca-surface-2) !important; color: var(--ca-text-3) !important; }

/* Phones: a page title and its breadcrumb share one row only while they fit,
   and an empty table's message stays in view rather than centring itself
   across columns the user has to scroll to. */
@media (max-width: 575px) {
    .content-header .d-flex.justify-content-between { flex-wrap: wrap; gap: 6px 12px; }
    .content-header .breadcrumb { flex-wrap: wrap; }
}
@media (max-width: 767px) {
    .table-responsive td[colspan] > div,
    .table-responsive td[colspan] > p {
        position: sticky;
        left: 0;
        max-width: calc(100vw - 96px);
        margin-left: 0;
        margin-right: 0;
    }
}

/* Paper is white whatever theme is on screen: printing from dark mode would
   otherwise send light-grey ink to the page. */
@media print {
    html[data-theme="dark"] {
        --ca-base: #ffffff;
        --ca-shade-dark: #d6d6d6;
        --ca-shade-light: #ffffff;
        --ca-surface-2: #f7f7f7;
        --ca-border: #eaeaea;
        --ca-border-light: #f3f3f3;
        --ca-text: #38404c;
        --ca-text-2: #5e6977;
        --ca-text-3: #7c8899;
        --ca-primary-text: #1d4ed8;
        --ca-secondary-text: #239447;
        --ca-success: #3f7d2e;
        --ca-warning: #b86e1c;
        --ca-error: #c0503f;
    }
    .card, .sap-card, .po-card, .summary-card, .summary-tile { box-shadow: none !important; }
}