/* =====================================================================
   BluePanel — Soft-blue education theme
   ---------------------------------------------------------------------
   Loaded LAST in both layouts, so it re-skins the components defined in
   site.css / Dashboard.css / modern-table.css / home.css without touching
   their structure. Direction borrowed from the big learning platforms:
     • one calm blue as the only brand colour (Coursera-style discipline)
     • white surfaces on a very light blue-grey canvas, hairline borders,
       almost no shadows or gradients (Google Classroom, Canvas)
     • underline tabs + simple breadcrumbs for course navigation (Moodle 4)
     • dashboard = course cards + "coming up" agenda (Canvas / Moodle)
   Colour is reserved for meaning: blue = action / brand, green = live,
   amber = warning, red = destructive.
   ===================================================================== */

:root {
    /* ── Brand blue scale ── */
    --ed-blue-25:  #F7FAFF;
    --ed-blue-50:  #EEF4FF;
    --ed-blue-100: #E1EBFD;
    --ed-blue-200: #C9DAFB;
    --ed-blue-300: #A9C3F5;
    --ed-blue-400: #7FA3EE;
    --ed-blue-500: #5B87E4;
    --ed-blue-600: #3D6FD9;
    --ed-blue-700: #2F5BBF;
    --ed-blue-800: #264F9F;
    --ed-blue-900: #1D386F;

    /* ── Neutrals (cool, slightly blue) ── */
    --ed-ink:     #1B2A41;
    --ed-ink-2:   #34435A;
    --ed-muted:   #5E6D84;
    --ed-subtle:  #8491A6;
    --ed-line:    #E3E8F1;
    --ed-line-2:  #EEF2F8;
    --ed-input:   #D5DCE8;
    --ed-bg:      #F5F7FB;
    --ed-surface: #FFFFFF;

    /* ── Semantic ── */
    --ed-green:     #15803D;
    --ed-green-500: #22A55B;
    --ed-green-bg:  #EAF7EF;
    --ed-amber:     #B45309;
    --ed-amber-bg:  #FFF6E6;
    --ed-red:       #C62828;
    --ed-red-bg:    #FDEEEE;
    --ed-sky:       #2A7FC1;
    --ed-sky-bg:    #E8F3FB;
    --ed-violet:    #4F5FC4;
    --ed-violet-bg: #EEF0FC;

    /* ── Shape & depth ── */
    --ed-r-sm: 8px;
    --ed-r:    12px;
    --ed-r-lg: 16px;
    --ed-shadow-1: 0 1px 2px rgba(27, 42, 65, .05);
    --ed-shadow-2: 0 2px 10px rgba(27, 42, 65, .06);
    --ed-shadow-3: 0 12px 32px rgba(27, 42, 65, .12);
    --ed-focus:    0 0 0 3px rgba(61, 111, 217, .22);
    --ed-font: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;

    /* ── Legacy variables consumed by Dashboard.css / site.css ── */
    --primary-color:     var(--ed-blue-600);
    --primary-dark:      var(--ed-blue-700);
    --primary-light:     var(--ed-blue-300);
    --secondary-color:   var(--ed-blue-700);
    --secondary-light:   var(--ed-blue-400);
    --info-color:        var(--ed-sky);
    --navbar-height:     64px;
    --bg-secondary:      var(--ed-bg);
    --bg-sidebar-hover:  var(--ed-blue-50);
    --text-primary:      var(--ed-ink);
    --text-secondary:    var(--ed-muted);
    --text-muted:        var(--ed-subtle);
    --text-sidebar:      var(--ed-ink-2);
    --border-color:      var(--ed-line);
    --radius-sm:         var(--ed-r-sm);
    --radius-md:         var(--ed-r);
    --radius-lg:         var(--ed-r-lg);
    --shadow-sm:         var(--ed-shadow-1);
    --shadow-md:         var(--ed-shadow-2);
    --shadow-lg:         var(--ed-shadow-3);
    --pub-primary:       var(--ed-blue-600);
    --pub-primary-dark:  var(--ed-blue-700);
    --pub-secondary:     var(--ed-blue-700);
    --pub-grad-primary:  var(--ed-blue-600);
    --pub-grad-dark:     var(--ed-blue-900);
    --pub-shadow:        var(--ed-shadow-2);
    --pub-shadow-lg:     var(--ed-shadow-3);
    --pub-radius:        var(--ed-r);

    /* ── Bootstrap 5.3 ── */
    --bs-primary: #3D6FD9;
    --bs-primary-rgb: 61, 111, 217;
    --bs-info: #2A7FC1;
    --bs-info-rgb: 42, 127, 193;
    --bs-primary-bg-subtle: #EEF4FF;
    --bs-primary-border-subtle: #C9DAFB;
    --bs-primary-text-emphasis: #264F9F;
    --bs-link-color: #2F5BBF;
    --bs-link-color-rgb: 47, 91, 191;
    --bs-link-hover-color: #264F9F;
    --bs-link-hover-color-rgb: 38, 79, 159;
    --bs-body-font-family: var(--ed-font);
    --bs-body-color: #34435A;
    --bs-body-color-rgb: 52, 67, 90;
    --bs-emphasis-color: #1B2A41;
    --bs-secondary-color: rgba(94, 109, 132, 1);
    --bs-border-color: #E3E8F1;
    --bs-border-radius: 8px;
    --bs-border-radius-lg: 12px;
    --bs-focus-ring-color: rgba(61, 111, 217, .25);
}

/* =====================================================================
   1. BASE & TYPOGRAPHY
   ===================================================================== */
body {
    font-family: var(--ed-font);
    color: var(--ed-ink-2);
    background-color: var(--ed-bg);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html[dir="ltr"] body { line-height: 1.6; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ed-ink);
    font-weight: 700;
    line-height: 1.5;
}

/* Tracking breaks the joins of Persian script — keep it off in RTL */
html[dir="rtl"] body * { letter-spacing: 0; }

::selection { background: var(--ed-blue-200); color: var(--ed-ink); }

:focus-visible { outline: 2px solid var(--ed-blue-500); outline-offset: 2px; }

.text-primary { color: var(--ed-blue-700) !important; }
.text-muted, .text-secondary { color: var(--ed-muted) !important; }
.text-dark { color: var(--ed-ink) !important; }
.bg-light { background-color: var(--ed-bg) !important; }
.border-primary { border-color: var(--ed-blue-400) !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }

/* Calm UI: drop decorative, never-ending animations */
.detail-icon-large,
.detail-hero::before,
.delete-card-header::before,
.alert-danger-modern .alert-icon,
.badge-success,
.sp-live,
.form-card,
.detail-card,
.delete-card,
.alert-validation { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   2. BOOTSTRAP COMPONENTS
   ===================================================================== */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--ed-r-sm);
    --bs-btn-font-family: var(--ed-font);
}

.btn-primary {
    --bs-btn-bg: #3D6FD9;
    --bs-btn-border-color: #3D6FD9;
    --bs-btn-hover-bg: #2F5BBF;
    --bs-btn-hover-border-color: #2F5BBF;
    --bs-btn-active-bg: #264F9F;
    --bs-btn-active-border-color: #264F9F;
    --bs-btn-disabled-bg: #3D6FD9;
    --bs-btn-disabled-border-color: #3D6FD9;
    --bs-btn-focus-shadow-rgb: 61, 111, 217;
}

.btn-outline-primary {
    --bs-btn-color: #2F5BBF;
    --bs-btn-border-color: #A9C3F5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3D6FD9;
    --bs-btn-hover-border-color: #3D6FD9;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2F5BBF;
    --bs-btn-active-border-color: #2F5BBF;
    --bs-btn-disabled-color: #3D6FD9;
    --bs-btn-disabled-border-color: #A9C3F5;
    --bs-btn-focus-shadow-rgb: 61, 111, 217;
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2A7FC1;
    --bs-btn-border-color: #2A7FC1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #236CA5;
    --bs-btn-hover-border-color: #236CA5;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1E5E90;
    --bs-btn-active-border-color: #1E5E90;
}

