/*
 * ============================================================================
 * CORPORACION MARLES S.A.C. — Tema Filament 3 Personalizado
 * ============================================================================
 * Distribuidor mayorista de insumos de panaderia y reposteria — Lima, Peru
 * Colores de marca: Navy #193346 | Gold #F7A439 | Mint #E2F2EF
 * ============================================================================
 */

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

/* ============================================================================
   VARIABLES CSS GLOBALES — Identidad Marles
   ============================================================================ */
:root {
    /* Paleta principal */
    --marles-navy: #193346;
    --marles-navy-light: #1e3d54;
    --marles-navy-dark: #112233;
    --marles-gold: #F7A439;
    --marles-gold-hover: #e8932a;
    --marles-gold-light: #fbb95e;
    --marles-blue: #00385A;
    --marles-mint: #E2F2EF;
    --marles-mint-dark: #c5e5df;

    /* Texto */
    --marles-text-dark: #494444;
    --marles-text-light: #757575;

    /* Superficies */
    --marles-card-bg: #F8F8F8;
    --marles-border: #E7E7E7;
    --marles-footer: #2D2B34;

    /* Tipografia */
    --font-family-sans: 'Inter', 'Proxima Nova', system-ui, -apple-system, sans-serif;
    --font-family-display: 'Rogliano', Georgia, serif;
    --font-family-accent: 'PT Sans', 'Inter', sans-serif;

    /* Sombras premium */
    --shadow-card: 0 1px 3px 0 rgba(25, 51, 70, 0.06), 0 1px 2px -1px rgba(25, 51, 70, 0.06);
    --shadow-card-hover: 0 4px 12px 0 rgba(25, 51, 70, 0.1), 0 2px 4px -2px rgba(25, 51, 70, 0.06);
    --shadow-elevated: 0 10px 25px -5px rgba(25, 51, 70, 0.1), 0 8px 10px -6px rgba(25, 51, 70, 0.05);

    /* Transiciones suaves */
    --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   TIPOGRAFIA GLOBAL
   ============================================================================ */
body,
.fi-body {
    font-family: var(--font-family-sans) !important;
    color: var(--marles-text-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings con peso visual premium */
h1, h2, h3,
.fi-header-heading,
.fi-section-header-heading {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--marles-navy);
}

/* ============================================================================
   SIDEBAR — Navy oscuro con acentos dorados
   ============================================================================ */
.fi-sidebar {
    background-color: var(--marles-navy) !important;
    border-right: none !important;
    box-shadow: 2px 0 8px rgba(25, 51, 70, 0.15);
}

/* Logo en el sidebar */
.fi-sidebar-header {
    padding: 1.25rem 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 0.5rem;
}

/* Grupo de navegacion */
.fi-sidebar-group {
    padding: 0 0.5rem;
}

.fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0.75rem 0.75rem 0.25rem !important;
}

/* Items de navegacion */
.fi-sidebar-item {
    margin: 1px 0;
}

.fi-sidebar-item-button {
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 0.625rem !important;
    padding: 0.5rem 0.75rem !important;
    transition: var(--transition-smooth) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
}

/* Item activo — acento dorado */
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-button.fi-active {
    background-color: rgba(247, 164, 57, 0.15) !important;
    color: var(--marles-gold) !important;
    font-weight: 600 !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button::before,
.fi-sidebar-item-button.fi-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background-color: var(--marles-gold);
    border-radius: 0 2px 2px 0;
}

/* Iconos del sidebar */
.fi-sidebar-item-icon {
    color: rgba(255, 255, 255, 0.5) !important;
    transition: var(--transition-smooth) !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: rgba(255, 255, 255, 0.9) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item-button.fi-active .fi-sidebar-item-icon {
    color: var(--marles-gold) !important;
}

/* Badge en sidebar */
.fi-sidebar-item-badge {
    background-color: var(--marles-gold) !important;
    color: var(--marles-navy) !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
}

/* Sidebar footer */
.fi-sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0.75rem 1rem !important;
}

/* ============================================================================
   TOPBAR — Limpio y minimalista
   ============================================================================ */
.fi-topbar {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--marles-border) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.fi-topbar nav {
    height: 4rem !important;
}

/* Breadcrumbs */
.fi-breadcrumbs {
    font-size: 0.8125rem;
}

.fi-breadcrumbs-item {
    color: var(--marles-text-light) !important;
}

.fi-breadcrumbs-item:last-child {
    color: var(--marles-navy) !important;
    font-weight: 600 !important;
}

/* Boton de usuario en topbar */
.fi-user-menu {
    transition: var(--transition-smooth);
}

/* ============================================================================
   BOTONES — Gold como accion primaria
   ============================================================================ */

/* Boton primario (dorado) */
.fi-btn-primary,
.fi-btn.fi-color-primary {
    background-color: var(--marles-gold) !important;
    color: var(--marles-navy) !important;
    border: none !important;
    border-radius: 0.625rem !important;
    font-weight: 600 !important;
    padding: 0.5rem 1.25rem !important;
    box-shadow: 0 1px 2px rgba(247, 164, 57, 0.3) !important;
    transition: var(--transition-smooth) !important;
}

.fi-btn-primary:hover,
.fi-btn.fi-color-primary:hover {
    background-color: var(--marles-gold-hover) !important;
    box-shadow: 0 4px 12px rgba(247, 164, 57, 0.35) !important;
    transform: translateY(-1px);
}

.fi-btn-primary:active,
.fi-btn.fi-color-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(247, 164, 57, 0.3) !important;
}

