/*
 * Crown Arcade — admin override layer (Phase 2 reskin)
 * ----------------------------------------------------
 * Loaded AFTER assets/css/styles.css (authenticated shell, via includes/header.php)
 * and AFTER output.css on the login page (index.php).
 *
 * Style lock: flatter reserved midnight + soft gold.
 *   - flat fills only: no gradients, glows, blur, rays or nebula
 *   - gold is an accent (CTAs, active nav, focus), never a large fill area
 *   - vendor styles.css stays untouched; every rule here is an override
 */

:root {
  /* Crown tokens (PLAN §6) */
  --ca-bg: #12052F;
  --ca-bg-top: #17063B;
  --ca-surface: #1A0D40;
  --ca-surface-2: #170B3A;
  --ca-field: #160E40;
  --ca-border: #3A2B72;
  --ca-hairline: #261A52;
  --ca-text: #FFFFFF;
  --ca-text-muted: #B4AED0;
  --ca-text-silver: #E8E8EE;
  --ca-text-meta: #C9CED8;
  --ca-accent: #C9A94E;
  --ca-accent-deep: #C9A227;
  --ca-on-accent: #1A0F3D;
  --ca-danger: #FF5A5A;
  --ca-success: #45CB76;
  --ca-warning: #D19E26;
  --ca-radius: 8px;

  /* Remap vendor Bootstrap tokens (were Jhoom purple #6a5be2 / white) */
  --bs-blue: var(--ca-accent);
  --bs-primary: var(--ca-accent);
  --bs-primary-rgb: 201, 169, 78;
  --bs-dark: var(--ca-surface);
  --bs-dark-rgb: 26, 13, 64;
  --bs-light: var(--ca-surface-2);
  --bs-light-rgb: 23, 11, 58;
  --bs-body-bg: var(--ca-bg);
  --bs-body-bg-rgb: 18, 5, 47;
  --bs-body-color: var(--ca-text-silver);
  --bs-body-color-rgb: 232, 232, 238;
  --bs-border-color: var(--ca-border);
  --bs-link-color: var(--ca-accent);
  --bs-link-hover-color: var(--ca-accent-deep);
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
html,
body {
  background-color: var(--ca-bg) !important;
  color: var(--ca-text-silver);
  color-scheme: dark;
}

/* Vendor paints the content column white. */
#layoutSidenav #layoutSidenav_content {
  background-color: var(--ca-bg);
}

::selection {
  background: var(--ca-accent);
  color: var(--ca-on-accent);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.dash-heading,
.category-heading,
.edit-h1,
.head h1,
.edit-form h1,
.modal-title {
  color: var(--ca-text);
}

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

.text-muted,
.sub-text-edit,
.dash_p,
.dash_card .sub-text,
.head p,
.edit-form label,
.modal label,
.form-label,
.file-upload-label,
.neutral-text,
.timestamp {
  color: var(--ca-text-muted) !important;
}

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

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

/* Vendor forced .bg-dark to white; restore to Crown surface. */
.bg-dark {
  background-color: var(--ca-surface) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--ca-border) !important;
}

