/* ===================================================
   Calendar 2027 January
   Step 5
   =================================================== */

/* ---------- Theme ---------- */

:root{

    --primary:#49d49d;
    --primary-dark:#2bb673;

    --background:#f5f7fb;

    --surface:#ffffff;

    --text:#1f2937;

    --muted:#6b7280;

    --border:#e5e7eb;

    --radius:18px;

    --shadow:0 10px 30px rgba(0,0,0,.08);

}

/* ---------- Reset ---------- */

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

    font-family:
    Inter,
    Segoe UI,
    Arial,
    sans-serif;

}

/* ---------- Navbar ---------- */

.navbar{

    background:#fff !important;

    box-shadow:var(--shadow);

}

.navbar-brand{

    font-size:1.3rem;

    font-weight:700;

}

/* ---------- Hero ---------- */

header{

    background:linear-gradient(
        180deg,
        #ffffff,
        #eefaf5
    );

}

header h1{

    font-weight:800;

}

header p{

    max-width:700px;

    margin:auto;

}

/* ---------- Buttons ---------- */

.btn-success{

    background:var(--primary);

    border:none;

}

.btn-success:hover{

    background:var(--primary-dark);

}

.btn-outline-success{

    color:var(--primary-dark);

    border-color:var(--primary);

}

.btn-outline-success:hover{

    background:var(--primary);

    border-color:var(--primary);

}

/* ---------- Cards ---------- */

.card{

    border:none;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.card-body{

    padding:2rem;

}

/* ---------- Calendar ---------- */

.calendar-table{

    width:100%;

    table-layout:fixed;

    margin-bottom:0;

}

.calendar-table thead th{

    background:var(--primary);

    color:#fff;

    border:none;

    padding:16px;

    font-size:15px;

}

.calendar-table td{

    height:90px;

    vertical-align:top;

    padding:10px;

    font-size:18px;

    transition:.25s;

}

.calendar-table td:hover{

    background:#e8faf2;

}

.calendar-table td div{

    font-weight:700;

}

/* ---------- Feature Icons ---------- */

.fa-2x{

    color:var(--primary-dark);

}

/* ---------- Footer ---------- */

footer{

    background:#fff;

}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

/* ---------- Mobile ---------- */

@media(max-width:768px){

header{

padding:60px 20px;

}

header h1{

font-size:2rem;

}

.calendar-table td{

height:65px;

font-size:15px;

padding:6px;

}

.calendar-table thead th{

font-size:13px;

padding:10px;

}

.card-body{

padding:1rem;

}

}

/* ===========================================
   Step 8
   Dark Theme
=========================================== */

body.dark-mode{

    background:#111827;

    color:#f3f4f6;

}

body.dark-mode .navbar{

    background:#1f2937 !important;

}

body.dark-mode .navbar-brand{

    color:#ffffff !important;

}

body.dark-mode .card{

    background:#1f2937;

    color:#f3f4f6;

}

body.dark-mode footer{

    background:#1f2937;

    color:#d1d5db !important;

}

body.dark-mode header{

    background:linear-gradient(
        180deg,
        #111827,
        #1f2937
    );

}

body.dark-mode .bg-light{

    background:#111827 !important;

}

body.dark-mode .table{

    color:#ffffff;

}

body.dark-mode .calendar-table td{

    border-color:#374151;

}

body.dark-mode .calendar-table td:hover{

    background:#374151;

}

body.dark-mode .btn-outline-success{

    color:#49d49d;

    border-color:#49d49d;

}

body.dark-mode .btn-outline-success:hover{

    color:#fff;

}