/*
 * LitmuSuite Admin Dark Theme
 * Filament v3 Custom Theme — Slate 950 base with modular accent colors
 *
 * Design System:
 * - Backgrounds: Slate 950 (body) → 900 (sidebar/card) → 800 (elevated)
 * - Text: Slate 100 (primary) → 400 (secondary) → 500 (muted)
 * - Borders: Slate 700 (default) → 800 (subtle) → 600 (hover)
 * - Accents: Blue (Sites), Emerald (Campaigns), Violet (Unified)
 *
 * All colors use CSS custom properties for consistency and maintainability.
 */

:root {
    /* Backgrounds */
    --bg-body:        #020617;
    --bg-sidebar:     #0F172A;
    --bg-card:        #0F172A;
    --bg-elevated:    #1E293B;
    --bg-hover:       #334155;
    --bg-active:      rgba(37, 99, 235, 0.08);

    /* Text */
    --text-primary:   #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted:     #64748B;

    /* Borders */
    --border-default: #334155;
    --border-subtle:  #1E293B;
    --border-hover:   #475569;

    /* Accents */
    --accent-blue:    #2563EB;
    --accent-emerald: #059669;
    --accent-violet:  #7C3AED;
    --accent-rose:    #E11D48;
    --accent-amber:   #F59E0B;
    --accent-cyan:    #06B6D4;

    /* Radius */
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;

    /* Shadows */
    --shadow-card:    0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-elevated: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-modal:   0 12px 40px rgba(0,0,0,0.5);
}

/* =================================================================
   BODY & PAGE LAYOUT
   ================================================================= */

.fi-body {
    background: var(--bg-body) !important;
    color: var(--text-primary) !important;
}

.dark .fi-body {
    background: var(--bg-body) !important;
    color: var(--text-primary) !important;
}

/* =================================================================
   SIDEBAR
   ================================================================= */

.fi-sidebar {
    background: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border-default) !important;
}

.fi-sidebar-nav-groups {
    /* Sidebar group container */
}

.fi-sidebar-group-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted) !important;
    font-weight: 700;
}

.fi-sidebar-item {
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.15s ease;
    margin: 4px 8px;
    padding: 10px 12px;
}

.fi-sidebar-item:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    transform: translateX(2px);
}

.fi-sidebar-item-active {
    background: var(--bg-active) !important;
    color: var(--accent-blue) !important;
    border-left: 2px solid var(--accent-blue) !important;
    padding-left: 10px;
    font-weight: 600;
}

/* Product switcher — Campaigns mode override */
[data-product="campaigns"] .fi-sidebar-item-active {
    color: var(--accent-emerald) !important;
    border-left-color: var(--accent-emerald) !important;
}

/* Product switcher — Unified mode override */
[data-product="all"] .fi-sidebar-item-active {
    color: var(--accent-violet) !important;
    border-left-color: var(--accent-violet) !important;
}

/* =================================================================
   TOPBAR
   ================================================================= */

.fi-topbar {
    background: var(--bg-sidebar) !important;
    border-bottom: 1px solid var(--border-default) !important;
}

.fi-topbar-logo {
    color: var(--text-primary) !important;
}

/* =================================================================
   CARDS & SECTIONS
   ================================================================= */

.fi-section,
.fi-wi-stats-overview-stat,
.fi-card,
.fi-section-header {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
}

/* =================================================================
   TABLES
   ================================================================= */

.fi-ta {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}

.fi-ta-header-cell {
    background: var(--bg-elevated) !important;
    color: var(--text-muted) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    border-bottom: 1px solid var(--border-default) !important;
    padding: 12px !important;
}

.fi-ta-row {
    border-bottom: 1px solid var(--border-subtle) !important;
    transition: background 0.15s ease;
}

.fi-ta-row:hover {
    background: var(--bg-hover) !important;
}

/* Striped rows */
.fi-ta-row:nth-child(even) {
    background: rgba(30, 41, 59, 0.3) !important;
}

.fi-ta-row:nth-child(even):hover {
    background: var(--bg-hover) !important;
}

.fi-ta-cell {
    color: var(--text-secondary) !important;
    padding: 12px !important;
    border: none !important;
}

