/* ==========================================================================
   RekordPlate — Nocturne
   ==========================================================================
   Design-system layer for the back-office (super-admin panel, business
   back-office, POS/KDS shells). Loaded LAST, after admin-style.css,
   custom.css and modern-redesign.css, so it is the final authority.

   Structure
     1. Tokens ............ Nocturne ramps, dark (default) + light
     2. Bridge ............ maps the legacy --rp-* / --clr-* variables onto
                            Nocturne so the 1,400 lines of existing rules in
                            modern-redesign.css and admin-style.css re-theme
                            themselves instead of being fought one by one
     3. Base .............. document, typography, scrollbars, focus
     4. Bootstrap ......... cards, tables, forms, buttons, badges, dropdowns,
                            modals, pagination, tabs, alerts
     5. Plugins ........... select2, choices, flatpickr, toastr, jquery-confirm
     6. Shell ............. Acnoo sidebar / header / section-container, rebuilt
                            to the Nocturne grouped-nav + topbar structure
     7. Components ........ .nc-* primitives from the design: kpi, feed,
                            segmented control, tags, meters, sparklines
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

/* Shared across both palettes — type, geometry and motion do not change
   when the palette flips. */
:root {
    --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading-weight: 500;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;

    --nc-nav-w: 232px;
    --nc-nav-w-collapsed: 62px;
    --nc-topbar-h: 52px;
    --nc-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Light is the default palette, and the one the ramps are authored against:
   every component is written in terms of the ramp, so the dark block below
   flips the lightness scale rather than re-picking colours. The token names
   stay meaningful in both (neutral-500 is "muted text" either way,
   neutral-800 is "tag ground" either way).

   It is bound to bare `:root` as well as `[data-theme="light"]` so a page
   that never runs the boot snippet — JavaScript off, or a view rendered
   outside the app layouts — still lands on light rather than on whichever
   block happens to come last. */
:root,
[data-theme="light"] {
    color-scheme: light;

    --color-bg: #f4f5fa;
    --color-bg-sunken: #eaecf4;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-text: #1b1d2a;
    --color-accent: #5d5294;
    --color-accent-2: #6f6aa3;
    --color-divider: rgba(27, 29, 42, .14);
    --color-hairline: rgba(27, 29, 42, .07);

    /* Tonal ramps — one shared lightness scale, so the same step of any
       role matches the others in visual value. */
    --color-neutral-100: #23252e;
    --color-neutral-200: #33363f;
    --color-neutral-300: #474b58;
    --color-neutral-400: #5b5f70;
    --color-neutral-500: #696d82;
    --color-neutral-600: #7a7e91;
    --color-neutral-700: #b0b3c2;
    --color-neutral-800: #dcdee7;
    --color-neutral-900: #eef0f6;

    --color-accent-100: #2b2741;
    --color-accent-200: #423a6a;
    --color-accent-300: #5d5294;
    --color-accent-400: #796cbf;
    --color-accent-500: #968ae0;
    --color-accent-600: #b5abfc;
    --color-accent-700: #d2cefd;
    --color-accent-800: #e7e5fe;
    --color-accent-900: #f5f4ff;

    /* Status — held at the accent's own lightness so a status tag and an
       accent tag read as the same weight of mark. */
    --color-success: #2f7d55;
    --color-success-bg: #dff2e7;
    --color-success-fg: #1c5138;
    --color-warning: #8a6420;
    --color-warning-bg: #fbeed6;
    --color-warning-fg: #6b4c16;
    --color-danger: #a63f4f;
    --color-danger-bg: #fbe2e6;
    --color-danger-fg: #7d2e3b;
    --color-info: #3f6494;
    --color-info-bg: #e0eaf7;
    --color-info-fg: #2b4667;

    /* Elevation — a hairline edge plus a soft ambient drop. */
    --shadow-sm: 0 0 0 1px #e3e5ee;
    --shadow-md: 0 0 0 1px #d7dae6, 0 6px 18px rgba(24, 26, 45, .08);
    --shadow-lg: 0 0 0 1px #c4c8d9, 0 16px 40px rgba(24, 26, 45, .14);
}

/* Dark is opt-in, via the topbar toggle. It mirrors the ramp above; steps are
   nudged for legibility on the dark ground rather than inverted blindly. */
[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #161826;
    --color-bg-sunken: #101220;
    --color-surface: #232532;
    --color-surface-raised: #2a2c3b;
    --color-text: #e9e9ed;
    --color-accent: #9184d9;
    --color-accent-2: #a7a1db;
    --color-divider: rgba(233, 233, 237, .16);
    --color-hairline: rgba(233, 233, 237, .08);

    --color-neutral-100: #f3f5fe;
    --color-neutral-200: #e4e7f5;
    --color-neutral-300: #cfd3e5;
    --color-neutral-400: #b2b6ca;
    --color-neutral-500: #9397ab;
    --color-neutral-600: #75798c;
    --color-neutral-700: #595d6c;
    --color-neutral-800: #3f424d;
    --color-neutral-900: #292b31;

    --color-accent-100: #f5f4ff;
    --color-accent-200: #e7e5fe;
    --color-accent-300: #d2cefd;
    --color-accent-400: #b5abfc;
    --color-accent-500: #968ae0;
    --color-accent-600: #796cbf;
    --color-accent-700: #5d5294;
    --color-accent-800: #423a6a;
    --color-accent-900: #2b2741;

    --color-success: #63b98a;
    --color-success-bg: #24402f;
    --color-success-fg: #d8f0e2;
    --color-warning: #d1a355;
    --color-warning-bg: #423418;
    --color-warning-fg: #f7e6c6;
    --color-danger: #d97583;
    --color-danger-bg: #45242c;
    --color-danger-fg: #f8dde1;
    --color-info: #7fa6d9;
    --color-info-bg: #22334a;
    --color-info-fg: #d8e6f7;

    /* On the dark ground the ambient drop does the work; the edge is what
       separates a surface from the page. */
    --shadow-sm: 0 0 0 1px #3f424d;
    --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, .55);
    --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, .65);
}

/* ==========================================================================
   2. BRIDGE — legacy variables re-pointed at Nocturne
   ========================================================================== */

:root {
    /* modern-redesign.css */
    --rp-font: var(--font-body);
    --rp-font-display: var(--font-heading);
    --rp-accent: var(--color-accent);
    --rp-accent-600: var(--color-accent-400);
    --rp-accent-tint: color-mix(in srgb, var(--color-accent) 12%, transparent);
    --rp-accent-tint-strong: color-mix(in srgb, var(--color-accent) 20%, transparent);
    --rp-bg: var(--color-bg);
    --rp-surface: var(--color-surface);
    --rp-border: var(--color-hairline);
    --rp-border-strong: var(--color-divider);
    --rp-ink: var(--color-text);
    --rp-text: var(--color-text);
    --rp-muted: var(--color-neutral-500);
    --rp-radius-sm: var(--radius-sm);
    --rp-radius: var(--radius-md);
    --rp-radius-lg: var(--radius-md);
    --rp-shadow-xs: none;
    --rp-shadow-sm: var(--shadow-sm);
    --rp-shadow-md: var(--shadow-sm);
    --rp-shadow-lg: var(--shadow-md);
    --rp-shadow-orange: none;
    --rp-ease: .18s var(--nc-ease);

    /* admin-style.css (Acnoo) */
    --clr-primary: var(--color-accent);
    --clr-white: var(--color-surface);
    --clr-white2: var(--color-surface);
    --clr-white3: var(--color-bg-sunken);
    --clr-black: var(--color-text);
    --clr-black2: var(--color-text);
    --clr-black3: var(--color-neutral-300);
    --clr-gray: var(--color-neutral-400);
    --clr-gray1: var(--color-neutral-500);
    --clr-gray2: var(--color-neutral-700);
    --clr-gray3: var(--color-bg-sunken);
    --clr-gray4: var(--color-bg-sunken);
    --clr-gray5: var(--color-neutral-600);
    --clr-violet: var(--color-accent);
    --clr-violet-light: color-mix(in srgb, var(--color-accent) 14%, transparent);
    --clr-green: var(--color-success);
    --clr-green-light: color-mix(in srgb, var(--color-success) 16%, transparent);
    --clr-orange: var(--color-warning);
    --clr-orange-light: color-mix(in srgb, var(--color-warning) 16%, transparent);
    --clr-red: var(--color-danger);

    /* Bootstrap 5 */
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-body-font-family: var(--font-body);
    --bs-border-color: var(--color-hairline);
    --bs-secondary-color: var(--color-neutral-500);
    --bs-tertiary-bg: var(--color-bg-sunken);
    --bs-emphasis-color: var(--color-text);
    --bs-link-color: var(--color-accent);
    --bs-link-hover-color: var(--color-accent-200);
    --bs-heading-color: var(--color-text);
}

/* ==========================================================================
   3. BASE
   ========================================================================== */

html,
body {
    background: var(--color-bg);
    color: var(--color-text);
}

body {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    color: var(--color-text);
    line-height: 1.15;
    letter-spacing: -.015em;
}

h1 { font-size: 30px; }
h2 { font-size: 25px; }
h3 { font-size: 21px; }
h4 { font-size: 19px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }

p { color: var(--color-text); }

a {
    color: var(--color-accent);
    text-decoration: none;
    text-underline-offset: 3px;
}

a:hover { color: var(--color-accent-300); }

hr {
    border: 0;
    height: 1px;
    opacity: 1;
    background: linear-gradient(to right, transparent, var(--color-divider) 48px,
            var(--color-divider) calc(100% - 48px), transparent);
}

small, .small { font-size: 11.5px; }

.text-muted,
.text-secondary { color: var(--color-neutral-500) !important; }

.text-dark,
.text-black { color: var(--color-text) !important; }

.text-white { color: var(--color-text) !important; }

.bg-white,
.bg-light { background-color: var(--color-surface) !important; }

.bg-body { background-color: var(--color-bg) !important; }

.border { border-color: var(--color-hairline) !important; }

.fw-bold, .fw-semibold { font-weight: 600; }

:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--color-neutral-800);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-700); }

* { scrollbar-color: var(--color-neutral-800) transparent; scrollbar-width: thin; }

/* Numbers in the interface are compared column to column — they align. */
.nc-num,
td[class*="amount"],
.rp-kpi__value {
    font-variant-numeric: tabular-nums;
}

