/* ============================================
   CircoCRM Premium SaaS Theme
   ============================================ */

/* === ROOT VARIABLES === */
:root {
    --sidebar-bg: linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);
    --sidebar-item-hover: rgba(99, 102, 241, 0.15);
    --sidebar-item-active: rgba(99, 102, 241, 0.25);
    --sidebar-text: #94a3b8;
    --sidebar-text-active: #e2e8f0;
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.06);
    --card-hover: rgba(255, 255, 255, 0.05);
    --accent-primary: #6366f1;
    --accent-glow: rgba(99, 102, 241, 0.3);
    --transition-smooth: all 0.15s ease;
}

/* === GLOBAL === */
body {
    background: #0a0a14 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* === SIDEBAR === */
.fi-sidebar {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    
}

/* Sidebar brand */
.fi-sidebar-header {
    padding: 1.25rem 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.fi-sidebar-header a,
.fi-sidebar-header span {
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    letter-spacing: -0.02em !important;
    background: linear-gradient(135deg, #818cf8, #c084fc) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Sidebar nav items */
.fi-sidebar-item a,
.fi-sidebar-item button {
    border-radius: 10px !important;
    margin: 2px 8px !important;
    padding: 9px 12px !important;
    transition: var(--transition-smooth) !important;
    color: var(--sidebar-text) !important;
    font-size: 0.835rem !important;
    font-weight: 500 !important;
}

.fi-sidebar-item a:hover,
.fi-sidebar-item button:hover {
    background: var(--sidebar-item-hover) !important;
    color: var(--sidebar-text-active) !important;
    
}

.fi-sidebar-item-active a,
.fi-sidebar-item-active button {
    background: var(--sidebar-item-active) !important;
    color: #fff !important;
    font-weight: 600 !important;
    
}

/* Sidebar group labels */
.fi-sidebar-group-label {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: rgba(148, 163, 184, 0.5) !important;
    padding: 16px 20px 6px !important;
}

/* Sidebar icons */
.fi-sidebar-item-icon {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.7;
    transition: var(--transition-smooth) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-icon {
    opacity: 1 !important;
    color: #818cf8 !important;
}

/* === TOP BAR === */
.fi-topbar {
    background: rgba(15, 15, 26, 0.8) !important;
    
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3) !important;
}

/* User menu */
.fi-user-menu {
    transition: var(--transition-smooth) !important;
}

/* === MAIN CONTENT === */
.fi-main {
    background: #0a0a14 !important;
}

.fi-page {
    
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === PAGE HEADER === */
.fi-page-header {
    margin-bottom: 1.5rem !important;
}

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

.fi-header-subheading {
    color: #64748b !important;
    font-size: 0.875rem !important;
}

/* === CARDS / SECTIONS === */
.fi-section {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 16px !important;
    transition: var(--transition-smooth) !important;
    overflow: hidden;
}

.fi-section:hover {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: var(--card-hover) !important;
}

.fi-section-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 16px 20px !important;
}

.fi-section-header-heading {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: #e2e8f0 !important;
}

/* === TABLES === */
.fi-ta {
    background: transparent !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 16px !important;
    overflow: hidden;
}

.fi-ta-header-cell {
    background: rgba(255, 255, 255, 0.03) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #64748b !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.fi-ta-row {
    transition: var(--transition-smooth) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.fi-ta-row:hover {
    background: rgba(99, 102, 241, 0.04) !important;
}

.fi-ta-cell {
    padding: 12px 16px !important;
    font-size: 0.85rem !important;
}

/* Striped rows */
.fi-ta-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.01);
}

/* Table pagination */
.fi-ta-pagination {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 12px 16px !important;
}

/* === BUTTONS === */
.fi-btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 8px 18px !important;
    transition: var(--transition-smooth) !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.fi-btn:hover {
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.fi-btn:active {
    
}

/* Primary button glow */
.fi-btn-color-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border: none !important;
}

.fi-btn-color-primary:hover {
    background: linear-gradient(135deg, #818cf8, #a78bfa) !important;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4) !important;
}

/* Success button */
.fi-btn-color-success {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border: none !important;
}

.fi-btn-color-success:hover {
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4) !important;
}

/* Danger button */
.fi-btn-color-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border: none !important;
}

.fi-btn-color-danger:hover {
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4) !important;
}

/* Warning button */
.fi-btn-color-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border: none !important;
}

