/* ================================================
   AdminLTE 3 Custom Skin (Light + Dark Mode)
   Primary:   #004666
   Secondary: #00aeff
=================================================== */

/* ---------- Base Variables (Light Mode) ---------- */
:root {
    --primary-color: #004666;
    --secondary-color: #00aeff;
    --primary-text-color: #ffffff; /* white on dark */
    --secondary-text-color: #000000; /* black on light */

    --body-bg: #f4f6f9;
    --body-text: #343a40;
    --card-bg: #ffffff;
    --card-border: #dee2e6;
}

/* ---------- Dark Mode Variables ---------- */
.dark-mode {
    --body-bg: #1e1e2d;
    --body-text: #e0e0e0;
    --card-bg: #2c2c3a;
    --card-border: #3a3a4a;
    --primary-text-color: #ffffff;
    --secondary-text-color: #111111;
}

/* ---------- General ---------- */
body {
    background-color: var(--body-bg);
    color: var(--body-text);
}

/* ---------- Navbar ---------- */
.navbar {
    background-color: var(--primary-color) !important;
    color: var(--primary-text-color) !important;
}

    .navbar a {
        color: var(--primary-text-color) !important;
    }

        .navbar a:hover {
            color: var(--secondary-color) !important;
        }

/* ---------- Sidebar ---------- */
.main-sidebar {
    background-color: var(--primary-color) !important;
    color: var(--primary-text-color) !important;
}

    .main-sidebar .nav-link {
        color: var(--primary-text-color) !important;
    }

        .main-sidebar .nav-link.active {
            background-color: var(--secondary-color) !important;
            color: var(--secondary-text-color) !important;
        }

/* ---------- Cards ---------- */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--body-text);
}

.card-primary {
    border-top: 3px solid var(--primary-color);
}

.card-secondary {
    border-top: 3px solid var(--secondary-color);
}

/* ---------- Buttons ---------- */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-text-color) !important;
}

    .btn-primary:hover {
        background-color: var(--secondary-color) !important;
        border-color: var(--secondary-color) !important;
        color: var(--secondary-text-color) !important;
    }

.btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--secondary-text-color) !important;
}

/* ---------- Alerts ---------- */
.alert-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-text-color);
}

.alert-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--secondary-text-color);
}

/* ---------- Badges ---------- */
.badge-primary {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
}

.badge-secondary {
    background-color: var(--secondary-color);
    color: var(--secondary-text-color);
}

/* ---------- Pagination ---------- */
.page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-text-color);
}

.page-link {
    color: var(--primary-color);
}

    .page-link:hover {
        background-color: var(--secondary-color);
        color: var(--secondary-text-color);
    }

/* ---------- Progress Bars ---------- */
.progress-bar {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
}

    .progress-bar.bg-secondary {
        background-color: var(--secondary-color) !important;
        color: var(--secondary-text-color);
    }

/* ---------- Tables ---------- */
.table .thead-primary th {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
}

.table .thead-secondary th {
    background-color: var(--secondary-color);
    color: var(--secondary-text-color);
}

/* ---------- Links ---------- */
a {
    color: var(--secondary-color);
}

    a:hover {
        color: var(--primary-color);
    }

/* ---------- Auth Boxes ---------- */
.login-box .card-primary,
.register-box .card-primary {
    border-top: 3px solid var(--primary-color);
}