/* ============================================================
   delia-dark.css — DARK-MODE-ONLY theme overrides.
   Every selector is scoped under html.dark so light mode is
   completely untouched. Goal: replace Filament's default
   emerald-on-gray-900 dark mode with brand amber on near-black.
   ============================================================ */

html.dark {
    --d-bg:           #0d1117;
    --d-bg-2:         #0a0d12;
    --d-surface:      #161b22;
    --d-surface-2:    #1c2128;
    --d-border:       #30363d;
    --d-border-soft:  #21262d;
    --d-text:         #e6edf3;
    --d-text-soft:    #9aa4b2;
    --d-text-muted:   #8b949e;
    --d-accent:       #fbbf24;
    --d-accent-h:     #f59e0b;
    --d-accent-soft:  rgba(251, 191, 36, 0.12);
    --d-accent-soft2: rgba(251, 191, 36, 0.20);
    --d-success:      #10b981;
    --d-success-soft: rgba(16, 185, 129, 0.15);
    --d-danger:       #ef4444;
    --d-danger-soft:  rgba(239, 68, 68, 0.15);
    --d-info:         #3b82f6;
}

/* ───────────── Body, shell, main ───────────── */
html.dark,
html.dark body,
html.dark .filament-body,
html.dark .filament-main {
    background-color: var(--d-bg) !important;
    color: var(--d-text) !important;
}

/* ───────────── Top bar ───────────── */
html.dark .filament-main-topbar {
    background-color: var(--d-bg) !important;
    border-bottom: 1px solid var(--d-border) !important;
    box-shadow: none !important;
}

html.dark .filament-main-topbar input,
html.dark .filament-global-search input,
html.dark .filament-global-search-input input {
    background-color: var(--d-surface) !important;
    border: 1px solid var(--d-border) !important;
    color: var(--d-text) !important;
}

html.dark .filament-main-topbar input::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--d-text-muted) !important;
    opacity: 0.7 !important;
}

/* ───────────── Sidebar ───────────── */
html.dark .filament-sidebar,
html.dark aside.filament-sidebar,
html.dark .filament-sidebar-nav {
    background-color: var(--d-bg-2) !important;
    border-right: 1px solid var(--d-border) !important;
}

html.dark .filament-sidebar-item > a,
html.dark .filament-sidebar-item button,
html.dark .filament-sidebar-group-button {
    color: var(--d-text-soft) !important;
    border-left: 3px solid transparent;
    transition: background-color .15s, color .15s, border-color .15s !important;
}

html.dark .filament-sidebar-item > a svg,
html.dark .filament-sidebar-item button svg {
    color: var(--d-text-soft) !important;
}

html.dark .filament-sidebar-item > a:hover {
    background-color: var(--d-surface) !important;
    color: var(--d-accent) !important;
    border-left: 3px solid var(--d-accent-soft2) !important;
}

html.dark .filament-sidebar-item-active > a,
html.dark .filament-sidebar-item.filament-sidebar-item-active > a {
    background-color: var(--d-accent-soft) !important;
    color: var(--d-accent) !important;
    border-left: 3px solid var(--d-accent) !important;
    font-weight: 600 !important;
}

html.dark .filament-sidebar-item-active svg,
html.dark .filament-sidebar-item > a:hover svg,
html.dark .filament-sidebar-item-active a > svg {
    color: var(--d-accent) !important;
}

