/* ==========================================================================
   PITS Billing — Premium Visual System v4
   Built from ZREV 4-agent panel findings
   !important migration: 2026-03-09
   Strategy: body-prefixed selectors for specificity 0,2,0 (beats Tailwind 0,1,0)
   
   Design tokens:
     Sidebar:    #0f172a (slate-900, solid)
     Surface:    #f1f5f9 (slate-100)
     Card:       #ffffff
     Border:     #e2e8f0 (slate-200)
     Primary:    #4f46e5 (indigo-700)
     Accent:     #6366f1 (indigo-500)
     Text:       #0f172a (slate-900)
     Muted:      #64748b (slate-500)
   ========================================================================== */

/* ─── DESIGN TOKENS ─────────────────────────────────────────────────────── */

:root {
    --pits-sidebar-bg: #0f172a;
    --pits-sidebar-text: #e2e8f0;
    --pits-sidebar-muted: #94a3b8;
    --pits-sidebar-icon: #cbd5e1;
    --pits-sidebar-active: #818cf8;
    --pits-surface: #f1f5f9;
    --pits-border: #e2e8f0;
    --pits-border-light: #f1f5f9;
    --pits-text: #0f172a;
    --pits-text-secondary: #475569;
    --pits-text-muted: #64748b;
    --pits-primary: #4f46e5;
    --pits-primary-light: #818cf8;
    --pits-primary-bg: #eef2ff;
    --pits-hover-bg: #eef2ff;
    --pits-zebra-bg: #f8fafc;
    --pits-shadow: 0 1px 3px rgba(0,0,0,0.06);
    --pits-shadow-hover: 0 4px 12px rgba(0,0,0,0.08);
    --pits-radius-card: 0.75rem;
    --pits-radius-btn: 0.5rem;
    --pits-radius-badge: 9999px;
    --pits-transition: 150ms ease;
}


/* ─── SIDEBAR: Solid dark slate, neutral text (P1 CRITICAL) ─────────────── */
/* Filament applies dark: Tailwind variants on sidebar — body prefix gives 0,2,0 specificity */

body .fi-sidebar {
    background: var(--pits-sidebar-bg) !important;
    border-right: 1px solid rgba(255,255,255,0.06);
}

body .fi-sidebar .fi-sidebar-nav {
    background: transparent;
}

body .fi-sidebar-header {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 1.125rem 1rem;
}

body .fi-logo,
body .fi-sidebar-header a,
body .fi-sidebar-header span {
    color: var(--pits-surface);
}

/* Group labels — muted slate, !important needed: Filament renders text-gray-500 via Tailwind utility */
body .fi-sidebar-group-label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pits-sidebar-muted) !important;
    padding: 1rem 1rem 0.375rem;
    font-weight: 600;
}

/* Group header button text (group label span) — same override needed */
body .fi-sidebar-group-btn .fi-sidebar-group-label,
body .fi-sidebar .fi-sidebar-group-btn span {
    color: var(--pits-sidebar-muted) !important;
}