/* Gray/secondary button */
.fi-btn-color-gray {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #d1d5db !important;
}

.fi-btn-color-gray:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* === FORM INPUTS === */
.fi-input-wrp {
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    transition: var(--transition-smooth) !important;
    overflow: hidden;
}

.fi-input-wrp:focus-within {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.fi-input {
    font-size: 0.875rem !important;
    color: #e2e8f0 !important;
}

.fi-input::placeholder {
    color: #475569 !important;
}

/* Select */
.fi-select-wrp {
    border-radius: 10px !important;
}

/* Textarea */
textarea.fi-input {
    border-radius: 10px !important;
}

/* === BADGES === */
.fi-badge {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    padding: 3px 10px !important;
    letter-spacing: 0.02em !important;
}

/* === TABS === */
.fi-tabs-tab {
    border-radius: 10px 10px 0 0 !important;
    transition: var(--transition-smooth) !important;
    font-weight: 600 !important;
}

.fi-tabs-tab-active {
    background: rgba(99, 102, 241, 0.1) !important;
    border-bottom: 2px solid var(--accent-primary) !important;
}

/* === MODALS === */
.fi-modal-window {
    background: #1e1e2e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
}

.fi-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 20px 24px !important;
}

.fi-modal-heading {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

.fi-modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 16px 24px !important;
}

/* === NOTIFICATIONS / TOASTS === */
.fi-notification {
    border-radius: 14px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    
}

/* === WIDGETS === */
.fi-wi {
    border-radius: 16px !important;
    transition: var(--transition-smooth) !important;
}

.fi-wi:hover {
    
}

/* Stats widget */
.fi-wi-stats-overview-stat {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 14px !important;
    transition: var(--transition-smooth) !important;
    padding: 20px !important;
}

.fi-wi-stats-overview-stat:hover {
    border-color: rgba(99, 102, 241, 0.2) !important;
    background: rgba(99, 102, 241, 0.05) !important;
}

/* === TOGGLE === */
.fi-toggle-input:checked {
    background-color: var(--accent-primary) !important;
}

/* === BREADCRUMBS === */
.fi-breadcrumbs {
    opacity: 0.6;
    font-size: 0.8rem !important;
}

/* === DROPDOWN === */
.fi-dropdown-panel {
    background: #1e1e2e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
    
    overflow: hidden;
}

.fi-dropdown-list-item {
    transition: var(--transition-smooth) !important;
    border-radius: 8px !important;
    margin: 2px 4px !important;
}

.fi-dropdown-list-item:hover {
    background: rgba(99, 102, 241, 0.1) !important;
}

/* === LOADING / WIRE === */
[wire\:loading] {
    opacity: 0.7;
}

/* Loading overlay */
.fi-ta-loading-overlay {
    background: rgba(10, 10, 20, 0.7) !important;
    
}

/* === EMPTY STATE === */
.fi-ta-empty-state {
    padding: 48px 24px !important;
}

.fi-ta-empty-state-icon {
    opacity: 0.3;
}

/* === HEADER ACTIONS (top right buttons) === */
.fi-page-header-actions {
    gap: 8px !important;
}

/* === GLOBAL SEARCH === */
.fi-global-search-input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    transition: var(--transition-smooth) !important;
}

.fi-global-search-input:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* === FILTERS === */
.fi-ta-filters {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
}

/* === CHECKBOX === */
.fi-checkbox-input {
    border-radius: 6px !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    transition: var(--transition-smooth) !important;
}

