/* SCOPE: Stock Filament components only. Custom Blade pages (resources/views/filament/) require separate updates. */
/* gigMarket Filament Light-Mode Theme — GMWEB-212 */
/* Design tokens from DESIGN_LANGUAGE_PROMPT-gigMarket-Web.md */

/* ─────────────────────────────────────────────────────────────────────────────
   FONT
   WHY: System font stack (SF Pro on Mac, Segoe UI on Windows, Roboto on Android)
   gives native readability with full weight range for visual hierarchy.
   Replaced Neue Montreal (single-weight 400) which forced all text to the same
   weight, hurting readability. Weight-based hierarchy is now restored.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* Color palette */
    --gm-bg:             #FDFDFD;
    --gm-surface:        #FDFDFD;
    --gm-accent:         #47568D;
    --gm-success:        #48C299;
    --gm-danger:         #E17070;
    --gm-warning:        #FFA000;
    --gm-star:           #FFDB31;

    /* Text — blue-tinted, never pure black */
    --gm-text-primary:   #15181F;
    --gm-text-body:      rgba(29, 32, 41, 0.90);
    --gm-text-secondary: rgba(21, 24, 31, 0.50);
    --gm-text-placeholder: rgba(21, 24, 31, 0.40);
    --gm-text-table-header: rgba(21, 24, 31, 0.40);

    /* Shadows */
    --gm-shadow-raised:  0 3px 6px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.02), inset 0 1px 2px white;
    --gm-shadow-field:   0 1px 0 rgba(255,255,255,0.73), inset 0 1px 2px rgba(0,0,0,0.10), inset 0 3px 7px rgba(0,0,0,0.03);
    --gm-shadow-row-top: inset 0 -1px 0 rgba(17,19,25,0.08);
    --gm-shadow-row-bot: inset 0 1px 1px white;

    /* Focus ring */
    --gm-ring: 0 0 0 3px rgba(71, 86, 141, 0.25);
}


/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY
   AUDIT:F4 — verify .fi-* selectors still exist
   WHY: System font stack with weight-based hierarchy for readability.
   Headings use 600, body uses 400, section labels use 500.
   Section labels are lowercase; tags are 11px uppercase; button labels lowercase.
   ───────────────────────────────────────────────────────────────────────────── */
body,
.fi-body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: var(--gm-text-body) !important;
}

h1, h2, h3, h4, h5, h6,
.fi-header-heading,
.fi-section-header-heading,
.fi-resource-pages-list-records-page-heading,
.fi-page-header-heading {
    font-weight: 600 !important;
    color: var(--gm-text-primary) !important;
    letter-spacing: -0.01em !important;
}

/* Section labels lowercase */
.fi-section-header-heading,
.fi-sidebar-group-label,
.fi-fieldset-legend {
    text-transform: lowercase !important;
    font-weight: 500 !important;
    color: var(--gm-text-secondary) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.02em !important;
}

/* Tag / badge text: 11px uppercase */
.fi-badge {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500 !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   PAGE / BODY BACKGROUND
   AUDIT:F4 — verify .fi-* selectors still exist
   ───────────────────────────────────────────────────────────────────────────── */
html,
body,
.fi-body,
.fi-main,
.fi-main-ctn,
.fi-page {
    background-color: var(--gm-bg) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR
   AUDIT:F4 — verify .fi-* selectors still exist
   WHY: Sidebar uses the same surface color as the page to feel integrated.
   Active nav item uses accent with low-opacity background tint.
   ───────────────────────────────────────────────────────────────────────────── */
.fi-sidebar {
    background-color: var(--gm-surface) !important;
    border-right: 1px solid rgba(21, 24, 31, 0.07) !important;
}

.fi-sidebar-nav-item {
    color: var(--gm-text-body) !important;
    border-radius: 6px !important;
}

.fi-sidebar-nav-item:hover {
    background-color: rgba(71, 86, 141, 0.06) !important;
    color: var(--gm-accent) !important;
}

.fi-sidebar-item-active .fi-sidebar-nav-item,
.fi-sidebar-item-active > a {
    background-color: rgba(71, 86, 141, 0.10) !important;
    color: var(--gm-accent) !important;
    font-weight: 500 !important;
}

/* Nav item icon — active */
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--gm-accent) !important;
}