/* Nocturne's signature: freestanding rules fade out at both ends. */
.nc-rule {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-divider) 40px,
            var(--color-divider) calc(100% - 40px), transparent);
}

/* ==========================================================================
   4. BOOTSTRAP + THEME SURFACES
   ========================================================================== */

/* — cards — */
.card,
.rp-card,
.erp-table-section .card,
.modal-content,
.dropdown-menu,
.list-group-item {
    background-color: var(--color-surface);
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
}

.card-header,
.card-footer {
    background-color: transparent;
    border-color: var(--color-hairline);
    color: var(--color-text);
}

.card-body { color: var(--color-text); }

/* — tables — */
.table,
.rp-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-text);
    --bs-table-border-color: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--color-text);
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: var(--color-text);
    width: 100%;
    border-collapse: collapse;
    color: var(--color-text);
    font-size: 12.5px;
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    background-color: transparent;
    box-shadow: none;
    color: inherit;
}

.table th,
.rp-table th {
    text-align: left;
    font-family: var(--font-heading);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    padding: 10px 8px;
    border: 0;
    white-space: nowrap;
    background: transparent;
}

.table td,
.rp-table td {
    padding: 9px 8px;
    border: 0;
    vertical-align: middle;
    color: var(--color-text);
}

/* Row rules are painted on the row, not the cell, so the end-fade spans the
   full row the way the design specifies. */
.table thead tr,
.rp-table thead tr {
    background: linear-gradient(to right, transparent, var(--color-divider) 40px,
            var(--color-divider) calc(100% - 40px), transparent) no-repeat bottom / 100% 1px;
}

.table tbody tr,
.rp-table tbody tr {
    background: linear-gradient(to right, transparent, var(--color-hairline) 40px,
            var(--color-hairline) calc(100% - 40px), transparent) no-repeat bottom / 100% 1px;
}

.table tbody tr:hover,
.rp-table tbody tr:hover {
    background:
        linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent),
            color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
        linear-gradient(to right, transparent, var(--color-hairline) 40px,
            var(--color-hairline) calc(100% - 40px), transparent) no-repeat bottom / 100% 1px;
}

.table-responsive,
.responsive-table { background: transparent; }

/* — buttons — */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 12.5px;
    line-height: 1.2;
    padding: 7px 13px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text);
    transition: background .16s var(--nc-ease), border-color .16s var(--nc-ease), color .16s var(--nc-ease);
}

.btn:focus,
.btn:active { box-shadow: none; }

/* The design's primary is an outlined accent button, not a filled one — the
   fill is reserved for hover and active. */
.btn-primary,
.add-order-btn,
.btn-submit,
.rp-btn--primary {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.add-order-btn:hover,
.btn-submit:hover,
.rp-btn--primary:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-primary:active,
.add-order-btn:active,
.btn-submit:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }

.btn-secondary,
.btn-light,
.btn-outline-secondary,
.rp-btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-divider);
}

.btn-secondary:hover,
.btn-light:hover,
.btn-outline-secondary:hover,
.rp-btn--ghost:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text);
    border-color: var(--color-divider);
}

.btn-success { color: var(--color-success); border-color: var(--color-success); background: transparent; }
.btn-success:hover { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }

.btn-danger { color: var(--color-danger); border-color: var(--color-danger); background: transparent; }
.btn-danger:hover { background: color-mix(in srgb, var(--color-danger) 14%, transparent); color: var(--color-danger); }

.btn-warning { color: var(--color-warning); border-color: var(--color-warning); background: transparent; }
.btn-warning:hover { background: color-mix(in srgb, var(--color-warning) 14%, transparent); color: var(--color-warning); }

.btn-info { color: var(--color-info); border-color: var(--color-info); background: transparent; }
.btn-info:hover { background: color-mix(in srgb, var(--color-info) 14%, transparent); color: var(--color-info); }

.btn-dark { color: var(--color-text); border-color: var(--color-divider); background: transparent; }

.btn-link { color: var(--color-accent); border-color: transparent; }

.btn:disabled,
.btn.disabled { opacity: .45; }

.btn-sm { padding: 4px 9px; font-size: 11.5px; }
.btn-lg { padding: 9px 16px; font-size: 14px; }

/* — forms — */
.form-control,
.form-select,
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    background-color: var(--color-bg-sunken);
    color: var(--color-text);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 12.5px;
    min-height: 34px;
    padding: 6px 10px;
    caret-color: var(--color-accent);
    box-shadow: none;
    transition: border-color .16s var(--nc-ease);
}

.form-control:hover,
.form-select:hover,
.input:hover { border-color: color-mix(in srgb, var(--color-text) 40%, transparent); }

.form-control:focus,
.form-select:focus,
.input:focus,
textarea:focus,
select:focus {
    background-color: var(--color-bg-sunken);
    color: var(--color-text);
    border-color: var(--color-accent);
    box-shadow: none;
    outline: none;
}

.form-control::placeholder,
textarea::placeholder { color: var(--color-neutral-600); }

.form-control:disabled,
.form-control[readonly] {
    background-color: color-mix(in srgb, var(--color-text) 4%, transparent);
    color: var(--color-neutral-500);
}

.form-label,
.field > label,
label {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--color-neutral-400);
    margin-bottom: 5px;
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239397ab' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-size: 14px;
}

.form-check-input {
    background-color: var(--color-bg-sunken);
    border-color: var(--color-divider);
}

.form-check-input:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.form-check-input:focus { box-shadow: none; border-color: var(--color-accent); }

.form-switch .form-check-input:checked { background-color: var(--color-accent); }

.input-group-text {
    background: var(--color-bg-sunken);
    border-color: var(--color-divider);
    color: var(--color-neutral-400);
    font-size: 12px;
}

.invalid-feedback,
label.error { color: var(--color-danger); font-size: 11px; }

.form-control.error,
.form-control.is-invalid { border-color: var(--color-danger); }

/* — badges / tags — */
.badge,
.tag,
.rp-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .02em;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--color-neutral-800);
    color: var(--color-neutral-100);
}

.badge.bg-primary, .tag-accent { background: var(--color-accent-800) !important; color: var(--color-accent-100) !important; }
.badge.bg-secondary, .tag-neutral { background: var(--color-neutral-800) !important; color: var(--color-neutral-100) !important; }
.badge.bg-success, .tag-success { background: var(--color-success-bg) !important; color: var(--color-success-fg) !important; }
.badge.bg-warning, .tag-warning { background: var(--color-warning-bg) !important; color: var(--color-warning-fg) !important; }
.badge.bg-danger, .tag-danger { background: var(--color-danger-bg) !important; color: var(--color-danger-fg) !important; }
.badge.bg-info, .tag-info { background: var(--color-info-bg) !important; color: var(--color-info-fg) !important; }
.badge.bg-light { background: var(--color-neutral-800) !important; color: var(--color-neutral-100) !important; }
.badge.bg-dark { background: var(--color-neutral-900) !important; color: var(--color-neutral-200) !important; }

.tag-outline {
    background: transparent;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}

/* — dropdowns — */
.dropdown-menu {
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    padding: 5px;
    font-size: 12.5px;
    min-width: 190px;
}

.dropdown-menu li > a,
.dropdown-item {
    color: var(--color-text);
    border-radius: var(--radius-sm);
    padding: 6px 9px;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-item:hover,
.dropdown-menu li > a:hover,
.dropdown-item:focus {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text);
}

.dropdown-item.active,
.dropdown-item:active {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: var(--color-accent);
}

.dropdown-divider { border-color: var(--color-hairline); }

/* — modals — */
.modal-content {
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
}

.modal-header,
.modal-footer { border-color: var(--color-hairline); }

.modal-title { font-family: var(--font-heading); font-size: 17px; }

.modal-backdrop.show { opacity: .62; background: var(--color-bg-sunken); }

.btn-close {
    filter: invert(1) grayscale(1) brightness(1.8);
    opacity: .5;
}

[data-theme="light"] .btn-close { filter: none; opacity: .55; }

.btn-close:hover { opacity: 1; }

/* — pagination — */
.pagination { gap: 4px; }

.page-link {
    background: transparent;
    border: 1px solid var(--color-divider);
    color: var(--color-neutral-300);
    border-radius: var(--radius-sm) !important;
    font-size: 12px;
    padding: 5px 10px;
}

.page-link:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text);
    border-color: var(--color-divider);
}

.page-item.active .page-link {
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.page-item.disabled .page-link { color: var(--color-neutral-700); background: transparent; }

/* — tabs / navs — */
.nav-tabs { border-bottom: 1px solid var(--color-hairline); gap: 2px; }

.nav-tabs .nav-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--color-neutral-500);
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 500;
    padding: 9px 12px;
    border-radius: 0;
}

.nav-tabs .nav-link:hover { color: var(--color-text); }

.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.nav-pills .nav-link { color: var(--color-neutral-400); border-radius: var(--radius-md); font-size: 12.5px; }
.nav-pills .nav-link.active { background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent); }

/* — alerts — */
.alert {
    border: 0;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    box-shadow: var(--shadow-sm);
    background: var(--color-surface);
    color: var(--color-text);
    padding: 11px 13px;
}

.alert-success { background: var(--color-success-bg); color: var(--color-success-fg); }
.alert-danger  { background: var(--color-danger-bg);  color: var(--color-danger-fg); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.alert-info    { background: var(--color-info-bg);    color: var(--color-info-fg); }

/* — progress / meters — */
.progress {
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    border-radius: 3px;
    height: 5px;
}

.progress-bar { background: var(--color-accent); }

/* — tooltips / popovers — */
.tooltip-inner {
    background: var(--color-surface-raised);
    color: var(--color-text);
    font-size: 11.5px;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-sm);
}

.tooltip .tooltip-arrow::before { border-top-color: var(--color-surface-raised); }

.popover {
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    border: 0;
}

.popover-body { color: var(--color-text); font-size: 12px; }

/* — accordion — */
.accordion-item { background: var(--color-surface); border-color: var(--color-hairline); }
.accordion-button {
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 13px;
    box-shadow: none;
}
.accordion-button:not(.collapsed) { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); }
.accordion-body { color: var(--color-text); font-size: 12.5px; }

/* — misc surfaces that ship white from the theme — */
.offcanvas,
.toast,
.list-group,
.nav-item .nav-link { background-color: transparent; color: var(--color-text); }

