/* ===================================================
   DepEd Custom Theme
   For: Department of Education Philippines
   =================================================== */

/* ===============================
   DEPED BRAND COLORS
================================= */
:root {

    /* Official Brand */
    --ct-primary: #0033A0;
    /* DepEd Blue */
    --ct-primary-rgb: 0, 51, 160;

    --ct-danger: #CE1126;
    /* DepEd Red */
    --ct-danger-rgb: 206, 17, 38;

    --ct-success: #0a7f42;
    --ct-warning: #f4b400;

    /* Links */
    --ct-link-color: #0033A0;
    --ct-link-hover-color: #001f6b;

    /* Active Components */
    --ct-component-active-bg: #0033A0;
    --ct-component-active-color: #ffffff;

    /* Progress */
    --ct-progress-bar-bg: #0033A0;

    /* Hero */
    --ct-hero-bg: linear-gradient(to right, #0033A0, #0056d6);
}

/* ===============================
   SIDEBAR (DepEd Blue)
================================= */
body[data-leftbar-theme="dark"] {
    --ct-bg-leftbar: #0033A0;
    --ct-dark-menu-item: rgba(255, 255, 255, 0.75);
    --ct-dark-menu-item-hover: #ffffff;
    --ct-dark-menu-item-active: #ffffff;
}

/* ===============================
   CARD STYLE (Government Look)
================================= */
.card {
    border-left: 4px solid #0033A0;
}

/* ===============================
   Navbar Styling
================================= */
.navbar-custom {
    border-bottom: 3px solid #0033A0;
}

/* ===============================
   Footer Accent
================================= */
.footer {
    border-top: 2px solid #0033A0;
}

/* =========================================
   DepEd Primary Button Focus State
   ========================================= */

.btn-check:focus+.btn-primary,
.btn-primary:focus {
    color: #fff;
    background-color: #002a80;
    /* Darker DepEd Blue */
    border-color: #002266;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 51, 160, 0.35);
    box-shadow: 0 0 0 0.2rem rgba(0, 51, 160, 0.35);
}



/* ===================================================
   DEPED BUTTON SYSTEM
   =================================================== */

/* ================= PRIMARY ================= */
.btn-primary {
    background-color: #0033A0;
    border-color: #0033A0;
    color: #fff;
}

.btn-primary:hover {
    background-color: #002a80;
    border-color: #002266;
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 51, 160, 0.35);
}

/* ================= DANGER ================= */
.btn-danger {
    background-color: #CE1126;
    border-color: #CE1126;
    color: #fff;
}

.btn-danger:hover {
    background-color: #a10d1d;
    border-color: #8c0b19;
}

.btn-danger:focus {
    box-shadow: 0 0 0 0.2rem rgba(206, 17, 38, 0.35);
}

/* ================= SUCCESS ================= */
.btn-success {
    background-color: #0A7F42;
    border-color: #0A7F42;
    color: #fff;
}

.btn-success:hover {
    background-color: #086735;
    border-color: #075a2e;
}

.btn-success:focus {
    box-shadow: 0 0 0 0.2rem rgba(10, 127, 66, 0.35);
}

/* ================= WARNING ================= */
.btn-warning {
    background-color: #F4B400;
    border-color: #F4B400;
    color: #000;
}

.btn-warning:hover {
    background-color: #d99f00;
    border-color: #c28f00;
}

.btn-warning:focus {
    box-shadow: 0 0 0 0.2rem rgba(244, 180, 0, 0.35);
}

/* ================= INFO ================= */
.btn-info {
    background-color: #1A73E8;
    border-color: #1A73E8;
    color: #fff;
}

.btn-info:hover {
    background-color: #155ec0;
    border-color: #1254aa;
}

.btn-info:focus {
    box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.35);
}

/* ================= SECONDARY ================= */
.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-secondary:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.35);
}

/* ================= DARK ================= */
.btn-dark {
    background-color: #1F2D3D;
    border-color: #1F2D3D;
    color: #fff;
}

.btn-dark:hover {
    background-color: #17222e;
    border-color: #121b24;
}

.btn-dark:focus {
    box-shadow: 0 0 0 0.2rem rgba(31, 45, 61, 0.35);
}

/* ==========================================
   DEPED PRELOADER
   ========================================== */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0033A0;
    /* DepEd Blue */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deped-loader-wrapper {
    text-align: center;
    color: #ffffff;
}

.deped-loader-logo h3 {
    font-weight: 600;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.deped-loader-logo small {
    opacity: 0.85;
    font-size: 13px;
}

/* Loader Animation */
.deped-loader {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.deped-loader span {
    width: 12px;
    height: 12px;
    background: #fff;
    /* DepEd Red */
    border-radius: 50%;
    animation: depedBounce 1.4s infinite ease-in-out both;
}

.deped-loader span:nth-child(1) {
    animation-delay: -0.32s;
}

.deped-loader span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes depedBounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}