/* ============================================================
   Red Leaf Portal — Design System v5
   Inspiration: Linear (speed/minimalism), Stripe (polish/spacing),
                Notion (simplicity), Airtable (data usability)
   Font: Inter (body) + Barlow Condensed (brand accents)
   Primary: #C73E1D  |  Sidebar: #7A1810 (deep red)
   Neutrals: cool-neutral gray scale
   ============================================================ */

/* ── Design Tokens ── */
:root {
    --rl-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --rl-font-brand: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --rl-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* Brand */
    --rl-primary: #C73E1D;
    --rl-primary-soft: rgba(199, 62, 29, 0.06);
    --rl-primary-hover: #B53618;
    --rl-primary-muted: rgba(199, 62, 29, 0.12);

    /* Sidebar — Dark charcoal gray */
    --rl-sidebar: #383840;
    --rl-sidebar-hover: #44444C;
    --rl-sidebar-active: rgba(255, 255, 255, 0.1);
    --rl-sidebar-text: #FFFFFF;
    --rl-sidebar-text-muted: rgba(255, 255, 255, 0.85);
    --rl-sidebar-divider: rgba(255, 255, 255, 0.12);
    --rl-sidebar-label: rgba(255, 255, 255, 0.55);

    /* Neutral scale — slightly cool, Linear-inspired */
    --rl-gray-950: #0A0A0B;
    --rl-gray-900: #111113;
    --rl-gray-800: #1C1C1F;
    --rl-gray-700: #2E2E32;
    --rl-gray-600: #47474D;
    --rl-gray-500: #65656D;
    --rl-gray-400: #8B8B94;
    --rl-gray-300: #B0B0B8;
    --rl-gray-200: #D4D4DA;
    --rl-gray-150: #E4E4E9;
    --rl-gray-100: #EDEDF0;
    --rl-gray-75: #F4F4F6;
    --rl-gray-50: #F9F9FB;
    --rl-white: #FFFFFF;

    /* Semantic */
    --rl-text: var(--rl-gray-900);
    --rl-text-secondary: var(--rl-gray-500);
    --rl-text-muted: var(--rl-gray-400);
    --rl-text-faint: var(--rl-gray-300);

    --rl-bg: var(--rl-gray-50);
    --rl-bg-raised: var(--rl-white);
    --rl-surface: var(--rl-white);
    --rl-border: var(--rl-gray-150);
    --rl-border-light: var(--rl-gray-100);
    --rl-hover: var(--rl-gray-75);

    /* Status colors — muted, professional */
    --rl-success: #16A34A;
    --rl-success-bg: #F0FDF4;
    --rl-warning: #CA8A04;
    --rl-warning-bg: #FEFCE8;
    --rl-danger: #DC2626;
    --rl-danger-bg: #FEF2F2;
    --rl-info: #2563EB;
    --rl-info-bg: #EFF6FF;

    /* Spacing scale */
    --rl-space-xs: 4px;
    --rl-space-sm: 8px;
    --rl-space-md: 12px;
    --rl-space-lg: 16px;
    --rl-space-xl: 24px;
    --rl-space-2xl: 32px;

    /* Radii */
    --rl-radius-sm: 4px;
    --rl-radius: 6px;
    --rl-radius-md: 8px;
    --rl-radius-lg: 10px;
    --rl-radius-xl: 12px;

    /* Shadows — very subtle */
    --rl-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --rl-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --rl-shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --rl-shadow-lg: 0 8px 24px rgba(0,0,0,0.08);

    /* Transitions */
    --rl-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --rl-duration: 120ms;
}


/* ── Global Reset ── */
html { scroll-behavior: smooth; }

body, .fi-body {
    font-family: var(--rl-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--rl-bg) !important;
    font-size: 13px;
    color: var(--rl-text);
    line-height: 1.55;
}

::selection { background: var(--rl-primary-muted); color: var(--rl-gray-900); }


/* ================================================================
   LAYOUT — Full-width, comfortable
   ================================================================ */
.fi-main-ctn { max-width: 100% !important; padding: 0 !important; }
.fi-page { max-width: min(100%, 1560px) !important; padding: 0 var(--rl-space-2xl) !important; }
.fi-page > * { max-width: 100% !important; }
.fi-page-content { padding: 0 0 var(--rl-space-2xl) !important; }


