/* 
 * ESTILOS TASAZIL PARA ADMIN DASHBOARD
 * Aplicando la misma identidad visual del frontend principal
 */

/* =================================================================
   CLASES PRINCIPALES DEL FRONTEND - PARA USAR EN ADMIN
   ================================================================= */

.buttonTasazil {
    height: 30px;
    text-transform: none;
    background-color: #cbfc7e !important;
    color: #181818 !important;
    border: none;
    border-radius: 3px;
}

.txtLabelInput {
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    color: #181818;
}

.txtBotonTasazil {
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    color: #181818;
}

.inputTasazil {
    background-color: #dad7fa;
}

/* v2.0.12.1: Modal Dark Input - Para modales con fondo oscuro */
.modal-dark-input {
    background-color: #333 !important;
    border-radius: 4px;
}

.modal-dark-input input,
.modal-dark-input .mud-input-slot {
    color: white !important;
}

.modal-dark-input .mud-input-outlined-border {
    border-color: #555 !important;
}

.modal-dark-input:hover .mud-input-outlined-border {
    border-color: #cbfc7e !important;
}

.modal-dark-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: #cbfc7e !important;
}

.txtMenu {
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
}

/* =================================================================
   OVERRIDE GLOBAL PARA ADMIN PAGES - COLORES TASAZIL
   ================================================================= */

/* Aplicar colores Tasazil a todos los botones primarios en admin */
.admin-layout .mud-button-filled-primary,
.admin-layout .mud-fab-primary {
    background-color: #cbfc7e !important;
    color: #181818 !important;
}

.admin-layout .mud-button-outlined-primary {
    border-color: #cbfc7e !important;
    color: #cbfc7e !important;
}

.admin-layout .mud-button-text-primary {
    color: #cbfc7e !important;
}

/* Iconos primarios en verde Tasazil */
.admin-layout .mud-icon-primary {
    color: #cbfc7e !important;
}

/* Links de navegación activos */
.admin-layout .mud-nav-link.mud-nav-link-active {
    background-color: rgba(203, 252, 126, 0.12) !important;
    color: #cbfc7e !important;
    border-left: 3px solid #cbfc7e !important;
}

/* Chips primarios */
.admin-layout .mud-chip-primary {
    background-color: #cbfc7e !important;
    color: #181818 !important;
}

/* Progress circular primario */
.admin-layout .mud-progress-circular-primary {
    color: #cbfc7e !important;
}

/* =================================================================
   CARDS Y CONTENEDORES - ESTILO FRONTEND PRINCIPAL
   ================================================================= */

.admin-layout .mud-paper {
    background-color: white !important;
    box-shadow: none !important; /* Flat design como frontend */
    border: 1px solid #e9ecef;
    border-radius: 3px; /* Mismo border radius que frontend */
}

/* =================================================================
   MÉTRICAS CARDS - USANDO COLORES TASAZIL
   ================================================================= */

.admin-layout .metric-card {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.admin-layout .metric-card .metric-icon-primary {
    color: #cbfc7e !important; /* Verde Tasazil para iconos principales */
    font-size: 32px;
    margin-bottom: 8px;
}

.admin-layout .metric-card .metric-number-primary {
    color: #cbfc7e !important; /* Verde Tasazil para números principales */
    font-weight: 600;
    margin-bottom: 4px;
}

.admin-layout .metric-card .metric-label {
    color: #666;
    font-size: 14px; /* Consistente con txtLabelInput */
}

/* =================================================================
   TABLES - ESTILO CONSISTENTE
   ================================================================= */

.admin-layout .mud-table-head {
    background-color: #f8f9fa !important;
}

.admin-layout .mud-table-head .mud-table-cell {
    color: #181818 !important;
    font-weight: 600;
    font-size: 14px; /* Consistente con txtLabelInput */
}

/* =================================================================
   ALERTS - COLORES CONSISTENTES
   ================================================================= */

.admin-layout .mud-alert-filled-success {
    background-color: #cbfc7e !important;
    color: #181818 !important;
}

/* =================================================================
   INPUTS Y FORMS - ESTILO TASAZIL
   ================================================================= */

.admin-layout .mud-input-filled {
    background-color: #dad7fa !important; /* Mismo que inputTasazil */
}

.admin-layout .mud-input-outlined .mud-input-outlined-border {
    border-color: #cbfc7e !important;
}

.admin-layout .mud-input-focused .mud-input-outlined-border {
    border-color: #cbfc7e !important;
}

/* =================================================================
   NAVEGACIÓN ADMIN - ESTILO CONSISTENTE CON NAV PRINCIPAL
   ================================================================= */

.admin-layout .mud-drawer {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%) !important;
}

.admin-layout .mud-drawer .mud-nav-link {
    color: #d7d7d7 !important;
    font-size: 14px;
    font-weight: 400;
}

.admin-layout .mud-drawer .mud-nav-link:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: white !important;
}

.admin-layout .mud-drawer .mud-nav-link.mud-nav-link-active {
    background-color: rgba(255,255,255,0.37) !important;
    color: white !important;
    border-left: 3px solid #cbfc7e !important;
}

/* =================================================================
   BREADCRUMBS Y NAVEGACIÓN INTERNA
   ================================================================= */

.admin-layout .mud-breadcrumbs .mud-breadcrumb-item a {
    color: #cbfc7e !important;
    text-decoration: none;
}

.admin-layout .mud-breadcrumbs .mud-breadcrumb-separator {
    color: #666;
}

/* =================================================================
   RESPONSIVE - MANTENIENDO CONSISTENCIA
   ================================================================= */

@media (max-width: 960px) {
    .admin-layout .buttonTasazil {
        height: 28px;
        font-size: 13px;
    }
    
    .admin-layout .txtLabelInput {
        font-size: 13px;
    }
}

/* =================================================================
   OVERRIDES ESPECÍFICOS PARA COMPONENTES PROBLEMÁTICOS
   ================================================================= */

/* Asegurar que los colores primarios de MudBlazor usen verde Tasazil */
.admin-layout .mud-theme-primary {
    color: #cbfc7e !important;
}

.admin-layout .mud-color-primary {
    color: #cbfc7e !important;
}

/* Snackbars usando colores Tasazil */
.admin-layout .mud-snackbar-content-success {
    background-color: #cbfc7e !important;
    color: #181818 !important;
}

/* Dividers consistentes */
.admin-layout .mud-divider {
    background-color: #e9ecef;
}