:root {
    --bg: #ffffff;
    --panel: #ffffff;

    --text: #0b1220;
    --sub: #5a657a;

    --muted: #f5f7fb;
    --muted2: #eef3fb;

    --border: #e6eaf2;

    --shadow: 0 10px 30px rgba(16, 24, 40, 0.08);

    --radius: 16px;
    --radius2: 12px;

    /* Master Brand / Action Tokens (HGS BioScience Emerald) */
    --hgs-brand: #007455;
    --hgs-brand-hover: #065f46;
    --hgs-brand-active: #064d44;
    --hgs-brand-soft: #ecfdf5;
    --hgs-brand-focus: rgba(0, 116, 85, 0.2);
    --hgs-brand-selected: rgba(0, 116, 85, 0.08);

    /* Legacy Brand Token Compatibility */
    --hgs-green: #007455;
    --hgs-green-light: rgba(0, 116, 85, 0.08);

    /* Semantic Status Tokens */
    --status-draft: #475569;
    --status-draft-bg: #f1f5f9;
    --status-draft-border: #e2e8f0;
    --status-draft-dot: #94a3b8;

    --status-pending: #b45309;
    --status-pending-bg: #fffbeb;
    --status-pending-border: #fde68a;
    --status-pending-dot: #d97706;

    --status-approved: #15803d;
    --status-approved-bg: #f0fdf4;
    --status-approved-border: #bbf7d0;
    --status-approved-dot: #16a34a;

    --status-review: #9a3412;
    --status-review-bg: #fff7ed;
    --status-review-border: #fed7aa;
    --status-review-dot: #ea580c;

    --status-rejected: #b91c1c;
    --status-rejected-bg: #fef2f2;
    --status-rejected-border: #fecaca;
    --status-rejected-dot: #dc2626;

    --status-transit: #0f766e;
    --status-transit-bg: #f0fdfa;
    --status-transit-border: #99f6e4;
    --status-transit-dot: #0d9488;

    --status-completed: #15803d;
    --status-completed-bg: #ecfdf5;
    --status-completed-border: #a7f3d0;
    --status-completed-dot: #059669;

    --status-cancelled: #7f1d1d;
    --status-cancelled-bg: #fef2f2;
    --status-cancelled-border: #fecaca;
    --status-cancelled-dot: #991b1b;

    /* Granular Department Approvals & Dispatch/Shipment Tokens */
    --status-sales-approved: #15803d;
    --status-sales-approved-bg: #f0fdf4;
    --status-sales-approved-border: #bbf7d0;
    --status-sales-approved-dot: #16a34a;

    --status-rnd-approved: #6d28d9;
    --status-rnd-approved-bg: #f5f3ff;
    --status-rnd-approved-border: #ddd6fe;
    --status-rnd-approved-dot: #7c3aed;

    --status-lab-approved: #7e22ce;
    --status-lab-approved-bg: #faf5ff;
    --status-lab-approved-border: #e9d5ff;
    --status-lab-approved-dot: #9333ea;

    --status-wh-approved: #3730a3;
    --status-wh-approved-bg: #eef2ff;
    --status-wh-approved-border: #c7d2fe;
    --status-wh-approved-dot: #4f46e5;

    --status-fulfillment: #86198f;
    --status-fulfillment-bg: #fdf4ff;
    --status-fulfillment-border: #f5d0fe;
    --status-fulfillment-dot: #a21caf;

    --status-partially-dispatched: #1d4ed8;
    --status-partially-dispatched-bg: #eff6ff;
    --status-partially-dispatched-border: #bfdbfe;
    --status-partially-dispatched-dot: #2563eb;

    --status-fully-dispatched: #0e7490;
    --status-fully-dispatched-bg: #ecfeff;
    --status-fully-dispatched-border: #a5f3fc;
    --status-fully-dispatched-dot: #0891b2;

    --status-partially-shipped: #0284c7;
    --status-partially-shipped-bg: #f0f9ff;
    --status-partially-shipped-border: #bae6fd;
    --status-partially-shipped-dot: #0284c7;

    --status-fully-shipped: #0f766e;
    --status-fully-shipped-bg: #f0fdfa;
    --status-fully-shipped-border: #99f6e4;
    --status-fully-shipped-dot: #0d9488;

    --status-delivered: #047857;
    --status-delivered-bg: #ecfdf5;
    --status-delivered-border: #a7f3d0;
    --status-delivered-dot: #059669;

    /* Semantic System Tokens */
    --ok: #15803d;
    --warn: #b45309;
    --bad: #b91c1c;
    --info: #0f766e;

    /* Global Semantic Surface Tokens */
    --bg-app: #f8fafc;
    --surface-base: #f8fafc;
    --surface-card: #ffffff;
    --surface-elevated: #ffffff;
    --surface-subtle: #f1f5f9;
    --surface-hover: #f8fafc;
    --surface-selected: rgba(0, 116, 85, 0.08);
    --surface-modal: #ffffff;
    --surface-disabled: #f1f5f9;

    /* Typography Scale */
    --text-title: #0f172a;
    --text-primary: #1e293b;
    --text-body: #334155;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-disabled: #94a3b8;
    --text-link: #007455;
    --text-link-hover: #064d44;

    /* Border System */
    --border-default: #e2e8f0;
    --border-subtle: #f1f5f9;
    --border-light: #e2e8f0;
    --border-heavy: #cbd5e1;
    --border-focus: #007455;
    --border-hover: #cbd5e1;
    --border-brand: #007455;

    /* Action Tokens */
    --action-primary: #007455;
    --action-primary-hover: #065f46;
    --action-primary-active: #064d44;
    --action-danger: #b91c1c;
    --action-danger-hover: #991b1b;
    --action-success: #15803d;
    --action-warning: #b45309;

    /* Contextual Chips */
    --chip-trial-bg: #fffbeb;
    --chip-trial-text: #b45309;
    --chip-promo-bg: #f0fdfa;
    --chip-promo-text: #0f766e;
}

