/*
 * NexERP theme on top of Bootstrap 5.3.
 * - Brand colour #9B1722 (brand-500) replaces Bootstrap's blue "primary".
 * - TailAdmin-style layout: white sidebar, light-grey page, rounded cards.
 * - Light and dark mode: <html data-bs-theme="light|dark">. Every colour
 *   below comes from a --nx-* token that is redefined for dark mode, so new
 *   styles should use the tokens and get dark mode for free.
 */

/* ------------------------------------------------------------------ */
/* Font                                                                */
/* ------------------------------------------------------------------ */
@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/poppins-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/poppins-latin-500-normal.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/poppins-latin-600-normal.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/poppins-latin-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */
:root {
    --nx-brand-25: #fcf8f8;
    --nx-brand-50: #f8eff0;
    --nx-brand-100: #f0dcde;
    --nx-brand-200: #e1b9bd;
    --nx-brand-300: #cd8b90;
    --nx-brand-400: #b45159;
    --nx-brand-500: #9b1722; /* main: buttons, active menu, links */
    --nx-brand-600: #84141d; /* hover */
    --nx-brand-700: #6c1018;
    --nx-brand-800: #550d13;
    --nx-brand-900: #410a0e;
    --nx-brand-950: #2b060a;
    --nx-brand-rgb: 155, 23, 34;

    --nx-gray-25: #fcfcfd;
    --nx-gray-50: #f9fafb;
    --nx-gray-100: #f2f4f7;
    --nx-gray-200: #e4e7ec;
    --nx-gray-300: #d0d5dd;
    --nx-gray-400: #98a2b3;
    --nx-gray-500: #667085;
    --nx-gray-600: #475467;
    --nx-gray-700: #344054;
    --nx-gray-800: #1d2939;
    --nx-gray-900: #101828;
    --nx-gray-950: #0c111d;

    --nx-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --nx-sidebar-width: 290px;
    --nx-sidebar-collapsed-width: 90px;
    --nx-header-height: 72px;
    --nx-radius: 0.5rem;
    --nx-radius-lg: 0.75rem;
    --nx-radius-xl: 1rem;
    --nx-transition: 0.3s ease-in-out;
}

/* Light theme (default) */
:root,
[data-bs-theme="light"] {
    --nx-page-bg: var(--nx-gray-50);
    --nx-surface: #ffffff;               /* cards, sidebar, header */
    --nx-surface-raised: #ffffff;        /* dropdowns, modals, popovers */
    --nx-surface-hover: var(--nx-gray-100);
    --nx-surface-subtle: var(--nx-gray-50);
    --nx-input-bg: #ffffff;
    --nx-border: var(--nx-gray-200);
    --nx-border-strong: var(--nx-gray-300);
    --nx-text: var(--nx-gray-700);
    --nx-text-strong: var(--nx-gray-800);
    --nx-text-muted: var(--nx-gray-500);
    --nx-text-faint: var(--nx-gray-400);
    --nx-link: var(--nx-brand-500);
    --nx-link-hover: var(--nx-brand-600);
    --nx-menu-text: var(--nx-gray-700);
    --nx-menu-icon: var(--nx-gray-500);
    --nx-menu-hover-bg: var(--nx-gray-100);
    --nx-menu-active-bg: var(--nx-brand-50);
    --nx-menu-active-text: var(--nx-brand-500);
    --nx-focus-ring: rgba(var(--nx-brand-rgb), 0.12);
    --nx-focus-border: var(--nx-brand-300);
    --nx-backdrop: rgba(16, 24, 40, 0.5);
    --nx-shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    --nx-shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.1), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
    --nx-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
    --nx-scrollbar: var(--nx-gray-200);
    --nx-skeleton: var(--nx-gray-100);

    /* Soft status colours (badges, icons, small panels) */
    --nx-primary-soft-bg: var(--nx-brand-50);    --nx-primary-soft-text: var(--nx-brand-600);
    --nx-success-soft-bg: #ecfdf3;               --nx-success-soft-text: #027a48;
    --nx-warning-soft-bg: #fffaeb;               --nx-warning-soft-text: #b54708;
    --nx-danger-soft-bg: #fef3f2;                --nx-danger-soft-text: #b42318;
    --nx-info-soft-bg: #f0f9ff;                  --nx-info-soft-text: #026aa2;
    --nx-secondary-soft-bg: var(--nx-gray-100);  --nx-secondary-soft-text: var(--nx-gray-700);

    /* Chart colours (see CLAUDE.md) */
    --nx-chart-actual: #9b1722;
    --nx-chart-odo: #cd8b90;
    --nx-chart-budget: #344054;
    --nx-chart-compare-1: #667085;
    --nx-chart-compare-2: #98a2b3;
    /* Categorical series (e.g. top customers): brand first, then distinct hues */
    --nx-chart-cat-1: #9b1722; --nx-chart-cat-2: #2e6f9e; --nx-chart-cat-3: #c77c02; --nx-chart-cat-4: #2f855a; --nx-chart-cat-5: #6b46c1;
    --nx-chart-cat-6: #0e7490; --nx-chart-cat-7: #b45309; --nx-chart-cat-8: #be185d; --nx-chart-cat-9: #4d7c0f; --nx-chart-cat-10: #475467;
    --nx-chart-text: var(--nx-gray-500);
    --nx-chart-grid: var(--nx-gray-100);

    /* Bootstrap mapping */
    --bs-font-sans-serif: var(--nx-font);
    --bs-body-font-family: var(--nx-font);
    --bs-body-font-size: 0.9375rem;
    --bs-body-bg: var(--nx-surface);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: var(--nx-text);
    --bs-emphasis-color: var(--nx-text-strong);
    --bs-heading-color: var(--nx-text-strong);
    --bs-secondary-color: var(--nx-text-muted);
    --bs-tertiary-color: var(--nx-text-faint);
    --bs-secondary-bg: var(--nx-gray-100);
    --bs-tertiary-bg: var(--nx-gray-50);
    --bs-border-color: var(--nx-border);
    --bs-border-color-translucent: rgba(16, 24, 40, 0.1);
    --bs-border-radius: var(--nx-radius);
    --bs-border-radius-lg: var(--nx-radius-lg);
    --bs-border-radius-xl: var(--nx-radius-xl);

    --bs-primary: #9b1722;
    --bs-primary-rgb: 155, 23, 34;
    --bs-primary-text-emphasis: var(--nx-brand-700);
    --bs-primary-bg-subtle: var(--nx-brand-50);
    --bs-primary-border-subtle: var(--nx-brand-200);
    --bs-link-color: var(--nx-link);
    --bs-link-color-rgb: 155, 23, 34;
    --bs-link-hover-color: var(--nx-link-hover);
    --bs-link-hover-color-rgb: 132, 20, 29;
    --bs-focus-ring-color: var(--nx-focus-ring);
    --bs-form-valid-color: #039855;
    --bs-form-valid-border-color: #039855;
    --bs-form-invalid-color: #d92d20;
    --bs-form-invalid-border-color: #f04438;

    /* DataTables selected row */
    --dt-row-selected: 155, 23, 34;
    --dt-row-selected-text: 255, 255, 255;
    --dt-row-selected-link: 255, 255, 255;

    color-scheme: light;
}

