/* ==========================================================================
   Brand & Theme Variables
   ========================================================================== */
:root {
  --brand-primary: #ff571f;
  --brand-primary-rgb: 255, 87, 31;
  --brand-primary-hover: #e04815;
  --brand-secondary: #8f8f8f;

  --tblr-primary: #ff571f;
  --tblr-primary-rgb: 255, 87, 31;
  --tblr-link-color: #ff571f;
  --tblr-body-bg: #f8fafc;
  --tblr-border-color: #e2e8f0;

  /* Semantic status hues, shared by badges, alerts, buttons, and the
     Tabler-driven flash toast below - one source of truth so "success"/
     "danger"/"warning" always read as the same colour regardless of which
     component renders them. */
  --tblr-success-rgb: 5, 150, 105;   /* emerald-600 */
  --tblr-danger-rgb: 225, 29, 72;    /* rose-600 */
  --tblr-warning-rgb: 217, 119, 6;   /* amber-600 */

  /* Static (non-theme-swapped) Tailwind slate scale + white, as plain CSS
     custom properties rather than Tailwind utility classes - the list/
     detail/new pages under sqladmin_theme/ (congregations, users, whatsapp
     numbers) toggle light/dark styling via explicit `html.dark X /
     [data-bs-theme="dark"] X` selector pairs rather than Tailwind's
     dark: variant, the same workaround as border-t-brand-accent above
     (Tailwind's CDN/Play compiler doesn't reliably handle every utility
     combination), so those pages reference these vars directly instead of
     hard-coding hex values inline. */
  --color-white: #ffffff;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-400-rgb: 148, 163, 184;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
}

/* ==========================================================================
   Brand Utility Classes
   (Single source of truth - used to be redeclared per-page in a dozen
   inline <style> blocks; every page that extends sqladmin/layout.html, plus
   sqladmin/login.html which links this stylesheet directly, gets these
   from here now.)
   ========================================================================== */
.text-brand-primary { color: var(--brand-primary) !important; }
.text-brand-secondary { color: var(--brand-secondary) !important; }
.bg-brand-primary { background-color: var(--brand-primary) !important; }
.bg-brand-primary:hover { background-color: var(--brand-primary-hover) !important; }
.bg-brand-primary-soft { background-color: rgba(var(--brand-primary-rgb), 0.1) !important; }
.border-brand-primary { border-color: var(--brand-primary) !important; }
.border-brand-accent {
  /* !important on width too - same Tailwind CDN/Play compiler ordering
     bug as border-t-brand-accent below: border-l-4 combined with another
     border-side utility (border-b, border, etc.) on the same element can
     silently fail to apply, leaving no visible left-edge accent. */
  border-left-width: 4px !important;
  border-left-color: var(--brand-primary) !important;
}
.border-t-brand-accent {
  /* !important on width too - Tailwind's CDN/Play compiler doesn't
     reliably order border-t-2 after the plain .border utility, so
     border-top-width can silently fall back to .border's 1px. */
  border-top-width: 2px !important;
  border-top-color: var(--brand-primary) !important;
}
.shadow-brand { box-shadow: 0 10px 15px -3px rgba(var(--brand-primary-rgb), 0.25); }

/* File input "Choose file" button. Tailwind's CDN/Play compiler can't
   generate file:/dark:file: variants for the custom "brand-primary" colour
   name any more than it can the plain utilities above, so every
   file:text-brand-primary / dark:file:text-brand-primary class in the
   markup was previously inert (button text silently fell back to the
   browser default black) - hand-rolled here the same way, matching the
   literal Tailwind class strings used in the markup. Background, hover
   and cursor are owned here too (rather than split across utility
   classes) so the button reads as clickable and the dark-mode chip stays
   a translucent brand tint - matching the select2-choice/account-avatar
   chip look - instead of a solid orange-950 pill that clashed with the
   slate dark theme. */
.file\:text-brand-primary::file-selector-button,
.file\:text-brand-primary::-webkit-file-upload-button {
  background-color: rgba(var(--brand-primary-rgb), 0.1) !important;
  color: var(--brand-primary) !important;
  cursor: pointer;
}
.file\:text-brand-primary:hover::file-selector-button,
.file\:text-brand-primary:hover::-webkit-file-upload-button {
  background-color: rgba(var(--brand-primary-rgb), 0.2) !important;
}
.dark .dark\:file\:text-brand-primary::file-selector-button,
.dark .dark\:file\:text-brand-primary::-webkit-file-upload-button {
  background-color: rgba(var(--brand-primary-rgb), 0.18) !important;
  color: var(--brand-primary) !important;
  cursor: pointer;
}
.dark .dark\:file\:text-brand-primary:hover::file-selector-button,
.dark .dark\:file\:text-brand-primary:hover::-webkit-file-upload-button {
  background-color: rgba(var(--brand-primary-rgb), 0.28) !important;
}

