/*
 * Tema del panel del tenant: paleta del ADN Regenerator aplicada a todo el CRM
 * (superficies navy #0c1725/#101e30, hairlines #20344d, acento azul #2f8cff,
 * texto #f5f8fc / muted #94a4ba). Filament no tiene tema vite compilado en este
 * repo (el Dockerfile de prod no corre npm), por eso este CSS es estático y se
 * sirve directo desde public/.
 */

/* ---- Fondo general: navy profundo del ADN en vez del gray-950 de Filament ---- */
html.dark body {
    background-color: #07101c;
}

/* ---- Sidebar: fija, navy con borde derecho (Filament la deja transparente en desktop) ---- */
html.dark .fi-sidebar {
    background-color: #0c1725;
    border-inline-end: 1px solid #20344d;
}

html.dark .fi-sidebar-header {
    background-color: transparent;
    box-shadow: none;
    border-bottom: 1px solid #20344d;
}

html.dark .fi-sidebar-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5c7089;
}

html.dark .fi-sidebar-item-label {
    font-size: 0.875rem;
    color: #94a4ba;
}

html.dark .fi-sidebar-item-button:hover {
    background-color: #16263c;
}

html.dark .fi-sidebar-item-button:hover .fi-sidebar-item-label {
    color: #e8eef6;
}

html.dark .fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: rgb(47 140 255 / 0.12);
}

html.dark .fi-sidebar-item-active .fi-sidebar-item-label,
html.dark .fi-sidebar-item-active .fi-sidebar-item-button:hover .fi-sidebar-item-label {
    color: #47a4ff;
    font-weight: 500;
}

/* La cuenta vive al pie de la sidebar (como pepeferia): sin user menu arriba */
html.dark .fi-topbar .fi-user-menu {
    display: none;
}

/* ---- Topbar: translúcida con blur y hairline inferior ---- */
html.dark .fi-topbar nav {
    background-color: rgb(7 16 28 / 0.8);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: none;
    border-bottom: 1px solid #20344d;
}

/* El título de Chats vive en el topbar (la página cede su encabezado) */
html.dark .zuria-topbar-title {
    color: #f5f8fc;
    flex-shrink: 0;
}

/*
 * Encabezado de página en el topbar: el JS (js/zuria/topbar-header.js) clona el
 * breadcrumb y el título de cada página dentro de #zuria-topbar-header; los
 * originales quedan en el contenido ocultos (así el morphing de Livewire no se
 * rompe al no faltar nodos).
 */
html.dark .zuria-topbar-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex-shrink: 0;
}

html.dark .zuria-topbar-header .fi-breadcrumbs {
    margin-bottom: 0;
}

html.dark .zuria-topbar-header .fi-breadcrumbs-item-label {
    font-size: 0.6875rem;
    color: #94a4ba;
}

html.dark .zuria-topbar-header .fi-breadcrumbs-item-separator {
    width: 0.875rem;
    height: 0.875rem;
    color: #3d5573;
}

html.dark .zuria-topbar-header .fi-header-heading {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.25;
    color: #f5f8fc;
}

html.dark .fi-main .fi-header .fi-breadcrumbs,
html.dark .fi-main .fi-header .fi-header-heading {
    display: none;
}

/* Sin subtítulo ni acciones, el encabezado del contenido no aporta nada */
html.dark .fi-main .fi-header.zuria-header-empty {
    display: none;
}

/* ---- Tarjetas: panel navy + hairline #20344d y sombra suave del ADN ---- */
html.dark .fi-section,
html.dark .fi-wi-stats-overview-stat,
html.dark .fi-ta-ctn,
html.dark .fi-simple-main {
    background-color: #101e30;
    box-shadow: 0 0 0 1px #20344d, 0 18px 44px rgb(0 0 0 / 0.22);
}

html.dark .fi-dropdown-panel,
html.dark .fi-modal-window {
    background-color: #111f31;
    --tw-ring-color: #2c4460;
}

/* ---- Encabezados: escala compacta de pepeferia ---- */
html.dark .fi-header-heading {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: normal;
}

html.dark .fi-header-subheading {
    font-size: 0.8125rem;
    color: #7f92aa;
}