/* Dark theme */
[data-bs-theme="dark"] {
    --nx-page-bg: var(--nx-gray-900);
    --nx-surface: #161e2e;
    --nx-surface-raised: #1a2231;
    --nx-surface-hover: rgba(255, 255, 255, 0.05);
    --nx-surface-subtle: rgba(255, 255, 255, 0.03);
    --nx-input-bg: var(--nx-gray-900);
    --nx-border: var(--nx-gray-800);
    --nx-border-strong: #344054;
    --nx-text: var(--nx-gray-400);
    --nx-text-strong: rgba(255, 255, 255, 0.9);
    --nx-text-muted: #7d889b;
    --nx-text-faint: var(--nx-gray-500);
    --nx-link: var(--nx-brand-300);
    --nx-link-hover: var(--nx-brand-200);
    --nx-menu-text: var(--nx-gray-300);
    --nx-menu-icon: var(--nx-gray-400);
    --nx-menu-hover-bg: rgba(255, 255, 255, 0.05);
    --nx-menu-active-bg: rgba(var(--nx-brand-rgb), 0.22);
    --nx-menu-active-text: var(--nx-brand-200);
    --nx-focus-ring: rgba(205, 139, 144, 0.25);
    --nx-focus-border: var(--nx-brand-400);
    --nx-backdrop: rgba(0, 0, 0, 0.7);
    --nx-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --nx-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --nx-shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.5);
    --nx-scrollbar: #344054;
    --nx-skeleton: rgba(255, 255, 255, 0.06);

    --nx-primary-soft-bg: rgba(var(--nx-brand-rgb), 0.22);  --nx-primary-soft-text: var(--nx-brand-200);
    --nx-success-soft-bg: rgba(18, 183, 106, 0.15);         --nx-success-soft-text: #6ce9a6;
    --nx-warning-soft-bg: rgba(247, 144, 9, 0.15);          --nx-warning-soft-text: #fec84b;
    --nx-danger-soft-bg: rgba(240, 68, 56, 0.15);           --nx-danger-soft-text: #fda29b;
    --nx-info-soft-bg: rgba(11, 165, 236, 0.15);            --nx-info-soft-text: #7cd4fd;
    --nx-secondary-soft-bg: rgba(255, 255, 255, 0.06);      --nx-secondary-soft-text: var(--nx-gray-300);

    --nx-chart-actual: #b45159;
    --nx-chart-odo: #e1b9bd;
    --nx-chart-budget: #d0d5dd;
    --nx-chart-compare-1: #98a2b3;
    --nx-chart-compare-2: #667085;
    /* Categorical series (e.g. top customers), lighter for dark backgrounds */
    --nx-chart-cat-1: #e1707a; --nx-chart-cat-2: #6aa9d8; --nx-chart-cat-3: #f0b44c; --nx-chart-cat-4: #68c08f; --nx-chart-cat-5: #a78bfa;
    --nx-chart-cat-6: #4fc3d9; --nx-chart-cat-7: #e08c4a; --nx-chart-cat-8: #f472b6; --nx-chart-cat-9: #9acd52; --nx-chart-cat-10: #98a2b3;
    --nx-chart-text: var(--nx-gray-400);
    --nx-chart-grid: var(--nx-gray-800);

    --bs-body-bg: var(--nx-surface);
    --bs-body-bg-rgb: 22, 30, 46;
    --bs-body-color: var(--nx-text);
    --bs-emphasis-color: var(--nx-text-strong);
    --bs-heading-color: var(--nx-text-strong);
    --bs-secondary-color: var(--nx-text-muted);
    --bs-tertiary-color: var(--nx-text-faint);
    --bs-secondary-bg: var(--nx-gray-800);
    --bs-tertiary-bg: rgba(255, 255, 255, 0.03);
    --bs-border-color: var(--nx-border);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);

    --bs-primary-text-emphasis: var(--nx-brand-200);
    --bs-primary-bg-subtle: rgba(var(--nx-brand-rgb), 0.22);
    --bs-primary-border-subtle: var(--nx-brand-800);
    --bs-link-color: var(--nx-link);
    --bs-link-color-rgb: 205, 139, 144;
    --bs-link-hover-color: var(--nx-link-hover);
    --bs-link-hover-color-rgb: 225, 185, 189;
    --bs-focus-ring-color: var(--nx-focus-ring);
    --bs-form-valid-color: #6ce9a6;
    --bs-form-valid-border-color: #32d583;
    --bs-form-invalid-color: #fda29b;
    --bs-form-invalid-border-color: #f97066;

    --dt-row-selected: 108, 16, 24;

    color-scheme: dark;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
html,
body {
    min-height: 100%;
}

body {
    background-color: var(--nx-page-bg);
    font-family: var(--nx-font);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
}

a {
    text-decoration: none;
}

::selection {
    background-color: var(--nx-brand-100);
    color: var(--nx-brand-900);
}

[data-bs-theme="dark"] ::selection {
    background-color: var(--nx-brand-700);
    color: #fff;
}

/* Thin scrollbars in both themes */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--nx-scrollbar) transparent;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: var(--nx-scrollbar); border-radius: 999px; }

/* Show an element only in one theme: class="show-light" / "show-dark" */
[data-bs-theme="dark"] .show-light,
:root:not([data-bs-theme="dark"]) .show-dark {
    display: none !important;
}

.text-strong { color: var(--nx-text-strong) !important; }
.text-muted, .text-secondary { color: var(--nx-text-muted) !important; }
.text-faint { color: var(--nx-text-faint) !important; }
.text-brand { color: var(--nx-link) !important; }
.bg-surface { background-color: var(--nx-surface) !important; }
.bg-page { background-color: var(--nx-page-bg) !important; }
.border-nx { border-color: var(--nx-border) !important; }

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5625rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--nx-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-sm { --bs-btn-padding-y: 0.375rem; --bs-btn-padding-x: 0.75rem; --bs-btn-font-size: 0.8125rem; }
.btn-lg { --bs-btn-padding-y: 0.75rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: 1rem; }

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--nx-brand-500);
    --bs-btn-border-color: var(--nx-brand-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--nx-brand-600);
    --bs-btn-hover-border-color: var(--nx-brand-600);
    --bs-btn-focus-shadow-rgb: 155, 23, 34;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--nx-brand-700);
    --bs-btn-active-border-color: var(--nx-brand-700);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--nx-brand-300);
    --bs-btn-disabled-border-color: var(--nx-brand-300);
    box-shadow: var(--nx-shadow-xs);
}

[data-bs-theme="dark"] .btn-primary {
    --bs-btn-disabled-bg: var(--nx-brand-800);
    --bs-btn-disabled-border-color: var(--nx-brand-800);
    --bs-btn-disabled-color: rgba(255, 255, 255, 0.6);
}

.btn-outline-primary {
    --bs-btn-color: var(--nx-link);
    --bs-btn-border-color: var(--nx-brand-300);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--nx-brand-500);
    --bs-btn-hover-border-color: var(--nx-brand-500);
    --bs-btn-focus-shadow-rgb: 155, 23, 34;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--nx-brand-600);
    --bs-btn-active-border-color: var(--nx-brand-600);
    --bs-btn-disabled-color: var(--nx-brand-300);
    --bs-btn-disabled-border-color: var(--nx-brand-200);
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-border-color: var(--nx-brand-700);
    --bs-btn-disabled-color: var(--nx-brand-700);
    --bs-btn-disabled-border-color: var(--nx-brand-800);
}

/* Neutral white button (Cancel, Export, Filter …), TailAdmin "outline" style */
.btn-default {
    --bs-btn-color: var(--nx-text);
    --bs-btn-bg: var(--nx-surface);
    --bs-btn-border-color: var(--nx-border-strong);
    --bs-btn-hover-color: var(--nx-text-strong);
    --bs-btn-hover-bg: var(--nx-surface-hover);
    --bs-btn-hover-border-color: var(--nx-border-strong);
    --bs-btn-focus-shadow-rgb: 152, 162, 179;
    --bs-btn-active-color: var(--nx-text-strong);
    --bs-btn-active-bg: var(--nx-surface-hover);
    --bs-btn-active-border-color: var(--nx-border-strong);
    --bs-btn-disabled-color: var(--nx-text-faint);
    --bs-btn-disabled-bg: var(--nx-surface);
    --bs-btn-disabled-border-color: var(--nx-border);
    box-shadow: var(--nx-shadow-xs);
}

[data-bs-theme="dark"] .btn-default {
    --bs-btn-bg: var(--nx-gray-800);
    --bs-btn-border-color: #344054;
    --bs-btn-hover-bg: #283445;
    --bs-btn-active-bg: #283445;
    --bs-btn-disabled-bg: var(--nx-gray-800);
}

/* Round icon button (header) */
.btn-icon {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    font-size: 1.125rem;
}

.btn-icon.btn-sm {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
}

.btn-close:focus {
    box-shadow: 0 0 0 0.25rem var(--nx-focus-ring);
}

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */
.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--nx-text);
    margin-bottom: 0.375rem;
}

.form-label .required,
.required-mark {
    color: #d92d20;
    margin-left: 0.125rem;
}

[data-bs-theme="dark"] .form-label .required,
[data-bs-theme="dark"] .required-mark {
    color: #f97066;
}

.form-control,
.form-select {
    font-size: 0.875rem;
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    color: var(--nx-text-strong);
    background-color: var(--nx-input-bg);
    border-color: var(--nx-border-strong);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow-xs);
}

.form-select {
    padding-right: 2.5rem;
}

.form-control-sm, .form-select-sm {
    min-height: 2.25rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.8125rem;
}

textarea.form-control {
    min-height: 6rem;
}

.form-control::placeholder {
    color: var(--nx-text-faint);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--nx-focus-border);
    box-shadow: 0 0 0 0.25rem var(--nx-focus-ring);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--nx-surface-subtle);
    color: var(--nx-text-muted);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
    background-color: var(--nx-gray-800);
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--bs-form-invalid-border-color);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 0.25rem rgba(240, 68, 56, 0.12);
}

.input-group-text {
    background-color: var(--nx-surface-subtle);
    border-color: var(--nx-border-strong);
    color: var(--nx-text-muted);
    font-size: 0.875rem;
}

/* Error message under a field: always icon + text (brand is red too) */
.invalid-feedback,
.field-error {
    display: none;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--bs-form-invalid-color);
}

.is-invalid ~ .invalid-feedback,
.is-invalid ~ .field-error,
.invalid-feedback.d-flex,
.field-error.d-flex,
.field-error.show {
    display: flex;
}

