/* =====================================================================
   FortunesFox — Black & Gold theme
   Shared skin for every panel page (admin, client, partner, auth pages).
   Colour / border / shadow / font only: no layout, display or position
   rules live here, so page scripts that toggle visibility keep working.
   ===================================================================== */

:root {
  --ff-bg: #070708;
  --ff-bg-2: #0c0c0e;
  --ff-surface: #121214;
  --ff-surface-2: #18181b;
  --ff-surface-3: #212125;
  --ff-input: #0e0e10;

  --ff-line: rgba(212, 175, 55, 0.16);
  --ff-line-strong: rgba(212, 175, 55, 0.40);

  --ff-gold: #d4af37;
  --ff-gold-light: #f1d382;
  --ff-gold-pale: #f8e9bd;
  --ff-gold-deep: #9c7a22;
  --ff-gold-grad: linear-gradient(135deg, #f7e08a 0%, #d4af37 45%, #a67c1b 100%);
  --ff-gold-grad-hover: linear-gradient(135deg, #fbe9a6 0%, #e0bc48 45%, #b98d25 100%);
  --ff-gold-soft: rgba(212, 175, 55, 0.10);

  --ff-text: #f3efe4;
  --ff-text-2: #d2cbb8;
  --ff-muted: #9a937f;
  --ff-on-gold: #17120a;

  --ff-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  --ff-shadow-gold: 0 8px 24px rgba(212, 175, 55, 0.22);
  --ff-ring: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);

  --ff-font: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --ff-font-brand: "Cinzel", "Times New Roman", serif;
}

/* ---------- Page ----------
   Only body is painted, so a page's own body background still fills the
   whole viewport (body backgrounds propagate to the canvas when html has none). */
body {
  background-color: var(--ff-bg);
  color: var(--ff-text);
  font-family: var(--ff-font);
}

body {
  background-image:
    radial-gradient(1100px 560px at 0% -10%, rgba(212, 175, 55, 0.09), transparent 60%),
    radial-gradient(900px 520px at 100% 110%, rgba(212, 175, 55, 0.06), transparent 60%);
  background-attachment: fixed;
}

::selection { background: rgba(212, 175, 55, 0.35); color: #fff; }

* { scrollbar-width: thin; scrollbar-color: rgba(212, 175, 55, 0.45) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.35); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.6); }

h1, h2, h3, h4, h5, h6 { color: var(--ff-text); }
a { color: var(--ff-gold-light); }
a:hover { color: var(--ff-gold-pale); }
hr { border-color: var(--ff-line); }
label { color: var(--ff-text-2); }
small, .small { color: inherit; }
code { color: var(--ff-gold-light); }