html.dark .fi-section-header-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f5f8fc;
}

html.dark .fi-section-header-description {
    font-size: 0.75rem;
    color: #7f92aa;
}

/* ---- KPIs: etiqueta eyebrow + número grande blanco ---- */
html.dark .fi-wi-stats-overview-stats-ctn {
    gap: 1rem;
}

html.dark .fi-wi-stats-overview-stat {
    padding: 1.25rem;
}

/*
 * Icono del KPI como tile w-9 h-9 con la tríada de pepeferia (fondo al 10%,
 * borde al 20%, trazo claro) en los tonos del ADN. El color lo pone la clase
 * zuria-tile-* que cada Stat declara vía extraAttributes.
 */
html.dark .fi-wi-stats-overview-stat-icon {
    box-sizing: content-box;
    width: 1rem;
    height: 1rem;
    padding: 0.625rem;
    border-radius: 0.5rem;
}

html.dark .zuria-tile-emerald .fi-wi-stats-overview-stat-icon {
    color: #39d98a;
    background-color: rgb(57 217 138 / 0.1);
    box-shadow: 0 0 0 1px rgb(57 217 138 / 0.2);
}

html.dark .zuria-tile-blue .fi-wi-stats-overview-stat-icon {
    color: #47a4ff;
    background-color: rgb(47 140 255 / 0.1);
    box-shadow: 0 0 0 1px rgb(47 140 255 / 0.2);
}

html.dark .zuria-tile-amber .fi-wi-stats-overview-stat-icon {
    color: #ffca3a;
    background-color: rgb(255 202 58 / 0.1);
    box-shadow: 0 0 0 1px rgb(255 202 58 / 0.2);
}

html.dark .zuria-tile-red .fi-wi-stats-overview-stat-icon {
    color: #ff4d5e;
    background-color: rgb(255 77 94 / 0.1);
    box-shadow: 0 0 0 1px rgb(255 77 94 / 0.2);
}

html.dark .zuria-tile-violet .fi-wi-stats-overview-stat-icon {
    color: #9c6bff;
    background-color: rgb(156 107 255 / 0.1);
    box-shadow: 0 0 0 1px rgb(156 107 255 / 0.2);
}

html.dark .zuria-tile-sky .fi-wi-stats-overview-stat-icon {
    color: #25b8ff;
    background-color: rgb(37 184 255 / 0.1);
    box-shadow: 0 0 0 1px rgb(37 184 255 / 0.2);
}

html.dark .fi-wi-stats-overview-stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: #7f92aa;
}

html.dark .fi-wi-stats-overview-stat-value {
    font-weight: 700;
    color: #f5f8fc;
}

html.dark .fi-wi-stats-overview-stat-description {
    font-size: 0.75rem;
}

/* ---- Tablas: header en xs muted ---- */
html.dark .fi-ta-header-cell-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #7f92aa;
}

/* ---- Inputs: fondo navy con borde #2c4460 ---- */
html.dark .fi-input-wrp {
    background-color: #14243a;
    --tw-ring-color: #2c4460;
}

/* ---- Filtros del Dashboard: la píldora del topbar de pepeferia ---- */
html.dark .zuria-filters {
    background-color: #101e30;
    box-shadow: 0 0 0 1px #20344d;
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
}

/* Aplana las grids del form (contenedor, wrapper y label/input) a una fila */
html.dark .zuria-filters .grid {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

html.dark .zuria-filters .fi-fo-field-wrp-label span {
    font-size: 0.75rem;
    font-weight: 400;
    color: #7f92aa;
}

html.dark .zuria-filters .fi-input-wrp {
    background-color: transparent;
    box-shadow: none;
}

html.dark .zuria-filters .fi-input {
    font-size: 0.75rem;
    color: #d7dfeb;
    padding-block: 0.25rem;
    width: 7.5rem;
}

/* ---- Animación de entrada de tarjetas (firma de pepeferia) ---- */
@keyframes zuria-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

html.dark .fi-section,
html.dark .fi-wi-stats-overview-stat,
html.dark .fi-ta-ctn {
    animation: zuria-fade-in 0.4s ease-out;
}