/* whiteXbit shared application palette.
   Brand colors stay separate from success, warning, danger and info states. */
:root {
    --wx-gold: #cda51d;
    --wx-gold-bright: #d4ad24;
    --wx-gold-dark: #a98512;
    --wx-gold-ink: #715807;
    --wx-black: #080909;
    --wx-black-soft: #0b0b0b;
    --wx-text: #151515;
    --wx-muted: #6b6b67;
    --wx-page: #f8f8f6;
    --wx-surface: #fff;
    --wx-surface-soft: #f3f2ee;
    --wx-border: #e3e1db;
    --wx-gold-soft: rgba(205, 165, 29, .14);
    --wx-focus: rgba(205, 165, 29, .25);
    --base-h: 46;
    --base-s: 75%;
    --base-l: 46%;
    --base: var(--base-h) var(--base-s) var(--base-l);
    --primary: 46 75% 46%;
    --primary-dark: 45 88% 24%;
    --heading: 0 0% 8%;
    --body: 60 2% 41%;
    --light-h: 60;
    --light-s: 13%;
    --light-l: 97%;
    --dark-h: 180;
    --dark-s: 6%;
    --dark-l: 3%;
    --sidebar-bg: var(--wx-black) !important;
    --sidebar-hover: #171713 !important;
    --sidebar-active: var(--wx-gold) !important;
    --body-bg: var(--wx-page) !important;
    --text: #f8f8f6 !important;
    --text-light: #c7c5bd !important;
    --card: var(--wx-surface) !important;
}

body { background-color: var(--wx-page); color: var(--wx-text); }
::selection { background: var(--wx-gold); color: var(--wx-black); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--wx-gold) !important;
    outline-offset: 2px;
}

