html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
body {
    background: #f5f7fb;
    font-family: 'Segoe UI', sans-serif;
}

.sidebar {
    background: #fff;
    min-height: 100vh;
    border-right: 1px solid #ddd;
}

    .sidebar .nav-link {
        color: #444;
        padding: 10px;
        border-radius: 6px;
        margin-bottom: 5px;
    }

        .sidebar .nav-link.active,
        .sidebar .nav-link:hover {
            background: #0d6efd;
            color: #fff;
        }

/* Cards */
.dash-card {
    border-radius: 12px;
    padding: 20px;
    color: #fff;
}

    .dash-card.blue {
        background: #377dff;
    }

    .dash-card.orange {
        background: #ff9f43;
    }

    .dash-card.green {
        background: #28c76f;
    }

.course-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

/* Mobile Sidebar */
@media (max-width: 991px) {
    .sidebar {
        position: fixed;
        left: -100%;
        top: 56px;
        width: 220px;
        height: 100%;
        transition: 0.3s;
        z-index: 1050;
    }

        .sidebar.show {
            left: 0;
        }
}
/* --- existing content unchanged above --- */

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

body {
    background: #f5f7fb;
    font-family: 'Segoe UI', sans-serif;
}

.sidebar {
    background: #fff;
    min-height: 100vh;
    border-right: 1px solid #ddd;
}

    .sidebar .nav-link {
        color: #444;
        padding: 10px;
        border-radius: 6px;
        margin-bottom: 5px;
    }

        .sidebar .nav-link.active,
        .sidebar .nav-link:hover {
            background: #0d6efd;
            color: #fff;
        }

/* Cards */
.dash-card {
    border-radius: 12px;
    padding: 20px;
    color: #fff;
}

    .dash-card.blue {
        background: #377dff;
    }

    .dash-card.orange {
        background: #ff9f43;
    }

    .dash-card.green {
        background: #28c76f;
    }

.course-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

/* Mobile Sidebar */
@media (max-width: 991px) {
    .sidebar {
        position: fixed;
        left: -100%;
        top: 56px;
        width: 220px;
        height: 100%;
        transition: 0.3s;
        z-index: 1050;
    }

        .sidebar.show {
            left: 0;
        }
}

/* ---------------------------
   Responsive top header sizing
   --------------------------- */

.top-nav-controls {
    flex-wrap: wrap; /* allow items to wrap on very small screens */
    gap: .75rem; /* default spacing */
    align-items: center;
}

    /* Icon sizing (SVGs) and clickable button area */
    .top-nav-controls .btn {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: .375rem;
    }

    .top-nav-controls svg {
        width: 20px;
        height: 20px;
    }

/* Avatar and brand sizing */
.header-avatar,
.user-avatar {
    width: 35px;
    height: 35px;
    object-fit: cover;
}

.brand-text {
    font-size: 1rem;
}

/* User name sizing and spacing */
.user-name {
    font-size: .95rem;
    white-space: nowrap;
}

/* Tighten spacing for medium screens */
@media (max-width: 991px) {
    .top-nav-controls .btn {
        width: 32px;
        height: 32px;
    }

    .top-nav-controls svg {
        width: 18px;
        height: 18px;
    }

    .header-avatar,
    .user-avatar {
        width: 30px;
        height: 30px;
    }

    .brand-text {
        font-size: .95rem;
    }

    .user-name {
        font-size: .9rem;
    }

    .top-nav-controls {
        gap: .5rem;
    }
}

/* Small phones: scale down, allow wrapping so controls remain visible */
@media (max-width: 575px) {
    .top-nav-controls .btn {
        width: 28px;
        height: 28px;
    }

    .top-nav-controls svg {
        width: 16px;
        height: 16px;
    }

    .header-avatar,
    .user-avatar {
        width: 26px;
        height: 26px;
    }

    .brand-text {
        font-size: .92rem;
    }

    .user-name {
        font-size: .85rem;
    }

    .top-nav-controls {
        gap: .4rem;
    }

    /* If wrapped, ensure dropdown stays usable */
    .user-dropdown .dropdown-menu {
        min-width: 160px;
    }
}

/* accessibility: ensure focus contrast for icon buttons */
.top-nav-controls .btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.12rem rgba(255,255,255,0.6), 0 0 0 0.22rem rgba(37,140,251,0.25);
}
/* --- existing content above unchanged --- */

/* Ensure top nav stays above any sliding sidebar/content */
.navbar {
    z-index: 1100;
}

/* Force icon buttons to inherit visible color and ensure SVGs render */
.top-nav-controls .btn {
    color: inherit !important; /* ensure text-white applied wins */
    background: transparent; /* no accidental backgrounds */
    border: none;
}

/* Make SVGs respect currentColor and always display as visible elements */
.top-nav-controls .icon-svg {
    display: block;
    vertical-align: middle;
    fill: currentColor; 
}

.top-nav-controls .btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.12rem rgba(255,255,255,0.6), 0 0 0 0.22rem rgba(37,140,251,0.25);
}

/* If the sidebar overlays, keep badges and icons on top */
.top-nav-controls .position-absolute {
    z-index: 1150;
}
/* --- existing content above unchanged --- */

/* Animated hamburger -> cross (X) */
.hamburger {
    --bar-width: 18px;
    --bar-height: 2px;
    --gap: 6px;
    --transition: 260ms cubic-bezier(.2,.8,.2,1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 38px;
    padding: 6px;
    border-radius: .375rem;
    position: relative;
    color: #fff;                  /* bars color (white on dark navbar) */
    background: transparent;      /* transparent so it blends with navbar */
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    z-index: 1250;
}

/* hover & focus affordance */
.hamburger:hover {
    background: rgba(255,255,255,0.04);
}

.hamburger:focus {
    outline: none;
    box-shadow: 0 0 0 0.12rem rgba(255,255,255,0.14);
}

/* bars */
.hamburger .bar {
    display: block;
    width: var(--bar-width);
    height: var(--bar-height);
    background: currentColor; /* uses .hamburger color (#fff) */
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
    transform-origin: center;
}

/* spacing between bars */
.hamburger .bar + .bar {
    margin-top: var(--gap);
}

/* cross state */
.hamburger.is-open .bar:nth-child(1) {
    transform: translateY(calc(var(--gap) * 0.75)) rotate(45deg);
}

.hamburger.is-open .bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.is-open .bar:nth-child(3) {
    transform: translateY(calc(var(--gap) * -0.75)) rotate(-45deg);
}

/* small-screen tweak */
@media (max-width: 575px) {
    .hamburger {
        width: 40px;
        height: 34px;
        --bar-width: 16px;
        --gap: 5px;
    }
}

/* ensure navbar stays on top */
.navbar {
    z-index: 1300;
}