.btn-outline-secondary {
    --bs-btn-color: #34435A;
    --bs-btn-border-color: #D5DCE8;
    --bs-btn-hover-color: #1B2A41;
    --bs-btn-hover-bg: #F1F4F9;
    --bs-btn-hover-border-color: #C3CCDB;
    --bs-btn-active-color: #1B2A41;
    --bs-btn-active-bg: #E3E8F1;
    --bs-btn-active-border-color: #C3CCDB;
}

.btn-light {
    --bs-btn-bg: #F1F4F9;
    --bs-btn-border-color: #F1F4F9;
    --bs-btn-hover-bg: #E3E8F1;
    --bs-btn-hover-border-color: #E3E8F1;
}

.form-control,
.form-select {
    border-color: var(--ed-input);
    border-radius: var(--ed-r-sm);
    color: var(--ed-ink);
}

.form-control::placeholder { color: #A3AEC0; }

.form-control:focus,
.form-select:focus {
    border-color: var(--ed-blue-400);
    box-shadow: var(--ed-focus) !important;
}

.form-check-input:checked {
    background-color: var(--ed-blue-600);
    border-color: var(--ed-blue-600);
}

.form-check-input:focus { border-color: var(--ed-blue-400); box-shadow: var(--ed-focus); }

.form-label { font-weight: 600; color: var(--ed-ink-2); font-size: .9rem; }

.card {
    --bs-card-border-color: var(--ed-line);
    --bs-card-border-radius: var(--ed-r);
    --bs-card-inner-border-radius: calc(var(--ed-r) - 1px);
    --bs-card-cap-bg: #fff;
}

.card.border-0 { border: 1px solid var(--ed-line) !important; }
.card.shadow-sm, .shadow-sm { box-shadow: var(--ed-shadow-1) !important; }
.card.shadow, .shadow { box-shadow: var(--ed-shadow-2) !important; }
.rounded-4 { border-radius: var(--ed-r-lg) !important; }

.modal-content {
    border: 0;
    border-radius: var(--ed-r-lg);
    box-shadow: var(--ed-shadow-3);
}

.modal-header { border-bottom-color: var(--ed-line); }
.modal-footer { border-top-color: var(--ed-line); }

.dropdown-menu {
    --bs-dropdown-border-color: var(--ed-line);
    --bs-dropdown-border-radius: var(--ed-r);
    --bs-dropdown-link-active-bg: var(--ed-blue-50);
    --bs-dropdown-link-active-color: var(--ed-blue-800);
    --bs-dropdown-link-hover-bg: var(--ed-bg);
    box-shadow: var(--ed-shadow-3);
}

.alert { border-radius: 10px; }
.alert-modern { border-width: 1px; box-shadow: none; }

.table {
    --bs-table-hover-bg: var(--ed-blue-25);
    --bs-table-striped-bg: #F9FBFE;
    --bs-table-border-color: var(--ed-line-2);
}

.progress { --bs-progress-bar-bg: var(--ed-blue-600); --bs-progress-bg: var(--ed-blue-50); }

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ed-blue-600);
}

.pagination {
    --bs-pagination-color: var(--ed-blue-700);
    --bs-pagination-active-bg: var(--ed-blue-600);
    --bs-pagination-active-border-color: var(--ed-blue-600);
    --bs-pagination-border-color: var(--ed-line);
}

.badge.bg-primary { background-color: var(--ed-blue-600) !important; }
.bg-info { background-color: var(--ed-sky) !important; }

/* =====================================================================
   3. PANEL SHELL — sidebar, top bar, footer
   ===================================================================== */
#sidebar-wrapper {
    background: #fff;
    border-inline-end: 1px solid var(--ed-line);
    box-shadow: none;
}

#sidebar-wrapper .sidebar-brand {
    padding: 1rem 1.25rem;
    gap: .8rem;
    margin-bottom: .5rem;
    min-height: 72px;
    border-bottom: 1px solid var(--ed-line-2);
}

#sidebar-wrapper .brand-text h5 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ed-ink);
    margin-bottom: 0;
}

#sidebar-wrapper .brand-text small { font-size: .75rem; color: var(--ed-subtle); }

#sidebar-wrapper .brand-institute {
    background: var(--ed-blue-50);
    border-color: var(--ed-blue-100);
    color: var(--ed-blue-800);
}

#sidebar-wrapper .sidebar-nav { padding: .25rem .75rem; }
#sidebar-wrapper .nav-section { margin-bottom: 1.1rem; }

#sidebar-wrapper .nav-section-title {
    font-size: .74rem;
    font-weight: 700;
    color: var(--ed-subtle);
    text-transform: none;
    padding: .35rem .85rem;
    margin-bottom: .15rem;
}

#sidebar-wrapper .sidebar-menu .nav-item { margin-bottom: 2px; }

#sidebar-wrapper .sidebar-menu .nav-link {
    min-height: 44px;
    padding: .45rem .7rem;
    border-radius: 10px;
    color: var(--ed-ink-2);
    font-size: .93rem;
    transition: background-color .15s ease, color .15s ease;
}

#sidebar-wrapper .sidebar-menu .nav-link:hover {
    background: var(--ed-bg);
    color: var(--ed-ink);
    transform: none;
}

#sidebar-wrapper .sidebar-menu .nav-link.active {
    background: var(--ed-blue-50);
    color: var(--ed-blue-800);
    box-shadow: none;
}

#sidebar-wrapper .sidebar-menu .nav-link.active .nav-text { font-weight: 700; }

#sidebar-wrapper .nav-icon {
    width: 34px;
    height: 34px;
    margin: 0;
    margin-inline-end: .7rem;
    border-radius: 9px;
    background: transparent;
    color: var(--ed-subtle);
    font-size: 1rem;
}

#sidebar-wrapper .nav-link:hover .nav-icon { color: var(--ed-blue-600); }

#sidebar-wrapper .nav-link.active .nav-icon {
    background: #fff;
    color: var(--ed-blue-600);
    box-shadow: 0 1px 3px rgba(27, 42, 65, .1);
}

#sidebar-wrapper .nav-indicator {
    left: auto;
    right: auto;
    inset-inline-start: -.75rem;
    width: 4px;
    height: 24px;
    background: var(--ed-blue-600);
    border-radius: 0;
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
}

/* Online-users widget */
#sidebar-wrapper .ou-widget {
    margin: .25rem .75rem 1rem;
    background: var(--ed-bg);
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-r);
}

#sidebar-wrapper .ou-header { color: var(--ed-ink-2); border-bottom-color: var(--ed-line); font-size: .8rem; }
#sidebar-wrapper .ou-count { background: var(--ed-blue-100); color: var(--ed-blue-800); }
#sidebar-wrapper .ou-item:hover { background: #fff; }
#sidebar-wrapper .ou-name { color: var(--ed-ink-2); }

.ou-avatar.ou-systemadmin { background: var(--ed-blue-600); }
.ou-avatar.ou-schooladmin { background: var(--ed-sky); }
.ou-avatar.ou-teacher     { background: #D48A10; }
.ou-avatar.ou-student     { background: var(--ed-green-500); }

.ou-role-badge.ou-systemadmin { background: var(--ed-blue-50);  color: var(--ed-blue-800); }
.ou-role-badge.ou-schooladmin { background: var(--ed-sky-bg);   color: #1F6699; }
.ou-role-badge.ou-teacher     { background: var(--ed-amber-bg); color: var(--ed-amber); }
.ou-role-badge.ou-student     { background: var(--ed-green-bg); color: var(--ed-green); }

#sidebar-wrapper .sidebar-footer {
    background: #fff;
    border-top: 1px solid var(--ed-line-2);
    padding: .5rem 1rem;
}

#sidebar-wrapper .sidebar-footer-content { padding: .35rem .5rem; color: var(--ed-subtle); }
#sidebar-wrapper .sidebar-footer-content i { color: var(--ed-blue-400); font-size: 1rem; }

/* Top bar */
.top-navbar {
    height: 64px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--ed-line);
    box-shadow: none;
}

.btn-toggle,
.btn-icon {
    width: 40px;
    height: 40px;
    background: transparent;
    color: var(--ed-muted);
    border-radius: 10px;
}