hr,
.divider {
  background: var(--ca-hairline) !important;
  border-color: var(--ca-hairline) !important;
  opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Topbar                                                              */
/* ------------------------------------------------------------------ */
.sb-topnav {
  background-color: var(--ca-surface) !important;
  border-bottom: 1px solid var(--ca-hairline);
}
.sb-topnav .navbar-brand,
.sb-topnav .navbar-brand:hover,
.sb-topnav .navbar-brand:focus {
  color: var(--ca-text) !important;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-topnav .navbar-brand img {
  width: 24px !important;
  height: 24px;
  object-fit: contain;
}
.sb-topnav.navbar-dark #sidebarToggle,
.sb-topnav .nav-link,
.sb-topnav .navbar-nav .nav-link {
  color: var(--ca-text-muted) !important;
}
.sb-topnav.navbar-dark #sidebarToggle:hover,
.sb-topnav .nav-link:hover,
.sb-topnav .nav-link:focus,
.sb-topnav .nav-link.show {
  color: var(--ca-accent) !important;
}

/* Dropdowns (user menu, selects built on Bootstrap dropdowns) */
.dropdown-menu {
  background-color: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  box-shadow: none;
}
.dropdown-item {
  color: var(--ca-text-silver);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--ca-surface-2);
  color: var(--ca-accent);
}
.dropdown-item .text-gray-400 {
  color: var(--ca-text-muted) !important;
}
.dropdown-divider {
  border-top-color: var(--ca-hairline);
}

/* ------------------------------------------------------------------ */
/* Sidebar                                                             */
/* ------------------------------------------------------------------ */
.sb-sidenav-dark {
  background-color: var(--ca-surface) !important;
  border-right: 1px solid var(--ca-hairline);
  color: var(--ca-text-muted);
}
.sb-sidenav-dark .sb-sidenav-menu .sb-sidenav-menu-heading {
  color: var(--ca-text-muted);
  opacity: 0.75;
  letter-spacing: 0.12em;
}
.sb-sidenav-dark .sb-sidenav-menu .nav-link,
.sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-nav-link-icon,
.sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-sidenav-collapse-arrow {
  color: var(--ca-text-silver);
}
.sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-nav-link-icon {
  color: var(--ca-text-muted) !important;
}
.sb-sidenav .sb-sidenav-menu .nav .nav-link {
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: background-color 150ms ease, color 150ms ease;
}
.sb-sidenav .sb-sidenav-menu .nav .nav-link:hover {
  background-color: var(--ca-surface-2);
  color: var(--ca-text);
}
.sb-sidenav-dark .sb-sidenav-menu .nav-link:hover .sb-nav-link-icon {
  color: var(--ca-accent) !important;
}
/* Active: gold text + 2px gold left rule on a nested surface — no glow. */
.sb-sidenav .sb-sidenav-menu .nav .nav-link.active {
  background-color: var(--ca-surface-2);
  border-left-color: var(--ca-accent);
  color: var(--ca-accent);
  font-weight: 500;
}
.sb-sidenav .sb-sidenav-menu .nav .nav-link.active .sb-nav-link-icon,
.sb-sidenav-dark .sb-sidenav-menu .nav-link.active .sb-nav-link-icon {
  color: var(--ca-accent) !important;
}
.sb-sidenav-dark .sb-sidenav-footer {
  background-color: var(--ca-surface-2);
  border-top: 1px solid var(--ca-hairline);
  color: var(--ca-text-muted);
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
#layoutSidenav_content > footer,
footer.bg-light {
  background-color: var(--ca-bg) !important;
  border-top: 1px solid var(--ca-hairline);
}
#layoutSidenav_content > footer .text-muted {
  color: var(--ca-text-muted) !important;
}

/* ------------------------------------------------------------------ */
/* Breadcrumb / tabs                                                   */
/* ------------------------------------------------------------------ */
.breadcrumb .breadcrumb-item,
.breadcrumb-item a {
  color: var(--ca-text-muted);
}
.breadcrumb .breadcrumb-item:last-child,
.breadcrumb-item.active {
  color: var(--ca-text);
}
.breadcrumb .round {
  background: var(--ca-border);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--ca-border);
}

.nav-tabs {
  border-bottom-color: var(--ca-hairline);
}
.nav-tabs .nav-link,
.nav-pills .nav-link {
  color: var(--ca-text-muted);
}
.nav-tabs .nav-link:hover {
  border-color: transparent;
  color: var(--ca-text);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background-color: transparent;
  border-color: transparent transparent var(--ca-accent);
  color: var(--ca-accent);
}
.nav-pills .nav-link.active {
  background-color: var(--ca-accent);
  color: var(--ca-on-accent);
}
.tab-chip {
  color: var(--ca-text-muted);
}
.tab-chip:hover {
  color: var(--ca-accent);
}
.tab-active {
  border-bottom-color: var(--ca-accent);
  color: var(--ca-accent);
}