.fi-ta-cell-action {
    color: var(--accent-blue) !important;
}

/* =================================================================
   FORM INPUTS
   ================================================================= */

.fi-input,
.fi-select,
.fi-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
textarea,
select {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    transition: all 0.15s ease;
}

.fi-input:focus,
.fi-select:focus,
.fi-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
    outline: none !important;
}

.fi-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}

.fi-input:disabled,
.fi-select:disabled,
.fi-textarea:disabled {
    background: rgba(30, 41, 59, 0.5) !important;
    color: var(--text-muted) !important;
    opacity: 0.6 !important;
}

/* Label styling */
.fi-form-field-label,
label {
    color: var(--text-primary) !important;
    font-weight: 600;
    font-size: 13px;
}

.fi-form-field-hint,
.fi-form-field-label-hint,
.fi-form-field-description {
    color: var(--text-muted) !important;
    font-size: 12px;
}

/* Error state */
.fi-input-error,
.fi-select-error,
.fi-textarea-error,
input.fi-input-error,
select.fi-select-error,
textarea.fi-textarea-error {
    border-color: var(--accent-rose) !important;
    background: rgba(225, 29, 72, 0.08) !important;
}

.fi-input-error:focus,
input.fi-input-error:focus {
    box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.2) !important;
}

/* =================================================================
   BUTTONS
   ================================================================= */

/* Primary Button */
.fi-btn-primary,
button.fi-btn-primary,
a.fi-btn-primary {
    background: var(--accent-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 16px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    transition: all 0.15s ease;
}

.fi-btn-primary:hover,
button.fi-btn-primary:hover,
a.fi-btn-primary:hover {
    background: #1D4ED8 !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
    transform: translateY(-2px);
}

.fi-btn-primary:active,
button.fi-btn-primary:active,
a.fi-btn-primary:active {
    transform: translateY(0);
}

/* Danger Button */
.fi-btn-danger,
button.fi-btn-danger,
a.fi-btn-danger {
    background: var(--accent-rose) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25);
    transition: all 0.15s ease;
}

.fi-btn-danger:hover,
button.fi-btn-danger:hover,
a.fi-btn-danger:hover {
    background: #BE123C !important;
    box-shadow: 0 6px 16px rgba(225, 29, 72, 0.35);
}

/* Secondary/Ghost Button */
.fi-btn-color-gray,
.fi-btn-secondary,
button.fi-btn-color-gray {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 500;
    transition: all 0.15s ease;
}

.fi-btn-color-gray:hover,
button.fi-btn-color-gray:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-hover) !important;
}

/* =================================================================
   MODALS & SLIDE-OVERS
   ================================================================= */

.fi-modal-window,
.fi-modal-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-modal) !important;
}

.fi-modal-header {
    border-bottom: 1px solid var(--border-default) !important;
    padding: 16px !important;
}

.fi-modal-header-title {
    color: var(--text-primary) !important;
    font-weight: 700;
    font-size: 16px;
}

.fi-modal-close-button {
    color: var(--text-muted) !important;
    transition: color 0.15s ease;
}

.fi-modal-close-button:hover {
    color: var(--text-primary) !important;
}

.fi-modal-footer {
    border-top: 1px solid var(--border-default) !important;
    background: var(--bg-elevated) !important;
    padding: 12px 16px !important;
}

/* =================================================================
   STAT WIDGETS (MISSION CONTROL)
   ================================================================= */

.fi-wi-stats-overview-stat {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
    padding: 16px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated) !important;
}

.fi-wi-stats-overview-stat-value {
    color: var(--text-primary) !important;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
}

.fi-wi-stats-overview-stat-label {
    color: var(--text-muted) !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-top: 8px;
}

.fi-wi-stats-overview-stat-description {
    color: var(--text-secondary) !important;
    font-size: 13px;
    margin-top: 4px;
}

/* =================================================================
   BADGES
   ================================================================= */

.fi-badge {
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    padding: 4px 10px;
    border: none;
}

.fi-badge-success {
    background: rgba(5, 150, 105, 0.15) !important;
    color: #34D399 !important;
}

