/* ===== DARK MODE BASE ===== */
body.dark-mode {
    background-color: #121212;
    color: #e4e4e4;
}

/* ===== CARD ===== */
.dark-mode .card {
    background-color: #1e1e1e;
    border: 1px solid #2c2c2c;
}

/* ===== NAVBAR ===== */
.dark-mode .navbar {
    background-color: #1a1a1a;
}

/* ===== INPUT ===== */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: #1e1e1e;
    color: #fff;
    border: 1px solid #333;
}

/* ===== BUTTON ===== */
.dark-mode .btn {
    background-color: #2a2a2a;
    color: #fff;
    border: none;
}

.dark-mode .btn:hover {
    background-color: #3a3a3a;
}

/* ===== TABLE ===== */
.dark-mode table {
    background-color: #1e1e1e;
}

.dark-mode th {
    background-color: #2a2a2a;
}

/* ===== LINKS ===== */
.dark-mode a {
    color: #66b2ff;
}

/* ===== SCROLLBAR ===== */
.dark-mode ::-webkit-scrollbar {
    width: 8px;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}

.banner-wraper {
    background: url('/public/assets/hero-bg.jpg') center/cover no-repeat !important;
    min-height: 500px !important;
}