/* ============================================
   WhatsApp DC — Filament UI Overrides
   Dark + Light mode
   ============================================ */

/* ---- VARIABLES POR TEMA ---- */
:root {
    --dc-border: rgba(0,0,0,0.1);
    --dc-hover-bg: rgba(0,0,0,0.04);
    --dc-active-bg: rgba(16,185,129,0.08);
    --dc-sidebar-header-bg: rgba(0,0,0,0.03);
    --dc-label-opacity: 0.45;
    --dc-item-opacity: 0.65;
    --dc-scrollbar: rgba(0,0,0,0.12);
    --dc-scrollbar-hover: rgba(0,0,0,0.25);
    --dc-sidebar-bg: #ffffff;
    --dc-topbar-bg: #ffffff;
}

.dark {
    --dc-border: rgba(255,255,255,0.07);
    --dc-hover-bg: rgba(255,255,255,0.06);
    --dc-active-bg: rgba(16,185,129,0.12);
    --dc-sidebar-header-bg: rgba(0,0,0,0.2);
    --dc-label-opacity: 0.3;
    --dc-item-opacity: 0.7;
    --dc-scrollbar: rgba(255,255,255,0.08);
    --dc-scrollbar-hover: rgba(255,255,255,0.2);
    --dc-sidebar-bg: #111827;
    --dc-topbar-bg: #111827;
}

/* ---- FORZAR GRUPOS SIEMPRE ABIERTOS ---- */
.fi-sidebar-group-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}

/* ---- SIDEBAR ---- */
.fi-sidebar {
    border-right: 1px solid var(--dc-border) !important;
    background: var(--dc-sidebar-bg) !important;
}

/* ---- SIDEBAR HEADER ---- */
.fi-sidebar-header {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    background: var(--dc-sidebar-header-bg) !important;
    border-bottom: 1px solid var(--dc-border) !important;
    box-shadow: none !important;
    --tw-ring-shadow: none !important;
    --tw-shadow: none !important;
}

.fi-sidebar-header a,
.fi-sidebar-header span {
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
}

.fi-sidebar-header .fi-icon-btn {
    width: 26px !important;
    height: 26px !important;
    opacity: 0.4 !important;
    transition: opacity 0.15s !important;
}
.fi-sidebar-header .fi-icon-btn:hover {
    opacity: 0.8 !important;
}

/* ---- SIDEBAR NAV ---- */
.fi-sidebar-nav {
    padding: 8px 10px !important;
    gap: 2px !important;
    background: transparent !important;
}

.fi-sidebar-nav-groups {
    gap: 4px !important;
}

/* ---- GRUPO ---- */
.fi-sidebar-group {
    gap: 0 !important;
}

.fi-sidebar-group-button {
    padding: 14px 6px 4px !important;
}

.fi-sidebar-group-label {
    font-size: 9.5px !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    opacity: var(--dc-label-opacity) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.fi-sidebar-group-collapse-button {
    display: none !important;
}
.fi-sidebar-group-icon {
    display: none !important;
}

/* ---- ITEMS DEL MENU ---- */
.fi-sidebar-item-button {
    padding: 8px 10px !important;
    gap: 10px !important;
    border-radius: 8px !important;
    transition: all 0.12s ease !important;
}

/* Hover */
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover {
    background: var(--dc-hover-bg) !important;
}

/* Activo */
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: var(--dc-active-bg) !important;
    border-left: 3px solid rgb(16, 185, 129) !important;
    padding-left: 7px !important;
}

.fi-sidebar-item-icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: rgb(16, 185, 129) !important;
}