html.dark .filament-sidebar-group-label,
html.dark .filament-sidebar-group > div > button > span {
    color: var(--d-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
}

/* ───────────── Page header / title ───────────── */
html.dark .filament-header-heading,
html.dark .filament-page-header h1,
html.dark .filament-page > header h1 {
    color: var(--d-text) !important;
    border-left: 4px solid var(--d-accent) !important;
    padding-left: 0.75rem !important;
}

/* ───────────── Cards / widgets / sections ─────────────
   .filament-widget is the OUTER wrapper around a stats overview's
   grid of cards (and around chart/table widgets too). If we paint
   it with --d-surface AND each inner .filament-stats-card is also
   --d-surface, adjacent cards visually merge into one block —
   only the rounded-corner seams between them remain visible as
   thin vertical "lines." Keep the wrapper transparent and style
   the actual cards instead.
*/
html.dark .filament-widget {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html.dark .filament-stats-card,
html.dark .filament-stats-overview-widget-card,
html.dark .filament-card,
html.dark .filament-section,
html.dark .filament-tables-container,
html.dark .filament-forms-card,
html.dark .filament-forms-section {
    background-color: var(--d-surface) !important;
    border: 1px solid var(--d-border) !important;
    border-radius: 1rem !important;
}

html.dark .filament-stats-overview-widget-card-label,
html.dark .filament-stats-overview-widget-card > div > h2 {
    color: var(--d-text-muted) !important;
    font-weight: 500 !important;
}

html.dark .filament-stats-overview-widget-card-value {
    color: var(--d-text) !important;
}

/* ───────── PRIMARY COLOR OVERRIDE → amber in dark mode ─────────
   Filament 2 ships emerald as the primary palette. In dark mode
   we want amber/yellow. Override the bg/text/border/ring utilities
   that the compiled theme uses. We cover both the plain utilities
   and the `dark:` variants my prior transformation rewrote to
   `html.dark .dark\:*`.
*/
html.dark .bg-primary-50,    html.dark .dark\:bg-primary-50    { background-color: #fffbeb !important; }
html.dark .bg-primary-100,   html.dark .dark\:bg-primary-100   { background-color: var(--d-accent-soft) !important; }
html.dark .bg-primary-200,   html.dark .dark\:bg-primary-200   { background-color: var(--d-accent-soft2) !important; }
html.dark .bg-primary-300,   html.dark .dark\:bg-primary-300   { background-color: #fcd34d !important; }
html.dark .bg-primary-400,   html.dark .dark\:bg-primary-400   { background-color: var(--d-accent) !important; }
html.dark .bg-primary-500,   html.dark .dark\:bg-primary-500   { background-color: var(--d-accent-h) !important; }
html.dark .bg-primary-600,   html.dark .dark\:bg-primary-600   { background-color: #d97706 !important; }
html.dark .bg-primary-700,   html.dark .dark\:bg-primary-700   { background-color: #b45309 !important; }
html.dark .bg-primary-800,   html.dark .dark\:bg-primary-800   { background-color: #92400e !important; }
html.dark .bg-primary-900,   html.dark .dark\:bg-primary-900   { background-color: #78350f !important; }

html.dark .text-primary-50,  html.dark .dark\:text-primary-50  { color: #fffbeb !important; }
html.dark .text-primary-100, html.dark .dark\:text-primary-100 { color: #fef3c7 !important; }
html.dark .text-primary-200, html.dark .dark\:text-primary-200 { color: #fde68a !important; }
html.dark .text-primary-300, html.dark .dark\:text-primary-300 { color: #fcd34d !important; }
html.dark .text-primary-400, html.dark .dark\:text-primary-400 { color: var(--d-accent) !important; }
html.dark .text-primary-500, html.dark .dark\:text-primary-500 { color: var(--d-accent-h) !important; }
html.dark .text-primary-600, html.dark .dark\:text-primary-600 { color: #d97706 !important; }
html.dark .text-primary-700, html.dark .dark\:text-primary-700 { color: #b45309 !important; }

html.dark .border-primary-50  { border-color: #fffbeb !important; }
html.dark .border-primary-100 { border-color: #fef3c7 !important; }
html.dark .border-primary-200 { border-color: #fde68a !important; }
html.dark .border-primary-300 { border-color: #fcd34d !important; }
html.dark .border-primary-400 { border-color: var(--d-accent) !important; }
html.dark .border-primary-500 { border-color: var(--d-accent-h) !important; }
html.dark .border-primary-600 { border-color: #d97706 !important; }
html.dark .border-primary-700 { border-color: #b45309 !important; }

html.dark .ring-primary-500 { --tw-ring-color: var(--d-accent-h) !important; }
html.dark .ring-primary-600 { --tw-ring-color: #d97706 !important; }

html.dark .hover\:bg-primary-400:hover { background-color: var(--d-accent) !important; }
html.dark .hover\:bg-primary-500:hover { background-color: var(--d-accent-h) !important; }
html.dark .hover\:bg-primary-600:hover { background-color: #d97706 !important; }
html.dark .hover\:text-primary-500:hover { color: var(--d-accent-h) !important; }
html.dark .hover\:text-primary-600:hover { color: #d97706 !important; }

html.dark .focus\:ring-primary-500:focus,
html.dark .focus\:ring-primary-600:focus { --tw-ring-color: var(--d-accent) !important; }

html.dark .focus\:border-primary-500:focus,
html.dark .focus\:border-primary-600:focus { border-color: var(--d-accent) !important; }

/* SVG / icon currentColor on primary text */
html.dark .text-primary-500 svg,
html.dark .text-primary-600 svg,
html.dark svg.text-primary-500,
html.dark svg.text-primary-600 { color: var(--d-accent) !important; }

/* ───────────── Form inputs ───────────── */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="search"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark input[type="time"],
html.dark textarea,
html.dark select,
html.dark .filament-forms-text-input-component input,
html.dark .filament-forms-select-component select,
html.dark .filament-forms-textarea-component textarea,
html.dark .choices__inner,
html.dark .choices[data-type*="select-one"] .choices__inner {
    background-color: var(--d-surface) !important;
    border: 1px solid var(--d-border) !important;
    color: var(--d-text) !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: var(--d-accent) !important;
    box-shadow: 0 0 0 3px var(--d-accent-soft) !important;
    outline: none !important;
}

html.dark label,
html.dark .filament-forms-field-wrapper-label,
html.dark .filament-forms-field-wrapper > label {
    color: var(--d-text) !important;
}

html.dark .filament-forms-field-wrapper-hint,
html.dark .filament-forms-field-wrapper-helper-text {
    color: var(--d-text-muted) !important;
}

/* Multi-select tags (Choices.js) */
html.dark .choices__list--multiple .choices__item {
    background-color: var(--d-accent-soft) !important;
    border-color: var(--d-accent) !important;
    color: var(--d-accent) !important;
}

/* Toggle / checkbox ticks */
html.dark input[type="checkbox"]:checked,
html.dark input[type="radio"]:checked {
    background-color: var(--d-accent) !important;
    border-color: var(--d-accent) !important;
}

/* ───────────── Tabs ───────────── */
html.dark .filament-tabs {
    background-color: var(--d-surface-2) !important;
    border: 1px solid var(--d-border) !important;
    border-radius: .5rem !important;
    padding: 0.25rem !important;
}

html.dark .filament-tabs-item {
    color: var(--d-text-muted) !important;
    background-color: transparent !important;
}

html.dark .filament-tabs-item:hover {
    color: var(--d-text) !important;
    background-color: var(--d-surface) !important;
}

html.dark .filament-tabs-item.filament-tabs-item-active {
    background-color: var(--d-success) !important;
    color: white !important;
    border-radius: .375rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* ───────────── Tables ───────────── */
html.dark .filament-tables-container {
    background-color: var(--d-surface) !important;
    border: 1px solid var(--d-border) !important;
}

html.dark .filament-tables-header-cell,
html.dark thead,
html.dark thead th,
html.dark .filament-tables-table thead {
    background-color: var(--d-surface-2) !important;
    color: var(--d-text-muted) !important;
    border-bottom: 1px solid var(--d-border) !important;
}

html.dark tbody tr {
    background-color: var(--d-surface) !important;
    border-bottom: 1px solid var(--d-border-soft) !important;
}

html.dark tbody tr:hover {
    background-color: var(--d-surface-2) !important;
}

html.dark tbody td,
html.dark tbody th {
    color: var(--d-text) !important;
    border-color: var(--d-border-soft) !important;
}

/* ───────────── Badges / status pills ───────────── */
html.dark .bg-warning-100, html.dark .dark\:bg-warning-100  { background-color: var(--d-accent-soft) !important; color: var(--d-accent) !important; }
html.dark .bg-warning-500, html.dark .dark\:bg-warning-500  { background-color: var(--d-accent) !important; color: #0d1117 !important; }
html.dark .text-warning-500, html.dark .dark\:text-warning-500 { color: var(--d-accent) !important; }
html.dark .text-warning-600, html.dark .dark\:text-warning-600 { color: var(--d-accent-h) !important; }
html.dark .border-warning-500 { border-color: var(--d-accent) !important; }

html.dark .bg-success-100, html.dark .dark\:bg-success-100  { background-color: var(--d-success-soft) !important; color: var(--d-success) !important; }
html.dark .bg-success-500, html.dark .dark\:bg-success-500  { background-color: var(--d-success) !important; color: white !important; }
html.dark .text-success-500, html.dark .dark\:text-success-500 { color: var(--d-success) !important; }
html.dark .text-success-600, html.dark .dark\:text-success-600 { color: var(--d-success) !important; }

html.dark .bg-danger-100, html.dark .dark\:bg-danger-100   { background-color: var(--d-danger-soft) !important; color: var(--d-danger) !important; }
html.dark .bg-danger-500, html.dark .dark\:bg-danger-500   { background-color: var(--d-danger) !important; color: white !important; }
html.dark .text-danger-500, html.dark .dark\:text-danger-500 { color: var(--d-danger) !important; }
html.dark .text-danger-600, html.dark .dark\:text-danger-600 { color: var(--d-danger) !important; }

html.dark .bg-info-100,    html.dark .dark\:bg-info-100     { background-color: rgba(59, 130, 246, 0.15) !important; color: var(--d-info) !important; }
html.dark .text-info-500,  html.dark .dark\:text-info-500   { color: var(--d-info) !important; }

/* Filament 2 badge column wrapper */
html.dark .filament-tables-badge-column span,
html.dark .filament-tables-text-column {
    font-weight: 500 !important;
}

/* ───────────── Buttons ───────────── */
html.dark .filament-button.filament-button-color-primary,
html.dark .filament-button-color-primary {
    background-color: var(--d-accent) !important;
    color: #0d1117 !important;
    border: none !important;
    font-weight: 600 !important;
}

html.dark .filament-button.filament-button-color-primary:hover,
html.dark .filament-button-color-primary:hover {
    background-color: var(--d-accent-h) !important;
    color: #0d1117 !important;
}

html.dark .filament-button.filament-button-color-success,
html.dark .filament-button-color-success {
    background-color: var(--d-success) !important;
    color: white !important;
    border: none !important;
}

html.dark .filament-button.filament-button-color-danger,
html.dark .filament-button-color-danger {
    background-color: var(--d-danger) !important;
    color: white !important;
    border: none !important;
}

html.dark .filament-button.filament-button-color-warning,
html.dark .filament-button-color-warning {
    background-color: var(--d-accent) !important;
    color: #0d1117 !important;
    border: none !important;
}

html.dark .filament-button.filament-button-color-secondary,
html.dark .filament-button-color-secondary {
    background-color: var(--d-surface) !important;
    color: var(--d-text) !important;
    border: 1px solid var(--d-border) !important;
}

html.dark .filament-button.filament-button-color-secondary:hover {
    background-color: var(--d-surface-2) !important;
}

/* ───────── Generic gray / white background utilities ───────── */
html.dark .bg-white,    html.dark .dark\:bg-white     { background-color: var(--d-surface) !important; }
html.dark .bg-gray-50,  html.dark .dark\:bg-gray-50   { background-color: var(--d-surface-2) !important; }
html.dark .bg-gray-100, html.dark .dark\:bg-gray-100  { background-color: var(--d-surface-2) !important; }
html.dark .bg-gray-200, html.dark .dark\:bg-gray-200  { background-color: var(--d-surface-2) !important; }
html.dark .bg-gray-700, html.dark .dark\:bg-gray-700  { background-color: var(--d-surface) !important; }
html.dark .bg-gray-800, html.dark .dark\:bg-gray-800  { background-color: var(--d-surface) !important; }
html.dark .bg-gray-900, html.dark .dark\:bg-gray-900  { background-color: var(--d-bg) !important; }

html.dark .text-white,    html.dark .dark\:text-white     { color: var(--d-text) !important; }
html.dark .text-gray-100, html.dark .dark\:text-gray-100  { color: var(--d-text) !important; }
html.dark .text-gray-200, html.dark .dark\:text-gray-200  { color: var(--d-text) !important; }
html.dark .text-gray-300, html.dark .dark\:text-gray-300  { color: var(--d-text) !important; }
html.dark .text-gray-400, html.dark .dark\:text-gray-400  { color: var(--d-text-muted) !important; }
html.dark .text-gray-500, html.dark .dark\:text-gray-500  { color: var(--d-text-muted) !important; }
html.dark .text-gray-600, html.dark .dark\:text-gray-600  { color: var(--d-text-muted) !important; }
html.dark .text-gray-700, html.dark .dark\:text-gray-700  { color: var(--d-text) !important; }
html.dark .text-gray-800, html.dark .dark\:text-gray-800  { color: var(--d-text) !important; }
html.dark .text-gray-900, html.dark .dark\:text-gray-900  { color: var(--d-text) !important; }

html.dark .border-gray-100, html.dark .dark\:border-gray-100 { border-color: var(--d-border-soft) !important; }
html.dark .border-gray-200, html.dark .dark\:border-gray-200 { border-color: var(--d-border) !important; }
html.dark .border-gray-300, html.dark .dark\:border-gray-300 { border-color: var(--d-border) !important; }
html.dark .border-gray-600, html.dark .dark\:border-gray-600 { border-color: var(--d-border) !important; }
html.dark .border-gray-700, html.dark .dark\:border-gray-700 { border-color: var(--d-border) !important; }

html.dark .divide-gray-200 > * + *,
html.dark .dark\:divide-gray-700 > * + * {
    border-color: var(--d-border) !important;
}

/* ───────────── Modals / dropdowns / popovers ───────────── */
html.dark .filament-modal-window,
html.dark .filament-dropdown-list,
html.dark .filament-dropdown-panel,
html.dark .filament-notifications-dropdown,
html.dark .filament-actions-modal-window {
    background-color: var(--d-surface) !important;
    border: 1px solid var(--d-border) !important;
    color: var(--d-text) !important;
}

html.dark .filament-dropdown-list-item:hover {
    background-color: var(--d-surface-2) !important;
    color: var(--d-accent) !important;
}

/* ───────────── Avatar circle (top right) ───────────── */
html.dark .filament-avatar,
html.dark .filament-user-avatar {
    background-color: var(--d-accent) !important;
    color: #0d1117 !important;
    font-weight: 700 !important;
}

/* ───────────── Scrollbar ───────────── */
html.dark ::-webkit-scrollbar { width: 8px; height: 8px; }
html.dark ::-webkit-scrollbar-track { background: var(--d-bg); }
html.dark ::-webkit-scrollbar-thumb { background: var(--d-border); border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: var(--d-text-muted); }

/* ───────────── Links ───────────── */
html.dark a:not(.filament-button):not(.filament-sidebar-item > a):not(.filament-tabs-item):not(.filament-user-menu-item) {
    color: var(--d-accent) !important;
}

html.dark a:not(.filament-button):hover {
    color: var(--d-accent-h) !important;
}

/* ───────────── Misc ───────────── */
html.dark hr { border-color: var(--d-border) !important; }

html.dark .shadow,
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg {
    box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* Filament notifications */
html.dark .filament-notifications-notification {
    background-color: var(--d-surface) !important;
    border: 1px solid var(--d-border) !important;
    color: var(--d-text) !important;
}

/* Welcome card / pages with a featured panel */
html.dark .filament-page > div:first-child {
    background-color: transparent !important;
}