.btn-toggle:hover,
.btn-icon:hover {
    background: var(--ed-bg);
    color: var(--ed-blue-700);
}

.page-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ed-ink);
}

.page-subtitle { color: var(--ed-muted); }

.user-profile-btn {
    height: 44px;
    background: #fff;
    border: 1px solid var(--ed-line);
    border-radius: 999px;
    padding-block: 3px;
    padding-inline-start: 3px;
    padding-inline-end: .85rem;
    gap: .6rem;
}

.user-profile-btn:hover { background: var(--ed-bg); border-color: #D5DCE8; }

.user-avatar,
.user-avatar-large {
    border-radius: 50%;
    background: var(--ed-blue-100);
    color: var(--ed-blue-700);
}

.user-avatar { width: 36px; height: 36px; font-size: .9rem; }
.user-name { color: var(--ed-ink); }

.notification-menu,
.user-menu {
    border: 1px solid var(--ed-line);
    border-radius: 14px;
    box-shadow: var(--ed-shadow-3);
}

.notification-header,
.notification-footer,
.user-menu-header { background: #fff; }
.notification-item.unread { background: var(--ed-blue-25); }
.notification-item.unread:hover { background: var(--ed-blue-50); }

.badge-notification { background: #E5484D; }

.impersonation-banner {
    top: 64px;
    background: #FFF6E6;
    color: #7A4A06;
    border-bottom: 1px solid #F6DDB0;
    box-shadow: none;
}

.impersonation-banner i { color: #B45309; }

.impersonation-banner .btn-exit-impersonate {
    background: #fff;
    color: #7A4A06;
    border-color: #F0CF93;
}

.impersonation-banner .btn-exit-impersonate:hover { background: #FFEFD2; }

.main-content {
    padding: 1.5rem 1.75rem 2.5rem;
    min-height: calc(100vh - 64px - 56px);
}

/* Readable line length on very wide monitors */
.main-content > .container-fluid,
.main-content > div > .container-fluid {
    max-width: 1480px;
    margin-inline: auto;
}

.main-footer { background: transparent; border-top: 1px solid var(--ed-line); }
.footer-content { color: var(--ed-subtle); }
.footer-left a { color: var(--ed-muted); }

@media (max-width: 768px) {
    .main-content { padding: 1rem .75rem 2rem; }
}

/* =====================================================================
   4. PAGE HEADERS (index pages)
   ===================================================================== */
.idx-head,
.page-header-area {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 .25rem;
    margin-bottom: 1.25rem;
}

.idx-head-info { gap: .9rem; }

.idx-head-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #fff !important;
    color: var(--ed-blue-600) !important;
    border: 1px solid var(--ed-line);
    box-shadow: var(--ed-shadow-1);
    font-size: 1.1rem;
}

.idx-head-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ed-ink);
    line-height: 1.4;
}

.idx-head-sub {
    font-size: .88rem;
    color: var(--ed-muted);
    margin: .1rem 0 0;
}

.page-header {
    background: #fff !important;
    color: var(--ed-ink) !important;
    border: 1px solid var(--ed-line);
    box-shadow: var(--ed-shadow-1) !important;
}

/* =====================================================================
   5. BUTTONS (custom families → one primary, one secondary)
   ===================================================================== */
.btn-idx-add,
.btn-modern-primary,
.btn-edit-modern,
.btn-copy,
.btn-excel-import {
    background: var(--ed-blue-600) !important;
    color: #fff !important;
    border: 1px solid var(--ed-blue-600) !important;
    border-radius: var(--ed-r-sm);
    box-shadow: 0 1px 2px rgba(27, 42, 65, .1) !important;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease;
}

.btn-idx-add:hover,
.btn-modern-primary:hover,
.btn-edit-modern:hover,
.btn-copy:hover,
.btn-excel-import:hover {
    background: var(--ed-blue-700) !important;
    border-color: var(--ed-blue-700) !important;
    transform: none !important;
    color: #fff !important;
}

.btn-copy.copied { background: var(--ed-green-500) !important; border-color: var(--ed-green-500) !important; }

.btn-modern-secondary,
.btn-back-modern,
.btn-cancel-secondary,
.btn-excel-sample {
    background: #fff !important;
    color: var(--ed-ink-2) !important;
    border: 1px solid var(--ed-input) !important;
    border-radius: var(--ed-r-sm);
    box-shadow: none !important;
    font-weight: 600;
}

.btn-modern-secondary:hover,
.btn-back-modern:hover,
.btn-cancel-secondary:hover,
.btn-excel-sample:hover {
    background: var(--ed-bg) !important;
    border-color: #C3CCDB !important;
    color: var(--ed-ink) !important;
    transform: none !important;
}

.btn-delete-danger {
    background: #D93636 !important;
    border: 1px solid #D93636;
    box-shadow: none !important;
    border-radius: var(--ed-r-sm);
}

.btn-delete-danger:hover {
    background: #B92B2B !important;
    transform: none !important;
}

/* =====================================================================
   6. STAT TILES
   ===================================================================== */
.idx-stats { gap: .85rem; }

.idx-stat {
    border-radius: var(--ed-r);
    border: 1px solid var(--ed-line);
    box-shadow: var(--ed-shadow-1);
    padding: 1rem 1.1rem;
}

.idx-stat:hover { transform: none; box-shadow: var(--ed-shadow-2); }

.idx-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    box-shadow: none !important;
}

.si-purple { background: var(--ed-blue-50)   !important; color: var(--ed-blue-600) !important; }
.si-cyan   { background: var(--ed-sky-bg)    !important; color: var(--ed-sky)      !important; }
.si-green  { background: var(--ed-green-bg)  !important; color: var(--ed-green)    !important; }
.si-red    { background: var(--ed-red-bg)    !important; color: var(--ed-red)      !important; }
.si-amber  { background: var(--ed-amber-bg)  !important; color: var(--ed-amber)    !important; }
.si-violet { background: var(--ed-violet-bg) !important; color: var(--ed-violet)   !important; }

.idx-stat-num { font-size: 1.5rem; font-weight: 800; color: var(--ed-ink); }
.idx-stat-lbl { font-size: .8rem; color: var(--ed-muted); }

/* =====================================================================
   7. CARDS & TABLES
   ===================================================================== */
.idx-card,
.users-card {
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-r);
    box-shadow: var(--ed-shadow-1);
}

.idx-card-header {
    background: #fff;
    border-bottom: 1px solid var(--ed-line);
    padding: .9rem 1.25rem;
}

.idx-card-header-title { font-size: .95rem; font-weight: 700; color: var(--ed-ink); }
.idx-card-header-title i { color: var(--ed-blue-500); }
.idx-card-header-count { background: var(--ed-blue-50); color: var(--ed-blue-800); }

.table-modern th {
    background: var(--ed-bg);
    color: var(--ed-muted);
    font-size: .8rem;
    font-weight: 700;
    text-transform: none;
    border-bottom: 1px solid var(--ed-line);
    padding: .75rem 1.25rem;
}

.table-modern td {
    color: var(--ed-ink-2);
    border-color: var(--ed-line-2);
    padding: .85rem 1.25rem;
}

.idx-card .table-responsive .table-modern tbody tr:hover { background: var(--ed-blue-25); }

.cell-icon {
    background: var(--ed-blue-50) !important;
    color: var(--ed-blue-600) !important;
    border-radius: 10px;
    box-shadow: none !important;
}

.cell-avatar {
    background: var(--ed-blue-100);
    color: var(--ed-blue-800);
    box-shadow: none;
}

.entity-avatar,
.entity-icon {
    background: var(--ed-blue-100);
    color: var(--ed-blue-800);
    box-shadow: none;
}

.cell-name { color: var(--ed-ink); }
.cell-sub, .cell-date .date-time { color: var(--ed-subtle); }
.cell-url { color: var(--ed-blue-700); }
.cell-capacity { background: var(--ed-bg); color: var(--ed-ink-2); }

.idx-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--ed-blue-50);
    color: var(--ed-blue-400);
    font-size: 2rem;
}

.idx-empty h5 { color: var(--ed-ink); }
.idx-empty p  { color: var(--ed-muted); }