.offcanvas { background: var(--color-surface); }

/* ==========================================================================
   4b. VENDOR NEUTRALISATION
   ==========================================================================
   admin-style.css hard-codes ~150 light literals (#fff grounds, #191919 /
   #0c1928 text) that no variable re-point can reach. Rather than edit the
   vendor file — it is regenerated on theme updates — the offending selectors
   are re-pointed at tokens here. Grouped by what they do, not by where they
   appear, so both themes are served by one block.
   ========================================================================== */

/* — grounds that ship white — */
#main-wrapper,
.section-main-content,
.notification-footer,
.state-overview-box,
.erp-graph-box,
.erp-overview-item,
.dashboard-card,
.footer-content,
.cards,
.cards-header,
.bank-account-info,
.woodland-card-header,
.subscription-plan-tabs .content,
.settings-image-upload .title,
.table-action .dropdown-menu,
.upload-img,
.upload-img-v2 label,
.upload-v4 .img-wrp,
.dropdown-content.custom-dropdown-content {
    background: var(--color-surface) !important;
    background-color: var(--color-surface) !important;
    color: var(--color-text);
    border-color: var(--color-hairline);
}

.upload-img,
.upload-img-v2 label,
.upload-v4 .img-wrp {
    background: var(--color-bg-sunken) !important;
    background-color: var(--color-bg-sunken) !important;
    border: 1px dashed var(--color-divider) !important;
}

/* The vendor pins `.form-control { background-color: #fff !important }`, which
   would leave every input in the panel white. */
.form-control,
.form-control:focus,
.form-select,
textarea.form-control {
    background-color: var(--color-bg-sunken) !important;
    color: var(--color-text) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent) !important;
    box-shadow: none !important;
}

/* — controls that ship white — */
.dataTables_wrapper select,
.dataTables_wrapper input,
.order-form-section .form-control,
.role-input-label .form-control,
.permission .form-control,
.modal-body .form-control,
.in-print-btn,
.reset-btn,
.custom-radio .btn,
.incre-decre,
.cart-qty-control button,
.dropbtn.custom-dropbtn,
.login-input-container .input-icon {
    background: var(--color-bg-sunken) !important;
    background-color: var(--color-bg-sunken) !important;
    color: var(--color-text) !important;
    border-color: var(--color-divider) !important;
}

.dropbtn.custom-dropbtn:hover,
.reset-btn:hover,
.in-print-btn:hover {
    background: color-mix(in srgb, var(--color-text) 8%, transparent) !important;
    color: var(--color-text) !important;
}

/* — text that ships near-black — */
.table-header h4,
.table-title,
.table-title-three h5,
.t-header,
.clr-black,
.clr-black td,
.clr-black th,
.title-four,
.pending2,
.bg-gray,
.costing-list span,
.total-count-area .count-item h5,
.state-overview-box h2,
.erp-graph-box .graph-header h4,
.modal-custom-design h1,
.table-profile strong,
.table-profile-order strong,
.top-customer-table td,
.table-two td,
.table-two th,
.table-two thead td,
.small-table tr td,
.small-table th,
.table-footer-last td,
.table-footer-last td:last-child,
.main-header-section .profile-info .dropdown-menu li a,
.profile-text .name,
.close-btn {
    color: var(--color-text) !important;
}

.state-overview-box p,
.upload-img p,
.modal-custom-design label,
.modal-body label,
.order-form-section label,
.permission label,
.role-input-label label,
.erp-graph-box .graph-header .nice-select {
    color: var(--color-neutral-400) !important;
}

/* The vendor pins these with `!important`, so the reset has to match it. */
b, strong { color: inherit !important; }

.table-profile strong,
.table-profile-order strong {
    color: var(--color-text) !important;
    opacity: 1 !important;
}

/* — shell geometry —
   The theme pins the content frame with `padding-left: 280px !important`, so
   the rail width has to be applied the same way. */
.section-container {
    padding-left: var(--nc-nav-w) !important;
    margin-left: 0;
}

.section-container.active { padding-left: var(--nc-nav-w-collapsed) !important; }

@media (max-width: 1199.98px) {
    .section-container,
    .section-container.active { padding-left: 0 !important; }
}

/* The vendor forces a full-viewport minimum on every table wrapper, which
   leaves a large dead area under short lists. */
.responsive-table { min-height: 0 !important; }

/* — dropdown widgets —
   Choices.js, select2 and the theme's own nice-select each paint their own
   white face over the (already themed) native <select>. */
.choices,
.choices__inner,
.choices[data-type*="select-one"] .choices__inner,
.choices[data-type*="select-one"]::after,
.choices.is-open .choices__inner,
.choices.is-focused .choices__inner,
.nice-select,
.dropdown-design,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--color-bg-sunken) !important;
    background-color: var(--color-bg-sunken) !important;
    color: var(--color-text) !important;
    border-color: var(--color-divider) !important;
}

.choices__list--single,
.choices__item,
.choices__placeholder,
.nice-select .current,
.nice-select .option {
    color: var(--color-text) !important;
    opacity: 1;
}

.choices__placeholder { color: var(--color-neutral-600) !important; opacity: 1; }

.choices__list--dropdown,
.choices__list[aria-expanded],
.nice-select .list {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border: 0 !important;
    box-shadow: var(--shadow-md) !important;
}

.nice-select .option:hover,
.nice-select .option.selected,
.nice-select .option.focus {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent) !important;
    color: var(--color-accent) !important;
}

/* — the theme's own button family —
   Both admin-style.css and modern-redesign.css force these filled with
   `!important` (and a coloured drop shadow), so the outline treatment has to
   be asserted the same way. */
.btn-primary,
.primary-btn,
.add-btn,
.theme-btn,
.save-btn,
.submit-btn,
.view-list-btn,
.feature-btn,
.search-btn,
.modal-btn-ctg,
.role-reset-btn,
.multiple-button-group .multi-delete-btn {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--color-accent) !important;
    border: 1px solid var(--color-accent) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-heading);
    font-weight: 500 !important;
    font-size: 12.5px !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.primary-btn:hover,
.add-btn:hover,
.theme-btn:hover,
.save-btn:hover,
.submit-btn:hover,
.view-list-btn:hover,
.feature-btn:hover,
.search-btn:hover,
.modal-btn-ctg:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent) !important;
    background-color: color-mix(in srgb, var(--color-accent) 12%, transparent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
    box-shadow: none !important;
}

/* Secondary/destructive members of that family keep their own hue. */
.theme-btn.border-btn,
.button-group .reset-btn,
.cancel-btn {
    color: var(--color-neutral-300) !important;
    border-color: var(--color-divider) !important;
}

.theme-btn.border-btn:hover,
.button-group .reset-btn:hover,
.cancel-btn:hover {
    background: color-mix(in srgb, var(--color-text) 8%, transparent) !important;
    color: var(--color-text) !important;
}

.multiple-button-group .multi-delete-btn,
.delete-btn {
    color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
}

.multiple-button-group .multi-delete-btn:hover,
.delete-btn:hover {
    background: color-mix(in srgb, var(--color-danger) 14%, transparent) !important;
    color: var(--color-danger) !important;
}

/* — sidebar badges ship as positioned <sup> pills — */
.side-bar-addon,
.nc-nav-badge {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    line-height: 1.4;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    position: static !important;
}

.side-bar-addon::before,
.side-bar-addon::after,
.nc-nav-badge::before,
.nc-nav-badge::after { content: none !important; }

/* — the primary action ships as a filled block; Nocturne outlines it — */
.add-order-btn,
.add-order-btn:visited {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--color-accent) !important;
    border: 1px solid var(--color-accent) !important;
    font-family: var(--font-heading);
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    padding: 7px 13px !important;
    border-radius: var(--radius-md) !important;
}

.add-order-btn:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent) !important;
    color: var(--color-accent) !important;
}

/* — the active nav item ships as a saturated block; Nocturne tints it — */
.side-bar-manu li.active > a,
.side-bar-manu .dropdown.active > .dropdown-menu .dropdown.active > a,
.side-bar-manu .dropdown.active > .dropdown-menu .dropdown.active .active {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent) !important;
    background-image: none !important;
    color: var(--color-accent) !important;
    box-shadow: none !important;
}

.side-bar-manu li.dropdown > ul li > a.active,
.side-bar-manu li .dropdown-menu li a.active,
.side-bar-manu li .dropdown-menu li li:hover > a,
.side-bar-manu li .dropdown-menu li li.active > a {
    background: transparent !important;
    color: var(--color-accent) !important;
}

/* The vendor sets hover text to var(--clr-white) — which now resolves to the
   surface colour, i.e. invisible. */
.side-bar-manu li:hover > a { color: var(--color-text) !important; }
.side-bar-manu li.active:hover > a { color: var(--color-accent) !important; }

/* The vendor paints its own caret via `li::before`; Nocturne draws one on the
   anchor, so suppress the original rather than showing both. */
.side-bar-manu li::before,
.side-bar-manu li:hover::before,
.side-bar-manu li.active::before { content: none !important; }

.side-bar,
.side-bar-logo,
.main-header-section {
    background: var(--color-bg) !important;
    background-color: var(--color-bg) !important;
}

/* ==========================================================================
   5. PLUGINS
   ========================================================================== */

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--color-bg-sunken);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    min-height: 34px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text);
    line-height: 32px;
    font-size: 12.5px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }

.select2-dropdown {
    background: var(--color-surface);
    border: 0;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
}

.select2-container--default .select2-results__option {
    color: var(--color-text);
    font-size: 12.5px;
    padding: 7px 10px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: var(--color-accent);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--color-bg-sunken);
    border: 1px solid var(--color-divider);
    color: var(--color-text);
    border-radius: var(--radius-sm);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--color-accent-800);
    border: 0;
    color: var(--color-accent-100);
    border-radius: var(--radius-sm);
    font-size: 11.5px;
}

/* choices.js */
.choices__inner {
    background: var(--color-bg-sunken);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    color: var(--color-text);
    min-height: 34px;
    padding: 4px 8px;
    font-size: 12.5px;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    background: var(--color-surface);
    border: 0;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    color: var(--color-text);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: var(--color-accent);
}

.choices__list--multiple .choices__item {
    background: var(--color-accent-800);
    border: 0;
    color: var(--color-accent-100);
    border-radius: var(--radius-sm);
    font-size: 11.5px;
}

