/* Fusion911 - Admin Module Theme Optimizado */

/* Variables CSS - Color Palette */
:root {
    --admin-bg-dark: #1b1a19;
    --admin-bg-medium: #252423;
    --admin-bg-light: #323130;
    --admin-text-primary: #ffffff;
    --admin-text-secondary: #c8c6c4;
    --admin-text-muted: #a19f9d;
    --admin-border: #3b3a39;
    --admin-accent: #2778c4;
    --admin-accent-hover: #3a96dd;
    --admin-danger: #d13438;
    --admin-success: #107c10;
    --admin-warning: #ff8c00;
    --admin-info: #0078d4;
}

/* ===== ESTRUCTURA PRINCIPAL ===== */
.admin-layout {
    background-color: var(--admin-bg-dark);
    color: var(--admin-text-primary);
}

    /* Header */
    .admin-layout .top-header {
        background-color: var(--admin-bg-medium);
        border-bottom: 1px solid var(--admin-border);
        padding: 0.5rem 1rem;
    }

    .admin-layout .navbar-brand {
        color: var(--admin-text-primary);
        font-weight: 500;
    }

    .admin-layout .user-email {
        color: var(--admin-text-secondary);
    }

/* Sidebar */
.admin-sidebar {
    width: 250px;
    background-color: var(--admin-bg-medium);
    overflow-y: auto;
    height: 100%;
    border-right: 1px solid var(--admin-border);
}

/* Área de contenido */
.admin-layout .content-area {
    background-color: var(--admin-bg-dark);
    overflow-y: auto;
}

/* ===== NAVEGACIÓN ===== */
.admin-layout .nav-link {
    color: var(--admin-text-secondary);
    border-radius: 4px;
    margin: 0.2rem 0;
    padding: 0.6rem 1rem;
    transition: all 0.2s;
}

    .admin-layout .nav-link:hover {
        background-color: var(--admin-bg-light);
        color: var(--admin-text-primary);
    }

    .admin-layout .nav-link.active {
        background-color: var(--admin-accent);
        color: white;
    }

/* ===== TARJETAS ===== */
.admin-layout .card,
.admin-layout .card-body {
    background-color: var(--admin-bg-medium);
    color: var(--admin-text-primary);
    border: 1px solid var(--admin-border);
}

.admin-layout .card {
    border-radius: 6px;
}

.admin-layout .card-header {
    background-color: var(--admin-bg-light);
    border-bottom: 1px solid var(--admin-border);
    color: var(--admin-text-primary);
}

.admin-layout .card-footer {
    background-color: var(--admin-bg-light);
    border-top: 1px solid var(--admin-border);
}

/* Tarjetas anidadas */
.admin-layout .card .card {
    background-color: var(--admin-bg-light);
}

/* Textos en tarjetas */
.admin-layout .card .text-muted {
    color: var(--admin-text-secondary);
}

/* ===== TABLAS ===== */
.admin-layout .table {
    color: var(--admin-text-primary);
}

    /* Cabeceras y celdas */
    .admin-layout .table th,
    .admin-layout .table td {
        color: var(--admin-text-primary);
    }

    .admin-layout .table thead th {
        border-bottom-color: var(--admin-border);
    }

/* Tablas con filas alternadas */
.admin-layout .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--admin-bg-light);
}

.admin-layout .table-striped > tbody > tr:nth-of-type(even) {
    background-color: var(--admin-bg-medium);
}

/* Hover en tablas */
.admin-layout .table-hover > tbody > tr:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Enlaces en tablas */
.admin-layout .table a {
    color: var(--admin-accent-hover);
}

    .admin-layout .table a:hover {
        color: var(--admin-accent-hover);
        text-decoration: underline;
    }

/* Botones en tablas */
.admin-table td .btn {
    color: initial;
}

.admin-table .btn-group {
    display: inline-flex;
    gap: 0.5rem;
}

