/* =============================================================
   ToCar — Filament panel visual enhancements
   Brand palette: navy #0F172A · orange #F97316 · white #FFFFFF
   ============================================================= */

/* --- Section header: subtle navy wash (light) / white lift (dark) --- */
.fi-section-header {
    background-color: rgba(175, 175, 187, 0.4);
}

.dark .fi-section-header {
    background-color: rgba(255, 255, 255, 0.055);
}

/* --- Section header heading: match tab label size (text-sm = 14px) ---
   Default is text-base (16px). Keeping semibold so it still reads as a label. */
.fi-section-header-heading {
    font-size: 0.875rem !important; /* 14px = text-sm */
    line-height: 1.25rem !important;
}

/* --- Collapsible sections: orange left-accent bar ---
   Uses ::before pseudo-element so Filament's ring/border is untouched.
   border-radius values match Filament's rounded-xl (0.75rem).          */
.fi-section.fi-collapsible {
    position: relative;
}

.fi-section.fi-collapsible::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background-color: #F97316;
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
    pointer-events: none;
}

.dark .fi-section.fi-collapsible::before {
    background-color: rgba(249, 115, 22, 0.6);
}

/* --- Tabs: improve light-mode readability ---
   Problem: active tab has bg-gray-50 on bg-white bar — invisible difference.
   Solution: gray-100 bar + white elevated pill for active tab + orange label.
   !important used intentionally to win against Filament's compiled CSS
   regardless of stylesheet load order.                                         */

/* Tab bar: visible gray tray */
.fi-tabs:not(.fi-contained) {
    background-color: #f1f5f9 !important; /* slate-100 */
    padding: 3px !important;
}

/* Inactive tab label: raise from gray-500 to gray-600 for readability */
.fi-tabs-item .fi-tabs-item-label {
    color: #4b5563 !important; /* gray-600 */
}

/* Active tab: white elevated pill so it clearly "pops" out of the gray tray */
.fi-tabs-item.fi-active {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

/* Active tab label: orange, clearly different from inactive gray */
.fi-tabs-item.fi-active .fi-tabs-item-label {
    color: #c2410c !important; /* orange-700 */
    font-weight: 600 !important;
}

/* Dark mode: undo overrides — Filament's dark defaults are fine */
.dark .fi-tabs:not(.fi-contained) {
    background-color: var(--gray-900) !important;
    padding: calc(var(--spacing) * 2) !important;
}

.dark .fi-tabs-item .fi-tabs-item-label {
    color: #9ca3af !important; /* gray-400 */
    font-weight: 500 !important;
}

.dark .fi-tabs-item.fi-active {
    background-color: color-mix(in oklab, var(--color-white) 5%, transparent) !important;
    box-shadow: none !important;
}

.dark .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: #fb923c !important; /* orange-400 */
    font-weight: 600 !important;
}