/* Group labels already handled in typography section above */
.fi-sidebar-group-label {
    color: var(--gm-text-secondary) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   TOP BAR / HEADER
   AUDIT:F4 — verify .fi-* selectors still exist
   ───────────────────────────────────────────────────────────────────────────── */
.fi-topbar,
.fi-header {
    background-color: var(--gm-surface) !important;
    border-bottom: 1px solid rgba(21, 24, 31, 0.07) !important;
    box-shadow: none !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   CARDS / SECTIONS
   AUDIT:F4 — verify .fi-* selectors still exist
   WHY: Raised shadow gives cards tactile depth without heavy drop shadow.
   ───────────────────────────────────────────────────────────────────────────── */
.fi-section,
.fi-card,
.fi-wi-stats-overview-stat,
.fi-fo-section {
    background-color: var(--gm-surface) !important;
    box-shadow: var(--gm-shadow-raised) !important;
    border: 1px solid rgba(21, 24, 31, 0.06) !important;
    border-radius: 10px !important;
}

.fi-section-header {
    border-bottom: 1px solid rgba(21, 24, 31, 0.07) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   FORM INPUTS
   AUDIT:F4 — verify .fi-* selectors still exist
   WHY: Inset gradient background gives text fields a slightly recessed look
   consistent with the gigMarket design language.
   ───────────────────────────────────────────────────────────────────────────── */
.fi-input,
.fi-in-text-input input,
.fi-in-textarea textarea,
.fi-in-select select,
.fi-select-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
    background-color: var(--gm-surface) !important;
    box-shadow: var(--gm-shadow-field) !important;
    border: 1px solid rgba(21, 24, 31, 0.12) !important;
    border-radius: 6px !important;
    color: var(--gm-text-body) !important;
}

/* Placeholder text */
.fi-input::placeholder,
.fi-in-text-input input::placeholder,
.fi-in-textarea textarea::placeholder {
    color: var(--gm-text-placeholder) !important;
}

/* Input labels */
.fi-fo-field-wrp-label label,
.fi-fo-field-wrp > label {
    font-weight: 500 !important;
    color: var(--gm-text-secondary) !important;
    font-size: 0.8125rem !important;
}

/* Focus state — accent ring */
.fi-input:focus,
.fi-in-text-input input:focus,
.fi-in-textarea textarea:focus,
.fi-in-select select:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--gm-accent) !important;
    box-shadow: var(--gm-shadow-field), var(--gm-ring) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   TABLES
   AUDIT:F4 — verify .fi-* selectors still exist
   WHY: Table header text uses the low-opacity token to de-emphasize labels
   relative to data. Row shadows create subtle row separation.
   ───────────────────────────────────────────────────────────────────────────── */
.fi-ta-header-cell,
.fi-ta-header-cell span {
    color: var(--gm-text-table-header) !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
}

.fi-ta-row {
    box-shadow: var(--gm-shadow-row-top), var(--gm-shadow-row-bot) !important;
    background-color: var(--gm-surface) !important;
}

.fi-ta-row:hover td,
.fi-ta-row:hover {
    background-color: rgba(71, 86, 141, 0.03) !important;
}

.fi-ta-cell {
    color: var(--gm-text-body) !important;
}

/* Table container */
.fi-ta-ctn,
.fi-ta {
    background-color: var(--gm-surface) !important;
    border: 1px solid rgba(21, 24, 31, 0.07) !important;
    border-radius: 10px !important;
    overflow: hidden;
}


/* ─────────────────────────────────────────────────────────────────────────────
   PRIMARY BUTTONS
   AUDIT:F4 — verify .fi-* selectors still exist
   WHY: Button labels are lowercase per design language. Primary uses accent blue.
   ───────────────────────────────────────────────────────────────────────────── */
.fi-btn-primary {
    background-color: var(--gm-accent) !important;
    border-color: var(--gm-accent) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    text-transform: lowercase;
    letter-spacing: 0.01em;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
}

.fi-btn-primary:hover {
    background-color: #3d4d7e !important;
    border-color: #3d4d7e !important;
}

.fi-btn-primary:focus {
    box-shadow: var(--gm-ring) !important;
    outline: none !important;
}

/* All buttons: lowercase labels */
.fi-btn {
    font-weight: 500 !important;
    text-transform: lowercase !important;
    border-radius: 6px !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   BADGES
   AUDIT:F4 — verify .fi-* selectors still exist
   WHY: Badge typography already set in the typography section (11px uppercase).
   Here we set colors for the semantic states.
   ───────────────────────────────────────────────────────────────────────────── */
/* WHY: Filament 3 badges use fi-color-{name} classes + inline CSS variables.
   Original 12% opacity was too faint to read. Bumped to 50% for readability
   while keeping the subtle tinted style. */
.fi-badge.fi-color-success {
    background-color: rgba(72, 194, 153, 0.30) !important;
    color: #2d9c72 !important;
    border: 1px solid rgba(72, 194, 153, 0.30) !important;
}

.fi-badge.fi-color-danger {
    background-color: rgba(225, 112, 112, 0.30) !important;
    color: #c45252 !important;
    border: 1px solid rgba(225, 112, 112, 0.30) !important;
}

.fi-badge.fi-color-warning {
    background-color: rgba(255, 160, 0, 0.30) !important;
    color: #b37000 !important;
    border: 1px solid rgba(255, 160, 0, 0.30) !important;
}

.fi-badge.fi-color-primary {
    background-color: rgba(71, 86, 141, 0.30) !important;
    color: var(--gm-accent) !important;
    border: 1px solid rgba(71, 86, 141, 0.20) !important;
}

/* Gray badges don't use fi-color-custom — Filament hardcodes Tailwind utilities */
.fi-badge:not(.fi-color-custom) {
    background-color: rgba(21, 24, 31, 0.10) !important;
    color: var(--gm-text-secondary) !important;
    border: 1px solid rgba(21, 24, 31, 0.10) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   NOTIFICATIONS / TOASTS
   AUDIT:F4 — verify .fi-* selectors still exist
   ───────────────────────────────────────────────────────────────────────────── */
.fi-notification {
    background-color: var(--gm-surface) !important;
    box-shadow: var(--gm-shadow-raised) !important;
    border: 1px solid rgba(21, 24, 31, 0.08) !important;
    border-radius: 10px !important;
}

.fi-notification-success,
.fi-notification-color-success {
    border-left: 3px solid var(--gm-success) !important;
}

.fi-notification-danger,
.fi-notification-color-danger {
    border-left: 3px solid var(--gm-danger) !important;
}

.fi-notification-warning,
.fi-notification-color-warning {
    border-left: 3px solid var(--gm-warning) !important;
}

.fi-notification-title {
    font-weight: 600 !important;
    color: var(--gm-text-primary) !important;
}

.fi-notification-body {
    color: var(--gm-text-body) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   MISCELLANEOUS
   AUDIT:F4 — verify .fi-* selectors still exist
   ───────────────────────────────────────────────────────────────────────────── */

/* Dropdown menus */
.fi-dropdown-panel,
.fi-ac-ctn {
    background-color: var(--gm-surface) !important;
    border: 1px solid rgba(21, 24, 31, 0.08) !important;
    box-shadow: var(--gm-shadow-raised) !important;
    border-radius: 8px !important;
}

/* Modal / overlay */
.fi-modal-window {
    background-color: var(--gm-surface) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}

/* Tabs */
.fi-tabs-tab {
    text-transform: lowercase !important;
    color: var(--gm-text-secondary) !important;
}

.fi-tabs-tab-active,
.fi-tabs-tab[aria-selected="true"] {
    color: var(--gm-accent) !important;
    border-bottom-color: var(--gm-accent) !important;
    font-weight: 500 !important;
}

/* Pagination */
.fi-pagination-item-btn {
    color: var(--gm-text-body) !important;
}

.fi-pagination-item-btn[aria-current="page"] {
    background-color: var(--gm-accent) !important;
    color: #ffffff !important;
    border-color: var(--gm-accent) !important;
}

/* Checkboxes and toggles — accent color */
.fi-checkbox input:checked,
.fi-toggle input:checked + span {
    background-color: var(--gm-accent) !important;
    border-color: var(--gm-accent) !important;
}

/* Action links */
.fi-link,
a.fi-link {
    color: var(--gm-accent) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DARK THEME — gigMarket iOS app design tokens
   WHY: Filament adds .dark class to <html> in dark mode. All tokens below are
   cool blue-tinted (never warm gray). Hierarchy is opacity only — no weight
   changes. Every declaration uses !important because Filament's Tailwind
   utilities have very high specificity.
   AUDIT:F4 — verify .fi-* selectors still exist
   ───────────────────────────────────────────────────────────────────────────── */

/* ── TYPOGRAPHY ─────────────────────────────────────────────────────────────── */
/* AUDIT:F4 */
.dark body,
.dark .fi-body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: rgba(238, 242, 255, 0.80) !important;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark .fi-header-heading,
.dark .fi-section-header-heading,
.dark .fi-resource-pages-list-records-page-heading,
.dark .fi-page-header-heading {
    font-weight: 600 !important;
    color: #EEF2FF !important;
    letter-spacing: -0.01em !important;
}

/* Section labels lowercase */
.dark .fi-section-header-heading,
.dark .fi-sidebar-group-label,
.dark .fi-fieldset-legend {
    text-transform: lowercase !important;
    font-weight: 500 !important;
    color: rgba(238, 242, 255, 0.50) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.02em !important;
}

/* Tag / badge text: 11px uppercase */
.dark .fi-badge {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 500 !important;
}


/* ── PAGE / BODY BACKGROUND ─────────────────────────────────────────────────── */
/* AUDIT:F4 */
.dark html,
.dark body,
.dark .fi-body,
.dark .fi-main,
.dark .fi-main-ctn,
.dark .fi-page {
    background-color: #15181F !important;
}


/* ── SIDEBAR ────────────────────────────────────────────────────────────────── */
/* AUDIT:F4 */
/* WHY: Sidebar uses a slightly elevated surface (#1D2029) vs page bg (#15181F)
   to create subtle depth. Active items use accent tint at 15% opacity. */
.dark .fi-sidebar {
    background-color: #1D2029 !important;
    border-right: 1px solid rgba(238, 242, 255, 0.04) !important;
}

.dark .fi-sidebar-item-label {
    color: rgba(238, 242, 255, 0.80) !important;
}

.dark .fi-sidebar-nav-item {
    color: rgba(238, 242, 255, 0.80) !important;
    border-radius: 6px !important;
}

.dark .fi-sidebar-nav-item:hover {
    background-color: rgba(71, 86, 141, 0.10) !important;
    color: #EEF2FF !important;
}

.dark .fi-sidebar-item-active .fi-sidebar-nav-item,
.dark .fi-sidebar-item-active > a {
    background-color: rgba(71, 86, 141, 0.15) !important;
    color: #EEF2FF !important;
    font-weight: 500 !important;
}

.dark .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #47568D !important;
}

.dark .fi-sidebar-group-label {
    color: rgba(238, 242, 255, 0.50) !important;
}


/* ── TOP BAR / HEADER ───────────────────────────────────────────────────────── */
/* AUDIT:F4 */
.dark .fi-topbar,
.dark .fi-header {
    background-color: #1D2029 !important;
    border-bottom: 1px solid rgba(238, 242, 255, 0.04) !important;
    box-shadow: none !important;
}


/* ── CARDS / SECTIONS ───────────────────────────────────────────────────────── */
/* AUDIT:F4 */
/* WHY: Cards sit on the page bg (#15181F) and use the surface tone (#1D2029)
   with a blue-tinted combined shadow (raised depth language). */
.dark .fi-section,
.dark .fi-card,
.dark .fi-wi-stats-overview-stat,
.dark .fi-fo-section {
    background-color: #1D2029 !important;
    box-shadow: 0 2px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(12,15,23,0.10),
                inset 0 1px 1px rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 10px !important;
}

.dark .fi-section-header {
    border-bottom: 1px solid rgba(238, 242, 255, 0.04) !important;
}


/* ── FORM INPUTS ────────────────────────────────────────────────────────────── */
/* AUDIT:F4 */
/* WHY: Inset gradient (#14161C → #181B22) gives fields a recessed appearance
   consistent with iOS design language — visually "lower" than card surface. */
.dark .fi-input,
.dark .fi-in-text-input input,
.dark .fi-in-textarea textarea,
.dark .fi-in-select select,
.dark .fi-select-input,
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="search"],
.dark textarea,
.dark select {
    background: linear-gradient(to bottom, #14161C, #181B22) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03), inset 0 1px 2px rgba(0,0,0,0.05) !important;
    border: 1px solid rgba(238, 242, 255, 0.05) !important;
    border-radius: 6px !important;
    color: rgba(238, 242, 255, 0.80) !important;
}

/* Placeholder text */
.dark .fi-input::placeholder,
.dark .fi-in-text-input input::placeholder,
.dark .fi-in-textarea textarea::placeholder {
    color: rgba(238, 242, 255, 0.30) !important;
}

/* Input labels */
.dark .fi-fo-field-wrp-label label,
.dark .fi-fo-field-wrp > label {
    font-weight: 500 !important;
    color: rgba(238, 242, 255, 0.50) !important;
    font-size: 0.8125rem !important;
}

/* Focus state — accent ring */
.dark .fi-input:focus,
.dark .fi-in-text-input input:focus,
.dark .fi-in-textarea textarea:focus,
.dark .fi-in-select select:focus,
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    outline: none !important;
    border-color: #47568D !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03), inset 0 1px 2px rgba(0,0,0,0.05),
                0 0 0 3px rgba(71, 86, 141, 0.25) !important;
}


/* ── TABLES ─────────────────────────────────────────────────────────────────── */
/* AUDIT:F4 */
/* WHY: Table header bg matches sidebar (#1D2029). Header text uses 30% opacity
   to strongly de-emphasize labels vs data. Row shadows create cool row separation. */
.dark .fi-ta-header-cell,
.dark .fi-ta-header-cell span {
    background-color: #1D2029 !important;
    color: rgba(238, 242, 255, 0.30) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
}

.dark .fi-ta-row {
    background-color: #171920 !important;
    box-shadow: inset 0 -1px 0 rgba(17,19,25,0.70),
                inset 0 1px 1px rgba(255,255,255,0.03) !important;
}

.dark .fi-ta-row:hover td,
.dark .fi-ta-row:hover {
    background-color: #1A1D26 !important;
}

.dark .fi-ta-cell {
    color: rgba(238, 242, 255, 0.80) !important;
}

/* Table container */
.dark .fi-ta-ctn,
.dark .fi-ta {
    background-color: #1D2029 !important;
    border: 1px solid rgba(238, 242, 255, 0.04) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}


/* ── PRIMARY BUTTONS ────────────────────────────────────────────────────────── */
/* AUDIT:F4 */
.dark .fi-btn-primary {
    background-color: #47568D !important;
    border-color: #47568D !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    text-transform: lowercase !important;
    letter-spacing: 0.01em !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
}

.dark .fi-btn-primary:hover {
    background-color: #3d4d7e !important;
    border-color: #3d4d7e !important;
}

.dark .fi-btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(71, 86, 141, 0.25) !important;
    outline: none !important;
}

/* All buttons: lowercase labels */
.dark .fi-btn {
    font-weight: 500 !important;
    text-transform: lowercase !important;
    border-radius: 6px !important;
}


/* ── BADGES ─────────────────────────────────────────────────────────────────── */
/* AUDIT:F4 */
/* WHY: Dark mode badges — higher opacity fills for readability on dark surfaces */
.dark .fi-badge.fi-color-success {
    background-color: rgba(72, 194, 153, 0.30) !important;
    color: #48C299 !important;
    border: 1px solid rgba(72, 194, 153, 0.30) !important;
}

.dark .fi-badge.fi-color-danger {
    background-color: rgba(225, 112, 112, 0.30) !important;
    color: #E17070 !important;
    border: 1px solid rgba(225, 112, 112, 0.30) !important;
}

.dark .fi-badge.fi-color-warning {
    background-color: rgba(255, 160, 0, 0.30) !important;
    color: #FFA000 !important;
    border: 1px solid rgba(255, 160, 0, 0.30) !important;
}

.dark .fi-badge.fi-color-primary {
    background-color: rgba(71, 86, 141, 0.30) !important;
    color: #8FA0D4 !important;
    border: 1px solid rgba(71, 86, 141, 0.30) !important;
}

.dark .fi-badge:not(.fi-color-custom) {
    background-color: rgba(238, 242, 255, 0.10) !important;
    color: rgba(238, 242, 255, 0.50) !important;
    border: 1px solid rgba(238, 242, 255, 0.08) !important;
}


/* ── NOTIFICATIONS / TOASTS ─────────────────────────────────────────────────── */
/* AUDIT:F4 */
.dark .fi-notification {
    background-color: #1D2029 !important;
    box-shadow: 0 2px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(12,15,23,0.10),
                inset 0 1px 1px rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 10px !important;
}

.dark .fi-notification-success,
.dark .fi-notification-color-success {
    border-left: 3px solid #48C299 !important;
}

.dark .fi-notification-danger,
.dark .fi-notification-color-danger {
    border-left: 3px solid #E17070 !important;
}

.dark .fi-notification-warning,
.dark .fi-notification-color-warning {
    border-left: 3px solid #FFA000 !important;
}

.dark .fi-notification-title {
    font-weight: 600 !important;
    color: #EEF2FF !important;
}

.dark .fi-notification-body {
    color: rgba(238, 242, 255, 0.80) !important;
}


/* ── MISCELLANEOUS ──────────────────────────────────────────────────────────── */
/* AUDIT:F4 */

/* Dropdown menus — raised/popup surface: gradient #21242E → #1D2029 */
/* WHY: Popups use a slightly lighter gradient top to feel "lifted" above card level */
.dark .fi-dropdown-panel,
.dark .fi-ac-ctn {
    background: linear-gradient(to bottom, #21242E, #1D2029) !important;
    border: 1px solid rgba(238, 242, 255, 0.05) !important;
    box-shadow: 0 2px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(12,15,23,0.10) !important;
    border-radius: 8px !important;
}

/* Modal / overlay */
.dark .fi-modal-window {
    background-color: #1D2029 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.40) !important;
}

/* Tabs */
.dark .fi-tabs-tab {
    text-transform: lowercase !important;
    color: rgba(238, 242, 255, 0.50) !important;
}

.dark .fi-tabs-tab-active,
.dark .fi-tabs-tab[aria-selected="true"] {
    color: #47568D !important;
    border-bottom-color: #47568D !important;
    font-weight: 500 !important;
}

/* Pagination */
.dark .fi-pagination-item-btn {
    color: rgba(238, 242, 255, 0.80) !important;
}

.dark .fi-pagination-item-btn[aria-current="page"] {
    background-color: #47568D !important;
    color: #ffffff !important;
    border-color: #47568D !important;
}

/* Checkboxes and toggles — accent color */
.dark .fi-checkbox input:checked,
.dark .fi-toggle input:checked + span {
    background-color: #47568D !important;
    border-color: #47568D !important;
}

/* Action links */
.dark .fi-link,
.dark a.fi-link {
    color: #8FA0D4 !important;
}

/* Separator lines */
.dark hr,
.dark .fi-hr {
    border-color: rgba(238, 242, 255, 0.04) !important;
}

/* General text on dark bg */
.dark p,
.dark span,
.dark label,
.dark td,
.dark th {
    color: rgba(238, 242, 255, 0.80) !important;
}

/* Emphasis text (90%) — e.g. slightly highlighted spans */
.dark strong,
.dark em,
.dark .fi-fo-field-wrp-label {
    color: rgba(238, 242, 255, 0.90) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   PRESERVED FROM ORIGINAL gigmarket-custom.css (GMWEB-602)
   ───────────────────────────────────────────────────────────────────────────── */
.booked { background-color: #9449ea; cursor: none; }
.available { background-color: #71be71; cursor: none; }
.available:hover { background-color: #71be71; }
.max-w-md { max-width: 80%; }
.event-invitation-accept-decline .filament-forms-text-input-component { display: none; }


/* ============================================================
   VENUE SCHEDULER 2 — GMWEB-200
   ============================================================ */

/* Grid wrapper */
.gm-scheduler-grid {
    overflow-x: auto;
    border: 1px solid rgba(238,242,255,0.08);
    border-radius: 12px;
}
.gm-scheduler-grid table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}

/* Sticky artist column */
.gm-scheduler-grid th.gm-sticky,
.gm-scheduler-grid td.gm-sticky {
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 1px solid rgba(238,242,255,0.06);
}
.gm-scheduler-grid th.gm-sticky { z-index: 2; }

/* Cell badge base */
.gm-cell {
    border-radius: 8px;
    padding: 6px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}
.gm-cell[data-actionable="true"] { cursor: pointer; }

/* Cell status variants */
.gm-cell--available       { background: rgba(72,194,153,0.20); color: #48C299; }
.gm-cell--invited         { background: rgba(255,160,0,0.20); color: #FFA000; }
.gm-cell--confirmed       { background: rgba(71,86,141,0.25); color: #8b9ad4; }
.gm-cell--declined        { background: rgba(225,112,112,0.20); color: #E17070; }
.gm-cell--pending-elsewhere  { background: rgba(255,160,0,0.12); color: rgba(255,160,0,0.70); }
.gm-cell--confirmed-elsewhere { background: rgba(238,242,255,0.06); color: rgba(238,242,255,0.35); }
.gm-cell--not-available   { background: rgba(238,242,255,0.04); color: rgba(238,242,255,0.20); }

/* GMWEB-794: Batch mode — staged cell highlight */
.gm-cell--staged { outline: 2px solid #5F53CC; outline-offset: -2px; }

/* Skeleton loading */
.gm-skeleton {
    background: linear-gradient(90deg, rgba(238,242,255,0.04) 25%, rgba(238,242,255,0.08) 50%, rgba(238,242,255,0.04) 75%);
    background-size: 200% 100%;
    animation: gm-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}
@keyframes gm-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Controls bar labels */
.gm-scheduler-controls label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    display: block;
}