/* ================================================================
   PAGE HEADER — Commanding but minimal
   ================================================================ */
.fi-header { padding: 20px 0 14px !important; }
.fi-header-heading {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    color: var(--rl-text) !important;
    line-height: 1.2 !important;
}
.fi-header-subheading {
    font-size: 13px !important;
    color: var(--rl-text-muted) !important;
    font-weight: 400 !important;
    margin-top: 2px !important;
}

/* Header actions — clean button row */
.fi-header-actions { gap: 8px !important; }


/* ================================================================
   SIDEBAR — Deep Red Brand Headquarters (v5 MAJOR CHANGE)
   ================================================================ */
.fi-sidebar {
    background: var(--rl-sidebar) !important;
    border-right: 1px solid var(--rl-sidebar-divider) !important;
}

.fi-sidebar-header {
    border-bottom: 1px solid var(--rl-sidebar-divider) !important;
    padding: 18px 16px 14px !important;
    background: var(--rl-sidebar) !important;
}

.fi-logo { height: auto !important; max-height: 48px !important; }
.fi-logo img { max-height: 48px !important; width: auto !important; }

.fi-sidebar-nav { padding: 12px 10px !important; overflow-x: hidden !important; }
.fi-sidebar-nav-groups { padding: 0 !important; gap: 0 !important; margin: 0 !important; }

/* Nav items — Option 1 Linear-style: tight, clean, Inter */
.fi-sidebar-item { border-radius: var(--rl-radius) !important; margin-bottom: 1px !important; }

.fi-sidebar-item-btn {
    border-radius: var(--rl-radius) !important;
    padding: 7px 12px !important;
    transition: all var(--rl-duration) var(--rl-ease) !important;
    gap: 9px !important;
    text-decoration: none !important;
}
.fi-sidebar-item-btn:hover { background: rgba(255,255,255,0.06) !important; }
.fi-sidebar-item-btn:hover .fi-sidebar-item-label { color: #fff !important; }
.fi-sidebar-item-btn:hover .fi-sidebar-item-icon { opacity: 0.85 !important; }

.fi-sidebar-item-label {
    font-family: var(--rl-font) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.75) !important;
    line-height: 1.3 !important;
}

