/* Nord Theme for Filament v5
 * Filament v5 uses --gray-*, --primary-*, etc. CSS variables (NO "color-" prefix)
 * These are generated in oklch() format by the panel colors() method
 * This file overrides sidebar, topbar, and structural elements using Nord palette
 */

/* =============================================
   NORD PALETTE TOKENS
   ============================================= */
:root {
    /* Polar Night */
    --nord0: #2e3440;
    --nord1: #3b4252;
    --nord2: #434c5e;
    --nord3: #4c566a;

    /* Snow Storm */
    --nord4: #d8dee9;
    --nord5: #e5e9f0;
    --nord6: #eceff4;

    /* Frost */
    --nord7: #8fbcbb;
    --nord8: #88c0d0;
    --nord9: #81a1c1;
    --nord10: #5e81ac;

    /* Aurora */
    --nord11: #bf616a;
    --nord12: #d08770;
    --nord13: #ebcb8b;
    --nord14: #a3be8c;
    --nord15: #b48ead;
}

/* =============================================
   STRUCTURAL ELEMENTS — Sidebar, Topbar
   ============================================= */

/* Sidebar */
.fi-sidebar {
    background-color: var(--nord0) !important;
    border-right: 1px solid var(--nord1) !important;
}
.dark .fi-sidebar {
    background-color: var(--nord0) !important;
    border-right: 1px solid var(--nord2) !important;
}

/* Sidebar group label */
.fi-sidebar-group-label {
    color: var(--nord8) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
}

/* Sidebar default item text & icon */
.fi-sidebar-item-button:not(.fi-active) .fi-sidebar-item-label {
    color: var(--nord4) !important;
}
.fi-sidebar-item-button:not(.fi-active) svg,
.fi-sidebar-item-button:not(.fi-active) .fi-sidebar-item-icon {
    color: var(--nord9) !important;
}

/* Sidebar item hover */
.fi-sidebar-item-button:not(.fi-active):hover {
    background-color: var(--nord1) !important;
}
.fi-sidebar-item-button:not(.fi-active):hover .fi-sidebar-item-label {
    color: var(--nord6) !important;
}
.fi-sidebar-item-button:not(.fi-active):hover svg,
.fi-sidebar-item-button:not(.fi-active):hover .fi-sidebar-item-icon {
    color: var(--nord8) !important;
}

/* Sidebar active item */
.fi-sidebar-item-button.fi-active {
    background-color: var(--nord9) !important;
}
.fi-sidebar-item-button.fi-active .fi-sidebar-item-label {
    color: var(--nord0) !important;
    font-weight: 700 !important;
}
.fi-sidebar-item-button.fi-active svg,
.fi-sidebar-item-button.fi-active .fi-sidebar-item-icon {
    color: var(--nord0) !important;
}

/* Topbar */
.fi-topbar {
    background-color: var(--nord0) !important;
    border-bottom-color: var(--nord1) !important;
}
.dark .fi-topbar {
    background-color: #242933 !important;
    border-bottom-color: var(--nord1) !important;
}

/* =============================================
   PAGE BACKGROUND
   ============================================= */
.fi-main {
    background-color: var(--nord6) !important;
}
.dark .fi-main {
    background-color: #242933 !important;
}

/* =============================================
   SECTION PANELS (fi-section)
   ============================================= */
.fi-section {
    background-color: var(--nord5) !important;
    border-color: var(--nord4) !important;
}
.dark .fi-section {
    background-color: var(--nord1) !important;
    border-color: var(--nord2) !important;
}

/* Section heading */
.fi-section-header {
    border-bottom-color: var(--nord4) !important;
}
.dark .fi-section-header {
    border-bottom-color: var(--nord2) !important;
}

/* =============================================
   TABLE ELEMENTS (fi-ta)
   ============================================= */
.fi-ta-ctn {
    background-color: var(--nord5) !important;
    border-color: var(--nord4) !important;
}
.dark .fi-ta-ctn {
    background-color: var(--nord1) !important;
    border-color: var(--nord2) !important;
}

.fi-ta-header-row {
    background-color: var(--nord4) !important;
}
.dark .fi-ta-header-row {
    background-color: var(--nord2) !important;
}

.fi-ta-header-cell {
    color: var(--nord3) !important;
}
.dark .fi-ta-header-cell {
    color: var(--nord4) !important;
}

.fi-ta-row:hover,
tr.hover\:bg-gray-50:hover {
    background-color: var(--nord4) !important;
}
.dark .fi-ta-row:hover,
.dark tr.hover\:bg-gray-50:hover,
.dark tr.dark\:hover\:bg-white\/5:hover {
    background-color: var(--nord2) !important;
}

/* Table dividers */
.fi-ta-table,
.divide-y > tr,
.divide-y > * {
    border-color: var(--nord4) !important;
}
.dark .fi-ta-table,
.dark .divide-y > tr,
.dark .divide-y > * {
    border-color: var(--nord2) !important;
}