/* Brand helpers (usable anywhere) */
.ff-brand {
  font-family: var(--ff-font-brand);
  letter-spacing: 0.18em;
  background: var(--ff-gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* ---------- Bootstrap: surfaces ---------- */
.card,
.list-group-item,
.jumbotron,
.toast,
.popover {
  background-color: var(--ff-surface);
  border-color: var(--ff-line);
  color: var(--ff-text);
}
.card { box-shadow: var(--ff-shadow); }
.card-header,
.card-footer {
  background-color: rgba(212, 175, 55, 0.06);
  border-color: var(--ff-line);
  color: var(--ff-gold-light);
}
.card-title { color: var(--ff-text); }
.list-group-item.active {
  background: var(--ff-gold-grad);
  border-color: var(--ff-gold);
  color: var(--ff-on-gold);
}
.list-group-item-action:hover,
.list-group-item-action:focus { background-color: var(--ff-surface-2); color: var(--ff-text); }

.modal-content {
  background-color: var(--ff-surface);
  border: 1px solid var(--ff-line-strong);
  color: var(--ff-text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(212, 175, 55, 0.08);
}
.modal-header,
.modal-footer { border-color: var(--ff-line); }
.modal-title { color: var(--ff-gold-light); }
.modal-backdrop.show { opacity: 0.75; }
.close,
.btn-close { color: var(--ff-gold-light); text-shadow: none; opacity: 0.8; }
.close:hover { color: var(--ff-gold-pale); opacity: 1; }
.btn-close { filter: invert(80%) sepia(40%) saturate(500%) hue-rotate(5deg); }

.dropdown-menu {
  background-color: var(--ff-surface-2);
  border: 1px solid var(--ff-line-strong);
  box-shadow: var(--ff-shadow);
  color: var(--ff-text);
}
.dropdown-item { color: var(--ff-text); }
.dropdown-item:hover,
.dropdown-item:focus { background-color: var(--ff-gold-soft); color: var(--ff-gold-light); }
.dropdown-item.active,
.dropdown-item:active { background: var(--ff-gold-grad); color: var(--ff-on-gold); }
.dropdown-divider { border-color: var(--ff-line); }

/* ---------- Bootstrap: tables (BS4 + BS5) ---------- */
.table {
  color: var(--ff-text);
  --bs-table-bg: transparent;
  --bs-table-color: var(--ff-text);
  --bs-table-border-color: rgba(212, 175, 55, 0.12);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
  --bs-table-striped-color: var(--ff-text);
  --bs-table-hover-bg: rgba(212, 175, 55, 0.07);
  --bs-table-hover-color: var(--ff-text);
  --bs-table-active-bg: rgba(212, 175, 55, 0.12);
}
.table th,
.table td,
.table thead th,
.table-bordered,
.table-bordered th,
.table-bordered td { border-color: rgba(212, 175, 55, 0.12); }
/* Header colour lives on <thead> so th inherits it: a page that paints its own
   (gold) header and sets dark ink on thead keeps readable column titles. */
.table thead { color: var(--ff-gold-light); }
.table thead th,
.table > thead > tr > th {
  --bs-table-color: inherit;
  color: inherit;
  background-color: rgba(212, 175, 55, 0.07);
  border-bottom: 1px solid var(--ff-line-strong);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.025); }
.table-hover tbody tr:hover { background-color: rgba(212, 175, 55, 0.07); color: var(--ff-text); }
.table .thead-light th,
.table-light,
.table-light > th,
.table-light > td {
  background-color: rgba(212, 175, 55, 0.07);
  color: var(--ff-gold-light);
  border-color: var(--ff-line);
  --bs-table-bg: rgba(212, 175, 55, 0.07);
  --bs-table-color: var(--ff-gold-light);
}
.table .thead-dark th,
.table-dark,
.table-dark > th,
.table-dark > td {
  background-color: #0b0b0d;
  color: var(--ff-gold-light);
  border-color: var(--ff-line-strong);
  --bs-table-bg: #0b0b0d;
  --bs-table-color: var(--ff-gold-light);
}

/* ---------- Bootstrap: forms ---------- */
.form-control,
.custom-select,
.form-select,
.input-group-text,
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"])),
:where(textarea),
:where(select) {
  background-color: var(--ff-input);
  border-color: var(--ff-line-strong);
  color: var(--ff-text);
}
.form-control:focus,
.custom-select:focus,
.form-select:focus,
:where(input, textarea, select):focus {
  background-color: var(--ff-input);
  border-color: var(--ff-gold);
  color: var(--ff-text);
  box-shadow: var(--ff-ring);
  outline: none;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder { color: var(--ff-muted); opacity: 1; }
.form-control:disabled,
.form-control[readonly] { background-color: var(--ff-surface-2); color: var(--ff-text-2); }
.input-group-text { color: var(--ff-gold-light); }
select option { background-color: var(--ff-surface-2); color: var(--ff-text); }
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress { accent-color: var(--ff-gold); }
.form-check-input:checked { background-color: var(--ff-gold); border-color: var(--ff-gold); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--ff-gold); border-color: var(--ff-gold); }
.form-text,
.help-block { color: var(--ff-muted); }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ff-text);
  -webkit-box-shadow: 0 0 0 1000px var(--ff-input) inset;
  caret-color: var(--ff-text);
}