/* ===== LISTGROUP ===== */
.admin-layout .list-group,
.admin-layout .list-group-item {
    background-color: var(--admin-bg-medium);
    border-color: var(--admin-border);
    color: var(--admin-text-primary);
}

    .admin-layout .list-group-item .text-muted {
        color: var(--admin-text-secondary);
    }

/* ===== BOTONES ===== */
/* Botón primario */
.admin-layout .btn-primary {
    background-color: var(--admin-accent);
    border-color: var(--admin-accent);
}

    .admin-layout .btn-primary:hover {
        background-color: var(--admin-accent-hover);
        border-color: var(--admin-accent-hover);
    }

/* Botón outline primario */
.admin-layout .btn-outline-primary {
    color: var(--admin-accent);
    border-color: var(--admin-accent);
}

    .admin-layout .btn-outline-primary:hover {
        background-color: var(--admin-accent);
        color: white;
    }

/* Botones de colores */
.admin-layout .btn-danger {
    background-color: var(--admin-danger);
    border-color: var(--admin-danger);
}

.admin-layout .btn-success {
    background-color: var(--admin-success);
    border-color: var(--admin-success);
}

/* Botones outline */
.admin-layout .btn-outline-secondary,
.admin-layout .btn-outline-danger,
.admin-layout .btn-outline-success {
    color: var(--admin-text-primary);
    border-color: var(--admin-border);
}

    .admin-layout .btn-outline-secondary:hover {
        background-color: var(--admin-bg-light);
        color: var(--admin-text-primary);
    }

/* Botón admin-btn-danger personalizado */
.admin-btn-danger {
    --bs-btn-color: #dc3545;
    --bs-btn-border-color: #dc3545;
    color: #dc3545;
    border-color: #dc3545;
    border-width: 2px;
}

    .admin-btn-danger:hover,
    .admin-btn-danger:focus {
        background-color: #dc3545;
        color: #fff;
    }

/* Botón admin-btn-outline personalizado */
.admin-btn-outline {
    --bs-btn-color: #0dcaf0;
    --bs-btn-border-color: #0dcaf0;
}

/* ===== FORMULARIOS ===== */
.admin-layout .form-control,
.admin-layout .form-select {
    background-color: var(--admin-bg-light);
    border: 1px solid var(--admin-border);
    color: var(--admin-text-primary);
}

    .admin-layout .form-control:focus,
    .admin-layout .form-select:focus {
        background-color: var(--admin-bg-light);
        border-color: var(--admin-accent);
        color: var(--admin-text-primary);
        box-shadow: 0 0 0 0.25rem rgba(39, 120, 196, 0.25);
    }

    .admin-layout .form-control::placeholder {
        color: var(--admin-text-muted);
    }

.admin-layout .form-label {
    color: var(--admin-text-secondary);
}

/* Inputs de solo lectura */
.admin-layout input[readonly],
.admin-layout .form-control[readonly] {
    background-color: var(--admin-bg-dark);
    color: var(--admin-text-secondary);
    border-color: var(--admin-border);
}

/* ===== BADGES ===== */
.admin-layout .badge.bg-success {
    background-color: var(--admin-success);
}

.admin-layout .badge.bg-danger {
    background-color: var(--admin-danger);
}

.admin-layout .badge.bg-warning {
    background-color: var(--admin-warning);
}

.admin-layout .badge.bg-info {
    background-color: var(--admin-info);
}

/* ===== ALERTAS ===== */
.admin-layout .alert-success {
    background-color: rgba(16, 124, 16, 0.15);
    border-color: rgba(16, 124, 16, 0.4);
    color: #85c785;
}

.admin-layout .alert-danger {
    background-color: rgba(209, 52, 56, 0.15);
    border-color: rgba(209, 52, 56, 0.4);
    color: #e59a9a;
}

.admin-layout .alert-warning {
    background-color: rgba(255, 140, 0, 0.15);
    border-color: rgba(255, 140, 0, 0.4);
    color: #ffc166;
}