.fi-sidebar-item-label {
    font-size: 13px !important;
    font-weight: 500 !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    font-weight: 600 !important;
    color: rgb(16, 185, 129) !important;
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-label {
    opacity: var(--dc-item-opacity) !important;
}
.fi-sidebar-item:not(.fi-active):hover .fi-sidebar-item-label {
    opacity: 1 !important;
}

/* Badge */
.fi-sidebar-item .fi-badge {
    font-size: 10px !important;
    padding: 0 6px !important;
    min-height: 18px !important;
    line-height: 18px !important;
    border-radius: 5px !important;
    font-weight: 700 !important;
}

.fi-sidebar-item-grouped-border {
    width: 18px !important;
    height: 18px !important;
}

/* ---- TOPBAR ---- */
.fi-topbar {
    height: 48px !important;
    min-height: 48px !important;
    border-bottom: 1px solid var(--dc-border) !important;
}

.fi-topbar > nav,
.fi-topbar nav {
    height: 48px !important;
    min-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    --tw-ring-shadow: none !important;
    --tw-shadow: none !important;
    box-shadow: none !important;
}

.fi-breadcrumbs {
    font-size: 12px !important;
    opacity: 0.5 !important;
}

.fi-avatar {
    width: 30px !important;
    height: 30px !important;
}

/* ---- SCROLLBARS ---- */
* {
    scrollbar-width: thin;
}
*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: var(--dc-scrollbar);
    border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--dc-scrollbar-hover);
}

/* ---- TABLAS ---- */
.fi-ta-row td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 13px !important;
}
.fi-ta-header-cell {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    font-weight: 600 !important;
    opacity: 0.5 !important;
}

/* ---- PAGE ---- */
.fi-header {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: auto !important;
}
.fi-header-heading {
    font-size: 17px !important;
    font-weight: 700 !important;
}
.fi-header-subheading,
.fi-header .fi-breadcrumbs {
    margin-bottom: 0 !important;
}

/* ---- SECTIONS ---- */
.fi-section-content {
    padding: 12px 16px !important;
}

/* Section borders en light mode */
.fi-section {
    border: 1px solid var(--dc-border) !important;
}

/* ---- STATS ---- */
.fi-wi-stats-overview-stat {
    padding: 10px 14px !important;
    border: 1px solid var(--dc-border) !important;
}

/* ---- BADGES ---- */
.fi-badge {
    font-size: 11px !important;
    padding: 2px 7px !important;
}

/* ---- CONTENIDO PRINCIPAL ---- */
.fi-main {
    padding: 0 12px !important;
}

.fi-page > section {
    padding-top: 14px !important;
    padding-bottom: 16px !important;
    gap: 10px !important;
}

.fi-page > section > div > .grid {
    gap: 8px !important;
}

/* ---- FORMS ---- */
.fi-fo-field-wrp {
    gap: 3px !important;
}

/* ---- TABLE CONTAINER: borde visible ---- */
.fi-ta-ctn {
    border: 1px solid var(--dc-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* ---- WIDGETS: bordes visibles ---- */
.fi-wi-chart {
    border: 1px solid var(--dc-border) !important;
}

.fi-wi-table {
    border: 1px solid var(--dc-border) !important;
}

/* === RESPONSIVE: formularios y páginas generales === */
@media (max-width: 820px) {
    /* Formularios: columnas a full width */
    .fi-fo-component-ctn {
        grid-template-columns: 1fr !important;
    }

    /* Sections: menos padding */
    .fi-section-content {
        padding: 10px 12px !important;
    }

    /* Selects nativos: fix flechitas */
    .fi-select-native,
    select.fi-select-input {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

    /* Header de página */
    .fi-header {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .fi-header-heading {
        font-size: 16px !important;
    }

    /* Botón crear: más compacto */
    .fi-btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    /* Checkboxlist: 2 columnas en vez de 4 */
    .fi-checkbox-list-columns {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Selects custom de Filament: fix tamaño en mobile */
    .fi-select-wrp {
        min-width: 0 !important;
    }

    .fi-select-wrp button[role="combobox"],
    .fi-select-wrp .choices__inner {
        font-size: 13px !important;
        min-height: 38px !important;
        padding: 6px 10px !important;
    }

    /* Placeholder del select más corto */
    .fi-select-wrp .fi-select-placeholder {
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Tags/badges dentro de selects */
    .fi-select-wrp .choices__list--multiple .choices__item {
        font-size: 11px !important;
        padding: 2px 6px !important;
    }
}