.idx-pager { background: #fff; border-top-color: var(--ed-line); }
.pager-btn { border-color: var(--ed-line); color: var(--ed-ink-2); }
.pager-btn:hover { background: var(--ed-bg); }
.pager-btn.active { background: var(--ed-blue-600); border-color: var(--ed-blue-600); box-shadow: none; }

/* Status & role pills */
.status-pill {
    font-size: .78rem;
    font-weight: 600;
    padding: .28rem .72rem;
}

.sp-active   { background: var(--ed-green-bg); color: var(--ed-green); }
.sp-inactive { background: var(--ed-red-bg);   color: var(--ed-red); }
.sp-upcoming { background: var(--ed-blue-50);  color: var(--ed-blue-800); }
.sp-live     { background: var(--ed-green-bg); color: var(--ed-green); }
.sp-ended    { background: #EEF1F6;            color: var(--ed-muted); }
.sp-warning  { background: var(--ed-amber-bg); color: var(--ed-amber); }

.rp-admin   { background: var(--ed-violet-bg); color: var(--ed-violet); border-color: #D9DDF8; }
.rp-teacher { background: var(--ed-blue-50);   color: var(--ed-blue-800); border-color: var(--ed-blue-200); }
.rp-purple  { background: var(--ed-violet-bg); color: var(--ed-violet); }

.badge-info      { background: var(--ed-blue-600) !important; color: #fff; }
.badge-success   { background: #16A34A !important; color: #fff; }
.badge-secondary { background: #7A879C !important; color: #fff; }
.badge-warning   { background: #D48A10 !important; color: #fff; }
.badge-danger    { background: #D93636 !important; color: #fff; }
.badge-primary   { background: var(--ed-blue-600) !important; color: #fff; }
.badge-active    { background: var(--ed-green-bg) !important; color: var(--ed-green) !important; }
.badge-inactive  { background: var(--ed-red-bg) !important;   color: var(--ed-red) !important; }
.badge-modern, .badge-role { box-shadow: none; }

/* Row action buttons: neutral chips with a coloured icon */
.act-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ed-line);
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.act-btn:hover { transform: none; box-shadow: none !important; }

.act-view,  .act-copy  { background: #fff; color: var(--ed-blue-600); }
.act-edit              { background: #fff; color: #B7791F; }
.act-del               { background: #fff; color: var(--ed-red); }
.act-users             { background: #fff; color: var(--ed-green); }
.act-link              { background: #fff; color: #0F7F65; }
.act-ghost, .act-files { background: #fff; color: var(--ed-violet); }

.act-view:hover,  .act-copy:hover  { background: var(--ed-blue-50);   border-color: var(--ed-blue-200); color: var(--ed-blue-700); }
.act-edit:hover                    { background: var(--ed-amber-bg);  border-color: #F3D9A8;            color: var(--ed-amber); }
.act-del:hover                     { background: var(--ed-red-bg);    border-color: #F3C4C4;            color: var(--ed-red); }
.act-users:hover                   { background: var(--ed-green-bg);  border-color: #BFE5CD;            color: var(--ed-green); }
.act-link:hover                    { background: #E7F6F1;             border-color: #BCE3D6;            color: #0F7F65; }
.act-ghost:hover, .act-files:hover { background: var(--ed-violet-bg); border-color: #D4D9F6;            color: var(--ed-violet); }
.act-copy.copied { background: var(--ed-green-bg); color: var(--ed-green); border-color: #BFE5CD; }

.act-group-labeled .act-btn { border-radius: 10px; }

/* Legacy .btn-action (outlined circle buttons) */
.btn-action { border-width: 1px; border-radius: 8px; }
.btn-action:hover { transform: none; box-shadow: none; }

/* =====================================================================
   8. FORMS (create / edit pages)
   ===================================================================== */
.form-card {
    border: 1px solid var(--ed-line) !important;
    border-radius: 14px;
    box-shadow: var(--ed-shadow-1);
}

.form-card .form-card-header,
.form-card[class*="theme-"] .form-card-header {
    background: #fff;
    color: var(--ed-ink);
    border-bottom: 1px solid var(--ed-line);
    padding: 1.25rem 1.5rem;
}

.form-card-header::before { display: none; }

.form-card-header h4,
.form-card-header h5,
.form-card-header-text h4,
.form-card-header-text h5 {
    color: var(--ed-ink);
    font-size: 1.2rem;
    font-weight: 800;
}

.form-card-header .subtitle,
.form-card-header-text .subtitle {
    color: var(--ed-muted);
    opacity: 1;
    font-size: .88rem;
}

.form-header-icon-badge,
.form-card.theme-institute .form-header-icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--ed-blue-50);
    border: 1px solid var(--ed-blue-100);
    color: var(--ed-blue-600);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    font-size: 1.15rem;
}

.form-card.theme-server .form-header-icon-badge {
    background: var(--ed-amber-bg);
    border-color: #F6DDB0;
    color: var(--ed-amber);
}

.form-card-body { padding: 1.5rem; }

.form-section { margin-bottom: 1.75rem; }

.form-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ed-ink);
    border-bottom: 1px solid var(--ed-line);
    padding-bottom: .65rem;
    margin-bottom: 1.15rem;
    gap: .6rem;
}

.form-section-title i,
.form-card[class*="theme-"] .form-section-title i {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ed-blue-50);
    color: var(--ed-blue-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}

.form-card.theme-server .form-section-title i { background: var(--ed-amber-bg); color: var(--ed-amber); }

.form-group-modern { margin-bottom: 1.15rem; }

.form-group-modern label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--ed-ink-2);
    margin-bottom: .4rem;
}

.input-group-modern .input-group-text {
    background: var(--ed-bg);
    border: 1px solid var(--ed-input);
    color: var(--ed-subtle);
    font-size: .95rem;
    padding: .6rem .85rem;
}

.input-group-modern .form-control,
.input-group-modern .form-select {
    border: 1px solid var(--ed-input);
    padding: .6rem .85rem;
    font-size: .93rem;
}

.input-group-modern .form-control:focus,
.input-group-modern .form-select:focus {
    border-color: var(--ed-blue-400);
    box-shadow: none !important;
}

.input-group-modern:focus-within {
    border-radius: var(--ed-r-sm);
    box-shadow: var(--ed-focus);
}

.input-group-modern .form-control:focus ~ .input-group-text,
.input-group-modern:focus-within .input-group-text {
    background: var(--ed-blue-50);
    border-color: var(--ed-blue-400);
    color: var(--ed-blue-600);
}

.input-group-modern .form-control:read-only { background: var(--ed-bg); }

.form-text-modern { font-size: .82rem; color: var(--ed-muted); }

.form-footer {
    background: var(--ed-bg);
    border-top: 1px solid var(--ed-line);
    padding: 1rem 1.5rem;
}

.form-divider { height: 1px; background: var(--ed-line); }

.alert-validation {
    background: var(--ed-red-bg);
    border: 1px solid #F3C4C4;
    border-radius: 10px;
}

.alert-validation:empty,
.alert-validation.validation-summary-valid { display: none; }

/* =====================================================================
   9. DELETE & DETAIL PAGES
   ===================================================================== */
.delete-card,
.detail-card {
    border: 1px solid var(--ed-line) !important;
    border-radius: 14px;
    box-shadow: var(--ed-shadow-1);
}

.delete-card-header {
    background: #fff;
    color: var(--ed-red);
    border-bottom: 1px solid var(--ed-line);
    border-top: 3px solid #E5484D;
    padding: 1.25rem 1.5rem;
}

.delete-card-header h5 { font-size: 1.15rem; font-weight: 800; color: var(--ed-red); }
.delete-card-body { padding: 1.75rem 1.5rem; }

.alert-danger-modern {
    background: var(--ed-red-bg);
    border: 1px solid #F3C4C4;
    box-shadow: none;
    border-radius: var(--ed-r);
}

.alert-danger-modern .alert-icon { font-size: 1.75rem; }

.info-section-title {
    color: var(--ed-ink);
    font-size: 1rem;
    font-weight: 700;
    border-bottom: 1px solid var(--ed-line);
}

.info-box {
    background: var(--ed-bg);
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-r);
    box-shadow: none;
}

.secret-badge { background: var(--ed-ink-2); box-shadow: none; }

.status-badge-active,
.status-badge-success { background: var(--ed-green-bg) !important; color: var(--ed-green) !important; box-shadow: none; }
.status-badge-inactive { background: var(--ed-red-bg) !important; color: var(--ed-red) !important; box-shadow: none; }
.status-badge-warning { background: var(--ed-amber-bg) !important; color: var(--ed-amber) !important; box-shadow: none; }

.detail-card-header {
    background: #fff;
    color: var(--ed-ink);
    border-bottom: 1px solid var(--ed-line);
    padding: 1.1rem 1.5rem;
}

.detail-card-header h4 { color: var(--ed-ink); font-size: 1.2rem; font-weight: 800; }

.detail-card-header .btn-back {
    background: #fff;
    border: 1px solid var(--ed-input);
    color: var(--ed-ink-2);
}

.detail-card-header .btn-back:hover { background: var(--ed-bg); color: var(--ed-ink); transform: none; }

.detail-hero {
    background: linear-gradient(180deg, var(--ed-blue-50) 0%, #fff 100%);
    border-bottom: 1px solid var(--ed-line);
    padding: 2.25rem 1.5rem 2rem;
}

.detail-hero::before { display: none; }

.detail-icon-large {
    width: 96px;
    height: 96px;
    background: var(--ed-blue-600);
    box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--ed-blue-200);
    margin-bottom: 1.25rem;
}

.detail-icon-large i { font-size: 2.6rem; }
.detail-hero h3 { font-size: 1.5rem; font-weight: 800; }
.detail-hero .subtitle { font-size: .95rem; color: var(--ed-muted); }

.badge-detail-large {
    background: #fff;
    color: var(--ed-blue-800);
    border: 1px solid var(--ed-blue-200);
    box-shadow: none;
    font-size: .85rem;
}

.detail-info-cards,
.detail-classes-section { background: var(--ed-bg); }

.detail-info-card,
.detail-class-row {
    border: 1px solid var(--ed-line);
    box-shadow: none;
}

.detail-info-card:hover { transform: none; box-shadow: var(--ed-shadow-2); }
.detail-class-row:hover { box-shadow: var(--ed-shadow-2); }

.detail-info-card h5,
.detail-classes-section h5,
.detail-id-section h5 { font-size: 1.05rem; font-weight: 800; }

.detail-info-card h5 i,
.detail-classes-section h5 i,
.detail-id-section h5 i { color: var(--ed-blue-600); }

.detail-classes-count { background: var(--ed-blue-50); color: var(--ed-blue-800); }

.copy-input-group .input-group { box-shadow: none; border: 1px solid var(--ed-input); }
.copy-input-group .form-control { border: 0; background: var(--ed-bg); }

/* =====================================================================
   10. DASHBOARD HOME
   ===================================================================== */
.dash-welcome {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.6rem 1.9rem;
    margin-bottom: 1.25rem;
    border-radius: var(--ed-r-lg);
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 45%),
        linear-gradient(135deg, #EEF4FF 0%, #E3ECFD 100%);
    border: 1px solid var(--ed-blue-100);
    overflow: hidden;
}

.dash-welcome-text { position: relative; z-index: 1; min-width: 0; }

.dash-welcome-inst {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .2rem .7rem .2rem .25rem;
    padding-inline: .25rem .75rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ed-blue-100);
    font-size: .78rem;
    font-weight: 600;
    color: var(--ed-blue-800);
    margin-bottom: .7rem;
    max-width: 100%;
}

.dash-welcome-inst img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dash-welcome-inst span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash-welcome-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ed-ink-2);
    margin: 0 0 .25rem;
    line-height: 1.5;
}

.dash-welcome-title strong { font-weight: 800; color: var(--ed-ink); }

.dash-welcome-sub {
    color: var(--ed-muted);
    font-size: .92rem;
    margin: 0 0 .85rem;
}

.dash-welcome-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.dash-fact {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--ed-blue-100);
    font-size: .8rem;
    font-weight: 600;
    color: var(--ed-ink-2);
}

.dash-fact i { color: var(--ed-blue-500); font-size: .8rem; }
.dash-fact strong { color: var(--ed-ink); font-weight: 800; }

.dash-fact-live { color: var(--ed-green); border-color: #CBEBD6; }

.dash-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    background: var(--ed-subtle);
}

.dash-dot-live {
    background: var(--ed-green-500);
    box-shadow: 0 0 0 0 rgba(34, 165, 91, .55);
    animation: edLiveDot 2s ease-out infinite;
}

.dash-dot-soon  { background: var(--ed-blue-500); }
.dash-dot-ended { background: #A5B0C2; }

@keyframes edLiveDot {
    0%   { box-shadow: 0 0 0 0 rgba(34, 165, 91, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(34, 165, 91, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 165, 91, 0); }
}

.dash-welcome-art {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 230px;
    max-width: 32%;
}

.dash-welcome-art svg { width: 100%; height: auto; display: block; }

@media (max-width: 767.98px) {
    .dash-welcome { padding: 1.25rem; }
    .dash-welcome-art { display: none; }
    .dash-welcome-title { font-size: 1.2rem; }
}

/* "Happening now" strip */
.dash-live {
    display: grid;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.dash-live-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem 1rem;
    border-radius: var(--ed-r);
    background: #fff;
    border: 1px solid #CBEBD6;
    border-inline-start: 4px solid var(--ed-green-500);
    box-shadow: var(--ed-shadow-1);
    text-decoration: none;
    color: var(--ed-ink);
    transition: box-shadow .15s ease, border-color .15s ease;
}

.dash-live-item:hover { box-shadow: var(--ed-shadow-2); color: var(--ed-ink); }

.dash-live-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ed-green);
    white-space: nowrap;
}

.dash-live-title {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-live-cta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem 1rem;
    border-radius: var(--ed-r-sm);
    background: var(--ed-blue-600);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.dash-live-item:hover .dash-live-cta { background: var(--ed-blue-700); }

@media (max-width: 575.98px) {
    .dash-live-item { flex-wrap: wrap; }
    .dash-live-title { flex-basis: 100%; order: 3; white-space: normal; }
}

/* Toolbar: heading + filter segments + search */
.dash-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-bottom: 1rem;
}

.dash-toolbar-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ed-ink);
}

.dash-toolbar-count {
    font-size: .75rem;
    font-weight: 700;
    color: var(--ed-blue-800);
    background: var(--ed-blue-50);
    border: 1px solid var(--ed-blue-100);
    border-radius: 999px;
    padding: .05rem .55rem;
}

.dash-toolbar-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}

.dash-filter {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: #fff;
    border: 1px solid var(--ed-line);
    border-radius: 10px;
    overflow-x: auto;
    max-width: 100%;
}

.dash-filter .dash-kpi {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ed-muted);
    font-family: inherit;
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.dash-filter .dash-kpi:hover { background: var(--ed-bg); color: var(--ed-ink); transform: none; }

.dash-filter .dash-kpi.is-active {
    background: var(--ed-blue-50);
    color: var(--ed-blue-800);
    box-shadow: none;
}

.dash-filter .dash-kpi-num {
    font-size: .72rem;
    font-weight: 700;
    min-width: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--ed-bg);
    color: var(--ed-muted);
    text-align: center;
    line-height: 1.55;
}

.dash-filter .dash-kpi.is-active .dash-kpi-num { background: #fff; color: var(--ed-blue-800); }

.dash-search { flex: 0 1 260px; }

.dash-search input {
    border: 1px solid var(--ed-line);
    border-radius: 10px;
    padding-block: .5rem;
    font-size: .86rem;
}

.dash-search input:focus { border-color: var(--ed-blue-400); box-shadow: var(--ed-focus); }

@media (max-width: 768px) {
    .dash-toolbar-tools { width: 100%; }
    .dash-search { flex-basis: 100%; }
}

/* Course cards (Google-Classroom-like) */
.cls-card {
    border-radius: var(--ed-r);
    border: 1px solid var(--ed-line);
    box-shadow: var(--ed-shadow-1);
    transition: box-shadow .2s ease, border-color .2s ease;
}

.cls-card::before { display: none; }

.cls-card:hover {
    transform: none;
    border-color: var(--ed-blue-200);
    box-shadow: 0 8px 24px rgba(27, 42, 65, .09);
}

.cls-card-cover { height: 148px; background: var(--ed-blue-50); }
.cls-card:hover .cls-card-cover-img { transform: scale(1.02); }
.cls-card-cover-fade { display: none; }

.cls-card-cover-badge {
    top: .7rem;
    bottom: auto;
    right: auto;
    left: auto;
    inset-inline-end: .7rem;
}

.cls-card-cover-badge .status-pill {
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 1px 3px rgba(27, 42, 65, .12);
}

.cls-card-cover-badge .status-pill i { display: none; }

.cls-card-cover-badge .status-pill::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.cls-card-cover-badge .sp-live::before {
    background: var(--ed-green-500);
    animation: edLiveDot 2s ease-out infinite;
}

.cls-card-cover-duration {
    bottom: .6rem;
    left: auto;
    right: auto;
    inset-inline-start: .7rem;
    background: rgba(27, 42, 65, .62);
    font-size: .72rem;
    padding: .22rem .6rem;
}

.cls-card-inst {
    top: .7rem;
    inset-inline-start: .7rem;
    max-width: calc(100% - 9.5rem);
}

/* Schedule says "may be entered" — calm, no pulse. The pulse is reserved for real live rooms. */
.sp-open { background: var(--ed-green-bg); color: var(--ed-green); }
.cls-card-cover-badge .sp-open::before { background: var(--ed-green-500); }
.dash-dot-open { background: var(--ed-green-500); }

/* Real live room (BBB running with people inside) */
.cls-card.is-live {
    border-color: #9FDDB7;
    box-shadow: 0 0 0 3px rgba(34, 165, 91, .12), var(--ed-shadow-1);
}

.cls-card-live {
    position: absolute;
    bottom: .6rem;
    inset-inline-end: .7rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .24rem .65rem;
    border-radius: 999px;
    background: #1E7E48;
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(22, 101, 52, .3);
}

.cls-card-live[hidden] { display: none; }
.cls-card-live .dash-dot-live { background: #fff; }
.cls-card-live i { font-size: .7rem; opacity: .9; }
.cls-card-live-sep { width: 1px; height: .8rem; background: rgba(255, 255, 255, .45); }

.dash-live-people {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--ed-green);
    white-space: nowrap;
}

/* Dashboard pager */
.dash-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
}

.dash-pager[hidden] { display: none; }
.dash-pager-info { font-size: .84rem; color: var(--ed-muted); }
.dash-pager .idx-pager-nav { flex-wrap: wrap; }
.dash-pager-gap { color: var(--ed-subtle); padding: 0 .15rem; }

@media (max-width: 575.98px) {
    .dash-pager { justify-content: center; }
    .dash-pager-info { flex-basis: 100%; text-align: center; }
}

.cls-card-body { padding: 1rem 1.1rem 1.1rem; }

.cls-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ed-ink);
    line-height: 1.6;
    margin-bottom: .35rem;
}

.cls-card-desc { font-size: .84rem; color: var(--ed-muted); margin-bottom: .85rem; }
.cls-card-desc-empty { color: #A5B0C2; font-style: normal; }

.cls-meta { gap: .35rem 1rem; margin-bottom: 1rem; }

.cls-meta-item {
    padding: 0;
    background: transparent;
    border: 0;
    font-size: .8rem;
    font-weight: 500;
    color: var(--ed-muted);
}

.cls-meta-item i { color: var(--ed-subtle); }

.btn-enter-cls {
    padding: .6rem;
    border-radius: var(--ed-r-sm);
    background: var(--ed-blue-600);
    color: #fff;
    font-size: .88rem;
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease;
}

.btn-enter-cls:hover { background: var(--ed-blue-700); transform: none; box-shadow: none; }

.btn-enter-cls.btn-enter-cls-upcoming {
    background: var(--ed-blue-50);
    color: var(--ed-blue-800);
    border: 1px solid var(--ed-blue-100);
}

.btn-enter-cls.btn-enter-cls-upcoming:hover { background: var(--ed-blue-100); color: var(--ed-blue-900); box-shadow: none; }

.btn-enter-cls.btn-enter-cls-ended { background: #F1F4F9; color: var(--ed-ink-2); }
.btn-enter-cls.btn-enter-cls-ended:hover { background: #E3E8F1; color: var(--ed-ink); box-shadow: none; }

/* Side panels: agenda + quick links */
.dash-panel {
    background: #fff;
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-r);
    box-shadow: var(--ed-shadow-1);
    margin-bottom: 1rem;
    overflow: hidden;
}

.dash-panel-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--ed-line-2);
    font-size: .95rem;
    font-weight: 800;
    color: var(--ed-ink);
    margin: 0;
}

.dash-panel-head i { color: var(--ed-blue-500); }

.dash-agenda { list-style: none; margin: 0; padding: .35rem 0; }

.dash-agenda a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem 1.1rem;
    text-decoration: none;
    color: inherit;
    transition: background-color .15s ease;
}

.dash-agenda a:hover { background: var(--ed-blue-25); }

.dash-agenda-date {
    width: 46px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid var(--ed-blue-100);
    background: var(--ed-blue-50);
    text-align: center;
    padding: .2rem 0 .25rem;
    line-height: 1.2;
}

.dash-agenda-date .d { display: block; font-size: 1.1rem; font-weight: 800; color: var(--ed-blue-800); }
.dash-agenda-date .m { display: block; font-size: .66rem; font-weight: 600; color: var(--ed-blue-700); }

.dash-agenda-body { min-width: 0; display: flex; flex-direction: column; }

.dash-agenda-body strong {
    font-size: .88rem;
    font-weight: 700;
    color: var(--ed-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-agenda-body small {
    font-size: .76rem;
    color: var(--ed-muted);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.dash-panel-empty {
    padding: 1.4rem 1.1rem;
    text-align: center;
    color: var(--ed-muted);
    font-size: .85rem;
}

.dash-panel-empty i {
    display: block;
    font-size: 1.5rem;
    color: var(--ed-blue-300);
    margin-bottom: .5rem;
}

.dash-quick { list-style: none; margin: 0; padding: .4rem; display: grid; gap: 2px; }

.dash-quick a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .7rem;
    border-radius: 9px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ed-ink-2);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.dash-quick a:hover { background: var(--ed-bg); color: var(--ed-blue-700); }

.dash-quick a > i:first-child {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ed-blue-50);
    color: var(--ed-blue-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}

.dash-quick a .dash-quick-arrow { margin-inline-start: auto; font-size: .7rem; color: var(--ed-subtle); }

/* Legacy hero (kept for any page that still renders it) */
.dash-hero {
    background: linear-gradient(135deg, #EEF4FF 0%, #E3ECFD 100%);
    border: 1px solid var(--ed-blue-100);
    color: var(--ed-ink);
}

.dash-hero::before { display: none; }

/* =====================================================================
   11. CLASS PAGE (overview / attendance / files)
   ===================================================================== */
.cls-breadcrumb { font-size: .84rem; margin-bottom: .6rem; }
.cls-breadcrumb a { color: var(--ed-muted); }
.cls-breadcrumb a:hover { color: var(--ed-blue-700); }
.cls-breadcrumb-current { color: var(--ed-ink); }

.cls-subnav {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ed-line);
    border-radius: 0;
    padding: 0;
    gap: .25rem;
    margin-bottom: 1.25rem;
}

.cls-subnav-tab {
    position: relative;
    border-radius: 0;
    padding: .7rem 1rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ed-muted);
    background: transparent;
    transition: color .15s ease, border-color .15s ease;
}

.cls-subnav-tab:hover {
    background: transparent;
    color: var(--ed-ink);
    border-bottom-color: var(--ed-line);
}

.cls-subnav-tab.active {
    background: transparent;
    color: var(--ed-blue-700);
    border-bottom-color: var(--ed-blue-600);
    box-shadow: none;
}

.cls-subnav-tab.active i { color: var(--ed-blue-600); }

/* Course header card */
.cd3-head {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem 1.5rem;
    padding: 1.1rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #F3F7FF 0%, #fff 60%);
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-r-lg);
    box-shadow: var(--ed-shadow-1);
}

.cd3-cover {
    position: relative;
    border-radius: var(--ed-r);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--ed-blue-50);
}

.cd3-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cd3-main { min-width: 0; }

.cd3-status { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .45rem; }

.cd3-title {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 800;
    color: var(--ed-ink);
    line-height: 1.5;
    margin: 0 0 .5rem;
}

.cd3-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    font-size: .86rem;
    color: var(--ed-muted);
}

