/*
 * Admin Theme Foundation
 * ---------------------
 * Shared CSS custom properties that mirror the user-facing app's design tokens.
 * Works with the current hardcoded class="dark" AND future data-theme attribute.
 *
 * Variables available:
 *   --bg, --bg-2, --bg-3        Backgrounds (primary / secondary / tertiary)
 *   --text, --text-muted         Text colours
 *   --gold, --gold-2             Brand accent (gold)
 *   --glow                       Gold glow box-shadow value
 *   --border                     Border colour (semi-transparent)
 *   --surface, --surface-hover   Card / surface overlays
 *   --success, --warning, --error Status colours
 *   --chart-lines                Chart grid-line colour
 */

/* ========== LIGHT THEME (default / root) ========== */
:root {
    --bg: #ffffff;
    --bg-2: #f9fafb;
    --bg-3: #f3f4f6;
    --text: #111827;
    --text-muted: #6b7280;
    --gold: #f39c12;
    --gold-2: #e67e22;
    --glow: 0 0 40px rgba(243, 156, 18, 0.15);
    --border: rgba(0, 0, 0, 0.08);
    --surface: rgba(0, 0, 0, 0.02);
    --surface-hover: rgba(0, 0, 0, 0.04);
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --chart-lines: rgb(211, 211, 211);
}

/* ========== DARK THEME — via .dark class (current admin) ========== */
.dark {
    --bg: #0b0f14;
    --bg-2: #0e141b;
    --bg-3: #1a1f26;
    --text: #d8d9dc;
    --text-muted: #a5a7ac;
    --gold: #f0c46a;
    --gold-2: #c59b3a;
    --glow: 0 0 40px rgba(240, 196, 106, 0.25);
    --border: rgba(255, 255, 255, 0.12);
    --surface: rgba(255, 255, 255, 0.03);
    --surface-hover: rgba(255, 255, 255, 0.06);
    --success: #4ade80;
    --warning: #fbbf24;
    --error: #ef4444;
    --chart-lines: rgba(255, 255, 255, 0.04);
}

/* ========== DARK THEME — via data-theme attribute (future) ========== */
[data-theme="light"] {
    --bg: #ffffff;
    --bg-2: #f9fafb;
    --bg-3: #f3f4f6;
    --text: #111827;
    --text-muted: #6b7280;
    --gold: #f39c12;
    --gold-2: #e67e22;
    --glow: 0 0 40px rgba(243, 156, 18, 0.15);
    --border: rgba(0, 0, 0, 0.08);
    --surface: rgba(0, 0, 0, 0.02);
    --surface-hover: rgba(0, 0, 0, 0.04);
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --chart-lines: rgb(211, 211, 211);
}

[data-theme="dark"] {
    --bg: #0b0f14;
    --bg-2: #0e141b;
    --bg-3: #1a1f26;
    --text: #d8d9dc;
    --text-muted: #a5a7ac;
    --gold: #f0c46a;
    --gold-2: #c59b3a;
    --glow: 0 0 40px rgba(240, 196, 106, 0.25);
    --border: rgba(255, 255, 255, 0.12);
    --surface: rgba(255, 255, 255, 0.03);
    --surface-hover: rgba(255, 255, 255, 0.06);
    --success: #4ade80;
    --warning: #fbbf24;
    --error: #ef4444;
    --chart-lines: rgba(255, 255, 255, 0.04);
}

/* ========== AUTO THEME — follows OS preference (future) ========== */
[data-theme="auto"] {
    color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
    [data-theme="auto"] {
        --bg: #ffffff;
        --bg-2: #f9fafb;
        --bg-3: #f3f4f6;
        --text: #111827;
        --text-muted: #6b7280;
        --gold: #f39c12;
        --gold-2: #e67e22;
        --glow: 0 0 40px rgba(243, 156, 18, 0.15);
        --border: rgba(0, 0, 0, 0.08);
        --surface: rgba(0, 0, 0, 0.02);
        --surface-hover: rgba(0, 0, 0, 0.04);
        --success: #10b981;
        --warning: #f59e0b;
        --error: #ef4444;
        --chart-lines: rgb(211, 211, 211);
    }
}

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --bg: #0b0f14;
        --bg-2: #0e141b;
        --bg-3: #1a1f26;
        --text: #d8d9dc;
        --text-muted: #a5a7ac;
        --gold: #f0c46a;
        --gold-2: #c59b3a;
        --glow: 0 0 40px rgba(240, 196, 106, 0.25);
        --border: rgba(255, 255, 255, 0.12);
        --surface: rgba(255, 255, 255, 0.03);
        --surface-hover: rgba(255, 255, 255, 0.06);
        --success: #4ade80;
        --warning: #fbbf24;
        --error: #ef4444;
        --chart-lines: rgba(255, 255, 255, 0.04);
    }
}

/* ========== FONT UTILITY CLASSES ========== */

/*
 * .font-heading  — Playfair Display (serif, for titles & hero text)
 * .font-body     — Inter (sans-serif, for body & UI text)
 *
 * Flux UI components continue using Instrument Sans via Tailwind's --font-sans.
 * These classes give new/restyled components access to the app's typefaces.
 */