.fi-badge-danger {
    background: rgba(225, 29, 72, 0.15) !important;
    color: #FB7185 !important;
}

.fi-badge-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #FBBF24 !important;
}

.fi-badge-info {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #60A5FA !important;
}

.fi-badge-secondary {
    background: rgba(148, 163, 184, 0.15) !important;
    color: var(--text-secondary) !important;
}

/* =================================================================
   TABS
   ================================================================= */

.fi-tabs-tab {
    color: var(--text-muted) !important;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    padding: 12px 16px;
    font-weight: 500;
}

.fi-tabs-tab:hover {
    color: var(--text-secondary) !important;
}

.fi-tabs-tab-active {
    color: var(--accent-blue) !important;
    border-bottom-color: var(--accent-blue) !important;
    font-weight: 600;
}

/* Campaigns mode override */
[data-product="campaigns"] .fi-tabs-tab-active {
    color: var(--accent-emerald) !important;
    border-bottom-color: var(--accent-emerald) !important;
}

/* Unified mode override */
[data-product="all"] .fi-tabs-tab-active {
    color: var(--accent-violet) !important;
    border-bottom-color: var(--accent-violet) !important;
}

/* =================================================================
   NOTIFICATIONS & TOASTS
   ================================================================= */

.fi-notification {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-modal) !important;
    color: var(--text-primary) !important;
}

.fi-notification-success {
    border-left-color: #34D399 !important;
}

.fi-notification-danger {
    border-left-color: #FB7185 !important;
}

.fi-notification-warning {
    border-left-color: #FBBF24 !important;
}

.fi-notification-info {
    border-left-color: #60A5FA !important;
}

/* =================================================================
   BREADCRUMBS
   ================================================================= */

.fi-breadcrumbs {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
}

.fi-breadcrumbs-item {
    color: var(--text-muted) !important;
    font-size: 13px;
    transition: color 0.15s ease;
}

.fi-breadcrumbs-item:hover {
    color: var(--text-secondary) !important;
}

.fi-breadcrumbs-item:last-child {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.fi-breadcrumbs-separator {
    color: var(--text-muted) !important;
    opacity: 0.5;
}

/* =================================================================
   PAGINATION
   ================================================================= */

.fi-pagination-item {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
}

.fi-pagination-item:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.fi-pagination-item-active {
    background: var(--accent-blue) !important;
    color: white !important;
    border-color: var(--accent-blue) !important;
    font-weight: 600;
}

/* =================================================================
   EMPTY STATES
   ================================================================= */

.fi-ta-empty-state,
.fi-empty-state {
    color: var(--text-muted) !important;
    padding: 32px 16px;
    text-align: center;
}

.fi-ta-empty-state-icon,
.fi-empty-state-icon {
    color: var(--text-muted) !important;
    opacity: 0.3;
    font-size: 48px;
    margin-bottom: 16px;
}

.fi-ta-empty-state-title,
.fi-empty-state-title {
    color: var(--text-secondary) !important;
    font-size: 14px;
    font-weight: 600;
}

/* =================================================================
   DROPDOWNS & MENUS
   ================================================================= */

.fi-dropdown-menu,
[role="menu"],
.fi-menu {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-modal) !important;
}

.fi-dropdown-item,
[role="menuitem"] {
    color: var(--text-secondary) !important;
    padding: 10px 12px;
    font-size: 13px;
    transition: all 0.15s ease;
}

.fi-dropdown-item:hover,
[role="menuitem"]:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* =================================================================
   CHECKBOXES & RADIO BUTTONS
   ================================================================= */

.fi-checkbox,
.fi-radio,
input[type="checkbox"],
input[type="radio"] {
    border: 1px solid var(--border-default) !important;
    background: var(--bg-elevated) !important;
}

.fi-checkbox:checked,
.fi-radio:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
}

/* =================================================================
   TOGGLES
   ================================================================= */

.fi-toggle {
    background: var(--bg-hover) !important;
    border: 1px solid var(--border-default) !important;
}

.fi-toggle-checked {
    background: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
}

/* =================================================================
   INFOLIST (KEY-VALUE DISPLAY)
   ================================================================= */

