/*
 * v11 Super Admin Theme — ARKIV Media Systems
 *
 * Overrides Filament's default active states to use neutral gray (#6b7280)
 * instead of blue. ARKIV nav sub-items retain purple accent (#7c3aed).
 *
 * Spec: UX_CONFORMANCE_V11.md §9, UX_CONFORMANCE_STATUS.md §4
 */

/* ─── Shell ──────────────────────────────────────────────────────── */
body {
    background: #f9fafb;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 13px;
}

/* ─── Sidebar chrome ─────────────────────────────────────────────── */
.fi-sidebar {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    background: #fff;
    border-right: 0.5px solid #e5e7eb;
}

/* SA platform header in sidebar */
.sa-sidebar-header {
    padding: 16px 14px 12px;
    border-bottom: 0.5px solid #e5e7eb;
}

.sa-sidebar-header .sa-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sa-sidebar-header .sa-brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.sa-sidebar-header .sa-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sa-sidebar-header .sa-brand-name {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    letter-spacing: 0.3px;
}

.sa-sidebar-header .sa-brand-role {
    font-size: 10px;
    color: #6b7280;
    font-weight: 500;
}

/* ─── Topbar ─────────────────────────────────────────────────────── */
.fi-topbar {
    border-bottom: 0.5px solid #e5e7eb;
}

/* ─── Neutral gray active states (override Filament primary/blue) ── */

/* Sidebar nav items — active state: gray text + light gray bg */
.fi-sidebar-item-active,
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-active > a,
.fi-sidebar-item-active .fi-sidebar-item-label {
    color: #374151 !important;
    background-color: #f3f4f6 !important;
}

/* Sidebar nav item active left border indicator */
.fi-sidebar-item-active .fi-sidebar-item-button::before {
    background-color: #6b7280 !important;
}

/* Inactive nav items */
.fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-label {
    color: #6b7280;
}

.fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-icon {
    color: #9ca3af;
}

/* Nav section labels */
.fi-sidebar-group-label {
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #9ca3af !important;
}

/* ─── ARKIV group — purple accent ────────────────────────────────── */
.arkiv-nav-group .fi-sidebar-item-active,
.arkiv-nav-group .fi-sidebar-item-active .fi-sidebar-item-button,
.arkiv-nav-group .fi-sidebar-item-active > a,
.arkiv-nav-group .fi-sidebar-item-active .fi-sidebar-item-label {
    color: #7c3aed !important;
    background-color: #f5f3ff !important;
}

.arkiv-nav-group .fi-sidebar-item-active .fi-sidebar-item-button::before {
    background-color: #7c3aed !important;
}

.arkiv-nav-group .fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-icon {
    color: #7c3aed;
    opacity: 0.5;
}

/* ─── News Intelligence group divider (keep from original) ───────── */
.ni-nav-group {
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 2px solid rgba(99, 102, 241, 0.3) !important;
}

/* ─── Page content ───────────────────────────────────────────────── */
.fi-main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 10px !important;
}

/* Role pill in user menu dropdown */
.sa-role-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    background: #f3f4f6;
    color: #6b7280;
    letter-spacing: 0.3px;
}

/* ─── Override Filament's primary color accent in various spots ──── */

/* Breadcrumb current page */
.fi-breadcrumbs li:last-child span {
    color: #111827 !important;
    font-weight: 500;
}

/* Table header sort indicators and active states */
.fi-ta-header-cell-sort-indicator {
    color: #6b7280 !important;
}

/* Badge / pill overrides for SA context — keep primary as gray */
.fi-badge-primary {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
}

/* ─── Responsive: off-canvas sidebar below 768px (CLAUDE.md §3.9) ─── */
@media (max-width: 767px) {
    /* Slide sidebar off-screen by default; .fi-sidebar-open reveals it.
       Mirrors the pattern in v11-theme.css (publisher panel) so SA users
       still have navigation on mobile. */
    .fi-sidebar {
        position: fixed !important;
        left: -210px !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 210px !important;
        min-width: 210px !important;
        max-width: 210px !important;
        z-index: 200 !important;
        transition: left 0.25s ease !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    .fi-sidebar.fi-sidebar-open {
        left: 0 !important;
    }

    .fi-main {
        margin-left: 0 !important;
    }

    .sa-sidebar-header {
        padding: 12px 10px 8px;
    }

    /* Touch targets: minimum 44x44 for sidebar items on mobile */
    .fi-sidebar-item > a,
    .fi-sidebar-item > button {
        min-height: 44px !important;
    }
}