.invalid-feedback .bi,
.field-error .bi {
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

.form-text {
    color: var(--nx-text-muted);
    font-size: 0.8125rem;
}

/* Checkboxes, radios, switches */
.form-check-input {
    background-color: var(--nx-input-bg);
    border-color: var(--nx-border-strong);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--nx-brand-500);
    border-color: var(--nx-brand-500);
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cd8b90'/%3e%3c/svg%3e");
}

.form-check-label {
    color: var(--nx-text);
    font-size: 0.875rem;
}

.form-range::-webkit-slider-thumb { background-color: var(--nx-brand-500); }
.form-range::-webkit-slider-thumb:active { background-color: var(--nx-brand-200); }
.form-range::-moz-range-thumb { background-color: var(--nx-brand-500); }
.form-range::-moz-range-thumb:active { background-color: var(--nx-brand-200); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--nx-surface), 0 0 0 0.25rem var(--nx-focus-ring); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px var(--nx-surface), 0 0 0 0.25rem var(--nx-focus-ring); }

/* ------------------------------------------------------------------ */
/* Cards                                                               */
/* ------------------------------------------------------------------ */
.card {
    --bs-card-bg: var(--nx-surface);
    --bs-card-border-color: var(--nx-border);
    --bs-card-border-radius: var(--nx-radius-xl);
    --bs-card-inner-border-radius: calc(var(--nx-radius-xl) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 1.5rem;
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-title-color: var(--nx-text-strong);
    --bs-card-color: var(--nx-text);
}

.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0;
}

.card-subtitle {
    font-size: 0.875rem;
    color: var(--nx-text-muted) !important;
}

.card-footer {
    background-color: transparent;
}

/* Small number tile (dashboard metrics) */
.stat-card .stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--nx-radius-lg);
    font-size: 1.375rem;
    background-color: var(--nx-surface-hover);
    color: var(--nx-text-strong);
}

.stat-card .stat-label {
    font-size: 0.875rem;
    color: var(--nx-text-muted);
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--nx-text-strong);
    line-height: 1.2;
}

/* Compact totals row (e.g. stock card: Opening / In / Out / Closing) */
.summary-tile {
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    padding: 0.5rem 0.75rem;
    background-color: var(--nx-surface);
    height: 100%;
}

.summary-tile .summary-label {
    font-size: 0.75rem;
    color: var(--nx-text-muted);
}

.summary-tile .summary-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--nx-text-strong);
    font-variant-numeric: tabular-nums;
}

/* Stock card: keep the description readable next to the quantity columns */
#card-table td.card-desc {
    min-width: 11rem;
}

.summary-tile .summary-value .qty-sub {
    font-size: 0.75rem;
    font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* Tables (Bootstrap + DataTables)                                     */
/* ------------------------------------------------------------------ */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--nx-text);
    --bs-table-border-color: var(--nx-border);
    --bs-table-striped-bg: var(--nx-surface-subtle);
    --bs-table-striped-color: var(--nx-text);
    --bs-table-hover-bg: var(--nx-surface-hover);
    --bs-table-hover-color: var(--nx-text-strong);
    --bs-table-active-bg: var(--nx-surface-hover);
    font-size: 0.875rem;
}

.table > :not(caption) > * > * {
    padding: 0.75rem 1rem;
}

.table > thead > tr > th {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--nx-text-muted);
    white-space: nowrap;
    background-color: var(--nx-surface-subtle);
}

.table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

.table-sm > :not(caption) > * > * {
    padding: 0.5rem 0.75rem;
}

.table td.num,
.table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* DataTables controls */
div.dt-container {
    font-size: 0.875rem;
}

div.dt-container .dt-search input,
div.dt-container .dt-length select {
    min-height: 2.5rem;
    background-color: var(--nx-input-bg);
    border-color: var(--nx-border-strong);
    color: var(--nx-text-strong);
}

div.dt-container .dt-info {
    color: var(--nx-text-muted);
}

div.dt-container .dt-paging .pagination {
    margin: 0;
}

div.dt-processing > div:last-child > div {
    background: var(--nx-brand-500);
}

div.dt-container div.dt-processing {
    background-color: var(--nx-surface-raised);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow-lg);
    color: var(--nx-text);
}

table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover {
    outline-color: var(--nx-focus-border);
}

table.dataTable > tbody > tr.selected > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.9);
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    border-left-color: var(--nx-text-muted);
}

div.dt-buttons > .btn {
    --bs-btn-padding-y: 0.5rem;
}

/* Phones: never let a table push the page wider than the card.
   1) long values without spaces (emails, paths) wrap in the opened (▶) row details */
table.dataTable > tbody > tr.child ul.dtr-details {
    display: block;
    width: 100%;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

table.dataTable > tbody > tr.child span.dtr-title {
    min-width: 6.5rem;
    font-weight: 500;
    color: var(--nx-text-muted);
}

table.dataTable > tbody > tr.child span.dtr-data {
    flex: 1 1 10rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 2) the same inside normal cells */
table.dataTable > tbody > tr > td {
    overflow-wrap: anywhere;
}

table.dataTable > tbody > tr > td.text-nowrap {
    overflow-wrap: normal;
}

/* ...but never inside buttons and badges ("Edit", "Delete", "Base") */
table.dataTable .btn,
table.dataTable .badge,
table.dataTable [class^="badge-soft-"] {
    overflow-wrap: normal;
    white-space: nowrap;
}

/* 3) last resort: anything still too wide scrolls inside the card, not the page */
div.dt-container .dt-layout-table > div {
    overflow-x: auto;
}

/* ------------------------------------------------------------------ */
/* Badges (status chips): always text, never colour alone              */
/* ------------------------------------------------------------------ */
.badge {
    font-weight: 500;
    border-radius: 999px;
    padding: 0.3em 0.7em;
}

.badge-soft-primary,
.badge-soft-success,
.badge-soft-warning,
.badge-soft-danger,
.badge-soft-info,
.badge-soft-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 999px;
    padding: 0.125rem 0.625rem;
}

.badge-soft-primary   { background-color: var(--nx-primary-soft-bg);   color: var(--nx-primary-soft-text); }
.badge-soft-success   { background-color: var(--nx-success-soft-bg);   color: var(--nx-success-soft-text); }
.badge-soft-warning   { background-color: var(--nx-warning-soft-bg);   color: var(--nx-warning-soft-text); }
.badge-soft-danger    { background-color: var(--nx-danger-soft-bg);    color: var(--nx-danger-soft-text); }
.badge-soft-info      { background-color: var(--nx-info-soft-bg);      color: var(--nx-info-soft-text); }
.badge-soft-secondary { background-color: var(--nx-secondary-soft-bg); color: var(--nx-secondary-soft-text); }

/* Small dot inside a badge, e.g. "● Online" */
.status-dot {
    font-size: 0.5rem;
}

/* Same colours for icons in a circle */
.icon-soft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.icon-soft.primary   { background-color: var(--nx-primary-soft-bg);   color: var(--nx-primary-soft-text); }
.icon-soft.success   { background-color: var(--nx-success-soft-bg);   color: var(--nx-success-soft-text); }
.icon-soft.warning   { background-color: var(--nx-warning-soft-bg);   color: var(--nx-warning-soft-text); }
.icon-soft.danger    { background-color: var(--nx-danger-soft-bg);    color: var(--nx-danger-soft-text); }
.icon-soft.info      { background-color: var(--nx-info-soft-bg);      color: var(--nx-info-soft-text); }
.icon-soft.secondary { background-color: var(--nx-secondary-soft-bg); color: var(--nx-secondary-soft-text); }

/*
 * Agent code in a circle (like an avatar with initials), brand gradient with white text:
 * <span class="agent-chip">HKW</span>.
 * Short codes are a circle; longer ones stretch into a pill. Optional name beside it:
 * <span class="agent-with-name"><span class="agent-chip">HKW</span><span>HO KUEN WEI</span></span>
 */
.agent-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background-color: var(--nx-brand-500);
    background-image: linear-gradient(135deg, var(--nx-brand-400) 0%, var(--nx-brand-600) 100%);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Agents with no real code ("----" default agent, blank, not in SQL Accounting) */
.agent-chip.muted {
    background-color: var(--nx-gray-500);
    background-image: linear-gradient(135deg, var(--nx-gray-400) 0%, var(--nx-gray-600) 100%);
    color: #fff;
}

.agent-chip.sm {
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.375rem;
    font-size: 0.625rem;
}

.agent-with-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Alerts (flash messages): icon + text                                */
/* ------------------------------------------------------------------ */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    border-radius: var(--nx-radius-lg);
}

.alert > .bi {
    font-size: 1.125rem;
    line-height: 1.25rem;
    flex-shrink: 0;
}

