/***  HMS MODULE THEMING SYSTEM  (Phase 13)
 *    Each module gets its own color palette via the data-module attribute
 *    that hms-module-detector.js sets on <html> based on the current URL.
 *
 *    IMPORTANT: this file targets Filament v4 markup (verified against
 *    vendor/filament source — see selector notes below), NOT v3 class names.
 *    Confirmed real classes: fi-header, fi-header-heading, fi-breadcrumbs*,
 *    fi-sidebar-group[-btn|-label|-items], fi-sidebar-item[-btn|-icon|-label],
 *    fi-active, aria-current="page", fi-wi-stats-overview-stat*, fi-ta-header-cell,
 *    fi-ta-row, fi-section[-header[-heading|-description]], fi-tabs-item,
 *    fi-color / fi-color-primary (buttons, badges, icons), fi-btn, fi-topbar,
 *    fi-ta-filters-modal. Selectors like ".fi-btn-primary" or
 *    "[aria-selected]" from generic Filament v3 references do NOT exist in
 *    this app's rendered HTML and are intentionally NOT used below.
 *
 *    This file also keeps the existing hms-nav-colors.css group-label
 *    (li[data-group-label="..."]) approach, since that is the real DOM hook
 *    Filament v4 renders for nav groups. hms-module-themes.css supersedes
 *    hms-nav-colors.css (same technique, extended to the whole module).
 ***/

/* ── BASE: CSS custom properties per module ── */
html[data-module="front-office"] {
    --module-50: #eff6ff; --module-100: #dbeafe; --module-200: #bfdbfe;
    --module-300: #93c5fd; --module-400: #60a5fa; --module-500: #3b82f6;
    --module-600: #2563eb; --module-700: #1d4ed8; --module-800: #1e40af;
    --module-900: #1e3a8a; --module-text: #1e40af; --module-icon: #3b82f6;
}
html[data-module="housekeeping"] {
    --module-50: #ecfdf5; --module-100: #d1fae5; --module-200: #a7f3d0;
    --module-300: #6ee7b7; --module-400: #34d399; --module-500: #10b981;
    --module-600: #059669; --module-700: #047857; --module-800: #065f46;
    --module-900: #064e3b; --module-text: #065f46; --module-icon: #10b981;
}
html[data-module="food-beverage"] {
    --module-50: #fff7ed; --module-100: #ffedd5; --module-200: #fed7aa;
    --module-300: #fdba74; --module-400: #fb923c; --module-500: #f97316;
    --module-600: #ea580c; --module-700: #c2410c; --module-800: #9a3412;
    --module-900: #7c2d12; --module-text: #9a3412; --module-icon: #f97316;
}
html[data-module="finance"] {
    --module-50: #f5f3ff; --module-100: #ede9fe; --module-200: #ddd6fe;
    --module-300: #c4b5fd; --module-400: #a78bfa; --module-500: #8b5cf6;
    --module-600: #7c3aed; --module-700: #6d28d9; --module-800: #5b21b6;
    --module-900: #4c1d95; --module-text: #5b21b6; --module-icon: #8b5cf6;
}
html[data-module="maintenance"] {
    --module-50: #fff1f2; --module-100: #ffe4e6; --module-200: #fecdd3;
    --module-300: #fda4af; --module-400: #fb7185; --module-500: #f43f5e;
    --module-600: #e11d48; --module-700: #be123c; --module-800: #9f1239;
    --module-900: #881337; --module-text: #9f1239; --module-icon: #f43f5e;
}
html[data-module="hr-staff"] {
    --module-50: #f0fdfa; --module-100: #ccfbf1; --module-200: #99f6e4;
    --module-300: #5eead4; --module-400: #2dd4bf; --module-500: #14b8a6;
    --module-600: #0d9488; --module-700: #0f766e; --module-800: #115e59;
    --module-900: #134e4a; --module-text: #0f766e; --module-icon: #14b8a6;
}
html[data-module="reports"] {
    --module-50: #eef2ff; --module-100: #e0e7ff; --module-200: #c7d2fe;
    --module-300: #a5b4fc; --module-400: #818cf8; --module-500: #6366f1;
    --module-600: #4f46e5; --module-700: #4338ca; --module-800: #3730a3;
    --module-900: #312e81; --module-text: #3730a3; --module-icon: #6366f1;
}
html[data-module="night-audit"] {
    --module-50: #f8fafc; --module-100: #f1f5f9; --module-200: #e2e8f0;
    --module-300: #cbd5e1; --module-400: #94a3b8; --module-500: #64748b;
    --module-600: #475569; --module-700: #334155; --module-800: #1e293b;
    --module-900: #0f172a; --module-text: #1e293b; --module-icon: #64748b;
}
html[data-module="inventory"] {
    --module-50: #fffbeb; --module-100: #fef3c7; --module-200: #fde68a;
    --module-300: #fcd34d; --module-400: #fbbf24; --module-500: #f59e0b;
    --module-600: #d97706; --module-700: #b45309; --module-800: #92400e;
    --module-900: #78350f; --module-text: #92400e; --module-icon: #f59e0b;
}
html[data-module="system"] {
    --module-50: #f9fafb; --module-100: #f3f4f6; --module-200: #e5e7eb;
    --module-300: #d1d5db; --module-400: #9ca3af; --module-500: #6b7280;
    --module-600: #4b5563; --module-700: #374151; --module-800: #1f2937;
    --module-900: #111827; --module-text: #374151; --module-icon: #6b7280;
}