.choices[data-type*="select-one"] .choices__input { background: var(--color-bg-sunken); color: var(--color-text); }

/* flatpickr */
.flatpickr-calendar {
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    color: var(--color-text);
}

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
.flatpickr-weekday {
    background: transparent;
    color: var(--color-neutral-400);
    fill: var(--color-neutral-400);
}

.flatpickr-day {
    color: var(--color-text);
    border-radius: var(--radius-sm);
    border: 0;
}

.flatpickr-day:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-900);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--color-neutral-700); }

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--color-surface); }

.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--color-text);
    background: transparent;
}

.flatpickr-monthDropdown-month { background: var(--color-surface); color: var(--color-text); }

/* toastr — owned by assets/css/toast.css.
   It used to be repainted here with the `background` shorthand, which reset
   background-repeat/position and let toastr's own !important status sprite
   tile across the toast. The whole toast (including its print suppression)
   now lives in one file; do not add toastr rules back into this one. */

/* jquery-confirm */
.jconfirm .jconfirm-box {
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.jconfirm .jconfirm-title { font-family: var(--font-heading); color: var(--color-text); }
.jconfirm .jconfirm-content { color: var(--color-neutral-300); font-size: 12.5px; }
.jconfirm .jconfirm-buttons button { border-radius: var(--radius-md); font-family: var(--font-heading); font-size: 12.5px; }
.jconfirm-bg { background: var(--color-bg-sunken) !important; }

/* lity lightbox */
.lity-container { color: var(--color-text); }

/* ==========================================================================
   6. SHELL — sidebar, topbar, content frame
   ========================================================================== */

/* The rail owns its own geometry here rather than inheriting the theme's.
   It is attached to `.side-bar` rather than the wrapper because the two
   panels nest differently: the super-admin wraps the nav in
   `.sidebar-container`, the business back-office renders `<nav class="side-bar">`
   directly. Anchoring on the element both have keeps one rule for both. */
.sidebar-container {
    position: static;
    width: auto;
    background: none;
    box-shadow: none;
    overflow: visible;
}

.side-bar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--nc-nav-w);
    max-width: none;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    border: 0;
    box-shadow: inset -1px 0 0 var(--color-hairline);
    transform: none;
    transition: width .28s var(--nc-ease);
    z-index: 60;
    overflow: hidden;
}

/* The rail is always present on desktop; the close affordance is for the
   mobile drawer only. */
.side-bar-logo .close-btn {
    display: none;
    background: transparent;
    border: 0;
    color: var(--color-neutral-500);
    margin-left: auto;
}

/* — brand — */
.side-bar-logo {
    height: var(--nc-topbar-h);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    background: transparent;
    border: 0;
    flex: none;
}

.side-bar-logo img {
    max-height: 26px;
    width: auto;
    object-fit: contain;
}

.nc-brand-mark {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font: 600 11px var(--font-heading);
    letter-spacing: -.02em;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.nc-brand-text { min-width: 0; transition: opacity .2s; }

.nc-brand-name {
    font: 500 13px/1.1 var(--font-heading);
    letter-spacing: -.01em;
    white-space: nowrap;
    color: var(--color-text);
}

.nc-brand-sub {
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    white-space: nowrap;
}

/* — nav — */
.side-bar-manu {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px 12px;
    background: transparent;
}

.side-bar-manu > ul,
.side-bar-manu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Group headings. The super-admin rail emits `.nc-nav-group-label`; the
   business rail already had `.rp-sidebar-group` — both land here. */
.nc-nav-group-label,
.side-bar-manu .rp-sidebar-group {
    display: block;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
    padding: 12px 8px 5px;
    white-space: nowrap;
    transition: opacity .2s;
    background: none;
    border: 0;
}

.side-bar-manu .rp-sidebar-group span { color: inherit; font-size: inherit; letter-spacing: inherit; }

/* The business rail's quick-action strip (Order List / Table List). */
.sidebar-list-container { padding: 4px 0 2px; margin-bottom: 6px !important; }

.bill-list-btn,
.table-list-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 6px;
    border-radius: 6px;
    border: 1px solid var(--color-divider);
    background: transparent !important;
    color: var(--color-neutral-300) !important;
    font: 500 11px var(--font-heading);
    white-space: nowrap;
    transition: background .16s var(--nc-ease), border-color .16s var(--nc-ease), color .16s var(--nc-ease);
}

.bill-list-btn:hover,
.table-list-btn:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent) !important;
    border-color: var(--color-neutral-600);
    color: var(--color-text) !important;
}

.bill-list-btn svg,
.table-list-btn svg { width: 14px; height: 14px; flex: none; }

.side-bar-manu > ul > li > a,
.side-bar-manu li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-neutral-400);
    white-space: nowrap;
    position: relative;
    background: transparent;
    border: 0;
    transition: background .16s var(--nc-ease), color .16s var(--nc-ease);
}

.side-bar-manu li > a:hover {
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    color: var(--color-text);
}

/* Selection is read from the <li>, never from a bare `a.active`: the vendor
   markup carries a vestigial class="active" on several top-level anchors, so
   keying on the anchor would light half the rail at once. Submenu links do
   set it conditionally, and are handled separately below. */
.side-bar-manu > ul > li.active > a,
.side-bar-manu li.active > a {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
}

.side-bar-manu li ul li > a.active {
    background: transparent;
    color: var(--color-accent);
}

.side-bar-manu .sidebar-icon {
    width: 16px;
    height: 16px;
    flex: none;
    display: grid;
    place-items: center;
    opacity: .75;
}

.side-bar-manu li.active > a .sidebar-icon { opacity: 1; }

/* The theme ships hard-coded stroke="white" / "#5B5B5B" on every nav glyph;
   force them to inherit so both themes and the active state work. */
.side-bar-manu .sidebar-icon svg { width: 16px; height: 16px; display: block; }
.side-bar-manu .sidebar-icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.side-bar-manu .sidebar-icon svg [fill]:not([fill="none"]):not([fill="currentColor"]) { fill: none; }

/* — submenus —
   theme.js re-tags every `li > ul` in the document as `.dropdown-menu`, which
   would otherwise inherit the floating-panel treatment from section 4. Reset
   it back to an inline, indented list here. */
.side-bar-manu li > ul,
.side-bar-manu li > ul.dropdown-menu {
    position: static;
    float: none;
    inset: auto;
    transform: none;
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    min-width: 0;
    padding-left: 26px;
    margin: 1px 0 2px;
    gap: 0;
}

.side-bar-manu li.active > ul.dropdown-menu,
.side-bar-manu li > ul.dropdown-menu.menu-open { display: block; }

.side-bar-manu li.dropdown > ul li > a {
    font-size: 12px;
    font-weight: 400;
    padding: 5px 8px;
    color: var(--color-neutral-500);
}

.side-bar-manu li.dropdown > ul li > a::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
    flex: none;
}

.side-bar-manu li.dropdown > ul li > a.active {
    color: var(--color-accent);
    background: transparent;
}

.side-bar-manu li.dropdown > a::after {
    content: "";
    margin-left: auto;
    width: 5px;
    height: 5px;
    border-right: 1.4px solid currentColor;
    border-bottom: 1.4px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
    transition: transform .2s var(--nc-ease);
}

.side-bar-manu li.dropdown.active > a::after,
.side-bar-manu li.dropdown.open > a::after { transform: rotate(-135deg); }

/* — sidebar badge (Add-ons "New", counts) — */
.side-bar-addon,
.nc-nav-badge {
    position: static !important;
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--color-accent-800) !important;
    color: var(--color-accent-100) !important;
    top: auto;
}

/* — sidebar footer — */
.version-text {
    flex: none;
    padding: 9px 14px;
    margin: 0 !important;
    font-size: 10px;
    color: var(--color-neutral-600);
    box-shadow: inset 0 1px 0 var(--color-hairline);
    text-align: left !important;
    white-space: nowrap;
}

.version-text .fw-bold { color: var(--color-neutral-400); }

/* — upgrade widget —
   The card shipped as a pale mint gradient with a decorative light SVG behind
   it, which left near-white heading text on a near-white ground once the rail
   went dark. Ground and illustration both go; the accent tint carries it. */
.lg-sub-plan {
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.sidebar-free-plan { background-image: none !important; }

.sidebar-free-plan h3 { color: var(--color-text) !important; }
.sidebar-free-plan h5 { color: var(--color-neutral-400) !important; }

/* The CTA stays filled: like the sign-in button it is meant to be the loudest
   mark in view, and it is the only one in the rail. What it drops is white ink
   (~3.2:1 on the accent in the dark theme) and a shadow still tinted with the
   pre-Nocturne teal. The vendor pins both with `!important`. */
.upgrate-btn {
    color: var(--color-bg-sunken) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* — collapsed rail —
   theme.js toggles `.active` on `.side-bar` and `.section-container`; that is
   the collapse signal on desktop and the drawer signal on mobile. Nocturne
   reuses it rather than adding a second, competing mechanism. */
@media (min-width: 1200px) {
    .side-bar.active { width: var(--nc-nav-w-collapsed); }

    .side-bar.active .nc-brand-text,
    .side-bar.active .sidebar-list-container,
    .side-bar.active .nc-nav-group-label,
    .side-bar.active .side-bar-addon,
    .side-bar.active .version-text,
    .side-bar.active .side-bar-manu li.dropdown > a::after {
        opacity: 0;
        pointer-events: none;
    }

    .side-bar.active .side-bar-manu li > ul { display: none !important; }

    .side-bar.active .side-bar-manu li > a {
        justify-content: center;
        padding-inline: 0;
        gap: 0;
    }

    /* The label collapses to zero width instead of being hidden, so the icon
       stays centred and the hover target keeps its full height. */
    .side-bar.active .side-bar-manu li > a {
        font-size: 0;
        overflow: hidden;
    }

    .side-bar.active .side-bar-manu .sidebar-icon { font-size: 12.5px; }

    .section-container.active { margin-left: var(--nc-nav-w-collapsed); }
}

/* — content frame —
   The horizontal offset is applied once, in section 4b, where it has to beat
   the vendor's `padding-left: 280px !important`. Setting a margin here too
   would double it. */
.section-container {
    background: var(--color-bg);
    min-height: 100vh;
    transition: padding-left .28s var(--nc-ease);
}

/* — topbar — */
.header-bg {
    background: var(--color-bg);
    box-shadow: inset 0 -1px 0 var(--color-hairline);
    border: 0;
}

.main-header-section {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.header-wrapper {
    height: var(--nc-topbar-h);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    background: transparent;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-right { margin-left: auto; }

.sidebar-opner {
    color: var(--color-neutral-400);
    cursor: pointer;
    font-size: 15px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    transition: background .16s var(--nc-ease), color .16s var(--nc-ease);
}

.sidebar-opner:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text);
}

.view-web-admin {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid var(--color-divider);
    color: var(--color-neutral-300);
    transition: border-color .16s var(--nc-ease), background .16s var(--nc-ease), color .16s var(--nc-ease);
}

.view-web-admin:hover {
    border-color: var(--color-neutral-600);
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    color: var(--color-text);
}

.view-web-admin p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}

.view-web-admin svg { width: 15px; height: 15px; }
.view-web-admin svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

/* context pill — the operator's equivalent of the design's org switcher */
.nc-context {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid var(--color-divider);
    white-space: nowrap;
    max-width: 340px;
    overflow: hidden;
}

.nc-context__name {
    font: 500 12px var(--font-heading);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

.nc-context__meta { font-size: 10.5px; color: var(--color-neutral-500); }

@media (max-width: 767.98px) {
    .nc-context__meta { display: none; }
    .nc-context { max-width: 170px; }
}

/* language picker */
.language-change .btn-light,
.language-dropdown-toggle {
    background: transparent;
    border: 1px solid var(--color-divider);
    color: var(--color-neutral-300);
    font-size: 11.5px;
    padding: 5px 9px;
    border-radius: 7px;
}

.language-dropdown-toggle:hover {
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    color: var(--color-text);
}

.flag-icon { width: 15px; height: 11px; object-fit: cover; border-radius: 2px; }

.language-check { color: var(--color-accent); }

.dropdown-menu-scroll { max-height: 300px; overflow-y: auto; }

/* notifications */
.custom-notification-toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--color-neutral-400);
}