.alert-success   { --bs-alert-bg: var(--nx-success-soft-bg);   --bs-alert-color: var(--nx-success-soft-text);   --bs-alert-border-color: transparent; }
.alert-warning   { --bs-alert-bg: var(--nx-warning-soft-bg);   --bs-alert-color: var(--nx-warning-soft-text);   --bs-alert-border-color: transparent; }
.alert-danger    { --bs-alert-bg: var(--nx-danger-soft-bg);    --bs-alert-color: var(--nx-danger-soft-text);    --bs-alert-border-color: transparent; }
.alert-info      { --bs-alert-bg: var(--nx-info-soft-bg);      --bs-alert-color: var(--nx-info-soft-text);      --bs-alert-border-color: transparent; }
.alert-primary   { --bs-alert-bg: var(--nx-primary-soft-bg);   --bs-alert-color: var(--nx-primary-soft-text);   --bs-alert-border-color: transparent; }
.alert-secondary { --bs-alert-bg: var(--nx-secondary-soft-bg); --bs-alert-color: var(--nx-secondary-soft-text); --bs-alert-border-color: transparent; }

.alert .alert-link {
    color: inherit;
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Dropdowns, modals, offcanvas, popovers, tooltips, toasts            */
/* ------------------------------------------------------------------ */
.dropdown-menu {
    --bs-dropdown-bg: var(--nx-surface-raised);
    --bs-dropdown-border-color: var(--nx-border);
    --bs-dropdown-border-radius: var(--nx-radius-xl);
    --bs-dropdown-box-shadow: var(--nx-shadow-lg);
    --bs-dropdown-padding-x: 0.75rem;
    --bs-dropdown-padding-y: 0.75rem;
    --bs-dropdown-link-color: var(--nx-text);
    --bs-dropdown-link-hover-color: var(--nx-text-strong);
    --bs-dropdown-link-hover-bg: var(--nx-surface-hover);
    --bs-dropdown-link-active-color: var(--nx-menu-active-text);
    --bs-dropdown-link-active-bg: var(--nx-menu-active-bg);
    --bs-dropdown-item-padding-x: 0.75rem;
    --bs-dropdown-item-padding-y: 0.5rem;
    --bs-dropdown-item-border-radius: var(--nx-radius);
    --bs-dropdown-divider-bg: var(--nx-border);
    --bs-dropdown-header-color: var(--nx-text-muted);
    --bs-dropdown-font-size: 0.875rem;
    box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
}

.dropdown-item .bi {
    font-size: 1.125rem;
    color: var(--nx-text-muted);
}

.modal {
    --bs-modal-bg: var(--nx-surface-raised);
    --bs-modal-border-color: var(--nx-border);
    --bs-modal-border-radius: var(--nx-radius-xl);
    --bs-modal-inner-border-radius: calc(var(--nx-radius-xl) - 1px);
    --bs-modal-header-border-color: var(--nx-border);
    --bs-modal-footer-border-color: var(--nx-border);
    --bs-modal-header-padding: 1.25rem 1.5rem;
    --bs-modal-padding: 1.5rem;
    --bs-modal-color: var(--nx-text);
    --bs-modal-box-shadow: var(--nx-shadow-lg);
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--nx-text-strong);
}

.modal-backdrop {
    --bs-backdrop-bg: #101828;
    --bs-backdrop-opacity: 0.5;
}

[data-bs-theme="dark"] .modal-backdrop {
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.7;
}

/* Modals are full screen on phones (also add .modal-fullscreen-sm-down) */
@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down .modal-content {
        border-radius: 0;
    }
}

.offcanvas {
    --bs-offcanvas-bg: var(--nx-surface);
    --bs-offcanvas-color: var(--nx-text);
    --bs-offcanvas-border-color: var(--nx-border);
}

.popover {
    --bs-popover-bg: var(--nx-surface-raised);
    --bs-popover-border-color: var(--nx-border);
    --bs-popover-header-bg: var(--nx-surface-subtle);
    --bs-popover-header-color: var(--nx-text-strong);
    --bs-popover-body-color: var(--nx-text);
    --bs-popover-box-shadow: var(--nx-shadow-lg);
}

.tooltip {
    --bs-tooltip-bg: var(--nx-gray-900);
    --bs-tooltip-color: #fff;
}

[data-bs-theme="dark"] .tooltip {
    --bs-tooltip-bg: var(--nx-gray-100);
    --bs-tooltip-color: var(--nx-gray-900);
}

.toast {
    --bs-toast-bg: var(--nx-surface-raised);
    --bs-toast-border-color: var(--nx-border);
    --bs-toast-header-bg: var(--nx-surface-raised);
    --bs-toast-header-color: var(--nx-text-strong);
    --bs-toast-header-border-color: var(--nx-border);
    --bs-toast-color: var(--nx-text);
    --bs-toast-box-shadow: var(--nx-shadow-lg);
    --bs-toast-border-radius: var(--nx-radius-lg);
}

/* ------------------------------------------------------------------ */
/* Navs, tabs, pills, pagination, list groups, progress, accordion     */
/* ------------------------------------------------------------------ */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--nx-border);
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--nx-menu-active-text);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    --bs-nav-link-color: var(--nx-text-muted);
    --bs-nav-link-hover-color: var(--nx-text-strong);
    --bs-nav-link-font-weight: 500;
    gap: 0.5rem;
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: 0.875rem;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-bottom-color: var(--nx-brand-500);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--nx-menu-active-bg);
    --bs-nav-pills-link-active-color: var(--nx-menu-active-text);
    --bs-nav-pills-border-radius: var(--nx-radius);
    --bs-nav-link-color: var(--nx-text-muted);
    --bs-nav-link-hover-color: var(--nx-text-strong);
    --bs-nav-link-font-weight: 500;
}

.pagination {
    --bs-pagination-color: var(--nx-text);
    --bs-pagination-bg: var(--nx-surface);
    --bs-pagination-border-color: var(--nx-border-strong);
    --bs-pagination-hover-color: var(--nx-text-strong);
    --bs-pagination-hover-bg: var(--nx-surface-hover);
    --bs-pagination-hover-border-color: var(--nx-border-strong);
    --bs-pagination-focus-color: var(--nx-text-strong);
    --bs-pagination-focus-bg: var(--nx-surface-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--nx-focus-ring);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--nx-brand-500);
    --bs-pagination-active-border-color: var(--nx-brand-500);
    --bs-pagination-disabled-color: var(--nx-text-faint);
    --bs-pagination-disabled-bg: var(--nx-surface);
    --bs-pagination-disabled-border-color: var(--nx-border);
    --bs-pagination-font-size: 0.875rem;
}

.list-group {
    --bs-list-group-bg: var(--nx-surface);
    --bs-list-group-color: var(--nx-text);
    --bs-list-group-border-color: var(--nx-border);
    --bs-list-group-action-hover-bg: var(--nx-surface-hover);
    --bs-list-group-action-hover-color: var(--nx-text-strong);
    --bs-list-group-action-active-bg: var(--nx-surface-hover);
    --bs-list-group-active-bg: var(--nx-brand-500);
    --bs-list-group-active-border-color: var(--nx-brand-500);
    --bs-list-group-active-color: #fff;
}

.progress,
.progress-stacked {
    --bs-progress-bg: var(--nx-surface-hover);
    --bs-progress-bar-bg: var(--nx-brand-500);
    --bs-progress-border-radius: 999px;
}

.accordion {
    --bs-accordion-bg: var(--nx-surface);
    --bs-accordion-color: var(--nx-text);
    --bs-accordion-border-color: var(--nx-border);
    --bs-accordion-border-radius: var(--nx-radius-xl);
    --bs-accordion-inner-border-radius: calc(var(--nx-radius-xl) - 1px);
    --bs-accordion-btn-color: var(--nx-text-strong);
    --bs-accordion-btn-bg: var(--nx-surface);
    --bs-accordion-active-color: var(--nx-text-strong);
    --bs-accordion-active-bg: var(--nx-surface-subtle);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--nx-focus-ring);
}

.breadcrumb {
    --bs-breadcrumb-font-size: 0.875rem;
    --bs-breadcrumb-margin-bottom: 0;
    --bs-breadcrumb-item-active-color: var(--nx-text-strong);
    --bs-breadcrumb-divider-color: var(--nx-text-faint);
}

.breadcrumb-item a {
    color: var(--nx-text-muted);
}

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--nx-link) !important;
}

/* Loading placeholder */
.skeleton {
    display: block;
    background-color: var(--nx-skeleton);
    border-radius: var(--nx-radius);
    min-height: 1rem;
    animation: nx-pulse 1.5s ease-in-out infinite;
}

@keyframes nx-pulse {
    50% { opacity: 0.5; }
}

/* Empty state inside a card or table */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--nx-text-muted);
}

.empty-state .bi {
    display: block;
    font-size: 2.5rem;
    color: var(--nx-text-faint);
    margin-bottom: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* App layout: sidebar + header + content                              */
/* ------------------------------------------------------------------ */
.app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    width: var(--nx-sidebar-width);
    padding: 0 1.25rem;
    background-color: var(--nx-surface);
    border-right: 1px solid var(--nx-border);
    transition: width var(--nx-transition), transform var(--nx-transition);
}