.font-heading {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

.font-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ========== GOLD ACCENT UTILITIES ========== */

/*
 * Reusable gold-accent helpers for later steps.
 * These use the CSS variables so they auto-adapt to light/dark.
 */
.text-gold {
    color: var(--gold);
}

.text-gold-2 {
    color: var(--gold-2);
}

.bg-gold {
    background-color: var(--gold);
}

.bg-gold-2 {
    background-color: var(--gold-2);
}

.border-gold {
    border-color: var(--gold);
}

.border-gold-2 {
    border-color: var(--gold-2);
}

.glow-gold {
    box-shadow: var(--glow);
}

/* ========== SURFACE / BACKGROUND UTILITIES ========== */

.bg-theme {
    background-color: var(--bg);
}

.bg-theme-2 {
    background-color: var(--bg-2);
}

.bg-theme-3 {
    background-color: var(--bg-3);
}

.bg-surface {
    background-color: var(--surface);
}

.bg-surface-hover:hover {
    background-color: var(--surface-hover);
}

.text-theme {
    color: var(--text);
}

.text-theme-muted {
    color: var(--text-muted);
}

.border-theme {
    border-color: var(--border);
}

/* ========== STATUS COLOUR UTILITIES ========== */

.text-status-success {
    color: var(--success);
}

.text-status-warning {
    color: var(--warning);
}

.text-status-error {
    color: var(--error);
}

.bg-status-success {
    background-color: var(--success);
}

.bg-status-warning {
    background-color: var(--warning);
}

.bg-status-error {
    background-color: var(--error);
}

/* ==========================================================================
 *  STEP 5 — GLOBAL ADMIN TABLE, FORM, MODAL & COMPONENT OVERRIDES
 *  ==========================================================================
 *  These override the hardcoded Tailwind gray/zinc classes used across 27+
 *  admin blade files. Because admin-theme.css only loads on admin pages,
 *  this won't affect the user-facing app.
 *
 *  Strategy: override the compiled Tailwind classes at a slightly higher
 *  specificity so CSS variables drive all colors automatically.
 * ========================================================================== */

/* ---------- TABLE OVERRIDES ---------- */

/* Table body text */
table.text-gray-500 {
    color: var(--text-muted) !important;
}
.dark table.text-gray-500 {
    color: var(--text-muted) !important;
}

/* Table header row */
thead.bg-gray-50 {
    background-color: var(--bg-2) !important;
    color: var(--text-muted) !important;
}
thead.text-gray-700 {
    color: var(--text-muted) !important;
}

/* Override dark variants on thead */
.dark thead.bg-gray-50,
thead.dark\:bg-gray-700 {
    background-color: var(--bg-3) !important;
}
.dark thead.text-gray-700 {
    color: var(--text-muted) !important;
}

/* Table header cells */
thead th {
    border-bottom: 1px solid var(--border) !important;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Table row backgrounds — odd */
tr.odd\:bg-white {
    background-color: var(--bg) !important;
}
.dark tr.odd\:bg-white {
    background-color: var(--bg) !important;
}

/* Table row backgrounds — even */
tr.even\:bg-gray-50:nth-child(even) {
    background-color: var(--bg-2) !important;
}
.dark tr.even\:bg-gray-50:nth-child(even) {
    background-color: var(--bg-2) !important;
}

/* Table row border */
tr.border-b {
    border-color: var(--border) !important;
}
.dark tr.border-b {
    border-color: var(--border) !important;
}

/* Table row hover */
tbody tr {
    transition: background-color 0.15s ease;
}
tbody tr:hover {
    background-color: var(--surface-hover) !important;
}

/* Table cell text */
td.text-gray-900 {
    color: var(--text) !important;
}
.dark td.text-gray-900 {
    color: var(--text) !important;
}

/* Sub-text in table cells */
td .text-gray-500,
td span.text-gray-500 {
    color: var(--text-muted) !important;
}

/* Empty state */
td[colspan] {
    color: var(--text-muted) !important;
}


/* ---------- FILTER / ACCORDION OVERRIDES ---------- */

/* Accordion header bar */
.bg-gray-100 {
    background-color: var(--bg-2) !important;
}
.dark .bg-gray-100,
.dark\:bg-gray-800 {
    background-color: var(--bg-2) !important;
}

/* Accordion hover */
.hover\:bg-gray-200:hover {
    background-color: var(--surface-hover) !important;
}
.dark .hover\:bg-gray-200:hover,
.dark\:hover\:bg-gray-700:hover {
    background-color: var(--surface-hover) !important;
}

/* Accordion label text */
.text-gray-700 {
    color: var(--text) !important;
}
.dark .text-gray-700,
.dark\:text-gray-300 {
    color: var(--text) !important;
}

/* Accordion content panel */
.bg-white {
    background-color: var(--bg) !important;
}
.dark .bg-white,
.dark\:bg-gray-900 {
    background-color: var(--bg) !important;
}

/* Accordion content border */
.border-gray-200 {
    border-color: var(--border) !important;
}
.dark .border-gray-200,
.dark\:border-gray-700 {
    border-color: var(--border) !important;
}

/* Filter label text */
label.text-gray-700,
.text-gray-700.dark\:text-gray-300 {
    color: var(--text) !important;
}
.dark label.text-gray-700 {
    color: var(--text) !important;
}

/* Chevron icon in accordion */
svg.text-gray-600 {
    color: var(--text-muted) !important;
}
.dark svg.text-gray-600 {
    color: var(--text-muted) !important;
}


/* ---------- FORM INPUT OVERRIDES ---------- */

/* Text inputs, selects, textareas — native HTML (non-Flux) */
input[type="text"].border-gray-300,
input[type="email"].border-gray-300,
input[type="password"].border-gray-300,
input[type="number"].border-gray-300,
input[type="date"].border-gray-300,
input[type="search"].border-gray-300,
select.border-gray-300,
textarea.border-gray-300 {
    background-color: var(--bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Dark mode inputs */
.dark input[type="text"].border-gray-300,
.dark input[type="email"].border-gray-300,
.dark input[type="password"].border-gray-300,
.dark input[type="number"].border-gray-300,
.dark input[type="date"].border-gray-300,
.dark input[type="search"].border-gray-300,
.dark select.border-gray-300,
.dark textarea.border-gray-300 {
    background-color: var(--bg-3) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* Focus state — gold accent */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.15) !important;
    outline: none !important;
}

/* Input placeholder */
input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.6;
}

/* Select dropdown options (dark mode) */
.dark select option {
    background-color: var(--bg-3);
    color: var(--text);
}


/* ---------- ALERT / NOTIFICATION OVERRIDES ---------- */

/* Success alert */
div[role="alert"].bg-green-50 {
    background-color: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    color: var(--success) !important;
}
div[role="alert"].bg-green-50 .font-medium {
    color: var(--success) !important;
}
div[role="alert"].bg-green-50 svg {
    color: var(--success) !important;
}
.dark div[role="alert"].bg-green-50,
div[role="alert"].dark\:bg-green-900 {
    background-color: rgba(74, 222, 128, 0.08) !important;
    border-color: rgba(74, 222, 128, 0.20) !important;
    color: var(--success) !important;
}

/* Error alert */
div[role="alert"].bg-red-50 {
    background-color: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: var(--error) !important;
}
div[role="alert"].bg-red-50 .font-medium {
    color: var(--error) !important;
}
div[role="alert"].bg-red-50 svg {
    color: var(--error) !important;
}
.dark div[role="alert"].bg-red-50,
div[role="alert"].dark\:bg-red-900 {
    background-color: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.20) !important;
    color: var(--error) !important;
}


/* ---------- MODAL OVERRIDES ---------- */

/* Backdrop */
dialog[data-modal]::backdrop {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Modal panel — light mode */
dialog[data-modal] {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 1rem !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15),
                0 8px 20px rgba(0, 0, 0, 0.08) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    overflow: hidden !important;
}
/* Modal panel — dark mode */
.dark dialog[data-modal] {
    background: #161d2a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6),
                0 0 80px rgba(243, 156, 18, 0.04) !important;
}

/* Override inline bg-white from blade templates */
dialog[data-modal].bg-white { background: #ffffff !important; }
.dark dialog[data-modal].bg-white,
.dark dialog[data-modal][class*="dark:bg-"] { background: #161d2a !important; }

/* (gold stripe removed per user request) */

/* Header separator — only the heading row, not form field wrappers */
dialog[data-modal] > div > .space-y-6 > div:first-child {
    padding-bottom: 0.85rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* Header with explicit border-b (wider modals) */
dialog[data-modal] .border-b {
    border-color: var(--border) !important;
}

/* Heading text */
dialog[data-modal] h2,
dialog[data-modal] [data-flux-heading] {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    letter-spacing: -0.01em;
}

/* Close ✕ button (blade template custom ones) */
dialog[data-modal] button.absolute {
    color: var(--text-muted) !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}
dialog[data-modal] button.absolute:hover {
    color: var(--text) !important;
}

/* Flux's built-in close button (ui-close) */
dialog[data-modal] ui-close button {
    color: var(--text-muted) !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}
dialog[data-modal] ui-close button:hover {
    color: var(--text) !important;
}

/* Labels */
dialog[data-modal] label {
    font-weight: 600 !important;
    color: var(--text) !important;
}

/* Inputs, textareas, selects — light mode */
dialog[data-modal] input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
dialog[data-modal] textarea,
dialog[data-modal] select {
    background: #f8f9fb !important;
    border: 1px solid #e2e5ea !important;
    border-radius: 0.625rem !important;
    color: var(--text) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
dialog[data-modal] input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]):focus,
dialog[data-modal] textarea:focus,
dialog[data-modal] select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.1) !important;
    outline: none !important;
    background: #ffffff !important;
}

/* Inputs — dark mode */
.dark dialog[data-modal] input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
.dark dialog[data-modal] textarea,
.dark dialog[data-modal] select {
    background: #0d1219 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.dark dialog[data-modal] input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]):focus,
.dark dialog[data-modal] textarea:focus,
.dark dialog[data-modal] select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.12) !important;
    background: #0f1620 !important;
}

