/* Fusion911 - Driver Module Theme (Light) */

/* Variables CSS - Color Palette */
:root {
    --driver-bg-base: #f8f9fa;
    --driver-bg-surface: #ffffff;
    --driver-bg-muted: #e9ecef;
    --driver-text-primary: #212529;
    --driver-text-secondary: #495057;
    --driver-text-muted: #6c757d;
    --driver-border: #dee2e6;
    --driver-accent: #198754;
    --driver-accent-hover: #157347;
    --driver-danger: #dc3545;
    --driver-success: #198754;
    --driver-warning: #ffc107;
    --driver-info: #0dcaf0;
}

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

    /* Header */
    .driver-layout .top-header {
        background-color: var(--driver-accent);
        border-bottom: 1px solid var(--driver-border);
        padding: 0.5rem 1rem;
        color: #ffffff;
    }

    .driver-layout .navbar-brand {
        color: #ffffff;
        font-weight: 500;
    }

    .driver-layout .user-email {
        color: rgba(255, 255, 255, 0.85);
    }

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

/* Area de contenido */
.driver-layout .content-area {
    background-color: var(--driver-bg-base);
    overflow-y: auto;
}

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

    .driver-layout .nav-link:hover {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--driver-text-primary);
    }

    .driver-layout .nav-link.active {
        background-color: var(--driver-accent);
        color: #ffffff;
    }

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

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

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

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

.driver-layout .card .card {
    background-color: var(--driver-bg-base);
}

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

    .driver-layout .table th {
        color: var(--driver-text-primary);
        font-weight: 600;
    }

    .driver-layout .table thead th {
        border-bottom-color: var(--driver-border);
        background-color: var(--driver-bg-muted);
    }

.driver-layout .table-striped {
    --bs-table-striped-bg: rgba(0, 0, 0, 0.02);
}

.driver-layout .table-hover {
    --bs-table-hover-bg: rgba(0, 0, 0, 0.04);
}

.driver-layout .table a {
    color: var(--driver-accent);
}

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

/* ===== BOTONES ===== */
.driver-layout .btn-primary {
    background-color: var(--driver-accent);
    border-color: var(--driver-accent);
}

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

.driver-layout .btn-outline-primary {
    color: var(--driver-accent);
    border-color: var(--driver-accent);
}

    .driver-layout .btn-outline-primary:hover {
        background-color: var(--driver-accent);
        color: #ffffff;
    }

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

    .driver-layout .form-control:focus,
    .driver-layout .form-select:focus {
        border-color: var(--driver-accent);
        box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
    }

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

.driver-layout input[readonly],
.driver-layout .form-control[readonly] {
    background-color: var(--driver-bg-muted);
    color: var(--driver-text-muted);
}

/* ===== ALERTAS ===== */
.driver-layout .alert-success {
    background-color: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
}

.driver-layout .alert-danger {
    background-color: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}

.driver-layout .alert-warning {
    background-color: #fff3cd;
    border-color: #ffecb5;
    color: #664d03;
}

.driver-layout .alert-info {
    background-color: #cff4fc;
    border-color: #b6effb;
    color: #055160;
}

/* ===== DROPDOWNS ===== */
.driver-layout .dropdown-menu {
    background-color: var(--driver-bg-surface);
    border: 1px solid var(--driver-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

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

/* ===== METRICAS ===== */
.driver-layout .metric-box {
    background-color: var(--driver-bg-surface);
    border: 1px solid var(--driver-border);
    border-radius: 6px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.3s;
}

    .driver-layout .metric-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

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

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

/* ===== TOASTS ===== */
.driver-layout .blazored-toast {
    background-color: var(--driver-bg-surface);
    color: var(--driver-text-primary);
    border-left: 4px solid var(--driver-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding: 1rem;
}

.driver-layout .blazored-toast-success {
    border-left-color: var(--driver-success);
}

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

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

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

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

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