[data-bs-theme="dark"] .app-sidebar {
    background-color: var(--nx-gray-900);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    height: 5rem;
    flex-shrink: 0;
}

.sidebar-logo img {
    max-height: 2.5rem;
    width: auto;
}

.sidebar-logo .logo-icon {
    display: none;
    max-height: 2rem;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1.5rem;
    scrollbar-color: transparent transparent;   /* scrollbar only shows while the pointer or focus is in the menu */
}

.sidebar-nav::-webkit-scrollbar-thumb { background-color: transparent; }

.sidebar-nav:hover,
.sidebar-nav:focus-within {
    scrollbar-color: var(--nx-scrollbar) transparent;
}

.sidebar-nav:hover::-webkit-scrollbar-thumb,
.sidebar-nav:focus-within::-webkit-scrollbar-thumb { background-color: var(--nx-scrollbar); }

.menu-group + .menu-group {
    margin-top: 1rem;
}

.menu-group-title {
    display: flex;
    align-items: center;
    min-height: 1.25rem;
    margin: 0 0 1rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.25rem;
    text-transform: uppercase;
    color: var(--nx-text-faint);
}

.menu-group-title .bi {
    display: none;
    font-size: 1.25rem;
}

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.menu-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--nx-menu-text);
    background: transparent;
    border: 0;
    border-radius: var(--nx-radius);
    text-align: left;
    white-space: nowrap;
}

.menu-link:hover,
.menu-link:focus-visible {
    color: var(--nx-text-strong);
    background-color: var(--nx-menu-hover-bg);
    text-decoration: none;
}

.menu-link:focus-visible {
    outline: 2px solid var(--nx-focus-border);
    outline-offset: 1px;
}

.menu-link > .bi:first-child {
    flex-shrink: 0;
    font-size: 1.375rem;
    line-height: 1;
    color: var(--nx-menu-icon);
}

.menu-link.active,
.menu-link.active:hover {
    color: var(--nx-menu-active-text);
    background-color: var(--nx-menu-active-bg);
}

.menu-link.active > .bi:first-child,
.menu-link:hover > .bi:first-child {
    color: inherit;
}

.menu-arrow {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--nx-text-muted);
    transition: transform 0.2s;
}

.menu-link:not(.collapsed) .menu-arrow {
    transform: rotate(180deg);
    color: var(--nx-menu-active-text);
}

.menu-sub {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0 0 0 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.menu-sub .menu-link {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: var(--nx-backdrop);
}

.app-main {
    min-height: 100vh;
    margin-left: var(--nx-sidebar-width);
    display: flex;
    flex-direction: column;
    transition: margin-left var(--nx-transition);
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--nx-header-height);
    padding: 0.75rem 1.5rem;
    background-color: var(--nx-surface);
    border-bottom: 1px solid var(--nx-border);
}

[data-bs-theme="dark"] .app-header {
    background-color: var(--nx-gray-900);
}

.app-header .header-logo img {
    max-height: 2rem;
    width: auto;
}

/* Uses the full width beside the sidebar (no centred max width): lists get every column */
.app-content {
    flex: 1;
    width: 100%;
    padding: 1.5rem;
}

.app-footer {
    padding: 1rem 1.5rem;
    font-size: 0.8125rem;
    color: var(--nx-text-muted);
    text-align: center;
}

/* Page title + breadcrumb */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--nx-text-strong);
    margin: 0;
}

/* User menu */
.user-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--nx-text);
    font-size: 0.875rem;
    font-weight: 500;
}

.user-toggle .bi-chevron-down {
    font-size: 0.875rem;
    transition: transform 0.2s;
}

.user-toggle[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    background-color: var(--nx-primary-soft-bg);
    color: var(--nx-primary-soft-text);
    flex-shrink: 0;
}

.user-menu {
    width: 16.25rem;
    margin-top: 1rem !important;
}

/* Desktop: collapsible sidebar (icons only, expands on hover) */
@media (min-width: 1200px) {
    .sidebar-collapsed .app-sidebar {
        width: var(--nx-sidebar-collapsed-width);
    }

    .sidebar-collapsed .app-main {
        margin-left: var(--nx-sidebar-collapsed-width);
    }

    .sidebar-collapsed .app-sidebar:not(:hover) .menu-text,
    .sidebar-collapsed .app-sidebar:not(:hover) .menu-arrow,
    .sidebar-collapsed .app-sidebar:not(:hover) .menu-sub,
    .sidebar-collapsed .app-sidebar:not(:hover) .menu-group-title span,
    .sidebar-collapsed .app-sidebar:not(:hover) .logo-full {
        display: none !important;
    }

    .sidebar-collapsed .app-sidebar:not(:hover) .logo-icon,
    .sidebar-collapsed .app-sidebar:not(:hover) .menu-group-title .bi {
        display: block;
    }

    .sidebar-collapsed .app-sidebar:not(:hover) .sidebar-logo,
    .sidebar-collapsed .app-sidebar:not(:hover) .menu-group-title,
    .sidebar-collapsed .app-sidebar:not(:hover) .menu-link {
        justify-content: center;
    }

    /* Icons only: no scrollbar (it would push the icons off centre); the menu still
       scrolls with the wheel once hovered (it expands) and to a focused link. Tighter
       group spacing so more of the menu fits. */
    .sidebar-collapsed .app-sidebar:not(:hover) .sidebar-nav { scrollbar-width: none; }
    .sidebar-collapsed .app-sidebar:not(:hover) .sidebar-nav::-webkit-scrollbar { display: none; }
    .sidebar-collapsed .app-sidebar:not(:hover) .menu-group + .menu-group { margin-top: .5rem; }
    .sidebar-collapsed .app-sidebar:not(:hover) .menu-group-title { margin-bottom: .5rem; }

    /* Hover expands the collapsed sidebar and pushes the page over (as TailAdmin does) */
    .sidebar-collapsed .app-sidebar:hover {
        width: var(--nx-sidebar-width);
    }

    .sidebar-collapsed .app-sidebar:hover ~ .app-main {
        margin-left: var(--nx-sidebar-width);
    }

    .app-header .header-logo {
        display: none;
    }
}

/* Tablet / phone: sidebar slides in over the page */
@media (max-width: 1199.98px) {
    .app-sidebar {
        transform: translateX(-100%);
    }

    .sidebar-open .app-sidebar {
        transform: none;
        box-shadow: var(--nx-shadow-lg);
    }

    .sidebar-open .sidebar-backdrop {
        display: block;
    }

    .app-main {
        margin-left: 0;
    }

    .app-header {
        padding: 0.75rem 1rem;
    }

    .app-content {
        padding: 1rem;
    }
}

/* Phones: tighter spacing so tables get the room (tablet and desktop unchanged) */
@media (max-width: 575.98px) {
    .app-content {
        padding: 0.75rem;
    }

    .app-header {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .page-header {
        margin-bottom: 1rem;
    }

    .card {
        --bs-card-spacer-x: 1rem;
        --bs-card-spacer-y: 1rem;
        --bs-card-cap-padding-x: 1rem;
        --bs-card-cap-padding-y: 0.875rem;
    }

    .table > :not(caption) > * > * {
        padding: 0.625rem 0.5rem;
    }

    .table > :not(caption) > * > *:first-child {
        padding-left: 0.25rem;
    }

    .table > :not(caption) > * > *:last-child {
        padding-right: 0.25rem;
    }

    /* "25 per page" + Search on one row: page size left, search fills the rest */
    div.dt-container > .row:first-child {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        margin-left: 0;
        margin-right: 0;
    }

    div.dt-container > .row:first-child > div {
        width: auto;
        padding: 0;
        margin: 0 !important;
    }

    div.dt-container > .row:first-child > .dt-layout-end {
        flex: 1 1 auto;
        min-width: 0;
    }

    div.dt-container .dt-length,
    div.dt-container .dt-search {
        text-align: left;
    }

    div.dt-container .dt-length label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    div.dt-container .dt-search input {
        width: 100% !important;
        margin-left: 0 !important;
    }

    div.dt-container .dt-info,
    div.dt-container .dt-paging {
        text-align: center;
    }
}

/* ------------------------------------------------------------------ */
/* Sign-in page                                                        */
/* ------------------------------------------------------------------ */
.auth-page {
    display: flex;
    min-height: 100vh;
    background-color: var(--nx-surface);
}

[data-bs-theme="dark"] .auth-page {
    background-color: var(--nx-gray-900);
}

.auth-form-col {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.auth-form {
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
}

.auth-logo img {
    height: 2.5rem;
    width: auto;
}

.auth-title {
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--nx-text-strong);
    margin-bottom: 0.5rem;
}

.auth-brand-col {
    position: relative;
    flex: 1 1 50%;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--nx-brand-500);
}