.fi-infolist {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
}

.fi-infolist-entry-label {
    color: var(--text-muted) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.fi-infolist-entry-value {
    color: var(--text-primary) !important;
    font-weight: 600;
    margin-top: 4px;
}

/* =================================================================
   ICONS
   ================================================================= */

.fi-icon,
[class*="fi-icon"],
svg.fi-icon {
    color: currentColor;
}

/* Muted icons */
.fi-icon-muted {
    color: var(--text-muted) !important;
}

/* =================================================================
   PRODUCT MODULE COLOR OVERRIDES
   ================================================================= */

/* Sites Mode (Blue) */
[data-product="sites"] .fi-btn-primary {
    background: var(--accent-blue) !important;
}

[data-product="sites"] .fi-btn-primary:hover {
    background: #1D4ED8 !important;
}

[data-product="sites"] .fi-tabs-tab-active {
    color: var(--accent-blue) !important;
    border-bottom-color: var(--accent-blue) !important;
}

/* Campaigns Mode (Emerald) */
[data-product="campaigns"] .fi-btn-primary {
    background: var(--accent-emerald) !important;
}

[data-product="campaigns"] .fi-btn-primary:hover {
    background: #047857 !important;
}

[data-product="campaigns"] .fi-tabs-tab-active {
    color: var(--accent-emerald) !important;
    border-bottom-color: var(--accent-emerald) !important;
}

/* All Mode (Violet) */
[data-product="all"] .fi-btn-primary {
    background: var(--accent-violet) !important;
}

[data-product="all"] .fi-btn-primary:hover {
    background: #6D28D9 !important;
}

[data-product="all"] .fi-tabs-tab-active {
    color: var(--accent-violet) !important;
    border-bottom-color: var(--accent-violet) !important;
}

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

.dark {
    color-scheme: dark;
}

/* Reset any Tailwind conflicts */
/* .dark .bg-white { DISABLED - breaks login card
    background: var(--bg-card) !important;
}

.dark .bg-gray-50 {
    background: var(--bg-elevated) !important;
}

.dark .bg-gray-100 {
    background: var(--bg-hover) !important;
}

.dark .text-black {
    color: var(--text-primary) !important;
}

.dark .text-gray-600 {
    color: var(--text-secondary) !important;
}

.dark .text-gray-900 {
    color: var(--text-muted) !important;
}

.dark .border-gray-200 {
    border-color: var(--border-default) !important;
}

/* =================================================================
   FOCUS STATES (ACCESSIBILITY)
   ================================================================= */

:focus-visible {
    outline: 2px solid var(--accent-blue) !important;
    outline-offset: 2px !important;
}

.fi-input:focus-visible,
.fi-select:focus-visible,
.fi-textarea:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}

/* =================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================= */

@media (max-width: 768px) {
    .fi-sidebar {
        width: 280px;
    }

    .fi-topbar {
        padding: 12px;
    }

    .fi-section {
        padding: 12px;
    }

    .fi-btn-primary,
    .fi-btn-danger {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* =================================================================
   PRINT STYLES
   ================================================================= */

@media print {
    .fi-sidebar,
    .fi-topbar {
        display: none !important;
    }

    .fi-page {
        background: white !important;
    }

    .fi-card,
    .fi-section {
        background: white !important;
        border: 1px solid #ccc !important;
    }

    body, .fi-body {
        color: #000 !important;
    }
}

/* =================================================================
   LOGIN / SIMPLE LAYOUT FIX
   Prevent dark theme from making login form invisible
   ================================================================= */

.fi-simple-layout {
    background: var(--bg-body) !important;
}

.fi-simple-main {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: var(--shadow-modal) !important;
}

.fi-simple-header-heading {
    color: var(--text-primary) !important;
}

.fi-simple-header-subheading {
    color: var(--text-secondary) !important;
}

.fi-simple-page .fi-form-actions button {
    background: var(--accent-blue) !important;
    color: white !important;
}

/* Fix: do NOT override bg-white globally - it breaks login card */
.dark .fi-simple-main.bg-white {
    background: var(--bg-elevated) !important;
}