.cd3-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.cd3-meta i { color: var(--ed-subtle); }

.cd3-action { min-width: 270px; }

@media (max-width: 1199.98px) {
    .cd3-head { grid-template-columns: 180px minmax(0, 1fr); }
    .cd3-action { grid-column: 1 / -1; min-width: 0; }
}

@media (max-width: 575.98px) {
    .cd3-head { grid-template-columns: 1fr; padding: .85rem; }
}

/* Join CTA */
.cd2-join-cta {
    gap: .85rem;
    padding: .85rem 1.1rem;
    border-radius: var(--ed-r);
    transition: background-color .15s ease, box-shadow .15s ease;
}

.cd2-join-cta:hover { transform: none !important; }

.cd2-join-icon { width: 44px; height: 44px; font-size: 1.05rem; }
.cd2-join-text strong { font-size: 1.02rem; font-weight: 800; }
.cd2-join-text small { font-size: .78rem; }

.cd2-join-cta-live {
    background: var(--ed-blue-600);
    color: #fff;
    box-shadow: 0 6px 18px rgba(61, 111, 217, .28);
}

.cd2-join-cta-live:hover {
    background: var(--ed-blue-700);
    color: #fff;
    box-shadow: 0 8px 22px rgba(61, 111, 217, .34);
}

