/*
 * AquaSkillFlow — Brand Override Stylesheet
 * Laad dit NA adminlte.min.css in layouts/app.blade.php en layouts/auth.blade.php
 */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
    --asf-primary:      #00CFFF;
    --asf-primary-dark: #15929E;
    --asf-sidebar:      #042D4B;
    --asf-accent:       #6FE7F2;
    --asf-wave:         #0A4F6D;
    --asf-bg:           #F4F8FB;
    --asf-border:       #E2ECF5;
    --asf-text:         #1F2A37;
    --asf-muted:        #6B7280;
    --asf-white:        #FFFFFF;
    --asf-success:      #22C55E;
    --asf-warning:      #F59E0B;
    --asf-danger:       #EF4444;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.main-sidebar,
.sidebar {
    background-color: var(--asf-sidebar) !important;
}

.sidebar-dark-primary .nav-sidebar .nav-item.menu-open  > .nav-link,
.sidebar-dark-primary .nav-sidebar .nav-link.active,
.nav-sidebar .nav-item.menu-open > .nav-link,
.nav-sidebar .nav-link.active {
    background-color: var(--asf-primary) !important;
    color: var(--asf-sidebar) !important;
    font-weight: 600;
}

.nav-sidebar .nav-link:hover {
    background-color: rgba(0, 207, 255, 0.15) !important;
    color: var(--asf-primary) !important;
}

.brand-link {
    background-color: var(--asf-sidebar) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.main-header.navbar {
    background-color: var(--asf-white) !important;
    border-bottom: 1px solid var(--asf-border) !important;
}

.main-header .navbar-nav .nav-link {
    color: var(--asf-text) !important;
}

/* ── Page background & typography ───────────────────────────────────────── */
.content-wrapper {
    background-color: var(--asf-bg) !important;
}

body {
    color: var(--asf-text);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--asf-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(4, 45, 75, 0.05) !important;
}

.card-header {
    border-bottom: 1px solid var(--asf-border) !important;
    border-radius: 12px 12px 0 0 !important;
    background-color: var(--asf-white) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    border-radius: 8px !important;
}

.btn-primary {
    background-color: var(--asf-primary) !important;
    border-color: var(--asf-primary) !important;
    color: var(--asf-sidebar) !important;
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--asf-primary-dark) !important;
    border-color: var(--asf-primary-dark) !important;
    color: var(--asf-white) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--asf-primary) !important;
    border-color: var(--asf-primary) !important;
    opacity: 0.65;
}

/* ── Form inputs ─────────────────────────────────────────────────────────── */
.form-control:focus {
    border-color: var(--asf-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 207, 255, 0.2) !important;
}

/* ── Progress bars ───────────────────────────────────────────────────────── */
.progress-bar {
    background: linear-gradient(90deg, var(--asf-primary), var(--asf-primary-dark)) !important;
}

/* ── Status badges ───────────────────────────────────────────────────────── */
.badge-success { background-color: var(--asf-success) !important; }
.badge-warning { background-color: var(--asf-warning) !important; color: var(--asf-sidebar) !important; }
.badge-danger  { background-color: var(--asf-danger) !important; }
.badge-info    { background-color: var(--asf-primary) !important; color: var(--asf-sidebar) !important; }

/* ── Sidebar mini footer / user panel ───────────────────────────────────── */
.user-panel {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ── Main footer ─────────────────────────────────────────────────────────── */
.main-footer {
    border-top: 1px solid var(--asf-border) !important;
    background-color: var(--asf-white) !important;
    color: var(--asf-muted);
}

/* ── Login page ──────────────────────────────────────────────────────────── */
.login-page {
    background-color: var(--asf-bg) !important;
}

.login-box .card {
    border: 1px solid var(--asf-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(4, 45, 75, 0.08) !important;
}

.login-logo a {
    color: var(--asf-sidebar) !important;
}

/* ── Content-header page title ──────────────────────────────────────────── */
.content-header h1 {
    color: var(--asf-text) !important;
    font-weight: 600;
}