/* ================================================================
   FILAMENT V4 - CUSTOM PREMIUM THEME
   ================================================================ */

/* --- GLOBAL FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body, span, p, h1, h2, h3, button {
    font-family: 'Inter', sans-serif !important;
}

/* --- VAR--- */
:root {
    --primary-color: #4f46e5;
    --sidebar-light: #f8fafc; /* Slate 50 */
    --sidebar-dark: #020617;  /* Slate 950 (Casi negro azulado) */
}

/* =========================================
   1. SIDEBAR LEFT
   ========================================= */

/* --- LIGHT MODE --- */
.fi-sidebar {
    background-color: var(--sidebar-light) !important; 
    border-inline-end: 1px solid #e2e8f0 !important;
}

.fi-sidebar-group-label {
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    color: #64748b !important;
}

/* --- DARK MODE --- */
.dark .fi-sidebar {
    background-color: var(--sidebar-dark) !important;
    border-inline-end: 1px solid #1e293b !important;
}

.dark .fi-sidebar-group-label {
    color: #94a3b8 !important;
}

/* --- ACTIVE ITEM (BOTH MODES)--- */
.fi-sidebar-item-button-active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    margin-inline: 8px !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

.fi-sidebar-item-button-active .fi-sidebar-item-icon {
    color: #ffffff !important;
}

/* =========================================
   2. CONTENTS AND CARDS
   ========================================= */

body {
    background-color: #f1f5f9 !important; /* general backgorud Light */
}

.dark body {
    background-color: #0f172a !important; /* general backgorud Dark */
}

/* Section and Tables */
.fi-section, .fi-ta-ctn {
    border-radius: 5px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease;
}

.dark .fi-section, .dark .fi-ta-ctn {
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
}

/* Hover in table rows */
.fi-ta-row {
    transition: background-color 0.2s ease;
}

.fi-ta-row:hover {
    background-color: rgba(79, 70, 229, 0.02) !important;
}

/* =========================================
   3. COMPONENTS (BUTTONS AND INPUTS)
   ========================================= */

/* Buttons with a modern style */
.fi-btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.fi-btn:hover:not(.fi-btn-color-gray) {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2) !important;
}

/* Inputs radius */
.fi-fo-text-input, 
.fi-fo-select, 
.fi-fo-textarea {
    border-radius: 5px !important;
    border-color: #e2e8f0 !important;
}

.dark .fi-fo-text-input, 
.dark .fi-fo-select {
    border-color: #334155 !important;
    background-color: #0f172a !important;
}

/* =========================================
   4. FINE DETAILS (TOPBAR AND OTHERS)
   ========================================= */

.fi-topbar {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(8px);
}

.dark .fi-topbar {
    background-color: rgba(15, 23, 42, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Subtle animation for the search engine */
.fi-topbar-search-ctn {
    transition: all 0.3s ease;
}

.fi-topbar-search-ctn:focus-within {
    transform: scale(1.02);
}

.fi-section.fi-section-not-contained:not(.fi-aside), .fi-section.fi-section-not-contained:not(.fi-aside)>.fi-section-content-ctn {
   background: transparent!important;
   border: none!important;
}

/* .fi-action-edit {
    background: rgba(124,58,237,0.1);
    color: #7c3aed;
    border-radius: 8px;    
}

.fi-action-delete {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
    border-radius: 8px;
    padding: 10px;
} */

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