/* ==========================
       ADMIN THEME COLORS
========================== */
:root {
    --maroon: #7B1E3A;
    --maroon-dark: #5C152C;
    --light-bg: #f4f6f9;
    --card-bg: #ffffff;
}

/* ==========================
       BASIC BODY
========================== */
body {
    background-color: var(--light-bg);
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

/* ==========================
       COLOR CLASSES
========================== */
.bg-maroon {
    background: linear-gradient(90deg, var(--maroon-dark), var(--maroon));
}

.text-maroon {
    color: var(--maroon);
}

/* ==========================
       NAVBAR
========================== */
.navbar-brand {
    font-size: 1.3rem;
    letter-spacing: 1px;
}

/* ==========================
       DASHBOARD CARDS
========================== */
.dashboard-card {
    border-radius: 18px;
    padding: 28px 10px;
    background: var(--card-bg);
    border: none;
    transition: all 0.3s ease;
}

    .dashboard-card i {
        transition: 0.3s ease;
    }

    .dashboard-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 35px rgba(0, 0, 0, 0.12);
    }

        .dashboard-card:hover i {
            transform: scale(1.15);
        }

/* ==========================
     RESPONSIVE
========================== */
@media (max-width: 768px) {
    .dashboard-card {
        padding: 24px 10px;
    }
}
/* ==========================
   ADMIN LOGIN PAGE
========================== */

.admin-login-bg {
    background: linear-gradient(135deg, #5C152C, #7B1E3A);
}

.login-card {
    border-radius: 18px;
    overflow: hidden;
}

.btn-theme {
    background: linear-gradient(90deg, #7B1E3A, #5C152C);
    color: #fff;
    font-weight: 600;
    border: none;
}

    .btn-theme:hover {
        background: linear-gradient(90deg, #5C152C, #7B1E3A);
        color: #fff;
    }

.form-control:focus {
    border-color: #7B1E3A;
    box-shadow: 0 0 0 0.2rem rgba(123, 30, 58, 0.25);
}
.nav-pills .nav-link.active {
    background-color: var(--theme-color);
}

.text-maroon {
    color: #800000;
}

.card:hover {
    transform: translateY(-4px);
    transition: 0.3s;
}
.update-card {
    border-left: 5px solid #800000;
    transition: 0.3s;
}

    .update-card:hover {
        transform: translateY(-4px);
    }

.text-maroon {
    color: #800000;
}