/* Boton secundario (outline) */
.fi-btn-secondary,
.fi-btn.fi-color-gray {
    border: 1.5px solid var(--marles-border) !important;
    border-radius: 0.625rem !important;
    color: var(--marles-text-dark) !important;
    background-color: #FFFFFF !important;
    font-weight: 500 !important;
    transition: var(--transition-smooth) !important;
}

.fi-btn-secondary:hover,
.fi-btn.fi-color-gray:hover {
    border-color: var(--marles-navy) !important;
    color: var(--marles-navy) !important;
    background-color: rgba(25, 51, 70, 0.03) !important;
}

/* Boton de peligro */
.fi-btn.fi-color-danger {
    border-radius: 0.625rem !important;
}

/* ============================================================================
   TARJETAS Y CONTENEDORES
   ============================================================================ */
.fi-section,
.fi-card {
    background-color: #FFFFFF !important;
    border: 1px solid var(--marles-border) !important;
    border-radius: 1rem !important;
    box-shadow: var(--shadow-card) !important;
    transition: var(--transition-smooth) !important;
    overflow: hidden;
}

.fi-section:hover,
.fi-card:hover {
    box-shadow: var(--shadow-card-hover) !important;
}

.fi-section-header {
    border-bottom: 1px solid var(--marles-border) !important;
    padding: 1rem 1.25rem !important;
    background-color: var(--marles-card-bg) !important;
}

.fi-section-content-ctn {
    padding: 1.25rem !important;
}

/* ============================================================================
   TABLAS — Espaciosas y limpias
   ============================================================================ */
.fi-ta {
    border-radius: 1rem !important;
    overflow: hidden;
    border: 1px solid var(--marles-border) !important;
}

/* Cabecera de tabla */
.fi-ta-header-cell {
    background-color: var(--marles-card-bg) !important;
    color: var(--marles-navy) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    padding: 0.875rem 1rem !important;
    border-bottom: 2px solid var(--marles-border) !important;
}

/* Filas alternadas */
.fi-ta-row {
    transition: var(--transition-smooth) !important;
}

.fi-ta-row:nth-child(even) {
    background-color: var(--marles-card-bg) !important;
}

.fi-ta-row:hover {
    background-color: var(--marles-mint) !important;
}

/* Celdas de tabla */
.fi-ta-cell {
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
    color: var(--marles-text-dark) !important;
    border-bottom: 1px solid var(--marles-border) !important;
}