/* Nav items — slate-200, 12.55:1 contrast */
body .fi-sidebar-item a,
body .fi-sidebar-item button,
body .fi-sidebar-item-btn {
    color: var(--pits-sidebar-text);
    border-radius: var(--pits-radius-btn);
    margin: 1px 0.625rem;
    padding: 0.5rem 0.75rem;
    transition: all var(--pits-transition);
    border-left: 3px solid transparent;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Item label span — !important: Filament renders text-gray-700 via Tailwind utility class */
body .fi-sidebar-item-label,
body .fi-sidebar .fi-sidebar-item-label,
body .fi-sidebar span.fi-sidebar-item-label,
.fi-sidebar-item .fi-sidebar-item-label.text-gray-700 {
    color: var(--pits-sidebar-text) !important;
}

/* Force all text inside sidebar to inherit white unless specifically styled */
body .fi-sidebar .fi-sidebar-nav a,
body .fi-sidebar .fi-sidebar-nav button,
body .fi-sidebar .fi-sidebar-nav span:not(.fi-badge-label):not([class*="fi-badge"]) {
    color: var(--pits-sidebar-text) !important;
}

/* Sidebar navigation badges — higher contrast for readability */
body .fi-sidebar .fi-badge {
    font-weight: 700 !important;
    font-size: 0.6875rem !important;
    min-width: 1.5rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Group label text override — covers all Tailwind gray variants */
body .fi-sidebar .fi-sidebar-group-label,
.fi-sidebar-group-label.text-gray-500,
.fi-sidebar-group-label.text-gray-600 {
    color: var(--pits-sidebar-muted) !important;
}

/* Hover — visible indicator with left accent */
body .fi-sidebar-item a:hover,
body .fi-sidebar-item button:hover,
body .fi-sidebar-item-btn:hover {
    background: rgba(255,255,255,0.07);
    color: #fff;
    border-left-color: rgba(165,180,252,0.4);
}

body .fi-sidebar-item a:hover .fi-sidebar-item-label,
body .fi-sidebar-item button:hover .fi-sidebar-item-label,
body .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    color: #fff !important;
}

/* Active item — indigo accent bar */
/* !important: needed because Filament applies bg/text via Alpine.js x-bind:class on active state */
body .fi-sidebar-item-active a,
body .fi-sidebar-item-active button,
body .fi-sidebar-item-active .fi-sidebar-item-btn,
body .fi-active > a,
body .fi-active > button {
    background: rgba(99, 102, 241, 0.12) !important;
    color: var(--pits-surface) !important;
    font-weight: 600;
    border-left: 3px solid var(--pits-sidebar-active) !important;
}

/* Active label — !important: Filament applies text-primary-600 via Tailwind on active items */
body .fi-sidebar-item-active .fi-sidebar-item-label,
body .fi-active .fi-sidebar-item-label {
    color: var(--pits-sidebar-active) !important;
}

/* Icons — slate-300, 10.77:1 contrast */
/* !important: Filament renders text-gray-400 via Tailwind utility on icons */
body .fi-sidebar-item-icon {
    color: var(--pits-sidebar-icon) !important;
}

body .fi-sidebar-item-active .fi-sidebar-item-icon,
body .fi-active .fi-sidebar-item-icon {
    color: var(--pits-sidebar-active) !important;
}

/* Group collapse button + its icon — !important: Filament renders text-gray-400 via Tailwind */
body .fi-sidebar-group-btn {
    color: var(--pits-sidebar-muted);
}

body .fi-sidebar-group-btn:hover {
    color: var(--pits-sidebar-text);
}

/* Group icon — !important: Filament renders text-gray-400 on fi-sidebar-group-collapse-btn via Tailwind */
body .fi-sidebar-group-collapse-btn {
    color: var(--pits-sidebar-muted) !important;
}

body .fi-sidebar-group-btn:hover .fi-sidebar-group-collapse-btn {
    color: var(--pits-sidebar-text) !important;
}

/* Collapse/open toggle */
body .fi-sidebar-close-sidebar-btn,
body .fi-sidebar-open-sidebar-btn {
    color: var(--pits-sidebar-icon);
}

/* Sidebar group dividers */
body .fi-sidebar-group + .fi-sidebar-group {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Focus visible — keyboard accessibility (P10) */
body .fi-sidebar-item a:focus-visible,
body .fi-sidebar-item button:focus-visible,
body .fi-sidebar-item-btn:focus-visible {
    outline: 2px solid #a5b4fc;
    outline-offset: -2px;
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* Sidebar scrollbar (P11) */
body .fi-sidebar::-webkit-scrollbar,
body .fi-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
body .fi-sidebar::-webkit-scrollbar-track,
body .fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
body .fi-sidebar::-webkit-scrollbar-thumb,
body .fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}


/* ─── TOPBAR ────────────────────────────────────────────────────────────── */

body .fi-topbar {
    border-bottom: 1px solid var(--pits-border);
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.95);
}

body .fi-topbar-loading-indicator {
    background: linear-gradient(90deg, var(--pits-primary-light), var(--pits-primary));
}

body .fi-global-search input {
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    background: var(--pits-zebra-bg);
    border-color: var(--pits-border);
}

body .fi-global-search input:focus {
    background: #ffffff;
    border-color: var(--pits-primary-light);
}


/* ─── CONTENT AREA (P2 CRITICAL) ────────────────────────────────────────── */

body .fi-main {
    background-color: var(--pits-surface) !important;
}


/* ─── PAGE HEADER (P8 MEDIUM) ───────────────────────────────────────────── */

body .fi-header {
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
}

body .fi-header-heading {
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--pits-text);
    font-size: 1.625rem;
}

