/* ============================================================
   MUSIGA Admin Panel — Custom Filament v3 Theme
   Ghana Gold (#F2C94C) + Navy (#0E0E55) sidebar
   Light content area (#F1F5F9) with white cards
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — Target HTML elements directly, not Tailwind classes
   (Alpine.js dynamically swaps classes so class-based selectors
   are unreliable. Element + attribute selectors always win.)
   ══════════════════════════════════════════════════════════════ */

/* Sidebar container */
.fi-sidebar,
.fi-sidebar-header,
[class*="fi-sidebar"] {
    background-color: #0E0E55 !important;
}

.fi-sidebar {
    border-right: 1px solid rgba(255,255,255,0.1) !important;
}

/* NUCLEAR: every element inside sidebar → white text */
.fi-sidebar *,
.fi-sidebar-nav *,
.fi-sidebar-header * {
    color: #ffffff !important;
}

/* Group section labels (CONTENT, MEMBERS etc.) — dimmed gold */
.fi-sidebar-group-label,
.fi-sidebar [class*="group-label"] {
    color: #F2C94C !important;
    opacity: 0.7 !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

/* All nav links and buttons: transparent bg, white text */
.fi-sidebar a,
.fi-sidebar button,
.fi-sidebar nav a,
.fi-sidebar nav button,
.fi-sidebar li a,
.fi-sidebar li button {
    background-color: transparent !important;
    color: rgba(255,255,255,0.85) !important;
    border-radius: 0.5rem !important;
    border-left: 3px solid transparent !important;
    transition: all 150ms ease !important;
}

/* Kill ALL Tailwind bg-gray and bg-white inside sidebar */
.fi-sidebar [class*="bg-gray"],
.fi-sidebar [class*="bg-white"],
.fi-sidebar [class*="text-gray"],
.fi-sidebar [class*="text-zinc"],
.fi-sidebar [class*="text-slate"] {
    background-color: transparent !important;
    color: rgba(255,255,255,0.85) !important;
}

/* Hover state */
.fi-sidebar a:hover,
.fi-sidebar button:hover,
.fi-sidebar nav a:hover,
.fi-sidebar nav button:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

/* Active page — gold left border + subtle gold tint */
.fi-sidebar a[aria-current="page"],
.fi-sidebar button[aria-current="page"],
.fi-sidebar .fi-active,
.fi-sidebar [class*="fi-active"],
.fi-sidebar a.fi-active,
.fi-sidebar button.fi-active {
    background-color: rgba(242,201,76,0.12) !important;
    border-left-color: #F2C94C !important;
    color: #ffffff !important;
}

/* Collapse / toggle sidebar button */
.fi-sidebar-close-btn,
.fi-sidebar-collapse-btn {
    color: rgba(255,255,255,0.6) !important;
    background-color: transparent !important;
}

.fi-sidebar-close-btn:hover,
.fi-sidebar-collapse-btn:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

/* Sidebar icons — force visible on all items including grouped sub-items */
.fi-sidebar-item-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
}

.fi-sidebar svg,
.fi-sidebar-item-icon svg {
    display: block !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    color: rgba(255,255,255,0.65) !important;
    flex-shrink: 0 !important;
}

/* Icon colour on hover and active */
.fi-sidebar a:hover .fi-sidebar-item-icon svg,
.fi-sidebar button:hover .fi-sidebar-item-icon svg,
.fi-sidebar a[aria-current="page"] .fi-sidebar-item-icon svg,
.fi-sidebar .fi-active .fi-sidebar-item-icon svg,
.fi-sidebar a:hover svg,
.fi-sidebar button:hover svg,
.fi-sidebar a[aria-current="page"] svg,
.fi-sidebar .fi-active svg {
    color: #ffffff !important;
}

/* Group header icons */
.fi-sidebar-group-label svg,
.fi-sidebar [class*="fi-sidebar-group"] svg {
    color: #F2C94C !important;
    opacity: 0.8 !important;
}