/* Placeholder */
dialog[data-modal] input::placeholder,
dialog[data-modal] textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.5;
}

/* Color overrides for hardcoded Tailwind classes */
dialog[data-modal] .text-gray-900 { color: var(--text) !important; }
dialog[data-modal] .text-gray-500,
dialog[data-modal] .text-gray-400 { color: var(--text-muted) !important; }
dialog[data-modal] .border-gray-200,
dialog[data-modal] .border-gray-700 { border-color: var(--border) !important; }


/* ---------- CARD OVERRIDES (api-settings style) ---------- */

/* White/zinc card pattern */
div.bg-white.border-zinc-200,
div.bg-white.border.border-zinc-200 {
    background-color: var(--bg) !important;
    border-color: var(--border) !important;
}
.dark div.bg-white.border-zinc-200,
.dark div.bg-white.border.border-zinc-200,
div.dark\:bg-zinc-800 {
    background-color: var(--bg) !important;
    border-color: var(--border) !important;
}

/* Card text overrides */
.text-zinc-900 {
    color: var(--text) !important;
}
.dark .text-zinc-900,
.dark\:text-zinc-100 {
    color: var(--text) !important;
}
.text-zinc-600 {
    color: var(--text-muted) !important;
}
.dark .text-zinc-600,
.dark\:text-zinc-400 {
    color: var(--text-muted) !important;
}

/* Copy button color */
.text-zinc-400 {
    color: var(--text-muted) !important;
}
.dark .text-zinc-400,
.dark\:text-zinc-500 {
    color: var(--text-muted) !important;
}


/* ---------- ACTION BUTTON OVERRIDES ---------- */

/* Edit button — keep semantic blue but refine */
button.bg-sky-600 {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    border: none;
    box-shadow: 0 1px 3px rgba(14, 165, 233, 0.2);
    transition: all 0.2s;
}
button.bg-sky-600:hover {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
    transform: translateY(-1px);
}

/* Delete button — keep semantic red but refine */
button.bg-red-600 {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border: none;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.2);
    transition: all 0.2s;
}
button.bg-red-600:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    transform: translateY(-1px);
}

/* Older blue button variant */
button.bg-blue-700 {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    border: none;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2);
    transition: all 0.2s;
}
button.bg-blue-700:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}


/* ---------- STATUS BADGE OVERRIDES ---------- */