/* Acciones de tabla */
.fi-ta-actions {
    gap: 0.25rem;
}

/* Paginacion */
.fi-ta-pagination {
    border-top: 1px solid var(--marles-border) !important;
    padding: 0.75rem 1rem !important;
    background-color: var(--marles-card-bg) !important;
}

/* ============================================================================
   FORMULARIOS — Inputs premium
   ============================================================================ */
.fi-input,
.fi-select,
.fi-textarea {
    border: 1.5px solid var(--marles-border) !important;
    border-radius: 0.625rem !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.875rem !important;
    transition: var(--transition-smooth) !important;
    background-color: #FFFFFF !important;
}

.fi-input:focus,
.fi-select:focus,
.fi-textarea:focus {
    border-color: var(--marles-gold) !important;
    box-shadow: 0 0 0 3px rgba(247, 164, 57, 0.15) !important;
    outline: none !important;
}

/* Labels */
.fi-fo-field-wrp label,
.fi-fo-component-ctn label {
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    color: var(--marles-navy) !important;
    margin-bottom: 0.375rem !important;
}

/* Helper text */
.fi-fo-field-wrp-helper-text {
    color: var(--marles-text-light) !important;
    font-size: 0.75rem !important;
}

/* ============================================================================
   BADGES — Colores de marca
   ============================================================================ */
.fi-badge {
    border-radius: 9999px !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.02em !important;
    padding: 0.25rem 0.625rem !important;
}

/* Badge success — Teal/Mint */
.fi-badge.fi-color-success {
    background-color: #dcfce7 !important;
    color: #166534 !important;
}

/* Badge warning — Amber */
.fi-badge.fi-color-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}

/* Badge danger — Warm red */
.fi-badge.fi-color-danger {
    background-color: #ffe4e6 !important;
    color: #9f1239 !important;
}

/* Badge info — Deep blue */
.fi-badge.fi-color-info {
    background-color: #dbeafe !important;
    color: var(--marles-blue) !important;
}

/* Badge primary — Gold */
.fi-badge.fi-color-primary {
    background-color: rgba(247, 164, 57, 0.15) !important;
    color: #b45309 !important;
}

/* Badge gray */
.fi-badge.fi-color-gray {
    background-color: var(--marles-card-bg) !important;
    color: var(--marles-text-light) !important;
    border: 1px solid var(--marles-border) !important;
}

/* ============================================================================
   WIDGETS DEL DASHBOARD
   ============================================================================ */

/* Contenedor general del dashboard */
.fi-page .fi-header {
    margin-bottom: 1.5rem !important;
}

/* Stats overview widgets */
.fi-wi-stats-overview {
    gap: 1rem !important;
}

.fi-wi-stats-overview-stat {
    background-color: #FFFFFF !important;
    border: 1px solid var(--marles-border) !important;
    border-radius: 1rem !important;
    padding: 1.25rem !important;
    box-shadow: var(--shadow-card) !important;
    transition: var(--transition-smooth) !important;
    position: relative;
    overflow: hidden;
}

.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--marles-gold), var(--marles-gold-light));
}

.fi-wi-stats-overview-stat:hover {
    box-shadow: var(--shadow-card-hover) !important;
    transform: translateY(-2px);
}

.fi-wi-stats-overview-stat-label {
    color: var(--marles-text-light) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.fi-wi-stats-overview-stat-value {
    color: var(--marles-navy) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.8125rem !important;
    color: var(--marles-text-light) !important;
}

/* Icono del stat widget en circulo coloreado */
.fi-wi-stats-overview-stat-icon {
    width: 2.75rem !important;
    height: 2.75rem !important;
    border-radius: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--marles-mint) !important;
}

/* Chart widgets */
.fi-wi-chart {
    background-color: #FFFFFF !important;
    border: 1px solid var(--marles-border) !important;
    border-radius: 1rem !important;
    box-shadow: var(--shadow-card) !important;
}