/* Chromium/WebKit render <input type="date">'s calendar icon as solid
   black with no dark-mode awareness of its own - invisible against the
   dark input backgrounds used throughout this theme. */
.dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.focus-brand:focus {
  outline: none;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.25) !important;
}

[data-bs-theme="dark"] {
  --tblr-body-bg: #0f172a;
  --tblr-bg-surface: #1e293b;
  --tblr-bg-surface-secondary: #1e293b;
  --tblr-card-bg: #1e293b;
  --tblr-border-color: #334155;
  --tblr-body-color: #e2e8f0;
}

/* ==========================================================================
   Base Elements & Custom Scrollbar
   ========================================================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

/* Tabler's own base styles set a blanket `a:hover { text-decoration:
   underline; }` on the sqladmin-generated pages (create/edit/details/list/
   usage). tabler.min.css is linked from each of those page's own
   {% block head %}, which lands AFTER this stylesheet's <link> in
   sqladmin/layout.html's base <head> - so on the tie in specificity
   between this rule and Tabler's, Tabler wins by source order alone.
   !important is required to actually beat it; plain source-order-based
   overriding does not work here. No link in this app uses Tabler's own
   underline-by-design components (breadcrumbs, .btn-link, link-*,
   .mention), so forcing this off everywhere is safe. */
a:hover,
a:focus {
  text-decoration: none !important;
}

a {
  color: var(--brand-primary);
}

.navbar-brand {
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--brand-primary) !important;
}

/* ==========================================================================
   Tables (Base structural resets)
   ========================================================================== */