.admin-layout .alert-info {
    background-color: rgba(0, 120, 212, 0.15);
    border-color: rgba(0, 120, 212, 0.4);
    color: #7abbee;
}

/* ===== DROPDOWNS ===== */
.admin-layout .dropdown-menu {
    background-color: var(--admin-bg-medium);
    border: 1px solid var(--admin-border);
}

.admin-layout .dropdown-item {
    color: var(--admin-text-secondary);
}

    .admin-layout .dropdown-item:hover {
        background-color: var(--admin-bg-light);
        color: var(--admin-text-primary);
    }

.admin-layout .dropdown-divider {
    border-top: 1px solid var(--admin-border);
}

/* ===== MODALES ===== */
.admin-layout .modal-content {
    background-color: var(--admin-bg-medium);
    border: 1px solid var(--admin-border);
    color: var(--admin-text-primary);
}

.admin-layout .modal-header {
    background-color: var(--admin-bg-light);
    border-bottom: 1px solid var(--admin-border);
}

.admin-layout .modal-footer {
    background-color: var(--admin-bg-light);
    border-top: 1px solid var(--admin-border);
}

/* ===== MÉTRICAS ===== */
.admin-layout .metric-box {
    background-color: var(--admin-bg-light);
    border-radius: 6px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.3s;
}

    .admin-layout .metric-box:hover {
        transform: translateY(-5px);
    }

.admin-layout .metric-value {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.admin-layout .metric-label {
    color: var(--admin-text-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== SPINNERS ===== */
.admin-layout .spinner-border {
    border-right-color: transparent;
}

/* ===== TOASTS ===== */
.admin-layout .blazored-toast-container {
    z-index: 9999;
    top: 1.5rem;
    right: 1.5rem;
}

.admin-layout .blazored-toast {
    background-color: var(--admin-bg-medium);
    color: var(--admin-text-primary);
    border-left: 4px solid var(--admin-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    padding: 1rem;
    opacity: 0.95;
}

.admin-layout .blazored-toast-heading {
    color: var(--admin-text-primary);
    font-weight: 600;
}

.admin-layout .blazored-toast-body {
    color: var(--admin-text-secondary);
}

.admin-layout .blazored-toast-progress-bar {
    background-color: var(--admin-accent);
}

/* Colores de toast */
.admin-layout .blazored-toast-success {
    border-left-color: var(--admin-success);
}

    .admin-layout .blazored-toast-success .blazored-toast-progress-bar {
        background-color: var(--admin-success);
    }

.admin-layout .blazored-toast-error {
    border-left-color: var(--admin-danger);
}

    .admin-layout .blazored-toast-error .blazored-toast-progress-bar {
        background-color: var(--admin-danger);
    }

.admin-layout .blazored-toast-warning {
    border-left-color: var(--admin-warning);
}

    .admin-layout .blazored-toast-warning .blazored-toast-progress-bar {
        background-color: var(--admin-warning);
    }

.admin-layout .blazored-toast-info {
    border-left-color: var(--admin-info);
}

    .admin-layout .blazored-toast-info .blazored-toast-progress-bar {
        background-color: var(--admin-info);
    }

/* ===== PROGRESS BARS ===== */
.admin-layout .progress {
    background-color: var(--admin-bg-dark);
}

/* ===== ENLACES ===== */
.admin-layout a:not(.btn):not(.nav-link) {
    color: var(--admin-info);
}

.admin-layout a:not(.btn):not(.nav-link):hover {
    color: var(--admin-accent-hover);
    text-decoration: underline;
}

/* Aumentar la especificidad para los botones Desasignar */
.btn-outline-danger.admin-btn-danger {
    background-color: transparent !important;
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    border-width: 2px !important;
}

    .btn-outline-danger.admin-btn-danger:hover,
    .btn-outline-danger.admin-btn-danger:focus {
        background-color: #dc3545 !important;
        color: #fff !important;
    }

/* Específicamente para los botones dentro de tablas */
.admin-table .btn-outline-danger.admin-btn-danger {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}