/* ------------------------------------------------------------------ */
/* Surfaces: cards, panels, containers                                 */
/* ------------------------------------------------------------------ */
.card,
.dash_card,
.chart-card,
.user-data-view,
.user-table-data,
.add-category-box,
.image-card,
.modal-content {
  background-color: var(--ca-surface) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: var(--ca-radius);
  box-shadow: none !important;
  color: var(--ca-text-silver);
}
.card-header,
.card-footer {
  background-color: var(--ca-surface-2);
  border-color: var(--ca-hairline);
  color: var(--ca-text);
}
.dash_card h1 {
  color: var(--ca-text);
}
.edit-container,
.user-edit-container {
  border-color: var(--ca-hairline) !important;
}
.image-wrapper {
  border-bottom-color: var(--ca-hairline);
}
.image-card .image-name {
  color: var(--ca-text-silver);
}
.image-wrapper .overlay {
  background-color: rgba(18, 5, 47, 0.72);
}
.image-wrapper .overlay button {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  color: var(--ca-text-silver);
}
.image-wrapper .overlay button:hover {
  background: var(--ca-surface-2);
  color: var(--ca-accent);
}
.not-selected {
  background-color: var(--ca-surface-2);
}
.name-initial,
.name-initial-big {
  background-color: var(--ca-surface-2);
  border: 1px solid var(--ca-border);
  color: var(--ca-accent);
}

/* Bottom action bar on edit pages */
.bottom-fixed-bar {
  background-color: var(--ca-surface) !important;
  border-top: 1px solid var(--ca-hairline) !important;
}