.fi-checkbox-input:checked {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* === REPEATER === */
.fi-fo-repeater-item {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: var(--transition-smooth) !important;
}

.fi-fo-repeater-item:hover {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* === ANIMATIONS === */
@keyframes slideInRight {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
    50% { box-shadow: 0 0 20px 5px rgba(99, 102, 241, 0.15); }
}

/* === RESPONSIVE FIXES === */
@media (max-width: 768px) {
    .fi-sidebar {
        
    }

    .fi-btn {
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
    }

    .fi-ta-cell {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* === FILAMENT SPECIFIC DARK MODE OVERRIDES === */
.dark .fi-body {
    background: #0a0a14 !important;
}

/* Make sure all text is readable */
.fi-ta-cell,
.fi-section-content {
    color: #cbd5e1 !important;
}

/* Fix link colors in content */
a:not(.fi-btn):not(.fi-sidebar-item a):not(.fi-tabs-tab) {
    color: #818cf8;
    transition: var(--transition-smooth);
}

a:not(.fi-btn):not(.fi-sidebar-item a):not(.fi-tabs-tab):hover {
    color: #a5b4fc;
}

/* Reducir espacio entre header y contenido para USUARIO */
.fi-page-header {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0 !important;
}
.fi-page > .fi-page-content {
    padding-top: 0 !important;
}

/* ============================================
   DASHBOARD MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    /* KPI grid: 5 cols → 2 cols */
    div[style*="grid-template-columns:repeat(5,1fr)"],
    div[style*="grid-template-columns: repeat(5,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* KPI cards smaller */
    div[style*="grid-template-columns:repeat(5,1fr)"] > div,
    div[style*="grid-template-columns: repeat(5,1fr)"] > div {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    div[style*="grid-template-columns:repeat(5,1fr)"] > div div[style*="font-size:28px"],
    div[style*="grid-template-columns:repeat(5,1fr)"] > div div[style*="font-size:24px"],
    div[style*="grid-template-columns:repeat(5,1fr)"] > div div[style*="font-size:22px"] {
        font-size: 20px !important;
    }

    /* 2-col grids → 1 col */
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* 4-col grids → 2 cols */
    div[style*="grid-template-columns:repeat(4,1fr)"],
    div[style*="grid-template-columns: repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 3-col grids → 1 col */
    div[style*="grid-template-columns:repeat(3,1fr)"],
    div[style*="grid-template-columns: repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* Pie chart: horizontal → vertical */
    div[style*="display:flex;align-items:center;gap:32px"] {
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Pie chart smaller */
    div[style*="width:160px;height:160px;border-radius:50%"] {
        width: 120px !important;
        height: 120px !important;
    }

    div[style*="width:110px;height:110px;border-radius:50%"] {
        width: 80px !important;
        height: 80px !important;
    }

    div[style*="width:110px"] span[style*="font-size:28px"] {
        font-size: 20px !important;
    }

    /* Fichas bar: stack vertically */
    div[style*="Porcentaje de fichas"] {
        flex-wrap: wrap !important;
    }

    /* Filter bar: wrap */
    div[style*="display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px"] {
        gap: 6px !important;
        padding: 10px 12px !important;
    }

    div[style*="display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px"] button {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }

    /* Separators: hide on mobile */
    div[style*="width:1px;height:24px;background:rgba(255,255,255,0.15)"] {
        display: none !important;
    }

    /* Date inputs smaller */
    input[type="date"] {
        width: 100% !important;
        max-width: 140px !important;
    }

    /* Select tenant smaller */
    select[style*="min-width:160px"] {
        min-width: 120px !important;
        font-size: 11px !important;
    }

    /* Table horizontal scroll */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    thead, tbody, tr {
        min-width: 600px;
    }

    /* Section padding reduce */
    div[style*="border-radius:16px;padding:24px"] {
        padding: 14px !important;
    }

    /* Bar chart height reduce */
    div[style*="display:flex;align-items:flex-end;gap:8px;height:150px"] {
        height: 100px !important;
    }

    div[style*="height:110px"] {
        height: 70px !important;
    }

    /* Font sizes for KPI stats */
    div[style*="font-size:32px"] {
        font-size: 22px !important;
    }

    /* Page header */
    .fi-header-heading {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 480px) {
    /* KPI grid: 2 cols on very small */
    div[style*="grid-template-columns:repeat(5,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    div[style*="grid-template-columns:repeat(5,1fr)"] > div {
        padding: 10px !important;
    }

    div[style*="grid-template-columns:repeat(5,1fr)"] > div div[style*="font-size:28px"],
    div[style*="grid-template-columns:repeat(5,1fr)"] > div div[style*="font-size:24px"] {
        font-size: 18px !important;
    }

    /* Filter buttons even smaller */
    div[style*="display:flex;flex-wrap:wrap;align-items:center;gap"] button {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }

    /* Fichas bar stack full */
    div[style*="display:flex;align-items:center;gap:14px;padding:14px"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 12px !important;
    }
}