/* Widget personalizado con fondo mint */
.fi-wi-widget {
    border-radius: 1rem !important;
}

/* ============================================================================
   MODALES — Elegantes con overlay navy
   ============================================================================ */
.fi-modal-window {
    border-radius: 1rem !important;
    box-shadow: var(--shadow-elevated) !important;
    border: 1px solid var(--marles-border) !important;
}

.fi-modal-header {
    border-bottom: 1px solid var(--marles-border) !important;
    padding: 1.25rem 1.5rem !important;
}

.fi-modal-heading {
    color: var(--marles-navy) !important;
    font-weight: 700 !important;
}

.fi-modal-footer {
    border-top: 1px solid var(--marles-border) !important;
    padding: 1rem 1.5rem !important;
    background-color: var(--marles-card-bg) !important;
}

/* Overlay del modal */
.fi-modal-close-overlay {
    background-color: rgba(25, 51, 70, 0.5) !important;
    backdrop-filter: blur(4px) !important;
}

/* ============================================================================
   NOTIFICACIONES
   ============================================================================ */
.fi-no {
    border-radius: 0.75rem !important;
    box-shadow: var(--shadow-elevated) !important;
    border: 1px solid var(--marles-border) !important;
}

.fi-no-title {
    font-weight: 600 !important;
    color: var(--marles-navy) !important;
}

/* ============================================================================
   TABS — Estilo de pestanas
   ============================================================================ */
.fi-tabs-item-button {
    border-radius: 0.5rem 0.5rem 0 0 !important;
    transition: var(--transition-smooth) !important;
}

.fi-tabs-item-button.fi-active {
    border-bottom-color: var(--marles-gold) !important;
    color: var(--marles-navy) !important;
    font-weight: 600 !important;
}

/* ============================================================================
   PAGINA DE LOGIN — Fondo completo con marca
   ============================================================================ */
.fi-simple-layout {
    background: linear-gradient(135deg, var(--marles-navy) 0%, var(--marles-blue) 50%, var(--marles-navy-dark) 100%) !important;
    min-height: 100vh;
}

.fi-simple-main-ctn {
    max-width: 28rem !important;
}

/* Panel del formulario de login */
.fi-simple-page {
    background-color: #FFFFFF !important;
    border-radius: 1.25rem !important;
    box-shadow: var(--shadow-elevated) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 2.5rem !important;
}

/* Logo en login */
.fi-logo {
    margin-bottom: 1.5rem !important;
}

.fi-logo img {
    max-height: 3rem !important;
}

/* Titulo de login */
.fi-simple-page .fi-header-heading {
    color: var(--marles-navy) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
}

/* Subtitulo de login */
.fi-simple-page .fi-header-subheading {
    color: var(--marles-text-light) !important;
    text-align: center !important;
    font-size: 0.875rem !important;
}

/* Boton de login */
.fi-simple-page .fi-btn-primary {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9375rem !important;
    border-radius: 0.75rem !important;
    margin-top: 0.5rem !important;
}

/* Links en login */
.fi-simple-page a:not(.fi-btn) {
    color: var(--marles-gold) !important;
    font-weight: 500 !important;
    transition: var(--transition-smooth) !important;
}

.fi-simple-page a:not(.fi-btn):hover {
    color: var(--marles-gold-hover) !important;
}

/* ============================================================================
   CONTENIDO PRINCIPAL — Fondo suave
   ============================================================================ */
.fi-main-ctn {
    background-color: #f9fafb !important;
}

/* Header de pagina */
.fi-header {
    padding-bottom: 1rem !important;
}

.fi-header-heading {
    font-size: 1.625rem !important;
    font-weight: 700 !important;
    color: var(--marles-navy) !important;
}

.fi-header-subheading {
    color: var(--marles-text-light) !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
}

/* ============================================================================
   GLOBAL SEARCH — Barra de busqueda
   ============================================================================ */
.fi-global-search-input {
    border-radius: 0.75rem !important;
    border: 1.5px solid var(--marles-border) !important;
    background-color: var(--marles-card-bg) !important;
    transition: var(--transition-smooth) !important;
}

