/* Body gradient: Daikin-style blue */
body {
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    color: #000000 !important;

    /* Dynamic multi-step gradient */
    background: linear-gradient(160deg,
    #ffffff 0%,
    #f7fcff 15%,
    #e0f3fb 35%,
    #a0e0f8 60%,
    #44C8F5 80%,
    #1DA1D8 100%
    ) !important;

    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    position: relative !important;
}

body::after {
    content: "" !important;
    position: fixed !important;
    top: -30% !important;
    left: -30% !important;
    width: 160% !important;
    height: 160% !important;
    background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}


/* Apply system font to almost all textual content */
body, h1, h2, h3, h4, h5, h6,
p, span, a, li, div, td, th,
label, button, input, textarea, select,
caption, legend {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}


.week-highlight {
    background: rgba(255, 204, 0, 0.2);
    border-radius: 4px;
}

.bg-slate-900 {
    background: linear-gradient(160deg,
    #ffffff 0% ,       /* pure white at top */
#fefefe 25%,      /* very light off-white */
#f9f9f9 50%,      /* soft neutral white */
#f5f5f5 75%,      /* slightly darker white */
#f0f0f0 100%      /* subtle gray-white at bottom */
) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Sidebar text */
.bg-slate-900 .nav-link,
.bg-slate-900 .navbar-brand {
    color: #333333 !important;
    font-weight: 500 !important;
}

/* Sidebar hover */
.bg-slate-900 .nav-link:hover {
    color: #44C8F5 !important; /* Daikin blue hover */
}

/* Active nav item */
.navbar-vertical .navbar-nav > .nav-item .nav-link.active {
    color: #ffffff !important;
    font-weight: 600 !important;
    background: linear-gradient(145deg, #44C8F5, #1DA1D8) !important; /* Daikin gradient */
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(68, 200, 245, 0.25) !important;
}

/* Inactive nav links */
.navbar-vertical .navbar-nav > .nav-item .nav-link {
    color: #44C8F5 !important; /* Daikin blue */
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

/* Hover effect for inactive links */
.navbar-vertical .navbar-nav > .nav-item .nav-link:hover {
    background: linear-gradient(145deg, #e6f9ff, #d6f2ff) !important; /* soft pastel blue */
    color: #44C8F5 !important;
}

/* Cards for iOS look */
.card {
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 20px rgba(68, 200, 245, 0.1) !important;
    color: #333 !important;
    padding: 0.5rem !important;
}

a.btn.btn-ios {
    background-color: #000000 !important;  /* solid black */
    color: #ffffff !important;             /* white text */
    border: none !important;
    font-weight: 500 !important;
    border-radius: 50px !important;       /* pill shape */
    padding: 0.375rem 0.75rem !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.25) !important;
}

a.btn.btn-ios:hover {
    background-color: #222222 !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.3) !important;
}

a.btn.btn-ios:active {
    background-color: #111111 !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.25) !important;
}

#switchsite  {
    background-color: #000000 !important;  /* solid black */
    color: #ffffff !important;             /* white text */
    border: none !important;
    font-weight: 500 !important;
    border-radius: 50px !important;        /* pill shape */
    padding: 0.375rem 0.75rem !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.25) !important;
}

#switchsite:hover {
    background-color: #222222 !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.3) !important;
}

#switchsite:active {
    background-color: #111111 !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.25) !important;
}

/* Only the main footer with pt-3 */
footer.footer.pt-3 {
    background: transparent !important; /* keep existing page bg */
    padding: 1rem 0 !important;
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important; /* subtle divider */
}

/* copyright text inside this footer */
footer.footer.pt-3 .copyright {
    font-size: 0.85rem !important;
    color: #ffffff !important;
    margin: 0 !important;
}

/* footer links */
footer.footer.pt-3 a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

footer.footer.pt-3 a:hover,
footer.footer.pt-3 a:focus {
    color: #e0f0ff !important;
    text-decoration: underline !important;
}

/* responsive tweak */
@media (max-width: 767px) {
    footer.footer.pt-3 .copyright {
        text-align: center !important;
    }
}
/* Large screens */
@media (min-width: 1200px) {
    .sidebar {
        flex: 1 1 300px;
    }
}

/* Medium screens */
@media (max-width: 1199px) and (min-width: 768px) {
    .sidebar {
        flex: 1 1 200px;
    }
    body {
        font-size: 14px !important;
    }
}

/* Small screens (tablet & mobile) */
@media (max-width: 767px) {
    .wrapper {
        flex-direction: column !important;
    }
    .sidebar {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    .main-content {
        width: 100% !important;
    }
    body {
        font-size: 12px !important;
    }
}