/* ── D) PAGE HEADER background + text ── */
html[data-module] .fi-header {
    background: linear-gradient(135deg, var(--module-700) 0%, var(--module-800) 100%) !important;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem !important;
}
html[data-module] .fi-header-heading,
html[data-module] .fi-header-subheading {
    color: white !important;
}

/* Breadcrumbs live inside .fi-header, so they need contrast against the dark gradient */
html[data-module] .fi-header .fi-breadcrumbs-item-label {
    color: rgba(255, 255, 255, 0.85) !important;
}
html[data-module] .fi-header .fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: white !important;
    font-weight: 600;
}
html[data-module] .fi-header .fi-breadcrumbs-item-separator {
    color: rgba(255, 255, 255, 0.5) !important;
}
/* Breadcrumbs rendered outside the header (e.g. simple pages) keep module-tinted text */
html[data-module] .fi-breadcrumbs:not(.fi-header .fi-breadcrumbs) .fi-breadcrumbs-item-label {
    color: var(--module-600) !important;
}
html[data-module] .fi-breadcrumbs:not(.fi-header .fi-breadcrumbs) .fi-breadcrumbs-item-separator {
    color: var(--module-400) !important;
}

/* Header action buttons */
html[data-module] .fi-header-actions-ctn .fi-btn.fi-color-gray {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}
html[data-module] .fi-header-actions-ctn .fi-btn.fi-color-gray:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* F) PRIMARY action buttons (Create, Save, etc.) — Filament v4 renders color as
   `.fi-btn.fi-color-primary`, not `.fi-btn-primary` */
html[data-module] .fi-btn.fi-color-primary {
    background-color: var(--module-600) !important;
    border-color: var(--module-700) !important;
}
html[data-module] .fi-btn.fi-color-primary:hover {
    background-color: var(--module-700) !important;
}

/* G) TABLE COLUMN HEADERS */
html[data-module] .fi-ta-header-cell {
    color: var(--module-700) !important;
    border-bottom: 2px solid var(--module-200) !important;
    font-weight: 600;
}

/* H) TABLE ROW hover */
html[data-module] tr.fi-ta-row:hover {
    background-color: var(--module-50) !important;
}

/* I) STAT WIDGETS (overview cards) */
html[data-module] .fi-wi-stats-overview-stat {
    border-left: 4px solid var(--module-500) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
html[data-module] .fi-wi-stats-overview-stat-label-ctn svg {
    color: var(--module-600) !important;
}
html[data-module] .fi-wi-stats-overview-stat-label {
    color: var(--module-700) !important;
}

/* J) SECTION HEADERS in forms */
html[data-module] .fi-section-header {
    border-bottom: 1px solid var(--module-200) !important;
}
html[data-module] .fi-section-header-heading {
    color: var(--module-700) !important;
    font-weight: 700 !important;
}
html[data-module] .fi-section-header svg {
    color: var(--module-600) !important;
}

/* K) TABS (active tab) — Filament v4 uses `.fi-tabs-item.fi-active`, there is
   no `role="tab"`/`aria-selected` pair in this build */
html[data-module] .fi-tabs-item.fi-active {
    color: var(--module-700) !important;
    border-color: var(--module-600) !important;
}
html[data-module] .fi-tabs-item:hover {
    color: var(--module-600) !important;
    background-color: var(--module-50) !important;
}

/* L) BADGE / PILL colors for that module */
html[data-module] .fi-badge.fi-color-primary {
    background-color: var(--module-100) !important;
    color: var(--module-700) !important;
}

/* Filter bar / search accent */
html[data-module] .fi-ta-filters-modal,
html[data-module] .fi-ta-filters-trigger-action-ctn .fi-btn {
    border-color: var(--module-300) !important;
}
html[data-module] input:focus,
html[data-module] select:focus,
html[data-module] .fi-input:focus-within {
    border-color: var(--module-500) !important;
    --tw-ring-color: var(--module-500) !important;
}

/* B) SIDEBAR NAV GROUP LABEL — real DOM hook is `li[data-group-label]`
   (see resources/views/components/sidebar/group.blade.php) */
html[data-module] li[data-group-label] > .fi-sidebar-group-btn > .fi-sidebar-group-label {
    color: var(--module-text) !important;
    font-weight: 700 !important;
}
html[data-module] li[data-group-label] > .fi-sidebar-group-btn {
    border-left: 3px solid var(--module-500) !important;
    background-color: var(--module-50) !important;
}

/* C) SIDEBAR NAV ITEMS — active + hover, scoped to the group they render in
   (li[data-group-label] wraps its own <ul class="fi-sidebar-group-items">) */
html[data-module] li[data-group-label] .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: var(--module-600) !important;
    color: white !important;
}
html[data-module] li[data-group-label] .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: white !important;
}
html[data-module] li[data-group-label] .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover {
    background-color: var(--module-100) !important;
    color: var(--module-700) !important;
}
html[data-module] li[data-group-label] .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: var(--module-600) !important;
}
/* M) Icon colors for all nav items in the group, active or not */
html[data-module] li[data-group-label] .fi-sidebar-item-icon {
    color: var(--module-icon) !important;
}

/* Pagination */
html[data-module] [aria-current="page"].fi-pagination-item {
    background-color: var(--module-600) !important;
    color: white !important;
    border-color: var(--module-600) !important;
}

/* Links */
html[data-module] .fi-link {
    color: var(--module-600) !important;
}

/* Topbar accent line */
html[data-module] .fi-topbar {
    border-bottom: 2px solid var(--module-500) !important;
}

/* N) Scrollbar */
html[data-module] ::-webkit-scrollbar-thumb {
    background-color: var(--module-300) !important;
    border-radius: 4px;
}