.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table thead th {
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ==========================================================================
   Form Controls & Focus States
   ========================================================================== */
input[type="text"], 
input[type="password"], 
textarea, 
select {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus,
/* Higher-specificity duplicates of the same rule - many pages give inputs a
   local ".field-input" (or a "{{ table_prefix }}-toolbar input[type=text]"
   list-page search box, etc.) whose own dark-mode override
   ("html.dark .field-input", "html.dark .foo-toolbar input[type=text]", ...)
   is also !important, and being a 2-3 class selector, outranks the plain
   ":focus" selector above on specificity alone despite both being
   !important - so focusing one of those fields kept its dark-mode slate
   border instead of turning brand-orange, leaving only the box-shadow glow
   visible (a dim, muddy-looking "selected" ring instead of a crisp orange
   one). The worst offender seen so far (_list_page_styles.html's toolbar
   input rule) is a 3-class selector, so ".dark"/[data-bs-theme="dark"] is
   deliberately repeated 3x below (a standard, if unusual-looking,
   specificity-boosting technique - repeated simple selectors each count
   towards specificity even though only one is needed to match) to clear it
   with headroom rather than exactly tie it - a tie would still lose, since
   this rule loads before each page's own <style> block in the cascade. If
   a future per-page override needs to beat this, don't add !important
   there - fix it here instead, in one place. */
html.dark.dark.dark input:focus,
html.dark.dark.dark textarea:focus,
html.dark.dark.dark select:focus,
[data-bs-theme="dark"][data-bs-theme="dark"][data-bs-theme="dark"] input:focus,
[data-bs-theme="dark"][data-bs-theme="dark"][data-bs-theme="dark"] textarea:focus,
[data-bs-theme="dark"][data-bs-theme="dark"][data-bs-theme="dark"] select:focus {
  outline: none !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(255, 87, 31, 0.25) !important;
}

.btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background-color: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
  color: #ffffff !important;
}

/* Browser autofill override. Chrome/Edge/Safari paint an autofilled field
   (including one filled by picking a suggestion from the browser's own
   autocomplete/form-history dropdown, not just saved passwords/addresses)
   with a hardcoded background via the :-webkit-autofill pseudo-class that
   plain background-color can't override - it stays stark white regardless
   of this theme's slate/dark styling (surfaced on /knowledge-base's
   manual-entry fields, but nothing scopes the browser's behaviour to that
   page - any text input/textarea anywhere in the app can trigger it). The
   oversized inset box-shadow is the standard workaround: it visually
   repaints the field with this theme's own background colour instead of
   the browser's. The long transition delay stops the background from
   briefly flashing the browser's colour before this rule takes over.
   Approximates every field's own class-based background (mostly
   slate-50/white in light mode, slate-900 in dark) with one colour per
   mode - not pixel-exact for every input, but far closer than the
   browser's default and never jarring. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--slate-50, #f8fafc) inset !important;
  box-shadow: 0 0 0 1000px var(--slate-50, #f8fafc) inset !important;
  -webkit-text-fill-color: var(--slate-900, #0f172a) !important;
  caret-color: var(--slate-900, #0f172a) !important;
  transition: background-color 5000s ease-in-out 0s;
}

html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus,
html.dark input:-webkit-autofill:active,
html.dark textarea:-webkit-autofill,
html.dark textarea:-webkit-autofill:hover,
html.dark textarea:-webkit-autofill:focus,
html.dark textarea:-webkit-autofill:active,
html.dark select:-webkit-autofill,
html.dark select:-webkit-autofill:hover,
html.dark select:-webkit-autofill:focus,
html.dark select:-webkit-autofill:active,
[data-bs-theme="dark"] input:-webkit-autofill,
[data-bs-theme="dark"] input:-webkit-autofill:hover,
[data-bs-theme="dark"] input:-webkit-autofill:focus,
[data-bs-theme="dark"] input:-webkit-autofill:active,
[data-bs-theme="dark"] textarea:-webkit-autofill,
[data-bs-theme="dark"] textarea:-webkit-autofill:hover,
[data-bs-theme="dark"] textarea:-webkit-autofill:focus,
[data-bs-theme="dark"] textarea:-webkit-autofill:active,
[data-bs-theme="dark"] select:-webkit-autofill,
[data-bs-theme="dark"] select:-webkit-autofill:hover,
[data-bs-theme="dark"] select:-webkit-autofill:focus,
[data-bs-theme="dark"] select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--slate-900, #0f172a) inset !important;
  box-shadow: 0 0 0 1000px var(--slate-900, #0f172a) inset !important;
  -webkit-text-fill-color: var(--slate-100, #f1f5f9) !important;
  caret-color: var(--slate-100, #f1f5f9) !important;
}

/* ==========================================================================
   Form Fieldsets (SQLAdmin render_form_fields resets)
   ========================================================================== */
.form-fieldset .form-group.row {
  display: block;
  margin-bottom: 1.25rem;
}

.form-fieldset .col-sm-2,
.form-fieldset .col-sm-10 {
  width: 100%;
  max-width: 100%;
  flex: none;
  padding: 0;
}

.form-fieldset .form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 0.375rem;
}

[data-bs-theme="dark"] .form-fieldset .form-label {
  color: #94a3b8;
}

.form-fieldset .form-control,
.form-fieldset .form-select {
  width: 100%;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  background-color: #f8fafc;
  color: #0f172a;
}

[data-bs-theme="dark"] .form-fieldset .form-control,
[data-bs-theme="dark"] .form-fieldset .form-select {
  border-color: #334155;
  background-color: #0f172a;
  color: #e2e8f0;
}

.form-fieldset .form-control.is-invalid {
  border-color: #ef4444;
}

.form-fieldset .invalid-feedback {
  color: #ef4444;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.form-fieldset .form-text,
.form-fieldset small.text-muted {
  color: #94a3b8;
  font-size: 0.75rem;
}

.form-fieldset .form-check {
  padding-top: 0.375rem;
}

/* ==========================================================================
   Select2 Overrides
   ========================================================================== */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  border-radius: 0.5rem !important;
  border-color: #cbd5e1 !important;
  background-color: #f8fafc !important;
  min-height: 2.375rem !important;
}

[data-bs-theme="dark"] .select2-container .select2-selection--single,
[data-bs-theme="dark"] .select2-container .select2-selection--multiple {
  border-color: #334155 !important;
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
}

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(255, 87, 31, 0.25) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-primary) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: rgba(255, 87, 31, 0.12) !important;
  border-color: rgba(255, 87, 31, 0.3) !important;
  color: var(--brand-primary) !important;
}

/* ==========================================================================
   Utilities & Misc
   ========================================================================== */
#whatsapp-bubble strong {
  font-weight: 600;
}

#whatsapp-bubble em {
  font-style: italic;
}