/* Make badges softer with themed backgrounds */
span.bg-green-600 {
    background: rgba(16, 185, 129, 0.15) !important;
    color: var(--success) !important;
}
span.bg-red-600 {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--error) !important;
}
span.bg-blue-600 {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}
span.bg-purple-600 {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #a78bfa !important;
}
span.bg-orange-600 {
    background: rgba(249, 115, 22, 0.15) !important;
    color: #fb923c !important;
}
span.bg-sky-600 {
    background: rgba(14, 165, 233, 0.15) !important;
    color: #38bdf8 !important;
}


/* ---------- PAGINATION OVERRIDES ---------- */

/* Pagination container */
nav[aria-label="Pagination Navigation"] {
    font-family: 'Inter', -apple-system, sans-serif;
}

/* Pagination info text */
nav .text-gray-700 {
    color: var(--text-muted) !important;
}
.dark nav .text-gray-700 {
    color: var(--text-muted) !important;
}

/* Pagination buttons — normal state */
nav button.bg-white,
nav span .bg-white {
    background-color: var(--bg) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}
.dark nav button.bg-white,
.dark nav span .bg-white {
    background-color: var(--bg-2) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}

/* Pagination buttons — hover: gold instead of blue */
nav button:hover {
    color: var(--gold) !important;
    background-color: rgba(243, 156, 18, 0.06) !important;
    border-color: rgba(243, 156, 18, 0.25) !important;
}
.dark nav button:hover {
    color: var(--gold) !important;
    background-color: rgba(240, 196, 106, 0.08) !important;
    /*border-color: rgba(240, 196, 106, 0.20) !important;*/
}

/* Pagination — active/current page: gold instead of blue */
nav span[aria-current="page"] span {
    color: var(--gold) !important;
    background-color: rgba(243, 156, 18, 0.10) !important;
    border-color: var(--gold) !important;
}
.dark nav span[aria-current="page"] span {
    color: var(--gold) !important;
    background-color: rgba(240, 196, 106, 0.10) !important;
    border-color: var(--gold) !important;
}

/* Pagination — disabled state */
nav span .cursor-not-allowed {
    background-color: var(--bg-2) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
    opacity: 0.5;
}
.dark nav span .cursor-not-allowed {
    background-color: var(--bg-3) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
    opacity: 0.5;
}

/* Pagination — focus ring: gold */
nav button:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.2) !important;
    border-color: var(--gold) !important;
}

/* Pagination — three dots separator */
nav span .cursor-default {
    background-color: var(--bg) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}
.dark nav span .cursor-default {
    background-color: var(--bg-2) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}


/* ---------- FLUX UI COMPONENT OVERRIDES ---------- */