.custom-notification-toggle:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.custom-notification-icon img {
    width: 16px;
    height: 16px;
    filter: grayscale(1) brightness(2.2);
    opacity: .8;
}

[data-theme="light"] .custom-notification-icon img { filter: grayscale(1) brightness(.55); }

.custom-notification-count {
    position: absolute;
    top: -1px;
    right: -2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: var(--color-accent-700);
    color: var(--color-accent-100);
    font: 500 8.5px/14px var(--font-body);
    text-align: center;
}

.custom-notification-dropdown {
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    border: 0;
    border-radius: var(--radius-md);
    width: 330px;
    overflow: hidden;
}

.custom-notification-header {
    padding: 10px 12px;
    box-shadow: inset 0 -1px 0 var(--color-hairline);
    font-size: 11.5px;
    color: var(--color-neutral-400);
}

.custom-notification-header p { margin: 0; }
.custom-notification-header strong { color: var(--color-text); }
.custom-notification-header .read-btn { font-size: 10.5px; color: var(--color-accent); }

.custom-notification-list { max-height: 320px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }

.custom-notification-link {
    display: block;
    padding: 9px 12px;
    color: var(--color-text);
    font-size: 11.5px;
    box-shadow: inset 0 -1px 0 var(--color-hairline);
}

.custom-notification-link:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

.custom-notification-time { display: block; font-size: 10px; color: var(--color-neutral-600); margin-top: 2px; }

.custom-notification-footer { padding: 9px 12px; text-align: center; }
.custom-view-all { font-size: 11px; color: var(--color-accent); }

/* profile */
.profile-info > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 7px 4px 4px;
    border-radius: 7px;
    color: var(--color-text);
    transition: background .16s var(--nc-ease);
}

.profile-info > a:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }

.profile-info img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 0;
}

.profile-info .profile-text { flex-direction: column; gap: 0; line-height: 1.15; }
.profile-info .profile-text .name { margin: 0; font: 500 11.5px var(--font-heading); color: var(--color-text); white-space: nowrap; }
.profile-info .profile-text .text { margin: 0; font-size: 9.5px; color: var(--color-neutral-500); white-space: nowrap; }

/* theme toggle */
.nc-theme-toggle {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--color-neutral-400);
    cursor: pointer;
    transition: background .16s var(--nc-ease), color .16s var(--nc-ease);
}

.nc-theme-toggle:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.nc-theme-toggle svg { width: 16px; height: 16px; }
/* The button shows the palette you are in, so the icon follows the light
   default and the dark theme swaps it. */
.nc-theme-toggle .nc-icon-sun { display: block; }
.nc-theme-toggle .nc-icon-moon { display: none; }
[data-theme="dark"] .nc-theme-toggle .nc-icon-sun { display: none; }
[data-theme="dark"] .nc-theme-toggle .nc-icon-moon { display: block; }

.nc-topbar-divider { width: 1px; height: 20px; background: var(--color-divider); }

/* live status pill — sync + clock */
.nc-live {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--color-neutral-500);
    white-space: nowrap;
}

.nc-live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent) 55%, transparent);
    animation: nc-pulse 2.4s infinite;
}

.nc-live-clock { font-variant-numeric: tabular-nums; color: var(--color-neutral-400); }

@keyframes nc-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes nc-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes nc-dash {
    from { stroke-dasharray: 0 400; }
    to   { stroke-dasharray: 400 0; }
}

@keyframes nc-fill { from { width: 0; } }

@keyframes nc-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* — page body — */
.erp-table-section,
.erp-state-overview-section {
    background: transparent;
    padding: 16px 0 28px;
}

/* The list panel clips its own corners so the filter bar and the table's
   first row sit flush inside the rounded ring. */
.erp-table-section > .container-fluid > .card { overflow: hidden; }

.erp-table-section .container-fluid,
.erp-state-overview-section .container-fluid { padding-inline: 18px; }

/* — list pages —
   Every index screen in the panel shares one skeleton: `.table-header`
   (title + primary action), `.table-top-form` (filters + exports), an
   optional bulk-select bar, `.responsive-table`, then pagination. Treating
   that skeleton as the design's panel gives all ~40 of them the Nocturne
   geometry without renaming anything. */
.table-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 13px 14px !important;
    background: transparent;
    border: 0 !important;
    box-shadow: none;
}

.table-header h4 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.01em;
    text-transform: none !important;
}

/* The rule under the panel head fades at both ends — Nocturne's signature. */
.table-header::after,
.table-top-form::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-divider) 40px,
            var(--color-divider) calc(100% - 40px), transparent);
}

.table-header,
.table-top-form { position: relative; }

.table-top-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 11px 14px;
    background: transparent;
    box-shadow: none;
}

.table-top-form::after { background: linear-gradient(to right, transparent, var(--color-hairline) 40px,
            var(--color-hairline) calc(100% - 40px), transparent); }

.table-top-left { gap: 8px !important; }

/* `.table-top-left .header-input` pins a near-white fill with !important, so
   the filter controls have to be re-asserted at that specificity. */
.header-input,
.table-top-left .header-input,
.table-search input,
.gpt-up-down-arrow select,
.download-btn .download-icon {
    min-height: 30px !important;
    font-size: 11.5px !important;
    padding: 4px 10px !important;
    background-color: var(--color-bg-sunken) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-divider) !important;
}

.download-btn .download-icon { padding: 0 !important; }

.table-search { min-width: 200px; max-width: 300px; flex: 1 1 240px; }

.table-search input,
.searchInput {
    padding-right: 32px !important;
    background: var(--color-bg-sunken) !important;
    border: 1px solid var(--color-divider) !important;
    color: var(--color-text) !important;
}

.table-search span img,
.gpt-up-down-arrow span { opacity: .5; }

/* Export / print actions ship as bare colour SVGs; give them the same
   bordered icon-button face as the rest of the toolbar. */
.table-top-form .d-flex > a {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--color-divider);
    transition: background .16s var(--nc-ease), border-color .16s var(--nc-ease);
}

.table-top-form .d-flex > a:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    border-color: var(--color-neutral-600);
}

.table-top-form .d-flex > a img {
    width: 14px;
    height: 14px;
    filter: grayscale(1) brightness(1.9) opacity(.75);
}

[data-theme="light"] .table-top-form .d-flex > a img { filter: grayscale(1) brightness(.6) opacity(.8); }

.table-top-form .d-flex > a:hover img { filter: none; }

/* Bulk-selection bar */
.delete-item,
.multi-delete-container {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent) !important;
    padding: 9px 14px;
    color: var(--color-text);
}

.delete-item p { margin: 0; font-size: 12px; }
.delete-item .selected-count { color: var(--color-accent); font-weight: 600; }

.delete-item .trigger-modal {
    background: transparent;
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
    border-radius: var(--radius-md);
    font: 500 11.5px var(--font-heading);
    padding: 5px 11px;
}

.delete-item .trigger-modal:hover { background: color-mix(in srgb, var(--color-danger) 14%, transparent); }

/* The per-row selection checkbox ships a white fill pinned with `!important`. */
.multi-delete {
    background-color: var(--color-bg-sunken) !important;
    border-color: var(--color-divider) !important;
}

/* — filter chrome —
   The list pages carry their own dropdown and select rather than Bootstrap's,
   so section 4's work on `.dropdown-menu` never reaches them. */
.custom-search-btn,
.custom-select {
    background: var(--color-bg-sunken);
    border-color: var(--color-divider);
    color: var(--color-text);
}

.select-wrapper.filter-dropdown .custom-select { background-color: var(--color-bg-sunken) !important; }

/* The caret is drawn as two rotated borders, not a glyph. */
.select-wrapper::after {
    border-right-color: var(--color-neutral-500);
    border-bottom-color: var(--color-neutral-500);
}

.dropdown-content.filter-dropdown-content {
    background-color: var(--color-surface-raised);
    box-shadow: var(--shadow-md);
}

.dropdown-content.filter-dropdown-content a.filter-item { color: var(--color-text); }