/* ==========================================================================
   SQLADMIN CONTENT & TABLER OVERRIDES (DUAL THEME FIX)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LIGHT MODE RULES (html does NOT have .dark)
   -------------------------------------------------------------------------- */

/* Tabler Base Variables Override */
html:not(.dark),
[data-bs-theme="light"] {
  --tblr-body-bg: #f8fafc;
  --tblr-bg-surface: #ffffff;
  --tblr-bg-surface-secondary: #ffffff;
  --tblr-card-bg: #ffffff;
  --tblr-card-footer-bg: #ffffff;
  --tblr-body-color: #0f172a;
}

/* Page Header & Heading */
html:not(.dark) .page-header,
html:not(.dark) .page-title,
html:not(.dark) .page-title *,
html:not(.dark) .page-pretitle,
html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3 {
  color: #0f172a !important; /* Slate-900 */
}

/* Action, Export & Dropdown Buttons
   (.btn-secondary-ui/.pagination-btn are the same "secondary" button used
   on the custom list/create/edit/details pages - folded in here instead of
   redeclaring these colours per-template.) */
html:not(.dark) .btn:not(.btn-primary),
html:not(.dark) .btn-outline-secondary,
html:not(.dark) .dropdown-toggle,
html:not(.dark) .btn-light,
html:not(.dark) .btn-secondary-ui,
html:not(.dark) .pagination-btn {
  background-color: #ffffff !important;
  color: #334155 !important;        /* Slate-700 */
  border-color: #cbd5e1 !important; /* Slate-300 */
  opacity: 1 !important;
}

html:not(.dark) .btn:not(.btn-primary):hover,
html:not(.dark) .btn-outline-secondary:hover,
html:not(.dark) .dropdown-toggle:hover,
html:not(.dark) .btn-secondary-ui:hover:not(:disabled),
html:not(.dark) .pagination-btn:hover:not(:disabled) {
  background-color: #f8fafc !important; /* Slate-50 */
  color: #0f172a !important;        /* Slate-900 */
  border-color: #94a3b8 !important; /* Slate-400 */
}

/* Danger Action Button (.btn-danger-ui on the details page) - same rose
   family as the alert boxes and delete links elsewhere in the app. */
html:not(.dark) .btn-danger-ui {
  background-color: #fff1f2 !important; /* Rose-50 */
  border-color: #fecdd3 !important;     /* Rose-200 */
  color: #e11d48 !important;            /* Rose-600 */
}

html:not(.dark) .btn-danger-ui:hover:not(:disabled) {
  background-color: #ffe4e6 !important; /* Rose-100 */
  color: #be123c !important;            /* Rose-700 */
}

/* Cards & Main Containers
   (.table-card-container/.form-card-container/.details-card-container/
   #filter-sidebar/.details-action-toolbar are the bespoke card wrappers
   used on the custom list/create/edit/details/usage pages - folded in here
   instead of redeclaring the same colours per-template.) */
html:not(.dark) .card,
html:not(.dark) .table-responsive,
html:not(.dark) .table-card-container,
html:not(.dark) .table-footer-bar,
html:not(.dark) .form-card-container,
html:not(.dark) .details-card-container,
html:not(.dark) #filter-sidebar,
html:not(.dark) .details-action-toolbar {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important; /* Slate-200 */
  color: #0f172a !important;
}

/* Card Footer & Pagination Container */
html:not(.dark) body .card-footer,
html:not(.dark) body .card > div:last-child,
html:not(.dark) body .table-responsive + div,
html:not(.dark) body [class*="card-footer"] {
  background-color: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #475569 !important; /* Slate-600 */
}

/* Pagination Text & Labels */
html:not(.dark) body .card-footer *,
html:not(.dark) body .card-footer .text-muted,
html:not(.dark) body .card-footer small,
html:not(.dark) body .card-footer span {
  color: #475569 !important;
}

/* Pagination Links & Controls */
html:not(.dark) body .pagination .page-link,
html:not(.dark) body .pagination .page-item a,
html:not(.dark) body .pagination .page-item button {
  background-color: #ffffff !important;
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) body .pagination .page-item.active .page-link {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
}

html:not(.dark) body .pagination .page-item.disabled .page-link {
  background-color: #ffffff !important;
  color: #94a3b8 !important; /* Slate-400 */
  opacity: 0.6;
}