/* Admin and Manager shells */
.sidebar, .sidebar__logo { background: var(--wx-black) !important; }
.sidebar {
    border-right-color: rgba(212, 173, 36, .18) !important;
    box-shadow: 8px 0 30px rgba(8, 9, 9, .18) !important;
}
.sidebar__logo { border-bottom-color: rgba(212, 173, 36, .18) !important; }
.sidebar .menu-icon, .sidebar__menu a, .sidebar__menu .nav-link { color: #b7b5ad !important; }
.sidebar__menu a:hover, .sidebar__menu a:hover .menu-icon {
    background: #171713 !important;
    color: #fff !important;
}
.sidebar-menu-item.active > a,
.sidebar__menu .active > a,
.sidebar__menu a.active,
.sidebar__menu .sidebar-submenu .sidebar-menu-item.active > a {
    background: linear-gradient(135deg, var(--wx-gold-bright), var(--wx-gold)) !important;
    color: var(--wx-black) !important;
    box-shadow: 0 8px 22px rgba(205, 165, 29, .22) !important;
}
.sidebar-menu-item.active .menu-icon,
.sidebar__menu a.active .menu-icon,
.sidebar__menu .sidebar-submenu .sidebar-menu-item.active > a .menu-icon { color: var(--wx-black) !important; }
.sidebar-submenu { border-left-color: rgba(212, 173, 36, .22) !important; }
.sidebar__menu-wrapper::-webkit-scrollbar-thumb,
.sidebar__menu-wrapper::-webkit-scrollbar-thumb:hover { background: var(--wx-gold-dark) !important; }
.sidebar-submenu .menu-badge {
    background: rgba(205, 165, 29, .16) !important;
    border-color: rgba(212, 173, 36, .42) !important;
    color: #f1d778 !important;
}
.navbar-wrapper, .navbar-wrapper.bg--dark {
    background: var(--wx-surface) !important;
    border-bottom-color: var(--wx-border) !important;
    box-shadow: 0 1px 8px rgba(8, 9, 9, .05) !important;
}
.navbar-search-field,
.navbar__action-list > li > button,
.navbar__action-list > li > button.primary--layer,
.navbar-user {
    background: var(--wx-page) !important;
    border-color: var(--wx-border) !important;
}
.navbar-search-field, .navbar-user__name { color: var(--wx-text) !important; }
.navbar-search-field:focus,
.form-control:focus,
.form-select:focus,
.form--control:focus,
.form--select:focus,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
    background: var(--wx-surface) !important;
    border-color: var(--wx-gold) !important;
    box-shadow: 0 0 0 .2rem var(--wx-focus) !important;
}
.navbar__action-list > li > button:hover,
.navbar__action-list > li > button.primary--layer:hover {
    background: var(--wx-gold) !important;
    border-color: var(--wx-gold) !important;
    color: var(--wx-black) !important;
}
.page-wrapper, .page-container, .content-wrapper { background-color: var(--wx-page) !important; }
:where(.card, .dashboard-w1, .modern-widget, .modern-setting-card, .table-responsive, .modal-content, .dropdown-menu) {
    border-color: var(--wx-border) !important;
}
:where(.card, .modern-widget, .modern-setting-card, .modal-content, .dropdown-menu) {
    background-color: var(--wx-surface) !important;
}
:where(.card-title, .page-title, .modal-title, .dropdown-header, .table) { color: var(--wx-text); }
.table > :not(caption) > * > *, .table thead th { border-color: var(--wx-border) !important; }
.table thead th, .table-light, .table-light > th, .table-light > td {
    background: var(--wx-surface-soft) !important;
    color: var(--wx-text) !important;
}
.table-hover > tbody > tr:hover > * { background: #fbfaf5 !important; }
:where(.form-control, .form-select, .form--control, .form--select, .select2-selection) {
    background-color: var(--wx-surface) !important;
    border-color: var(--wx-border) !important;
    color: var(--wx-text) !important;
}
:where(.form-control, .form--control)::placeholder { color: #918f88 !important; }
.form-check-input:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked,
.bootstrap-switch-primary,
.toggle.btn-primary {
    background-color: var(--wx-gold) !important;
    border-color: var(--wx-gold) !important;
}
.form-check-input:focus, input[type="checkbox"]:focus, input[type="radio"]:focus {
    border-color: var(--wx-gold) !important;
    box-shadow: 0 0 0 .2rem var(--wx-focus) !important;
}
:where(.btn--primary, .btn-primary, .cmn-btn, .admin-auth__btn, .manager-auth__btn):not(.btn--success):not(.btn-success):not(.btn--danger):not(.btn-danger):not(.btn--warning):not(.btn-warning):not(.btn--info):not(.btn-info) {
    background: linear-gradient(135deg, var(--wx-gold-bright), var(--wx-gold)) !important;
    border-color: var(--wx-gold) !important;
    color: var(--wx-black) !important;
}
:where(.btn--primary, .btn-primary, .cmn-btn, .admin-auth__btn, .manager-auth__btn):not(.btn--success):not(.btn-success):not(.btn--danger):not(.btn-danger):not(.btn--warning):not(.btn-warning):not(.btn--info):not(.btn-info):hover {
    background: var(--wx-gold-dark) !important;
    border-color: var(--wx-gold-dark) !important;
    color: #fff !important;
}
.btn-outline-primary { border-color: var(--wx-gold-dark) !important; color: var(--wx-gold-ink) !important; }
.btn-outline-primary:hover {
    background: var(--wx-gold) !important;
    border-color: var(--wx-gold) !important;
    color: var(--wx-black) !important;
}
.pagination .page-link {
    background: var(--wx-surface) !important;
    border-color: var(--wx-border) !important;
    color: var(--wx-muted) !important;
}
.pagination .active .page-link,
.pagination .page-item.active .page-link,
.pagination .page-link:hover {
    background: var(--wx-gold) !important;
    border-color: var(--wx-gold) !important;
    color: var(--wx-black) !important;
}
.nav-tabs { border-bottom-color: var(--wx-border) !important; }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link.active, .nav-pills .nav-link.active {
    border-color: var(--wx-border) var(--wx-border) var(--wx-surface) !important;
    background: var(--wx-surface) !important;
    color: var(--wx-gold-ink) !important;
}
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
    background: var(--wx-gold-soft) !important;
    color: var(--wx-text) !important;
}
.modal-header, .modal-footer { border-color: var(--wx-border) !important; }
.tooltip-inner, .popover-header { background: var(--wx-black) !important; color: #fff !important; }
.popover { border-color: var(--wx-border) !important; }
.spinner-border.text-primary,
.spinner-grow.text-primary,
.modern-setting-icon,
.modern-setting-card:hover .modern-setting-arrow { color: var(--wx-gold-dark) !important; }
.modern-setting-icon { background: var(--wx-gold-soft) !important; }
.empty-message i, .empty-state i { color: var(--wx-gold-dark) !important; }

/* Staff authentication pages use dedicated inline styles. */
.admin-auth, .manager-auth { background: var(--wx-black) !important; }
.admin-auth__bg::before, .manager-auth__bg::before { background: rgba(205, 165, 29, .24) !important; }
.admin-auth__bg::after, .manager-auth__bg::after { background: rgba(212, 173, 36, .10) !important; }
:where(.admin-auth__card, .manager-auth__card) {
    background: rgba(11, 11, 11, .88) !important;
    border-color: rgba(212, 173, 36, .25) !important;
}
:where(.admin-auth__logo, .manager-auth__logo) {
    background: var(--wx-gold-soft) !important;
    color: var(--wx-gold-bright) !important;
}
:where(.admin-auth__brand span, .manager-auth__brand span, .admin-auth__head p, .manager-auth__head p) {
    color: #b7b5ad !important;
}
:where(.admin-auth__control, .manager-auth__control) {
    background: #171713 !important;
    border-color: #34342e !important;
    color: #fff !important;
}
:where(.admin-auth__control, .manager-auth__control):focus {
    border-color: var(--wx-gold) !important;
    box-shadow: 0 0 0 .2rem var(--wx-focus) !important;
}

/* Client shell: dark remains default and light remains available. */
:root, html[data-client-theme="dark"] {
    --client-bg: #080909;
    --client-surface: #0b0b0b;
    --client-surface-raised: #151512;
    --client-surface-soft: #1d1d18;
    --client-card: var(--client-surface-raised);
    --client-border: #34342e;
    --client-border-strong: #4a493f;
    --client-text: #f8f8f6;
    --client-text-muted: #c7c5bd;
    --client-muted: #a09e96;
    --client-primary: #d4ad24;
    --client-primary-hover: #cda51d;
    --client-primary-soft: rgba(205, 165, 29, .16);
    --client-input-bg: #11110f;
    --client-input-text: #f8f8f6;
    --client-placeholder: #85837c;
    --client-table-head: #11110f;
    --client-row-hover: #1b1b17;
    --client-overlay: rgba(8, 9, 9, .76);
    --client-topbar-bg: rgba(8, 9, 9, .90);
    --client-focus-ring: rgba(205, 165, 29, .30);
    --client-chart-bg: #151512;
    --client-chart-grid: rgba(107, 107, 103, .25);
    --client-chart-text: #b7b5ad;
}
html[data-client-theme="light"] {
    --client-bg: #f8f8f6;
    --client-surface: #fff;
    --client-surface-raised: #fff;
    --client-surface-soft: #f3f2ee;
    --client-card: #fff;
    --client-border: #e3e1db;
    --client-border-strong: #cfccc3;
    --client-text: #151515;
    --client-text-muted: #51514e;
    --client-muted: #6b6b67;
    --client-primary: #715807;
    --client-primary-hover: #4f3d04;
    --client-primary-soft: rgba(205, 165, 29, .14);
    --client-input-bg: #fff;
    --client-input-text: #151515;
    --client-placeholder: #85837c;
    --client-table-head: #f3f2ee;
    --client-row-hover: #fbfaf5;
    --client-overlay: rgba(8, 9, 9, .48);
    --client-topbar-bg: rgba(255, 255, 255, .90);
    --client-focus-ring: rgba(205, 165, 29, .25);
    --client-chart-bg: #fff;
    --client-chart-grid: rgba(207, 204, 195, .70);
    --client-chart-text: #6b6b67;
}
.client-btn-primary {
    background: linear-gradient(135deg, var(--wx-gold-bright), var(--wx-gold)) !important;
    color: var(--wx-black) !important;
}
.client-btn-primary:hover { background: var(--wx-gold-dark) !important; color: #fff !important; }
.client-sidebar__nav a.active, .client-nav-dropdown.active > .client-nav-toggle { color: var(--client-primary) !important; }
html[data-client-theme="dark"] .modern-preloader__logo { background: var(--wx-black-soft) !important; }

/* Public and customer authentication surfaces. */
.auth-shell, .auth-visual { background-color: var(--wx-black) !important; }
.auth-visual::before, .auth-visual::after {
    background: radial-gradient(circle, rgba(205, 165, 29, .22), transparent 68%) !important;
}
.auth-kicker, .auth-row a, .auth-bottom a, .auth-visual__card i { color: var(--wx-gold-bright) !important; }
.auth-form-side, .auth-form-card { background: var(--wx-page) !important; }
.auth-control {
    background: var(--wx-surface) !important;
    border-color: var(--wx-border) !important;
    color: var(--wx-text) !important;
}
.auth-control:focus {
    border-color: var(--wx-gold) !important;
    box-shadow: 0 0 0 .2rem var(--wx-focus) !important;
}
.auth-btn {
    background: linear-gradient(135deg, var(--wx-gold-bright), var(--wx-gold)) !important;
    border-color: var(--wx-gold) !important;
    color: var(--wx-black) !important;
}
.auth-btn:hover {
    background: var(--wx-gold-dark) !important;
    border-color: var(--wx-gold-dark) !important;
    color: #fff !important;
}
.auth-check input:checked { accent-color: var(--wx-gold); }
.badge--primary, .client-badge-primary {
    background: var(--wx-gold-soft) !important;
    color: var(--wx-gold-ink) !important;
}