.dropdown-content.filter-dropdown-content a.filter-item:hover {
    background-color: color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* — plan cards — */
.plan-single-content {
    background: var(--color-surface);
    border-color: var(--color-divider);
    box-shadow: var(--shadow-sm);
}

/* The headline price ships near-black, which disappears on a dark card. */
.subscription-price { color: var(--color-text); }
.subscription-price span { color: var(--color-neutral-500); }

.recommended-banner { color: var(--color-bg-sunken); }

/* Hovering a plan fills its CTA with the accent — same ink rule as every
   other filled accent control. */
.plan-single-content:hover .plan-buy-btn { color: var(--color-bg-sunken); }

.available-status {
    color: var(--color-success-fg);
    background-color: var(--color-success-bg);
}

.upcoming-status {
    color: var(--color-warning-fg);
    background-color: var(--color-warning-bg);
}

/* Table header cells are transparent so the row-level fading rule reads
   through; the vendor paints each cell white. */
.table-header-content,
th.table-header-content {
    background: transparent !important;
    background-color: transparent !important;
    border-top: 0 !important;
    color: var(--color-neutral-500) !important;
    padding: 10px 8px !important;
}

.card-bodys { padding: 0; }

.table-custom-checkbox input { accent-color: var(--color-accent); }

.table-custom-checkbox .table-custom-checkmark,
.table-custom-checkbox .custom-checkmark {
    border-color: var(--color-divider) !important;
    background: var(--color-bg-sunken) !important;
    border-radius: 3px;
}

.table-custom-checkbox input:checked ~ .table-custom-checkmark,
.table-custom-checkbox input:checked ~ .custom-checkmark,
.checkbox-checked-red .table-custom-checkmark {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}

/* Pagination sits under the panel, not inside it. */
.erp-table-section .card > .mt-3 { padding: 10px 14px; }

/* Row action menus */
.table-action .dropdown-menu,
.action-dropdown { min-width: 160px; }

/* Status switches — the vendor ships a 44×24 control, which sets the row
   height for the whole table. Nocturne's rows are ~36px, so the switch and
   the row action button are sized to fit inside that. */
.switch,
.switch.m-0 {
    width: 34px !important;
    min-width: 34px !important;
    height: 18px !important;
    vertical-align: middle;
}

.switch .slider {
    background-color: var(--color-neutral-800) !important;
    border-radius: 999px;
}

.switch .slider:before {
    height: 14px !important;
    width: 14px !important;
    left: 2px !important;
    bottom: 2px !important;
    background-color: var(--color-neutral-100) !important;
    border-radius: 50%;
}

.switch input:checked + .slider { background-color: var(--color-accent) !important; }

.switch input:checked + .slider:before {
    -webkit-transform: translateX(16px) !important;
    transform: translateX(16px) !important;
}

/* Row action trigger */
.table .action-btn,
.table .dropdown > .dropdown-toggle,
.table-action .dropdown-toggle {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    line-height: 1;
}

.table td,
.responsive-table .table td {
    padding: 7px 8px !important;
    height: auto;
}

.table th,
.responsive-table .table th { padding: 9px 8px !important; height: auto !important; }

/* The search affordance ships as a filled accent block; Nocturne keeps it
   as a quiet glyph inside the field. */
.table-search .position-absolute {
    background: transparent !important;
    width: 26px !important;
    height: 26px !important;
    right: 3px !important;
    border-radius: var(--radius-sm);
}

.table-search .position-absolute img {
    width: 13px;
    height: 13px;
    filter: grayscale(1) brightness(1.8) opacity(.6);
}

[data-theme="light"] .table-search .position-absolute img { filter: grayscale(1) brightness(.6) opacity(.7); }

/* thead grounds: the redesign layer paints these with the page background,
   which reads as a band across the panel. */
table thead th {
    background: transparent !important;
    border-bottom: 0 !important;
    color: var(--color-neutral-500) !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

footer,
.footer-section {
    background: transparent;
    color: var(--color-neutral-600);
    font-size: 11px;
    padding: 14px 18px;
    box-shadow: inset 0 1px 0 var(--color-hairline);
}

footer a { color: var(--color-neutral-400); }

/* impersonation banner */
.impersonation-banner {
    background: var(--color-warning-bg);
    color: var(--color-warning-fg);
    font-size: 12px;
    border: 0;
}

/* action icons in table rows */
.action-btn,
.table .dropdown-toggle,
.edit-btn,
.delete-btn,
.view-btn {
    color: var(--color-neutral-400);
    background: transparent;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm);
}

.action-btn:hover,
.edit-btn:hover,
.view-btn:hover { color: var(--color-accent); border-color: var(--color-accent); }

.delete-btn:hover { color: var(--color-danger); border-color: var(--color-danger); }

/* ==========================================================================
   7. NOCTURNE COMPONENTS
   ========================================================================== */

/* — page header — */
.nc-page-head {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.nc-kicker {
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 4px;
}

.nc-page-title { margin: 0; font-size: 19px; }

.nc-page-sub { font-size: 11px; color: var(--color-neutral-500); }

.nc-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.nc-screen { animation: nc-rise .34s var(--nc-ease) both; }

/* — segmented control — */
.nc-seg {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}

.nc-seg-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--color-neutral-400);
    cursor: pointer;
    background: transparent;
    border: 0;
    margin: 0;
}

.nc-seg-opt + .nc-seg-opt { border-left: 1px solid var(--color-divider); }

.nc-seg-opt:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }

.nc-seg-opt.is-active,
.nc-seg-opt.active {
    color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* The business dashboard's period switcher is the same control under the
   redesign layer's name — including a drop shadow still tinted with the
   pre-Nocturne teal. It reads as the segmented control, not as a filled pill. */
.rp-segment__btn { font-family: var(--font-heading); color: var(--color-neutral-400); }

.rp-segment__btn:hover { color: var(--color-text); }

.rp-segment__btn.is-active {
    background: transparent;
    color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* `.rp-btn` is the redesign layer's filled default. White on the accent is
   ~3.2:1 in the dark theme, so it takes the outlined primary treatment its
   own `--primary` modifier already has. */
.rp-btn {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    font-family: var(--font-heading);
}

.rp-btn:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-accent);
}

/* — KPI tiles — */
.nc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.nc-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 11px 12px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.nc-kpi--lead::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--color-accent);
    opacity: .7;
}

.nc-kpi__label {
    font-size: 9.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
}

.nc-kpi__value {
    font: 500 23px/1 var(--font-heading);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--color-text);
}

.nc-kpi__value small { font-size: 12px; color: var(--color-neutral-500); }

.nc-kpi__delta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--color-neutral-300);
}

.nc-kpi__delta .nc-vs { color: var(--color-neutral-600); }
.nc-kpi__delta.is-up { color: var(--color-success); }
.nc-kpi__delta.is-down { color: var(--color-danger); }

.nc-spark { width: 100%; height: 22px; margin-top: 2px; display: block; }
.nc-spark polyline { animation: nc-dash 1.1s ease-out both; }

/* — meter — */
.nc-meter {
    height: 4px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    overflow: hidden;
    margin-top: 8px;
}

.nc-meter__fill {
    height: 100%;
    background: var(--color-accent);
    animation: nc-fill 1s var(--nc-ease) both;
}

.nc-meter--inline {
    display: inline-block;
    width: 56px;
    margin: 0;
    vertical-align: middle;
}

/* — panel (card with a titled head and fading rule) — */
.nc-panel {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.nc-panel__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    flex-wrap: wrap;
}

.nc-panel__title { font: 500 12.5px var(--font-heading); color: var(--color-text); }
.nc-panel__meta { font-size: 10.5px; color: var(--color-neutral-500); }
.nc-panel__head .nc-panel__spacer { margin-left: auto; }

.nc-panel__rule {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-divider) 40px,
            var(--color-divider) calc(100% - 40px), transparent);
}

.nc-panel__body { padding: 12px; }

/* — feed / list rows — */
.nc-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    font-size: 11.5px;
    background: linear-gradient(to right, transparent, var(--color-hairline) 40px,
            var(--color-hairline) calc(100% - 40px), transparent) no-repeat top / 100% 1px;
}

.nc-row:hover { background-color: color-mix(in srgb, var(--color-text) 3.5%, transparent); }

.nc-row__code { font-variant-numeric: tabular-nums; color: var(--color-neutral-400); }
.nc-row__main { min-width: 0; flex: 1; }
.nc-row__title { font-size: 11.5px; font-weight: 500; color: var(--color-text); }
.nc-row__meta { font-size: 10.5px; color: var(--color-neutral-500); }
.nc-row__ago { margin-left: auto; font-size: 10px; color: var(--color-neutral-600); white-space: nowrap; }

.nc-dot {
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background: var(--color-neutral-500);
}

.nc-dot--accent  { background: var(--color-accent); }
.nc-dot--success { background: var(--color-success); }
.nc-dot--warning { background: var(--color-warning); }
.nc-dot--danger  { background: var(--color-danger); }

/* — skeletons —
   The loading shimmer sweeps a 65%-white band, which reads as a bright flash
   on a dark ground. Sweep the text colour at low alpha instead. */
.rp-skeleton,
.nc-skeleton {
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
    border-radius: var(--radius-sm);
}

.is-loading::after {
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--color-text) 9%, transparent),
        transparent) !important;
}

/* — empty state — */
.nc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 42px 18px;
    color: var(--color-neutral-500);
    font-size: 12px;
    text-align: center;
}

.nc-empty__title { font: 500 13px var(--font-heading); color: var(--color-neutral-300); }

/* — chart wrappers keep the design's tabular, low-chrome look — */
.rp-chart-wrap,
.nc-chart { position: relative; }

.rp-legend,
.nc-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 10.5px;
    color: var(--color-neutral-500);
}

.nc-legend__item,
.rp-legend__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-size: 11px;
}

.nc-legend__dot,
.rp-legend__dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 2px;
}

.nc-legend__label,
.rp-legend__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-neutral-300);
}

.nc-legend__val,
.rp-legend__val { color: var(--color-text); font-weight: 500; }

/* — avatar — */
.nc-avatar,
.rp-avatar {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-accent-800);
    color: var(--color-accent-100);
    font: 500 10px var(--font-heading);
    text-transform: uppercase;
}