.cd2-join-cta-live .cd2-join-icon { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); }
.cd2-join-pulse-ring { border-color: rgba(255, 255, 255, .55); }

.cd2-join-cta-upcoming {
    background: #fff;
    border: 1px solid var(--ed-blue-200);
    color: var(--ed-blue-800);
}

.cd2-join-cta-upcoming:hover { background: var(--ed-blue-50); box-shadow: none; color: var(--ed-blue-800); }
.cd2-join-cta-upcoming .cd2-join-icon { background: var(--ed-blue-600); }
.cd2-join-cta-upcoming .cd2-join-text small { color: var(--ed-muted); }

.cd2-join-cta-ended {
    background: #fff;
    border: 1px solid var(--ed-line);
    color: var(--ed-ink-2);
}

.cd2-join-cta-ended:hover { background: var(--ed-bg); box-shadow: none; }
.cd2-join-cta-ended .cd2-join-icon { background: #7A879C; }

.cd2-side-action { border: 1px solid var(--ed-input); border-radius: var(--ed-r-sm); color: var(--ed-ink-2); }
.cd2-side-action:hover { border-color: var(--ed-blue-300); background: var(--ed-blue-50); color: var(--ed-blue-800); }

/* Section headers inside class cards */
.cd-sec-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ed-blue-50);
    color: var(--ed-blue-600);
    font-size: .9rem;
    margin-inline-end: .6rem;
    flex-shrink: 0;
}