/* "10 / Page" Dropdown Select */
html:not(.dark) body .card-footer .form-select,
html:not(.dark) body .card-footer select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* Tables */
html:not(.dark) table,
html:not(.dark) .table,
html:not(.dark) table tbody,
html:not(.dark) table td {
  background-color: #ffffff !important;
  color: #334155 !important;        /* Slate-700 */
  border-color: #e2e8f0 !important;
}

html:not(.dark) .card-header,
html:not(.dark) table thead,
html:not(.dark) table th {
  background-color: #f8fafc !important; /* Slate-50 */
  color: #475569 !important;            /* Slate-600 */
  border-color: #e2e8f0 !important;
}

html:not(.dark) table tbody tr:hover,
html:not(.dark) .table-hover tbody tr:hover {
  background-color: #f1f5f9 !important; /* Slate-100 hover */
  color: #0f172a !important;
}

/* Form Controls & Inputs */
html:not(.dark) .form-control,
html:not(.dark) .form-select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}


/* --------------------------------------------------------------------------
   2. DARK MODE RULES (html HAS .dark)
   -------------------------------------------------------------------------- */
html.dark .page-header,
html.dark .page-title,
html.dark .page-pretitle {
  color: #f8fafc !important; /* Slate-50 */
}

/* Action & Export Buttons (Dark Mode) */
html.dark .btn-outline-secondary,
html.dark .btn:not(.btn-primary),
html.dark .btn-secondary-ui,
html.dark .pagination-btn {
  background-color: #1e293b !important;
  color: #cbd5e1 !important;        /* Slate-300 */
  border-color: #334155 !important; /* Slate-700 */
}

html.dark .btn-outline-secondary:hover,
html.dark .btn:not(.btn-primary):hover,
html.dark .btn-secondary-ui:hover:not(:disabled),
html.dark .pagination-btn:hover:not(:disabled) {
  background-color: #334155 !important;
  color: #ffffff !important;
}

/* Danger Action Button (Dark Mode) */
html.dark .btn-danger-ui {
  background-color: rgba(136, 19, 55, 0.4) !important; /* Rose-900/40 */
  border-color: #881337 !important;                    /* Rose-900 */
  color: #fb7185 !important;                            /* Rose-400 */
}

html.dark .btn-danger-ui:hover:not(:disabled) {
  background-color: rgba(159, 18, 57, 0.5) !important;
  color: #fda4af !important; /* Rose-300 */
}

/* Cards & Main Containers (Dark Mode) */
html.dark .card,
html.dark .table-responsive,
html.dark .card-footer,
html.dark .table-card-container,
html.dark .form-card-container,
html.dark .details-card-container,
html.dark #filter-sidebar,
html.dark .details-action-toolbar {
  background-color: #1e293b !important; /* Slate-800 */
  border-color: #334155 !important;     /* Slate-700 */
  color: #f8fafc !important;
}

/* Modals - the details page's own delete-confirmation modal. The generic
   Tables rules below already theme any <table>/<td>/<thead> on the page,
   including inside .details-card-container, so no details-specific table
   override is needed here. */
html.dark .modal-content {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* Tables (Dark Mode) */
html.dark table,
html.dark .table,
html.dark table tbody,
html.dark table td {
  background-color: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}

html.dark .card-header,
html.dark table thead,
html.dark table th {
  background-color: #0f172a !important; /* Slate-900 */
  color: #f8fafc !important;
  border-color: #334155 !important;
}

html.dark table tbody tr:hover,
html.dark .table-hover tbody tr:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}

/* Pagination & Controls (Dark Mode) */
html.dark .pagination .page-link,
html.dark .form-control,
html.dark .form-select {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

/* ==========================================================================
   PAGINATION BAR DARK MODE OVERRIDES
   ========================================================================== */
html.dark .table-footer-bar,
[data-bs-theme="dark"] .table-footer-bar {
  background-color: #1e293b !important; /* Slate-800 */
  border-color: #334155 !important;     /* Slate-700 */
  color: #94a3b8 !important;            /* Slate-400 */
}

html.dark .table-footer-bar p,
html.dark .table-footer-bar .dropdown,
[data-bs-theme="dark"] .table-footer-bar p,
[data-bs-theme="dark"] .table-footer-bar .dropdown {
  color: #94a3b8 !important;
}

html.dark .table-footer-bar a.dropdown-toggle,
[data-bs-theme="dark"] .table-footer-bar a.dropdown-toggle {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html.dark .table-footer-bar span.border-slate-800,
[data-bs-theme="dark"] .table-footer-bar span.border-slate-800 {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #475569 !important;
}