/* Modals */
.modal-header,
.modal-footer {
  border-color: var(--ca-hairline);
}
.modal-backdrop.show {
  opacity: 0.7;
  background-color: #07021A;
}
.btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* Primary = soft gold fill, dark text. Secondary = lavender outline.  */
/* Destructive reds kept, only their light hover fills are darkened.   */
/* ------------------------------------------------------------------ */
.btn-primary,
.btn-dark,
.delete-user-btn,
.pay-all-btn,
.download-data-btn,
.back-btn,
.save-user-btn,
.add-category-btn,
.unmake-cat,
.simple-btn,
.pay-button,
.edit-user.active,
.bottom-fixed-bar .btn-save,
.button-modal-action,
.add-new-btn,
.btn-save {
  background-color: var(--ca-accent) !important;
  border: 1px solid var(--ca-accent) !important;
  color: var(--ca-on-accent) !important;
  box-shadow: none !important;
  font-weight: 500;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-dark:hover,
.btn-dark:focus,
.delete-user-btn:hover,
.pay-all-btn:hover,
.download-data-btn:hover,
.back-btn:hover,
.save-user-btn:hover,
.add-category-btn:hover,
.unmake-cat:hover,
.simple-btn:hover,
.pay-button:hover,
.bottom-fixed-bar .btn-save:hover,
.button-modal-action:hover,
.add-new-btn:hover,
.btn-save:hover {
  background-color: var(--ca-accent-deep) !important;
  border-color: var(--ca-accent-deep) !important;
  color: var(--ca-on-accent) !important;
}

/* Outline / neutral actions */
.edit-user,
.make-cat,
.btn-export,
.btn-close-modal,
.btn-outlined,
.simple-btn-t,
.add-more-prize,
.btn-secondary,
.btn-light,
.btn-outline-secondary,
.btn-outline-dark {
  background-color: transparent !important;
  border: 1px solid var(--ca-border) !important;
  color: var(--ca-text-silver) !important;
  box-shadow: none !important;
}
.edit-user:hover,
.make-cat:hover,
.btn-export:hover,
.btn-close-modal:hover,
.btn-outlined:hover,
.simple-btn-t:hover,
.add-more-prize:hover,
.btn-secondary:hover,
.btn-light:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover {
  background-color: var(--ca-surface-2) !important;
  border-color: var(--ca-accent) !important;
  color: var(--ca-accent) !important;
}
.btn-outline-primary {
  border-color: var(--ca-accent);
  color: var(--ca-accent);
}
.btn-outline-primary:hover {
  background-color: var(--ca-accent);
  border-color: var(--ca-accent);
  color: var(--ca-on-accent);
}

/* Disabled / inactive states (vendor used purple outline) */
.disabled,
.simple-btn.disabled {
  background-color: transparent !important;
  border: 1px solid var(--ca-border) !important;
  color: var(--ca-text-muted) !important;
}
.disabled-btn {
  background-color: var(--ca-border) !important;
  color: var(--ca-text-muted) !important;
}
.btn-disabled {
  color: var(--ca-text-muted);
}

/* Destructive — keep red, darken light hover fills */
.delete-user:hover,
.reject,
.ban-user,
.ban-user:hover,
span.error {
  background-color: rgba(255, 90, 90, 0.12) !important;
}
.del-btn-new:hover,
.casual-btn {
  background-color: transparent !important;
}
.casual-btn:hover {
  background-color: #fa5151 !important;
}
.del-new-btn:hover {
  color: var(--ca-danger) !important;
  border-color: var(--ca-danger) !important;
}
.delete-image-btn {
  background: var(--ca-surface);
}

/* Status chips on dark surfaces */
.unban-user,
.unban-user:hover,
span.success {
  background-color: rgba(69, 203, 118, 0.14) !important;
}
span.pending {
  background-color: rgba(209, 158, 38, 0.16) !important;
}

/* Focus ring: 1px soft gold, flat */
.btn:focus,
.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--ca-accent);
  outline-offset: 1px;
  box-shadow: none !important;
}

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */
.form-control,
.form-select,
.edit-form input,
.edit-form select,
.edit-form textarea,
.modal select,
.modal input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.modal textarea,
.ids-container input,
.quickSearchContainer input,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
textarea,
select {
  background-color: var(--ca-field) !important;
  border: 1px solid var(--ca-border) !important;
  color: var(--ca-text) !important;
  border-radius: 6px;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--ca-text-muted) !important;
  opacity: 0.7;
}
.form-control:hover,
.form-select:hover,
.edit-form input:hover,
.edit-form select:hover,
.edit-form textarea:hover,
.modal select:hover,
.ids-container input:hover,
.quickSearchContainer input:hover {
  border-color: var(--ca-text-muted) !important;
}
.form-control:focus,
.form-select:focus,
.edit-form input:focus,
.edit-form select:focus,
.edit-form textarea:focus,
.modal select:focus,
.quickSearchContainer input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--ca-accent) !important;
  box-shadow: 0 0 0 1px var(--ca-accent) !important;
  outline: none;
}
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--ca-surface-2) !important;
  color: var(--ca-text-muted) !important;
}
option {
  background-color: var(--ca-surface);
  color: var(--ca-text);
}
.quickSearchContainer span {
  color: var(--ca-text-muted);
}
.input-group-text {
  background-color: var(--ca-surface-2);
  border-color: var(--ca-border);
  color: var(--ca-text-muted);
}

.form-check-input {
  background-color: var(--ca-field);
  border-color: var(--ca-border);
}
.form-check-input:checked {
  background-color: var(--ca-accent);
  border-color: var(--ca-accent);
}
.form-check-input:focus {
  border-color: var(--ca-accent);
  box-shadow: 0 0 0 1px var(--ca-accent);
}
.form-switch .form-check-input:not(:checked) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23B4AED0'/%3e%3c/svg%3e");
}
.form-check-label {
  color: var(--ca-text-silver);
}

.file-upload-wrapper {
  border-color: var(--ca-border) !important;
  background-color: var(--ca-surface-2);
}
.file-upload-wrapper:hover {
  border-color: var(--ca-accent) !important;
}
#color {
  border-color: var(--ca-border);
}

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--ca-field) !important;
  border: 1px solid var(--ca-border) !important;
  color: var(--ca-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ca-text) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--ca-surface-2) !important;
  border: 1px solid var(--ca-border) !important;
  color: var(--ca-text-silver) !important;
}
.select2-dropdown {
  background-color: var(--ca-surface);
  border-color: var(--ca-border);
  color: var(--ca-text-silver);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--ca-accent) !important;
  color: var(--ca-on-accent) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
  background-color: var(--ca-surface-2);
}
.select2-search--dropdown .select2-search__field {
  background-color: var(--ca-field);
  border-color: var(--ca-border);
  color: var(--ca-text);
}

