/* LIGHT MODE DEFAULTS (Applied when data-bs-theme="light") */

/* @media (prefers-color-scheme: light) {
    data-bs-theme="light";
}

@media (prefers-color-scheme: dark) {
    html {
        data-bs-theme: "dark";
    }
} */

[data-bs-theme="light"] {
    /* 1. Backgrounds */
    --bs-body-bg: #f7f7f7;          /* Canvas White */
    --bs-secondary-bg: #104ecc;     /* Ice Grey (Sidebars/Cards) */
    
    /* 2. Typography */
    --bs-body-color: #111827;       /* Deep Navy (Main Text) */
    --bs-secondary-color: #4B5563;  /* Slate Grey (Subtitles) */

    /* 3. Brand Colors */
    --bs-primary: #2563EB;          /* Core Blue */
    --bs-primary-rgb: 37, 99, 235;  /* Required for bg-opacity utilities */
    
    --bs-success: #0D9488;          /* Vibrant Teal */
    --bs-success-rgb: 13, 148, 136; 

    --bs-danger: #DC2626;           /* Alert Red */
    --bs-danger-rgb: 220, 38, 38;

    /* 4. UI Elements */
    --bs-border-color: #E5E7EB;     /* Light Border */
}

[data-bs-theme="light"] .navbar {
    /* Backgrounds */
    background-color: #104ecc;     /* Ice Grey (Sidebars/Cards) */
    
    /* Brand/Logo Text: Deep Navy */
    --bs-navbar-brand-color: #e9e9e9; 
    --bs-navbar-brand-hover-color: #2563EB; /* Core Blue on hover */

    /* Standard Links: Slate Grey */
    --bs-navbar-color: #cfcfcf; 
    --bs-navbar-hover-color: #111827; /* Darkens on hover */
    
    /* Active Link: Core Blue */
    --bs-navbar-active-color: #96abda; 
    
    /* Mobile Menu Toggler Icon */
    --bs-navbar-toggler-border-color: rgba(17, 24, 39, 0.1);
}

[data-bs-theme="light"] .customSidebar {
    /* Backgrounds */
    background-color: #104ecc !important;     /* Ice Grey (Sidebars/Cards) */
    
    /* Text Color */
    color: #FFFFFF;
    --bs-link-color: #FFFFFF;
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color-rgb: 224, 224, 224;
}

[data-bs-theme="light"] #userMgmtTable {
    /* Backgrounds */
    background-color: #e4e4e4;
}

[data-bs-theme="light"] #table-users {
    /* Backgrounds */
    --bs-table-bg: #ebebeb;
}

/* DARK MODE OVERRIDES (Applied when data-bs-theme="dark") */
[data-bs-theme="dark"] {
    /* 1. Backgrounds */
    --bs-body-bg: #0F172A;          /* Midnight Navy */
    --bs-secondary-bg: #1E293B;     /* Gunmetal (Sidebars/Cards) */
    
    /* 2. Typography */
    --bs-body-color: #F1F5F9;       /* Cloud White */
    --bs-secondary-color: #94A3B8;  /* Mist Grey */

    /* 3. Brand Colors (Lighter for contrast) */
    --bs-primary: #59a1f8;          /* Luminous Blue */
    /* --bs-primary-rgb: 96, 165, 250; */
    --bs-primary-rgb: 66, 146, 245;

    --bs-success: #2DD4BF;          /* Neon Mint */
    /* --bs-success-rgb: 45, 212, 191; */
    --bs-success-rgb: 49, 192, 174;

    --bs-danger: #F87171;           /* Soft Rose */
    --bs-danger-rgb: 248, 113, 113;

    /* 4. UI Elements */
    --bs-border-color: #334155;     /* Deep Ink */
}

/* DARK MODE NAVBAR OVERRIDES */
[data-bs-theme="dark"] .navbar {
    /* Background: Gunmetal for depth against the Midnight page */
    background-color: #1E293B; 
    
    /* Brand/Logo Text: Cloud White */
    --bs-navbar-brand-color: #F1F5F9; 
    --bs-navbar-brand-hover-color: #60A5FA; /* Luminous Blue on hover */

    /* Standard Links: Mist Grey */
    --bs-navbar-color: #94A3B8; 
    --bs-navbar-hover-color: #F1F5F9; /* Brightens on hover */
    
    /* Active Link: Luminous Blue */
    --bs-navbar-active-color: #60A5FA; 
    
    /* Mobile Menu Toggler Icon */
    --bs-navbar-toggler-border-color: rgba(241, 245, 249, 0.1);
}