.fi-global-search-input:focus-within {
    border-color: var(--marles-gold) !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(247, 164, 57, 0.1) !important;
}

/* ============================================================================
   TOGGLE Y CHECKBOX
   ============================================================================ */
.fi-toggle-input:checked {
    background-color: var(--marles-gold) !important;
}

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

/* ============================================================================
   INDICADORES DE CARGA
   ============================================================================ */
.fi-loading-indicator {
    color: var(--marles-gold) !important;
}

/* ============================================================================
   ACTION GROUPS / DROPDOWN
   ============================================================================ */
.fi-dropdown-panel {
    border-radius: 0.75rem !important;
    box-shadow: var(--shadow-elevated) !important;
    border: 1px solid var(--marles-border) !important;
    overflow: hidden;
}

.fi-dropdown-list-item-button {
    transition: var(--transition-smooth) !important;
}

.fi-dropdown-list-item-button:hover {
    background-color: var(--marles-mint) !important;
}

/* ============================================================================
   WIZARD / STEPPER
   ============================================================================ */
.fi-wizard-header-step-indicator-active {
    background-color: var(--marles-gold) !important;
    color: var(--marles-navy) !important;
}

.fi-wizard-header-step-indicator-completed {
    background-color: #10b981 !important;
}

/* ============================================================================
   INFOLIST
   ============================================================================ */
.fi-in-entry-wrp {
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid var(--marles-border) !important;
}

.fi-in-entry-wrp:last-child {
    border-bottom: none !important;
}

.fi-in-entry-wrp-label {
    color: var(--marles-text-light) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* ============================================================================
   RESPONSIVE — Ajustes movil
   ============================================================================ */
@media (max-width: 1023px) {
    /* Sidebar colapsable en movil */
    .fi-sidebar {
        box-shadow: var(--shadow-elevated) !important;
    }

    /* Stats cards apilados */
    .fi-wi-stats-overview {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================================
   ANIMACIONES SUTILES
   ============================================================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fi-page {
    animation: fadeInUp 0.3s ease-out;
}

/* ============================================================================
   SCROLLBAR PERSONALIZADO
   ============================================================================ */
.fi-sidebar::-webkit-scrollbar {
    width: 4px;
}

.fi-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.fi-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.fi-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Scrollbar general */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--marles-card-bg);
}

::-webkit-scrollbar-thumb {
    background: rgba(25, 51, 70, 0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(25, 51, 70, 0.25);
}

/* ============================================================================
   DARK MODE — Adaptacion para modo oscuro (opcional)
   ============================================================================ */
.dark .fi-sidebar {
    background-color: var(--marles-navy-dark) !important;
}

.dark .fi-topbar {
    background-color: var(--marles-navy) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .fi-section,
.dark .fi-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.dark .fi-ta-header-cell {
    background-color: #1e293b !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.dark .fi-ta-row:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.dark .fi-ta-row:hover {
    background-color: rgba(247, 164, 57, 0.08) !important;
}

.dark .fi-main-ctn {
    background-color: #0f172a !important;
}

.dark .fi-wi-stats-overview-stat {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.dark .fi-wi-stats-overview-stat-value {
    color: #FFFFFF !important;
}

.dark .fi-simple-layout {
    background: linear-gradient(135deg, #0a1628 0%, var(--marles-navy-dark) 100%) !important;
}

/* ============================================================================
   FIX: Login labels visibles en dark mode
   html.dark aplica dark:text-white = blanco sobre blanco en el form panel
   ============================================================================ */
html.dark .fi-fo-field-wrp-label span,
html.dark .fi-simple-page label span {
    color: #193346 !important;
}
html.dark .fi-simple-page .fi-input,
html.dark .fi-simple-page input[type='email'],
html.dark .fi-simple-page input[type='password'],
html.dark .fi-simple-page input[type='text'] {
    color: #193346 !important;
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
}