/* Quill editor */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  border-color: var(--ca-border) !important;
}
.ql-toolbar.ql-snow {
  background-color: var(--ca-surface-2);
}
.ql-container.ql-snow {
  background-color: var(--ca-field);
  color: var(--ca-text);
}
.ql-snow .ql-stroke {
  stroke: var(--ca-text-muted);
}
.ql-snow .ql-fill {
  fill: var(--ca-text-muted);
}
.ql-snow .ql-picker,
.ql-snow .ql-picker-label {
  color: var(--ca-text-muted);
}
.ql-snow .ql-picker-options {
  background-color: var(--ca-surface);
  border-color: var(--ca-border) !important;
}
.ql-snow button:hover .ql-stroke,
.ql-snow .ql-active .ql-stroke {
  stroke: var(--ca-accent);
}
.ql-snow button:hover .ql-fill,
.ql-snow .ql-active .ql-fill {
  fill: var(--ca-accent);
}
.ql-editor.ql-blank::before {
  color: var(--ca-text-muted);
}

/* ------------------------------------------------------------------ */
/* Tables: Bootstrap, DataTables, page-inline permissions table        */
/* ------------------------------------------------------------------ */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ca-text-silver);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-color: var(--ca-text-silver);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  --bs-table-hover-color: var(--ca-text);
  --bs-table-active-bg: var(--ca-surface-2);
  color: var(--ca-text-silver);
  border-color: var(--ca-hairline);
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--ca-hairline);
}
/* BS 5.1 draws a 2px currentColor rule between thead and tbody. */
.table > :not(:first-child) {
  border-top: 1px solid var(--ca-border) !important;
}
.table thead th,
table.dataTable thead th,
table.dataTable thead td {
  background-color: var(--ca-surface-2);
  color: var(--ca-text-muted);
  border-bottom: 1px solid var(--ca-border) !important;
}
table.dataTable tbody tr,
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
  background-color: transparent !important;
  color: var(--ca-text-silver);
}
table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.even {
  background-color: rgba(255, 255, 255, 0.03) !important;
}
table.dataTable tbody td,
table.dataTable tbody th {
  border-top-color: var(--ca-hairline) !important;
  border-bottom-color: var(--ca-hairline) !important;
}
table.dataTable > tbody > tr > * {
  box-shadow: none !important;
}
table.dataTable tfoot th {
  border-bottom-color: var(--ca-hairline) !important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate,
div.dt-container {
  color: var(--ca-text-muted) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button,
div.dt-container .dt-paging .dt-paging-button {
  color: var(--ca-text-muted) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
div.dt-container .dt-paging .dt-paging-button:hover {
  color: var(--ca-accent) !important;
  border-color: var(--ca-border) !important;
  background: var(--ca-surface-2) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
  color: var(--ca-on-accent) !important;
  background: var(--ca-accent) !important;
  border-color: var(--ca-accent) !important;
}

/* permissions-table lives in page-inline <style> (add-user / edit-admin-user);
   the extra `body` raises specificity so this layer still wins. */
body .permissions-table {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  box-shadow: none;
}
body .permissions-table thead {
  background: var(--ca-surface-2);
  border-bottom-color: var(--ca-border);
}
body .permissions-table th {
  color: var(--ca-text-muted);
}
body .permissions-table td {
  color: var(--ca-text-silver);
}
body .permissions-table tbody tr {
  border-bottom-color: var(--ca-hairline);
}
body .permissions-table tbody tr:hover {
  background: var(--ca-surface-2);
}

/* ag-Grid (quartz theme via CSS params — works for legacy and v33 themes) */
.ag-theme-quartz,
.ag-theme-quartz-dark {
  --ag-background-color: var(--ca-surface);
  --ag-foreground-color: var(--ca-text-silver);
  --ag-text-color: var(--ca-text-silver);
  --ag-data-color: var(--ca-text-silver);
  --ag-header-background-color: var(--ca-surface-2);
  --ag-header-foreground-color: var(--ca-text-muted);
  --ag-header-text-color: var(--ca-text-muted);
  --ag-border-color: var(--ca-border);
  --ag-row-border-color: var(--ca-hairline);
  --ag-secondary-border-color: var(--ca-hairline);
  --ag-odd-row-background-color: rgba(255, 255, 255, 0.02);
  --ag-row-hover-color: rgba(255, 255, 255, 0.04);
  --ag-selected-row-background-color: rgba(201, 169, 78, 0.12);
  --ag-control-panel-background-color: var(--ca-surface-2);
  --ag-input-border-color: var(--ca-border);
  --ag-input-focus-border-color: var(--ca-accent);
  --ag-checkbox-checked-color: var(--ca-accent);
  --ag-checkbox-background-color: var(--ca-field);
  --ag-active-color: var(--ca-accent);
  --ag-accent-color: var(--ca-accent);
  --ag-range-selection-border-color: var(--ca-accent);
  --ag-modal-overlay-background-color: rgba(18, 5, 47, 0.66);
  --ag-menu-background-color: var(--ca-surface);
  --ag-panel-background-color: var(--ca-surface);
  --ag-chrome-background-color: var(--ca-surface-2);
  --ag-wrapper-border-radius: var(--ca-radius);
  --ag-browser-color-scheme: dark;
}
.ag-theme-quartz .ag-root-wrapper {
  background-color: var(--ca-surface);
  border-color: var(--ca-border);
}
.ag-theme-quartz .ag-header {
  background-color: var(--ca-surface-2);
  border-bottom-color: var(--ca-border);
}
.ag-theme-quartz .ag-checkbox-input-wrapper input[type="checkbox"]:checked + .ag-icon {
  background-color: var(--ca-accent) !important;
  border-color: var(--ca-accent) !important;
}
.ag-theme-quartz .ag-checkbox-input-wrapper input[type="checkbox"] + .ag-icon {
  border-color: var(--ca-border) !important;
}
.ag-theme-quartz ::-webkit-scrollbar-thumb {
  background-color: var(--ca-border);
  border-color: var(--ca-surface);
}
.ag-theme-quartz ::-webkit-scrollbar-track {
  background-color: var(--ca-surface);
}
.ag-theme-quartz,
.ag-theme-quartz * {
  scrollbar-color: var(--ca-border) var(--ca-surface);
}

/* ------------------------------------------------------------------ */
/* ApexCharts (dashboard) — text/grid readable on midnight             */
/* ------------------------------------------------------------------ */
.apexcharts-text,
.apexcharts-xaxis-label,
.apexcharts-yaxis-label,
.apexcharts-legend-text {
  fill: var(--ca-text-muted) !important;
  color: var(--ca-text-muted) !important;
}
.apexcharts-gridline,
.apexcharts-xaxis line,
.apexcharts-xaxis-tick {
  stroke: var(--ca-hairline) !important;
}
.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-menu {
  background: var(--ca-surface) !important;
  border: 1px solid var(--ca-border) !important;
  color: var(--ca-text-silver) !important;
  box-shadow: none !important;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  background: var(--ca-surface-2) !important;
  border-bottom-color: var(--ca-hairline) !important;
}
.apexcharts-menu-item:hover {
  background: var(--ca-surface-2) !important;
}
.apexcharts-toolbar svg {
  fill: var(--ca-text-muted) !important;
}

/* ------------------------------------------------------------------ */
/* Misc vendor widgets                                                 */
/* ------------------------------------------------------------------ */
.chat-box {
  background: var(--ca-surface-2);
  border-color: var(--ca-border);
}
.chat-input {
  background: var(--ca-surface);
  border-top-color: var(--ca-hairline);
}
.chat-input input {
  background: var(--ca-field);
  color: var(--ca-text);
}
.message.received .bubble {
  background-color: var(--ca-surface);
  color: var(--ca-text-silver);
}
.message.received .bubble::after {
  border-right-color: var(--ca-surface);
}

.alert {
  border-radius: var(--ca-radius);
}

.preview-image {
  border-color: var(--ca-border);
}

.page-link {
  background-color: transparent;
  border-color: var(--ca-border);
  color: var(--ca-text-muted);
}
.page-link:hover {
  background-color: var(--ca-surface-2);
  color: var(--ca-accent);
}
.page-item.active .page-link {
  background-color: var(--ca-accent);
  border-color: var(--ca-accent);
  color: var(--ca-on-accent);
}

/* Scrollbars (shell) */
* {
  scrollbar-color: var(--ca-border) var(--ca-bg);
}

/* ------------------------------------------------------------------ */
/* SweetAlert (shell + login)                                          */
/* ------------------------------------------------------------------ */
.swal-overlay {
  background-color: rgba(7, 2, 26, 0.72);
}
.swal-modal {
  background-color: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 10px;
}
.swal-title {
  color: var(--ca-text) !important;
}
.swal-text {
  color: var(--ca-text-silver) !important;
}
.swal-icon--success:before,
.swal-icon--success:after,
.swal-icon--success__hide-corners {
  background: var(--ca-surface) !important;
}
.swal-button {
  background-color: var(--ca-accent) !important;
  color: var(--ca-on-accent) !important;
}
.swal-button:not([disabled]):hover {
  background-color: var(--ca-accent-deep) !important;
}
.swal-button--cancel {
  background-color: transparent !important;
  border: 1px solid var(--ca-border) !important;
  color: var(--ca-text-silver) !important;
}
.swal-button--cancel:not([disabled]):hover {
  background-color: var(--ca-surface-2) !important;
  border-color: var(--ca-text-muted) !important;
}
.swal-button--danger {
  background-color: var(--ca-danger) !important;
  color: #fff !important;
}
.swal-button:focus {
  box-shadow: 0 0 0 1px var(--ca-accent) !important;
}

/* ------------------------------------------------------------------ */
/* Login page (index.php) — scoped to .ca-login                        */
/* ------------------------------------------------------------------ */
.ca-login {
  background-color: var(--ca-bg) !important;
  font-family: "Outfit", sans-serif;
}
.ca-login .ca-login-art {
  background-color: var(--ca-bg);
  border-right: 1px solid var(--ca-hairline);
}
.ca-login .ca-login-art img {
  object-fit: cover;
  object-position: center;
}
.ca-login .ca-login-panel {
  background-color: var(--ca-bg) !important;
  box-shadow: none !important;
}
.ca-login .ca-login-logo {
  object-fit: contain;
  width: 72px !important;
  height: 72px !important;
}
.ca-login .ca-login-title {
  color: var(--ca-text);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ca-login .ca-login-sub {
  color: var(--ca-text-muted);
}
.ca-login label {
  color: var(--ca-text-muted) !important;
}
.ca-login input[type="text"],
.ca-login input[type="password"] {
  background-color: var(--ca-field) !important;
  border: 1px solid var(--ca-border) !important;
  color: var(--ca-text) !important;
  box-shadow: none !important;
}
.ca-login input[type="checkbox"] {
  accent-color: var(--ca-accent);
  background-color: var(--ca-field);
  border-color: var(--ca-border);
}
.ca-login .login-btn {
  background-color: var(--ca-accent) !important;
  border: 1px solid var(--ca-accent) !important;
  color: var(--ca-on-accent) !important;
  font-weight: 600;
  box-shadow: none !important;
  transition: background-color 150ms ease;
}
.ca-login .login-btn:hover,
.ca-login .login-btn:focus {
  background-color: var(--ca-accent-deep) !important;
  border-color: var(--ca-accent-deep) !important;
}
.ca-login .login-btn:focus-visible {
  outline: 1px solid var(--ca-accent);
  outline-offset: 2px;
}