/* Flux input fields — themed border/bg */
[data-flux-input] {
    background-color: var(--bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.dark [data-flux-input] {
    background-color: var(--bg-3) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-flux-input]:focus-within {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.15) !important;
}

/* Flux select */
[data-flux-select] {
    background-color: var(--bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.dark [data-flux-select] {
    background-color: var(--bg-3) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* Flux textarea */
[data-flux-textarea] {
    background-color: var(--bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.dark [data-flux-textarea] {
    background-color: var(--bg-3) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-flux-textarea]:focus-within {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.15) !important;
}

/* Flux heading — use Inter */
[data-flux-heading] {
    font-family: 'Inter', -apple-system, sans-serif !important;
    color: var(--text) !important;
}

/* Flux subheading */
[data-flux-subheading] {
    color: var(--text-muted) !important;
}

/* Flux separator */
[data-flux-separator] {
    background-color: var(--border) !important;
    border-color: var(--border) !important;
}

/* Flux label */
[data-flux-label] {
    color: var(--text) !important;
}

/* Flux switch — checked state: gold */
[data-flux-switch][aria-checked="true"] {
    background-color: var(--gold) !important;
}

/* Flux dropdown menu */
[data-flux-menu] {
    background-color: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
}
.dark [data-flux-menu] {
    background-color: var(--bg-3) !important;
}

/* Flux menu items */
[data-flux-menu-item]:hover {
    background-color: var(--surface-hover) !important;
}


/* ---------- GENERAL BODY / PAGE OVERRIDES ---------- */

/* Main content area background */
body.min-h-screen {
    background-color: var(--bg) !important;
    color: var(--text);
    font-family: 'Inter', -apple-system, sans-serif;
}

/* Page container text */
.text-gray-500 {
    color: var(--text-muted) !important;
}
.dark .text-gray-500 {
    color: var(--text-muted) !important;
}
.text-gray-400 {
    color: var(--text-muted) !important;
    opacity: 0.8;
}
.dark .text-gray-400 {
    color: var(--text-muted) !important;
    opacity: 0.8;
}
.text-gray-900 {
    color: var(--text) !important;
}
.dark .text-gray-900 {
    color: var(--text) !important;
}
.text-gray-800 {
    color: var(--text) !important;
}
.dark .text-gray-800 {
    color: var(--text) !important;
}
.text-gray-600 {
    color: var(--text-muted) !important;
}
.dark .text-gray-600 {
    color: var(--text-muted) !important;
}
.text-gray-300 {
    color: var(--text-muted) !important;
}
.dark .text-gray-300 {
    color: var(--text-muted) !important;
}

/* Background overrides */
.bg-gray-50 {
    background-color: var(--bg-2) !important;
}
.dark .bg-gray-50 {
    background-color: var(--bg-2) !important;
}
.bg-gray-900 {
    background-color: var(--bg) !important;
}
.dark .bg-gray-900 {
    background-color: var(--bg) !important;
}
.bg-gray-800 {
    background-color: var(--bg-2) !important;
}
.dark .bg-gray-800 {
    background-color: var(--bg-2) !important;
}
.bg-gray-700 {
    background-color: var(--bg-3) !important;
}
.dark .bg-gray-700 {
    background-color: var(--bg-3) !important;
}

/* Border overrides */
.border-gray-300 {
    border-color: var(--border) !important;
}
.dark .border-gray-300 {
    border-color: var(--border) !important;
}
.border-gray-600 {
    border-color: var(--border) !important;
}
.dark .border-gray-600 {
    border-color: var(--border) !important;
}
.border-gray-700 {
    border-color: var(--border) !important;
}
.dark .border-gray-700 {
    border-color: var(--border) !important;
}

/* Zinc border overrides */
.border-zinc-200 {
    border-color: var(--border) !important;
}
.dark .border-zinc-200,
.dark\:border-zinc-700 {
    border-color: var(--border) !important;
}

/* Zinc background overrides */
.bg-zinc-800 {
    background-color: var(--bg-2) !important;
}
.dark .bg-zinc-800 {
    background-color: var(--bg-2) !important;
}


/* ---------- SCROLLBAR THEMING ---------- */

/* Webkit scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}


/* ---------- SELECTION COLOR ---------- */

/* ---------- PAGINATION BUTTON HOVER (for inline-styled pagination) ---------- */

.pagination-btn:hover {
    color: var(--gold) !important;
    background-color: rgba(243, 156, 18, 0.06) !important;
    border-color: rgba(243, 156, 18, 0.25) !important;
}
.pagination-btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.2) !important;
    border-color: var(--gold) !important;
}


/* ---------- SELECTION COLOR ---------- */

::selection {
    background-color: rgba(243, 156, 18, 0.20);
    color: var(--text);
}
.dark ::selection {
    background-color: rgba(240, 196, 106, 0.25);
    color: var(--text);
}


/* ==========================================================================
 *  STEP 6 — GOLD GRADIENT BUTTONS + FINAL POLISH
 *  ==========================================================================
 *  Transforms green primary buttons into gold gradients, adds global focus
 *  ring standardisation, smooth transitions, rounded table containers,
 *  file input / radio / checkbox theming, wire:loading polish.
 * ========================================================================== */


/* ---------- FLUX GREEN PRIMARY → GOLD GRADIENT ---------- */

/* Target primary buttons where --color-accent is green (Create, Update, Save) */
[data-flux-button][class*="--color-accent:var(--color-green"] {
    --color-accent: var(--gold) !important;
    --color-accent-foreground: #1a1000 !important;
    background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(243, 156, 18, 0.18), inset 0 1px 0 rgba(255,255,255,0.15);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-flux-button][class*="--color-accent:var(--color-green"]:hover {
    background: linear-gradient(135deg, var(--gold-2), var(--gold)) !important;
    box-shadow: 0 4px 16px rgba(243, 156, 18, 0.28), inset 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(-1px);
}
[data-flux-button][class*="--color-accent:var(--color-green"]:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(243, 156, 18, 0.15);
}

/* Dark mode gold gradient — slightly brighter gold */
.dark [data-flux-button][class*="--color-accent:var(--color-green"] {
    --color-accent: var(--gold) !important;
    --color-accent-foreground: #1a1000 !important;
    background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
    box-shadow: 0 2px 12px rgba(240, 196, 106, 0.15), inset 0 1px 0 rgba(255,255,255,0.10);
}
.dark [data-flux-button][class*="--color-accent:var(--color-green"]:hover {
    box-shadow: 0 4px 20px rgba(240, 196, 106, 0.25), var(--glow);
}


/* ---------- FLUX SKY BUTTONS — REFINED ---------- */

/* Keep sky as semantic blue, but polish */
[data-flux-button][class*="--color-accent:var(--color-sky"] {
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 1px 4px rgba(14, 165, 233, 0.12);
}
[data-flux-button][class*="--color-accent:var(--color-sky"]:hover {
    box-shadow: 0 3px 12px rgba(14, 165, 233, 0.22);
    transform: translateY(-1px);
}
[data-flux-button][class*="--color-accent:var(--color-sky"]:active {
    transform: translateY(0);
}


/* ---------- FLUX RED/DANGER BUTTONS — REFINED ---------- */

[data-flux-button][class*="--color-accent:var(--color-red"] {
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.12);
}
[data-flux-button][class*="--color-accent:var(--color-red"]:hover {
    box-shadow: 0 3px 12px rgba(239, 68, 68, 0.22);
    transform: translateY(-1px);
}


/* ---------- ALL FLUX BUTTONS — SHARED POLISH ---------- */

/* Subtle border-radius refinement */
[data-flux-button] {
    border-radius: 0.5rem !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
}

/* Filled/outline variant buttons — themed */
[data-flux-button].bg-white {
    background-color: var(--bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.dark [data-flux-button].bg-white {
    background-color: var(--bg-3) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
[data-flux-button].bg-white:hover {
    background-color: var(--surface-hover) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}


/* ---------- NATIVE HTML BUTTON — GOLD VARIANT ---------- */

/* For any native button that needs gold styling */
.btn-gold-admin {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    color: #1a1000;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(243, 156, 18, 0.18);
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-gold-admin:hover {
    background: linear-gradient(135deg, var(--gold-2), var(--gold));
    box-shadow: 0 4px 16px rgba(243, 156, 18, 0.28);
    transform: translateY(-1px);
}


/* ---------- WIRE:LOADING POLISH ---------- */
/*
 * ⚠️ REMOVED — these selectors targeted the mere PRESENCE of the wire:loading
 * attribute, which Livewire keeps in the DOM at all times. That made buttons
 * with wire:loading.attr="disabled" show `cursor: wait` (the OS loading cursor)
 * on hover PERMANENTLY, and dimmed/pulsed every wire:loading element always —
 * not only during an actual request. Livewire manages the loading state itself,
 * so no attribute-selector CSS is needed here.
 *
 * If you want to style the ACTIVE loading state, use Livewire's own directives
 * in the markup instead, e.g. wire:loading.class="opacity-70" / wire:loading.attr,
 * which Livewire toggles only while a matching request is in flight.
 */


/* ---------- TABLE CONTAINER — ROUNDED CORNERS ---------- */

/* Wrap table in rounded container */
div.overflow-x-auto {
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    overflow: hidden;
}
div.overflow-x-auto > table {
    border-collapse: collapse;
}

/* First row corners */
div.overflow-x-auto thead tr:first-child th:first-child {
    border-top-left-radius: 0.75rem;
}
div.overflow-x-auto thead tr:first-child th:last-child {
    border-top-right-radius: 0.75rem;
}

/* Remove double border on table wrapper */
div.overflow-x-auto table {
    border: none !important;
}
div.overflow-x-auto table tr:last-child {
    border-bottom: none !important;
}


/* ---------- FOCUS RING STANDARDISATION — GOLD EVERYWHERE ---------- */

/* Universal gold focus ring for interactive elements */
[data-flux-button]:focus-visible,
[data-flux-input]:focus-visible,
[data-flux-select]:focus-visible,
[data-flux-textarea]:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--gold) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.12) !important;
}
.dark [data-flux-button]:focus-visible,
.dark button:focus-visible,
.dark a:focus-visible,
.dark input:focus-visible,
.dark select:focus-visible,
.dark textarea:focus-visible {
    outline-color: var(--gold) !important;
    box-shadow: 0 0 0 4px rgba(240, 196, 106, 0.15) !important;
}


/* ---------- FILE INPUT STYLING ---------- */

input[type="file"] {
    background-color: var(--bg) !important;
    border: 1px dashed var(--border) !important;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text) !important;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
input[type="file"]:hover {
    border-color: var(--gold) !important;
    background-color: rgba(243, 156, 18, 0.03) !important;
}
.dark input[type="file"] {
    background-color: var(--bg-3) !important;
    border-color: var(--border) !important;
}
.dark input[type="file"]:hover {
    border-color: var(--gold) !important;
    background-color: rgba(240, 196, 106, 0.04) !important;
}

/* File input button (webkit) */
input[type="file"]::-webkit-file-upload-button {
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    color: #1a1000;
    border: none;
    padding: 0.4rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    margin-right: 0.75rem;
    transition: all 0.2s;
}
input[type="file"]::-webkit-file-upload-button:hover {
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.2);
}

/* File input button (Firefox) */
input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    color: #1a1000;
    border: none;
    padding: 0.4rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    margin-right: 0.75rem;
    transition: all 0.2s;
}