/* ---------- Bootstrap: buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; letter-spacing: 0.01em; }
.btn-primary,
.btn-warning,
.btn-gold {
  background: var(--ff-gold-grad);
  border-color: var(--ff-gold);
  color: var(--ff-on-gold);
  box-shadow: var(--ff-shadow-gold);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-warning:hover,
.btn-warning:focus,
.btn-gold:hover {
  background: var(--ff-gold-grad-hover);
  border-color: var(--ff-gold-light);
  color: var(--ff-on-gold);
}
.btn-primary:focus,
.btn-warning:focus,
.btn-outline-primary:focus { box-shadow: var(--ff-ring); }
.btn-secondary,
.btn-light,
.btn-dark {
  background-color: var(--ff-surface-3);
  border-color: var(--ff-line-strong);
  color: var(--ff-text);
}
.btn-secondary:hover,
.btn-light:hover,
.btn-dark:hover {
  background-color: #2a2a2f;
  border-color: var(--ff-gold);
  color: var(--ff-gold-light);
}
.btn-info {
  background-color: transparent;
  border-color: var(--ff-gold);
  color: var(--ff-gold-light);
}
.btn-info:hover { background-color: var(--ff-gold-soft); color: var(--ff-gold-pale); border-color: var(--ff-gold-light); }
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-dark,
.btn-outline-light {
  border-color: var(--ff-gold);
  color: var(--ff-gold-light);
  background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-info:hover,
.btn-outline-dark:hover,
.btn-outline-light:hover {
  background: var(--ff-gold-grad);
  border-color: var(--ff-gold);
  color: var(--ff-on-gold);
}
.btn-link { color: var(--ff-gold-light); }

/* ---------- Bootstrap: navigation ---------- */
.nav-tabs { border-color: var(--ff-line); }
.nav-tabs .nav-link { color: var(--ff-text-2); }
.nav-tabs .nav-link:hover { border-color: var(--ff-line); color: var(--ff-gold-light); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background-color: var(--ff-surface);
  border-color: var(--ff-line-strong) var(--ff-line-strong) var(--ff-surface);
  color: var(--ff-gold-light);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background: var(--ff-gold-grad); color: var(--ff-on-gold); }
.page-link {
  background-color: var(--ff-surface-2);
  border-color: var(--ff-line);
  color: var(--ff-gold-light);
}
.page-link:hover { background-color: var(--ff-surface-3); border-color: var(--ff-line-strong); color: var(--ff-gold-pale); }
.page-item.active .page-link { background: var(--ff-gold-grad); border-color: var(--ff-gold); color: var(--ff-on-gold); }
.page-item.disabled .page-link { background-color: var(--ff-surface); border-color: var(--ff-line); color: var(--ff-muted); }
.breadcrumb { background-color: var(--ff-surface-2); }
.breadcrumb-item.active { color: var(--ff-muted); }
.progress { background-color: var(--ff-surface-3); }
.progress-bar { background: var(--ff-gold-grad); color: var(--ff-on-gold); }