/* ==========================================================================
   8. OPERATIONS — POS, table view, bill screen, kitchen display
   ==========================================================================
   These four screens were authored before Nocturne, straight onto white with
   the pre-brand red (#C62828) and the vendor's orange (#ff7b00 / #f97316).
   Section 4 only neutralises the chrome the vendor shares across pages, so
   none of it reaches these bespoke families — they are re-pointed at the
   tokens here rather than rewritten in custom.css / admin-style.css, which
   keeps those files serving as the plain light fallback.

   Status colour is the working vocabulary of these screens — a table is free
   or occupied, a round is pending or ready — so state reads as a tinted
   ground with a matching foreground, the same weight of mark as a tag
   elsewhere. The kitchen display's action row is the deliberate exception:
   it is read at arm's length across a pass, so it keeps a solid fill.
   ========================================================================== */

/* — POS sale screen — */

.sales-left-content {
    background-color: var(--color-surface);
    border-left: 1px solid var(--color-hairline);
}

.search-container {
    border-color: var(--color-divider);
    background: var(--color-bg-sunken);
}

.search-box {
    background: transparent;
    color: var(--color-text);
}

.search-box::placeholder { color: var(--color-neutral-500); }

.search-icon { color: var(--color-neutral-500); }

/* Product tiles. The vendor hovers to its own orange; Nocturne lifts the edge
   to the accent and leaves the ground alone, so the photography stays the
   brightest thing in the grid. */
.items-card-container .items-card-content {
    background-color: var(--color-surface);
    border-color: var(--color-divider);
}

.items-card-container .items-card-content:hover { border-color: var(--color-accent); }

.items-card-content .items,
.items-card-content .price { color: var(--color-text); }

/* The discount flash sits on the accent, which is mid-value in both themes —
   the sunken ground is the one neutral that stays legible on top of it. */
.items-card-content .discount { color: var(--color-bg-sunken); }

.no-products p,
.no-item-container h3,
.no-item-container p { color: var(--color-neutral-500); }

/* Sale-type tabs — Dine In / Takeaway / Delivery. */
.tab-btn {
    background: transparent;
    border-color: var(--color-divider);
    color: var(--color-neutral-400);
    font-family: var(--font-heading);
}

.tab-btn:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    border-color: var(--color-divider);
    color: var(--color-text);
}

.tab-btn.active-sale-type {
    background: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* — cart — */

.product-cart-tr td { border-color: var(--color-hairline); }

.cart-price,
.cart-subtotal,
.cart-qty-number,
.cart-qty { color: var(--color-text); }

/* The vendor pins the stepper's fill with `!important`. */
.incre-decre {
    background-color: var(--color-surface-raised) !important;
    border-color: var(--color-divider) !important;
    color: var(--color-text);
}

.incre-decre i { color: var(--color-text); }

.incre-decre:hover { border-color: var(--color-accent) !important; }
.incre-decre:hover i { color: var(--color-accent); }

.cart-qty-control button {
    background: var(--color-surface-raised);
    border-color: var(--color-divider);
    color: var(--color-text);
}

.cart-qty-control .cart-plus {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.cart-unit-price {
    color: var(--color-text);
    border-color: var(--color-divider) !important;
}

.cart-remove-btn,
.x-btn { color: var(--color-danger); }

/* — category rail — */

.category-btn-container,
.burger-card,
.addons-container {
    background: var(--color-surface);
    border-color: var(--color-divider);
}

.category-btn {
    background: transparent;
    border-color: var(--color-divider);
    color: var(--color-neutral-400);
    font-family: var(--font-heading);
}

.category-btn:hover,
.category-btn.active {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.custom-add-button {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border-left-color: var(--color-hairline);
    color: var(--color-accent);
}

/* — checkout panel — */

/* The vendor gives each of these its own hue; the roles survive, mapped onto
   the status ramp so they sit at one lightness with everything else. */
.bottom-button {
    background: transparent;
    font-family: var(--font-heading);
}

.bottom-button.cancel { border-color: var(--color-danger); color: var(--color-danger); }
.bottom-button.cancel:hover { background: color-mix(in srgb, var(--color-danger) 14%, transparent); color: var(--color-danger); }

.bottom-button.kot { border-color: var(--color-info); color: var(--color-info); }
.bottom-button.kot:hover { background: color-mix(in srgb, var(--color-info) 14%, transparent); color: var(--color-info); }

.bottom-button.print { border-color: var(--color-accent); color: var(--color-accent); }
.bottom-button.print:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent); }

/* The pay bar is the one terminal action on the screen and the only filled
   accent in the POS — it should be the thing your eye lands on last. */
.payment-footer {
    background: var(--color-accent);
    color: var(--color-bg-sunken);
}

.footer-label,
.pay-amount { color: inherit; }

.badge-box {
    background: var(--color-bg-sunken);
    color: var(--color-accent);
    box-shadow: none;
}

.pay-label-text { box-shadow: none; }

.cart-footer { border-top-color: var(--color-hairline); }

/* The cart's coupon and VAT figures ship near-black — invisible once the
   panel goes dark. */
.value { color: var(--color-text); }

.custom-input { border-color: var(--color-divider); }

.qty-btn {
    background: var(--color-surface-raised);
    color: var(--color-text);
}

.burger-time { color: var(--color-neutral-500); }

/* White on the accent falls to ~2.9:1 in the dark theme, so filled accent
   controls take the sunken ground as their ink instead. */
.add-to-cart { color: var(--color-bg-sunken); }

.variation-btn.selected {
    background: var(--color-accent);
    color: var(--color-bg-sunken);
}

.choices-select { background-color: var(--color-bg-sunken); }

/* — action bar on the sale edit screen — */

.edit-action-btn {
    font-family: var(--font-heading);
    border: 1px solid transparent;
    background: transparent;
    transition: background .16s var(--nc-ease);
}

.edit-action-btn:hover {
    opacity: 1;
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.edit-action-kot { border-color: var(--color-info); color: var(--color-info); }
.edit-action-update { border-color: var(--color-divider); color: var(--color-text); }
.edit-action-payment { border-color: var(--color-accent); color: var(--color-accent); }

/* — table view — */

.table-view-title {
    color: var(--color-text);
    font-family: var(--font-heading);
}

.table-view-subtitle,
.legend-item,
.table-grid-label { color: var(--color-neutral-500); }

.btn-new-order {
    background: transparent;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    font-family: var(--font-heading);
}

.btn-new-order:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-accent);
}

.legend-dot.available { background: var(--color-success); }
.legend-dot.occupied { background: var(--color-danger); }
.legend-dot.booked { background: var(--color-warning); }
.legend-dot.ready { background: var(--color-success); }

.table-view-empty { color: var(--color-neutral-500); }
.table-view-empty a { color: var(--color-accent); }

/* The empty-state glyph carries its greys as presentation attributes. */
.table-view-empty svg rect { fill: var(--color-neutral-700); }

.table-card {
    background: var(--color-surface);
    border-color: var(--color-divider);
    color: var(--color-text);
}

.table-card:hover { box-shadow: var(--shadow-md); }

/* The status pill's default ground is a black wash — invisible on a dark
   surface — so every state names its own. */
.table-card-status { background: var(--color-neutral-800); color: var(--color-text); }

.table-card.table-available { border-color: color-mix(in srgb, var(--color-success) 45%, transparent); }
.table-card.table-available:hover { border-color: var(--color-success); }
.table-card.table-available .table-card-icon { color: var(--color-success); }
.table-card.table-available .table-card-status { background: var(--color-success-bg); color: var(--color-success-fg); }

.table-card.table-occupied {
    background: var(--color-surface);
    border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);
}

.table-card.table-occupied:hover { border-color: var(--color-danger); }
.table-card.table-occupied .table-card-icon { color: var(--color-danger); }
.table-card.table-occupied .table-card-status { background: var(--color-danger-bg); color: var(--color-danger-fg); }

.table-card.table-reserved {
    background: var(--color-surface);
    border-color: color-mix(in srgb, var(--color-warning) 45%, transparent);
}

.table-card.table-reserved:hover { border-color: var(--color-warning); }
.table-card.table-reserved .table-card-icon { color: var(--color-warning); }
.table-card.table-reserved .table-card-status { background: var(--color-warning-bg); color: var(--color-warning-fg); }

.table-card-capacity { color: var(--color-neutral-500); }
.table-card-amount { color: var(--color-accent); }

.table-ready-alert {
    background: var(--color-success);
    color: var(--color-success-bg);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--color-success) 45%, transparent);
}

/* — table picker inside the POS — */

.table-select-trigger {
    background: var(--color-bg-sunken);
    border-color: var(--color-divider);
    color: var(--color-text);
}

.table-select-trigger:hover,
.table-select-trigger:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.table-select-trigger .tst-placeholder,
.table-select-trigger .tst-caret { color: var(--color-neutral-500); }

.table-grid-item {
    background: var(--color-surface);
    border-color: var(--color-divider);
    color: var(--color-text);
}

.table-grid-item:hover {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.table-grid-item.selected {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
    color: var(--color-text);
}

.table-grid-item.table-booked {
    background: var(--color-surface);
    border-color: color-mix(in srgb, var(--color-warning) 45%, transparent);
}

.table-grid-item.table-booked:hover { background: color-mix(in srgb, var(--color-warning) 14%, transparent); }

.table-grid-item.table-booked.selected {
    border-color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 24%, transparent);
    color: var(--color-text);
}

.table-grid-badge { background: var(--color-warning-bg); color: var(--color-warning-fg); }

.table-grid-item.selected .table-grid-badge {
    background: color-mix(in srgb, var(--color-text) 14%, transparent);
    color: var(--color-text);
}

.table-grid-view .table-grid-item.table-occupied {
    background: var(--color-danger-bg);
    border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);
    color: var(--color-danger-fg);
}

.table-grid-view .table-grid-item.table-occupied .table-grid-badge {
    background: color-mix(in srgb, var(--color-danger) 22%, transparent);
    color: var(--color-danger-fg);
}

/* — bill screen — */

.tb-title {
    color: var(--color-text);
    font-family: var(--font-heading);
}

.tb-capacity,
.tb-section-label,
.tb-meta-label,
.tb-items-header,
.tb-item-mod,
.tb-total-row,
.tb-empty-sub,
.tb-kot-time,
.tb-kot-items-summary { color: var(--color-neutral-500); }

.tb-back {
    color: var(--color-neutral-400);
    border-color: var(--color-divider);
}

.tb-back:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text);
}

.tb-empty-title { color: var(--color-text); }

.tb-body {
    background: var(--color-surface);
    border-color: var(--color-divider);
}

.tb-meta {
    background: var(--color-bg-sunken);
    border-bottom-color: var(--color-hairline);
}