/* ---------- RADIO & CHECKBOX — GOLD ACCENT ---------- */

input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--gold) !important;
}

/* Custom checkbox/radio styling (when not using Flux) */
input[type="checkbox"]:checked {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
}
input[type="radio"]:checked {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
}

/* Flux checkbox/radio */
[data-flux-checkbox]:checked,
[data-flux-radio]:checked {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
}


/* ---------- FLUX HEADING — PLAYFAIR FOR xl+ SIZE ---------- */

/* Large headings (xl, 2xl) use Playfair Display for elegance */
[data-flux-heading][class*="text-2xl"],
[data-flux-heading][class*="text-xl"],
h1[data-flux-heading] {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 600;
}

/* Regular headings keep Inter */
[data-flux-heading][class*="text-lg"],
[data-flux-heading][class*="text-base"] {
    font-family: 'Inter', -apple-system, sans-serif !important;
}


/* ---------- SMOOTH TRANSITIONS — GLOBAL ---------- */

/* Smooth color transitions on all interactive elements */
a, button, input, select, textarea,
[data-flux-button], [data-flux-input], [data-flux-select],
[data-flux-textarea], [data-flux-menu-item] {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---------- FLUX NAVLIST — ACTIVE GOLD ACCENT ---------- */

/* Active nav item in sidebar */
[data-flux-navlist-item][aria-current="page"],
[data-flux-navlist-item].active,
[data-flux-navlist-item][data-current="true"] {
    background-color: rgba(243, 156, 18, 0.08) !important;
    color: var(--gold) !important;
    border-left: 3px solid var(--gold);
}
.dark [data-flux-navlist-item][aria-current="page"],
.dark [data-flux-navlist-item].active,
.dark [data-flux-navlist-item][data-current="true"] {
    background-color: rgba(240, 196, 106, 0.06) !important;
    color: var(--gold) !important;
}

/* Nav item hover */
[data-flux-navlist-item]:hover {
    background-color: var(--surface-hover) !important;
    color: var(--gold) !important;
}


/* ---------- TOOLTIP / POPOVER POLISH ---------- */

[data-flux-tooltip] {
    background-color: var(--bg-3) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}


/* ---------- EMPTY STATE STYLING ---------- */

/* "No data available" rows */
td[colspan] {
    padding: 2rem !important;
    text-align: center !important;
    font-style: italic;
    color: var(--text-muted) !important;
    background: var(--bg) !important;
}


/* ---------- PAGE-LEVEL BACKGROUND BODY FIX ---------- */

/* Ensure the main layout uses themed bg */
main, [class*="flex-1"] {
    /*background-color: var(--bg) !important;*/
}
.dark main, .dark [class*="flex-1"] {
    /*background-color: var(--bg) !important;*/
}


/* ---------- CARD HOVER GLOW ---------- */

/* Subtle gold glow on card hover */
div.bg-white:hover,
div.bg-surface:hover {
    box-shadow: 0 0 20px rgba(243, 156, 18, 0.04);
}
.dark div.bg-white:hover {
    box-shadow: 0 0 20px rgba(240, 196, 106, 0.03);
}


/* ---------- PRINT STYLES ---------- */

@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    [data-flux-button] {
        display: none !important;
    }
    nav[aria-label="Pagination Navigation"] {
        display: none !important;
    }
}

/* =====================================================
 *  ADMIN SHARED COMPONENTS — reusable across CRUD pages
 *  Themed table, buttons, and inputs using CSS variables
 *  (auto light/dark).
 * ===================================================== */