/* Active state — inset red bar, brighter text */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: rgba(255,255,255,0.1) !important;
    box-shadow: inset 3px 0 0 var(--rl-primary) !important;
    border-radius: 0 var(--rl-radius) var(--rl-radius) 0 !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label { color: #fff !important; font-weight: 600 !important; }

.fi-sidebar-item-icon { width: 17px !important; height: 17px !important; opacity: 0.6 !important; flex-shrink: 0 !important; color: rgba(255,255,255,0.7) !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { opacity: 1 !important; color: #fff !important; }

/* Group labels — small uppercase muted */
.fi-sidebar-group { padding-top: 18px !important; gap: 0 !important; }
.fi-sidebar-group:first-child { padding-top: 4px !important; }
.fi-sidebar-group-items { padding: 6px 0 0 !important; margin: 0 !important; list-style: none !important; gap: 1px !important; }

.fi-sidebar-group-label {
    font-family: var(--rl-font) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.45) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Group collapse/expand */
.fi-sidebar-group-btn { display: flex !important; align-items: center !important; gap: 8px !important; padding: 0 12px !important; cursor: pointer !important; }
.fi-sidebar-group-btn:hover .fi-sidebar-group-label { color: rgba(255,255,255,0.6) !important; }
.fi-sidebar-group-collapse-btn { color: rgba(255,255,255,0.3) !important; transition: all var(--rl-duration) !important; }
.fi-sidebar-group-collapse-btn:hover { color: rgba(255,255,255,0.6) !important; }
.fi-sidebar-group-collapse-btn .fi-icon { color: inherit !important; }

/* Tree-line connectors for grouped items */
.fi-sidebar-item-grouped-border { opacity: 0.2 !important; }
.fi-sidebar-item-grouped-border .fi-sidebar-item-grouped-border-part { background: rgba(255,255,255,0.4) !important; }
.fi-sidebar-item-grouped-border-part-not-first, .fi-sidebar-item-grouped-border-part-not-last { background: rgba(255,255,255,0.15) !important; }

/* Badges on dark sidebar */
.fi-sidebar-item-badge-ctn .fi-badge {
    background: rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    border-radius: var(--rl-radius-sm) !important;
    padding: 1px 6px !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge {
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
}

.fi-sidebar-footer {
    border-top: 1px solid var(--rl-sidebar-divider) !important;
    padding: 10px 16px !important;
    background: var(--rl-sidebar) !important;
}

/* Sidebar collapse transition */
.fi-sidebar-close-overlay { backdrop-filter: blur(2px) !important; }


/* ================================================================
   TOP BAR — Minimal, functional
   ================================================================ */
.fi-topbar {
    background: var(--rl-bg-raised) !important;
    border-bottom: 1px solid var(--rl-border) !important;
    backdrop-filter: blur(8px) !important;
}

.fi-topbar nav { padding: 0 var(--rl-space-2xl) !important; height: 48px !important; }

.fi-breadcrumbs { font-size: 12px !important; }
.fi-breadcrumbs-item { color: var(--rl-text-muted) !important; transition: color var(--rl-duration) !important; }
.fi-breadcrumbs-item:hover { color: var(--rl-primary) !important; }
.fi-breadcrumbs-item-separator { color: var(--rl-text-faint) !important; }


/* ================================================================
   TABLES — The workhorse. Clean, scannable, fast.
   ================================================================ */
.fi-ta {
    border: 1px solid var(--rl-border) !important;
    border-radius: var(--rl-radius-lg) !important;
    overflow: hidden !important;
    background: var(--rl-surface) !important;
    box-shadow: none !important;
}

/* Sticky scrollable container */
.fi-ta-content-ctn {
    max-height: 78vh !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar — thin, unobtrusive */
.fi-ta-content-ctn::-webkit-scrollbar { width: 6px; height: 6px; }
.fi-ta-content-ctn::-webkit-scrollbar-track { background: transparent; }
.fi-ta-content-ctn::-webkit-scrollbar-thumb { background: var(--rl-gray-200); border-radius: 3px; }
.fi-ta-content-ctn::-webkit-scrollbar-thumb:hover { background: var(--rl-gray-400); }
.fi-ta-content-ctn { scrollbar-width: thin; scrollbar-color: var(--rl-gray-200) transparent; }

/* Sticky header */
.fi-ta-table thead { position: sticky; top: 0; z-index: 10; background: var(--rl-gray-75); }
.fi-ta-table { min-width: 100%; width: 100%; table-layout: auto; }

/* Column headers — structural, quiet */
.fi-ta-header-cell {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: var(--rl-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 10px 14px !important;
    background: var(--rl-gray-75) !important;
    border-bottom: 1px solid var(--rl-border) !important;
    white-space: nowrap !important;
    user-select: none;
}

/* Sort indicator */
.fi-ta-header-cell-sort-indicator { color: var(--rl-primary) !important; }

/* Table cells — optimal density */
.fi-ta-cell {
    padding: 10px 14px !important;
    font-size: 13px !important;
    color: var(--rl-gray-600) !important;
    border-bottom: 1px solid var(--rl-border-light) !important;
    line-height: 1.4 !important;
}

/* Bold column — first meaningful column */
.fi-ta-cell:first-child .fi-ta-text-item,
.fi-ta-cell .font-semibold,
.fi-ta-cell .font-bold {
    color: var(--rl-text) !important;
    font-weight: 600 !important;
}

/* Row hover — subtle */
.fi-ta-row {
    transition: background-color 80ms ease !important;
}
.fi-ta-row:hover { background: var(--rl-gray-50) !important; }
.fi-ta-row-is-selected { background: var(--rl-primary-soft) !important; }

/* Group headers — structured sections */
.fi-ta-group-header-row { background: var(--rl-gray-100) !important; }
.fi-ta-group-header-cell { padding: 8px 14px !important; }
.fi-ta-group-heading {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--rl-text) !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
}

/* Table toolbar — filters area */
.fi-ta-header {
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--rl-border-light) !important;
    gap: 8px !important;
}

/* Table empty state */
.fi-ta-empty-state { padding: 48px 24px !important; }
.fi-ta-empty-state-icon { color: var(--rl-text-faint) !important; opacity: 0.4 !important; }
.fi-ta-empty-state-heading { font-size: 15px !important; font-weight: 600 !important; color: var(--rl-text-secondary) !important; }
.fi-ta-empty-state-description { font-size: 13px !important; color: var(--rl-text-muted) !important; }

/* Pagination */
.fi-ta-pagination {
    border-top: 1px solid var(--rl-border-light) !important;
    padding: 8px 14px !important;
}


/* ================================================================
   FILTERS — Prominent, fast, Airtable-inspired
   ================================================================ */
.fi-ta-filters {
    padding: 8px 0 !important;
    gap: 6px !important;
}

/* Filter badges/pills */
.fi-ta-filter-indicator {
    background: var(--rl-primary-soft) !important;
    color: var(--rl-primary) !important;
    border-radius: var(--rl-radius-sm) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* Search input in tables */
.fi-ta-search-field input {
    border-radius: var(--rl-radius) !important;
    border-color: var(--rl-border) !important;
    font-size: 13px !important;
    background: var(--rl-gray-50) !important;
}
.fi-ta-search-field input:focus {
    background: var(--rl-surface) !important;
    border-color: var(--rl-primary) !important;
    box-shadow: 0 0 0 2px var(--rl-primary-soft) !important;
}


/* ================================================================
   BADGES — Refined, professional
   ================================================================ */
.fi-badge {
    border-radius: var(--rl-radius-sm) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    letter-spacing: 0.01em !important;
}


/* ================================================================
   SECTIONS / CARDS — Clean containers
   ================================================================ */
.fi-section {
    border-radius: var(--rl-radius-lg) !important;
    border: 1px solid var(--rl-border) !important;
    background: var(--rl-surface) !important;
    box-shadow: none !important;
}

.fi-section-header {
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--rl-border-light) !important;
}

.fi-section-header-heading {
    font-size: 14px !important;
    font-weight: 650 !important;
    color: var(--rl-text) !important;
    letter-spacing: -0.01em !important;
}

.fi-section-header-description {
    font-size: 12px !important;
    color: var(--rl-text-muted) !important;
}

.fi-section-content { padding: 14px 18px !important; }

/* Collapsed sections */
.fi-section-collapsed .fi-section-header { border-bottom: none !important; }


/* ================================================================
   FORMS — Fast, logical, friction-free
   ================================================================ */
.fi-fo-component-ctn { border-radius: var(--rl-radius-lg) !important; }

.fi-fo-field-wrp label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--rl-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 3px !important;
}

.fi-input {
    border-radius: var(--rl-radius) !important;
    border: 1px solid var(--rl-border) !important;
    font-size: 13px !important;
    color: var(--rl-text) !important;
    background: var(--rl-surface) !important;
    transition: border-color var(--rl-duration), box-shadow var(--rl-duration) !important;
    padding: 8px 12px !important;
}

.fi-input:hover { border-color: var(--rl-gray-200) !important; }

.fi-input:focus {
    border-color: var(--rl-primary) !important;
    box-shadow: 0 0 0 3px var(--rl-primary-soft) !important;
    outline: none !important;
}

/* Placeholder text */
.fi-input::placeholder { color: var(--rl-text-faint) !important; }

/* Select fields */
.fi-select-trigger { border-radius: var(--rl-radius) !important; }

/* Textarea */
textarea.fi-input { min-height: 80px !important; resize: vertical !important; }

/* Toggle switches */
.fi-toggle input:checked + div { background-color: var(--rl-primary) !important; }

/* Helper text */
.fi-fo-field-wrp-helper-text {
    font-size: 11px !important;
    color: var(--rl-text-muted) !important;
    margin-top: 3px !important;
}


/* ================================================================
   TABS — Clean underline style
   ================================================================ */
.fi-tabs {
    border-bottom: 1px solid var(--rl-border) !important;
    gap: 0 !important;
}

.fi-tabs-tab {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--rl-text-muted) !important;
    padding: 10px 16px !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
    transition: all var(--rl-duration) !important;
}

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

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

/* Tab icons */
.fi-tabs-tab-icon { width: 16px !important; height: 16px !important; }


/* ================================================================
   STATS / METRICS WIDGETS — Dashboard clarity
   ================================================================ */
.fi-wi-stats-overview { gap: 14px !important; }

.fi-wi-stats-overview-stat {
    border-radius: var(--rl-radius-lg) !important;
    border: 1px solid var(--rl-border) !important;
    box-shadow: none !important;
    background: var(--rl-surface) !important;
    padding: 18px 20px !important;
    transition: border-color var(--rl-duration) !important;
}

.fi-wi-stats-overview-stat:hover { border-color: var(--rl-gray-200) !important; }

.fi-wi-stats-overview-stat-value {
    font-size: 26px !important;
    font-weight: 750 !important;
    letter-spacing: -0.03em !important;
    color: var(--rl-text) !important;
    line-height: 1.1 !important;
}

.fi-wi-stats-overview-stat-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--rl-text-muted) !important;
    margin-bottom: 6px !important;
}

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

