/* ============================================
   ADMIN PORTAL — Full Dark Theme
   Consistent with Rural Premium public site
   Replaces admin-theme-overrides.css
   ============================================ */

/* ============================================
   1. ADMIN LAYOUT
   ============================================ */
.control-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-primary, #1a1a2e);
  color: var(--text-primary, #f5f0e8);
}
/* Lock the html/body to viewport height when the admin layout is in use, so
   the only vertical scroller is .content-wrapper inside .control-container.
   Otherwise app.css's `html, body { overflow-y: auto }` produces a second
   outer scrollbar in addition to the inner one. */
html:has(.control-container),
body:has(.control-container) {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

/* ============================================
   2. COMPACT ADMIN BAR — everything in one row
   ============================================ */
.admin-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: var(--bg-surface, #16213e);
  border-bottom: 1px solid var(--border-color, rgba(184, 150, 90, 0.2));
  position: sticky;
  top: 0;
  z-index: 999;
  flex-shrink: 0;
  height: 28px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
/* Inline selects */
.ab-select {
  padding: 2px 4px;
  font-size: 0.75rem;
  border: 1px solid var(--border-color, rgba(184, 150, 90, 0.2));
  border-radius: 3px;
  background: var(--bg-elevated, #0f3460);
  color: var(--text-primary, #f5f0e8);
  cursor: pointer;
  max-width: 160px;
  height: 24px;
}
.ab-select-wide { max-width: 240px; }
.ab-select:focus {
  outline: none;
  border-color: var(--accent-gold, #b8965a);
}
.ab-select option {
  background: var(--bg-surface, #16213e);
  color: var(--text-primary, #f5f0e8);
}
.ab-qr {
  padding: 1px 6px;
  font-size: 0.7rem;
  background: var(--bg-elevated, #0f3460);
  border: 1px solid var(--border-color, rgba(184, 150, 90, 0.2));
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-primary, #f5f0e8);
  height: 24px;
}
.ab-stat {
  font-size: 0.7rem;
  color: var(--accent-gold, #b8965a);
  font-weight: 600;
  white-space: nowrap;
}
.ab-spacer { flex: 1; }
.ab-lights {
  display: flex;
  align-items: center;
  height: 28px;
  overflow: visible;
}
.ab-lights > * {
  transform: scale(0.5);
  transform-origin: center;
}
.ab-btn {
  padding: 1px 6px;
  border: 1px solid var(--border-color, rgba(184, 150, 90, 0.2));
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  height: 20px;
  display: inline-flex;
  align-items: center;
}
.ab-msg {
  background: var(--bg-elevated, #0f3460);
  color: var(--text-primary, #f5f0e8);
}
.ab-msg:hover {
  background: var(--accent-gold, #b8965a);
  color: var(--bg-primary, #1a1a2e);
}
.ab-logout {
  background: transparent;
  color: var(--text-muted, rgba(245, 240, 232, 0.6));
}
.ab-logout:hover {
  background: #c62828;
  color: #fff;
  border-color: #c62828;
}
.ab-user {
  font-size: 0.7rem;
  color: var(--text-secondary, rgba(245, 240, 232, 0.85));
  white-space: nowrap;
}

/* Syncfusion toolbar overrides for admin header */
.control-container .e-toolbar,
.control-container .e-toolbar .e-toolbar-items {
  background: transparent !important;
}
.control-container .e-toolbar .e-btn-icon,
.control-container .e-toolbar .e-icons {
  color: var(--text-primary, #f5f0e8) !important;
}
/* Menu button compact */
.admin-bar .menu-button,
.admin-bar .e-btn {
  min-width: 28px !important;
  height: 24px !important;
  padding: 0 4px !important;
}

/* ============================================
   4. TAB BAR — ultra-compact, includes user controls
   ============================================ */
.tab-control {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 4px;
  background: var(--bg-elevated, #0f3460);
  border-bottom: 1px solid var(--border-color, rgba(184, 150, 90, 0.2));
  position: sticky;
  top: 28px;
  z-index: 997;
  flex-shrink: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  height: 26px;
}
.tab-button {
  padding: 2px 8px;
  border: none;
  background: transparent;
  color: var(--text-muted, rgba(245, 240, 232, 0.6));
  font-family: var(--font-family-body, 'Roboto', sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.1s;
  white-space: nowrap;
  height: 26px;
  display: inline-flex;
  align-items: center;
}
.tab-button:hover {
  color: var(--text-primary, #f5f0e8);
  background: rgba(245, 240, 232, 0.08);
}
.tab-button.active {
  /* Dark navy on gold — WCAG AA contrast 5.65:1
     (white on gold was only 2.78:1, failing AA). */
  color: #1a1a2e;
  font-weight: 700;
  background: var(--accent-gold, #b8965a);
  border-bottom-color: var(--accent-gold, #b8965a);
  border-radius: 3px 3px 0 0;
}
.tab-spacer { flex: 1; }
.tab-info {
  font-size: 0.6rem;
  color: var(--text-muted, rgba(245, 240, 232, 0.5));
  white-space: nowrap;
  margin-right: 4px;
}

/* ============================================
   5. MAIN CONTENT AREA
   ============================================ */
.content-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.main-content {
  padding: 8px;
}
/* Prevent double scrollbars — child grids and content should not independently scroll vertically */
.main-content .e-grid {
  height: auto !important;
  max-height: none !important;
}
.main-content .container-fluid {
  overflow: visible !important;
}

/* ============================================
   6. SIDEBAR MENU
   ============================================ */
.sidebar-menu {
  background: var(--bg-primary, #1a1a2e) !important;
  color: var(--text-primary, #f5f0e8) !important;
}
.e-sidebar {
  background: var(--bg-primary, #1a1a2e) !important;
}
/* Compact tree menu — was using too much vertical space, list items are now
   ~24px tall instead of ~40px so all items fit without scrolling. */
.e-treeview .e-list-item {
  line-height: 1 !important;
}
.e-treeview .e-list-item .e-fullrow,
.e-treeview .e-list-item .e-text-content {
  height: 24px !important;
  min-height: 24px !important;
  line-height: 24px !important;
  padding: 0 !important;
}
.e-treeview .e-list-text {
  color: var(--text-primary, #f5f0e8) !important;
  font-size: 0.82rem !important;
  line-height: 24px !important;
  padding: 0 4px !important;
}
.e-treeview .e-list-item.e-active > .e-fullrow {
  background: var(--accent-gold, #b8965a) !important;
}
.e-treeview .e-list-item.e-active .e-list-text {
  color: var(--bg-primary, #1a1a2e) !important;
  font-weight: 600 !important;
}
.e-treeview .e-list-item .e-fullrow:hover {
  background: rgba(245, 240, 232, 0.08) !important;
}
/* Section headers (parent nodes like "Administration", "Profile", "Tools") */
.e-treeview .e-list-parent {
  padding: 0 !important;
}
.e-treeview .e-icon-collapsible,
.e-treeview .e-icon-expandable {
  height: 24px !important;
  line-height: 24px !important;
  font-size: 11px !important;
  padding: 0 4px !important;
}
/* Compact the sidebar header so the menu starts higher */
.sidebar-header-modern {
  padding: 10px 14px !important;
}
.sidebar-header-modern h2 {
  font-size: 1.1rem !important;
}

/* ============================================
   7. CARDS (Bootstrap override) — scoped to admin layout only
   so public pages that use Bootstrap cards keep their light theme.
   ============================================ */
.control-container .card,
.e-dialog .card {
  background: var(--bg-surface, #16213e) !important;
  border: 1px solid var(--border-color, rgba(184, 150, 90, 0.2)) !important;
  color: var(--text-primary, #f5f0e8) !important;
}
.control-container .card-header,
.e-dialog .card-header {
  background: var(--bg-elevated, #0f3460) !important;
  border-bottom: 1px solid var(--border-color, rgba(184, 150, 90, 0.2)) !important;
  color: var(--text-primary, #f5f0e8) !important;
}
.control-container .card-body,
.e-dialog .card-body {
  color: var(--text-primary, #f5f0e8) !important;
  padding: 8px !important;
}
.main-content .card {
  margin-bottom: 4px !important;
}
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5 {
  margin-bottom: 4px !important;
  margin-top: 0 !important;
}

/* ============================================
   8. SYNCFUSION GRID — Dark Theme
   ============================================ */
.e-grid {
  background: var(--bg-surface, #16213e) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
.e-grid .e-headercell,
.e-grid .e-headercontent .e-headercell {
  background: var(--bg-elevated, #0f3460) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 0.85rem !important;
  overflow: visible !important;
  white-space: nowrap !important;
  height: auto !important;
  min-height: 36px !important;
}
.e-grid .e-headercelldiv {
  color: var(--text-primary, #f5f0e8) !important;
  font-family: 'Roboto', sans-serif !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  height: auto !important;
  line-height: 1.4 !important;
  padding: 8px 4px !important;
}
/* Inner header text span — Syncfusion clips this */
.e-grid .e-headertext,
.e-grid .e-headercell .e-headertext {
  font-family: 'Roboto', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  color: var(--text-primary, #f5f0e8) !important;
}
/* Sort icon */
.e-grid .e-sortfilterdiv {
  color: var(--text-muted, rgba(245, 240, 232, 0.6)) !important;
}
.e-grid .e-rowcell,
.e-grid .e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd),
.e-grid td {
  background: var(--bg-surface, #16213e) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
  padding: 4px 8px !important;
  font-size: 0.85rem !important;
  line-height: 1.3 !important;
}
.e-grid .e-row {
  height: auto !important;
}
.e-grid .e-row,
.e-grid .e-altrow {
  background: var(--bg-surface, #16213e) !important;
}
.e-grid .e-altrow td {
  background: rgba(15, 52, 96, 0.5) !important;
}
.e-grid .e-row:hover td,
.e-grid .e-altrow:hover td {
  background: rgba(245, 240, 232, 0.06) !important;
}
/* Grid pager */
.e-pager {
  background: var(--bg-surface, #16213e) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
.e-pager .e-currentitem {
  background: var(--accent-gold, #b8965a) !important;
  color: var(--bg-primary, #1a1a2e) !important;
}
.e-pager .e-numericitem {
  color: var(--text-primary, #f5f0e8) !important;
}
/* Grid toolbar — export buttons etc. */
.e-grid .e-toolbar {
  background: var(--bg-elevated, #0f3460) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
.e-grid .e-toolbar .e-tbar-btn-text,
.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn-text,
.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item span:not(.e-icons) {
  color: var(--text-primary, #f5f0e8) !important;
  font-family: 'Roboto', sans-serif !important;
}
.e-grid .e-toolbar .e-toolbar-item .e-btn,
.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn,
.e-grid .e-toolbar .e-toolbar-item button {
  background: var(--bg-surface, #16213e) !important;
  background-color: var(--bg-surface, #16213e) !important;
  border: 1px solid var(--border-color, rgba(184, 150, 90, 0.2)) !important;
  border-radius: 4px !important;
  color: var(--text-primary, #f5f0e8) !important;
}
.e-grid .e-toolbar .e-toolbar-item .e-btn:hover,
.e-grid .e-toolbar .e-toolbar-item button:hover {
  background: var(--bg-elevated, #0f3460) !important;
  background-color: var(--bg-elevated, #0f3460) !important;
}
.e-grid .e-toolbar .e-icons {
  color: var(--text-primary, #f5f0e8) !important;
}

/* ============================================
   9. BOOTSTRAP TABLE — Dark Theme (admin layout only)
   ============================================ */
.control-container table.table,
.e-dialog table.table {
  color: var(--text-primary, #f5f0e8) !important;
}
.control-container table.table th,
.e-dialog table.table th {
  background: var(--bg-elevated, #0f3460) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
.control-container table.table td,
.e-dialog table.table td {
  color: var(--text-primary, #f5f0e8) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}

/* ============================================
   10. FORM CONTROLS — scoped to admin layout
   so public pages' labels keep their own colors.
   ============================================ */
.control-container label,
.control-container .form-label,
.control-container .form-check-label,
.control-container .e-label,
.control-container .e-checkbox-wrapper .e-label,
.e-dialog label,
.e-dialog .form-label,
.e-dialog .form-check-label,
.e-dialog .e-label,
.e-dialog .e-checkbox-wrapper .e-label {
  color: var(--text-primary, #f5f0e8) !important;
}
.control-container .form-control-plaintext,
.e-dialog .form-control-plaintext {
  color: var(--text-secondary, rgba(245, 240, 232, 0.85)) !important;
}
/* Inputs dark theme — scoped to the admin layout only so they don't leak to
   public pages (SelfEdit, PlainVideo, etc.) that keep a light form background. */
.control-container input.form-control,
.control-container select.form-control,
.control-container textarea.form-control,
.control-container .e-input,
.control-container .e-input-group input,
.e-dialog input.form-control,
.e-dialog .e-input,
.e-dialog .e-input-group input {
  background: rgba(245, 240, 232, 0.08) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
.control-container input.form-control:focus,
.control-container select.form-control:focus,
.control-container .e-input:focus,
.e-dialog input.form-control:focus,
.e-dialog .e-input:focus {
  border-color: var(--accent-gold, #b8965a) !important;
  background: rgba(245, 240, 232, 0.12) !important;
}
/* Syncfusion textbox wrapper */
.control-container .e-input-group,
.e-dialog .e-input-group {
  background: rgba(245, 240, 232, 0.08) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
.control-container .e-input-group input.e-input,
.e-dialog .e-input-group input.e-input {
  color: var(--text-primary, #f5f0e8) !important;
}
.control-container .e-input-group.e-input-focus,
.e-dialog .e-input-group.e-input-focus {
  border-color: var(--accent-gold, #b8965a) !important;
}
/* Dropdown list items (popup) */
.e-dropdownbase .e-list-item {
  color: #212529 !important;
}

/* ============================================
   11. BUTTONS
   ============================================ */
/* Use darker base colors so white text passes WCAG AA (>=4.5:1) at small font
   sizes. Bootstrap defaults (#0d6efd / #198754 / #dc3545) only hit ~3.97:1 with
   white text and fail AA on small buttons. */
.btn-primary {
  background-color: #0a58ca !important;  /* contrast 5.13:1 with white */
  border-color: #0a58ca !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.btn-primary:hover {
  background-color: #084298 !important;
  border-color: #084298 !important;
  color: #ffffff !important;
}
.btn-success {
  background-color: #146c43 !important;  /* contrast 5.31:1 with white */
  border-color: #146c43 !important;
  color: #ffffff !important;
}
.btn-success:hover {
  background-color: #0f5132 !important;
  border-color: #0f5132 !important;
  color: #ffffff !important;
}
.btn-danger {
  background-color: #b02a37 !important;  /* contrast 5.20:1 with white */
  border-color: #b02a37 !important;
  color: #ffffff !important;
}
.btn-danger:hover {
  background-color: #842029 !important;
  border-color: #842029 !important;
  color: #ffffff !important;
}
.btn-warning {
  color: #000 !important;
}
/* btn-secondary translucent cream only makes sense on dark bg (admin),
   scope it so public pages keep a solid grey secondary button. */
.control-container .btn-secondary,
.e-dialog .btn-secondary {
  background-color: rgba(245, 240, 232, 0.1) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
  color: var(--text-primary, #f5f0e8) !important;
}
.btn-outline-success {
  color: #4ade80 !important;
  border-color: #4ade80 !important;
}
.btn-outline-success:hover {
  background-color: #4ade80 !important;
  color: #1a1a2e !important;
}
.btn-info {
  background-color: #0a58ca !important;  /* contrast 5.13:1 with white */
  border-color: #0a58ca !important;
  color: #fff !important;
}

/* Syncfusion semantic button classes (e-primary / e-success / e-warning /
   e-danger / e-info) — match the same darker shades as Bootstrap btn-* so
   white text passes WCAG AA. */
.e-btn.e-primary,
button.e-primary {
  background-color: #0a58ca !important;
  border-color: #0a58ca !important;
  color: #ffffff !important;
}
.e-btn.e-primary:hover,
button.e-primary:hover {
  background-color: #084298 !important;
  border-color: #084298 !important;
  color: #ffffff !important;
}
.e-btn.e-success,
button.e-success {
  background-color: #146c43 !important;
  border-color: #146c43 !important;
  color: #ffffff !important;
}
.e-btn.e-success:hover,
button.e-success:hover {
  background-color: #0f5132 !important;
  border-color: #0f5132 !important;
  color: #ffffff !important;
}
.e-btn.e-danger,
button.e-danger {
  background-color: #b02a37 !important;
  border-color: #b02a37 !important;
  color: #ffffff !important;
}
.e-btn.e-danger:hover,
button.e-danger:hover {
  background-color: #842029 !important;
  border-color: #842029 !important;
  color: #ffffff !important;
}
.e-btn.e-warning,
button.e-warning {
  background-color: #b03e00 !important;
  border-color: #b03e00 !important;
  color: #ffffff !important;
}
.e-btn.e-info,
button.e-info {
  background-color: #0a58ca !important;
  border-color: #0a58ca !important;
  color: #ffffff !important;
}

/* ============================================
   12. BADGES
   ============================================ */
.badge.bg-warning,
.badge-mini.bg-warning,
.bg-warning {
  color: #212529 !important;
}
.badge.bg-success,
.badge-mini.bg-success {
  color: #fff !important;
}
/* bg-info is cyan (#0dcaf0) — too light for white text (1.96 contrast).
   Force dark text for AA compliance (~14:1). */
.badge.bg-info,
.badge-mini.bg-info,
.bg-info {
  color: #1a1a2e !important;
}
/* Bootstrap utility bg-danger / bg-success / bg-primary backgrounds — match
   the darker button colors so badges/pill text passes AA on small fonts. */
.badge.bg-danger,
.badge-mini.bg-danger,
.bg-danger {
  background-color: #b02a37 !important;
  color: #ffffff !important;
}
.badge.bg-success,
.badge-mini.bg-success,
.bg-success {
  background-color: #146c43 !important;
  color: #ffffff !important;
}
.badge.bg-primary,
.badge-mini.bg-primary,
.bg-primary {
  background-color: #0a58ca !important;
  color: #ffffff !important;
}
.badge.bg-primary,
.badge-mini.bg-primary {
  color: #fff !important;
}
.badge {
  font-size: 11px !important;
}

/* ============================================
   13. ALERTS — scoped to admin layout only
   so public pages (SelfEdit etc.) keep their own alert colors.
   ============================================ */
.control-container .alert-info,
.e-dialog .alert-info {
  background: rgba(96, 165, 250, 0.1) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  color: #93c5fd !important;
}
.control-container .alert-info h2,
.control-container .alert-info h3,
.control-container .alert-info h4,
.e-dialog .alert-info h2,
.e-dialog .alert-info h3,
.e-dialog .alert-info h4 {
  color: #93c5fd !important;
}
.control-container .alert-warning,
.e-dialog .alert-warning {
  background: rgba(251, 191, 36, 0.1) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
  color: #fbbf24 !important;
}
.control-container .alert-danger,
.e-dialog .alert-danger {
  background: rgba(248, 113, 113, 0.1) !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
  color: #f87171 !important;
}
.control-container .alert-success,
.e-dialog .alert-success {
  background: rgba(74, 222, 128, 0.1) !important;
  border-color: rgba(74, 222, 128, 0.3) !important;
  color: #4ade80 !important;
}

/* ============================================
   14. NAV TABS (Profile tabs etc.)
   ============================================ */
.nav-tabs .nav-link {
  color: var(--text-muted, rgba(245, 240, 232, 0.6)) !important;
  border-color: transparent !important;
}
.nav-tabs .nav-link:hover {
  color: var(--text-primary, #f5f0e8) !important;
}
.nav-tabs .nav-link.active {
  background: var(--accent-gold, #b8965a) !important;
  color: #fff !important;
  border-color: var(--accent-gold, #b8965a) !important;
}

/* ============================================
   15. SYNCFUSION TABS
   ============================================ */
.e-tab .e-tab-header {
  background: var(--bg-surface, #16213e) !important;
}
.e-tab .e-tab-text {
  color: var(--text-primary, #f5f0e8) !important;
}
.e-tab .e-toolbar-item.e-active {
  background: var(--accent-gold, #b8965a) !important;
}
.e-tab .e-toolbar-item.e-active .e-tab-text {
  color: #fff !important;
}

/* ============================================
   16. SYNCFUSION DIALOG — Dark theme (see Section 37 below for rules)
   Old white-bg rules removed; new dark theme in Section 37
   ============================================ */

/* ============================================
   17. SYNCFUSION SWITCH (dark theme)
   ============================================ */
/* Inner track — both active (ON) and inactive (OFF) states */
.e-switch-wrapper .e-switch-inner,
.e-switch-wrapper .e-switch-inner.e-switch-active {
  background-color: var(--accent-gold, #b8965a) !important;
  border-color: var(--accent-gold, #b8965a) !important;
}
/* OFF state spans (the "OFF" half of the slide) — use elevated bg */
.e-switch-wrapper .e-switch-inner .e-switch-off,
.e-switch-wrapper .e-switch-inner.e-switch-active .e-switch-off {
  background-color: var(--bg-elevated, #0f3460) !important;
  border-color: rgba(184, 150, 90, 0.4) !important;
  color: var(--text-muted, rgba(245, 240, 232, 0.7)) !important;
}
/* ON state spans (the "ON" half of the slide) — use accent gold */
.e-switch-wrapper .e-switch-inner .e-switch-on,
.e-switch-wrapper .e-switch-inner.e-switch-active .e-switch-on {
  background-color: var(--accent-gold, #b8965a) !important;
  border-color: var(--accent-gold, #b8965a) !important;
  color: #1a1a2e !important;
}
/* Handle (the slider knob) */
.e-switch-wrapper .e-switch-handle {
  background-color: var(--text-primary, #f5f0e8) !important;
}
.e-switch-wrapper .e-switch-handle.e-switch-active {
  background-color: #1a1a2e !important;
}

/* ============================================
   18. TRAFFIC LIGHTS (Ready Lights)
   ============================================ */
.traffic-light.red {
  background-color: #CC0000 !important;
}
.traffic-light.green {
  background-color: #1B7A1B !important;
}

/* ============================================
   19. COMPETITOR TILES (Results grid — white bg cards)
   ============================================ */
/* ============================================
   19. RESULTS SCORING AREA
   The results entry uses white/light bg containers for the scoring grid.
   All text inside must be dark. Keep white bg for scoring UX.
   ============================================ */
.competitor-tile {
  color: #212529 !important;
  background: #f9f9f9 !important;
}
/* State-based tile colors — override the default white */
.competitor-tile.tile-published {
  background: #e8f5e9 !important;
  border-color: #66bb6a !important;
}
.competitor-tile.tile-pending {
  background: #fff8e1 !important;
  border-color: #ffb300 !important;
}
.competitor-tile.tile-dq {
  background: #ffebee !important;
  border-color: #ef5350 !important;
}
.competitor-tile.tile-dnc {
  background: #fce4ec !important;
  border-color: #ec407a !important;
}
.competitor-tile *,
.competitor-tile .competitor-name,
.competitor-tile input,
.competitor-tile select,
.competitor-tile span,
.competitor-tile label,
.e-grid .e-rowcell .competitor-tile,
.e-grid .e-rowcell .competitor-tile *,
.e-grid td .competitor-tile,
.e-grid td .competitor-tile * {
  color: #212529 !important;
}
/* Specific points colors override the generic dark text */
.e-grid .e-rowcell .competitor-tile .published-points,
.e-grid td .competitor-tile .published-points {
  color: #1b5e20 !important;
}
/* Pending points text — darkened from #b8650a (4.03 contrast) to #8a3b00
   for WCAG AA on the cream pending tile background. */
.e-grid .e-rowcell .competitor-tile .unpublished-points,
.e-grid td .competitor-tile .unpublished-points {
  color: #8a3b00 !important;
}
/* Results entry — ensure all stands fit on page */
.results-grid,
.results-container,
.stand-columns {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 2px !important;
}
.stand-column {
  min-width: 130px !important;
  flex: 1 1 0 !important;
}
/* The scoring table area — white bg with dark text */
.scoring-area,
.scoring-table,
.result-entry-container,
table.scoring-table {
  background: #fff !important;
  color: #212529 !important;
}
.scoring-area *,
.result-entry-container *,
table.scoring-table * {
  color: #212529 !important;
}
/* Scoring inputs */
.scoring-area input,
.scoring-area select,
.result-entry-container input,
.result-entry-container select {
  color: #212529 !important;
  background: #fff !important;
}
/* "Raw", "Calculated" labels, DNC/DISQ buttons — make visible on light
   scoring tiles. Exclude EditResults scoring grid spans (.total-number,
   .total-hidden, .calc-display) which now have their own dark theme colors. */
.scoring-label,
.points-label,
td label {
  color: #333 !important;
}
.competitor-tile td span:not(.calc-display):not(.total-number):not(.total-hidden) {
  color: #333 !important;
}
/* Stand header names in results */
.stand-header-name,
.competitor-header {
  color: var(--text-primary, #f5f0e8) !important;
}
/* Any container that looks like it has the scoring white bg */
[class*="result-entry"] {
  color: #212529 !important;
}
[class*="result-entry"] * {
  color: inherit !important;
}

/* ============================================
   20. LIST GROUP ITEMS
   ============================================ */
/* List group items — force dark bg everywhere */
.list-group-item,
.list-group > .list-group-item,
.card-body .list-group-item,
div.list-group-item {
  background: var(--bg-surface, #16213e) !important;
  background-color: var(--bg-surface, #16213e) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
  color: var(--text-primary, #f5f0e8) !important;
}
.list-group-item *:not(.badge):not(.badge-mini):not(.btn) {
  color: var(--text-primary, #f5f0e8) !important;
}
/* Class cards in classes tab */
.class-card-compact {
  background: var(--bg-surface, #16213e) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
.session-header-compact,
.session-header-compact h4 {
  background: var(--bg-elevated, #0f3460) !important;
  color: var(--text-primary, #f5f0e8) !important;
  font-family: 'Roboto', sans-serif !important;
}

/* ============================================
   21. CLASS CARDS
   ============================================ */
.class-card-compact,
.class-card-compact *:not(.badge):not(.badge-mini) {
  color: var(--text-primary, #f5f0e8) !important;
}
.class-name-compact {
  color: var(--text-primary, #f5f0e8) !important;
}

/* ============================================
   22a. COMPETITION CARDS
   ============================================ */
.card .competition-card,
.card .card-body .competition-card {
  position: relative;
}
.card .competition-card .badge,
.card .competition-card .badge-mini {
  position: relative !important;
  display: inline-block !important;
  margin-right: 4px !important;
  margin-bottom: 4px !important;
}

/* ============================================
   22b. REVIEW PHOTOS — tiles need dark text on white bg
   ============================================ */
.photo-review-card,
.photo-card,
.competitor-photo-card {
  background: #ffffff !important;
  color: #212529 !important;
}
.photo-review-card *,
.photo-card *,
.competitor-photo-card * {
  color: #212529 !important;
}

/* ============================================
   22. NESTED CARDS (subscription info etc.)
   ============================================ */
.card .card {
  background: rgba(245, 240, 232, 0.05) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
  color: var(--text-primary, #f5f0e8) !important;
}

/* ============================================
   23. TEXT UTILITIES
   ============================================ */
.text-muted {
  color: rgba(245, 240, 232, 0.7) !important;
}
/* Headings in admin — use Roboto not Bebas Neue to avoid ALL CAPS clipping */
.control-container h3,
.control-container h4,
.control-container h5,
.control-container h6 {
  color: var(--text-primary, #f5f0e8) !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 600 !important;
}
.control-container p,
.e-dialog p {
  color: var(--text-primary, #f5f0e8);
}

/* ============================================
   23b. ENTRIES TAB — entry rows with light bg need dark text
   ============================================ */
.entry-item-compact,
.entry-item-compact * {
  color: #212529 !important;
}
.entry-item-compact .badge,
.entry-item-compact .badge-mini {
  color: unset;
}
.entry-item-compact .badge.bg-success,
.entry-item-compact .badge-mini.bg-success {
  color: #fff !important;
}
.entry-item-compact .badge.bg-warning,
.entry-item-compact .badge-mini.bg-warning {
  color: #212529 !important;
}

/* ============================================
   23c. STAND ALLOCATIONS — full width, no double scroll
   ============================================ */
.stand-allocation-grid,
.stand-allocations {
  overflow-x: auto !important;
  overflow-y: visible !important;
  width: 100% !important;
}
.stand-allocation-grid .card {
  background: var(--bg-surface, #16213e) !important;
  min-width: 0 !important;
}
/* Stand column headers */
.stand-allocations h3,
.stand-allocations h5 {
  color: var(--text-primary, #f5f0e8) !important;
  font-family: 'Roboto', sans-serif !important;
}
/* Kanban/drag cards in stand allocations — dark themed */
.stand-allocations .e-kanban-content .e-card,
.stand-allocations .card-body .card {
  background: var(--bg-surface, #16213e) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}

/* ============================================
   24. SCROLLBAR STYLING
   ============================================ */
.content-wrapper::-webkit-scrollbar {
  width: 8px;
}
.content-wrapper::-webkit-scrollbar-track {
  background: var(--bg-primary, #1a1a2e);
}
.content-wrapper::-webkit-scrollbar-thumb {
  background: rgba(184, 150, 90, 0.3);
  border-radius: 4px;
}
.content-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(184, 150, 90, 0.5);
}

/* ============================================
   25a. PHOTO REVIEW CARDS — white bg with dark text
   ============================================ */
.photo-review-card,
.photo-card,
[class*="photo-card"],
[class*="photo-review"] {
  color: #212529 !important;
}
.photo-review-card *,
.photo-card *,
[class*="photo-card"] *,
[class*="photo-review"] * {
  color: #212529 !important;
}

/* ============================================
   25b. GENERIC WHITE-BG CONTAINERS — ensure dark text
   ============================================ */
.bg-white,
.bg-light,
[class*="bg-white"],
[class*="bg-light"] {
  color: #212529 !important;
}
.bg-white *:not(.badge):not(.btn),
.bg-light *:not(.badge):not(.btn) {
  color: inherit !important;
}

/* ============================================
   25. SAFETY NET — Light bg containers get dark text
   ============================================ */
[style*="background: #f8f9fa"] *:not(.badge):not(.badge-mini):not(.btn):not(.e-icons),
[style*="background-color: #f8f9fa"] *:not(.badge):not(.badge-mini):not(.btn):not(.e-icons),
[style*="background: #f9f9f9"] *:not(.badge):not(.badge-mini):not(.btn):not(.e-icons),
[style*="background: white"] *:not(.badge):not(.badge-mini):not(.btn):not(.e-icons),
[style*="background-color: white"] *:not(.badge):not(.badge-mini):not(.btn):not(.e-icons),
[style*="background: #fff"] *:not(.badge):not(.badge-mini):not(.btn):not(.e-icons),
[style*="background-color: rgb(255"] *:not(.badge):not(.badge-mini):not(.btn):not(.e-icons) {
  color: #212529 !important;
}

/* ============================================
   26. RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .ab-select { max-width: 130px; font-size: 0.7rem; }
  .ab-select-wide { max-width: 180px; }
  .ab-lights { display: none; }
  .ab-info { display: none; }
}
@media (max-width: 768px) {
  .admin-bar { flex-wrap: wrap; gap: 3px; }
  .ab-select { max-width: 100%; flex: 1 1 45%; }
  .ab-select-wide { max-width: 100%; }
  .tab-control {
    flex-wrap: wrap;
    gap: 2px;
    top: auto;
    position: relative;
  }
  .tab-button {
    flex: 1 1 calc(50% - 2px);
    font-size: 0.7rem;
    padding: 3px 6px;
    text-align: center;
  }
}

/* ============================================
   27. HELPER / DESCRIPTION TEXT IN CLASS EDITOR TABS
   Fix: font-size:small divs inside Syncfusion Tabs on dark bg
   ============================================ */
.e-tab .e-content div[style*="font-size: small"],
.e-tab .e-content div[style*="font-size:small"] {
  color: rgba(245, 240, 232, 0.7) !important;
}

/* ============================================
   28. SYNCFUSION KANBAN — Stand/Heat headers on light bg
   ============================================ */
.e-kanban .e-kanban-header .e-header-cells .e-header-text,
.e-kanban .e-kanban-header .e-header-cells,
.e-kanban .e-column-header .e-header-text {
  color: #1a1a2e !important;
  font-weight: 600 !important;
}
.e-kanban .e-kanban-swimlane-row .e-swimlane-text,
.e-kanban .e-swimlane-header .e-swimlane-text {
  color: #1a1a2e !important;
  font-weight: 600 !important;
}
/* Kanban column header — h5 rendered via template */
.e-kanban .e-header-cells h5,
.e-kanban .e-column-header h5 {
  color: #1a1a2e !important;
}

/* ============================================
   29. RESULTS TABLE — prevent truncation
   ============================================ */
.results-header + .card .e-grid {
  overflow-x: auto !important;
}
.results-header + .card .e-grid .e-rowcell {
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ============================================
   30. DOOR LIST — competitor name text visibility
   ============================================ */
.custom-grid-text,
.custom-grid-text b {
  color: #f5f0e8 !important;
}

/* ============================================
   31. ENTRIES PAGE — white-bg containers need dark text
   ============================================ */
.header-card,
.header-card * {
  color: #ffffff !important;
}
.stats-card,
.stats-card * {
  color: #212529 !important;
}
.stats-card .btn {
  color: inherit !important;
}
.entries-container,
.entries-header,
.entries-count,
.search-section,
.search-container {
  color: #212529 !important;
}

/* ============================================
   32. BUTTON CONSISTENCY — compact across the admin portal
   Override mobile-first.css touch-target min-heights (44px)
   ============================================ */
/* Default Bootstrap buttons in admin pages — compact */
.main-content .btn,
.admin-bar .btn,
.tab-control .btn {
  padding: 3px 10px !important;
  font-size: 0.78rem !important;
  font-weight: 500;
  line-height: 1.4 !important;
  height: 26px !important;
  min-height: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 4px;
}
/* btn-sm even more compact */
.main-content .btn-sm,
.admin-bar .btn-sm {
  padding: 2px 8px !important;
  font-size: 0.72rem !important;
  height: 24px !important;
  min-height: 0 !important;
  border-radius: 3px;
}
/* btn-lg — only slightly larger */
.main-content .btn-lg {
  padding: 4px 12px !important;
  font-size: 0.85rem !important;
  height: 30px !important;
  min-height: 0 !important;
}
/* Icons inside buttons */
.main-content .btn i,
.main-content .btn .fas,
.main-content .btn .far {
  font-size: 0.75rem;
  margin-right: 2px;
}
.main-content .btn-sm i,
.main-content .btn-sm .fas,
.main-content .btn-sm .far {
  font-size: 0.7rem;
}

/* Syncfusion buttons (e-btn) compactness */
.main-content .e-btn,
.main-content .e-css.e-btn,
.admin-bar .e-btn {
  padding: 3px 10px !important;
  font-size: 0.78rem !important;
  height: 26px !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
}

/* Ensure buttons on the same row align vertically */
.d-flex.gap-2,
.d-flex.flex-wrap.gap-2,
.d-flex.gap-1 {
  align-items: center;
}

/* ============================================
   33. PREVENT DOUBLE SCROLLBARS — global rule
   ============================================ */
/* Syncfusion grids embedded in admin pages should not create their own scrollbar */
.main-content .e-grid .e-gridcontent {
  overflow-y: visible !important;
  max-height: none !important;
}
.main-content .e-grid .e-content {
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
}
/* Also fix any card containers that have overflow set */
.main-content .card {
  overflow: visible !important;
}
.main-content .card-body {
  overflow: visible !important;
}

/* ============================================
   34. KANBAN STAND ALLOCATIONS — compact grid layout
   ============================================ */
/* Make Kanban columns use equal width and fill the space */
.e-kanban .e-kanban-table {
  table-layout: fixed !important;
  width: 100% !important;
}
/* Swimlane header — compact and clear */
.e-kanban .e-kanban-swimlane-row {
  background: var(--bg-elevated, #0f3460) !important;
}
.e-kanban .e-kanban-swimlane-row h3 {
  font-size: 0.95rem !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  color: var(--text-primary, #f5f0e8) !important;
}
/* Card wrapper — reduce padding */
.e-kanban .e-card-wrapper {
  padding: 4px !important;
}
.e-kanban .e-card {
  margin-bottom: 4px !important;
  padding: 0 !important;
  border-radius: 4px !important;
}
/* Remove Kanban card header entirely - we have our own layout */
.e-kanban .e-card .e-card-header {
  display: none !important;
}

/* ============================================
   35. CLASSES PAGE — buttons handled by global rules above
   ============================================ */

/* ============================================
   36. TAB BAR — active tab styling improvement
   ============================================ */
.tab-button.active {
  /* Dark navy on gold — WCAG AA contrast 5.65:1 */
  color: #1a1a2e;
  font-weight: 700;
  background: var(--accent-gold, #b8965a);
  border-radius: 6px 6px 0 0;
  border-bottom-color: var(--accent-gold, #b8965a);
}

/* ============================================
   32. SESSION MODAL — date/time text on dark card headers
   ============================================ */
.card-header .text-muted {
  color: rgba(245, 240, 232, 0.7) !important;
}

/* ============================================
   33. SIDEBAR — active page indicator
   ============================================ */
.e-treeview .e-list-item.e-active > .e-fullrow {
  background: var(--accent-gold, #b8965a) !important;
  border-left: 3px solid #ffffff !important;
}
.e-treeview .e-list-item.e-active .e-list-text {
  color: var(--bg-primary, #1a1a2e) !important;
  font-weight: 700 !important;
}

/* ============================================
   34. VENUES & TEAMS — prevent name truncation in data grids
   Only apply to grids that need it, not results grids
   ============================================ */

/* ============================================
   37. SYNCFUSION DIALOG / MODAL — dark theme, compact
   ============================================ */
/* Dialog backdrop */
.e-dlg-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
}
/* Dialog container — dark theme */
.e-dialog {
  background: var(--bg-surface, #16213e) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border: 1px solid var(--border-color, rgba(184, 150, 90, 0.3)) !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  animation: none !important;
}
/* Dialog header */
.e-dialog .e-dlg-header-content {
  background: var(--bg-elevated, #0f3460) !important;
  border-bottom: 1px solid var(--border-color, rgba(184, 150, 90, 0.2)) !important;
  padding: 8px 16px !important;
  min-height: 36px !important;
}
.e-dialog .e-dlg-header,
.e-dialog .e-dlg-header-content .e-dlg-header {
  color: var(--text-primary, #f5f0e8) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}
/* Dialog body */
.e-dialog .e-dlg-content {
  background: var(--bg-surface, #16213e) !important;
  color: var(--text-primary, #f5f0e8) !important;
  padding: 8px 12px !important;
  max-height: calc(95vh - 60px) !important;
  overflow-y: auto !important;
}
/* Dialog itself fit to max available height with min-width to prevent shrinkage */
.e-dialog {
  max-height: 95vh !important;
  min-width: 800px !important;
}
/* Wider for dialogs with substantial content (overrides min-width) */
.e-dialog:has(.e-tab) {
  min-width: 900px !important;
}
/* Dialog footer */
.e-dialog .e-footer-content {
  background: var(--bg-elevated, #0f3460) !important;
  border-top: 1px solid var(--border-color, rgba(184, 150, 90, 0.2)) !important;
  padding: 8px 16px !important;
}
/* Dialog close button */
.e-dialog .e-dlg-closeicon-btn,
.e-dialog .e-btn.e-dlg-closeicon-btn {
  background: transparent !important;
  color: var(--text-primary, #f5f0e8) !important;
  min-width: 28px !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 !important;
}
.e-dialog .e-dlg-closeicon-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
/* Text inside dialog content should be light by default. NO !important so
   any deliberate inline color (e.g. EditResults indianred warning state) wins. */
.e-dialog .e-dlg-content,
.e-dialog .e-dlg-content label,
.e-dialog .e-dlg-content h1,
.e-dialog .e-dlg-content h2,
.e-dialog .e-dlg-content h3,
.e-dialog .e-dlg-content h4,
.e-dialog .e-dlg-content h5,
.e-dialog .e-dlg-content h6,
.e-dialog .e-dlg-content p,
.e-dialog .e-dlg-content span,
.e-dialog .e-dlg-content div,
.e-dialog .e-dlg-content small,
.e-dialog .e-dlg-content b,
.e-dialog .e-dlg-content strong,
.e-dialog .e-dlg-content .form-label,
.e-dialog .e-dlg-content .custom-grid-text,
.e-dialog .e-dlg-content .custom-grid-text * {
  color: var(--text-primary, #f5f0e8);
}
/* EditResults scoring grid is now fully dark-themed via its own local CSS in
   EditResults.razor — no overrides needed here. The competitor-tile (used in
   the Results.razor parent grid) is still intentionally light-themed for the
   scoring UX, so we keep its dark text override. */
.competitor-tile,
.competitor-tile * {
  color: #1a1a2e !important;
}
/* Text inputs inside dialog should have light text */
.e-dialog .e-dlg-content input.e-input,
.e-dialog .e-dlg-content select,
.e-dialog .e-dlg-content .e-input,
.e-dialog .e-dlg-content .e-ddl .e-input {
  color: var(--text-primary, #f5f0e8) !important;
}
/* Muted text inside dialog */
.e-dialog .e-dlg-content .text-muted,
.e-dialog .e-dlg-content small.text-muted {
  color: rgba(245, 240, 232, 0.6) !important;
}
/* Card inside dialog — remove redundant borders */
.e-dialog .e-dlg-content .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.e-dialog .e-dlg-content .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-color, rgba(184, 150, 90, 0.2)) !important;
  padding: 6px 0 !important;
}
.e-dialog .e-dlg-content .card-body {
  padding: 8px 0 !important;
}
/* Compact h3 inside dialog body */
.e-dialog .e-dlg-content h3 {
  font-size: 1rem !important;
  margin-bottom: 6px !important;
}

/* ============================================
   38. SYNCFUSION TAB — compact across all uses
   ============================================ */
.e-tab .e-tab-header {
  height: 32px !important;
  min-height: 32px !important;
  background: var(--bg-elevated, #0f3460) !important;
  border-bottom: 1px solid var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
.e-tab .e-tab-header .e-toolbar-item {
  min-height: 32px !important;
  padding: 0 12px !important;
}
.e-tab .e-tab-header .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--text-muted, rgba(245, 240, 232, 0.7)) !important;
}
.e-tab .e-tab-header .e-toolbar-item.e-active {
  background: var(--accent-gold, #b8965a) !important;
}
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
  /* Dark navy text on accent-gold bg — WCAG AA contrast 5.65:1 (white on
     gold was only 2.78:1, failing AA). */
  color: #1a1a2e !important;
  font-weight: 700 !important;
}
.e-tab .e-tab-header .e-indicator {
  background: var(--accent-gold, #b8965a) !important;
}
.e-tab .e-content {
  background: var(--bg-surface, #16213e) !important;
  color: var(--text-primary, #f5f0e8) !important;
}

/* ============================================
   39. FORM CONTROLS INSIDE DIALOGS/ADMIN — compact
   ============================================ */
.main-content .form-group,
.e-dialog .form-group {
  margin-bottom: 0.5rem !important;
}
.main-content .form-group label,
.main-content label.form-label,
.e-dialog .form-group label,
.e-dialog label.form-label {
  font-size: 0.8rem !important;
  font-weight: 500;
  margin-bottom: 2px !important;
  color: var(--text-primary, #f5f0e8) !important;
  display: block;
}
/* Syncfusion input heights */
.main-content .e-input-group,
.main-content .e-float-input,
.e-dialog .e-input-group,
.e-dialog .e-float-input {
  height: 30px !important;
  min-height: 30px !important;
}
.main-content .e-input-group .e-input,
.e-dialog .e-input-group .e-input {
  font-size: 0.85rem !important;
  padding: 4px 8px !important;
}

/* ============================================
   40. PRINT CARDS DIALOG — dark theme
   ============================================ */
.print-cards-dialog .print-cards-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.print-cards-dialog .print-cards-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #f5f0e8);
}
.print-cards-dialog .print-cards-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted, rgba(245, 240, 232, 0.7));
}
.print-cards-dialog .print-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 12px;
}
.print-cards-dialog .print-card {
  background: var(--bg-elevated, #0f3460) !important;
  border: 1px solid rgba(184, 150, 90, 0.25);
  border-radius: 4px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.print-cards-dialog .print-card-label {
  color: #fff;
  padding: 6px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.78rem;
  text-align: center;
}
.print-cards-dialog .print-card-label-blue {
  background: #1e6fb8;
}
.print-cards-dialog .print-card-label-green {
  background: #1e8449;
}
.print-cards-dialog .print-card-label-red {
  background: #b03a48;
}
.print-cards-dialog .print-card-label-grey {
  background: #5a6168;
}
.print-cards-dialog .print-card-field-label {
  font-size: 0.75rem;
  color: var(--text-muted, rgba(245, 240, 232, 0.7));
  margin-bottom: 4px;
  display: block;
}
.print-cards-dialog .print-card-help {
  font-size: 0.72rem;
  color: var(--text-muted, rgba(245, 240, 232, 0.6));
  margin-bottom: 8px;
  flex-grow: 1;
}
.print-cards-dialog .print-card .btn {
  margin-top: auto;
}

/* ============================================
   41. MODAL HEADER — readability + consistency
   ============================================ */
/* Default header text to light. We target common text elements explicitly
   (rather than using a `*` wildcard with !important) so deliberate inline
   colors — e.g. DoorList's purple status icon — are preserved. */
.e-dialog .e-dlg-header-content,
.e-dialog .e-dlg-header-content > div,
.e-dialog .e-dlg-header-content > span,
.e-dialog .e-dlg-header-content h1,
.e-dialog .e-dlg-header-content h2,
.e-dialog .e-dlg-header-content h3,
.e-dialog .e-dlg-header-content h4,
.e-dialog .e-dlg-header-content h5,
.e-dialog .e-dlg-header-content p,
.e-dialog .e-dlg-header-content label,
.e-dialog .e-dlg-header-content strong,
.e-dialog .e-dlg-header-content small,
.e-dialog .e-dlg-header,
.e-dialog .e-dlg-header > div,
.e-dialog .e-dlg-header > span {
  color: var(--text-primary, #f5f0e8) !important;
}
.e-dialog .e-dlg-header-content h1,
.e-dialog .e-dlg-header-content h2,
.e-dialog .e-dlg-header-content h3,
.e-dialog .e-dlg-header-content h4,
.e-dialog .e-dlg-header-content h5 {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* Consolidated modal title header layout — used by Venues.razor and any new
   header that wants the standard title-with-close-button pattern. */
.modal-title-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
  font-weight: 600;
}

/* EditEntries.razor uses .modal-header inside its templated header. Bootstrap's
   .modal-header has light styling — neutralize it inside dialogs. */
.e-dialog .e-dlg-header-content .modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.e-dialog .e-dlg-header-content .modal-header h3 {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--text-primary, #f5f0e8) !important;
}

/* Some templated headers wrap content in <div style="..."> with hardcoded
   coloured backgrounds (e.g. EnterCompetitorDialog green banner). Force the
   background of any inline div inside the header to match the dark theme. */
.e-dialog .e-dlg-header-content > div[style*="background"] {
  background: transparent !important;
  padding: 0 !important;
}

/* ============================================
   42. SYNCFUSION GRID — additional dark coverage
   ============================================ */
/* Catch grid surfaces missed by section 8: gridheader wrapper, content scroller,
   table element, empty-state row, frozen columns, group caption rows, summary
   rows, detail rows, and selected rows. */
.e-grid .e-content,
.e-grid .e-gridcontent,
.e-grid .e-gridcontent table,
.e-grid .e-table,
.e-grid .e-virtualtable,
.e-grid .e-emptyrow,
.e-grid .e-emptyrow td,
.e-grid .e-frozencontent,
.e-grid .e-movablecontent,
.e-grid .e-detailrow,
.e-grid .e-detailrow td,
.e-grid .e-detailcell {
  background: var(--bg-surface, #16213e) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
/* Header wrappers and frozen headers — use elevated bg to match .e-headercell */
.e-grid .e-gridheader,
.e-grid .e-gridheader .e-headercontent,
.e-grid .e-gridheader table,
.e-grid .e-frozenheader,
.e-grid .e-movableheader,
.e-grid .e-grouptopleftcell,
.e-grid .e-lastgroupleftcell,
.e-grid .e-groupdroparea {
  background: var(--bg-elevated, #0f3460) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
/* Syncfusion grid toolbar wrapper (the strip above the grid that holds
   add/edit/delete/search buttons) */
.e-grid .e-toolbar,
.e-grid .e-toolbar .e-toolbar-items,
.e-grid .e-toolbar .e-toolbar-pop {
  background: var(--bg-elevated, #0f3460) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
/* Bootstrap .img-thumbnail wraps images in a white box — make transparent
   on dark theme so just the image shows. */
.img-thumbnail {
  background-color: transparent !important;
  border-color: rgba(184, 150, 90, 0.3) !important;
  padding: 2px !important;
}

/* Bootstrap .btn-light is white-on-light by default — convert to dark theme */
.btn-light {
  background-color: rgba(245, 240, 232, 0.1) !important;
  border-color: rgba(184, 150, 90, 0.3) !important;
  color: var(--text-primary, #f5f0e8) !important;
}
.btn-light:hover {
  background-color: rgba(245, 240, 232, 0.18) !important;
  color: var(--text-primary, #f5f0e8) !important;
}

/* Raw HTML <select> elements (not wrapped in Syncfusion) — default browser
   styles are white-on-black which clash with the dark theme. */
.main-content select:not(.e-input):not([class*="e-"]),
article select:not(.e-input):not([class*="e-"]),
.container-fluid select:not(.e-input):not([class*="e-"]),
.audit-log-select {
  background-color: var(--bg-elevated, #0f3460) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border: 1px solid rgba(184, 150, 90, 0.3) !important;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.78rem;
}
.main-content select:not(.e-input):not([class*="e-"]) option,
article select:not(.e-input):not([class*="e-"]) option,
.audit-log-select option {
  background-color: var(--bg-elevated, #0f3460);
  color: var(--text-primary, #f5f0e8);
}

/* Syncfusion file upload "Browse..." button — default Bootstrap secondary
   color (#6c757d) gives only 4.19 contrast with cream. Use a darker shade. */
.e-upload-browse-btn,
.e-css.e-btn.e-upload-browse-btn {
  background-color: #5a6268 !important;
  border-color: #5a6268 !important;
  color: #ffffff !important;
}
.e-upload-browse-btn:hover,
.e-css.e-btn.e-upload-browse-btn:hover {
  background-color: #495057 !important;
  border-color: #495057 !important;
  color: #ffffff !important;
}

/* AuditLog page header */
.audit-log-header {
  background: var(--bg-elevated, #0f3460);
  padding: 8px 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(184, 150, 90, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ============================================
   46. ENTER COMPETITORS MODAL (AddEntry) — dark theme
   ============================================ */
.enter-comp-modal .e-dlg-content {
  padding: 0 !important;
}
.enter-comp-modal .ec-modal-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary, #f5f0e8);
}
.enter-comp-modal .ec-modal-body {
  padding: 12px;
}
/* Single-row control bar with date/time, options, and create-new button */
.enter-comp-modal .ec-control-bar {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  background: var(--bg-elevated, #0f3460);
  border: 1px solid rgba(184, 150, 90, 0.2);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.enter-comp-modal .ec-section {
  flex: 0 0 auto;
}
.enter-comp-modal .ec-section-right {
  margin-left: auto;
}
.e-dialog .enter-comp-modal .ec-section-label,
.enter-comp-modal .ec-section-label {
  font-size: 0.65rem;
  color: var(--accent-gold, #b8965a) !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.enter-comp-modal .ec-checkbox-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.enter-comp-modal .ec-checkbox-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.enter-comp-modal .ec-checkbox-row label {
  margin: 0;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--text-primary, #f5f0e8);
}
.enter-comp-modal .ec-helper {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--text-muted, rgba(245, 240, 232, 0.6));
}
.enter-comp-modal .ec-new-btn {
  font-weight: 600;
  white-space: nowrap;
}

/* Search row */
.enter-comp-modal .ec-search-row {
  margin-bottom: 8px;
}
.enter-comp-modal .ec-search-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary, #f5f0e8);
  margin-bottom: 4px;
}

/* Override the .section-card legacy styling inside this modal so the
   competitor list isn't pushed down by oversized headers. */
.enter-comp-modal .section-card {
  margin-top: 0 !important;
  padding: 8px 10px !important;
  max-height: 480px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.enter-comp-modal .section-header {
  margin-bottom: 6px !important;
  padding-bottom: 4px !important;
  flex: 0 0 auto !important;
}
.enter-comp-modal .section-header h5 {
  font-size: 0.85rem !important;
}
/* Cap the SfGrid inside the section-card so the modal doesn't get pushed
   off-screen. The grid scrolls internally instead. */
.enter-comp-modal .section-card .e-grid {
  flex: 1 1 auto !important;
  max-height: 430px !important;
  overflow: auto !important;
}
.enter-comp-modal .section-card .e-grid .e-content,
.enter-comp-modal .section-card .e-grid .e-gridcontent {
  max-height: 380px !important;
  overflow-y: auto !important;
}
.audit-log-header-left,
.audit-log-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.audit-log-header h5 {
  color: var(--text-primary, #f5f0e8);
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
/* Summary rows — slightly distinct so they stand out from regular rows */
.e-grid .e-summarycell,
.e-grid .e-summaryrow,
.e-grid .e-summaryrow td {
  background: var(--bg-elevated, #0f3460) !important;
  color: var(--text-primary, #f5f0e8) !important;
  font-weight: 600 !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
/* Group caption rows */
.e-grid .e-groupcaption,
.e-grid .e-groupcaptionrow,
.e-grid .e-groupcaptionrow td {
  background: rgba(184, 150, 90, 0.12) !important;
  color: var(--text-primary, #f5f0e8) !important;
  font-weight: 600 !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
/* Selected rows */
.e-grid .e-row.e-rowselected td,
.e-grid .e-altrow.e-rowselected td,
.e-grid .e-row .e-selectionbackground,
.e-grid td.e-selectionbackground {
  background: rgba(184, 150, 90, 0.18) !important;
  color: var(--text-primary, #f5f0e8) !important;
}
/* Filter bar */
.e-grid .e-filterbar,
.e-grid .e-filterbarcell,
.e-grid .e-filterbarcell input {
  background: var(--bg-elevated, #0f3460) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
/* No-records message */
.e-grid .e-emptyrow td {
  text-align: center;
  font-style: italic;
  color: var(--text-muted, rgba(245, 240, 232, 0.6)) !important;
}
/* Grid borders/lines */
.e-grid,
.e-grid .e-gridheader,
.e-grid .e-gridfooter {
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
/* Pager dropdown (rows-per-page selector) */
.e-pager .e-pagesizes,
.e-pager .e-pagerdropdown,
.e-pager .e-pagerdropdown .e-input {
  background: var(--bg-surface, #16213e) !important;
  color: var(--text-primary, #f5f0e8) !important;
}
/* Pager container and nav buttons (first/prev/next/last + numeric) */
.e-pager,
.e-pager .e-pagercontainer,
.e-pager .e-first,
.e-pager .e-prev,
.e-pager .e-next,
.e-pager .e-last,
.e-pager .e-numericcontainer,
.e-pager .e-pp,
.e-pager .e-np {
  background: var(--bg-elevated, #0f3460) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border-color: var(--border-color, rgba(184, 150, 90, 0.2)) !important;
}
.e-pager .e-icons {
  color: var(--text-primary, #f5f0e8) !important;
}
.e-pager .e-numericitem {
  background: transparent !important;
  color: var(--text-primary, #f5f0e8) !important;
}
.e-pager .e-numericitem:hover {
  background: rgba(184, 150, 90, 0.15) !important;
}
.e-pager .e-pagermsg {
  color: var(--text-muted, rgba(245, 240, 232, 0.7)) !important;
}

/* ============================================
   43. ENTER COMPETITOR DIALOG header
   ============================================ */
.enter-competitor-header {
  width: 100%;
}
.enter-competitor-header .ech-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.enter-competitor-header .ech-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #f5f0e8);
}
.enter-competitor-header .ech-subtitle {
  margin: 2px 0 0 0;
  font-size: 0.78rem;
  color: var(--text-muted, rgba(245, 240, 232, 0.7));
}
.enter-competitor-header .ech-options {
  background: rgba(184, 150, 90, 0.08);
  border: 1px solid rgba(184, 150, 90, 0.18);
  padding: 8px 10px;
  border-radius: 4px;
  margin-top: 6px;
}
.enter-competitor-header .ech-options-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.enter-competitor-header .ech-section {
  flex: 0 0 auto;
}
.enter-competitor-header .ech-section-label {
  font-size: 0.65rem;
  color: var(--accent-gold, #b8965a);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.enter-competitor-header .ech-checkbox-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.enter-competitor-header .ech-checkbox-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.enter-competitor-header .ech-checkbox-row label {
  margin: 0;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--text-primary, #f5f0e8);
}
.enter-competitor-header .ech-helper {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--text-muted, rgba(245, 240, 232, 0.6));
}
.enter-competitor-header .ech-info {
  flex: 1 1 200px;
  align-self: center;
}
.enter-competitor-header .ech-info p {
  margin: 0;
  color: var(--text-muted, rgba(245, 240, 232, 0.7));
  font-size: 0.72rem;
  font-style: italic;
}

/* Body panels */
.e-dialog .e-dlg-content .ecd-panel {
  background: var(--bg-elevated, #0f3460) !important;
  border: 1px solid rgba(184, 150, 90, 0.2);
  border-radius: 4px;
  margin: 8px 0;
  color: var(--text-primary, #f5f0e8);
}
.e-dialog .e-dlg-content .ecd-details {
  padding: 10px 12px;
}
.e-dialog .e-dlg-content .ecd-details h4 {
  margin: 0 0 6px 0;
  font-size: 0.9rem;
  font-weight: 600;
}
.e-dialog .e-dlg-content .ecd-details-row {
  display: flex;
  gap: 15px;
  font-size: 0.82rem;
}
.e-dialog .e-dlg-content .ecd-filter {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  align-items: center;
}
.e-dialog .e-dlg-content .ecd-filter-search {
  flex: 1;
}
.e-dialog .e-dlg-content .ecd-filter-level {
  display: flex;
  align-items: center;
  gap: 8px;
}
.e-dialog .e-dlg-content .ecd-filter-level label {
  font-weight: 600;
  white-space: nowrap;
  font-size: 0.82rem;
  margin: 0;
}
.e-dialog .e-dlg-content .ecd-classlist {
  height: 500px;
  overflow-y: auto;
  padding: 0;
}
.e-dialog .e-dlg-content .ecd-class-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(184, 150, 90, 0.15);
}
.e-dialog .e-dlg-content .ecd-class-row:last-child {
  border-bottom: none;
}
.e-dialog .e-dlg-content .ecd-class-row:hover {
  background: rgba(245, 240, 232, 0.04);
}
.e-dialog .e-dlg-content .ecd-class-info {
  flex: 1;
}
.e-dialog .e-dlg-content .ecd-class-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary, #f5f0e8);
}
.e-dialog .e-dlg-content .ecd-class-meta {
  font-size: 0.72rem;
  color: var(--text-muted, rgba(245, 240, 232, 0.65));
  margin-top: 2px;
}
.e-dialog .e-dlg-content .ecd-class-meta span {
  margin-right: 12px;
}
.e-dialog .e-dlg-content .ecd-class-action {
  padding: 4px 12px;
  font-weight: 600;
}

/* ============================================
   44. EditEntries page — dark theme overrides for legacy white cards
   ============================================ */
.stats-card,
.search-section,
.entries-container,
.auth-card {
  background: var(--bg-elevated, #0f3460) !important;
  border: 1px solid rgba(184, 150, 90, 0.18) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  color: var(--text-primary, #f5f0e8) !important;
}
/* Recolor common text elements only — don't touch buttons, badges, or any
   element with a deliberate semantic color (.text-success, .text-danger, etc). */
.stats-card h1, .stats-card h2, .stats-card h3, .stats-card h4, .stats-card h5,
.stats-card p, .stats-card span, .stats-card label, .stats-card div,
.search-section h1, .search-section h2, .search-section h3, .search-section h4, .search-section h5,
.search-section p, .search-section span, .search-section label, .search-section div,
.entries-container h1, .entries-container h2, .entries-container h3, .entries-container h4, .entries-container h5,
.entries-container p, .entries-container span, .entries-container label, .entries-container div,
.auth-card h1, .auth-card h2, .auth-card h3, .auth-card h4, .auth-card h5,
.auth-card p, .auth-card span, .auth-card label, .auth-card div {
  color: var(--text-primary, #f5f0e8);
}
/* But preserve semantic Bootstrap text utility classes inside these cards */
.stats-card .text-success, .search-section .text-success,
.entries-container .text-success, .auth-card .text-success { color: #28a745 !important; }
.stats-card .text-danger, .search-section .text-danger,
.entries-container .text-danger, .auth-card .text-danger { color: #dc3545 !important; }
.stats-card .text-warning, .search-section .text-warning,
.entries-container .text-warning, .auth-card .text-warning { color: var(--accent-gold, #b8965a) !important; }
.stats-card .text-info, .search-section .text-info,
.entries-container .text-info, .auth-card .text-info { color: #17a2b8 !important; }
.stats-card .text-muted, .search-section .text-muted,
.entries-container .text-muted, .auth-card .text-muted { color: var(--text-muted, rgba(245, 240, 232, 0.6)) !important; }
.stats-divider,
.stats-max,
.stats-label {
  color: var(--text-muted, rgba(245, 240, 232, 0.7)) !important;
}
.stats-number {
  background: linear-gradient(135deg, var(--accent-gold, #b8965a) 0%, #d4a76a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.entries-header {
  background: linear-gradient(135deg, rgba(184, 150, 90, 0.15) 0%, rgba(184, 150, 90, 0.05) 100%) !important;
  border-bottom: 1px solid rgba(184, 150, 90, 0.25) !important;
  color: var(--text-primary, #f5f0e8) !important;
}
.search-icon {
  color: var(--text-muted, rgba(245, 240, 232, 0.5)) !important;
}

/* ============================================
   45. AddEntry / Modern Card overrides — dark theme
   ============================================ */
.main-card {
  background: var(--bg-elevated, #0f3460) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border: 1px solid rgba(184, 150, 90, 0.2) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
.card-header-modern {
  background: linear-gradient(135deg, rgba(184, 150, 90, 0.25) 0%, rgba(184, 150, 90, 0.1) 100%) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border-bottom: 1px solid rgba(184, 150, 90, 0.3) !important;
}
.header-icon {
  background: rgba(184, 150, 90, 0.25) !important;
  color: var(--text-primary, #f5f0e8) !important;
}
.card-body-modern {
  background: var(--bg-surface, #16213e) !important;
  color: var(--text-primary, #f5f0e8) !important;
}
.section-card {
  background: var(--bg-elevated, #0f3460) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border: 1px solid rgba(184, 150, 90, 0.18) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}
.section-header {
  border-bottom: 2px solid rgba(184, 150, 90, 0.2) !important;
}
.section-header h5 {
  color: var(--text-primary, #f5f0e8) !important;
}
.combined-row {
  background: var(--bg-elevated, #0f3460) !important;
  border: 1px solid rgba(184, 150, 90, 0.2) !important;
  color: var(--text-primary, #f5f0e8) !important;
}
.checkbox-label {
  color: var(--text-primary, #f5f0e8) !important;
}
.btn-compact,
.btn-compact-default {
  background: var(--bg-elevated, #0f3460) !important;
  color: var(--text-primary, #f5f0e8) !important;
  border-color: rgba(184, 150, 90, 0.3) !important;
}
.btn-compact-default:hover:not(:disabled) {
  background: rgba(184, 150, 90, 0.15) !important;
}