/* ----- Themed table ----- */
.adm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    overflow: hidden;
    background: var(--surface);
}
.adm-table thead th {
    padding: 0.9rem 1.25rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-3);
    border-bottom: 1px solid var(--border);
}
.adm-table tbody td {
    padding: 0.85rem 1.25rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.adm-table tbody tr:last-child td { border-bottom: none; }
.adm-table tbody tr { transition: background 0.15s ease; }
.adm-table tbody tr:hover { background: var(--surface-hover); }
.adm-table .td-name { font-weight: 600; color: var(--text); }
.adm-table .td-muted { color: var(--text-muted); }

/* ----- Themed buttons ----- */
.adm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
}
.adm-btn:focus { outline: none; }

.adm-btn-primary {
    color: #1a1410;
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    border-color: rgba(243, 156, 18, 0.5);
}
.adm-btn-primary:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(243, 156, 18, 0.25); }

.adm-btn-soft {
    color: var(--gold);
    background: rgba(243, 156, 18, 0.12);
    border-color: rgba(243, 156, 18, 0.22);
}
.adm-btn-soft:hover { background: rgba(243, 156, 18, 0.2); border-color: rgba(243, 156, 18, 0.4); }

.adm-btn-ghost {
    color: var(--text);
    background: var(--surface-hover);
    border-color: var(--border);
}
.adm-btn-ghost:hover { background: var(--bg-3); border-color: rgba(243, 156, 18, 0.3); color: var(--gold); }

.adm-btn-danger {
    color: var(--error);
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.25);
}
.adm-btn-danger:hover { background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.45); }

/* ----- Search / toolbar input wrapper ----- */
.adm-search {
    background: var(--bg-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 0.6rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.875rem;
    min-width: 240px;
}
.adm-search::placeholder { color: var(--text-muted); }
.adm-search:focus {
    outline: none;
    border-color: rgba(243, 156, 18, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.12);
}

/* =====================================================
 *  GLOBAL ADMIN TABLE THEMING
 *  Auto-themes the default CRUD tables across every admin
 *  page to match .adm-table. Excludes the custom
 *  .dash-table (dashboard) and .adm-table (already themed).
 * ===================================================== */
table:not(.adm-table):not(.dash-table) {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    font-size: 0.9rem;
    text-align: left;
    color: var(--text) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.85rem;
    overflow: visible;
}
table:not(.adm-table):not(.dash-table) thead {
    background: var(--bg-3) !important;
}
table:not(.adm-table):not(.dash-table) thead th:first-child {
    border-top-left-radius: 0.85rem;
}
table:not(.adm-table):not(.dash-table) thead th:last-child {
    border-top-right-radius: 0.85rem;
}
table:not(.adm-table):not(.dash-table) tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0.85rem;
}
table:not(.adm-table):not(.dash-table) tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0.85rem;
}
table:not(.adm-table):not(.dash-table) thead th {
    padding: 0.7rem 1.25rem !important;
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    text-align: left;
}
table:not(.adm-table):not(.dash-table) tbody tr {
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    transition: background 0.15s ease;
}
table:not(.adm-table):not(.dash-table) tbody tr:last-child {
    border-bottom: none !important;
}
table:not(.adm-table):not(.dash-table) tbody tr:hover {
    background: var(--surface-hover) !important;
}
table:not(.adm-table):not(.dash-table) tbody td {
    padding: 0.6rem 1.25rem !important;
    color: var(--text) !important;
    border: none !important;
    vertical-align: middle;
}
/* Avatar thumbnails inside table cells: align cleanly, no negative offset */
table:not(.adm-table):not(.dash-table) tbody td img[class*="rounded-full"] {
    top: 0 !important;
    vertical-align: middle;
}

/* Action cell: keep edit / dropdown buttons on ONE line, vertically aligned */
table:not(.dash-table) tbody td:last-child {
    white-space: nowrap !important;
}
table:not(.dash-table) tbody td:last-child > a,
table:not(.dash-table) tbody td:last-child > button,
table:not(.dash-table) tbody td:last-child > div {
    vertical-align: middle !important;
}

/* ----- Global themed action buttons (links/buttons only) ----- */
/* Neutral (edit / view / generate / generic blue) */
a[class*="bg-sky-"], button[class*="bg-sky-"],
a[class*="bg-blue-"], button[class*="bg-blue-"],
a[class*="bg-indigo-"], button[class*="bg-indigo-"],
a[class*="bg-cyan-"], button[class*="bg-cyan-"] {
    background: var(--surface-hover) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}
a[class*="bg-sky-"]:hover, button[class*="bg-sky-"]:hover,
a[class*="bg-blue-"]:hover, button[class*="bg-blue-"]:hover,
a[class*="bg-indigo-"]:hover, button[class*="bg-indigo-"]:hover,
a[class*="bg-cyan-"]:hover, button[class*="bg-cyan-"]:hover {
    background: var(--bg-3) !important;
    border-color: rgba(243, 156, 18, 0.4) !important;
    color: var(--gold) !important;
}

/* Danger (delete / remove) */
a[class*="bg-red-"], button[class*="bg-red-"],
a[class*="bg-rose-"], button[class*="bg-rose-"] {
    background: rgba(239, 68, 68, 0.10) !important;
    color: var(--error) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    box-shadow: none !important;
}
a[class*="bg-red-"]:hover, button[class*="bg-red-"]:hover,
a[class*="bg-rose-"]:hover, button[class*="bg-rose-"]:hover {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
}

/* Primary (create / add / save — green) → flat gold, matches Flux primary */
a[class*="bg-green-"], button[class*="bg-green-"],
a[class*="bg-emerald-"], button[class*="bg-emerald-"],
a[class*="bg-teal-"], button[class*="bg-teal-"] {
    background: var(--gold) !important;
    color: #1a1410 !important;
    border: 1px solid rgba(243, 156, 18, 0.5) !important;
    box-shadow: none !important;
}
a[class*="bg-green-"]:hover, button[class*="bg-green-"]:hover,
a[class*="bg-emerald-"]:hover, button[class*="bg-emerald-"]:hover,
a[class*="bg-teal-"]:hover, button[class*="bg-teal-"]:hover {
    filter: brightness(1.06) !important;
    box-shadow: 0 4px 14px rgba(243, 156, 18, 0.25) !important;
}