.cd-sec-count {
    font-size: .72rem;
    font-weight: 700;
    color: var(--ed-blue-800);
    background: var(--ed-blue-50);
    border-radius: 999px;
    padding: .05rem .55rem;
    margin-inline-start: .5rem;
}

.cd2-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ed-blue-50) !important;
    color: var(--ed-blue-600);
}

.cd2-icon-duration { background: var(--ed-amber-bg) !important; color: var(--ed-amber); }
.cd2-info-row + .cd2-info-row { border-top-color: var(--ed-line-2); }

.description-box {
    background: #fff !important;
    border: 1px solid var(--ed-line) !important;
    border-inline-start: 4px solid var(--ed-blue-400) !important;
    border-radius: var(--ed-r) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.description-box p { color: var(--ed-ink-2) !important; }

/* Recordings */
.rec-card { border-color: var(--ed-line); border-radius: var(--ed-r); }
.rec-card:hover { transform: none; border-color: var(--ed-blue-200); box-shadow: var(--ed-shadow-2); }

.rec-thumb-teal   { background: linear-gradient(135deg, #EAF1FE, #D3E3FD); }
.rec-thumb-indigo { background: linear-gradient(135deg, #ECEFFE, #D9DEFB); }
.rec-thumb-amber  { background: linear-gradient(135deg, #E8F4FC, #CFE6F6); }
.rec-thumb-rose   { background: linear-gradient(135deg, #EEF2F9, #DAE2EF); }

.rec-card-dots { background-image: radial-gradient(rgba(61, 111, 217, .16) 1.5px, transparent 1.5px); opacity: 1; }
.rec-card-play { background: #fff; color: var(--ed-blue-600); box-shadow: 0 4px 12px rgba(29, 56, 111, .16); }
.rec-card:hover .rec-card-play { transform: scale(1.06); }
.rec-card-duration { background: rgba(27, 42, 65, .7); }

/* Attachments list on the class page */
.ca-detail-item { border-color: var(--ed-line); border-radius: 10px; }
.ca-detail-item:hover { border-color: var(--ed-blue-200); box-shadow: none; background: var(--ed-blue-25); }
.ca-detail-btn { background: var(--ed-blue-50); color: var(--ed-blue-700); }
.ca-detail-btn:hover { background: var(--ed-blue-600); color: #fff; }

/* =====================================================================
   12. PUBLIC SITE — navbar, footer
   ===================================================================== */
.public-navbar {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--ed-line);
    box-shadow: none;
}

.pub-brand-icon { box-shadow: none; }
.pub-brand:hover .pub-brand-icon { transform: none; }
.pub-brand-name { color: var(--ed-ink); font-weight: 800; }

.pub-nav-link { color: var(--ed-ink-2); font-weight: 500; }

.pub-nav-link:hover,
.pub-nav-link.active { color: var(--ed-blue-700); background: var(--ed-blue-50); }

.pub-nav-link-contact { background: var(--ed-blue-50); border-color: var(--ed-blue-100); color: var(--ed-blue-700); }

.btn-pub-filled,
.btn-hero-primary {
    background: var(--ed-blue-600) !important;
    border-radius: var(--ed-r-sm);
    box-shadow: none !important;
}

.btn-pub-filled:hover,
.btn-hero-primary:hover { background: var(--ed-blue-700) !important; transform: none !important; }

.btn-pub-outline { border: 1px solid var(--ed-input); color: var(--ed-ink-2); border-radius: var(--ed-r-sm); }
.btn-pub-outline:hover { border-color: var(--ed-blue-400); color: var(--ed-blue-700); background: var(--ed-blue-50); }

.public-footer {
    background: #F0F4FA;
    border-top: 1px solid var(--ed-line);
    color: var(--ed-muted);
}

.public-footer .footer-brand-name { color: var(--ed-ink); }
.public-footer .footer-desc { color: var(--ed-muted); }
.public-footer .footer-col-title { color: var(--ed-ink); text-transform: none; font-size: .9rem; }
.public-footer .footer-list a { color: var(--ed-muted); }
.public-footer .footer-list a:hover { color: var(--ed-blue-700); }
.public-footer .footer-bottom { border-top-color: var(--ed-line); color: var(--ed-subtle); }
.public-footer .footer-bottom a { color: var(--ed-muted); }
.public-footer .enamad-badge { border: 1px solid var(--ed-line); }

/* =====================================================================
   13. AUTH PAGES
   ===================================================================== */
.auth-wrapper {
    background:
        radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(160deg, #EEF4FF 0%, #E1EBFD 100%);
}

.auth-box {
    border: 1px solid var(--ed-line);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(29, 56, 111, .10);
}

.auth-head {
    background: #fff;
    padding: 2.25rem 2rem 1rem;
}

.auth-head::before { display: none; }

.auth-head-logo {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--ed-blue-600);
    border: 0;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 0 0 6px var(--ed-blue-50);
}

.auth-head-title { color: var(--ed-ink); font-size: 1.4rem; font-weight: 800; }
.auth-head-sub { color: var(--ed-muted); font-size: .9rem; }

.auth-body { padding: 1.25rem 2rem 2.25rem; }

.auth-label { color: var(--ed-ink-2); }

.auth-input-group { border: 1px solid var(--ed-input); border-radius: 10px; }
.auth-input-group:focus-within { border-color: var(--ed-blue-400); box-shadow: var(--ed-focus); }
.auth-input-prefix { background: var(--ed-bg); color: var(--ed-subtle); border-color: var(--ed-line); }
.auth-input-group:focus-within .auth-input-prefix { color: var(--ed-blue-600); background: var(--ed-blue-50); }

.auth-submit {
    background: var(--ed-blue-600);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(27, 42, 65, .1);
}

.auth-submit:hover {
    background: var(--ed-blue-700);
    transform: none;
    box-shadow: 0 1px 2px rgba(27, 42, 65, .1);
}

.auth-link-row { color: var(--ed-muted); }
.auth-link-row a { color: var(--ed-blue-700); }

@media (max-width: 575.98px) {
    .auth-head { padding: 1.75rem 1.25rem .75rem; }
    .auth-body { padding: 1rem 1.25rem 1.75rem; }
}

/* =====================================================================
   14. CARD / MODAL HEADERS used by Settings, Profile and modals
   ===================================================================== */
.ed-card-head {
    background: #fff !important;
    color: var(--ed-ink);
    border-bottom: 1px solid var(--ed-line);
    padding: .9rem 1.25rem;
    font-size: .98rem;
}

.ed-card-head > i:first-child {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ed-blue-50);
    color: var(--ed-blue-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}

.ed-card-head-danger { color: var(--ed-red); }
.ed-card-head-danger > i:first-child { background: var(--ed-red-bg); color: var(--ed-red); }

.ed-modal-head {
    background: #fff;
    border-bottom: 1px solid var(--ed-line);
    padding: 1rem 1.5rem;
}

.ed-modal-head .modal-title {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ed-ink);
}

/* Class roster modal (OnlineClass/Index) */
.msm-content { border-radius: var(--ed-r-lg); }

.msm-header {
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--ed-line);
    padding: 1.1rem 1.5rem;
}

.msm-header-glow { display: none; }
.msm-header-row { flex: 1; min-width: 0; }

.msm-header .modal-title { color: var(--ed-ink); font-weight: 800; font-size: 1.05rem; }

.msm-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ed-blue-50);
    border: 1px solid var(--ed-blue-100);
    color: var(--ed-blue-600);
    box-shadow: none;
}

.msm-classname { color: var(--ed-muted); }

.msm-count-badge {
    background: var(--ed-blue-50);
    border: 1px solid var(--ed-blue-100);
    color: var(--ed-blue-800);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.msm-section-title i { color: var(--ed-blue-500); }
.msm-add-panel { background: var(--ed-bg); border-bottom-color: var(--ed-line); }
.msm-role-toggle { border: 1px solid var(--ed-input); }

.btn-check:checked + .msm-role-btn,
.btn-check:checked + .msm-role-btn-mod {
    background: var(--ed-blue-600);
    color: #fff;
    box-shadow: none;
}

.msm-add-btn {
    background: var(--ed-blue-600);
    border-radius: var(--ed-r-sm);
    box-shadow: none;
}

.msm-add-btn:hover { background: var(--ed-blue-700); transform: none; box-shadow: none; }

.msm-row { border-radius: var(--ed-r); }
.msm-row:hover { transform: none; box-shadow: none; border-color: var(--ed-blue-200); background: var(--ed-blue-25); }
.msm-avatar { box-shadow: none; }
.msm-row-remove:hover { background: var(--ed-red-bg); color: var(--ed-red); transform: none; }
.msm-footer { background: var(--ed-bg); }

/* Profile / settings: generic Bootstrap cards read as flat panels */
.card > .card-header:not(.form-card-header):not(.ed-card-head) {
    background: #fff;
    border-bottom-color: var(--ed-line);
}

/* site.css forces the toggler to display:flex, which beat Bootstrap's
   navbar-expand-lg rule and left a hamburger visible on desktop */
@media (min-width: 992px) {
    .public-navbar .navbar-toggler { display: none; }
}

/* =====================================================================
   15. HOMEPAGE refinements (home.css / home-tour.css)
   ===================================================================== */
/* Decorative glows/connectors were pushing the page 200px wider than the viewport */
main { overflow-x: clip; }

.text-grad,
.hero-title .text-grad {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--ed-blue-600);
    animation: none;
}

.hero-brochure-link {
    background: #fff !important;
    color: var(--ed-blue-800) !important;
    border: 1px solid var(--ed-blue-200);
    box-shadow: var(--ed-shadow-1) !important;
    animation: none !important;
}

.hero-brochure-link i { color: #D93636; }
.hero-brochure-link:hover { background: var(--ed-blue-50) !important; transform: none !important; }

/* One blue for feature accents; colour stays only in the small icon tiles */
.eco-card-tagline,
.eco-card-amber .eco-card-tagline,
.eco-card-rose .eco-card-tagline,
.eco-card-cyan .eco-card-tagline,
.eco-card-violet .eco-card-tagline { color: var(--ed-blue-700); }

.eco-card-amber .eco-list i,
.eco-card-rose .eco-list i { color: var(--ed-blue-600); }

.eco-card-amber::before,
.eco-card-rose::before { background: var(--ed-blue-500); }

.eco-card-amber .eco-card-icon,
.eco-card-rose .eco-card-icon { background: var(--ed-blue-600); box-shadow: none; }

.hl-badge-amber, .hl-badge-rose { background: var(--ed-blue-50); color: var(--ed-blue-800); }

.btn-eco,
.btn-eco-cyan,
.btn-eco-violet {
    background: var(--ed-blue-600) !important;
    box-shadow: none !important;
    border-radius: var(--ed-r-sm);
}

.btn-eco:hover { background: var(--ed-blue-700) !important; transform: none !important; }

.step-num { background: var(--ed-blue-600); box-shadow: 0 0 0 6px var(--ed-blue-50); }
.step-card:hover .step-num { transform: none; }

.tour-step.is-active .tour-step-idx { background: var(--ed-blue-600); }

/* Product tour mock: light "screenshot" instead of a dark window */
.tour-window {
    background: #fff;
    border: 1px solid var(--ed-line);
    box-shadow: 0 18px 44px rgba(29, 56, 111, .12);
}

.tour-window-bar { background: var(--ed-bg); border-bottom: 1px solid var(--ed-line); }
.tour-window-title { color: var(--ed-muted); }

.tour-window-body {
    background:
        radial-gradient(circle at 15% 12%, rgba(61, 111, 217, .07) 0%, transparent 55%),
        linear-gradient(180deg, #F7FAFF 0%, #fff 100%);
}

.tm-bar    { background: #D3E0F8; }
.tm-bar-sm { background: #E6EDF9; }

.tm-logo-row,
.tm-field,
.tm-class,
.tm-row {
    background: #fff;
    border: 1px solid var(--ed-line);
}

.tm-field-lbl { color: var(--ed-muted); }
.tm-field-val { color: var(--ed-ink); }
.tm-logo, .tm-avatar { background: var(--ed-blue-600); }

.tm-class-cover { background: linear-gradient(135deg, #DCE8FD 0%, #C4D8FB 100%); }
.tm-live { background: #fff; color: var(--ed-green); }

.tm-chip   { color: var(--ed-ink-2); background: var(--ed-blue-50); }
.tm-chip i { color: var(--ed-blue-500); }

.tm-link     { background: var(--ed-blue-50); color: var(--ed-blue-600); }
.tm-act-copy { background: var(--ed-bg); color: var(--ed-muted); }
.tm-meter    { background: var(--ed-blue-50); }
.tm-pct      { color: var(--ed-ink-2); }

.au-violet, .au-amber { box-shadow: none; }