[data-bs-theme="dark"] .auth-brand-col {
    background-color: var(--nx-brand-800);
}

/* Faint white grid lines on the red panel */
.auth-brand-col .grid-shape {
    position: absolute;
    width: 100%;
    max-width: 15.625rem;
    filter: brightness(0) invert(1);
    opacity: 0.35;
    pointer-events: none;
}

.auth-brand-col .grid-shape.top { top: 0; right: 0; }
.auth-brand-col .grid-shape.bottom { bottom: 0; left: 0; transform: rotate(180deg); }

.auth-brand {
    position: relative;
    z-index: 1;
    max-width: 20rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}

.auth-brand img {
    max-width: 100%;
    margin-bottom: 1rem;
}

.auth-theme-toggle {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1050;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    font-size: 1.25rem;
    /* White ring so the red button stands out on the red panel */
    box-shadow: 0 0 0 3px #fff, var(--nx-shadow-lg);
}

[data-bs-theme="dark"] .auth-theme-toggle {
    box-shadow: 0 0 0 3px var(--nx-gray-900), var(--nx-shadow-lg);
}

@media (min-width: 992px) {
    .auth-brand-col {
        display: flex;
    }
}

/* SQL Accounting connection selector in card headers */
.connection-selector {
    min-width: 12rem;
}

/* Toasts (NexERP.toast) */
.nx-toasts {
    position: fixed;
    top: calc(var(--nx-header-height) + 1rem);
    right: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(26rem, calc(100vw - 2rem));
}

.nx-toasts .toast {
    width: 100%;
}

.nx-toasts .toast-body {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.nx-toasts .toast-body > .bi {
    font-size: 1.25rem;
    line-height: 1.25rem;
    flex-shrink: 0;
}

.nx-toasts .toast.success .toast-body > .bi { color: var(--nx-success-soft-text); }
.nx-toasts .toast.danger .toast-body > .bi { color: var(--nx-danger-soft-text); }
.nx-toasts .toast.warning .toast-body > .bi { color: var(--nx-warning-soft-text); }
.nx-toasts .toast.info .toast-body > .bi { color: var(--nx-info-soft-text); }

/* Agent checklist (User Account → Data access) */
.agent-search {
    max-width: 16rem;
}

.agent-checklist {
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background-color: var(--nx-surface-subtle);
}

.agent-checklist.is-invalid {
    border-color: var(--bs-form-invalid-border-color);
}

.agent-group + .agent-group {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--nx-border);
}

.agent-group-title .form-check-label {
    font-weight: 600;
    color: var(--nx-text-strong);
}

.agent-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.25rem 1rem;
    margin-top: 0.25rem;
}

.agent-group-title + .agent-items {
    padding-left: 1.5rem;
}

/* Data access tab: module → source → field rows */
.access-toggle {
    color: var(--nx-text-strong);
}

.access-chevron {
    transition: transform 0.2s;
}

.access-toggle:not(.collapsed) .access-chevron {
    transform: rotate(90deg);
}

.access-field {
    padding: 0.625rem 0;
    border-bottom: 1px dashed var(--nx-border);
}

.access-field:last-child {
    border-bottom: 0;
}

.access-field-label {
    min-width: 8rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--nx-text);
}

.access-mode {
    width: auto;
    min-width: 10rem;
}

.access-picker {
    margin-top: 0.625rem;
}

.access-connection {
    width: auto;
    max-width: 14rem;
}

/* Stock balance: base unit line, then one muted line per larger unit (same height in every column) */
.qty-line {
    line-height: 1.5rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.qty-sub {
    font-size: 0.8125rem;
    color: var(--nx-text-muted);
}

.qty-line.qty-uom:first-child {
    font-weight: 500;
    color: var(--nx-text-strong);
}

/* Multi-select dropdown (<x-multi-select>) */
.nx-ms-toggle {
    min-width: 11rem;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nx-ms-menu {
    width: 18rem;
    max-width: calc(100vw - 2rem);
    padding: 0.75rem;
}

.nx-ms-options {
    max-height: 16rem;
    overflow-y: auto;
}

.nx-ms-options .form-check {
    margin-bottom: 0.25rem;
}

/* Grouped options (e.g. agents by segment): a heading per group, items indented */
.nx-ms-group + .nx-ms-group,
.nx-ms-group + .form-check,
.form-check + .nx-ms-group {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--nx-border);
}

.nx-ms-group-title .form-check-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--nx-text-muted);
}

.nx-ms-in-group { margin-left: 1.25rem; }

/* Date range picker (daterangepicker 3.1): NexERP colours, light and dark */
.daterangepicker {
    font-family: var(--nx-font);
    color: var(--nx-text);
    background-color: var(--nx-surface-raised);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow-lg);
    z-index: 1090;   /* above modals */
}

.daterangepicker::before { border-bottom-color: var(--nx-border); }
.daterangepicker::after { border-bottom-color: var(--nx-surface-raised); }
.daterangepicker.drop-up::before { border-top-color: var(--nx-border); }
.daterangepicker.drop-up::after { border-top-color: var(--nx-surface-raised); }

.daterangepicker .calendar-table {
    background-color: var(--nx-surface-raised);
    border-color: var(--nx-surface-raised);
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border-color: var(--nx-text);
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: transparent;
    color: var(--nx-text-faint);
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: var(--nx-surface-hover);
    color: var(--nx-text-strong);
}

.daterangepicker td.in-range {
    background-color: var(--nx-primary-soft-bg);
    color: var(--nx-text-strong);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--nx-brand-500);
    color: #fff;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    background-color: var(--nx-input-bg);
    color: var(--nx-text-strong);
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--nx-radius);
}

.daterangepicker .ranges li {
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--nx-radius);
    margin: 0.125rem 0.375rem;
}

.daterangepicker .ranges li:hover {
    background-color: var(--nx-surface-hover);
}

.daterangepicker .ranges li.active {
    background-color: var(--nx-brand-500);
    color: #fff;
}

.daterangepicker .drp-buttons {
    border-top-color: var(--nx-border);
}

.daterangepicker .drp-selected {
    font-size: 0.8125rem;
    color: var(--nx-text-muted);
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-left-color: var(--nx-border);
}

/* Item code with its main photo (opens the item details) */
a.item-link {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: inherit;
    text-decoration: none;
}

a.item-link span {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

a.item-link:hover span,
a.item-link:focus-visible span {
    color: var(--nx-link);
    text-decoration-style: solid;
}

.item-thumb {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    object-fit: cover;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    background-color: var(--nx-surface-hover);
}

.item-thumb-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--nx-text-faint);
}

/* Reorder status in the stock list: icon + hidden label (never colour alone) */
.reorder-flag {
    float: left;
    margin-right: 0.375rem;
    color: var(--nx-warning-soft-text);
}

.reorder-flag.is-out { color: var(--nx-danger-soft-text); }
.reorder-flag.is-low { color: var(--nx-info-soft-text); }

/* Stock Item page */
.item-hero {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background-color: var(--nx-surface-hover);
    color: var(--nx-text-faint);
    font-size: 1.75rem;
}

.item-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-hero.is-empty { pointer-events: none; }

.reorder-input {
    flex-wrap: nowrap;
    min-width: 12rem;
    max-width: 18rem;
}

.reorder-input .form-select {
    flex: 0 0 auto;
    width: auto;
}

.warning-input {
    flex-wrap: nowrap;
    width: 7.5rem;
}

.reorder-hint {
    margin-top: 0.375rem;
    line-height: 1.5;
    white-space: nowrap;
}

.reorder-hint .bi {
    margin-right: 0.125rem;
}

/* Phones: each location becomes a small block (location | balance, then level, then status) */
@media (max-width: 575.98px) {
    .reorder-table thead { display: none; }

    .reorder-table tbody tr,
    .reorder-table tfoot tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.5rem 0.75rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--nx-border);
    }

    .reorder-table tbody td,
    .reorder-table tfoot th {
        border: 0;
        padding: 0;
    }

    .reorder-table tbody td:nth-child(3) { grid-column: 1 / -1; }
    .reorder-table tfoot th:nth-child(3) { display: none; }
    .reorder-input { max-width: none; }
    .reorder-hint { white-space: normal; }
}

/* Item details: upload box and photo tiles */
.upload-box {
    border: 1px dashed var(--nx-border-strong);
    border-radius: var(--nx-radius-lg);
    padding: 0.875rem 1rem;
    background-color: var(--nx-surface);
}

.photo-tile {
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    padding: 0.5rem;
    height: 100%;
}

.photo-tile.is-main {
    border-color: var(--nx-brand-500);
    box-shadow: 0 0 0 1px var(--nx-brand-500);
}

.photo-tile-img {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--nx-radius);
    overflow: hidden;
    background-color: var(--nx-surface-hover);
}

.photo-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Summary list in the confirm dialog (NexERP.confirm list) */
.nx-confirm-list {
    max-height: 45vh;
    overflow-y: auto;
    color: var(--nx-text);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
}