/* Keep icons inside themed buttons following the text color */
a[class*="bg-sky-"] svg, button[class*="bg-sky-"] svg,
a[class*="bg-blue-"] svg, button[class*="bg-blue-"] svg,
a[class*="bg-indigo-"] svg, button[class*="bg-indigo-"] svg,
a[class*="bg-cyan-"] svg, button[class*="bg-cyan-"] svg,
a[class*="bg-red-"] svg, button[class*="bg-red-"] svg,
a[class*="bg-rose-"] svg, button[class*="bg-rose-"] svg,
a[class*="bg-green-"] svg, button[class*="bg-green-"] svg,
a[class*="bg-emerald-"] svg, button[class*="bg-emerald-"] svg,
a[class*="bg-teal-"] svg, button[class*="bg-teal-"] svg {
    color: currentColor !important;
}

/* ----- Cohesive status / type badges (spans) ----- */
/* Soft translucent chips that keep semantic colour but fit the theme */
span[class*="bg-green-"], span[class*="bg-emerald-"] {
    background: rgba(16, 185, 129, 0.13) !important;
    color: var(--success) !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
}
span[class*="bg-blue-"], span[class*="bg-sky-"] {
    background: rgba(96, 165, 250, 0.13) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(96, 165, 250, 0.22) !important;
}
span[class*="bg-cyan-"] {
    background: rgba(45, 212, 191, 0.13) !important;
    color: #2dd4bf !important;
    border: 1px solid rgba(45, 212, 191, 0.22) !important;
}
span[class*="bg-violet-"], span[class*="bg-indigo-"], span[class*="bg-purple-"] {
    background: rgba(167, 139, 250, 0.13) !important;
    color: #a78bfa !important;
    border: 1px solid rgba(167, 139, 250, 0.22) !important;
}
span[class*="bg-pink-"], span[class*="bg-rose-"] {
    background: rgba(244, 114, 182, 0.13) !important;
    color: #f472b6 !important;
    border: 1px solid rgba(244, 114, 182, 0.22) !important;
}
span[class*="bg-yellow-"], span[class*="bg-amber-"], span[class*="bg-orange-"] {
    background: rgba(243, 156, 18, 0.13) !important;
    color: var(--gold) !important;
    border: 1px solid rgba(243, 156, 18, 0.22) !important;
}
span[class*="bg-red-"] {
    background: rgba(239, 68, 68, 0.13) !important;
    color: var(--error) !important;
    border: 1px solid rgba(239, 68, 68, 0.22) !important;
}

/* =====================================================
 *  FLUX ACCENT → GOLD
 *  Flux primary buttons use bg-[var(--color-accent)] and
 *  text-[var(--color-accent-foreground)]. Point them at gold
 *  so every Save / Submit / primary button is gold with dark
 *  text. !important wins over Flux's later-loaded defaults.
 * ===================================================== */
:root {
    --color-accent: #f39c12 !important;
    --color-accent-content: #b9770e !important;
    --color-accent-foreground: #1a1410 !important;
}
.dark {
    --color-accent: #f0c46a !important;
    --color-accent-content: #f0c46a !important;
    --color-accent-foreground: #1a1410 !important;
}

/* =====================================================
 *  PAGE HEADER HELPERS — info tooltip + filter panel
 * ===================================================== */
.info-tip { position: relative; display: inline-flex; align-items: center; cursor: pointer; color: var(--text-muted); }
.info-tip > svg { width: 18px; height: 18px; }
.info-tip:hover, .info-tip:focus { color: var(--gold); outline: none; }
.info-tip-text {
    position: absolute; left: 0; top: calc(100% + 8px);
    width: 270px; padding: 0.6rem 0.8rem;
    background: var(--bg-3); color: var(--text); border: 1px solid var(--border);
    border-radius: 0.5rem; font-size: 0.8rem; line-height: 1.45; font-weight: 400;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); z-index: 60;
    opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all 0.15s ease;
    white-space: normal;
}
.info-tip:hover .info-tip-text, .info-tip:focus .info-tip-text { opacity: 1; visibility: visible; transform: translateY(0); }

.adm-filter-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 1.1rem 1.25rem;
}
.adm-filter-label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin-bottom: 0.35rem; }
.adm-filter-input {
    width: 100%; padding: 0.55rem 0.75rem; font-size: 0.875rem;
    background: var(--bg-2); border: 1px solid var(--border); border-radius: 0.5rem; color: var(--text);
}
.adm-filter-input:focus { outline: none; border-color: rgba(243, 156, 18, 0.45); box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.12); }
.adm-filter-input::placeholder { color: var(--text-muted); }

/* ----- Tabbed page navigation ----- */
.adm-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.adm-tab {
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.adm-tab:hover { color: var(--text); }
.adm-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

/* ----- Flux checkbox / radio visibility on the very-dark admin theme ----- */
/* The visible box is the indicator; its dark border/bg (white/10) is invisible on
   near-black backgrounds. Style only the UNCHECKED indicator so Flux's checked
   gold fill and the check/dot are left untouched. */
.dark ui-checkbox:not([data-checked]) [data-flux-checkbox-indicator],
.dark ui-radio:not([data-checked]) [data-flux-radio-indicator] {
    border-color: var(--text-muted) !important;
    background-color: var(--bg-3) !important;
}
/* Checked: force the gold fill (dark check/dot sits on top) */
.dark ui-checkbox[data-checked] [data-flux-checkbox-indicator],
.dark ui-radio[data-checked] [data-flux-radio-indicator] {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
}