.tb-meta-value { color: var(--color-text); }

.tb-status-badge { background: var(--color-warning-bg); color: var(--color-warning-fg); }

.tb-items-header,
.tb-totals,
.tb-actions { border-color: var(--color-hairline); }

.tb-item-row {
    border-bottom-color: var(--color-hairline);
    color: var(--color-text);
}

.tb-discount { color: var(--color-success); }
.tb-due { color: var(--color-danger); }

.tb-grand-total {
    color: var(--color-text);
    border-top-color: var(--color-divider);
}

.tb-btn-primary,
.tb-btn-secondary,
.tb-btn-outline {
    font-family: var(--font-heading);
    border: 1px solid transparent;
    transition: background .16s var(--nc-ease);
}

.tb-btn-primary {
    background: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.tb-btn-primary:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-accent);
}

.tb-btn-secondary,
.tb-btn-outline {
    background: transparent;
    border-color: var(--color-divider);
    color: var(--color-text);
}

.tb-btn-secondary:hover,
.tb-btn-outline:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text);
}

/* kitchen rounds on the bill */
.tb-kots {
    background: var(--color-bg-sunken);
    border-bottom-color: var(--color-hairline);
}

.tb-kot-row { border-bottom-color: var(--color-hairline); }

.tb-kot-number { color: var(--color-text); }

.tb-kot-pending { background: var(--color-info-bg); color: var(--color-info-fg); }
.tb-kot-preparing { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.tb-kot-ready { background: var(--color-success-bg); color: var(--color-success-fg); }
.tb-kot-served { background: var(--color-neutral-800); color: var(--color-neutral-400); }
.tb-kot-cancelled { background: var(--color-danger-bg); color: var(--color-danger-fg); }

.tb-serve-btn {
    background: transparent;
    border: 1px solid var(--color-success);
    color: var(--color-success);
    font-family: var(--font-heading);
}

.tb-serve-btn:hover { background: color-mix(in srgb, var(--color-success) 14%, transparent); }

.tb-kot-reprint { color: var(--color-neutral-500); }
.tb-kot-reprint:hover { color: var(--color-text); }

.tb-unsent {
    background: var(--color-warning-bg);
    border-color: color-mix(in srgb, var(--color-warning) 45%, transparent);
    color: var(--color-warning-fg);
}

/* — kitchen display — */

.kds-title {
    color: var(--color-text);
    font-family: var(--font-heading);
}

.kds-subtitle,
.kds-legend-item,
.kds-empty,
.kds-card-kot,
.kds-card-time,
.kds-item-mod { color: var(--color-neutral-500); }

.kds-empty svg path { stroke: var(--color-neutral-700); }

.kds-dot-pending { background: var(--color-info); }
.kds-dot-preparing { background: var(--color-warning); }
.kds-dot-ready { background: var(--color-success); }

.kds-card {
    background: var(--color-surface);
    border-color: var(--color-divider);
}

.kds-card.kds-pending { border-color: color-mix(in srgb, var(--color-info) 45%, transparent); }
.kds-card.kds-preparing { border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); }
.kds-card.kds-ready { border-color: color-mix(in srgb, var(--color-success) 45%, transparent); }

.kds-card-head { border-bottom-color: var(--color-hairline); }

.kds-pending .kds-card-head { background: var(--color-info-bg); }
.kds-preparing .kds-card-head { background: var(--color-warning-bg); }
.kds-ready .kds-card-head { background: var(--color-success-bg); }

.kds-card-table,
.kds-item-qty { color: var(--color-text); }

.kds-item {
    border-bottom-color: var(--color-hairline);
    color: var(--color-text);
}

.kds-card-actions { border-top-color: var(--color-hairline); }

/* Solid fills, unlike the rest of the system: a line cook reads this row from
   across the pass, at a glance, with their hands full. */
.kds-action {
    font-family: var(--font-heading);
    color: var(--color-bg-sunken);
}

.kds-btn-start { background: var(--color-info); }
.kds-btn-ready { background: var(--color-success); }
.kds-btn-served { background: var(--color-neutral-400); }

.kds-waiting { color: var(--color-success); }

/* ==========================================================================
   AUTH
   ==========================================================================
   The sign-in split-screen keeps its layout; only the palette moves. The hero
   takes the deep indigo ground with an accent bloom instead of the old teal.
   ========================================================================== */

.rp-auth { background: var(--color-bg); font-family: var(--font-body); }

/* The hero keeps its deep indigo ground in both themes, so the ramp steps its
   copy is written against are pinned here to their dark-theme values. Scoping
   them on the element rather than rewriting each child rule means the hero
   stays readable whichever palette the rest of the page is in. */
.rp-auth__hero {
    --color-neutral-100: #f3f5fe;
    --color-accent: #9184d9;
    --color-accent-200: #e7e5fe;

    color: var(--color-neutral-100);
    background:
        radial-gradient(900px 520px at 112% -12%, color-mix(in srgb, var(--color-accent) 34%, transparent), transparent 58%),
        radial-gradient(680px 520px at -12% 120%, rgba(0, 0, 0, .34), transparent 60%),
        linear-gradient(155deg, #2b2741 0%, #423a6a 48%, #1c1e2e 100%) !important;
}

.rp-auth__eyebrow {
    background: color-mix(in srgb, var(--color-accent) 24%, transparent);
    color: var(--color-accent-200);
    font-family: var(--font-heading);
}

.rp-auth__headline {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-neutral-100);
}

.rp-auth__subcopy { color: color-mix(in srgb, var(--color-neutral-100) 78%, transparent); }

.rp-auth__window {
    background: color-mix(in srgb, var(--color-neutral-100) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-neutral-100) 16%, transparent);
}

.rp-auth__panel,
.rp-auth__form,
.rp-auth__card { background: var(--color-bg); }

.rp-auth__title { color: var(--color-text); font-family: var(--font-heading); }
.rp-auth__lead,
.rp-auth__meta,
.rp-auth__divider { color: var(--color-neutral-500); }
.rp-auth__forgot,
.rp-auth__create,
.rp-auth__back { color: var(--color-accent); }

.rp-auth__mock,
.rp-auth__mock-kpi,
.rp-auth__mock-rows > * {
    background: color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-neutral-100) 16%, transparent);
}

.rp-auth .rp-input.form-control {
    background: var(--color-bg-sunken) !important;
    color: var(--color-text) !important;
    border-color: var(--color-divider) !important;
}

.rp-auth .rp-input.form-control::placeholder { color: var(--color-neutral-600); }

/* The sign-in CTA is the one place a filled accent earns its keep. White on
   the accent fails contrast, so it takes the dark ground as its label. */
.rp-auth .btn-primary,
.rp-auth .rp-auth__submit,
.rp-auth button[type="submit"] {
    background: var(--color-accent) !important;
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-accent-900) !important;
    font-weight: 600 !important;
}

.rp-auth .btn-primary:hover,
.rp-auth .rp-auth__submit:hover,
.rp-auth button[type="submit"]:hover {
    background: var(--color-accent-200) !important;
    background-color: var(--color-accent-200) !important;
    border-color: var(--color-accent-200) !important;
    color: var(--color-accent-900) !important;
}

/* The sign-in card carries the dark-ink wordmark; invert it on the dark panel
   the same way the hero already inverts its own copy. */
[data-theme="dark"] .rp-auth__logo img,
[data-theme="dark"] .rp-auth__card img { filter: brightness(0) invert(1); }

/* The hero's own lockup sits on the indigo ground whatever the page theme is,
   so it always takes the light-ink cut. */
.rp-auth__hero img.rp-brand-lockup__on-light { display: none; }
.rp-auth__hero img.rp-brand-lockup__on-dark { display: block; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {
    .side-bar {
        transform: translateX(-100%);
        transition: transform .28s var(--nc-ease);
        box-shadow: var(--shadow-lg);
        z-index: 1050;
        overflow: visible;
    }

    .side-bar.active { transform: none; width: var(--nc-nav-w); }

    .side-bar-logo .close-btn { display: block; }

    /* theme.js injects this scrim as the first child of .side-bar; on mobile
       it has to cover the page, not the rail. */
    .side-bar.active > .overlay {
        position: fixed;
        inset: 0 0 0 var(--nc-nav-w);
        background: color-mix(in srgb, var(--color-bg-sunken) 70%, transparent);
    }
}

@media (max-width: 767.98px) {
    .header-wrapper { padding-inline: 12px; gap: 10px; }
    .profile-info .profile-text { display: none !important; }
    .nc-live { display: none; }
    .erp-table-section .container-fluid,
    .erp-state-overview-section .container-fluid { padding-inline: 12px; }
    .nc-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ==========================================================================
   PRINT — exports and invoices stay on white paper
   ========================================================================== */

@media print {
    :root {
        --color-bg: #fff;
        --color-surface: #fff;
        --color-text: #000;
        --color-neutral-400: #444;
        --color-neutral-500: #555;
        --shadow-sm: none;
        --shadow-md: none;
    }

    .sidebar-container,
    .header-bg,
    footer { display: none !important; }

    .section-container { margin-left: 0; }
}

/* ==========================================================================
   BRAND — RekordPlate lockup and mark

   The lockups already carry their own colour, so they must escape the blanket
   `brightness(0) invert(1)` the auth screens apply to legacy raster wordmarks.
   Each `auto` lockup ships both grounds and CSS picks one, which keeps the
   theme toggle instant and avoids a flash of the wrong logo.
   ========================================================================== */

.rp-brand-asset { filter: none !important; }

.rp-brand-lockup { display: inline-flex; align-items: center; max-width: 100%; }
.rp-brand-lockup img { display: block; width: auto; max-width: 100%; }

/* Light ground is the default; dark theme swaps in the light-ink lockup.
   These carry an `img` qualifier so they outrank `.rp-brand-lockup img`. */
img.rp-brand-lockup__on-dark { display: none; }

[data-theme="dark"] img.rp-brand-lockup__on-light { display: none; }
[data-theme="dark"] img.rp-brand-lockup__on-dark { display: block; }

/* The sidebar mark replaces a text badge, so drop the badge's chrome. */
.nc-brand-mark--img {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    object-fit: contain;
}

/* Invoices print on white whatever the screen theme is. */
@media print {
    img.rp-brand-lockup__on-dark { display: none !important; }
    img.rp-brand-lockup__on-light { display: block !important; }
}