body .fi-header-subheading {
    color: var(--pits-text-muted);
    font-size: 0.875rem;
}


/* ─── STAT WIDGETS (P4 HIGH + P5 HIGH) ──────────────────────────────────── */

body .fi-wi-stats-overview-stat {
    border-radius: var(--pits-radius-card);
    border: 1px solid var(--pits-border);
    box-shadow: var(--pits-shadow);
    transition: all 200ms ease;
    overflow: hidden;
    position: relative;
    background: #ffffff;
}

body .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

/* Colored left accent bars — semantic colors */
/* !important: needed because Filament sets inline style for stat chart color which affects border */
body .fi-wi-stats-overview-stat:nth-child(1) {
    border-left: 4px solid #6366f1 !important;
    background: linear-gradient(135deg, rgba(99,102,241,0.04) 0%, #fff 100%);
}
body .fi-wi-stats-overview-stat:nth-child(2) {
    border-left: 4px solid #0ea5e9 !important;
    background: linear-gradient(135deg, rgba(14,165,233,0.04) 0%, #fff 100%);
}
body .fi-wi-stats-overview-stat:nth-child(3) {
    border-left: 4px solid #f43f5e !important;
    background: linear-gradient(135deg, rgba(244,63,94,0.04) 0%, #fff 100%);
}
body .fi-wi-stats-overview-stat:nth-child(4) {
    border-left: 4px solid #10b981 !important;
    background: linear-gradient(135deg, rgba(16,185,129,0.04) 0%, #fff 100%);
}
body .fi-wi-stats-overview-stat:nth-child(5) {
    border-left: 4px solid #f59e0b !important;
    background: linear-gradient(135deg, rgba(245,158,11,0.04) 0%, #fff 100%);
}
body .fi-wi-stats-overview-stat:nth-child(6) {
    border-left: 4px solid #8b5cf6 !important;
    background: linear-gradient(135deg, rgba(139,92,246,0.04) 0%, #fff 100%);
}
body .fi-wi-stats-overview-stat:nth-child(7) {
    border-left: 4px solid #ec4899 !important;
    background: linear-gradient(135deg, rgba(236,72,153,0.04) 0%, #fff 100%);
}
body .fi-wi-stats-overview-stat:nth-child(8) {
    border-left: 4px solid #14b8a6 !important;
    background: linear-gradient(135deg, rgba(20,184,166,0.04) 0%, #fff 100%);
}

/* Stat value — target CHILD element to override Tailwind (P5) */
/* !important: needed because Filament applies inline color style via chart color prop */
body .fi-wi-stats-overview-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pits-text) !important;
    line-height: 1.2;
}

/* Stat label */
body .fi-wi-stats-overview-stat-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pits-text-muted);
}

/* Stat description */
body .fi-wi-stats-overview-stat-description {
    font-size: 0.75rem;
    color: var(--pits-sidebar-muted);
    margin-top: 0.25rem;
}

/* Stat description icon color matching */
body .fi-wi-stats-overview-stat:nth-child(1) .fi-wi-stats-overview-stat-description-icon { color: #6366f1; }
body .fi-wi-stats-overview-stat:nth-child(2) .fi-wi-stats-overview-stat-description-icon { color: #0ea5e9; }
body .fi-wi-stats-overview-stat:nth-child(3) .fi-wi-stats-overview-stat-description-icon { color: #f43f5e; }
body .fi-wi-stats-overview-stat:nth-child(4) .fi-wi-stats-overview-stat-description-icon { color: #10b981; }

/* Stats container gap */
body .fi-wi-stats-overview-stats-ctn {
    gap: 1rem;
}


/* ─── CARDS / SECTIONS (P7 HIGH) ────────────────────────────────────────── */

body .fi-section {
    border-radius: var(--pits-radius-card);
    border: 1px solid var(--pits-border);
    box-shadow: var(--pits-shadow);
    overflow: visible;
    background: #ffffff;
}

body .fi-section-header {
    border-bottom: 2px solid var(--pits-border);
    background: linear-gradient(180deg, var(--pits-zebra-bg) 0%, #ffffff 100%);
    padding: 0.875rem 1.25rem;
}

body .fi-section-header-heading {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.9rem;
}

body .fi-section-content-ctn {
    padding: 1.25rem;
}


/* ─── TABLES (P6 HIGH) ──────────────────────────────────────────────────── */

body .fi-ta {
    border-radius: var(--pits-radius-card);
    border: 1px solid var(--pits-border);
    box-shadow: var(--pits-shadow);
    overflow: hidden;
    background: #ffffff;
}

/* Header — target BOTH cell and label child */
body .fi-ta-header-cell {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--pits-text-secondary);
    background: var(--pits-surface);
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--pits-border);
}

/* Override Tailwind on the label span specifically */
body .fi-ta-header-cell .fi-ta-header-cell-label {
    color: var(--pits-text-secondary);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Zebra striping */
/* !important: needed because Filament applies bg classes via Alpine.js on row selection state */
body .fi-ta-row:nth-child(even) {
    background-color: var(--pits-zebra-bg) !important;
}

body .fi-ta-row:nth-child(odd) {
    background-color: #ffffff !important;
}

/* Row hover — brand-tinted indigo */
body .fi-ta-row:hover {
    background-color: var(--pits-hover-bg) !important;
}

/* Row transitions + separators */
body .fi-ta-row {
    transition: background 100ms ease;
    border-bottom: 1px solid var(--pits-border-light);
}

/* Table cells */
body .fi-ta-cell {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: #334155;
}

/* Table search */
body .fi-ta-search-field input {
    border-radius: var(--pits-radius-btn);
}


/* ─── BADGES (P9 MEDIUM) ───────────────────────────────────────────────── */

body .fi-badge {
    border-radius: var(--pits-radius-badge);
    font-weight: 600;
    font-size: 0.6875rem;
    padding: 0.125rem 0.625rem;
    letter-spacing: 0.02em;
}


/* ─── BUTTONS ───────────────────────────────────────────────────────────── */

body .fi-btn {
    border-radius: var(--pits-radius-btn);
    font-weight: 600;
    font-size: 0.8125rem;
    transition: all var(--pits-transition);
    letter-spacing: 0.01em;
}

body .fi-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

body .fi-btn:active {
    transform: translateY(0);
}


/* ─── FORMS ─────────────────────────────────────────────────────────────── */

body .fi-input {
    border-radius: var(--pits-radius-btn);
    border-color: var(--pits-border);
}

body .fi-input:focus-within {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    border-color: var(--pits-primary-light);
}


/* ─── MODALS ────────────────────────────────────────────────────────────── */

body .fi-modal-window {
    border-radius: 0.875rem;
    box-shadow: 0 25px 60px -12px rgba(0,0,0,0.3);
}


/* ─── NOTIFICATIONS ─────────────────────────────────────────────────────── */

body .fi-notification {
    border-radius: var(--pits-radius-card);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.12);
    border: 1px solid var(--pits-border);
}


/* ─── TABS ──────────────────────────────────────────────────────────────── */

body .fi-tabs-item {
    font-weight: 500;
    transition: all var(--pits-transition);
    font-size: 0.8125rem;
}


/* ─── WIDGET CONTAINERS ─────────────────────────────────────────────────── */

body .fi-wi {
    border-radius: var(--pits-radius-card);
    overflow: hidden;
}


/* ─── DCC PAGES BRIDGE ──────────────────────────────────────────────────── */

body .fi-page .dcc-card {
    border-color: var(--pits-border);
    box-shadow: var(--pits-shadow);
    border-radius: var(--pits-radius-card);
}


/* ─── PAGINATION ────────────────────────────────────────────────────────── */

body .fi-pagination {
    padding-top: 0.75rem;
}


/* ─── GLOBAL TRANSITIONS ────────────────────────────────────────────────── */

body .fi-sidebar-item-btn,
body .fi-ta-row,
body .fi-btn,
body .fi-tabs-item,
body .fi-section,
body .fi-wi-stats-overview-stat,
body .fi-input {
    transition: all var(--pits-transition);
}


/* ─── CONTENT SCROLLBAR ─────────────────────────────────────────────────── */

body .fi-main::-webkit-scrollbar {
    width: 6px;
}
body .fi-main::-webkit-scrollbar-track {
    background: transparent;
}
body .fi-main::-webkit-scrollbar-thumb {
    background: var(--pits-sidebar-icon);
    border-radius: 3px;
}


/* ─── Respect reduced motion preference (WCAG 2.3.3) ────────────────────── */
/* !important: required by spec — must override all animations unconditionally */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}