.nx-confirm-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--nx-border);
    font-variant-numeric: tabular-nums;
}

.nx-confirm-list li:last-child { border-bottom: 0; }

/* Data access: database tabs inside a module */
.access-scope-tabs .nav-link {
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
}

.access-scope-fields {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* Sales Budget grid: scrolls sideways, agent column fixed */
.budget-year { width: 11rem; }

.budget-scroll {
    overflow-x: auto;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
}

.budget-table {
    margin: 0;
    min-width: 96rem;
}

.budget-table thead .budget-agent { background-color: var(--nx-surface-subtle); }

.budget-table .budget-agent {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 15rem;
    max-width: 18rem;
    background-color: var(--nx-surface);
    box-shadow: 1px 0 0 var(--nx-border);
}

.budget-agent-name {
    white-space: normal;
    line-height: 1.3;
    font-weight: 400;
}
.budget-table td.num,
.budget-table th.num {
    min-width: 8.25rem;
    white-space: nowrap;
}

.budget-input {
    min-width: 7.75rem;
    font-variant-numeric: tabular-nums;
}

/* Phones: a narrow agent column so the months have room */
@media (max-width: 575.98px) {
    .budget-table .budget-agent {
        min-width: 7.5rem;
        max-width: 8.5rem;
        font-size: 0.8125rem;
    }
}

.budget-row.is-changed .budget-agent {
    box-shadow: inset 3px 0 0 var(--nx-warning-soft-text), 1px 0 0 var(--nx-border);
}

.budget-segment th,
.budget-segment td {
    background-color: var(--nx-surface-hover);
    font-weight: 600;
    color: var(--nx-text-strong);
}

.budget-segment .budget-agent { background-color: var(--nx-surface-hover); }

.budget-segment-toggle { color: var(--nx-text-strong); }

.budget-total th {
    background-color: var(--nx-surface-hover);
    color: var(--nx-text-strong);
    border-top: 2px solid var(--nx-border-strong);
}

.budget-total .budget-agent { background-color: var(--nx-surface-hover); }

.budget-actions { width: 5.5rem; }

/* Sales Budget list: expandable year rows */
#budget-years tbody tr:not(.child) { cursor: pointer; }

.budget-expand { transition: transform 0.15s ease; color: var(--nx-text-muted); }

#budget-years tr.is-open .budget-expand { transform: rotate(90deg); }

/* Fixed columns: the wide summary in an expanded row scrolls inside its box instead of widening the list */
#budget-years { table-layout: fixed; }
#budget-years th:nth-child(1) { width: 26%; }
#budget-years th:nth-child(2) { width: 16%; }
#budget-years th:nth-child(3) { width: 28%; }
#budget-years th:nth-child(4) { width: 30%; }

@media (max-width: 575.98px) {
    #budget-years th:nth-child(1) { width: 24%; }
    #budget-years th:nth-child(2) { width: 18%; }
    #budget-years th:nth-child(3) { width: 34%; }
    #budget-years th:nth-child(4) { width: 24%; }
    #budget-years { font-size: 0.8125rem; }
}

#budget-years td.child { background-color: var(--nx-surface-subtle); padding: 0.75rem; }

.budget-summary { min-width: 82rem; }

.budget-summary td.num,
.budget-summary th.num { min-width: 6.25rem; }

/* Clickable quantity (opens the stock card) */
a.qty-link {
    color: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: pointer;
}

a.qty-link:hover,
a.qty-link:focus-visible {
    color: var(--nx-link);
    text-decoration-style: solid;
}

/* Arrange columns dialog */
.arrange-list .list-group-item {
    cursor: grab;
}

.arrange-list .list-group-item:active {
    cursor: grabbing;
}

/* Result box under "Test connection" */
.test-result:empty {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Drag to reorder (NexERP.sortable)                                   */
/* ------------------------------------------------------------------ */
.nx-drag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    color: var(--nx-muted);
    cursor: grab;
    flex-shrink: 0;
}

.nx-drag:hover { color: var(--nx-text); }
.nx-drag-space { display: inline-block; width: 1.25rem; flex-shrink: 0; }

.is-dragging {
    opacity: .55;
    outline: 2px dashed var(--nx-brand-300);
    outline-offset: -2px;
}

/* Price Control: price columns of a group */
.pg-list-title {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nx-muted);
    margin-bottom: .5rem;
}

.pg-column {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    margin-bottom: .375rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background-color: var(--nx-surface);
}

.pg-column .form-check-input { margin: 0; flex-shrink: 0; }

.pg-column-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .5rem;
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    cursor: pointer;
}

.pg-column-key { font-weight: 600; }
.pg-column-move { display: inline-flex; gap: .25rem; flex-shrink: 0; }
#pg-columns-available .pg-column { background-color: var(--nx-surface-subtle); }

/* Price Control: items grid (one tbody per heading) */
.pg-search { width: 16rem; max-width: 100%; }

.pg-grid-scroll {
    overflow-x: auto;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
}

.pg-grid { min-width: 56rem; }
.pg-grid > thead th { background-color: var(--nx-surface-subtle); white-space: nowrap; vertical-align: bottom; }
.pg-grid td { vertical-align: top; }
.pg-grid .pg-col-tick { width: 2rem; }
.pg-grid .pg-col-order { width: 3.25rem; white-space: nowrap; }
.pg-grid .pg-col-photo { width: 2.75rem; }
.pg-grid .pg-col-desc { min-width: 12rem; }
.pg-grid .pg-col-tax { white-space: nowrap; }
.pg-grid .pg-col-price { width: 7.5rem; text-align: right; }

.pg-col-photo img,
.pg-no-photo {
    width: 2rem;
    height: 2rem;
    border-radius: var(--nx-radius);
    object-fit: cover;
}

.pg-no-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--nx-muted);
    background-color: var(--nx-surface-subtle);
}

.pg-section-head > td { background-color: var(--nx-surface-subtle); }

.pg-section-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.pg-section-bar .form-check-input { margin: 0; }
.pg-toggle .bi { transition: transform .15s ease; }
.pg-collapsed .pg-toggle .bi { transform: rotate(-90deg); }
.pg-collapsed > tr.pg-row,
.pg-grid tr.pg-filtered { display: none; }

.pg-move-buttons { display: inline-flex; flex-direction: column; vertical-align: middle; line-height: 1; }
.pg-move-buttons .btn { color: var(--nx-muted); font-size: .75rem; }
.pg-move-buttons .btn:hover,
.pg-move-buttons .btn:focus-visible { color: var(--nx-text); }
.pg-section-bar .pg-move-buttons { flex-direction: row; gap: .375rem; }

.pg-cell { width: 7.5rem; }
.pg-cell .pg-price { text-align: right; min-width: 6rem; }
.pg-price.is-changed { background-color: var(--nx-warning-soft-bg); border-color: var(--nx-warning-soft-text); }
.pg-price[readonly] { background-color: transparent; border-color: transparent; }

.pg-sub {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .375rem;
    min-height: 1.25rem;
    font-size: .75rem;
    color: var(--nx-muted);
}

.pg-sub .btn { font-size: .75rem; color: var(--nx-muted); }
.pg-next { color: var(--nx-info-soft-text); font-size: .5rem; cursor: help; }
.pg-warn { color: var(--nx-warning-soft-text); }
.pg-below-min .pg-price:not(.is-changed) { border-color: var(--nx-warning-soft-text); }

/* Price Control: import preview lists */
.pg-import-list {
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
}

/* ------------------------------------------------------------------ */
/* Rich text: Quill editor (NexERP.richEditor) and saved text          */
/* ------------------------------------------------------------------ */
.nx-rich .ql-toolbar.ql-snow {
    border-color: var(--nx-border-strong);
    border-radius: var(--nx-radius) var(--nx-radius) 0 0;
    background-color: var(--nx-surface-subtle);
    font-family: var(--nx-font);
}

.nx-rich .ql-container.ql-snow {
    border-color: var(--nx-border-strong);
    border-radius: 0 0 var(--nx-radius) var(--nx-radius);
    background-color: var(--nx-input-bg);
    color: var(--nx-text-strong);
    font-family: var(--nx-font);
    font-size: .875rem;
}

.nx-rich .ql-editor { min-height: 7rem; max-height: 18rem; overflow-y: auto; }
.nx-rich.nx-rich-sm .ql-editor { min-height: 4rem; }
.bc-remove-list { max-height: 12rem; overflow-y: auto; }
.nx-rich .ql-editor.ql-blank::before { color: var(--nx-text-faint); font-style: normal; }
.nx-rich:focus-within .ql-toolbar.ql-snow,
.nx-rich:focus-within .ql-container.ql-snow { border-color: var(--nx-focus-border); }
.nx-rich:focus-within .ql-container.ql-snow { box-shadow: 0 0 0 3px var(--nx-focus-ring); }
.nx-rich:has(.is-invalid) .ql-toolbar.ql-snow,
.nx-rich:has(.is-invalid) .ql-container.ql-snow { border-color: var(--nx-danger-soft-text); }