/* Stat charts */
.fi-wi-stats-overview-stat-chart { opacity: 0.8 !important; }

/* Widget spacing */
.fi-widgets { gap: 18px !important; }


/* ================================================================
   BUTTONS — Clean, purposeful, Stripe-premium feel
   ================================================================ */
.fi-btn {
    border-radius: var(--rl-radius) !important;
    font-size: 13px !important;
    font-weight: 550 !important;
    transition: all var(--rl-duration) var(--rl-ease) !important;
    gap: 6px !important;
}

/* Primary button — subtle gradient, premium hover */
.fi-btn-color-primary {
    background: linear-gradient(135deg, var(--rl-primary), #B53618) !important;
    box-shadow: var(--rl-shadow-sm) !important;
}
.fi-btn-color-primary:hover {
    transform: translateY(-0.5px) !important;
    box-shadow: var(--rl-shadow) !important;
}
.fi-btn-color-primary:active {
    transform: translateY(0) !important;
}

/* Secondary/gray buttons */
.fi-btn-color-gray {
    border: 1px solid var(--rl-border) !important;
    background: var(--rl-surface) !important;
    color: var(--rl-text-secondary) !important;
}
.fi-btn-color-gray:hover {
    background: var(--rl-gray-50) !important;
    color: var(--rl-text) !important;
    border-color: var(--rl-gray-200) !important;
}

/* Icon buttons */
.fi-icon-btn {
    border-radius: var(--rl-radius) !important;
    transition: all var(--rl-duration) !important;
}
.fi-icon-btn:hover { background: var(--rl-hover) !important; }


/* ================================================================
   MODALS — Focused, centered
   ================================================================ */
.fi-modal-window {
    border-radius: var(--rl-radius-xl) !important;
    box-shadow: var(--rl-shadow-lg) !important;
    border: 1px solid var(--rl-border) !important;
}

.fi-modal-close-btn { border-radius: var(--rl-radius) !important; }

/* Modal overlay */
.fi-modal-close-overlay {
    backdrop-filter: blur(4px) !important;
    background: rgba(0,0,0,0.3) !important;
}


/* ================================================================
   DROPDOWNS — Precise, fast
   ================================================================ */
.fi-dropdown-panel {
    border-radius: var(--rl-radius-md) !important;
    border: 1px solid var(--rl-border) !important;
    box-shadow: var(--rl-shadow-lg) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 60vh !important;
}

.fi-dropdown-list-item {
    font-size: 13px !important;
    padding: 7px 12px !important;
    border-radius: var(--rl-radius-sm) !important;
    margin: 2px 4px !important;
    transition: background var(--rl-duration) !important;
}

.fi-dropdown-list-item:hover { background: var(--rl-hover) !important; }


/* ================================================================
   NOTIFICATIONS — Subtle toast
   ================================================================ */
.fi-notification {
    border-radius: var(--rl-radius-lg) !important;
    font-size: 13px !important;
    box-shadow: var(--rl-shadow-md) !important;
    border: 1px solid var(--rl-border) !important;
}


/* ================================================================
   RELATION MANAGERS — Inset tables
   ================================================================ */
.fi-resource-relation-manager {
    border-radius: var(--rl-radius-lg) !important;
    border: 1px solid var(--rl-border) !important;
    overflow: hidden !important;
}

.fi-resource-relation-manager .fi-ta { border: none !important; border-radius: 0 !important; }


/* ================================================================
   AVATAR
   ================================================================ */
.fi-avatar { border-radius: 50% !important; }


/* ================================================================
   GLOBAL POLISH — Flat, no floating elements
   ================================================================ */
.fi-section, .fi-ta, .fi-wi-stats-overview-stat, .fi-card { box-shadow: none !important; }


/* ================================================================
   RED LEAF CUSTOM COMPONENTS (v5 preserved + enhanced)
   ================================================================ */

/* Status Pills */
.rl-pill {
    padding: 2px 8px;
    border-radius: var(--rl-radius-sm);
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}
.rl-pill-draft { background: var(--rl-gray-100); color: var(--rl-gray-400); }
.rl-pill-progress { background: var(--rl-info-bg); color: var(--rl-info); }
.rl-pill-review { background: var(--rl-warning-bg); color: var(--rl-warning); }
.rl-pill-approved { background: var(--rl-success-bg); color: var(--rl-success); }
.rl-pill-sent { background: #F5F3FF; color: #7C3AED; }

/* Project / Body rows */
.rl-project-row, .rl-body-row {
    background: var(--rl-surface);
    border: 1px solid var(--rl-border-light);
    border-radius: var(--rl-radius-lg);
    padding: 12px 16px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 80ms ease;
}
.rl-project-row:hover, .rl-body-row:hover {
    border-color: var(--rl-border);
    background: var(--rl-hover);
}

/* Expandable Sections */
.rl-expand-section {
    background: var(--rl-surface);
    border: 1px solid var(--rl-border-light);
    border-radius: var(--rl-radius-lg);
    margin-bottom: 4px;
    overflow: hidden;
}
.rl-expand-header {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 80ms;
    font-size: 13px;
    font-weight: 600;
}
.rl-expand-header:hover { background: var(--rl-hover); }
.rl-expand-body { display: none; padding: 0 16px 14px; border-top: 1px solid var(--rl-border-light); }
.rl-expand-section.open .rl-expand-body { display: block; }
.rl-expand-preview { font-size: 11px; color: var(--rl-text-muted); }

/* Quick Links */
.rl-quick-links { display: flex; gap: 8px; margin-top: 14px; }
.rl-quick-link {
    background: var(--rl-surface);
    border: 1px solid var(--rl-border-light);
    border-radius: var(--rl-radius-lg);
    padding: 10px 14px;
    flex: 1;
    cursor: pointer;
    transition: all 80ms;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
}
.rl-quick-link:hover { border-color: var(--rl-border); background: var(--rl-hover); }

/* Key-Value Grid */
.rl-kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px 20px;
    font-size: 13px;
}
.rl-kv-label {
    color: var(--rl-text-muted);
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.rl-kv-value { color: var(--rl-text); font-weight: 600; margin-top: 1px; }

/* Section Label */
.rl-section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--rl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    margin-top: 18px;
}

/* Flag Indicators */
.rl-flag-warn { color: var(--rl-warning); font-weight: 600; font-size: 11px; }
.rl-flag-none { color: var(--rl-success); font-weight: 600; font-size: 11px; }
.rl-details-toggle {
    font-size: 11px;
    color: var(--rl-primary);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.rl-details-toggle:hover { text-decoration: underline; }


/* ================================================================
   RESPONSIVE — Mobile-friendly for field use
   ================================================================ */
@media (max-width: 768px) {
    .fi-page { padding: 0 16px !important; }
    .fi-header-heading { font-size: 18px !important; }
    .fi-ta-cell { padding: 8px 10px !important; font-size: 12px !important; }
    .fi-ta-header-cell { padding: 8px 10px !important; font-size: 9px !important; }
    .fi-wi-stats-overview-stat { padding: 14px 16px !important; }
    .fi-wi-stats-overview-stat-value { font-size: 22px !important; }
}


/* ================================================================
   SEARCHABLE SELECT DROPDOWN — Force visible options
   Patched 2026-05-01: Filament v5 .fi-select-input-option had no
   explicit color rule and was inheriting an invisible (white) tone.
   Lock the panel + options to surface bg + text color.
   ================================================================ */
.fi-dropdown-panel,
.fi-select-input-options-ctn {
    background: var(--rl-surface) !important;
    color: var(--rl-text) !important;
}

.fi-select-input-option,
.fi-select-input-option * {
    color: var(--rl-text) !important;
    background: transparent !important;
}

.fi-select-input-option {
    font-size: 13px !important;
    padding: 7px 12px !important;
    cursor: pointer !important;
    border-radius: var(--rl-radius-sm) !important;
    margin: 1px 4px !important;
    transition: background var(--rl-duration) !important;
}

.fi-select-input-option:hover,
.fi-select-input-option[aria-selected='true'],
.fi-select-input-option.fi-active {
    background: var(--rl-hover) !important;
    color: var(--rl-text) !important;
}

.fi-select-input-option-group .fi-dropdown-header {
    color: var(--rl-text-muted) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 6px 12px !important;
}

.fi-select-input-search-ctn {
    background: var(--rl-surface) !important;
}

.fi-select-input-placeholder {
    color: var(--rl-text-faint) !important;
}

.fi-select-input-message {
    color: var(--rl-text-muted) !important;
    padding: 8px 12px !important;
}


/* ================================================================
   SEARCHABLE SELECT DROPDOWN — Aggressive override v2 (2026-05-01)
   Higher specificity (html.fi body chain) + literal hex colors so
   nothing can possibly cascade-override these rules.
   ================================================================ */
html.fi body .fi-dropdown-panel,
html.fi body .fi-select-input-options-ctn {
    background-color: #ffffff !important;
    color: #111111 !important;
}

html.fi body .fi-dropdown-panel .fi-select-input-option,
html.fi body .fi-dropdown-panel .fi-select-input-option *,
html.fi body .fi-select-input-options-ctn .fi-select-input-option,
html.fi body .fi-select-input-options-ctn .fi-select-input-option *,
html.fi body .fi-dropdown-panel .fi-dropdown-list-item,
html.fi body .fi-dropdown-panel .fi-dropdown-list-item * {
    color: #111111 !important;
    background-color: transparent !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html.fi body .fi-select-input-option:hover,
html.fi body .fi-select-input-option[aria-selected='true'],
html.fi body .fi-select-input-option.fi-active,
html.fi body .fi-dropdown-list-item:hover {
    background-color: #f4f4f6 !important;
    color: #111111 !important;
}

html.fi body .fi-select-input-search-ctn,
html.fi body .fi-select-input-search-ctn input {
    background-color: #ffffff !important;
    color: #111111 !important;
}

html.fi body .fi-select-input-placeholder {
    color: #888888 !important;
}

html.fi body .fi-select-input-message {
    color: #555555 !important;
    background-color: #ffffff !important;
}


/* ================================================================
   ROOT CAUSE FIX (2026-05-01 v3): the actual text inside dropdown
   options is in a CHILD element with class .fi-dropdown-list-item-label
   that uses color: var(--gray-700). The dropdown panel is teleported
   outside .fi context (Alpine teleport) so the --gray-XXX variables
   don't resolve, leaving text with no defined color.
   Same issue for .fi-select-input-value-label in the trigger.
   ================================================================ */
.fi-dropdown-list-item-label,
.fi-select-input-value-label,
.fi-select-input-option,
.fi-select-input-option *,
.fi-dropdown-list-item,
.fi-dropdown-list-item * {
    color: #111111 !important;
}

.fi-select-input-placeholder {
    color: #888888 !important;
}

.fi-dropdown-panel {
    background-color: #ffffff !important;
}

.fi-dropdown-list-item:hover .fi-dropdown-list-item-label,
.fi-dropdown-list-item:focus-visible .fi-dropdown-list-item-label,
.fi-dropdown-list-item.fi-selected .fi-dropdown-list-item-label {
    color: #111111 !important;
}

/* Fallback in case the entire panel renders dark for any reason */
.fi-dropdown-panel,
.fi-select-input-options-ctn {
    --gray-50:  #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;
    --color-white: #ffffff;
    --text: #111111;
    --hover-text: #111111;
}