[data-bs-theme="dark"] .customSidebar {
    /* Background: Gunmetal for depth against the Midnight page */
    background-color: #1E293B !important; 

    /* Text Color */
    color: #FFFFFF;
    --bs-link-color: #FFFFFF !important;
    
    /* Brand/Logo Text: Cloud White */
    --bs-navbar-brand-color: #F1F5F9; 
    --bs-navbar-brand-hover-color: #60A5FA; /* Luminous Blue on hover */

    /* Standard Links: Mist Grey */
    --bs-navbar-color: #94A3B8; 
    --bs-navbar-hover-color: #F1F5F9; /* Brightens on hover */
    
    /* Active Link: Luminous Blue */
    --bs-navbar-active-color: #60A5FA; 
    
    /* Mobile Menu Toggler Icon */
    --bs-navbar-toggler-border-color: rgba(241, 245, 249, 0.1);
}

[data-bs-theme="dark"] #userMgmtTable {
    /* Backgrounds */
    background-color: #131a2d;
}

[data-bs-theme="dark"] #table-users {
    /* Backgrounds */
    --bs-table-bg: #1b243b;
}

html, body{
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    transition: all 0.2s ease;
}

body {
    font-family: "Poppins", sans-serif;
}

.customSidebar {
    position: fixed;
    width: 280px;
    height: 100vh;
}

/* Sets up the animation and default state (pointing right) */
.dropdown-chevron {
    transition: transform 0.3s ease;
    transform: rotate(-90deg); 
}

/* When the menu is OPEN (Bootstrap removes the .collapsed class), point down */
.btn-toggle:not(.collapsed) .dropdown-chevron {
    transform: rotate(0deg); 
}

.toggle-btn {
    position: absolute;
    right: -15px;
    top: 20px;
    background: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 100;
    cursor: pointer;
    transition: transform 0.3s ease;
}

h1 {
    text-align: center;
    margin-top: 20px;
}

#LearnovaLogo {
    margin-right: 4px;
    margin-left: 2.5px;
}

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
    
.login-card {
    max-width: 400px;
    width: 100%;
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    border-radius: 10px;
}
    
.login-card .card-body {
    padding: 2rem;
}
    
.form-control:focus {
    box-shadow: none;
    border-color: #0d6efd;
}

#cyberAnalystIMG {
    object-fit: cover;
}

/* apply to cards that contain media (adjust height as needed) */
.card.media-card {
    height: 220px; /* change to desired card height */
}

/* make image/video overlay without affecting layout */
.card.media-card .card-img-top {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* keep card body readable on top of media */
.card.media-card .card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    background: rgba(0,0,0,0.45); /* optional semi-transparent background */
    color: #fff; /* adjust for contrast */
}

#homeSlideshowCarousel {
    width: 75%;
    height: 50vh; /* Adjust height as needed */
    overflow: hidden;
    position: relative;
    padding: 0;
    margin: 0 auto; /* Center the carousel */
}

#homeSlideshowCarousel .carousel-item {
  height: 100%;
}

#homeSlideshowCarousel .carousel-item img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; Ensures the image covers the container */
    object-position: center center !important; /* Centers the image */
    /* margin-top: -10vh; Adjust this value to center the image vertically; */
}

@media(max-width:991px)
{
    #homeSlideshowCarousel 
    {
        display:none;
    }
}

[data-bs-theme="light"] #loginBackground
{
    width: 100vw;
    height: 100vh;
    background-image: url("/imgs/login/Classroom.png");
    background-color: rgba(255,255,255,0.3);
    background-blend-mode: lighten;
    background-size: cover;
    transition: background-image 0.5s;
}

[data-bs-theme="dark"] #loginBackground
{
    width: 100vw;
    height: 100vh;
    background-image: url("/imgs/login/Classroom-dark.png");
    background-color: rgba(255,255,255,0.3);
    background-blend-mode: lighten;
    background-size: cover;
    transition: background-image 0.5s;
}

/* Base state of the container */
.fade-transition {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* The state applied right before we fetch new content */
.fade-out {
    opacity: 0;
}

.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--bs-box-shadow-lg) !important;
}

.action-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-card:hover {
    background-color: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color) !important;
}

/* Pure CSS Donut Chart */
.css-donut-chart {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    /* Calculations for 40 total courses:
      Completed (3) = 7.5% (Blue)
      Active (15) = 37.5% (Green)
      Not Started (22) = 55% (Gold)
    */
    background: conic-gradient(
        #3b82f6 0% 7.5%, 
        #22c55e 7.5% 45%, 
        #eab308 45% 100%
    );
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The inner circle to make it a donut */
.css-donut-chart::after {
    content: "";
    position: absolute;
    width: 75%; /* Controls the thickness of the donut ring */
    height: 75%;
    border-radius: 50%;
    background-color: #1e2532; /* Matches the card background perfectly */
}