.nx-rich .ql-snow .ql-stroke { stroke: var(--nx-text); }
.nx-rich .ql-snow .ql-fill { fill: var(--nx-text); }
.nx-rich .ql-snow .ql-picker { color: var(--nx-text); }
.nx-rich .ql-snow button:hover .ql-stroke,
.nx-rich .ql-snow button.ql-active .ql-stroke { stroke: var(--nx-link); }
.nx-rich .ql-snow button:hover .ql-fill,
.nx-rich .ql-snow button.ql-active .ql-fill { fill: var(--nx-link); }
.nx-rich .ql-snow a { color: var(--nx-link); }

.nx-rich .ql-snow .ql-tooltip {
    z-index: 10;
    border-color: var(--nx-border);
    border-radius: var(--nx-radius);
    background-color: var(--nx-surface-raised);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-lg);
}

.nx-rich .ql-snow .ql-tooltip input[type="text"] {
    border-color: var(--nx-border-strong);
    background-color: var(--nx-input-bg);
    color: var(--nx-text-strong);
}

/* Saved rich text (cleaned on the server) */
.nx-rich-text { color: var(--nx-text-strong); overflow-wrap: anywhere; }
.nx-rich-text > :last-child { margin-bottom: 0; }
.nx-rich-text p { margin-bottom: .5rem; }
.nx-rich-text ul,
.nx-rich-text ol { margin-bottom: .5rem; padding-left: 1.25rem; }

/* ------------------------------------------------------------------ */
/* Price Control → Bundle                                              */
/* ------------------------------------------------------------------ */
/* The log scrolls inside its card, newest first. Side by side with Customers (xl) it is exactly as
   tall as the Customers card (at least 26rem); stacked it stops at 34rem. */
.bundle-log-scroll { max-height: 34rem; overflow-y: auto; }

@media (min-width: 1200px) {
    .bundle-log-col { position: relative; min-height: 26rem; }
    .bundle-log-col > .card { position: absolute; inset: 0 calc(var(--bs-gutter-x) * .5); }
    .bundle-log-col .bundle-log-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
}
.bundle-log { position: relative; margin: 0; padding: 0; list-style: none; }

.bundle-log-entry {
    position: relative;
    display: flex;
    gap: .875rem;
    padding-bottom: 1.25rem;
}

/* the line joining the icons */
.bundle-log-entry:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 2.5rem;
    bottom: 0;
    left: 1.25rem;
    border-left: 1px solid var(--nx-border);
}

.bundle-log-entry .icon-soft { flex-shrink: 0; }
.bundle-log-body { flex: 1; min-width: 0; }

.bundle-log-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin-bottom: .375rem;
    font-size: .8125rem;
    color: var(--nx-text-muted);
}

.bundle-log-meta .fw-semibold { color: var(--nx-text-strong); }

.bundle-log-text {
    padding: .625rem .875rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    background-color: var(--nx-surface-subtle);
    font-size: .875rem;
}

/* Bundle → Lines table */
.bl-scroll { position: relative; }   /* keeps absolutely placed labels inside the scroll box */
.bl-table > :not(caption) > * > * { padding: .625rem .375rem; }
.bl-table th { white-space: nowrap; }
.bl-table td { vertical-align: top; }
.bl-table .bl-col-move { width: 2.5rem; padding-right: 0; }
.bl-table .bl-col-move .btn-link { color: var(--nx-text-muted); }
.bl-table .bl-col-move .btn-link:hover { color: var(--nx-link); }
.bl-table .bl-col-item { min-width: 16rem; }
.bl-table .bl-title { min-width: 10rem; }
.bl-table .bl-num { width: 5.5rem; }
.bl-table .bl-price { width: 6.5rem; }
.bl-table .bl-disc { width: 4.75rem; }
.bl-table .bl-uom { width: 6.25rem; }
.bl-table td[data-amount],
.bl-table td[data-tax] { padding-top: .75rem; }
.bl-table tr.bl-option > td { background-color: var(--nx-surface-subtle); border-bottom-color: transparent; }
.bl-table tr.bl-sub > td,
.bl-table tr.bl-sub-empty > td { background-color: var(--nx-surface-subtle); }
.bl-table .bl-sub-item { padding-left: 1.25rem; }
.bl-table tr.bl-sub [data-amount] { padding-top: 1rem; }
.bl-table .bl-incl {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .25rem;
    min-height: 0;
    margin: .25rem 0 0;
    padding: 0;
    font-size: .75rem;
    color: var(--nx-text-muted);
}
.bl-table .bl-incl .form-check-input { float: none; margin: 0; }

.bl-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--nx-border);
    text-align: right;
}

.bl-total-main { font-size: .9375rem; }

/* Item search results and an option's item list */
.bl-results { max-height: 22rem; overflow-y: auto; }
.bl-results-sm { max-height: 14rem; }
.bl-results:empty { display: none; }

.bl-pool-list {
    max-height: 26rem;
    overflow-y: auto;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    padding: .25rem .5rem;
}

.bl-col-check { width: 2rem; }

/* Try it */
.bl-try-qty { width: 8rem; }

.bl-try-option {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background-color: var(--nx-surface-subtle);
}

.bl-try-option.is-skipped .bl-try-list { opacity: .45; }
.bl-try-list { max-height: 16rem; overflow-y: auto; }
.bl-try-list .table { --bs-table-bg: transparent; }
.bl-try-pick { width: 6.5rem; }

/* AR → Customer page: an address card */
.cu-branch {
    padding: 1rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background-color: var(--nx-surface-subtle);
}

.cu-branch address { color: var(--nx-text-strong); }

/* Customer page → Sales Analysis: product mix */
.mix-box {
    padding: 1rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background-color: var(--nx-surface-subtle);
    font-size: .875rem;
}

#mix-table tr.mix-clickable { cursor: pointer; }
/* Item Sales Analysis → Where to focus: tabs with counts, then a small table */
.is-focus {
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background-color: var(--nx-surface);
    overflow: hidden;
}

.is-focus-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    border-bottom: 1px solid var(--nx-border);
    background-color: var(--nx-surface-subtle);
}

.is-focus-tab {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--nx-text);
    font-size: .875rem;
}

.is-focus-tab:hover { background-color: var(--nx-surface-hover); }
.is-focus-tab.active { border-bottom-color: var(--nx-brand-500); background-color: var(--nx-surface); color: var(--nx-text-strong); }
.is-focus-tab:focus-visible { outline: 2px solid var(--nx-focus-border); outline-offset: -2px; }

#is-group-table tr.is-clickable { cursor: pointer; }
#is-group-table .is-arrow { display: inline-block; width: 1rem; color: var(--nx-text-muted); transition: transform .15s; }
#is-group-table tr[aria-expanded="true"] .is-arrow { transform: rotate(90deg); }
#is-group-table tr.is-group-items > td { padding: .25rem 0 .75rem 1.25rem; background-color: var(--nx-surface-subtle); }
#is-group-table tr.is-group-items .table { --bs-table-bg: transparent; font-size: .8125rem; }
.mix-info { line-height: 1; color: var(--nx-text-muted); vertical-align: baseline; }
.mix-info:hover, .mix-info:focus-visible { color: var(--nx-link); }
#mix-table .mix-arrow { display: inline-block; width: 1rem; color: var(--nx-text-muted); transition: transform .15s; }
#mix-table tr[aria-expanded="true"] .mix-arrow { transform: rotate(90deg); }
#mix-table .mix-arrow-space { display: inline-block; width: 1rem; }
#mix-table tr.mix-items > td { padding: .25rem 0 .75rem 1.75rem; background-color: var(--nx-surface-subtle); }
#mix-table tr.mix-items .table { --bs-table-bg: transparent; font-size: .8125rem; }

/* Label and value on one line, several pairs per row (cu-facts-1: one per row) */
.cu-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: .5rem 2rem;
}

.cu-facts.cu-facts-1 { grid-template-columns: 1fr; }

.cu-fact {
    display: flex;
    gap: .75rem;
    min-width: 0;
    padding-bottom: .5rem;
    border-bottom: 1px dashed var(--nx-border);
}

.cu-fact-label { flex: 0 0 8.5rem; color: var(--nx-text-muted); }
.cu-fact-value { flex: 1; min-width: 0; color: var(--nx-text-strong); overflow-wrap: anywhere; }
.cu-facts.small .cu-fact-label { flex-basis: 5.5rem; }

/* ------------------------------------------------------------------ */
/* Charts                                                              */
/* ------------------------------------------------------------------ */
.chart-box {
    width: 100%;
    min-height: 20rem;
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .app-sidebar,
    .app-main,
    .menu-arrow,
    .skeleton {
        transition: none !important;
        animation: none !important;
    }
}