/* ---------- Bootstrap: alerts (keep meaning, darken surface) ---------- */
.alert { border-width: 1px; }
.alert-primary,
.alert-info,
.alert-secondary,
.alert-light,
.alert-dark { background-color: rgba(212, 175, 55, 0.08); border-color: var(--ff-line-strong); color: var(--ff-gold-pale); }
.alert-success { background-color: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.35); color: #b6f2c9; }
.alert-danger { background-color: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.35); color: #fecaca; }
.alert-warning { background-color: rgba(234, 179, 8, 0.10); border-color: rgba(234, 179, 8, 0.38); color: #fde68a; }

/* ---------- Bootstrap utilities (they use !important upstream) ---------- */
.bg-white,
.bg-light { background-color: var(--ff-surface) !important; }
.bg-dark { background-color: #0b0b0d !important; }
.bg-primary { background: var(--ff-gold-grad) !important; color: var(--ff-on-gold) !important; }
.text-dark,
.text-body,
.text-black { color: var(--ff-text) !important; }
.text-muted,
.text-secondary { color: var(--ff-muted) !important; }
.text-primary,
.text-info { color: var(--ff-gold-light) !important; }
.border,
.border-top,
.border-bottom,
.border-left,
.border-right,
.border-start,
.border-end { border-color: var(--ff-line) !important; }
.border-primary { border-color: var(--ff-gold) !important; }
.badge-primary,
.bg-primary.badge { background: var(--ff-gold-grad) !important; color: var(--ff-on-gold) !important; }
.badge-light,
.badge-secondary { background-color: var(--ff-surface-3); color: var(--ff-text); }
.shadow,
.shadow-sm,
.shadow-lg { box-shadow: var(--ff-shadow) !important; }

/* ---------- Tailwind (CDN injects after this file, so these need !important) ---------- */
.bg-white,
.bg-gray-50 { background-color: var(--ff-surface) !important; }
.bg-gray-100,
.bg-gray-200 { background-color: var(--ff-surface-2) !important; }
.text-gray-900,
.text-gray-800,
.text-gray-700 { color: var(--ff-text) !important; }
.text-gray-600,
.text-gray-500 { color: var(--ff-text-2) !important; }
.text-gray-400 { color: var(--ff-muted) !important; }
.border-gray-100,
.border-gray-200,
.border-gray-300 { border-color: var(--ff-line) !important; }
.divide-gray-100 > * + *,
.divide-gray-200 > * + * { border-color: var(--ff-line) !important; }
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover { background-color: var(--ff-surface-2) !important; }

/* slate / zinc greys */
.bg-white\/90,
.bg-white\/80,
.bg-slate-50,
.bg-zinc-50 { background-color: var(--ff-surface) !important; }
.bg-slate-100,
.bg-slate-200,
.bg-zinc-100 { background-color: var(--ff-surface-2) !important; }
.bg-slate-800,
.bg-slate-900,
.bg-slate-900\/50,
.bg-slate-950 { background-color: #0c0c0e !important; }
.text-slate-900,
.text-slate-800,
.text-slate-700 { color: var(--ff-text) !important; }
.text-slate-600,
.text-slate-500 { color: var(--ff-text-2) !important; }
.text-slate-400 { color: var(--ff-muted) !important; }
.border-slate-100,
.border-slate-200,
.border-slate-300,
.border-indigo-100,
.border-emerald-100,
.border-emerald-200 { border-color: var(--ff-line) !important; }
.divide-slate-100 > * + *,
.divide-slate-200 > * + * { border-color: var(--ff-line) !important; }
.hover\:bg-slate-50:hover,
.hover\:bg-slate-100:hover { background-color: var(--ff-surface-2) !important; }

/* primary accents (indigo / sky / blue / teal / emerald fills) become gold */
.bg-indigo-500,
.bg-indigo-600,
.bg-indigo-700,
.bg-sky-500,
.bg-sky-600,
.bg-blue-500,
.bg-blue-600,
.bg-teal-500,
.bg-teal-600,
.bg-emerald-500,
.bg-emerald-600,
.hover\:bg-indigo-700:hover,
.hover\:bg-indigo-600:hover,
.hover\:bg-emerald-600:hover,
.hover\:bg-emerald-700:hover {
  background-color: var(--ff-gold) !important;
  background-image: var(--ff-gold-grad) !important;
  color: var(--ff-on-gold) !important;
}
:is(.bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-sky-500, .bg-sky-600, .bg-blue-500, .bg-blue-600, .bg-teal-500, .bg-teal-600, .bg-emerald-500, .bg-emerald-600).text-white,
:is(.bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-sky-500, .bg-sky-600, .bg-blue-500, .bg-blue-600, .bg-teal-500, .bg-teal-600, .bg-emerald-500, .bg-emerald-600) .text-white { color: var(--ff-on-gold) !important; }

/* soft accent chips */
.bg-indigo-50,
.bg-indigo-100,
.bg-sky-50,
.bg-sky-100,
.bg-sky-200,
.bg-blue-50,
.bg-blue-100 { background-color: rgba(212, 175, 55, 0.12) !important; }
.text-indigo-600,
.text-indigo-700,
.text-sky-600,
.text-sky-700,
.text-blue-600,
.text-blue-700,
.text-teal-600,
.text-teal-700 { color: var(--ff-gold-light) !important; }
.border-indigo-400,
.border-indigo-500,
.border-sky-500,
.border-blue-500 { border-color: var(--ff-gold) !important; }

/* status greens stay green, just readable on black */
.bg-emerald-50,
.bg-emerald-100,
.bg-green-50,
.bg-green-100 { background-color: rgba(34, 197, 94, 0.12) !important; }
.text-emerald-600,
.text-emerald-700,
.text-emerald-800,
.text-green-600,
.text-green-700,
.text-green-800 { color: #86efac !important; }
.bg-red-50,
.bg-red-100,
.bg-rose-50,
.bg-rose-100 { background-color: rgba(239, 68, 68, 0.12) !important; }
.text-red-600,
.text-red-700,
.text-red-800,
.text-rose-600,
.text-rose-700 { color: #fca5a5 !important; }
.bg-amber-50,
.bg-amber-100,
.bg-yellow-50,
.bg-yellow-100 { background-color: rgba(234, 179, 8, 0.12) !important; }
.text-amber-700,
.text-amber-800,
.text-yellow-700,
.text-yellow-800 { color: #fde68a !important; }

/* state variants (zebra rows, hovers, focus borders) */
.odd\:bg-slate-50:nth-child(odd),
.odd\:bg-white:nth-child(odd) { background-color: var(--ff-surface) !important; }
.even\:bg-slate-100:nth-child(even),
.even\:bg-slate-50:nth-child(even) { background-color: #161618 !important; }
.hover\:bg-slate-200:hover,
.hover\:bg-sky-50:hover,
.hover\:bg-sky-200:hover,
.hover\:bg-indigo-200:hover,
.hover\:bg-amber-100:hover { background-color: rgba(212, 175, 55, 0.10) !important; }
.hover\:bg-sky-600:hover,
.hover\:bg-sky-700:hover {
  background-color: var(--ff-gold) !important;
  background-image: var(--ff-gold-grad-hover) !important;
  color: var(--ff-on-gold) !important;
}
.hover\:bg-rose-100:hover { background-color: rgba(239, 68, 68, 0.15) !important; }
.focus\:border-indigo-400:focus,
.focus\:border-indigo-500:focus,
.focus\:border-sky-500:focus { border-color: var(--ff-gold) !important; }

/* focus rings */
[class*="ring-indigo-"],
[class*="ring-sky-"],
[class*="ring-emerald-"],
[class*="ring-blue-"] { --tw-ring-color: rgba(212, 175, 55, 0.45) !important; }

/* gradient banners: brand-colour gradients -> gold, dark slate -> black, pale -> dark */
[class*="bg-gradient-to-"][class*="from-indigo-"],
[class*="bg-gradient-to-"][class*="from-sky-"],
[class*="bg-gradient-to-"][class*="from-blue-"],
[class*="bg-gradient-to-"][class*="from-emerald-"],
[class*="bg-gradient-to-"][class*="from-teal-"],
[class*="bg-gradient-to-"][class*="from-cyan-"] {
  background-image: var(--ff-gold-grad) !important;
  color: var(--ff-on-gold) !important;
}
[class*="bg-gradient-to-"]:is([class*="from-indigo-"], [class*="from-sky-"], [class*="from-blue-"], [class*="from-emerald-"], [class*="from-teal-"], [class*="from-cyan-"]) :is(.text-white, .text-slate-100, .text-slate-50) { color: var(--ff-on-gold) !important; }
[class*="bg-gradient-to-"]:is([class*="from-indigo-"], [class*="from-sky-"], [class*="from-blue-"], [class*="from-emerald-"], [class*="from-teal-"], [class*="from-cyan-"]).text-white { color: var(--ff-on-gold) !important; }
[class*="bg-gradient-to-"][class*="from-slate-9"],
[class*="bg-gradient-to-"][class*="from-slate-8"],
[class*="bg-gradient-to-"][class*="from-gray-9"] {
  background-image: linear-gradient(135deg, #1a160b 0%, #0f0f11 55%, #0b0b0d 100%) !important;
  border-color: var(--ff-line) !important;
}
[class*="bg-gradient-to-"]:is([class~="from-white"], [class~="from-slate-50"], [class~="from-sky-50"], [class~="from-indigo-50"], [class~="from-emerald-50"]),
[class*="bg-gradient-to-"]:is([class~="via-sky-50"], [class~="via-white"], [class~="to-emerald-50"], [class~="to-white"]):not([class*="from-indigo-"]):not([class*="from-sky-"]):not([class*="from-blue-"]):not([class*="from-emerald-"]):not([class*="from-teal-"]) {
  background-image: linear-gradient(135deg, #17140b 0%, #121214 60%, #121214 100%) !important;
}

/* ---------- DataTables (v1 + v2) ---------- */
.dataTables_wrapper,
.dt-container { color: var(--ff-text-2); }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
.dt-container .dt-input,
.dt-container .dt-search input,
.dt-container .dt-length select {
  background-color: var(--ff-input) !important;
  border: 1px solid var(--ff-line-strong) !important;
  color: var(--ff-text) !important;
}
.dataTables_wrapper .dataTables_info,
.dt-container .dt-info { color: var(--ff-muted) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dt-container .dt-paging .dt-paging-button {
  color: var(--ff-gold-light) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  border-radius: 8px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dt-container .dt-paging .dt-paging-button:hover {
  color: var(--ff-gold-pale) !important;
  background: var(--ff-gold-soft) !important;
  border-color: var(--ff-line-strong) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dt-container .dt-paging .dt-paging-button.current {
  background: var(--ff-gold-grad) !important;
  color: var(--ff-on-gold) !important;
  border-color: var(--ff-gold) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dt-container .dt-paging .dt-paging-button.disabled { color: var(--ff-muted) !important; background: transparent !important; }
table.dataTable thead th,
table.dataTable thead td { border-bottom-color: var(--ff-line-strong) !important; }
table.dataTable tbody tr { background-color: transparent; }
table.dataTable.stripe > tbody > tr:nth-child(odd) > *,
table.dataTable.display > tbody > tr:nth-child(odd) > * { box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.025) !important; }
table.dataTable.hover > tbody > tr:hover > *,
table.dataTable.display > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px rgba(212, 175, 55, 0.07) !important; }
div.dt-buttons > .dt-button,
div.dt-buttons > div.dt-button-split .dt-button,
.dt-container .dt-buttons > .dt-button {
  background: var(--ff-gold-grad) !important;
  border: 1px solid var(--ff-gold) !important;
  color: var(--ff-on-gold) !important;
  border-radius: 999px !important;
  box-shadow: var(--ff-shadow-gold) !important;
}

/* ---------- SweetAlert-style / generic overlays ---------- */
.swal2-popup { background: var(--ff-surface) !important; color: var(--ff-text) !important; border: 1px solid var(--ff-line-strong); }
.swal2-title { color: var(--ff-gold-light) !important; }
.swal2-styled.swal2-confirm { background: var(--ff-gold-grad) !important; color: var(--ff-on-gold) !important; }