/* ═══════════════════════════════════════════════════════════
   SPS ERP — Luxury Marble & Stone Company Theme
   Primary: Gold #C9A96E  |  Sidebar: Deep Black  |  BG: Cream
   ═══════════════════════════════════════════════════════════ */

:root {
    --gold:         #C9A96E;
    --gold-light:   #E8D5A3;
    --gold-dark:    #A8844D;
    --gold-glow:    rgba(201, 169, 110, 0.18);
    --sidebar-bg:   #111111;
    --sidebar-border: rgba(201, 169, 110, 0.18);
    --cream:        #FAF8F5;
    --cream-border: rgba(201, 169, 110, 0.14);
}

/* ────────────────────────────────────────────────
   SIDEBAR — Deep black with gold accents
   ──────────────────────────────────────────────── */
.fi-sidebar {
    background: linear-gradient(180deg, #111111 0%, #181818 100%) !important;
    border-right: 1px solid var(--sidebar-border) !important;
}

/* Brand / logo area at top of sidebar */
.fi-sidebar-header {
    border-bottom: 1px solid var(--sidebar-border) !important;
    padding: 1.2rem 1rem !important;
}

.fi-logo {
    display: flex;
    align-items: center;
}

/* Nav group labels */
.fi-sidebar-group-label {
    color: rgba(201, 169, 110, 0.55) !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding-left: 0.75rem !important;
    margin-top: 1.25rem !important;
}

/* Nav items */
.fi-sidebar-item .fi-sidebar-item-button {
    color: #9ca3af !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 8px !important;
    margin: 1px 8px !important;
    padding: 0.55rem 0.75rem !important;
    transition: all 0.18s ease !important;
}

.fi-sidebar-item .fi-sidebar-item-button:hover {
    background-color: var(--gold-glow) !important;
    color: var(--gold-light) !important;
}

.fi-sidebar-item .fi-sidebar-item-button.fi-active,
.fi-sidebar-item .fi-sidebar-item-button[aria-current="page"] {
    background: linear-gradient(90deg, rgba(201,169,110,0.15) 0%, rgba(201,169,110,0.06) 100%) !important;
    color: var(--gold) !important;
    border-left: 2px solid var(--gold) !important;
    border-radius: 0 8px 8px 0 !important;
    margin-left: 6px !important;
}

/* Nav icons */
.fi-sidebar-item .fi-sidebar-item-icon {
    color: inherit !important;
    opacity: 0.9;
}

/* Sidebar scrollbar */
.fi-sidebar::-webkit-scrollbar       { width: 3px; }
.fi-sidebar::-webkit-scrollbar-track { background: transparent; }
.fi-sidebar::-webkit-scrollbar-thumb { background: rgba(201,169,110,0.25); border-radius: 2px; }

/* ────────────────────────────────────────────────
   TOP BAR
   ──────────────────────────────────────────────── */
.fi-topbar {
    background: #141414 !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
}

.fi-topbar-breadcrumbs ol,
.fi-topbar-breadcrumbs li,
.fi-breadcrumbs-item-label {
    color: #9ca3af !important;
    font-size: 0.8rem;
}

/* User avatar area in topbar */
.fi-topbar nav {
    color: #e5e7eb;
}

/* ────────────────────────────────────────────────
   MAIN CONTENT
   ──────────────────────────────────────────────── */
.fi-main {
    background: var(--cream) !important;
}

/* ────────────────────────────────────────────────
   PAGE HEADER
   ──────────────────────────────────────────────── */
.fi-page-header {
    border-bottom: 1px solid var(--cream-border);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.fi-page-header-heading {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    color: #111827 !important;
}

.fi-page-header-subheading {
    color: #6b7280 !important;
    font-size: 0.875rem !important;
}

/* ────────────────────────────────────────────────
   CARDS / SECTIONS
   ──────────────────────────────────────────────── */
.fi-section {
    background: #ffffff !important;
    border: 1px solid var(--cream-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03) !important;
}

.fi-section-header {
    border-bottom: 1px solid rgba(201,169,110,0.1) !important;
    padding: 1rem 1.25rem !important;
}

.fi-section-header-heading {
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: #1f2937 !important;
    letter-spacing: 0.01em;
}

.fi-section-content {
    padding: 1.25rem !important;
}

/* ────────────────────────────────────────────────
   STATS WIDGETS
   ──────────────────────────────────────────────── */
.fi-wi-stats-overview-stat {
    background: #ffffff !important;
    border: 1px solid var(--cream-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
    position: relative;
    overflow: hidden;
}

.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
}

.fi-wi-stats-overview-stat-value {
    color: #111827 !important;
    font-weight: 700 !important;
    font-size: 1.6rem !important;
}

.fi-wi-stats-overview-stat-label {
    color: #6b7280 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.fi-wi-stats-overview-stat-description {
    color: #9ca3af !important;
    font-size: 0.75rem !important;
}

/* ────────────────────────────────────────────────
   TABLES
   ──────────────────────────────────────────────── */
.fi-ta {
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid var(--cream-border) !important;
}

.fi-ta-header-cell-label {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
}

.fi-ta-header-cell {
    background: #fafaf8 !important;
    border-bottom: 1px solid var(--cream-border) !important;
}

.fi-ta-row:hover > td,
.fi-ta-row:hover > .fi-ta-cell {
    background: rgba(201,169,110,0.04) !important;
}

/* ────────────────────────────────────────────────
   BUTTONS
   ──────────────────────────────────────────────── */
.fi-btn[class*="fi-color-primary"],
.fi-btn-color-primary {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 2px 8px rgba(201,169,110,0.28) !important;
    transition: all 0.18s ease !important;
}

.fi-btn[class*="fi-color-primary"]:hover,
.fi-btn-color-primary:hover {
    background: linear-gradient(135deg, #D4B87D 0%, var(--gold) 100%) !important;
    box-shadow: 0 4px 14px rgba(201,169,110,0.38) !important;
    transform: translateY(-1px);
}

/* ────────────────────────────────────────────────
   FORM INPUTS
   ──────────────────────────────────────────────── */
.fi-input:focus,
.fi-select-input:focus,
.fi-textarea:focus {
    border-color: var(--gold) !important;
    ring-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(201,169,110,0.15) !important;
}

/* ────────────────────────────────────────────────
   BADGES / STATUS
   ──────────────────────────────────────────────── */
.fi-badge {
    font-weight: 600 !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.04em !important;
    border-radius: 6px !important;
}

/* ────────────────────────────────────────────────
   LOGIN PAGE — Dark luxury with marble feel
   ──────────────────────────────────────────────── */
.fi-simple-layout {
    background:
        radial-gradient(ellipse at 15% 50%, rgba(201,169,110,0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 20%, rgba(201,169,110,0.05) 0%, transparent 50%),
        linear-gradient(160deg, #0d0d0d 0%, #1a1a1a 40%, #0f0f0f 100%) !important;
    min-height: 100vh;
}

.fi-simple-main {
    background: rgba(255,255,255,0.97) !important;
    border: 1px solid rgba(201,169,110,0.22) !important;
    border-radius: 16px !important;
    box-shadow:
        0 0 0 1px rgba(201,169,110,0.08),
        0 32px 64px rgba(0,0,0,0.55) !important;
}

/* Gold line at top of login card */
.fi-simple-main::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    border-radius: 16px 16px 0 0;
    margin-bottom: 0;
}

.fi-simple-main .fi-logo {
    justify-content: center;
    margin-bottom: 0.5rem;
}

/* ────────────────────────────────────────────────
   TYPOGRAPHY — Premium feel
   ──────────────────────────────────────────────── */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* ────────────────────────────────────────────────
   NOTIFICATIONS
   ──────────────────────────────────────────────── */
.fi-no {
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* ────────────────────────────────────────────────
   DROPDOWN MENUS
   ──────────────────────────────────────────────── */
.fi-dropdown-panel {
    border-radius: 10px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1) !important;
    border: 1px solid var(--cream-border) !important;
}

/* ────────────────────────────────────────────────
   MODAL / SLIDE-OVER
   ──────────────────────────────────────────────── */
.fi-modal-content {
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
}

/* ────────────────────────────────────────────────
   NAVBAR / TOP NAV BRAND area fix
   ──────────────────────────────────────────────── */
.fi-logo a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* If the brand logo img fails, show a styled fallback */
.fi-logo img {
    height: 2.6rem !important;
    object-fit: contain;
    border-radius: 8px;
}

/* Brand name text styling */
.fi-logo-mark,
.fi-brand-name {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: 0.02em;
}

/* Sidebar brand text (when logo loaded) */
.fi-sidebar .fi-logo-name,
.fi-sidebar [class*="brand"],
.fi-sidebar .fi-brand {
    color: #ffffff !important;
}

/* ────────────────────────────────────────────────
   CHOICES.JS / FILAMENT SELECT — Fix dropdown
   visibility. JS in AdminPanelProvider sets
   position:fixed + coords on the dropdown panel.
   These rules style the dropdown appearance.
   ──────────────────────────────────────────────── */

/* Dropdown panel — JS sets position:fixed + coords */
.choices__list--dropdown {
    z-index: 99999 !important;
    background: #fff !important;
    border: 1px solid var(--cream-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important;
}

/* Highlight options */
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list--dropdown .choices__item--selectable:hover {
    background: rgba(201,169,110,0.08) !important;
    color: #111827 !important;
}

.choices__list--dropdown .choices__item.is-selected {
    background: rgba(201,169,110,0.15) !important;
    color: var(--gold-dark) !important;
    font-weight: 600 !important;
}

/* Search input inside dropdown */
.choices__list--dropdown .choices__input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
    padding: 8px 10px !important;
}

/* Ensure wrapper doesn't clip the fixed dropdown */
.choices {
    overflow: visible !important;
    position: relative;
}

/* Tom Select if used anywhere */
.ts-dropdown {
    z-index: 99999 !important;
}