body.dark-mode {
    --bg: #0f172a;
    --panel: #111827;

    --text: #e5e7eb;
    --sub: #94a3b8;

    --muted: #1f2937;
    --muted2: #1e293b;

    --border: #1f2937;

    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

    /* Global Semantic Tokens */
    --surface-base: #0f172a;
    --surface-elevated: #1e293b;
    --surface-modal: #1e293b;
    --surface-subtle: #0f172a;
    --surface-card: #111827;
    --surface-hover: #1e293b;
    --surface-disabled: #334155;

    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;

    --border-light: #334155;
    --border-heavy: #475569;

    /* Gradients */
    --gradient-blue: linear-gradient(135deg, #4f46e5 0%, #581c87 100%);
    --gradient-orange: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    --gradient-indigo: linear-gradient(135deg, #4f46e5 0%, #7e22ce 100%);
    --gradient-green: linear-gradient(135deg, #059669 0%, #047857 100%);
    --gradient-red: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    --gradient-purple: linear-gradient(135deg, #c026d3 0%, #be123c 100%);
    --gradient-teal: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);

    /* Contextual Chips */
    --chip-trial-bg: rgba(126, 34, 206, 0.15);
    --chip-trial-text: #c084fc;
    --chip-promo-bg: rgba(3, 105, 161, 0.15);
    --chip-promo-text: #7dd3fc;
}

/* Global Utility Classes */
.theme-gradient-blue {
    background-image: var(--gradient-blue);
}
.theme-gradient-orange {
    background-image: var(--gradient-orange);
}
.theme-gradient-indigo {
    background-image: var(--gradient-indigo);
}
.theme-gradient-green {
    background-image: var(--gradient-green);
}
.theme-gradient-red {
    background-image: var(--gradient-red);
}
.theme-gradient-purple {
    background-image: var(--gradient-purple);
}
.theme-gradient-teal {
    background-image: var(--gradient-teal);
}

.text-primary {
    color: var(--text-primary) !important;
}
.text-secondary {
    color: var(--text-secondary) !important;
}
.text-muted {
    color: var(--text-muted) !important;
}

.theme-chip {
    padding: 0 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    height: 24px;
    letter-spacing: 0.5px;
}
.theme-chip.chip-trial {
    background-color: var(--chip-trial-bg) !important;
    color: var(--chip-trial-text) !important;
}
.theme-chip.chip-promo {
    background-color: var(--chip-promo-bg) !important;
    color: var(--chip-promo-text) !important;
}

/* Segmented Control Dark Theme */
body.dark-mode .segmented-control {
    background: #1e293b !important;
    border-color: #334155 !important;
}
body.dark-mode .segmented-control .segmented-slider {
    background: #0f172a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .segmented-control .segmented-tab {
    color: #94a3b8 !important;
}
body.dark-mode .segmented-control .segmented-tab:hover:not(.active) {
    color: #f1f5f9 !important;
}
body.dark-mode .segmented-control .segmented-tab.active {
    color: #4ade80 !important;
}
body.dark-mode .table-loading-overlay {
    background: rgba(15, 23, 42, 0.7) !important;
}

/* ══════════════════════════════════════════════════════════
   USER MANAGEMENT PAGE — DARK THEME
   ══════════════════════════════════════════════════════════ */
body.dark-mode .user-page .main-card {
    background: #111827 !important;
    border-color: #1f2937 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .user-page .filter-bar {
    background: #111827 !important;
    border-bottom: 1px solid #1f2937 !important;
}

body.dark-mode .user-page .search-container .search-icon {
    color: #64748b !important;
}

body.dark-mode .user-page .search-container .modern-search-input {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.dark-mode .user-page .search-container .modern-search-input::placeholder {
    color: #94a3b8 !important;
}

body.dark-mode .user-page .search-container .modern-search-input:focus {
    background: #0f172a !important;
    border-color: var(--hgs-brand, #007455) !important;
    box-shadow: 0 0 0 3px rgba(0, 116, 85, 0.25) !important;
}

/* User Listing Table in Dark Mode */
body.dark-mode .user-page .vgt-table {
    background-color: #111827 !important;
    border: 1px solid #1f2937 !important;
}

body.dark-mode .user-page .vgt-table thead th {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-bottom: 1.5px solid #1f2937 !important;
}

body.dark-mode .user-page .vgt-table tbody td {
    color: #e2e8f0 !important;
    border-bottom: 1px solid #1f2937 !important;
    background-color: transparent !important;
}

body.dark-mode .user-page .vgt-table tbody tr {
    background-color: #111827 !important;
}

body.dark-mode .user-page .vgt-table tbody tr:nth-child(even) {
    background-color: #141d2e !important;
}

body.dark-mode .user-page .vgt-table tbody tr:hover {
    background-color: #1e293b !important;
}

body.dark-mode .user-page .vgt-table tbody tr:hover td {
    color: #ffffff !important;
}

/* Action Cell Edit Button & Badges */
body.dark-mode .action-cell .btn-icon-only {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #38bdf8 !important;
}

body.dark-mode .action-cell .btn-icon-only:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode .user-page .privilege-badge-btn {
    background: rgba(0, 116, 85, 0.15) !important;
    color: #4ade80 !important;
    border-color: rgba(74, 222, 128, 0.25) !important;
}

body.dark-mode .user-page .privilege-badge-btn:hover {
    background: var(--hgs-brand, #007455) !important;
    color: #ffffff !important;
}

body.dark-mode .user-page .tag.info {
    background: rgba(14, 165, 233, 0.15) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
}

body.dark-mode .user-page .tag.ok {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
    border-color: rgba(74, 222, 128, 0.25) !important;
}

/* Pagination in Dark Mode */
body.dark-mode .user-page .vgt-wrap__footer {
    background: #111827 !important;
    border-top: 1px solid #1f2937 !important;
    color: #94a3b8 !important;
}

body.dark-mode .user-page .vgt-wrap__footer .footer__row-count__label,
body.dark-mode .user-page .vgt-wrap__footer .footer__navigation__page-info {
    color: #94a3b8 !important;
}

body.dark-mode .user-page .vgt-wrap__footer .footer__row-count__select {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .user-page .vgt-wrap__footer .footer__navigation__page-btn {
    color: #e2e8f0 !important;
}

body.dark-mode
    .user-page
    .vgt-wrap__footer
    .footer__navigation__page-btn:hover {
    color: var(--hgs-brand, #007455) !important;
}

/* ══════════════════════════════════════════════════════════
   UPDATE SYSTEM USER MODAL — DARK THEME
   ══════════════════════════════════════════════════════════ */
body.dark-mode .modal-user-section .modal-content {
    background-color: #111827 !important;
    border: 1px solid #1f2937 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .modal-user-section .modal-header {
    background: #111827 !important;
    border-bottom: 1px solid #1f2937 !important;
}

body.dark-mode .modal-user-section .modal-header .close {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .modal-user-section .modal-header .close span {
    color: #94a3b8 !important;
}

body.dark-mode .modal-user-section .modal-header .close:hover {
    background: #334155 !important;
}

body.dark-mode .modal-user-section .modal-header .close:hover span {
    color: #ffffff !important;
}

body.dark-mode .modal-user-section .user-modal-header-title {
    color: #f8fafc !important;
}

body.dark-mode .modal-user-section .user-modal-header-subtitle {
    color: #94a3b8 !important;
}

body.dark-mode .modal-user-section .modal-body {
    background: #0f172a !important;
}

body.dark-mode .modal-user-section .modal-footer {
    background: #111827 !important;
    border-top: 1px solid #1f2937 !important;
}

body.dark-mode .modal-user-section .premium-label {
    color: #cbd5e1 !important;
}

body.dark-mode .modal-user-section .premium-input-group {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .modal-user-section .premium-input-group:hover {
    border-color: #475569 !important;
}

body.dark-mode .modal-user-section .premium-input-group.has-focus,
body.dark-mode .modal-user-section .premium-input-group:focus-within {
    border-color: var(--hgs-brand, #007455) !important;
    box-shadow: 0 0 0 3px rgba(0, 116, 85, 0.25) !important;
}

body.dark-mode .modal-user-section .premium-input {
    color: #f8fafc !important;
    background: transparent !important;
}

body.dark-mode .modal-user-section .premium-input::placeholder {
    color: #64748b !important;
}

body.dark-mode .modal-user-section .user-modal-icon-sm {
    color: #94a3b8 !important;
}

/* Multiselect / BaseSelect in Dark Mode */
body.dark-mode .modal-user-section .base-select-control .multiselect__tags {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

body.dark-mode
    .modal-user-section
    .base-select-control:hover
    .multiselect__tags {
    border-color: #475569 !important;
}

body.dark-mode
    .modal-user-section
    .base-select-control.base-select--focused
    .multiselect__tags {
    border-color: var(--hgs-brand, #007455) !important;
    box-shadow: 0 0 0 3px rgba(0, 116, 85, 0.25) !important;
}

body.dark-mode .modal-user-section .base-select-single-label .base-select-text {
    color: #f8fafc !important;
}

body.dark-mode
    .modal-user-section
    .base-select-single-label
    .base-select-placeholder-text {
    color: #64748b !important;
}

body.dark-mode .modal-user-section .base-select-single-label .base-select-icon {
    color: #94a3b8 !important;
}

body.dark-mode
    .modal-user-section
    .base-select-control
    .multiselect__content-wrapper {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .modal-user-section .base-select-control .multiselect__option {
    background: #1e293b !important;
    color: #cbd5e1 !important;
}

body.dark-mode
    .modal-user-section
    .base-select-control
    .multiselect__option--highlight {
    background: var(--hgs-brand, #007455) !important;
    color: #ffffff !important;
}

body.dark-mode
    .modal-user-section
    .base-select-control
    .multiselect__option--selected {
    background: rgba(0, 116, 85, 0.2) !important;
    color: #4ade80 !important;
}

/* Datepicker in Dark Mode */
body.dark-mode .modal-user-section .premium-datepicker .mx-input {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

body.dark-mode .modal-user-section .premium-datepicker .mx-input:hover {
    border-color: #475569 !important;
}

body.dark-mode .modal-user-section .premium-datepicker .mx-input:focus {
    border-color: var(--hgs-brand, #007455) !important;
    box-shadow: 0 0 0 3px rgba(0, 116, 85, 0.25) !important;
}

body.dark-mode .modal-user-section .premium-datepicker .mx-icon-calendar {
    color: #94a3b8 !important;
}

/* Status & Role Section in Dark Mode */
body.dark-mode .modal-user-section .user-modal-status-section {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .modal-user-section .user-modal-status-label {
    color: #f8fafc !important;
}

body.dark-mode .modal-user-section .user-modal-status-desc {
    color: #94a3b8 !important;
}

body.dark-mode .modal-user-section .user-modal-admin-label {
    color: #f8fafc !important;
}

body.dark-mode .modal-user-section .user-modal-section-title {
    color: #94a3b8 !important;
}

body.dark-mode .modal-user-section .user-modal-section-divider {
    background: #334155 !important;
}

/* Accordion in User Modal */
body.dark-mode .modal-user-section .user-modal-accordion-item {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
}

body.dark-mode
    .modal-user-section
    .user-modal-accordion-item
    .accordion-header {
    background: #1e293b !important;
}

body.dark-mode .modal-user-section .user-modal-accordion-label {
    color: #f8fafc !important;
}

body.dark-mode .modal-user-section .user-modal-accordion-arrow {
    color: #94a3b8 !important;
}

body.dark-mode .modal-user-section .btn-premium-discard {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
}

body.dark-mode .modal-user-section .btn-premium-discard:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

/* User Modal Permission Table & Checkboxes */
body.dark-mode .modal-user-section .table-permission-modern thead th {
    background: #162032 !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

body.dark-mode .modal-user-section .table-permission-modern tbody td {
    color: #cbd5e1 !important;
    border-color: #1f2937 !important;
    background: transparent !important;
}

body.dark-mode .modal-user-section .table-permission-modern tbody tr {
    background: transparent !important;
}

body.dark-mode
    .modal-user-section
    .table-permission-modern
    tbody
    tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02) !important;
}

body.dark-mode .modal-user-section .label-text {
    color: #cbd5e1 !important;
}

body.dark-mode .modal-user-section .premium-checkbox-wrapper:hover .label-text {
    color: #ffffff !important;
}

body.dark-mode .modal-user-section .premium-checkbox,
body.dark-mode .modal-user-section .premium-radio {
    border-color: #475569 !important;
    background: #1e293b !important;
}

/* ══════════════════════════════════════════════════════════
   USER PRIVILEGES MODAL — DARK THEME
   ══════════════════════════════════════════════════════════ */
body.dark-mode .privilege-modal-content {
    background-color: #111827 !important;
    border: 1px solid #1f2937 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .privilege-modal-header {
    background: #111827 !important;
    border-bottom: 1px solid #1f2937 !important;
}

body.dark-mode .privilege-header-title {
    color: #f8fafc !important;
}

body.dark-mode .privilege-modal-header p.text-muted {
    color: #94a3b8 !important;
}

body.dark-mode .privilege-close-btn {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .privilege-close-btn:hover {
    background: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode .privilege-modal-body {
    background: #0f172a !important;
}

body.dark-mode .privilege-modal-footer {
    background: #111827 !important;
    border-top: 1px solid #1f2937 !important;
}

body.dark-mode .privilege-accordion-item {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .privilege-accordion-item .accordion-header {
    background: #1e293b !important;
}

body.dark-mode .privilege-accordion-item.bg-white {
    background: #1e293b !important;
}

body.dark-mode .privilege-accordion-label {
    color: #f8fafc !important;
}

body.dark-mode .privilege-modal-modern .text-dark {
    color: #f8fafc !important;
}

body.dark-mode .privilege-modal-modern .table th {
    background: #162032 !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

body.dark-mode .privilege-modal-modern .table td {
    color: #cbd5e1 !important;
    border-color: #1f2937 !important;
    background: transparent !important;
}

body.dark-mode .privilege-modal-modern .table tr {
    background: transparent !important;
}

body.dark-mode .privilege-modal-modern .table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02) !important;
}

body.dark-mode
    .privilege-modal-modern
    .modal__scroll-content::-webkit-scrollbar-track {
    background: #0f172a !important;
}

body.dark-mode
    .privilege-modal-modern
    .modal__scroll-content::-webkit-scrollbar-thumb {
    background-color: #334155 !important;
}