/* Scrollbar */
.fi-sidebar::-webkit-scrollbar { width: 3px; }
.fi-sidebar::-webkit-scrollbar-track { background: #0E0E55; }
.fi-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
.fi-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

/* Brand/logo in sidebar header — keep original logo colours */
.fi-sidebar-header img { filter: none !important; }
.fi-sidebar .fi-logo { color: #ffffff !important; }


/* ══════════════════════════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════════════════════════ */
.fi-topbar,
.fi-topbar nav {
    background-color: #ffffff !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.06) !important;
}

.fi-user-menu-trigger { color: #374151 !important; }
.fi-user-menu-trigger:hover { background-color: #F3F4F6 !important; }


/* ══════════════════════════════════════════════════════════════
   MAIN CONTENT AREA
   ══════════════════════════════════════════════════════════════ */
.fi-main,
.fi-main-ctn,
.fi-body,
body {
    background-color: #F1F5F9 !important;
}

.fi-header-heading {
    color: #1C2434 !important;
    font-weight: 700 !important;
}

.fi-header-subheading { color: #637381 !important; }


/* ══════════════════════════════════════════════════════════════
   WHITE CARDS & SECTIONS
   ══════════════════════════════════════════════════════════════ */
.fi-section,
.fi-card,
.fi-wi-stats-overview-stat {
    background-color: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.fi-section-header-heading { color: #1C2434 !important; font-weight: 600 !important; }
.fi-section-header-description { color: #637381 !important; }

/* Stats */
.fi-wi-stats-overview-stat-label { color: #637381 !important; font-size: 0.875rem !important; }
.fi-wi-stats-overview-stat-value { color: #1C2434 !important; font-size: 1.875rem !important; font-weight: 700 !important; }
.fi-wi-stats-overview-stat-description { color: #8D99AE !important; font-size: 0.75rem !important; }


/* ══════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════ */
.fi-ta-ctn {
    background-color: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
}

.fi-ta-header-ctn { background-color: #ffffff !important; border-bottom: 1px solid #E2E8F0 !important; }
thead tr { background-color: #F8FAFC !important; }
.fi-ta-header-cell-label { color: #1C2434 !important; font-weight: 600 !important; font-size: 0.8125rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
.fi-ta-cell { color: #374151 !important; }
.fi-ta-row:hover td { background-color: #F8FAFC !important; }
.fi-ta-empty-state-label { color: #637381 !important; }
.fi-ta-actions .fi-btn { font-size: 0.75rem !important; padding: 0.25rem 0.625rem !important; }

/* Table search */
.fi-ta-search-field input { border-color: #D1D5DB !important; }
.fi-ta-search-field input:focus { border-color: #F2C94C !important; box-shadow: 0 0 0 3px rgba(242,201,76,0.2) !important; }

/* Filters */
.fi-ta-filters-form { background-color: #F8FAFC !important; border: 1px solid #E2E8F0 !important; border-radius: 0.75rem !important; }


/* ══════════════════════════════════════════════════════════════
   BUTTONS — Ghana Gold primary
   ══════════════════════════════════════════════════════════════ */
.fi-btn-primary,
button[class*="fi-btn"][class*="primary"],
[class*="fi-btn-color-primary"] {
    background-color: #F2C94C !important;
    color: #1C2434 !important;
    border-color: #F2C94C !important;
    font-weight: 600 !important;
}

.fi-btn-primary:hover,
button[class*="fi-btn"][class*="primary"]:hover {
    background-color: #E6B800 !important;
    border-color: #E6B800 !important;
    color: #1C2434 !important;
}

.fi-btn-primary:focus { box-shadow: 0 0 0 3px rgba(242,201,76,0.4) !important; }

.fi-btn-secondary { background-color: #ffffff !important; color: #374151 !important; border-color: #D1D5DB !important; }
.fi-btn-secondary:hover { background-color: #F9FAFB !important; border-color: #9CA3AF !important; }


/* ══════════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════════ */
.fi-input, .fi-select, .fi-textarea {
    border-color: #D1D5DB !important;
    border-radius: 0.5rem !important;
    color: #1C2434 !important;
    background-color: #ffffff !important;
}

.fi-input:focus, .fi-select:focus, .fi-textarea:focus {
    border-color: #F2C94C !important;
    box-shadow: 0 0 0 3px rgba(242,201,76,0.2) !important;
    outline: none !important;
}

.fi-fo-field-wrp-label label { color: #374151 !important; font-weight: 500 !important; font-size: 0.875rem !important; }
.fi-fo-helper-text { color: #6B7280 !important; font-size: 0.75rem !important; }

input[type="checkbox"]:checked, input[type="radio"]:checked { background-color: #F2C94C !important; border-color: #F2C94C !important; }
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: 0 0 0 3px rgba(242,201,76,0.3) !important; }
.fi-fo-toggle button[role="switch"][aria-checked="true"] { background-color: #F2C94C !important; }

.fi-global-search-field input { background-color: #F1F5F9 !important; border-color: #E2E8F0 !important; color: #374151 !important; }
.fi-global-search-field input:focus { border-color: #F2C94C !important; box-shadow: 0 0 0 3px rgba(242,201,76,0.2) !important; }


/* ══════════════════════════════════════════════════════════════
   BADGES, TABS, MODALS, PAGINATION
   ══════════════════════════════════════════════════════════════ */
.fi-badge-color-primary { background-color: rgba(242,201,76,0.15) !important; color: #92600A !important; }
.fi-badge-color-success { background-color: rgba(33,150,83,0.1) !important; color: #219653 !important; }
.fi-badge-color-danger { background-color: rgba(206,17,38,0.1) !important; color: #CE1126 !important; }
.fi-badge-color-warning { background-color: rgba(245,158,11,0.1) !important; color: #B45309 !important; }
.fi-badge-color-gray { background-color: #F3F4F6 !important; color: #6B7280 !important; }

.fi-tabs-tab[aria-selected="true"] { color: #F2C94C !important; border-bottom-color: #F2C94C !important; }
.fi-tabs-tab:hover { color: #374151 !important; }

.fi-pagination-item-btn[aria-current="page"] { background-color: #F2C94C !important; border-color: #F2C94C !important; color: #1C2434 !important; font-weight: 600 !important; }
.fi-pagination-item-btn:hover { background-color: #F8FAFC !important; }

.fi-modal-window { background-color: #ffffff !important; border-radius: 1rem !important; box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important; }
.fi-modal-header { border-bottom: 1px solid #E2E8F0 !important; padding: 1.25rem 1.5rem !important; }
.fi-modal-heading { color: #1C2434 !important; font-weight: 700 !important; font-size: 1.125rem !important; }
.fi-modal-footer { border-top: 1px solid #E2E8F0 !important; background-color: #F8FAFC !important; padding: 1rem 1.5rem !important; }

.fi-dropdown-panel { background-color: #ffffff !important; border: 1px solid #E2E8F0 !important; border-radius: 0.75rem !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; }
.fi-dropdown-list-item-label { color: #374151 !important; }
.fi-dropdown-list-item-btn:hover { background-color: #F8FAFC !important; }

.fi-no-notification { background-color: #ffffff !important; border: 1px solid #E2E8F0 !important; border-radius: 0.75rem !important; }
.fi-no-notification-title { color: #1C2434 !important; font-weight: 600 !important; }
.fi-no-notification-body { color: #637381 !important; }

.fi-loading-indicator { color: #F2C94C !important; }