/**
 * ============================================================================
 * WEBSTUDY UI/UX DESIGN SYSTEM & APPLICATION SHELL
 * Master Stylesheet: webstudy.css
 * ============================================================================
 */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS & CSS VARIABLES
   ---------------------------------------------------------------------------- */
:root {
    /* Brand Accent Colors */
    --dash-primary: #2563eb;          /* Primary Blue Accent */
    --dash-primary-dark: #1d4ed8;
    --dash-primary-light: #eff6ff;
    --dash-indigo: #4f46e5;           /* Indigo / Messages */
    --dash-indigo-light: #eef2ff;
    --dash-amber: #d97706;            /* Amber / Warnings / Requests */
    --dash-amber-light: #fef3c7;
    --dash-amber-border: #fcd34d;
    --dash-success: #10b981;          /* Green / Success / Done */
    --dash-success-light: #ecfdf5;
    --dash-danger: #ef4444;           /* Red / Errors / Logout */
    --dash-danger-light: #fef2f2;
    --dash-sky: #0284c7;              /* Sky Blue / Info */
    --dash-sky-light: #e0f2fe;

    /* Text & Neutral Colors */
    --dash-text-main: #1e293b;        /* Dark contrast text (slate-800) */
    --dash-text-muted: #64748b;       /* Secondary text (slate-500) */
    --dash-text-light: #94a3b8;       /* Light / Placeholders (slate-400) */
    --dash-border: #e2e8f0;           /* Main card border (slate-200) */
    --dash-border-light: #f1f5f9;     /* Subtle inner borders (slate-100) */
    --dash-bg-card: #ffffff;          /* Card Background */
    --dash-bg-subtle: #f8fafc;        /* App Workspace Background */

    /* Sidebar Variables */
    --dash-sidebar-bg: #0f172a;       /* Deep slate-900 */
    --dash-sidebar-active: rgba(37, 99, 235, 0.18);
    --dash-sidebar-width: 230px;
    --dash-sidebar-collapsed-width: 70px;
    --dash-header-height: 70px;

    /* Shadows & Radii */
    --dash-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --dash-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02);
    --dash-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
    --dash-shadow-xl: 0 20px 35px -10px rgba(0, 0, 0, 0.15);
    --dash-radius: 14px;
    --dash-radius-sm: 8px;
    --dash-radius-lg: 18px;
    --dash-radius-pill: 9999px;
}

/* ----------------------------------------------------------------------------
   2. GLOBAL RESET & BASE TYPOGRAPHY
   ---------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px;
    line-height: 1.5;
    color: var(--dash-text-main);
    background: var(--dash-bg-subtle) !important;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

a {
    color: var(--dash-primary);
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
a:hover {
    color: var(--dash-primary-dark);
    text-decoration: none;
}

/* Focus States */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

/* ----------------------------------------------------------------------------
   3. APP SHELL LAYOUT (.container.body, .main_container, .left_col, .right_col)
   ---------------------------------------------------------------------------- */
.container.body {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

.main_container {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background: var(--dash-bg-subtle);
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ----------------------------------------------------------------------------
   4. SIDEBAR NAVIGATION (.left_col, .scroll-view)
   ---------------------------------------------------------------------------- */
.col-md-3.left_col {
    width: var(--dash-sidebar-width) !important;
    max-width: var(--dash-sidebar-width) !important;
    flex: 0 0 var(--dash-sidebar-width) !important;
    min-height: 100% !important;
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
    z-index: 100;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.left_col.scroll-view {
    width: 100% !important;
    min-height: 100% !important;
    position: relative !important;
    background: transparent !important;
    padding-bottom: 60px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Brand Header */
.navbar.nav_title {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 18px;
    height: var(--dash-header-height);
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
}

.site_title {
    display: flex !important;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 0 !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.brand-logo-badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
    flex-shrink: 0;
    padding: 4px;
}

.brand-logo-badge img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand-text-block {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-title-main {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #ffffff;
}

.brand-title-sub {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
}

/* Sidebar User Mini-Card */
.sidebar-user-card {
    padding: 14px 16px;
    margin: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.sidebar-user-card:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Role Badges */
.badge-role {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: var(--dash-radius-pill);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    width: fit-content;
}
.badge-role-admin { background: rgba(239, 68, 68, 0.2); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.4); }
.badge-role-rector { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.4); }
.badge-role-teacher { background: rgba(59, 130, 246, 0.2); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.4); }
.badge-role-student { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.4); }
.badge-role-default { background: rgba(255, 255, 255, 0.15); color: #e2e8f0; }

/* Section Titles */
.sidebar-section-title {
    padding: 14px 20px 6px;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #64748b !important;
    margin: 0;
}

/* Sidebar Menu Items */
.main_menu_side {
    padding: 0 8px;
}

.menu_section {
    margin-bottom: 16px;
}

.nav.side-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav.side-menu > li {
    margin: 3px 0;
    position: relative;
}

.nav.side-menu > li > a {
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    border-radius: 10px;
    display: flex !important;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
    text-decoration: none !important;
}

.nav.side-menu > li > a i {
    font-size: 15px;
    width: 20px;
    text-align: center;
    color: #94a3b8;
    transition: color 0.2s ease;
}

.nav.side-menu > li > a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.nav.side-menu > li > a:hover i {
    color: #60a5fa;
}

.nav.side-menu > li.active > a,
.nav.side-menu > li.current-page > a {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(29, 78, 216, 0.9)) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.nav.side-menu > li.active > a i,
.nav.side-menu > li.current-page > a i {
    color: #ffffff !important;
}

.nav.side-menu > li > a .fa-chevron-down {
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.2s ease;
}

.nav.side-menu > li.active > a .fa-chevron-down {
    transform: rotate(180deg);
}

/* Child Menu (Submenu) */
.nav.child_menu {
    list-style: none;
    background: transparent !important;
    padding: 4px 0 6px 14px !important;
    margin: 0;
    display: none;
}

.nav.side-menu > li.active > .nav.child_menu {
    display: block;
}

.nav.child_menu > li {
    margin: 2px 0;
}

.nav.child_menu > li > a {
    padding: 7px 12px !important;
    font-size: 12.5px !important;
    color: #94a3b8 !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.18s ease;
    text-decoration: none !important;
}

.nav.child_menu > li > a:hover,
.nav.child_menu > li.active > a,
.nav.child_menu > li.current-page > a {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.nav.child_menu > li > a i {
    font-size: 12px;
    width: 16px;
    color: #64748b;
    transition: color 0.18s ease;
}

.nav.child_menu > li > a:hover i,
.nav.child_menu > li.active > a i,
.nav.child_menu > li.current-page > a i {
    color: #60a5fa;
}

/* Sidebar Footer */
.sidebar-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: var(--dash-sidebar-width);
    background: #0b1120 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 48px;
    padding: 0 8px;
    z-index: 101;
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-footer a {
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    text-decoration: none !important;
    cursor: pointer;
}

.sidebar-footer a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px);
}

/* ----------------------------------------------------------------------------
   5. TOP NAVBAR (.top_nav, .nav_menu)
   ---------------------------------------------------------------------------- */
.top_nav {
    margin-left: var(--dash-sidebar-width);
    background: #ffffff !important;
    border-bottom: 1px solid var(--dash-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    position: sticky;
    top: 0;
    z-index: 99;
    transition: margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav_menu {
    background: transparent !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding: 0 24px !important;
    height: var(--dash-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Menu Toggle Button (Hamburger) */
.nav.toggle {
    padding: 0 !important;
    margin: 0 !important;
}

#menu_toggle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dash-text-main);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

#menu_toggle:hover {
    background: #ffffff;
    color: var(--dash-primary);
    border-color: #bfdbfe;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}

/* Top Navbar Right Nav */
.top_nav nav.navbar-nav,
.top_nav .nav.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.top_nav .navbar-right,
.top_nav ul.navbar-right,
ul.navbar-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    gap: 12px !important;
}

.top_nav .navbar-right > li,
.top_nav .navbar-right .nav-item,
ul.navbar-right > li {
    list-style: none !important;
    list-style-type: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Live Ukrainian Date Badge */
.top-nav-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dash-text-main);
}

.top-nav-date-badge i {
    color: var(--dash-primary);
    font-size: 13px;
}

.date-time-sep {
    color: var(--dash-text-light);
    margin: 0 2px;
}

.live-clock {
    color: var(--dash-primary);
    font-weight: 700;
}

/* Quick Action Icon Buttons */
.top-nav-action-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dash-text-muted);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
    position: relative;
}

.top-nav-action-btn:hover {
    background: #ffffff;
    color: var(--dash-primary);
    border-color: #bfdbfe;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

/* User Profile Pill & Dropdown */
.user-profile-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 6px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    color: var(--dash-text-main) !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.user-profile-pill:hover,
.user-profile-pill:focus {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.user-profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.user-profile-email {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dropdown User Menu */
.dropdown-menu.dropdown-usermenu {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: 14px;
    box-shadow: var(--dash-shadow-lg);
    padding: 8px;
    min-width: 220px;
    margin-top: 10px !important;
}

.dropdown-header-user {
    padding: 10px 14px;
    border-bottom: 1px solid var(--dash-border-light);
    margin-bottom: 6px;
}

.dropdown-header-user-email {
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-header-user-role {
    font-size: 11.5px;
    color: var(--dash-text-muted);
    margin-top: 2px;
}

.dropdown-usermenu .dropdown-item {
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dash-text-main);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.15s ease;
    cursor: pointer;
    text-decoration: none;
}

.dropdown-usermenu .dropdown-item:hover {
    background: var(--dash-bg-subtle);
    color: var(--dash-primary);
}

.dropdown-usermenu .dropdown-item i {
    font-size: 14px;
    color: var(--dash-text-light);
}

.dropdown-usermenu .dropdown-item:hover i {
    color: var(--dash-primary);
}

.dropdown-item-logout {
    color: #ef4444 !important;
    margin-top: 4px;
    border-top: 1px solid var(--dash-border-light);
    padding-top: 10px !important;
}

.dropdown-item-logout i {
    color: #ef4444 !important;
}

.dropdown-item-logout:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

/* ----------------------------------------------------------------------------
   6. MAIN CONTENT WORKSPACE (.right_col)
   ---------------------------------------------------------------------------- */
.right_col {
    margin-left: var(--dash-sidebar-width);
    background: var(--dash-bg-subtle) !important;
    padding: 24px 28px !important;
    min-height: calc(100vh - var(--dash-header-height)) !important;
    transition: margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------------------------------------------------------
   7. COLLAPSED SIDEBAR STATE (.nav-sm)
   ---------------------------------------------------------------------------- */
.nav-sm .container.body .col-md-3.left_col,
.nav-sm .left_col {
    width: var(--dash-sidebar-collapsed-width) !important;
    padding: 0 !important;
    position: absolute !important;
    min-height: 100% !important;
    z-index: 9999 !important;
    overflow: visible !important;
}

.nav-sm .left_col.scroll-view {
    width: var(--dash-sidebar-collapsed-width) !important;
    padding: 0 0 40px 0 !important;
    overflow: visible !important;
}

.nav-sm .navbar.nav_title {
    width: var(--dash-sidebar-collapsed-width) !important;
    padding: 16px 0 !important;
    height: var(--dash-header-height) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.nav-sm .site_title {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 0 !important;
}

.nav-sm .brand-logo-badge {
    margin: 0 auto !important;
    width: 38px !important;
    height: 38px !important;
}

.nav-sm .brand-text-block {
    display: none !important;
}

.nav-sm .sidebar-user-card {
    padding: 0 !important;
    margin: 12px auto !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
}

.nav-sm .sidebar-user-avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
    margin: 0 !important;
}

.nav-sm .sidebar-user-info {
    display: none !important;
}

.nav-sm .sidebar-section-title {
    display: none !important;
}

.nav-sm .menu_section {
    margin-bottom: 8px !important;
}

.nav-sm .main_menu_side {
    padding: 0 !important;
    width: var(--dash-sidebar-collapsed-width) !important;
}

.nav-sm .nav.side-menu {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.nav-sm .nav.side-menu > li {
    margin: 6px auto !important;
    width: 46px !important;
    display: block !important;
    position: relative !important;
    float: none !important;
}

.nav-sm .nav.side-menu > li > a {
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    position: relative !important;
    text-align: center !important;
    font-size: 0 !important;
    gap: 0 !important;
    color: #cbd5e1 !important;
    background: transparent;
    transition: all 0.2s ease;
}

.nav-sm .nav.side-menu > li > a i {
    font-size: 18px !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center !important;
    margin: 0 !important;
    color: #94a3b8;
    display: inline-block !important;
}

.nav-sm .nav.side-menu > li > a span {
    display: none !important;
}

.nav-sm .nav.side-menu > li > a .fa-chevron-down {
    display: none !important;
}

.nav-sm .nav.side-menu > li > a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.nav-sm .nav.side-menu > li > a:hover i {
    color: #60a5fa !important;
}

.nav-sm .nav.side-menu > li.active > a,
.nav-sm .nav.side-menu > li.active-sm > a,
.nav-sm .nav.side-menu > li.current-page > a {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(29, 78, 216, 0.9)) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
    border: none !important;
}

.nav-sm .nav.side-menu > li.active > a i,
.nav-sm .nav.side-menu > li.active-sm > a i,
.nav-sm .nav.side-menu > li.current-page > a i {
    color: #ffffff !important;
}

/* Child Flyout Dropdown Menu in .nav-sm */
.nav-sm .nav.side-menu > li > ul.nav.child_menu {
    position: absolute !important;
    left: 58px !important;
    top: 0 !important;
    width: 220px !important;
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    padding: 8px !important;
    z-index: 99999 !important;
    display: none;
}

.nav-sm .nav.side-menu > li:hover > ul.nav.child_menu,
.nav-sm .nav.side-menu > li.active > ul.nav.child_menu {
    display: block !important;
}

.nav-sm ul.nav.child_menu > li {
    padding: 0 !important;
    margin: 3px 0 !important;
    width: 100% !important;
    display: block !important;
    float: none !important;
}

.nav-sm ul.nav.child_menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    border-radius: 8px !important;
    text-align: left !important;
    white-space: nowrap !important;
    background: transparent !important;
    width: 100% !important;
    height: auto !important;
    transition: all 0.18s ease !important;
}

.nav-sm ul.nav.child_menu > li > a i {
    font-size: 13px !important;
    width: 18px !important;
    text-align: center !important;
    color: #94a3b8 !important;
}

.nav-sm ul.nav.child_menu > li > a:hover,
.nav-sm ul.nav.child_menu > li.active > a,
.nav-sm ul.nav.child_menu > li.current-page > a {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.nav-sm ul.nav.child_menu > li > a:hover i,
.nav-sm ul.nav.child_menu > li.active > a i,
.nav-sm ul.nav.child_menu > li.current-page > a i {
    color: #60a5fa !important;
}

/* Sidebar Footer in .nav-sm */
.nav-sm .sidebar-footer {
    display: none !important;
}

/* Top Nav and Workspace in .nav-sm */
.nav-sm .top_nav {
    margin-left: var(--dash-sidebar-collapsed-width) !important;
}

.nav-sm .right_col {
    margin-left: var(--dash-sidebar-collapsed-width) !important;
}

/* ----------------------------------------------------------------------------
   8. COMMON DASHBOARD & UI COMPONENTS (AGENTS.md Design System)
   ---------------------------------------------------------------------------- */

/* Dashboard Hero Banner */
.dash-hero-banner,
.dashboard-hero {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-radius: var(--dash-radius);
    padding: 24px 28px;
    color: #ffffff;
    box-shadow: var(--dash-shadow-lg);
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.hero-main-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hero-avatar-badge {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
    flex-shrink: 0;
}

.hero-text h3 {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.2px;
}

.hero-text p {
    margin: 0;
    font-size: 13.5px;
    color: #94a3b8;
    line-height: 1.4;
}

.hero-quick-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--dash-radius-pill);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none !important;
}

.hero-action-pill:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: #ffffff !important;
}

.hero-action-pill.pill-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.hero-action-pill.pill-primary:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45);
}

/* Modern Card / Panel */
.dash-card,
.x_panel {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    padding: 20px 24px;
    margin-bottom: 24px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dash-card:hover,
.x_panel:hover {
    box-shadow: var(--dash-shadow-md);
}

.x_title {
    border-bottom: 1px solid var(--dash-border-light);
    padding-bottom: 12px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.x_title h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0;
}

.x_content {
    padding: 0;
}

/* KPI Card Grid */
.kpi-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.kpi-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 20px;
    box-shadow: var(--dash-shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.kpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.kpi-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #ffffff;
}

/* KPI Gradients */
.bg-amber-gradient {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.bg-indigo-gradient {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.bg-blue-gradient {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.bg-emerald-gradient {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.kpi-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--dash-text-main);
    line-height: 1.1;
    margin-bottom: 4px;
}

.kpi-label {
    font-size: 13px;
    color: var(--dash-text-muted);
    font-weight: 500;
}

.kpi-action-btn {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--dash-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dash-primary);
}

.kpi-action-btn:hover {
    color: var(--dash-primary-dark);
}

/* Status Pulse Dot */
.status-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background-color: var(--dash-amber);
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.7);
    animation: pulseAnimation 1.8s infinite;
}

@keyframes pulseAnimation {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 7px rgba(217, 119, 6, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0);
    }
}

/* Shimmer Skeleton Loader */
.skeleton-shimmer,
.skeleton-box {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--dash-radius-sm);
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Empty State Box */
.empty-state-box,
.empty-state-container {
    text-align: center;
    padding: 48px 24px;
    background: var(--dash-bg-card);
    border: 1px dashed var(--dash-border);
    border-radius: var(--dash-radius);
    margin: 20px 0;
}

.empty-state-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 14px;
}

.empty-state-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin-bottom: 6px;
}

.empty-state-desc,
.empty-state-text {
    font-size: 13px;
    color: var(--dash-text-muted);
    max-width: 440px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Live Search Input */
.search-input-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 320px;
}

.search-input-wrapper i {
    position: absolute;
    left: 12px;
    color: var(--dash-text-light);
    font-size: 13px;
    pointer-events: none;
}

.groups-search-input,
.dash-search-input {
    width: 100%;
    padding: 8px 14px 8px 34px;
    font-size: 13px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    transition: all 0.2s ease;
}

.groups-search-input:focus,
.dash-search-input:focus {
    background: #ffffff;
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Badges & Pills */
.group-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-text-muted);
}

.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--dash-radius-pill);
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    font-size: 11px;
    font-weight: 700;
}

/* Action Buttons */
.table-action-btn,
.dash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border);
    background: #ffffff;
    color: var(--dash-text-main);
    cursor: pointer;
    transition: all 0.18s ease;
    text-decoration: none !important;
}

.table-action-btn:hover,
.dash-btn:hover {
    background: var(--dash-bg-subtle);
    color: var(--dash-primary);
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.dash-btn-primary {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-primary-dark)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.dash-btn-primary:hover {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

/* Error Pages Layout */
.col-middle {
    margin-top: 10%;
}

.error-number {
    font-size: 90px;
    line-height: 90px;
    font-weight: 800;
    color: var(--dash-primary);
    margin: 0;
}

/* ----------------------------------------------------------------------------
   9. RESPONSIVE BREAKPOINTS
   ---------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .top_nav {
        margin-left: 0 !important;
    }
    .right_col {
        margin-left: 0 !important;
        padding: 16px !important;
    }
    .top-nav-date-badge {
        display: none;
    }
    .user-profile-email {
        display: none;
    }
    .col-md-3.left_col,
    .left_col {
        display: none;
    }
    .nav-sm .col-md-3.left_col,
    .nav-sm .left_col {
        display: block;
    }
}

@media (max-width: 576px) {
    .nav_menu {
        padding: 0 14px !important;
    }
    .right_col {
        padding: 12px !important;
    }
    .kpi-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   10. ATTENDANCE JOURNAL MODULE
   ============================================================================ */
.attendance-page-container {
    font-family: inherit;
    color: var(--dash-text-main);
    padding: 4px 0 35px;
}

/* Bootstrap Selection Filter Card */
.selection-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 20px 24px;
    box-shadow: var(--dash-shadow-sm);
    margin-bottom: 24px;
    position: relative;
}

.selection-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--dash-border-light);
}

.selection-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0;
}

.selection-header-title i {
    color: var(--dash-primary);
    font-size: 18px;
}

.selection-header-sub {
    font-size: 13px;
    color: var(--dash-text-muted);
    margin-left: 4px;
    font-weight: 400;
}

.selection-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dash-text-muted);
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.selection-reset-btn:hover {
    background: #f1f5f9;
    color: var(--dash-danger);
    border-color: #fecaca;
}

/* 3-Step Selection Grid */
.selection-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.step-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.step-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.step-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    background: #e2e8f0;
    color: #475569;
    transition: all 0.2s ease;
}

.step-badge.step-active {
    background: var(--dash-primary);
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.step-badge.step-done {
    background: var(--dash-success);
    color: #ffffff;
}

.step-status-hint {
    font-size: 11.5px;
    color: var(--dash-text-light);
    font-weight: 500;
}

/* Bootstrap Custom Select Styling */
.select-wrapper-custom {
    position: relative;
}

.select-wrapper-custom .select-icon-left {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dash-text-light);
    font-size: 14px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.custom-bootstrap-select {
    height: 44px;
    padding: 8px 36px 8px 38px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    background-color: #f8fafc;
    color: var(--dash-text-main);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.custom-bootstrap-select:hover:not(:disabled) {
    background-color: #ffffff;
    border-color: #cbd5e1;
}

.custom-bootstrap-select:focus {
    background-color: #ffffff;
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.custom-bootstrap-select:focus + .select-icon-left,
.select-wrapper-custom:hover .custom-bootstrap-select:not(:disabled) + .select-icon-left {
    color: var(--dash-primary);
}

.custom-bootstrap-select:disabled {
    background-color: #f1f5f9;
    color: var(--dash-text-light);
    cursor: not-allowed;
    opacity: 0.7;
    border-color: var(--dash-border-light);
}

/* Selected Path Banner */
.selection-summary-bar {
    margin-top: 18px;
    padding: 12px 16px;
    background: var(--dash-primary-light);
    border: 1px solid #bfdbfe;
    border-radius: var(--dash-radius-sm);
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: #1e3a8a;
    animation: fadeIn 0.3s ease;
}

.summary-path-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ffffff;
    padding: 4px 11px;
    border-radius: var(--dash-radius-pill);
    border: 1px solid #93c5fd;
    font-weight: 600;
    font-size: 12px;
    color: #1d4ed8;
}

/* Empty States & Placeholders */
.empty-state-card {
    background: var(--dash-bg-card);
    border: 1px dashed #cbd5e1;
    border-radius: var(--dash-radius);
    padding: 50px 24px;
    text-align: center;
    box-shadow: var(--dash-shadow-sm);
}

.empty-state-icon-wrap {
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #94a3b8;
}

.empty-state-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0 0 6px 0;
}

.empty-state-card p {
    font-size: 13.5px;
    color: var(--dash-text-muted);
    max-width: 480px;
    margin: 0 auto 18px;
    line-height: 1.5;
}

.empty-state-steps {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    padding: 8px 16px;
    border-radius: var(--dash-radius-pill);
    border: 1px solid var(--dash-border);
    font-size: 12.5px;
    color: var(--dash-text-muted);
}

.empty-state-steps span {
    font-weight: 600;
    color: var(--dash-text-main);
}

/* Skeleton Loading Placeholder */
.skeleton-box {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: 6px;
}

.skeleton-journal-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 24px;
    box-shadow: var(--dash-shadow-sm);
}

.skeleton-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.skeleton-kpi-item {
    height: 80px;
    border-radius: var(--dash-radius-sm);
}

.skeleton-table-header {
    height: 46px;
    margin-bottom: 12px;
}

.skeleton-row {
    height: 52px;
    margin-bottom: 8px;
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Error Fallback Card */
.error-card-state {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--dash-radius);
    padding: 30px 20px;
    text-align: center;
}

.error-card-state i {
    font-size: 36px;
    color: #ef4444;
    margin-bottom: 12px;
}

.error-card-state h4 {
    font-size: 16px;
    font-weight: 700;
    color: #991b1b;
    margin: 0 0 6px 0;
}

.error-card-state p {
    font-size: 13.5px;
    color: #b91c1c;
    margin-bottom: 16px;
}

/* ============================================================================
   11. INBOX & MESSAGING MODULE (STUDENT & TEACHER)
   ============================================================================ */
.student-inbox-container,
.teacher-inbox-container {
    font-family: inherit;
    color: var(--dash-text-main);
    padding: 6px 0 35px;
}

.inbox-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: var(--dash-radius);
    padding: 24px 28px;
    margin-bottom: 24px;
    color: #ffffff;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.inbox-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.35) 0%, rgba(37, 99, 235, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.inbox-hero::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 20%;
    width: 190px;
    height: 190px;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.28) 0%, rgba(79, 70, 229, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--dash-radius-pill);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
}

.btn-hero-primary:hover,
.btn-hero-primary:focus {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.55);
}

/* KPI Summary Cards */
.kpi-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 16px 18px;
    box-shadow: var(--dash-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.kpi-card.active-kpi {
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.kpi-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kpi-card-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--dash-text-muted);
}

.kpi-card-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--dash-text-main);
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kpi-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    flex-shrink: 0;
}

/* Master-Detail Inbox Container */
.inbox-workspace {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    display: grid;
    grid-template-columns: 380px 1fr;
    min-height: 600px;
    height: calc(100vh - 280px);
    overflow: hidden;
    position: relative;
}

.inbox-list-pane {
    border-right: 1px solid var(--dash-border);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    height: 100%;
    overflow: hidden;
}

.inbox-list-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--dash-border);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inbox-search-box {
    position: relative;
    width: 100%;
}

.inbox-search-input {
    width: 100%;
    height: 38px;
    padding: 8px 36px 8px 36px;
    font-size: 13px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    transition: all 0.2s ease;
    outline: none;
}

.inbox-search-input:focus {
    background: #ffffff;
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.search-icon-left {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--dash-text-light);
    pointer-events: none;
}

.search-clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--dash-text-light);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: none;
}

.search-clear-btn:hover {
    color: var(--dash-text-main);
}

.inbox-filter-pills {
    display: flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: var(--dash-radius-pill);
    border: 1px solid var(--dash-border);
    gap: 2px;
    overflow-x: auto;
}

.inbox-pill-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: var(--dash-radius-pill);
    border: none;
    background: transparent;
    color: var(--dash-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.inbox-pill-btn:hover {
    color: var(--dash-text-main);
}

.inbox-pill-btn.active {
    background: #ffffff;
    color: var(--dash-primary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.inbox-pill-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--dash-radius-pill);
    background: var(--dash-border);
    color: var(--dash-text-muted);
}

.inbox-pill-btn.active .inbox-pill-badge {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
}

.inbox-items-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.mail-item {
    padding: 14px 18px;
    border-bottom: 1px solid var(--dash-border-light);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
    background: #ffffff;
}

.mail-item:hover {
    background: #f8fafc;
}

.mail-item.selected {
    background: #eff6ff !important;
    border-left: 4px solid var(--dash-primary);
}

.mail-item.unread {
    background: #f0fdf4;
}

.mail-item.unread.incoming-item {
    background: #f0f9ff;
}

.mail-item.unread .mail-sender-name {
    font-weight: 700;
    color: var(--dash-text-main);
}

.mail-item.unread .mail-preview-text {
    color: var(--dash-text-main);
    font-weight: 500;
}

.mail-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.mail-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mail-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.mail-sender-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dash-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-time-badge {
    font-size: 11px;
    font-weight: 500;
    color: var(--dash-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.mail-row-middle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0;
}

.badge-direction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: var(--dash-radius-pill);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.badge-incoming {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border: 1px solid #c7d2fe;
}

.badge-outgoing {
    background: var(--dash-amber-light);
    color: var(--dash-amber);
    border: 1px solid var(--dash-amber-border);
}

.unread-indicator-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--dash-primary);
    display: inline-block;
    margin-left: auto;
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.5);
}

.mail-preview-text {
    font-size: 12.5px;
    color: var(--dash-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.inbox-list-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--dash-border);
    background: var(--dash-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--dash-text-muted);
}

.pagination-btn-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-page-nav {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--dash-border);
    background: #ffffff;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
}

.btn-page-nav:hover:not(:disabled) {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    border-color: #bfdbfe;
}

.btn-page-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Right Pane: Reader */
.inbox-detail-pane {
    display: flex;
    flex-direction: column;
    background: var(--dash-bg-subtle);
    height: 100%;
    overflow: hidden;
    position: relative;
}

.mail-empty-reader {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

.reader-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #e2e8f0;
    color: var(--dash-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 16px;
}

.reader-empty-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin-bottom: 6px;
}

.reader-empty-desc {
    font-size: 13.5px;
    color: var(--dash-text-muted);
    max-width: 320px;
    line-height: 1.4;
}

.mail-active-reader {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.reader-top-bar {
    padding: 14px 24px;
    background: #ffffff;
    border-bottom: 1px solid var(--dash-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.reader-back-btn {
    display: none;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dash-text-muted);
    cursor: pointer;
}

.reader-back-btn:hover {
    color: var(--dash-text-main);
    background: var(--dash-bg-subtle);
}

.reader-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-reader-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--dash-radius-pill);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 1px solid transparent;
    text-decoration: none;
}

.btn-reader-reply {
    background: var(--dash-primary);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.btn-reader-reply:hover {
    background: var(--dash-primary-dark);
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-reader-secondary {
    background: #ffffff;
    border-color: var(--dash-border);
    color: var(--dash-text-muted);
}

.btn-reader-secondary:hover {
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
}

.reader-scrollable-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mail-header-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 20px 24px;
    box-shadow: var(--dash-shadow-sm);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mail-header-user {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mail-large-avatar {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.mail-header-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mail-header-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mail-header-direction-sub {
    font-size: 12.5px;
    color: var(--dash-text-muted);
}

.mail-header-timestamp {
    font-size: 12.5px;
    color: var(--dash-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border-light);
    padding: 6px 12px;
    border-radius: var(--dash-radius-pill);
}

.mail-body-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 26px 28px;
    box-shadow: var(--dash-shadow-sm);
    font-size: 15px;
    line-height: 1.65;
    color: var(--dash-text-main);
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 160px;
}

.quick-reply-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 20px 24px;
    box-shadow: var(--dash-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quick-reply-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-reply-header i {
    color: var(--dash-primary);
}

.quick-reply-textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    resize: vertical;
    outline: none;
    transition: all 0.2s ease;
}

.quick-reply-textarea:focus {
    background: #ffffff;
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.quick-reply-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.skeleton-item {
    padding: 14px 18px;
    border-bottom: 1px solid var(--dash-border-light);
    display: flex;
    gap: 12px;
    align-items: center;
}

.inbox-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.inbox-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--dash-text-light);
    margin-bottom: 12px;
}

.inbox-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin-bottom: 4px;
}

.inbox-empty-desc {
    font-size: 12.5px;
    color: var(--dash-text-muted);
    max-width: 240px;
}

/* Compose Modal */
.modal-compose-dialog {
    max-width: 600px;
    margin: 1.75rem auto;
}

.modal-compose-content {
    border-radius: var(--dash-radius);
    border: 1px solid var(--dash-border);
    box-shadow: var(--dash-shadow-lg);
    overflow: hidden;
}

.modal-compose-header {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #ffffff;
    padding: 18px 24px;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-compose-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-compose-title i {
    color: #60a5fa;
}

.modal-compose-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-compose-close:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

.modal-compose-body {
    padding: 24px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.compose-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.compose-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}

.compose-select,
.compose-textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 13.5px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    background: #ffffff;
    color: var(--dash-text-main);
    outline: none;
    transition: all 0.2s ease;
}

.compose-select:focus,
.compose-textarea:focus {
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.compose-char-counter {
    font-size: 11.5px;
    color: var(--dash-text-muted);
    text-align: right;
}

.modal-compose-footer {
    padding: 16px 24px;
    background: var(--dash-bg-subtle);
    border-top: 1px solid var(--dash-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-compose-cancel {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    padding: 8px 18px;
    border-radius: var(--dash-radius-pill);
    color: var(--dash-text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-compose-cancel:hover {
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
}

.btn-compose-send {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    padding: 8px 22px;
    border-radius: var(--dash-radius-pill);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
    transition: all 0.2s ease;
}

.btn-compose-send:hover:not(:disabled) {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.45);
}

.btn-compose-send:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive Inbox */
@media (max-width: 991px) {
    .inbox-workspace {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 600px;
    }

    .inbox-workspace.reading-mode .inbox-list-pane {
        display: none;
    }

    .inbox-workspace:not(.reading-mode) .inbox-detail-pane {
        display: none;
    }

    .reader-back-btn {
        display: inline-flex;
    }
}

/* ============================================================================
   12. STUDENT & TEACHER DASHBOARD MODULE
   ============================================================================ */
.student-dashboard-container,
.teacher-dashboard-container {
    font-family: inherit;
    color: var(--dash-text-main);
    padding: 6px 0 35px;
}

.student-section-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
}

.section-card-header {
    padding: 18px 22px;
    background: #ffffff;
    border-bottom: 1px solid var(--dash-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.section-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.section-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #ffffff;
    flex-shrink: 0;
}

.section-header-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0 0 2px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.badge-count-indigo {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border-color: #c7d2fe;
}

.section-header-subtitle {
    font-size: 13px;
    color: var(--dash-text-muted);
}

.filter-pills-group {
    display: inline-flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: var(--dash-radius-pill);
    border: 1px solid #e2e8f0;
    gap: 3px;
    flex-wrap: wrap;
}

.filter-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--dash-radius-pill);
    border: none;
    background: transparent;
    color: var(--dash-text-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-pill-btn:hover {
    color: var(--dash-text-main);
}

.filter-pill-btn.active {
    background: #ffffff;
    color: var(--dash-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.section-card-body {
    padding: 22px;
}

/* Cards Grid */
.test-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.assignment-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.assignment-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.card-status-primary {
    border-top: 4px solid var(--dash-primary);
}

.card-status-indigo {
    border-top: 4px solid var(--dash-indigo);
}

.card-status-success {
    border-top: 4px solid var(--dash-success);
    background: #fafdfb;
}

.card-status-danger {
    border-top: 4px solid var(--dash-danger);
    background: #fffafa;
}

.card-status-info {
    border-top: 4px solid var(--dash-sky);
}

.assignment-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
}

.assignment-type-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dash-primary);
    letter-spacing: 0.3px;
}

.assignment-type-tag.tag-indigo {
    color: var(--dash-indigo);
}

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--dash-radius-pill);
    font-size: 11.5px;
    font-weight: 700;
}

.badge-status-primary {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    border: 1px solid #bfdbfe;
}

.badge-status-indigo {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border: 1px solid #c7d2fe;
}

.badge-status-success {
    background: var(--dash-success-light);
    color: #047857;
    border: 1px solid #a7f3d0;
}

.badge-status-danger {
    background: var(--dash-danger-light);
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.badge-status-info {
    background: var(--dash-sky-light);
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.assignment-meta-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta-badge-discipline {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.meta-badge-class {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.meta-badge-teacher {
    background: #fdf4ff;
    color: #9333ea;
    border: 1px solid #f0abfc;
}

.assignment-course-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--dash-text-main);
    margin: 0 0 10px 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
}

.assignment-quick-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.quick-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dash-text-muted);
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    padding: 2px 7px;
    border-radius: var(--dash-radius-pill);
}

.assignment-dates-list {
    background: #f8fafc;
    border: 1px solid var(--dash-border-light);
    border-radius: var(--dash-radius-sm);
    padding: 10px 12px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.date-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--dash-text-main);
}

.date-item i {
    font-size: 13px;
    width: 16px;
    text-align: center;
}

.date-label {
    color: var(--dash-text-muted);
    font-weight: 500;
}

.date-val {
    font-weight: 600;
}

.text-danger-custom {
    color: #b91c1c !important;
}

.score-badge-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--dash-success-light);
    border: 1px solid #a7f3d0;
    padding: 6px 10px;
    border-radius: var(--dash-radius-sm);
    margin-bottom: 14px;
}

.score-label {
    font-size: 12px;
    font-weight: 600;
    color: #065f46;
}

.score-val {
    font-size: 14px;
    font-weight: 800;
    color: #047857;
}

.assignment-card-footer {
    padding-top: 10px;
    border-top: 1px solid var(--dash-border-light);
}

.btn-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 16px;
    border-radius: var(--dash-radius-sm);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-card-action:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--dash-shadow-sm);
}

.btn-card-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.25);
}

.btn-card-primary:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.btn-card-indigo {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(79, 70, 229, 0.25);
}

.btn-card-indigo:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.btn-card-warning {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.btn-card-warning:hover {
    background: #fef3c7;
    color: #92400e;
}

.completed-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #047857;
}

.pending-request-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: var(--dash-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    color: #0369a1;
}

.skeleton-section-box {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 22px;
    margin-bottom: 24px;
}

.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.skeleton-card {
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 18px;
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Teacher Dashboard Specifics */
.dashboard-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.kpi-card-warning {
    border-left: 4px solid #f59e0b;
}

.kpi-card-info {
    border-left: 4px solid #4f46e5;
}

.kpi-card-neutral {
    border-left: 4px solid #94a3b8;
}

.kpi-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.kpi-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #ffffff;
}

.bg-slate-gradient {
    background: linear-gradient(135deg, #64748b, #475569);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.2);
}

.kpi-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 600;
}

.badge-pulse-warning {
    background: var(--dash-amber-light);
    color: #b45309;
    border: 1px solid var(--dash-amber-border);
}

.badge-pulse-info {
    background: var(--dash-indigo-light);
    color: #4338ca;
    border: 1px solid #c7d2fe;
}

.badge-neutral {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.bg-amber {
    background-color: #f59e0b;
}

.bg-indigo {
    background-color: #4f46e5;
}

.kpi-card-body {
    margin-bottom: 14px;
}

.kpi-value-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.kpi-unit {
    font-size: 14px;
    color: var(--dash-text-muted);
    font-weight: 500;
}

.kpi-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 4px 0 3px 0;
}

.kpi-desc {
    font-size: 12.5px;
    color: var(--dash-text-muted);
    margin: 0;
    line-height: 1.4;
}

.kpi-card-footer {
    padding-top: 10px;
    border-top: 1px solid var(--dash-border-light);
}

.btn-amber {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.btn-amber:hover {
    background: #fef3c7;
    color: #92400e;
}

.btn-indigo {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}

.btn-indigo:hover {
    background: #e0e7ff;
    color: #3730a3;
}

.btn-outline-slate {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.btn-outline-slate:hover {
    background: #f1f5f9;
    color: #1e293b;
}

/* Shortcuts Card */
.shortcuts-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 20px;
    box-shadow: var(--dash-shadow-sm);
    border-left: 4px solid var(--dash-primary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 195px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.shortcuts-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.shortcuts-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    color: var(--dash-text-main);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.shortcut-item:hover {
    background: var(--dash-primary-light);
    border-color: #bfdbfe;
    color: var(--dash-primary);
    text-decoration: none;
    transform: translateY(-1px);
}

.shortcut-item i {
    font-size: 14px;
    color: var(--dash-primary);
}

/* Teacher Groups Card */
.teacher-groups-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
}

.groups-card-header {
    padding: 18px 22px;
    background: #ffffff;
    border-bottom: 1px solid var(--dash-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.groups-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.groups-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    flex-shrink: 0;
}

.groups-header-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0 0 2px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.groups-header-subtitle {
    font-size: 13px;
    color: var(--dash-text-muted);
}

.groups-search-wrapper {
    position: relative;
    min-width: 260px;
}

.groups-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dash-text-light);
    font-size: 14px;
    pointer-events: none;
}

.groups-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--dash-text-muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 12px;
}

.groups-card-body {
    padding: 0;
}

/* Modern Tables */
.modern-table {
    margin-bottom: 0;
    border-collapse: collapse;
    width: 100%;
}

.modern-table thead th {
    background: #f8fafc;
    color: var(--dash-text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 18px;
    border-top: none;
    border-bottom: 1px solid var(--dash-border);
}

.modern-table tbody tr {
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--dash-border-light);
}

.modern-table tbody tr:hover {
    background: #f8fafc;
}

.modern-table tbody tr:last-child {
    border-bottom: none;
}

.modern-table tbody td {
    padding: 14px 18px;
    vertical-align: middle;
    font-size: 13.5px;
    color: var(--dash-text-main);
}

.row-index {
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-text-light);
}

.discipline-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.discipline-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.discipline-name {
    font-weight: 700;
    color: var(--dash-text-main);
    display: block;
    font-size: 14px;
}

.discipline-code {
    font-size: 11.5px;
    color: var(--dash-text-muted);
    display: inline-block;
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 2px;
}

.groups-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.action-buttons-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.empty-search-state {
    text-align: center;
    padding: 35px 20px;
    color: var(--dash-text-muted);
    font-size: 14px;
}

.empty-search-state i {
    font-size: 24px;
    color: var(--dash-text-light);
    display: block;
    margin-bottom: 8px;
}

/* Educational Materials & Courses */
.course-link-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--dash-text-main);
    text-decoration: none;
    transition: color 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.course-link-title:hover {
    color: var(--dash-primary);
}

.course-desc-text {
    font-size: 13px;
    color: var(--dash-text-muted);
    line-height: 1.45;
    margin: 3px 0 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.badge-lessons-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 600;
}

.badge-lessons-active {
    background: var(--dash-success-light);
    color: #047857;
    border: 1px solid #a7f3d0;
}

.badge-lessons-empty {
    background: #f8fafc;
    color: var(--dash-text-muted);
    border: 1px solid var(--dash-border);
}

/* Course Management Dashboard Elements */
.course-overview-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 18px 22px;
    margin-bottom: 22px;
    box-shadow: var(--dash-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.course-desc-banner {
    font-size: 13.5px;
    color: var(--dash-text-muted);
    line-height: 1.5;
    margin: 0;
}

.discipline-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--dash-radius-pill);
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    font-size: 12.5px;
    font-weight: 700;
    border: 1px solid #bfdbfe;
}

.course-sections-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.course-section-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
}

.course-section-header {
    padding: 18px 22px;
    background: #ffffff;
    border-bottom: 1px solid var(--dash-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.course-section-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.course-section-title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0 0 2px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.course-section-subtitle {
    font-size: 12.5px;
    color: var(--dash-text-muted);
}

.course-section-body {
    padding: 0;
}

/* Lesson Accordion Styling */
.lesson-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
}

.lesson-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    overflow: hidden;
    transition: all 0.2s ease;
}

.lesson-card:hover {
    border-color: #cbd5e1;
    box-shadow: var(--dash-shadow-sm);
}

.lesson-card-header {
    background: #f8fafc;
    padding: 0;
    border-bottom: 1px solid transparent;
}

.lesson-header-btn {
    width: 100%;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
    font-weight: 600;
    font-size: 14px;
    color: var(--dash-text-main);
    gap: 12px;
}

.lesson-header-btn:hover {
    background: #f1f5f9;
}

.lesson-header-btn:focus {
    outline: none;
}

.lesson-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lesson-num-pill {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.lesson-chevron-icon {
    font-size: 13px;
    color: var(--dash-text-light);
    transition: transform 0.2s ease;
}

.lesson-header-btn[aria-expanded="true"] .lesson-chevron-icon {
    transform: rotate(180deg);
    color: var(--dash-primary);
}

.lesson-card-body {
    padding: 20px;
    background: #ffffff;
    border-top: 1px solid var(--dash-border-light);
}

.lesson-content-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--dash-text-main);
    margin-bottom: 18px;
}

.lesson-files-box {
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 16px;
    margin-bottom: 18px;
}

.lesson-files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dash-border-light);
}

.file-type-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
    margin-right: 6px;
}

.file-type-word { color: #2563eb; }
.file-type-excel { color: #16a34a; }
.file-type-pdf { color: #dc2626; }
.file-type-ppt { color: #ea580c; }
.file-type-generic { color: #64748b; }

/* Test Question Builder & Editor Module */
.questions-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 24px;
}

.question-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
    transition: all 0.2s ease;
}

.question-card:hover {
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.question-card-header {
    background: #f8fafc;
    border-bottom: 1px solid var(--dash-border);
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.question-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.question-num-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--dash-radius-pill);
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #c7d2fe;
}

.question-card-body {
    padding: 20px;
}

.question-text-box {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--dash-text-main);
    line-height: 1.5;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--dash-border-light);
}

.question-text-box p {
    margin-bottom: 6px;
}

.question-text-box p:last-child {
    margin-bottom: 0;
}

.answer-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.answer-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 10px 14px;
    gap: 12px;
    transition: all 0.18s ease;
}

.answer-option-row:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.answer-option-row.is-correct-answer {
    background: var(--dash-success-light);
    border-color: #86efac;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}

.answer-option-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.answer-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dash-text-muted);
    cursor: pointer;
    margin: 0;
}

.answer-option-row.is-correct-answer .answer-radio-label {
    color: #047857;
}

.answer-text-display {
    font-size: 13.5px;
    color: var(--dash-text-main);
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
}

.answer-option-row.is-correct-answer .answer-text-display {
    font-weight: 600;
    color: #065f46;
}

.btn-delete-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--dash-text-light);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

.btn-delete-option:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.question-warning-empty {
    background: #fffbeb;
    border: 1px dashed #fde68a;
    border-radius: var(--dash-radius-sm);
    padding: 12px 16px;
    font-size: 12.5px;
    color: #92400e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* Student Test Taking Module */
.test-taking-container {
    font-family: inherit;
    color: var(--dash-text-main);
    padding: 6px 0 45px;
    max-width: 900px;
    margin: 0 auto;
}

.test-timer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: var(--dash-radius-pill);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.test-timer-badge.timer-urgent {
    background: rgba(239, 68, 68, 0.3);
    border-color: #ef4444;
    color: #fee2e2;
    animation: timerUrgentPulse 1.2s infinite;
}

@keyframes timerUrgentPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    50% { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.test-progress-bar-wrap {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--dash-radius-pill);
    overflow: hidden;
    margin-top: 14px;
}

.test-progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: var(--dash-radius-pill);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.test-taking-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    margin-bottom: 22px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.test-taking-card.is-answered {
    border-color: #bbf7d0;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.08);
}

.test-taking-header {
    padding: 16px 22px;
    background: #f8fafc;
    border-bottom: 1px solid var(--dash-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.test-taking-card.is-answered .test-taking-header {
    background: linear-gradient(90deg, #f0fdf4, #f8fafc);
}

.test-option-card {
    display: flex;
    align-items: center;
    padding: 13px 18px;
    background: #ffffff;
    border: 1.5px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.18s ease;
    gap: 14px;
    user-select: none;
}

.test-option-card:hover {
    border-color: #93c5fd;
    background: #f8fafc;
    transform: translateY(-1px);
}

.test-option-card.is-selected {
    border-color: var(--dash-primary);
    background: #eff6ff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
}

.test-option-letter {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--dash-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.18s ease;
}

.test-option-card.is-selected .test-option-letter {
    background: var(--dash-primary);
    color: #ffffff;
}

.test-option-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--dash-text-main);
    line-height: 1.45;
    flex: 1;
}

.test-option-card.is-selected .test-option-text {
    font-weight: 600;
    color: #1e3a8a;
}

/* Multiple choice styling */
.test-option-card.test-option-card-multi.is-selected {
    border-color: var(--dash-indigo);
    background: #eef2ff;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.12);
}

.test-option-letter.letter-multi {
    border-radius: 6px;
}

.test-option-card.test-option-card-multi.is-selected .test-option-letter {
    background: var(--dash-indigo);
    color: #ffffff;
}

.test-option-card.test-option-card-multi.is-selected .test-option-text {
    font-weight: 600;
    color: #312e81;
}

.test-option-card.test-option-card-multi .test-opt-check {
    color: var(--dash-indigo) !important;
}

.test-multi-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--dash-indigo);
    font-weight: 600;
    background: var(--dash-indigo-light);
    border: 1px solid #c7d2fe;
    border-radius: var(--dash-radius-sm);
    padding: 8px 12px;
}

.test-actions-bar {
    position: sticky;
    bottom: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 16px 24px;
    box-shadow: var(--dash-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    z-index: 90;
}

.test-result-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 44px 30px;
    text-align: center;
    box-shadow: var(--dash-shadow-md);
    max-width: 600px;
    margin: 40px auto;
}

.test-result-icon-wrap {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin-bottom: 20px;
}

.test-result-icon-success {
    background: var(--dash-success-light);
    color: var(--dash-success);
    border: 2px solid #a7f3d0;
}

.test-result-icon-error {
    background: var(--dash-danger-light);
    color: var(--dash-danger);
    border: 2px solid #fecaca;
}

.skeleton-kpi {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 20px;
    min-height: 195px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.skeleton-group-box {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 24px;
    min-height: 250px;
}

.retry-btn {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #ffffff;
    border: 1px solid #f87171;
    border-radius: 6px;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.retry-btn:hover {
    background: #fee2e2;
}

/* ============================================================================
   13. TIMETABLE & SCHEDULE GRID MODULE (STUDENT & TEACHER)
   ============================================================================ */
.schedule-container {
    font-family: inherit;
    color: var(--dash-text-main);
    padding: 4px 0 30px;
}

.schedule-header-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: var(--dash-shadow-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.schedule-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.schedule-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

.schedule-title-text h4 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--dash-text-main);
    line-height: 1.2;
}

.schedule-title-text span {
    font-size: 13px;
    color: var(--dash-text-muted);
}

.schedule-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.schedule-search-box {
    position: relative;
    min-width: 250px;
}

.schedule-search-box i.fa-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dash-text-muted);
    font-size: 13px;
}

.schedule-search-input {
    width: 100%;
    padding: 7px 32px 7px 34px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    font-size: 13px;
    outline: none;
    transition: all 0.2s;
    background: #f8fafc;
    color: var(--dash-text-main);
}

.schedule-search-input:focus {
    border-color: var(--dash-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.schedule-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dash-text-muted);
    cursor: pointer;
    display: none;
    font-size: 14px;
}

.schedule-search-clear:hover {
    color: #ef4444;
}

.schedule-view-switcher {
    display: inline-flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border);
}

.view-btn {
    border: none;
    background: transparent;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.view-btn.active {
    background: #ffffff;
    color: var(--dash-primary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.schedule-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 16px;
    scrollbar-width: thin;
}

.day-filter-btn {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-muted);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    box-shadow: var(--dash-shadow-sm);
}

.day-filter-btn:hover {
    border-color: #cbd5e1;
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
}

.day-filter-btn.active {
    background: var(--dash-primary);
    color: #ffffff;
    border-color: var(--dash-primary);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

.day-filter-btn.is-today-btn {
    border-color: #93c5fd;
}

.day-filter-btn.active .day-count-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.day-count-badge {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 20px;
    background: #f1f5f9;
    color: var(--dash-text-muted);
    font-weight: 700;
}

.today-pill-dot {
    width: 7px;
    height: 7px;
    background-color: var(--dash-success);
    border-radius: 50%;
    display: inline-block;
}

.schedule-days-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}

.day-column-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--dash-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.day-column-card.is-current-day {
    border-color: #93c5fd;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}

.day-column-header {
    background: #f8fafc;
    border-bottom: 1px solid var(--dash-border);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.day-column-card.is-current-day .day-column-header {
    background: linear-gradient(90deg, #eff6ff, #f8fafc);
}

.day-column-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-text-main);
}

.day-today-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--dash-success);
    color: #ffffff;
}

.day-column-lessons {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.lesson-item-card {
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 12px 14px;
    background: #ffffff;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lesson-item-card:hover {
    border-color: #cbd5e1;
    box-shadow: var(--dash-shadow-md);
    transform: translateY(-1px);
}

.lesson-item-card.is-now-live {
    border-color: var(--dash-success);
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
    box-shadow: 0 0 0 1px var(--dash-success), 0 4px 14px rgba(16, 185, 129, 0.15);
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #047857;
    background: var(--dash-success-light);
    border: 1px solid #a7f3d0;
    padding: 2px 8px;
    border-radius: 20px;
}

.live-dot-pulse {
    width: 7px;
    height: 7px;
    background: var(--dash-success);
    border-radius: 50%;
    animation: livePulse 1.4s infinite;
}

@keyframes livePulse {
    0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.lesson-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.lesson-time-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-text-muted);
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 6px;
}

.lesson-item-card.is-now-live .lesson-time-pill {
    background: #dcfce7;
    color: #047857;
}

.lesson-subject-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-text-main);
    line-height: 1.35;
    margin: 0;
}

.lesson-meta-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--dash-text-muted);
}

.lesson-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.lesson-group-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.room-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lesson-action-row {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.lesson-action-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-join-class {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    color: var(--dash-primary);
    border: 1.5px solid var(--dash-primary);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-join-class:hover {
    background: var(--dash-primary);
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

.btn-join-class.is-live-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border-color: #059669;
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3);
}

.btn-join-class.is-live-btn:hover {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
}

.btn-action-sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s ease;
    line-height: 1.4;
}

.btn-action-primary {
    background: #eff6ff;
    color: var(--dash-primary);
    border-color: #bfdbfe;
}
.btn-action-primary:hover {
    background: var(--dash-primary);
    color: #ffffff !important;
    border-color: var(--dash-primary);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.25);
}

.btn-action-live {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff !important;
    border-color: #059669;
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3);
}
.btn-action-live:hover {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
}

.btn-action-secondary {
    background: #f8fafc;
    color: #475569;
    border-color: var(--dash-border);
}
.btn-action-secondary:hover {
    background: #f1f5f9;
    color: var(--dash-text-main);
    border-color: #cbd5e1;
}

.btn-action-journal {
    background: #f0fdf4;
    color: #047857;
    border-color: #a7f3d0;
}
.btn-action-journal:hover {
    background: #10b981;
    color: #ffffff !important;
    border-color: #10b981;
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.25);
}

.badge-offline-mode {
    font-size: 11px;
    color: var(--dash-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
}

/* Schedule Compact Table */
.schedule-compact-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--dash-shadow-sm);
}

.schedule-compact-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.schedule-compact-table th {
    background: #f8fafc;
    color: var(--dash-text-muted);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--dash-border);
    white-space: nowrap;
}

.schedule-compact-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.schedule-compact-table tr:hover td {
    background: #f8fafc;
}

.schedule-compact-table tr.is-now-live-row td {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.schedule-compact-table tr.day-divider-row td {
    background: #f1f5f9;
    font-weight: 700;
    color: var(--dash-text-main);
    padding: 8px 14px;
    font-size: 12px;
    letter-spacing: 0.3px;
}

.schedule-empty-box {
    text-align: center;
    padding: 50px 20px;
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    color: var(--dash-text-muted);
}

.schedule-empty-box i {
    font-size: 40px;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.schedule-empty-box h5 {
    margin: 0 0 6px;
    font-weight: 700;
    color: var(--dash-text-main);
}

.schedule-loading-box {
    text-align: center;
    padding: 60px 20px;
    color: var(--dash-text-muted);
}

.schedule-loading-box .spinner-border {
    color: var(--dash-primary);
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
}

/* ----------------------------------------------------------------------------
   CREATIVITY TESTS & ASSIGNMENTS STYLES
   ---------------------------------------------------------------------------- */
.creativity-card-wrapper {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
    margin-bottom: 24px;
}

.creativity-task-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px;
    background: #f8fafc;
    border-bottom: 1px solid var(--dash-border);
}

.creativity-task-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 6px;
}

.creativity-task-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: var(--dash-radius-pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-main);
    background: #ffffff;
    border: 1px solid var(--dash-border);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    text-decoration: none;
}

.creativity-task-pill:hover {
    border-color: var(--dash-primary);
    color: var(--dash-primary);
    transform: translateY(-1px);
    box-shadow: var(--dash-shadow-sm);
}

.creativity-task-pill.active {
    background: var(--dash-primary);
    border-color: var(--dash-primary);
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

.creativity-task-pill .course-tag {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.06);
    font-weight: 500;
}

.creativity-task-pill.active .course-tag {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

/* Student Row Avatar */
.student-avatar-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-avatar-circle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.2);
    text-transform: uppercase;
}

.student-name-wrap {
    display: flex;
    flex-direction: column;
}

.student-name-wrap .name-main {
    font-weight: 600;
    color: var(--dash-text-main);
    font-size: 14px;
}

.student-name-wrap .name-sub {
    font-size: 11px;
    color: var(--dash-text-muted);
}

/* Status Badges */
.dash-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.dash-status-pill.status-success {
    background: var(--dash-success-light);
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.dash-status-pill.status-warning {
    background: var(--dash-amber-light);
    color: #92400e;
    border: 1px solid var(--dash-amber-border);
}

.dash-status-pill.status-sky {
    background: var(--dash-sky-light);
    color: #075985;
    border: 1px solid #bae6fd;
}

.dash-status-pill.status-indigo {
    background: var(--dash-indigo-light);
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

.dash-status-pill.status-neutral {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* Pulse dot animation */
.dash-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--dash-amber);
    display: inline-block;
    animation: pulseAnimation 1.6s infinite ease-in-out;
}

/* File Attachment Chip */
.dash-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    color: var(--dash-text-main);
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.dash-file-chip:hover {
    background: #ffffff;
    border-color: var(--dash-primary);
    color: var(--dash-primary);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

.dash-file-chip i.fa-file-word-o { color: #2563eb; font-size: 14px; }
.dash-file-chip i.fa-file-excel-o { color: #16a34a; font-size: 14px; }
.dash-file-chip i.fa-file-powerpoint-o { color: #ea580c; font-size: 14px; }
.dash-file-chip i.fa-file-pdf-o { color: #dc2626; font-size: 14px; }
.dash-file-chip i.fa-file { color: #64748b; font-size: 14px; }

/* Comment bubble */
.dash-comment-badge {
    display: inline-block;
    max-width: 220px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 12px;
    color: var(--dash-text-main);
    line-height: 1.4;
    word-break: break-word;
}

/* Creativity Modal Check Form */
.creativity-modal-box {
    padding: 8px 4px;
}

.creativity-modal-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
}

.creativity-modal-header-info i {
    font-size: 20px;
    color: var(--dash-primary);
}

.creativity-modal-header-info .info-text {
    font-size: 13px;
    color: #1e3a8a;
    font-weight: 500;
}

.creativity-textarea {
    width: 100%;
    min-height: 110px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--dash-border);
    background: #ffffff;
    color: var(--dash-text-main);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}

.creativity-textarea:focus {
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    outline: none;
}

/* ----------------------------------------------------------------------------
   STATUS PULSE DOT & GLOBAL GRADIENTS
   ---------------------------------------------------------------------------- */
.status-pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 rgba(239, 68, 68, 0.4);
    animation: pulseAnimation 2s infinite;
    vertical-align: middle;
    flex-shrink: 0;
}

@keyframes pulseAnimation {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.bg-blue-gradient {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: #ffffff !important;
}
.bg-indigo-gradient {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    color: #ffffff !important;
}
.bg-purple-gradient {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    color: #ffffff !important;
}
.bg-emerald-gradient {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    color: #ffffff !important;
}
.bg-amber-gradient {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    color: #ffffff !important;
}
.bg-sky-gradient {
    background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
    color: #ffffff !important;
}
.bg-rose-gradient,
.bg-red-gradient {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    color: #ffffff !important;
}

/* ----------------------------------------------------------------------------
   KPI METRICS GRID & CARDS
   ---------------------------------------------------------------------------- */
.kpi-metrics-grid,
.executive-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.kpi-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: var(--dash-shadow-sm);
    position: relative;
    cursor: pointer;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
    color: inherit !important;
}

.kpi-card.active-kpi {
    border-color: var(--dash-primary);
    background: var(--dash-primary-light);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.kpi-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kpi-card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-muted);
}

.kpi-card-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}

.kpi-card-sub {
    font-size: 12px;
    color: var(--dash-text-muted);
    font-weight: 500;
}

.kpi-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------------------------------------------
   SKELETON SHIMMER LOADERS
   ---------------------------------------------------------------------------- */
.skeleton-card,
.skeleton-item {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----------------------------------------------------------------------------
   SEARCH BOX & FILTER PILLS
   ---------------------------------------------------------------------------- */
.search-box-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-box-wrapper i.fa-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dash-text-light);
    font-size: 13px;
    pointer-events: none;
}

.search-box-wrapper input {
    width: 100%;
    padding: 9px 34px 9px 34px;
    font-size: 13px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    outline: none;
    transition: all 0.2s ease;
}

.search-box-wrapper input:focus {
    background: #ffffff;
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.search-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--dash-text-light);
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    display: none;
    align-items: center;
    justify-content: center;
}

.search-clear-btn:hover {
    color: var(--dash-danger);
}

.filter-pills-group,
.filter-pills-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.filter-pill-btn,
.pill-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-text-muted);
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
}

.filter-pill-btn:hover,
.pill-tab-btn:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    color: var(--dash-text-main);
}

.filter-pill-btn.active,
.pill-tab-btn.active {
    background: var(--dash-primary);
    color: #ffffff;
    border-color: var(--dash-primary);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.filter-pill-count,
.pill-tab-count {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: var(--dash-radius-pill);
    background: #e2e8f0;
    color: var(--dash-text-main);
    font-weight: 700;
}

.filter-pill-btn.active .filter-pill-count,
.pill-tab-btn.active .pill-tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* ----------------------------------------------------------------------------
   BADGES & STATUS TAGS
   ---------------------------------------------------------------------------- */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: var(--dash-radius-pill);
}

.item-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--dash-radius-pill);
}

.badge-anon {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.badge-stud {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border: 1px solid rgba(79, 70, 229, 0.2);
}

.badge-new {
    background: var(--dash-amber-light);
    color: var(--dash-amber);
    border: 1px solid rgba(217, 119, 6, 0.25);
}

.badge-done {
    background: var(--dash-success-light);
    color: var(--dash-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-status-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
}

.status-seen {
    background: var(--dash-success-light);
    color: var(--dash-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-unseen {
    background: var(--dash-amber-light);
    color: var(--dash-amber);
    border: 1px solid rgba(217, 119, 6, 0.25);
}

.status-has-reply {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.status-no-reply {
    background: var(--dash-bg-subtle);
    color: var(--dash-text-muted);
    border: 1px solid var(--dash-border);
}

/* Hero Button Primary */
.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--dash-radius-pill);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
    text-decoration: none !important;
}

.btn-hero-primary:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.5);
    color: #ffffff !important;
}

/* ----------------------------------------------------------------------------
   STUDENT APPEALS VIEW (Views/Appeal/AppealStudent.cshtml)
   ---------------------------------------------------------------------------- */
.student-appeals-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 30px;
}

.appeals-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: var(--dash-radius);
    padding: 24px 28px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: var(--dash-shadow-md);
    position: relative;
    overflow: hidden;
}

.appeals-hero::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.25) 0%, rgba(37, 99, 235, 0) 70%);
    pointer-events: none;
}

.appeals-controls-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: var(--dash-shadow-sm);
}

.appeals-feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.appeal-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 20px 22px;
    box-shadow: var(--dash-shadow-sm);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.appeal-card:hover {
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

.appeal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid var(--dash-border-light);
    padding-bottom: 12px;
}

.appeal-date-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--dash-text-muted);
    font-weight: 500;
}

.appeal-date-info i {
    color: var(--dash-primary);
}

.appeal-badges-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.appeal-body-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--dash-text-main);
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--dash-bg-subtle);
    padding: 14px 16px;
    border-radius: var(--dash-radius-sm);
    border-left: 3px solid var(--dash-primary);
}

.rector-reply-box {
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    border: 1px solid #bfdbfe;
    border-left: 4px solid var(--dash-indigo);
    border-radius: var(--dash-radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rector-reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.rector-reply-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-indigo);
}

.rector-reply-time {
    font-size: 12px;
    color: var(--dash-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.rector-reply-content {
    font-size: 14px;
    line-height: 1.55;
    color: var(--dash-text-main);
    white-space: pre-wrap;
    word-break: break-word;
}

.appeal-notice-alert {
    background: var(--dash-primary-light);
    border: 1px solid #bfdbfe;
    border-radius: var(--dash-radius-sm);
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #1e40af;
    line-height: 1.45;
}

.appeal-notice-alert i {
    font-size: 16px;
    color: var(--dash-primary);
    flex-shrink: 0;
    margin-top: 1px;
}

.char-counter-bar {
    display: flex;
    justify-content: flex-end;
    font-size: 12px;
    color: var(--dash-text-muted);
}

/* Modals & Compose */
.modal-custom-dialog {
    max-width: 580px;
    margin: 40px auto;
}

.modal-custom-content {
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-lg);
    background: #ffffff;
    overflow: hidden;
}

.modal-custom-header {
    background: #ffffff;
    border-bottom: 1px solid var(--dash-border-light);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-custom-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-custom-header h5 i {
    color: var(--dash-primary);
}

.modal-custom-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--dash-text-light);
    cursor: pointer;
    transition: color 0.15s;
    padding: 4px 8px;
}

.modal-custom-close:hover {
    color: var(--dash-danger);
}

.modal-custom-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.compose-textarea {
    width: 100%;
    min-height: 120px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 12px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--dash-text-main);
    resize: vertical;
    transition: all 0.2s;
    outline: none;
}

.compose-textarea:focus {
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.modal-custom-footer {
    padding: 14px 24px;
    background: var(--dash-bg-subtle);
    border-top: 1px solid var(--dash-border-light);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-custom-cancel {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-muted);
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-custom-cancel:hover {
    background: #f1f5f9;
    color: var(--dash-text-main);
}

.btn-custom-submit {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-primary-dark));
    border: none;
    border-radius: var(--dash-radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    transition: all 0.2s;
}

.btn-custom-submit:hover {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

/* ----------------------------------------------------------------------------
   RECTOR APPEALS MASTER-DETAIL WORKSPACE (Views/Appeal/AppealRector.cshtml)
   ---------------------------------------------------------------------------- */
.rector-appeals-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 30px;
}

.appeals-workspace {
    display: grid;
    grid-template-columns: 410px 1fr;
    gap: 18px;
    min-height: 640px;
    background: transparent;
    align-items: stretch;
}

@media (max-width: 992px) {
    .appeals-workspace {
        grid-template-columns: 1fr;
    }
    .appeals-detail-pane {
        display: none !important;
    }
    .appeals-workspace.mobile-reader-active .appeals-list-pane {
        display: none !important;
    }
    .appeals-workspace.mobile-reader-active .appeals-detail-pane {
        display: flex !important;
    }
    .reader-back-mobile {
        display: inline-flex !important;
    }
}

.appeals-list-pane {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 700px;
}

.appeals-list-header {
    padding: 16px;
    border-bottom: 1px solid var(--dash-border);
    background: var(--dash-bg-subtle);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.appeals-items-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--dash-bg-subtle);
}

.appeal-list-item {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    box-shadow: var(--dash-shadow-sm);
}

.appeal-list-item:hover {
    border-color: #cbd5e1;
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: var(--dash-shadow-md);
}

.appeal-list-item.selected {
    border-color: var(--dash-primary);
    background: var(--dash-primary-light);
    box-shadow: 0 0 0 1.5px var(--dash-primary);
}

.item-top-row,
.item-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.item-time-text {
    font-size: 11.5px;
    color: var(--dash-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.item-body-preview {
    font-size: 13px;
    color: var(--dash-text-main);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.appeals-list-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--dash-border);
    background: var(--dash-bg-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--dash-text-muted);
}

.pagination-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-page-nav {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--dash-border);
    background: #ffffff;
    color: var(--dash-text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-page-nav:hover:not(:disabled) {
    background: var(--dash-bg-subtle);
    border-color: var(--dash-primary);
    color: var(--dash-primary);
}

.btn-page-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.appeals-detail-pane {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 700px;
}

.empty-reader-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 24px;
    text-align: center;
}

.empty-reader-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 16px;
}

.empty-reader-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0 0 8px 0;
}

.empty-reader-desc {
    font-size: 13.5px;
    color: var(--dash-text-muted);
    max-width: 420px;
    margin: 0;
    line-height: 1.5;
}

.active-reader-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.reader-top-bar {
    padding: 14px 20px;
    border-bottom: 1px solid var(--dash-border-light);
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.reader-meta-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.reader-back-mobile {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--dash-radius-pill);
    border: 1px solid var(--dash-border);
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    cursor: pointer;
}

.reader-content-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--dash-bg-subtle);
}

.reader-appeal-box {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-left: 4px solid var(--dash-primary);
    border-radius: var(--dash-radius-sm);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--dash-shadow-sm);
}

.reader-appeal-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-text-muted);
}

.reader-appeal-text {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--dash-text-main);
    white-space: pre-wrap;
    word-break: break-word;
}

.rector-reply-section {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--dash-shadow-sm);
}

.rector-reply-section.has-answer {
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    border-left: 4px solid var(--dash-indigo);
    border-color: #bfdbfe;
}

.reply-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-indigo);
}

.reply-composer-textarea {
    width: 100%;
    min-height: 120px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 12px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
    resize: vertical;
    font-family: inherit;
    color: var(--dash-text-main);
}

.reply-composer-textarea:focus {
    border-color: var(--dash-indigo);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
    background: #ffffff;
}

.reply-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.btn-send-reply {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #ffffff;
    border: none;
    border-radius: var(--dash-radius-pill);
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.btn-send-reply:hover {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
}

/* ----------------------------------------------------------------------------
   ATTENDANCE VIEW (Views/Attendance/Index.cshtml)
   ---------------------------------------------------------------------------- */
.mode-toggle-wrapper {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    padding: 4px;
    gap: 4px;
}

.mode-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: var(--dash-radius-pill);
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-text-muted);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-tab-btn:hover {
    color: var(--dash-text-main);
}

.mode-tab-btn.active {
    background: #ffffff;
    color: var(--dash-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.mode-tab-btn.active.summary-active {
    color: var(--dash-indigo);
}

.custom-date-box {
    display: none;
    margin-top: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px dashed var(--dash-border);
    border-radius: var(--dash-radius-sm);
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.custom-date-input {
    padding: 6px 10px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    font-size: 12.5px;
    outline: none;
    background: #ffffff;
}

.custom-date-input:focus {
    border-color: var(--dash-indigo);
}

/* ----------------------------------------------------------------------------
   RECTOR DASHBOARD (Views/Rector/Index.cshtml)
   ---------------------------------------------------------------------------- */
.rector-dashboard-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 30px;
}

.rector-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: var(--dash-radius);
    padding: 24px 28px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: var(--dash-shadow-md);
    position: relative;
    overflow: hidden;
}

.rector-hero::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.35) 0%, rgba(79, 70, 229, 0) 70%);
    pointer-events: none;
}

.executive-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.dashboard-widgets-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 20px;
}

@media (max-width: 1080px) {
    .dashboard-widgets-grid {
        grid-template-columns: 1fr;
    }
}

.widget-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.appeals-mini-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.appeal-mini-item {
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.15s;
    text-decoration: none;
    color: inherit;
}

.appeal-mini-item:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: var(--dash-shadow-sm);
    color: inherit;
}

.appeal-mini-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}

.appeal-mini-text {
    font-size: 13px;
    color: var(--dash-text-main);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.today-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.today-metric-box {
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.today-metric-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--dash-text-main);
}

.today-metric-title {
    font-size: 12px;
    color: var(--dash-text-muted);
    font-weight: 500;
}

.stat-bars-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-bar-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-bar-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--dash-text-main);
}

.stat-bar-track {
    width: 100%;
    height: 7px;
    background: var(--dash-bg-subtle);
    border-radius: var(--dash-radius-pill);
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    border-radius: var(--dash-radius-pill);
    transition: width 0.6s ease;
}

.fill-indigo { background: linear-gradient(90deg, #4f46e5, #6366f1); }
.fill-purple { background: linear-gradient(90deg, #7c3aed, #a855f7); }
.fill-blue { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.fill-emerald { background: linear-gradient(90deg, #059669, #10b981); }

.dept-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dept-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    font-size: 13px;
}

.dept-name {
    font-weight: 600;
    color: var(--dash-text-main);
}

.dept-counts {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--dash-text-muted);
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.quick-link-tile {
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    text-decoration: none;
    color: var(--dash-text-main);
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

.quick-link-tile:hover {
    background: #ffffff;
    border-color: var(--dash-primary);
    color: var(--dash-primary);
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-sm);
}

.quick-link-tile i {
    font-size: 20px;
    color: var(--dash-primary);
}

/* Rector Tuition Widget */
.tuition-rector-widget {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tuition-rate-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 14px 16px;
}

.tuition-rate-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tuition-rate-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-muted);
}

.tuition-rate-num {
    font-size: 20px;
    font-weight: 800;
    color: var(--dash-success);
}

.tuition-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

@media (max-width: 600px) {
    .tuition-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------------------
   ACCESS DENIED & ERROR VIEWS (Views/Account/AccessDenied.cshtml & Views/Error/Index.cshtml)
   ---------------------------------------------------------------------------- */
.access-denied-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68vh;
    padding: 20px;
}

.access-denied-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-lg);
    max-width: 580px;
    width: 100%;
    padding: 40px 36px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.access-denied-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #d97706, #ef4444, #f59e0b);
}

.access-icon-container {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    background: linear-gradient(135deg, #fef3c7 0%, #fee2e2 100%);
    border: 2px solid #fcd34d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #d97706;
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.18);
    position: relative;
}

.access-icon-container .status-mini-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--dash-danger);
    color: #ffffff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
}

.access-code-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dash-amber-light);
    color: var(--dash-amber);
    border: 1px solid var(--dash-amber-border);
    padding: 4px 12px;
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.access-title-group h2 {
    margin: 6px 0 8px 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--dash-text-main);
    letter-spacing: -0.02em;
}

.access-title-group p {
    font-size: 14px;
    color: var(--dash-text-muted);
    line-height: 1.55;
    margin: 0;
    max-width: 460px;
}

.target-url-box {
    width: 100%;
    background: var(--dash-bg-subtle);
    border: 1px dashed var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 10px 14px;
    font-size: 12px;
    color: var(--dash-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    word-break: break-all;
}

.target-url-box code {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--dash-danger);
    font-weight: 600;
}

.user-info-card {
    width: 100%;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.user-left-info {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.user-avatar-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.user-name-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-main);
    line-height: 1.2;
}

.user-sub-label {
    font-size: 11px;
    color: var(--dash-text-light);
}

.badge-user-role {
    padding: 4px 10px;
    border-radius: var(--dash-radius-pill);
    font-size: 11px;
    font-weight: 600;
    background: #e2e8f0;
    color: #334155;
}

.badge-role-admin { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.badge-role-rector { background: #f3e8ff; color: #6b21a8; border: 1px solid #d8b4fe; }
.badge-role-teacher { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
.badge-role-student { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }

.access-actions-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 6px;
}

.btn-action-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    border: none;
    border-radius: var(--dash-radius-pill);
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
}

.btn-action-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
    color: #ffffff;
}

.btn-action-secondary {
    background: var(--dash-bg-card);
    color: var(--dash-text-main);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-action-secondary:hover {
    background: var(--dash-bg-subtle);
    border-color: #cbd5e1;
    color: var(--dash-text-main);
    transform: translateY(-1px);
}

.btn-action-logout {
    background: transparent;
    color: var(--dash-danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--dash-radius-pill);
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-action-logout:hover {
    background: var(--dash-danger-light);
    border-color: var(--dash-danger);
    color: var(--dash-danger);
}

/* Standalone Error Card (Views/Error/Index.cshtml) */
.error-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-lg);
    max-width: 520px;
    width: 100%;
    padding: 44px 36px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
}

.error-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #2563eb, #4f46e5);
}

.error-number-badge {
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.error-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    padding: 4px 12px;
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 700;
}

.error-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0;
}

.error-desc {
    font-size: 14px;
    color: var(--dash-text-muted);
    line-height: 1.55;
    margin: 0;
}

.error-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.btn-home-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    border: none;
    border-radius: var(--dash-radius-pill);
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
}

.btn-home-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-2px);
    color: #ffffff;
    text-decoration: none;
}

.btn-back-secondary {
    background: #ffffff;
    color: var(--dash-text-main);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-back-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: var(--dash-text-main);
    text-decoration: none;
}

/* ============================================================================
   ADMIN DASHBOARD VIEW (Views/Admin/Index.cshtml, _IndexVideoRooms.cshtml, _IndexUsersOnline.cshtml)
   ============================================================================ */

.admin-dashboard-container {
    width: 100%;
    max-width: 100%;
    animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Monitoring Grid (Rooms + Users Online) */
.admin-monitoring-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
    align-items: stretch;
}

@media (max-width: 1024px) {
    .admin-monitoring-grid {
        grid-template-columns: 1fr;
    }
}

/* Admin Dashboard Cards */
.admin-dash-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.admin-dash-card:hover {
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.admin-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--dash-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    gap: 12px;
}

.admin-card-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
    flex-shrink: 0;
}

.admin-card-icon.icon-video {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

.admin-card-icon.icon-users {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}

.admin-card-title-wrap h4 {
    margin: 0 0 2px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-card-title-wrap p {
    margin: 0;
    font-size: 12px;
    color: var(--dash-text-muted);
}

.admin-card-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-refresh-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--dash-border);
    background: var(--dash-bg-subtle);
    color: var(--dash-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.admin-refresh-btn:hover {
    background: #ffffff;
    color: var(--dash-primary);
    border-color: var(--dash-primary);
    transform: rotate(45deg);
}

.admin-refresh-btn.spinning i {
    animation: fa-spin 1s infinite linear;
}

.admin-card-body {
    padding: 16px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Modern Admin Table */
.admin-table-container {
    overflow-x: auto;
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border-light);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 13px;
}

.admin-table thead th {
    background: var(--dash-bg-subtle);
    padding: 10px 14px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dash-text-muted);
    border-bottom: 1px solid var(--dash-border);
    text-align: left;
    white-space: nowrap;
}

.admin-table tbody td {
    padding: 12px 14px;
    color: var(--dash-text-main);
    border-bottom: 1px solid var(--dash-border-light);
    vertical-align: middle;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover td {
    background: rgba(37, 99, 235, 0.025);
}

.room-name-cell {
    font-weight: 600;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.room-name-cell i {
    color: var(--dash-primary);
    font-size: 13px;
}

/* Status Badges */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--dash-radius-pill);
    font-size: 11.5px;
    font-weight: 600;
}

.badge-pill-success {
    background: var(--dash-success-light);
    color: #047857;
    border: 1px solid #a7f3d0;
}

.badge-pill-neutral {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.badge-pill-danger {
    background: var(--dash-danger-light);
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.badge-pill-primary {
    background: var(--dash-primary-light);
    color: var(--dash-primary-dark);
    border: 1px solid #bfdbfe;
}

.badge-pill-indigo {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border: 1px solid #c7d2fe;
}

.badge-pill-amber {
    background: var(--dash-amber-light);
    color: var(--dash-amber);
    border: 1px solid var(--dash-amber-border);
}

/* Online Users Breakdown */
.online-users-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.online-role-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border-light);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.online-role-card:hover {
    background: #ffffff;
    border-color: var(--dash-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transform: translateY(-1px);
}

.online-role-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.online-role-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.online-role-icon.role-students {
    background: #e0f2fe;
    color: #0284c7;
}

.online-role-icon.role-teachers {
    background: #fef3c7;
    color: #d97706;
}

.online-role-icon.role-rector {
    background: #ede9fe;
    color: #7c3aed;
}

.online-role-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dash-text-main);
}

.online-role-badge {
    font-size: 14px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: var(--dash-radius-pill);
    min-width: 36px;
    text-align: center;
}

.online-footer-action {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--dash-border-light);
}

.btn-online-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 14px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    color: var(--dash-text-main);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-online-details:hover {
    background: var(--dash-primary-light);
    border-color: #bfdbfe;
    color: var(--dash-primary-dark);
    text-decoration: none;
}

/* Section Header */
.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    margin-top: 8px;
}

.admin-section-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-section-title-group i {
    font-size: 18px;
    color: var(--dash-primary);
}

.admin-section-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--dash-text-main);
    margin: 0;
    letter-spacing: -0.2px;
}

.admin-section-subtitle {
    font-size: 13px;
    color: var(--dash-text-muted);
    margin: 2px 0 0 0;
}

/* System Management Hub Grid */
.admin-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.admin-hub-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 18px 20px;
    box-shadow: var(--dash-shadow-sm);
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.admin-hub-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.admin-hub-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: transparent;
    transition: background 0.2s ease;
}

.admin-hub-card:hover::after {
    background: var(--dash-primary);
}

.admin-hub-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.admin-hub-card:hover .admin-hub-icon-wrap {
    transform: scale(1.05);
}

.admin-hub-content {
    flex: 1;
    min-width: 0;
}

.admin-hub-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0 0 3px 0;
    line-height: 1.3;
}

.admin-hub-desc {
    font-size: 12.5px;
    color: var(--dash-text-muted);
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-hub-arrow {
    color: #cbd5e1;
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.admin-hub-card:hover .admin-hub-arrow {
    color: var(--dash-primary);
    transform: translateX(3px);
}

/* Hub Icon Gradients */
.hub-gradient-teachers {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.hub-gradient-classes {
    background: linear-gradient(135deg, #6366f1, #4338ca);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.hub-gradient-students {
    background: linear-gradient(135deg, #10b981, #047857);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.hub-gradient-groups {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.hub-gradient-rector {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.hub-gradient-connections {
    background: linear-gradient(135deg, #06b6d4, #0e7490);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

/* Empty States for Admin Cards */
.admin-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 20px;
    flex: 1;
}

.admin-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}

.admin-empty-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0 0 4px 0;
}

.admin-empty-desc {
    font-size: 12.5px;
    color: var(--dash-text-muted);
    margin: 0;
    max-width: 280px;
    line-height: 1.4;
}

/* Skeleton Loaders for Admin Dashboard */
.skeleton-admin-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 220px;
}

/* ============================================================================
   ADMIN TEACHERS VIEW (Views/Admin/Teachers.cshtml, _AddTeacherPartial.cshtml)
   ============================================================================ */

.admin-grid-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
    margin-bottom: 24px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.admin-grid-card:hover {
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.admin-grid-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--dash-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-grid-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-grid-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    flex-shrink: 0;
}

.admin-grid-title-wrap h4 {
    margin: 0 0 2px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-grid-title-wrap p {
    margin: 0;
    font-size: 12.5px;
    color: var(--dash-text-muted);
}

.admin-grid-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-grid-action-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff !important;
    border: none;
    border-radius: var(--dash-radius-sm);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25);
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.btn-grid-action-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.35);
}

/* Kendo Grid Modern Overrides */
.admin-grid-wrapper .k-grid {
    border: none !important;
    font-family: inherit;
    background: transparent;
}

.admin-grid-wrapper .k-grid-header {
    background: var(--dash-bg-subtle) !important;
    border-bottom: 1px solid var(--dash-border) !important;
    padding-right: 0 !important;
}

.admin-grid-wrapper .k-grid-header th.k-header {
    background: var(--dash-bg-subtle) !important;
    border-color: var(--dash-border-light) !important;
    color: var(--dash-text-muted) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 12px 14px !important;
    vertical-align: middle !important;
}

.admin-grid-wrapper .k-grid-header th.k-header .k-link {
    color: var(--dash-text-main) !important;
    font-weight: 700 !important;
    padding: 0 !important;
}

.admin-grid-wrapper .k-grid-content {
    background: #ffffff;
}

.admin-grid-wrapper .k-grid-content tr {
    transition: background-color 0.15s ease;
}

.admin-grid-wrapper .k-grid-content tr:hover {
    background-color: rgba(37, 99, 235, 0.03) !important;
}

.admin-grid-wrapper .k-grid-content td {
    padding: 12px 14px !important;
    font-size: 13px !important;
    color: var(--dash-text-main) !important;
    border-color: var(--dash-border-light) !important;
    vertical-align: middle !important;
}

.admin-grid-wrapper .k-grid-toolbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--dash-border-light) !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.admin-grid-wrapper .k-grid-toolbar .k-grid-search {
    margin-left: auto;
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border);
    padding: 4px 10px;
    background: var(--dash-bg-subtle);
    font-size: 13px;
    transition: all 0.2s ease;
}

.admin-grid-wrapper .k-grid-toolbar .k-grid-search:focus-within {
    border-color: var(--dash-primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.admin-grid-wrapper .k-grid-toolbar .k-button {
    border-radius: var(--dash-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    transition: all 0.2s ease !important;
}

.admin-grid-wrapper .k-pager-wrap {
    background: var(--dash-bg-subtle) !important;
    border-top: 1px solid var(--dash-border) !important;
    padding: 10px 18px !important;
    color: var(--dash-text-muted) !important;
    font-size: 12.5px !important;
}

.admin-grid-wrapper .k-pager-numbers .k-link {
    border-radius: 6px !important;
    margin: 0 2px !important;
    color: var(--dash-text-main) !important;
    transition: all 0.15s ease !important;
}

.admin-grid-wrapper .k-pager-numbers .k-state-selected,
.admin-grid-wrapper .k-pager-numbers .k-selected {
    background: var(--dash-primary) !important;
    color: #ffffff !important;
    border-color: var(--dash-primary) !important;
}

/* Teacher Grid Custom Elements */
.teacher-cell-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--dash-text-main) !important;
    text-decoration: none !important;
    transition: color 0.18s ease;
}

.teacher-cell-name:hover {
    color: var(--dash-primary) !important;
}

.teacher-cell-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

.grid-email-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dash-text-muted) !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.grid-email-link:hover {
    color: var(--dash-primary) !important;
}

.discipline-tag-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.discipline-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 500;
    padding: 2px 8px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: 6px;
    color: var(--dash-text-main);
    line-height: 1.4;
}

/* Modal Form Styles (_AddTeacherPartial.cshtml) */
.admin-modal-form {
    padding: 6px 4px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dash-text-main);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--dash-border-light);
    margin-bottom: 12px;
    margin-top: 4px;
}

.modal-section-title i {
    color: var(--dash-primary);
    font-size: 14px;
}

.modal-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.modal-form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (max-width: 768px) {
    .modal-form-grid-3,
    .modal-form-grid-2 {
        grid-template-columns: 1fr;
    }
}

.modal-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    margin-top: 10px;
    border-top: 1px solid var(--dash-border-light);
}

.btn-modal-cancel {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    color: var(--dash-text-main);
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-cancel:hover {
    background: var(--dash-bg-subtle);
    border-color: #cbd5e1;
}

.btn-modal-submit {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: none;
    border-radius: var(--dash-radius-sm);
    color: #ffffff;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
}

.btn-modal-submit:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

/* Modal Tab Navigation */
.modal-tabs-header {
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid var(--dash-border);
    padding-bottom: 10px;
    margin-bottom: 16px;
    overflow-x: auto;
}

.modal-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--dash-radius-sm);
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border-light);
    color: var(--dash-text-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease;
}

.modal-tab-btn:hover {
    background: #ffffff;
    border-color: var(--dash-border);
    color: var(--dash-text-main);
}

.modal-tab-btn.active {
    background: var(--dash-primary-light);
    color: var(--dash-primary-dark);
    border-color: #bfdbfe;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1);
}

.modal-tab-btn i {
    font-size: 13px;
}

.modal-tab-pane {
    display: none;
    animation: fadeIn 0.2s ease;
}

.modal-tab-pane.active {
    display: block;
}

.modal-tab-body {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
}

/* ============================================================================
   ADMIN TEACHER CARD VIEW (Views/Admin/TeacherCard.cshtml, _TeacherCardPartial.cshtml)
   ============================================================================ */

.teacher-profile-container {
    width: 100%;
    max-width: 100%;
    animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Teacher Profile Hero Banner */
.teacher-profile-hero {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-radius: var(--dash-radius);
    padding: 24px 28px;
    color: #ffffff;
    box-shadow: var(--dash-shadow-lg);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.teacher-profile-hero-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Photo & Avatar Area */
.profile-photo-container {
    position: relative;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
}

.profile-photo-wrap {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    border: 3px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.profile-photo-wrap:hover {
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.02);
}

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

.profile-avatar-initial {
    font-size: 38px;
    font-weight: 800;
    color: #ffffff;
    user-select: none;
}

.profile-photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    padding: 4px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.profile-photo-wrap:hover .profile-photo-overlay {
    opacity: 1;
}

.btn-photo-delete-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--dash-danger);
    color: #ffffff;
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    transition: all 0.18s ease;
    z-index: 5;
}

.btn-photo-delete-badge:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.profile-hero-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-hero-name {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.profile-academic-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.badge-academic-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
}

.profile-status-badges-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* Profile Data Grid */
.profile-data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 992px) {
    .profile-data-grid {
        grid-template-columns: 1fr;
    }
}

.profile-data-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.profile-data-card:hover {
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.profile-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--dash-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    gap: 12px;
}

.profile-card-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
    flex-shrink: 0;
}

.profile-card-title-wrap h4 {
    margin: 0 0 2px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-main);
}

.profile-card-title-wrap p {
    margin: 0;
    font-size: 12px;
    color: var(--dash-text-muted);
}

.profile-card-body {
    padding: 12px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Editable Rows */
.editable-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 12px;
    border-bottom: 1px solid var(--dash-border-light);
    border-radius: 8px;
    transition: all 0.15s ease;
    gap: 14px;
}

.editable-field-row:last-child {
    border-bottom: none;
}

.editable-field-row:hover {
    background: var(--dash-bg-subtle);
}

.editable-field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-muted);
    min-width: 150px;
}

.editable-field-label i {
    font-size: 13px;
    color: var(--dash-primary);
    width: 16px;
    text-align: center;
}

.editable-field-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dash-text-main);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px dashed transparent;
    transition: all 0.18s ease;
    text-align: right;
}

.editable-field-value:hover {
    background: var(--dash-primary-light);
    color: var(--dash-primary-dark);
    border-color: #bfdbfe;
}

.editable-field-value i.edit-hint-icon {
    font-size: 11px;
    color: var(--dash-text-light);
    opacity: 0.6;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.editable-field-value:hover i.edit-hint-icon {
    opacity: 1;
    color: var(--dash-primary);
}

/* Disciplines Section Card */
.profile-disciplines-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
    margin-bottom: 24px;
    transition: all 0.2s ease;
}

.profile-disciplines-card:hover {
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.profile-disciplines-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
}

.profile-discipline-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    color: var(--dash-text-main);
    font-size: 13px;
    font-weight: 600;
    transition: all 0.18s ease;
}

.profile-discipline-item:hover {
    background: var(--dash-primary-light);
    border-color: #bfdbfe;
    color: var(--dash-primary-dark);
    transform: translateY(-1px);
}

.profile-discipline-item i {
    color: var(--dash-primary);
    font-size: 13px;
}

.profile-disciplines-empty {
    padding: 24px 20px;
    text-align: center;
    color: var(--dash-text-muted);
    font-size: 13.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* ============================================================================
   ADMIN STUDENTS VIEW (Views/Admin/Students.cshtml, _AddStudentPartial.cshtml, _TransferStudents.cshtml)
   ============================================================================ */

.student-cell-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
}

.gender-badge-male {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    background: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.gender-badge-female {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    background: #fce7f3;
    color: #db2777;
    border: 1px solid #fbcfe8;
}

.group-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 600;
    background: var(--dash-amber-light);
    color: #92400e;
    border: 1px solid var(--dash-amber-border);
}

.doc-toggle-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border-light);
    border-radius: var(--dash-radius-sm);
    transition: all 0.2s ease;
}

.doc-toggle-card:hover {
    background: #ffffff;
    border-color: var(--dash-border);
}

.doc-toggle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ============================================================================
   ADMIN STUDY GROUPS VIEW (Views/Admin/StudyGroup.cshtml, _AddStudyGroupPartial.cshtml)
   ============================================================================ */

.group-cell-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--dash-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.group-cell-link:hover {
    color: var(--dash-primary-dark);
    text-decoration: underline;
}

.group-cell-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--dash-amber-light);
    color: #d97706;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.students-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 700;
    background: var(--dash-primary-light);
    color: var(--dash-primary-dark);
    border: 1px solid #bfdbfe;
}

.year-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    background: #f1f5f9;
    color: var(--dash-text-main);
    border: 1px solid var(--dash-border);
}

/* ============================================================================
   ADMIN RECTOR SETTINGS VIEW (Views/Admin/RectorSettings.cshtml, _RectorUser.cshtml)
   ============================================================================ */

.rector-card-wrapper {
    max-width: 820px;
    margin: 0 auto;
}

.rector-data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dash-border-light);
    gap: 16px;
    flex-wrap: wrap;
    transition: background 0.15s ease;
}

.rector-data-row:last-child {
    border-bottom: none;
}

.rector-data-row:hover {
    background: var(--dash-bg-subtle);
}

.rector-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dash-text-muted);
}

.rector-label i {
    font-size: 15px;
    color: var(--dash-indigo);
    width: 20px;
    text-align: center;
}

.rector-val {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-text-main);
}

/* ============================================================================
   ADMIN DICTIONARIES DASHBOARD (Views/Dictionary/Index.cshtml, _DictionaryTablePartial.cshtml)
   ============================================================================ */

.dict-hub-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.dict-group-block {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 16px 20px;
    box-shadow: var(--dash-shadow-sm);
}

.dict-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--dash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 14px;
}

.dict-group-header i {
    font-size: 14px;
    color: var(--dash-primary);
}

.dict-pills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.dict-tab-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--dash-bg-subtle);
    border: 1.5px solid var(--dash-border-light);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    width: 100%;
}

.dict-tab-pill:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-sm);
}

.dict-tab-pill.active {
    background: #ffffff;
    border-color: var(--dash-primary);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.15);
    position: relative;
}

.dict-tab-pill.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20px;
    right: 20px;
    height: 3px;
    background: var(--dash-primary);
    border-radius: 3px 3px 0 0;
}

.dict-tab-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.dict-tab-pill.active .dict-tab-icon-wrap {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-primary-dark));
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
}

.dict-tab-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    min-width: 0;
    gap: 8px;
}

.dict-tab-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dict-tab-pill.active .dict-tab-title {
    color: var(--dash-primary-dark);
    font-weight: 700;
}

.dict-tab-count {
    font-size: 11.5px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.05);
    color: var(--dash-text-muted);
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill);
    flex-shrink: 0;
}

.dict-tab-pill.active .dict-tab-count {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
}

/* Dictionary Table Card & Header */
.dict-table-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
}

.dict-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--dash-border-light);
    flex-wrap: wrap;
    gap: 16px;
}

.dict-table-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dict-meta-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
    flex-shrink: 0;
}

.dict-meta-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dict-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dict-title-row h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--dash-text-main);
}

.dict-target-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--dash-radius-pill);
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border: 1px solid rgba(79, 70, 229, 0.15);
}

.dict-meta-desc {
    margin: 0;
    font-size: 12.5px;
    color: var(--dash-text-muted);
}

.dict-table-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Dictionary Search */
.dict-search-wrapper {
    position: relative;
    width: 260px;
}

.dict-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--dash-text-light);
    pointer-events: none;
}

.dict-search-input {
    width: 100%;
    padding: 8px 32px 8px 34px;
    font-size: 13px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    transition: all 0.2s ease;
    outline: none;
}

.dict-search-input:focus {
    background: #ffffff;
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.dict-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--dash-text-light);
    cursor: pointer;
    font-size: 12px;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dict-search-clear:hover {
    color: var(--dash-danger);
}

/* Data Table Styling */
.dict-table-responsive {
    width: 100%;
    overflow-x: auto;
}

.dict-data-table {
    width: 100%;
    border-collapse: collapse;
}

.dict-data-table thead tr {
    background: var(--dash-bg-subtle);
    border-bottom: 1px solid var(--dash-border);
}

.dict-data-table thead th {
    padding: 12px 18px;
    font-size: 12px;
    font-weight: 700;
    color: var(--dash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dict-data-table tbody tr {
    border-bottom: 1px solid var(--dash-border-light);
    transition: background 0.15s ease;
}

.dict-data-table tbody tr:hover {
    background: #f8fafc;
}

.dict-data-table tbody tr:last-child {
    border-bottom: none;
}

.dict-data-table tbody td {
    padding: 14px 18px;
    font-size: 13.5px;
    vertical-align: middle;
}

.dict-cell-index {
    color: var(--dash-text-light);
    font-weight: 600;
    font-size: 12px;
}

.dict-name-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dict-name-text {
    font-weight: 600;
    color: var(--dash-text-main);
}

.dict-shortname-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.dict-code-badge {
    display: inline-block;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 700;
    font-family: monospace, inherit;
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border-radius: 6px;
    border: 1px solid rgba(79, 70, 229, 0.2);
    letter-spacing: 0.5px;
}

.dict-cathedra-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--dash-text-main);
    font-weight: 500;
}

.dict-cathedra-badge i {
    color: var(--dash-primary);
    font-size: 13px;
}

.dict-usage-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--dash-radius-pill);
}

.dict-usage-active {
    background: var(--dash-sky-light);
    color: var(--dash-sky);
    border: 1px solid rgba(2, 132, 199, 0.2);
}

.dict-usage-zero {
    background: var(--dash-bg-subtle);
    color: var(--dash-text-light);
    border: 1px solid var(--dash-border-light);
}

.dict-actions-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.table-action-btn-danger:hover {
    background: var(--dash-danger-light) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

/* Empty State */
.dict-empty-cell {
    padding: 40px 20px !important;
    text-align: center;
}

.dict-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dict-empty-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 14px;
}

.dict-empty-state h5 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
}

.dict-empty-state p {
    margin: 0;
    font-size: 13px;
    color: var(--dash-text-muted);
    max-width: 440px;
}

/* Modal Styling */
.dict-modal-content {
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-lg);
    overflow: hidden;
}

.dict-modal-header {
    background: #ffffff;
    border-bottom: 1px solid var(--dash-border-light);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dict-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dict-modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.dict-modal-content .modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0;
}

.dict-modal-subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--dash-text-muted);
}

.dict-modal-close {
    font-size: 22px;
    color: var(--dash-text-light);
    opacity: 0.8;
    transition: opacity 0.2s;
}

.dict-modal-close:hover {
    opacity: 1;
    color: var(--dash-danger);
}

.dict-modal-body {
    padding: 24px;
    background: #ffffff;
}

.dict-form-group {
    margin-bottom: 18px;
}

.dict-form-group:last-child {
    margin-bottom: 0;
}

.dict-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-main);
    margin-bottom: 6px;
    display: block;
}

.dict-input-wrap {
    position: relative;
}

.dict-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dash-text-light);
    font-size: 13px;
    pointer-events: none;
}

.dict-form-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    font-size: 13.5px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    color: var(--dash-text-main);
    transition: all 0.2s ease;
    height: auto;
}

.dict-form-input:focus {
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    outline: none;
}

.dict-modal-footer {
    padding: 16px 24px;
    background: var(--dash-bg-subtle);
    border-top: 1px solid var(--dash-border-light);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-dict-cancel {
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-muted);
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-dict-cancel:hover {
    background: #f1f5f9;
    color: var(--dash-text-main);
}

.btn-dict-save {
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-primary-dark));
    border: none;
    border-radius: var(--dash-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
}

.btn-dict-save:hover {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

.btn-dict-save:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* ============================================================================
   GRADEBOOK & ASSESSMENT JOURNAL MODULE (Views/Grade/...)
   ============================================================================ */
.gradebook-page-container {
    font-family: inherit;
    color: var(--dash-text-main);
    padding: 4px 0 35px;
}

.grade-avatar-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.grade-action-btn {
    border-radius: var(--dash-radius-pill) !important;
    padding: 5px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.grade-action-btn:hover {
    transform: translateY(-1px);
}

/* Gradebook KPI Metrics Grid */
.grade-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.grade-kpi-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 18px 20px;
    box-shadow: var(--dash-shadow-sm);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
}

.grade-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.bg-emerald-gradient {
    background: linear-gradient(135deg, #10b981, #059669);
}

.bg-blue-gradient {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.bg-indigo-gradient {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.bg-amber-gradient {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Grade Matrix Card */
.grade-matrix-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
    margin-bottom: 24px;
}

.grade-matrix-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--dash-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    background: #ffffff;
}

.grade-matrix-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    gap: 10px;
}

.grade-matrix-title i {
    color: var(--dash-primary);
    font-size: 17px;
}

.grade-search-box {
    position: relative;
    width: 260px;
}

.grade-search-input {
    height: 36px;
    padding: 6px 14px 6px 36px;
    font-size: 12.5px;
    border-radius: var(--dash-radius-pill);
    border: 1px solid var(--dash-border);
    background: var(--dash-bg-subtle);
    transition: all 0.2s ease;
}

.grade-search-input:focus {
    background: #ffffff;
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.grade-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dash-text-light);
    font-size: 13px;
    pointer-events: none;
}

/* Grade Matrix Table */
.grade-table-responsive-wrapper {
    overflow-x: auto;
    max-height: calc(100vh - 300px);
}

.grade-matrix-table {
    margin-bottom: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.grade-matrix-table thead th {
    background: #f8fafc;
    border-bottom: 2px solid var(--dash-border);
    padding: 12px 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dash-text-main);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.col-sticky-student {
    position: sticky;
    left: 0;
    background: #ffffff !important;
    z-index: 5;
    border-right: 1px solid var(--dash-border-light);
}

.col-sticky-student-name {
    position: sticky;
    left: 45px;
    background: #ffffff !important;
    z-index: 5;
    min-width: 220px;
    max-width: 250px;
    border-right: 2px solid var(--dash-border);
}

.grade-matrix-table thead th.col-sticky-student,
.grade-matrix-table thead th.col-sticky-student-name {
    background: #f8fafc !important;
    z-index: 15;
}

.student-profile-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-avatar-letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.student-fullname {
    font-weight: 600;
    font-size: 13px;
    color: var(--dash-text-main);
    line-height: 1.3;
}

.student-email {
    font-size: 11px;
    color: var(--dash-text-muted);
}

/* Assessment Column Header */
.col-assessment {
    min-width: 115px;
    max-width: 140px;
    border-right: 1px solid var(--dash-border-light);
}

.col-header-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.col-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill);
    font-size: 10.5px;
    font-weight: 700;
}

.col-badge-lesson {
    background: #e0f2fe;
    color: #0369a1;
}

.col-badge-module {
    background: #fef3c7;
    color: #b45309;
}

.col-badge-test {
    background: #ecfdf5;
    color: #047857;
}

.col-badge-creativity {
    background: #ede9fe;
    color: #6d28d9;
}

.col-badge-exam {
    background: #fee2e2;
    color: #b91c1c;
}

.col-badge-custom {
    background: #f1f5f9;
    color: #475569;
}

.col-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--dash-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.col-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--dash-text-muted);
}

.col-actions {
    margin-top: 2px;
}

.btn-col-action {
    background: none;
    border: none;
    padding: 1px 4px;
    font-size: 12px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.btn-col-action:hover {
    opacity: 1;
}

/* Grade Cells & Pills */
.grade-cell-td {
    padding: 8px 6px !important;
    vertical-align: middle !important;
    border-right: 1px solid var(--dash-border-light);
}

.grade-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 44px;
    height: 32px;
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    user-select: none;
}

.grade-pill:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.grade-excellent {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}

.grade-good {
    background: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
}

.grade-satisfactory {
    background: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
}

.grade-fail {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.grade-empty {
    background: #f8fafc;
    color: #94a3b8;
    border: 1px dashed #cbd5e1;
    font-weight: 500;
}

.grade-empty:hover {
    background: #f1f5f9;
    color: var(--dash-primary);
    border-color: var(--dash-primary);
}

.grade-comment-icon {
    font-size: 11px;
    color: var(--dash-primary);
}

/* ECTS and National Badges */
.ects-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    width: auto;
    padding: 3px 10px;
    height: 28px;
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.badge-grade-a { background: #d1fae5; color: #065f46; }
.badge-grade-b { background: #dbeafe; color: #1e40af; }
.badge-grade-c { background: #e0e7ff; color: #3730a3; }
.badge-grade-d { background: #fef3c7; color: #92400e; }
.badge-grade-e { background: #ffedd5; color: #9a3412; }
.badge-grade-fx { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.badge-grade-f { background: #fee2e2; color: #991b1b; }
.badge-grade-pending { background: #f1f5f9; color: var(--dash-text-muted); border: 1px solid var(--dash-border); }

.national-grade-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-text-main);
}

.national-grade-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--dash-radius-pill);
    background: #f1f5f9;
    color: var(--dash-text-main);
    font-size: 12px;
    font-weight: 600;
}

.total-score-badge {
    font-size: 13.5px;
    color: var(--dash-primary-dark);
}

.grade-table-footer-row td {
    background: #f8fafc !important;
    border-top: 2px solid var(--dash-border);
    padding: 12px 8px;
    font-size: 12.5px;
}

.footer-avg-pill {
    display: inline-block;
    padding: 2px 8px;
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    font-size: 11.5px;
}

/* Grade Modal Customization */
.grade-modal-content {
    border-radius: var(--dash-radius);
    border: 1px solid var(--dash-border);
    box-shadow: var(--dash-shadow-lg);
    overflow: hidden;
}

.grade-modal-header {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #ffffff;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.grade-modal-header .modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

.grade-modal-body {
    padding: 22px;
    background: #ffffff;
}

.grade-modal-footer {
    padding: 14px 22px;
    background: var(--dash-bg-subtle);
    border-top: 1px solid var(--dash-border-light);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.grade-edit-header-box {
    background: var(--dash-primary-light);
    border: 1px solid #bfdbfe;
    border-radius: var(--dash-radius-sm);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #1e3a8a;
    font-weight: 600;
    flex-wrap: wrap;
    gap: 8px;
}

/* Student Personal Gradebook Styles */
.student-discipline-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
    transition: all 0.2s ease;
}

.student-discipline-card:hover {
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.student-discipline-header {
    padding: 16px 20px;
    background: #f8fafc;
    border-bottom: 1px solid var(--dash-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.discipline-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.discipline-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0 0 2px 0;
}

.discipline-teacher {
    font-size: 12.5px;
    color: var(--dash-text-muted);
}

.discipline-score-block {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background: #ffffff;
    padding: 4px 12px;
    border-radius: var(--dash-radius-pill);
    border: 1px solid var(--dash-border);
    font-size: 13px;
}

.discipline-score-block.score-block-pending {
    background: #f8fafc;
    color: var(--dash-text-muted);
}

.discipline-empty-notice {
    padding: 20px 24px;
    background: #f8fafc;
    color: var(--dash-text-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-top: 1px solid var(--dash-border-light);
}

.student-grade-table {
    font-size: 13px;
}

.student-grade-table thead th {
    background: #ffffff;
    border-bottom: 1px solid var(--dash-border);
    font-weight: 600;
    color: var(--dash-text-muted);
    font-size: 12px;
    padding: 10px 14px;
}

.student-grade-table tbody td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--dash-border-light);
}

.teacher-comment-pill {
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: var(--dash-radius-sm);
    color: var(--dash-text-main);
    display: inline-block;
}

/* ----------------------------------------------------------------------------
   GROUP TIMETABLE / SCHEDULE TABLE (Views/Shared/_GroupScheduleTable.cshtml)
   ---------------------------------------------------------------------------- */
.group-schedule-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
    margin: 16px 0;
}

.group-schedule-toolbar {
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--dash-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.gst-toolbar-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.gst-toolbar-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    border: 1px solid #bfdbfe;
}

.gst-toolbar-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0;
}

.gst-toolbar-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.gst-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 600;
    background: var(--dash-primary-light);
    color: var(--dash-primary-dark);
    border: 1px solid #bfdbfe;
}

.gst-pill-badge.badge-neutral {
    background: #f1f5f9;
    color: var(--dash-text-muted);
    border-color: #cbd5e1;
}

.gst-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gst-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    border: none;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    text-decoration: none;
}

.gst-btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
    color: #ffffff;
}

.gst-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    color: var(--dash-text-main);
    border: 1px solid var(--dash-border);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.gst-btn-secondary:hover {
    background: var(--dash-bg-subtle);
    border-color: #cbd5e1;
    color: var(--dash-primary);
    transform: translateY(-1px);
}

.gst-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: #ffffff;
    color: var(--dash-text-muted);
    border: 1px solid var(--dash-border);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gst-btn-icon:hover {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    border-color: #bfdbfe;
    transform: translateY(-1px);
}

/* Table styling */
.group-schedule-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
    background: #ffffff;
}

.group-schedule-table thead th {
    background: #f8fafc;
    color: var(--dash-text-muted);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-bottom: 2px solid var(--dash-border) !important;
    vertical-align: middle;
}

.group-schedule-table tbody td {
    padding: 10px 16px;
    vertical-align: middle;
    font-size: 13.5px;
    border-top: 1px solid var(--dash-border-light);
    border-bottom: 1px solid var(--dash-border-light);
    transition: background-color 0.15s ease;
}

.group-schedule-table tbody tr:hover td {
    background-color: #f8fafc;
}

.group-schedule-table tr.gst-day-divider td {
    border-bottom: 2px solid var(--dash-border) !important;
}

/* Day cell */
.gst-day-cell {
    background: #f8fafc;
    border-right: 2px solid var(--dash-border) !important;
    text-align: center;
    vertical-align: middle !important;
    padding: 16px 12px !important;
}

.group-schedule-table tbody tr:hover .gst-day-cell {
    background: #f1f5f9;
}

.gst-day-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.gst-day-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-main);
    letter-spacing: -0.2px;
}

.gst-day-count-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--dash-radius-pill);
    font-size: 11px;
    font-weight: 600;
    background: #e2e8f0;
    color: #475569;
}

.gst-day-count-tag.has-lessons {
    background: var(--dash-primary-light);
    color: var(--dash-primary-dark);
    border: 1px solid #bfdbfe;
}

/* Time slot */
.gst-time-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.gst-slot-number {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    background: #f1f5f9;
    color: var(--dash-text-main);
    border: 1px solid #e2e8f0;
}

.gst-slot-hours {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dash-text-muted);
    letter-spacing: -0.2px;
}

/* Lesson card */
.gst-lesson-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 4px 10px;
    border-left: 3px solid var(--dash-primary);
}

.gst-lesson-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-text-main);
    line-height: 1.35;
}

.gst-lesson-desc {
    font-size: 12px;
    color: var(--dash-text-muted);
    line-height: 1.3;
}

/* Teacher */
.gst-teacher-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-main);
}

.gst-teacher-icon {
    color: var(--dash-primary);
    font-size: 15px;
}

/* Room badge */
.gst-room-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 600;
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid #bae6fd;
}

/* Empty slot */
.gst-empty-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--dash-text-light);
    font-size: 13px;
    font-style: italic;
}

.gst-empty-dash {
    color: var(--dash-text-light);
    font-size: 13px;
}

/* Action buttons */
.gst-btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    background: #fff;
    color: #ef4444;
    border: 1px solid #fecaca;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gst-btn-delete:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.25);
}

.gst-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    background: #f8fafc;
    color: #10b981;
    border: 1px dashed #a7f3d0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gst-btn-add:hover {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
    border-style: solid;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(16, 185, 129, 0.25);
}

/* Empty State */
.group-schedule-empty-state {
    padding: 50px 24px;
    text-align: center;
    background: #ffffff;
}

.gst-empty-icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #94a3b8;
    margin-bottom: 16px;
}

.gst-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin-bottom: 8px;
}

.gst-empty-text {
    font-size: 14px;
    color: var(--dash-text-muted);
    max-width: 480px;
    margin: 0 auto 24px;
    line-height: 1.5;
}

.gst-empty-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ============================================================================
   12. CHANGE USER PASSWORD MODAL (_ChangeCustomerPass.cshtml)
   ============================================================================ */
.change-password-modal-container {
    padding: 4px;
    color: var(--dash-text-main);
    font-family: inherit;
    min-width: 320px;
    max-width: 440px;
}

.change-pass-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--dash-border-light);
}

.change-pass-icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-indigo));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    flex-shrink: 0;
}

.change-pass-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.change-pass-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0;
    line-height: 1.2;
}

.change-pass-subtitle {
    font-size: 12px;
    color: var(--dash-text-muted);
    margin: 0;
}

.change-pass-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 3px 8px;
    border-radius: var(--dash-radius-pill);
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    font-size: 11.5px;
    font-weight: 600;
    width: fit-content;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.change-pass-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.change-pass-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.change-pass-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dash-text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.change-pass-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.change-pass-input-icon {
    position: absolute;
    left: 12px;
    color: var(--dash-text-light);
    font-size: 13.5px;
    pointer-events: none;
    transition: color 0.2s ease;
    z-index: 2;
}

.change-pass-input {
    width: 100%;
    height: 40px;
    padding: 8px 38px 8px 36px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    font-size: 13.5px;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.change-pass-input:focus {
    background: #ffffff;
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.change-pass-input:focus ~ .change-pass-input-icon {
    color: var(--dash-primary);
}

.change-pass-eye-btn {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--dash-text-light);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    transition: color 0.2s ease;
    z-index: 2;
}

.change-pass-eye-btn:hover {
    color: var(--dash-primary);
}

.change-pass-hint-box {
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border-light);
    border-radius: var(--dash-radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.change-pass-hint-item {
    font-size: 12px;
    color: var(--dash-text-muted);
    display: flex;
    align-items: center;
    gap: 7px;
    transition: color 0.2s ease;
}

.change-pass-hint-item i {
    font-size: 11px;
    color: var(--dash-text-light);
    transition: all 0.2s ease;
}

.change-pass-hint-item.valid {
    color: var(--dash-success);
    font-weight: 500;
}

.change-pass-hint-item.valid i {
    color: var(--dash-success);
}

.change-pass-hint-item.invalid {
    color: #ef4444;
}

.change-pass-hint-item.invalid i {
    color: #ef4444;
}

.change-pass-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--dash-border-light);
}

.btn-pass-cancel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-muted);
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.btn-pass-cancel:hover {
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    border-color: #cbd5e1;
}

.btn-pass-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-primary-dark));
    border: 1px solid transparent;
    border-radius: var(--dash-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    text-decoration: none !important;
}

.btn-pass-submit:hover:not(:disabled) {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

.btn-pass-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* ============================================================================
   13. FIRST LOGIN ONBOARDING VIEW (Views/Account/FirstLogin.cshtml)
   ============================================================================ */
.first-login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    position: relative;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.first-login-wrapper .bg-orb-1 {
    position: absolute;
    width: 480px;
    height: 480px;
    top: -100px;
    right: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.22) 0%, rgba(37, 99, 235, 0) 70%);
    pointer-events: none;
}

.first-login-wrapper .bg-orb-2 {
    position: absolute;
    width: 420px;
    height: 420px;
    bottom: -80px;
    left: -80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.20) 0%, rgba(79, 70, 229, 0) 70%);
    pointer-events: none;
}

.first-login-card {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: var(--dash-radius);
    padding: 32px 28px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
    animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.first-login-branding {
    text-align: center;
    margin-bottom: 22px;
}

.first-login-emblem {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-indigo));
    color: #ffffff;
    font-size: 24px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.3);
}

.first-login-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--dash-text-main);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.first-login-subtitle {
    font-size: 13px;
    color: var(--dash-text-muted);
    margin: 0 0 12px;
    line-height: 1.4;
}

.first-login-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: var(--dash-radius-pill);
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(37, 99, 235, 0.15);
}

.first-login-security-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--dash-amber-light);
    border: 1px solid var(--dash-amber-border);
    border-radius: var(--dash-radius-sm);
    padding: 10px 14px;
    margin-bottom: 20px;
    font-size: 12.5px;
    color: #92400e;
    line-height: 1.4;
}

.first-login-security-notice i {
    font-size: 15px;
    margin-top: 2px;
    flex-shrink: 0;
}

.first-login-footer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.first-login-btn-submit {
    width: 100%;
    padding: 11px 20px;
    border: none;
    border-radius: var(--dash-radius-sm);
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-primary-dark));
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transition: all 0.2s ease;
}

.first-login-btn-submit:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
    transform: translateY(-1px);
}

.first-login-btn-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.first-login-btn-logout {
    width: 100%;
    padding: 9px 16px;
    background: transparent;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    color: var(--dash-text-muted);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.first-login-btn-logout:hover {
    background: var(--dash-bg-subtle);
    color: #ef4444;
    border-color: #fca5a5;
}

.first-login-phone-group {
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 12px 14px;
    transition: all 0.2s ease;
}

.first-login-phone-group:focus-within {
    border-color: var(--dash-primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.first-login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.first-login-field-helper {
    font-size: 11.5px;
    color: var(--dash-text-muted);
    line-height: 1.4;
    margin-bottom: 6px;
}

.first-login-phone-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.first-login-phone-badge.phone-badge-found {
    background: var(--dash-sky-light);
    color: var(--dash-sky);
    border: 1px solid #bae6fd;
}

.first-login-phone-badge.phone-badge-missing {
    background: var(--dash-amber-light);
    color: #b45309;
    border: 1px solid var(--dash-amber-border);
}

.first-login-input-status-icon {
    position: absolute;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-size: 13.5px;
    z-index: 2;
}

.required-star {
    color: #ef4444;
    margin-left: 2px;
    font-weight: 700;
}


/* ============================================================================
   14. TIMETABLE MULTI-PLATFORM CONFERENCES (LiveKit, Meet, Zoom, Teams, etc.)
   ============================================================================ */

/* Platform Badges */
.badge-platform {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2.5px 9px;
    border-radius: var(--dash-radius-pill);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.badge-platform i {
    font-size: 11px;
}

.badge-platform-livekit {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border: 1px solid #c7d2fe;
}

.badge-platform-meet {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.badge-platform-zoom {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    border: 1px solid #bfdbfe;
}

.badge-platform-teams {
    background: #faf5ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}

.badge-platform-custom {
    background: #f0fdfa;
    color: #0d9488;
    border: 1px solid #99f6e4;
}

.badge-platform-offline {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

/* Conference Passcode Pill */
.conf-pass-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--dash-radius-pill);
    font-size: 10.5px;
    font-weight: 600;
    color: #b45309;
    cursor: pointer;
    transition: all 0.18s ease;
}

.conf-pass-pill:hover {
    background: #fef3c7;
    border-color: #fcd34d;
}

/* Edit Timetable Modal Dialog */
.edit-timetable-modal {
    padding: 4px;
    font-family: inherit;
    color: var(--dash-text-main);
}

.edit-timetable-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--dash-text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.platform-selector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

@media (max-width: 500px) {
    .platform-selector-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.platform-card-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    background: #ffffff;
    border: 1.5px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    outline: none;
}

.platform-card-btn:hover {
    background: var(--dash-bg-subtle);
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.platform-card-btn.active {
    background: var(--dash-primary-light);
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.platform-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #ffffff;
    transition: transform 0.2s ease;
}

.platform-card-btn:hover .platform-card-icon {
    transform: scale(1.08);
}

.icon-bg-offline { background: linear-gradient(135deg, #64748b, #475569); }
.icon-bg-livekit { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.icon-bg-meet { background: linear-gradient(135deg, #10b981, #059669); }
.icon-bg-zoom { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.icon-bg-teams { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.icon-bg-custom { background: linear-gradient(135deg, #14b8a6, #0d9488); }

.platform-card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--dash-text-main);
}

.platform-card-btn.active .platform-card-title {
    color: var(--dash-primary);
}

.conf-input-container {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.conf-input-container:focus-within {
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.conf-field-row {
    margin-bottom: 12px;
}

.conf-field-row:last-child {
    margin-bottom: 0;
}

.conf-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dash-text-main);
    margin-bottom: 6px;
}

.conf-input-group {
    display: flex;
    position: relative;
}

.conf-text-input {
    flex: 1;
    height: 38px;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    transition: all 0.2s ease;
    outline: none;
}

.conf-text-input:focus {
    background: #ffffff;
    border-color: var(--dash-primary);
}

.conf-input-group-has-btn .conf-text-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.conf-group-btn {
    height: 38px;
    padding: 0 14px;
    background: #f1f5f9;
    border: 1px solid var(--dash-border);
    border-left: none;
    border-top-right-radius: var(--dash-radius-sm);
    border-bottom-right-radius: var(--dash-radius-sm);
    color: var(--dash-text-main);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.conf-group-btn:hover {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
}

.conf-platform-hint {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.conf-hint-info {
    background: var(--dash-primary-light);
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.conf-hint-warning {
    background: var(--dash-amber-light);
    color: #92400e;
    border: 1px solid var(--dash-amber-border);
}

/* ==========================================================================
   STUDENT CLASSES GROUPED ACCORDION VIEW (_StudentClasses.cshtml)
   ========================================================================== */

.discipline-groups-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
}

.discipline-accordion-item {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.discipline-accordion-item:hover {
    border-color: #cbd5e1;
    box-shadow: var(--dash-shadow-md);
}

.discipline-accordion-item.is-open {
    border-color: #cbd5e1;
    box-shadow: var(--dash-shadow-md);
}

.discipline-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #ffffff;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, border-color 0.2s ease;
    gap: 16px;
}

.discipline-group-header:hover {
    background: var(--dash-bg-subtle);
}

.discipline-accordion-item.is-open .discipline-group-header {
    background: #ffffff;
    border-bottom: 1px solid var(--dash-border-light);
}

.discipline-header-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.discipline-group-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.discipline-accordion-item:hover .discipline-group-icon {
    transform: scale(1.05);
}

.discipline-group-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.discipline-group-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.discipline-group-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--dash-text-muted);
    margin-top: 4px;
    flex-wrap: wrap;
}

.discipline-header-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.discipline-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--dash-radius-pill);
    white-space: nowrap;
}

.pill-courses-badge {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border: 1px solid rgba(79, 70, 229, 0.18);
}

.pill-lessons-badge {
    background: var(--dash-sky-light);
    color: var(--dash-sky);
    border: 1px solid rgba(2, 132, 199, 0.18);
}

.pill-files-badge {
    background: #f1f5f9;
    color: var(--dash-text-muted);
    border: 1px solid var(--dash-border);
}

.discipline-toggle-arrow {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--dash-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dash-text-muted);
    transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.discipline-group-header:hover .discipline-toggle-arrow {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
}

.discipline-accordion-item.is-open .discipline-toggle-arrow {
    transform: rotate(180deg);
    background: var(--dash-primary-light);
    color: var(--dash-primary);
}

.discipline-group-body {
    background: #ffffff;
    display: none;
}

.discipline-accordion-item.is-open .discipline-group-body {
    display: block;
}

.header-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.group-control-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border);
    background: #ffffff;
    color: var(--dash-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.group-control-btn:hover {
    background: var(--dash-bg-subtle);
    color: var(--dash-primary);
    border-color: #cbd5e1;
}

.group-control-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--dash-primary-light);
}

.group-control-btn i {
    font-size: 13px;
}

.discipline-courses-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.discipline-courses-table thead th {
    background: #f8fafc;
    color: var(--dash-text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 11px 18px;
    border-top: none;
    border-bottom: 1px solid var(--dash-border-light);
}

.discipline-courses-table tbody tr {
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--dash-border-light);
}

.discipline-courses-table tbody tr:hover {
    background: #f8fafc;
}

.discipline-courses-table tbody tr:last-child {
    border-bottom: none;
}

.discipline-courses-table tbody td {
    padding: 13px 18px;
    vertical-align: middle;
    font-size: 13.5px;
    color: var(--dash-text-main);
}

/* ============================================================================
   ADMIN TEACHERS & DEAN SELECTION (Views/Admin/Teachers.cshtml, _AddTeacherPartial.cshtml)
   ============================================================================ */

.teacher-dean-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dean-badge {
    font-weight: 700;
    width: fit-content;
    background: var(--dash-amber-light);
    color: var(--dash-amber);
    border: 1px solid var(--dash-amber-border);
    padding: 3px 8px;
    border-radius: var(--dash-radius-pill);
    font-size: 11.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dean-faculty-name {
    font-weight: 600;
    color: var(--dash-text-main);
    font-size: 12.5px;
    line-height: 1.3;
}

.faculty-tag-wrap,
.cathedra-tag-wrap,
.discipline-tag-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.faculty-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--dash-radius-pill);
    background: var(--dash-sky-light);
    border: 1px solid #bae6fd;
    color: #0369a1;
    font-size: 11.5px;
    font-weight: 500;
}

.cathedra-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--dash-radius-pill);
    background: var(--dash-indigo-light);
    border: 1px solid #c7d2fe;
    color: #4338ca;
    font-size: 11.5px;
    font-weight: 500;
}

.discipline-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--dash-radius-pill);
    background: var(--dash-primary-light);
    border: 1px solid #bfdbfe;
    color: var(--dash-primary-dark);
    font-size: 11.5px;
    font-weight: 500;
}

/* Dean Toggle Switch in _AddTeacherPartial */
.dean-toggle-card {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1px solid var(--dash-amber-border);
    border-radius: var(--dash-radius);
    padding: 14px 18px;
    transition: all 0.2s ease;
}

.dean-toggle-card:hover {
    border-color: var(--dash-amber);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.12);
}

.dean-toggle-wrap {
    display: flex;
    align-items: center;
}

.dean-toggle-label {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    margin: 0;
    user-select: none;
    width: 100%;
}

.dean-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.dean-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.dean-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dean-checkbox:checked + .dean-toggle-switch {
    background-color: var(--dash-amber);
}

.dean-checkbox:checked + .dean-toggle-switch::after {
    transform: translateX(20px);
}

.dean-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dean-toggle-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dean-toggle-subtitle {
    font-size: 12px;
    color: #b45309;
}

.text-sky {
    color: var(--dash-sky) !important;
}

.text-amber {
    color: var(--dash-amber) !important;
}

.text-indigo {
    color: var(--dash-indigo) !important;
}

/* ----------------------------------------------------------------------------
   TEST CONSTRUCTOR & MATH / IMAGE EXTENSIONS (Views/Test/EditTest.cshtml)
   ---------------------------------------------------------------------------- */

.question-card {
    background: #ffffff;
    border-radius: var(--dash-radius);
    border: 1px solid var(--dash-border);
    box-shadow: var(--dash-shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.question-card:hover {
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.question-card-header {
    background: var(--dash-bg-subtle);
    border-bottom: 1px solid var(--dash-border-light);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.question-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.question-num-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--dash-indigo), #4338ca);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--dash-radius-pill);
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
}

.question-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.question-card-body {
    padding: 20px;
}

.question-text-box {
    font-size: 15px;
    color: var(--dash-text-main);
    line-height: 1.6;
    margin-bottom: 18px;
    word-break: break-word;
}

.question-text-box img,
.test-taking-card .question-text-box img {
    max-width: 100%;
    max-height: 420px;
    height: auto;
    object-fit: contain;
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border);
    box-shadow: var(--dash-shadow-sm);
    margin: 12px 0;
    display: block;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.question-text-box img:hover,
.test-taking-card .question-text-box img:hover {
    transform: scale(1.01);
    box-shadow: var(--dash-shadow-md);
}

.katex-display {
    margin: 0.8em 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
}

.katex {
    font-size: 1.1em !important;
    text-rendering: auto;
}

/* Answer Option Rows in Constructor */
.answer-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.answer-option-row {
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: all 0.2s ease;
}

.answer-option-row:hover {
    border-color: #cbd5e1;
    background: #ffffff;
}

.answer-option-row.is-correct-answer {
    background: var(--dash-success-light);
    border-color: #a7f3d0;
}

.answer-option-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.answer-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-bottom: 0;
    white-space: nowrap;
    user-select: none;
}

.answer-text-display {
    font-size: 14px;
    color: var(--dash-text-main);
    flex: 1;
    word-break: break-word;
}

.btn-delete-option {
    background: transparent;
    border: none;
    color: var(--dash-text-light);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete-option:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* Comprehensive Question Builder Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInModal 0.2s ease;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.builder-modal-card {
    background: #ffffff;
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    border-radius: var(--dash-radius);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--dash-border);
}

.builder-modal-header {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #ffffff;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.builder-modal-title {
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #ffffff;
}

.builder-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: var(--dash-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.builder-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.builder-modal-body {
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.builder-modal-footer {
    background: var(--dash-bg-subtle);
    border-top: 1px solid var(--dash-border-light);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Builder Controls & Toolbars */
.builder-section-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.builder-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm) var(--dash-radius-sm) 0 0;
    padding: 6px 10px;
    border-bottom: none;
}

.builder-tool-btn {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    color: var(--dash-text-main);
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.builder-tool-btn:hover {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border-color: #c7d2fe;
}

.builder-tool-btn.btn-active {
    background: var(--dash-indigo);
    color: #ffffff;
    border-color: var(--dash-indigo);
}

.builder-textarea {
    width: 100%;
    min-height: 120px;
    max-height: 240px;
    padding: 12px 14px;
    border: 1px solid var(--dash-border);
    border-radius: 0 0 var(--dash-radius-sm) var(--dash-radius-sm);
    font-size: 14px;
    line-height: 1.5;
    color: var(--dash-text-main);
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s ease;
}

.builder-textarea:focus {
    border-color: var(--dash-indigo);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* MathLive Formula Inserter Panel */
.math-editor-panel {
    background: #f8fafc;
    border: 1px solid #c7d2fe;
    border-radius: var(--dash-radius-sm);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: fadeInModal 0.2s ease;
}

.math-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

math-field {
    font-size: 18px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    min-height: 48px;
    outline: none;
}

math-field:focus-within {
    border-color: var(--dash-indigo);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.math-quick-symbols {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.math-sym-btn {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 13px;
    color: var(--dash-text-main);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'KaTeX_Math', 'Inter', sans-serif;
}

.math-sym-btn:hover {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    border-color: #bfdbfe;
}

/* Image Dropzone in Question Builder */
.test-img-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: var(--dash-radius-sm);
    padding: 16px;
    text-align: center;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.test-img-dropzone:hover,
.test-img-dropzone.drag-over {
    border-color: var(--dash-indigo);
    background: var(--dash-indigo-light);
}

.test-img-dropzone-icon {
    font-size: 24px;
    color: var(--dash-indigo);
    margin-bottom: 6px;
}

.test-img-dropzone-text {
    font-size: 13px;
    color: var(--dash-text-muted);
}

.test-attached-image-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 8px 12px;
    margin-top: 8px;
}

.test-attached-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--dash-border);
}

/* Live Preview Box */
.live-preview-box {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 14px 16px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}

.live-preview-title {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--dash-text-light);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-preview-content {
    font-size: 14.5px;
    color: var(--dash-text-main);
    line-height: 1.6;
    min-height: 36px;
}

/* Answer Options Builder Section */
.builder-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.builder-option-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 8px 12px;
    transition: all 0.15s ease;
}

.builder-option-row:focus-within {
    border-color: #cbd5e1;
    background: #ffffff;
}

.builder-option-row.is-selected-correct {
    border-color: #a7f3d0;
    background: #f0fdf4;
}

.builder-radio-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.builder-opt-radio {
    width: 18px;
    height: 18px;
    accent-color: #10b981;
    cursor: pointer;
}

.builder-opt-input {
    flex: 1;
    border: 1px solid transparent;
    background: transparent;
    padding: 6px 8px;
    font-size: 14px;
    color: var(--dash-text-main);
    outline: none;
    border-radius: 4px;
}

.builder-opt-input:focus {
    background: #ffffff;
    border-color: var(--dash-border);
}

.builder-opt-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-add-opt-row {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px dashed var(--dash-indigo);
    color: var(--dash-indigo);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--dash-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-opt-row:hover {
    background: var(--dash-indigo-light);
}

/* Image Zoom Lightbox Overlay */
.img-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    cursor: zoom-out;
}

.img-lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: var(--dash-radius);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    object-fit: contain;
}

/* ==========================================================================
   TEST SCORE & QUESTION POINTS STYLES (Test/EditTest, QuestionBuilder, Student/BeginTest)
   ========================================================================== */
.badge-question-points {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--dash-radius-pill);
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fcd34d;
    font-size: 11.5px;
    font-weight: 700;
}

.badge-total-points {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--dash-radius-pill);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
}

.test-header-scores-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.test-maxscore-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--dash-radius-pill);
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fef3c7;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.test-maxscore-badge:hover {
    background: rgba(251, 191, 36, 0.3);
    transform: translateY(-1px);
}

.btn-header-sync-score {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--dash-radius-pill);
    background: rgba(255, 255, 255, 0.12);
    border: 1px dashed rgba(255, 255, 255, 0.35);
    color: #e0e7ff;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-header-sync-score:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    border-style: solid;
}

.builder-points-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 10px 14px;
    margin-bottom: 16px;
}

.builder-points-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.builder-points-input {
    width: 90px;
    padding: 6px 10px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-text-main);
    text-align: center;
    background: #ffffff;
    outline: none;
    transition: all 0.15s ease;
}

.builder-points-input:focus {
    border-color: var(--dash-indigo);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.builder-points-presets {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.points-preset-pill {
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: var(--dash-radius-pill);
    border: 1px solid var(--dash-border);
    background: #ffffff;
    color: var(--dash-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.points-preset-pill:hover,
.points-preset-pill.active {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border-color: #c7d2fe;
    transform: translateY(-1px);
}

.question-points-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill);
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    margin-left: 6px;
}

/* ==========================================================================
   STUDENT CREATIVITY / WRITTEN ASSIGNMENT VIEW (Views/Student/BeginCreativityTest.cshtml)
   ========================================================================== */

.creativity-taking-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.creativity-hero-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: var(--dash-radius);
    padding: 24px 28px;
    color: #ffffff;
    box-shadow: var(--dash-shadow-lg);
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.hero-tag-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.creativity-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    backdrop-filter: blur(4px);
}

.hero-dot-separator {
    opacity: 0.5;
    margin: 0 6px;
}

.hero-right-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.test-timer-badge.timer-badge-normal {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.test-timer-badge.timer-badge-danger {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    animation: pulseAnimation 2s infinite ease-in-out;
}

.creativity-main-content {
    margin-top: 10px;
}

.creativity-task-body {
    white-space: pre-wrap;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--dash-text-main);
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 20px;
    margin-bottom: 20px;
    font-family: inherit;
    word-break: break-word;
}

.empty-task-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--dash-radius-sm);
    padding: 14px 18px;
    color: #1e40af;
    font-size: 13.5px;
    margin-bottom: 20px;
}

.submission-guidelines-box {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--dash-radius-sm);
    padding: 16px 18px;
    margin-top: 10px;
}

.guidelines-header {
    font-size: 13.5px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.guidelines-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #78350f;
    line-height: 1.6;
}

.submission-action-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    position: sticky;
    top: 20px;
}

.submission-status-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--dash-radius-sm);
    margin-bottom: 18px;
}

.status-indicator-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
}

.status-indicator-dot.pulse {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: statusPulse 1.8s infinite;
}

@keyframes statusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.format-tags-container {
    margin-bottom: 20px;
}

.format-tags-label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dash-text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.format-tags-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.format-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
}

.format-tag.tag-pdf { background: #fef2f2; color: #dc2626; border: 1px solid #fee2e2; }
.format-tag.tag-word { background: #eff6ff; color: #2563eb; border: 1px solid #dbeafe; }
.format-tag.tag-excel { background: #ecfdf5; color: #059669; border: 1px solid #d1fae5; }
.format-tag.tag-ppt { background: #fffbeb; color: #d97706; border: 1px solid #fef3c7; }

.submission-btn-wrap {
    margin-top: 16px;
}

.btn-upload-huge {
    width: 100%;
    padding: 13px 18px;
    font-size: 15px;
    font-weight: 700;
    justify-content: center;
    border-radius: var(--dash-radius-sm);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    letter-spacing: -0.1px;
}

.result-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--dash-text-main);
    margin-bottom: 8px;
}

.result-subtitle {
    font-size: 14px;
    color: var(--dash-text-muted);
    max-width: 480px;
    margin: 0 auto 24px auto;
    line-height: 1.5;
}

.result-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 16px;
    text-align: left;
    margin-bottom: 10px;
}

.result-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dash-text-light);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.summary-val {
    font-size: 13.5px;
    color: var(--dash-text-main);
}

/* ==========================================================================
   STUDENT CREATIVITY UPLOAD MODAL (Views/Test/_StudentCreativityDataUpload.cshtml)
   ========================================================================== */

.creativity-upload-modal-container {
    padding: 10px 4px;
    min-width: 380px;
    max-width: 480px;
}

.upload-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--dash-border);
    margin-bottom: 16px;
}

.upload-modal-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4f46e5, #3730a3);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
    flex-shrink: 0;
}

.upload-modal-title {
    margin: 0 0 2px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-main);
}

.upload-modal-subtitle {
    font-size: 12px;
    color: var(--dash-text-muted);
}

.upload-modal-body .k-upload {
    border-radius: var(--dash-radius-sm);
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    padding: 12px;
    transition: all 0.2s ease;
}

.upload-modal-body .k-upload:hover {
    border-color: var(--dash-indigo);
    background: #ffffff;
}

.upload-modal-body .k-upload-button {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-primary-dark)) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: var(--dash-radius-sm) !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}

.upload-modal-formats-hint {
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 10px 12px;
    margin-top: 14px;
}

.formats-hint-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.formats-hint-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.modal-format-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--dash-text-muted);
}

/* Creativity Grading Modal (Views/Teacher/CheckCreativityTest_Partial.cshtml) */
.creativity-modal-box {
    padding: 6px 4px;
    min-width: 440px;
    max-width: 540px;
}

.modal-grading-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--dash-border);
    margin-bottom: 16px;
}

.modal-grading-avatar {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4f46e5, #3730a3);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
    flex-shrink: 0;
}

.modal-grading-info {
    flex: 1;
    min-width: 0;
}

.modal-student-name {
    margin: 0 0 4px 0;
    font-size: 15.5px;
    font-weight: 800;
    color: var(--dash-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-meta-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.task-title-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f1f5f9;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    padding: 2px 9px;
    font-size: 11.5px;
    color: var(--dash-text-muted);
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grading-score-card {
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.max-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--dash-radius-pill);
    padding: 2px 8px;
    font-size: 11.5px;
    color: #92400e;
}

.grading-score-input {
    height: 42px;
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 6px 12px;
    transition: all 0.15s ease;
}

.grading-score-input:focus {
    border-color: var(--dash-indigo);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.score-quick-presets {
    display: flex;
    align-items: center;
    gap: 4px;
}

.preset-btn {
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    background: #ffffff;
    color: var(--dash-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.preset-btn:hover {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border-color: #c7d2fe;
}

/* ============================================================================
   ADMIN STUDENTS DATATABLES (Views/Admin/Students.cshtml)
   ============================================================================ */

.admin-dt-container {
    padding: 0;
    position: relative;
    background: #ffffff;
    border-radius: var(--dash-radius);
}

.admin-dt-top-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dash-border);
    background: #ffffff;
}

.admin-dt-toolbar-left,
.admin-dt-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-dt-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 18px;
    background: var(--dash-primary-light);
    border: 1px solid #bfdbfe;
    border-radius: var(--dash-radius-sm);
    margin: 14px 20px 0 20px;
    animation: fadeIn 0.2s ease;
}

.admin-dt-bulk-count {
    font-weight: 700;
    color: var(--dash-primary-dark);
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-dt-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table.admin-datatable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 0 !important;
}

.table.admin-datatable thead th {
    background: var(--dash-bg-subtle) !important;
    color: var(--dash-text-main) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--dash-border) !important;
    border-top: none !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.table.admin-datatable tbody td {
    padding: 12px 14px !important;
    font-size: 13px !important;
    color: var(--dash-text-main) !important;
    border-bottom: 1px solid var(--dash-border-light) !important;
    vertical-align: middle !important;
    background: #ffffff;
    transition: background 0.15s ease;
}

.table.admin-datatable tbody tr:hover td {
    background: #f8fafc !important;
}

.table.admin-datatable tbody tr.selected td {
    background: #eff6ff !important;
}

.table.admin-datatable .checkbox-cell {
    text-align: center;
    width: 42px;
}

.table.admin-datatable .dt-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--dash-primary);
}

/* Custom Search Box */
.admin-dt-search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 290px;
}

.admin-dt-search-box i.search-icon {
    position: absolute;
    left: 14px;
    color: var(--dash-text-light);
    font-size: 14px;
    pointer-events: none;
}

.admin-dt-search-input {
    width: 100%;
    height: 38px;
    padding: 6px 36px 6px 38px;
    font-size: 13.5px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    transition: all 0.2s ease;
}

.admin-dt-search-input:focus {
    background: #ffffff;
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.admin-dt-search-clear {
    position: absolute;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--dash-text-light);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.admin-dt-search-clear:hover {
    color: var(--dash-text-main);
}

/* Length selector */
.admin-dt-length-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--dash-text-muted);
}

.admin-dt-length-select {
    height: 36px;
    padding: 4px 10px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    background-color: #ffffff;
    color: var(--dash-text-main);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.admin-dt-length-select:focus {
    border-color: var(--dash-primary);
}

/* Pagination & Info bottom bar */
.admin-dt-bottom-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 20px;
    border-top: 1px solid var(--dash-border);
    background: #ffffff;
}

.admin-dt-info {
    font-size: 13px;
    color: var(--dash-text-muted);
    font-weight: 500;
}

/* DataTables native control overrides */
.dataTables_wrapper .dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--dash-text-main) !important;
    background: #ffffff !important;
    border: 1px solid var(--dash-border) !important;
    border-radius: var(--dash-radius-sm) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    user-select: none !important;
    box-shadow: var(--dash-shadow-sm) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: var(--dash-bg-subtle) !important;
    border-color: #cbd5e1 !important;
    color: var(--dash-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--dash-primary) !important;
    border-color: var(--dash-primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    background: #ffffff !important;
    border-color: var(--dash-border-light) !important;
    color: var(--dash-text-light) !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 12px 24px;
    box-shadow: var(--dash-shadow-lg);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dash-primary);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Actions buttons in grid */
.row-actions-group {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.row-action-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border);
    background: #ffffff;
    color: var(--dash-text-muted);
    font-size: 13px;
    transition: all 0.15s ease;
    cursor: pointer;
    text-decoration: none;
}

.row-action-btn:hover {
    background: var(--dash-bg-subtle);
    color: var(--dash-primary);
    border-color: var(--dash-primary);
}

.row-action-btn.btn-action-danger:hover {
    color: var(--dash-danger);
    border-color: var(--dash-danger);
    background: var(--dash-danger-light);
}

/* ============================================================================
   ADMIN TEACHERS DATATABLES (Views/Admin/Teachers.cshtml)
   ============================================================================ */

.teacher-cell-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.teacher-dean-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dean-badge {
    background: var(--dash-amber-light);
    color: #92400e;
    border: 1px solid var(--dash-amber-border);
    font-weight: 700;
}

.dean-faculty-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dash-text-main);
}

.faculty-tag-wrap,
.cathedra-tag-wrap,
.discipline-tag-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.faculty-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    background: var(--dash-sky-light);
    color: #0369a1;
    border: 1px solid #bae6fd;
    white-space: nowrap;
}

.cathedra-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border: 1px solid #c7d2fe;
    white-space: nowrap;
}

.discipline-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill);
    font-size: 11.5px;
    font-weight: 500;
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    border: 1px solid var(--dash-border);
    white-space: nowrap;
}

/* ==========================================================================
   STUDY GROUP INFO & MODERN ADMIN TABS (Views/Admin/StudyGroupInfo.cshtml)
   ========================================================================== */

.admin-tabs-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    padding: 6px;
    border-radius: var(--dash-radius);
    border: 1px solid var(--dash-border);
    margin-bottom: 20px;
    overflow-x: auto;
}

.admin-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--dash-radius-sm);
    border: none;
    background: transparent;
    color: var(--dash-text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.admin-tab-btn:hover {
    color: var(--dash-text-main);
    background: rgba(255, 255, 255, 0.6);
}

.admin-tab-btn.active {
    background: #ffffff;
    color: var(--dash-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.admin-tab-btn i {
    font-size: 15px;
}

.admin-tab-badge {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: var(--dash-radius-pill);
    background: var(--dash-border);
    color: var(--dash-text-muted);
}

.admin-tab-btn.active .admin-tab-badge {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
}

.admin-tab-pane {
    display: none;
    animation: fadeInTab 0.2s ease-in-out;
}

.admin-tab-pane.active {
    display: block;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.group-info-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 24px;
    box-shadow: var(--dash-shadow-sm);
}

.group-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.group-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    transition: all 0.2s ease;
}

.group-info-item:hover {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: var(--dash-shadow-sm);
}

.group-info-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.group-info-item-content {
    display: flex;
    flex-direction: column;
}

.group-info-item-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--dash-text-muted);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.group-info-item-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-main);
}

/* ============================================================================
   12. WINBOX.JS MODALS & DIALOGS (WebStudy Design System)
   ============================================================================ */

/* Dedicated Glassmorphism Modal Backdrop */
.webstudy-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 10400 !important;
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.webstudy-modal-backdrop.active {
    opacity: 1;
}

.winbox.webstudy-modal-winbox {
    background: #ffffff !important;
    border-radius: var(--dash-radius, 14px) !important;
    box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    border: none !important;
    contain: none !important;
    z-index: 10500 !important;
}

.winbox.webstudy-modal-winbox .wb-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: #ffffff !important;
    height: 46px !important;
    line-height: 46px !important;
    padding: 0 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top-left-radius: var(--dash-radius, 14px) !important;
    border-top-right-radius: var(--dash-radius, 14px) !important;
    position: relative !important;
}

.winbox.webstudy-modal-winbox .wb-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--dash-primary, #2563eb), var(--dash-indigo, #4f46e5));
    border-top-left-radius: var(--dash-radius, 14px);
    border-top-right-radius: var(--dash-radius, 14px);
}

.winbox.webstudy-modal-winbox .wb-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
}

.winbox.webstudy-modal-winbox .wb-control {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 100% !important;
    gap: 4px !important;
}

.winbox.webstudy-modal-winbox .wb-control * {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    opacity: 0.8 !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 14px auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: auto 0 !important;
}

.winbox.webstudy-modal-winbox .wb-control *:hover {
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.winbox.webstudy-modal-winbox .wb-control .wb-close:hover {
    background-color: #ef4444 !important;
    opacity: 1 !important;
}

.winbox.webstudy-modal-winbox .wb-body {
    top: 46px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    padding: 20px 24px !important;
    background: #ffffff !important;
    color: var(--dash-text-main, #1e293b) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-bottom-left-radius: var(--dash-radius, 14px) !important;
    border-bottom-right-radius: var(--dash-radius, 14px) !important;
    contain: none !important;
}

/* Custom scrollbar for WinBox Body */
.winbox.webstudy-modal-winbox .wb-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.winbox.webstudy-modal-winbox .wb-body::-webkit-scrollbar-track {
    background: #f8fafc;
}

.winbox.webstudy-modal-winbox .wb-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.winbox.webstudy-modal-winbox .wb-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Dialog Styling (Confirmation Modals) */
.webstudy-dialog-winbox .wb-body {
    padding: 22px !important;
}

.webstudy-dialog-wrapper {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.webstudy-dialog-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.webstudy-dialog-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--dash-primary-light, #eff6ff);
    color: var(--dash-primary, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    border: 1px solid #bfdbfe;
}

.webstudy-dialog-text {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--dash-text-main, #1e293b);
    font-weight: 500;
    padding-top: 2px;
}

.webstudy-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--dash-border-light, #f1f5f9);
}

.btn-dialog-cancel {
    padding: 8px 18px;
    border-radius: var(--dash-radius-sm, 8px);
    border: 1px solid var(--dash-border, #e2e8f0);
    background: #ffffff;
    color: var(--dash-text-muted, #64748b);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-dialog-cancel:hover {
    background: #f8fafc;
    color: var(--dash-text-main, #1e293b);
    border-color: #cbd5e1;
}

.btn-dialog-confirm {
    padding: 8px 20px;
    border-radius: var(--dash-radius-sm, 8px);
    border: 1px solid transparent;
    background: var(--dash-primary, #2563eb);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.btn-dialog-confirm:hover {
    background: var(--dash-primary-dark, #1d4ed8);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45);
    transform: translateY(-1px);
}

/* ==========================================================================
   TEACHER GROUP TABS & DASHBOARD TESTS (Views/Teacher/Tests.cshtml & CreativityTests.cshtml)
   ========================================================================== */

.teacher-group-tabs-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    padding: 6px;
    border-radius: var(--dash-radius, 14px);
    border: 1px solid var(--dash-border, #e2e8f0);
    margin-bottom: 20px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.teacher-group-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--dash-radius-sm, 8px);
    border: none;
    background: transparent;
    color: var(--dash-text-muted, #64748b);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.teacher-group-tab-btn:hover {
    color: var(--dash-text-main, #1e293b);
    background: rgba(255, 255, 255, 0.6);
}

.teacher-group-tab-btn.active {
    background: #ffffff;
    color: var(--dash-primary, #2563eb);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.teacher-group-tab-btn i {
    font-size: 15px;
}

.teacher-tab-year-badge {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: var(--dash-radius-pill, 9999px);
    background: var(--dash-border, #e2e8f0);
    color: var(--dash-text-muted, #64748b);
    font-weight: 600;
}

.teacher-group-tab-btn.active .teacher-tab-year-badge {
    background: var(--dash-primary-light, #eff6ff);
    color: var(--dash-primary, #2563eb);
}

.teacher-group-tab-content {
    width: 100%;
}

.teacher-group-pane {
    animation: fadeInTab 0.2s ease-in-out;
}

.tab-skeleton-loader {
    background: var(--dash-bg-card, #ffffff);
    border: 1px solid var(--dash-border, #e2e8f0);
    border-radius: var(--dash-radius, 14px);
    padding: 40px 20px;
    text-align: center;
    color: var(--dash-text-muted, #64748b);
}

.status-error {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.score-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: var(--dash-radius-pill, 9999px);
}

.score-high {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.score-medium {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.score-low {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.time-limit-badge {
    font-size: 11px;
    padding: 2px 6px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 4px;
    font-weight: 600;
    margin-left: 4px;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   EXAM SESSION SCHEDULE MODULE (Views/ExamSchedule/ & Student Widget)
   ========================================================================== */

.hub-gradient-schedule {
    background: linear-gradient(135deg, #6366f1, #4338ca) !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
    color: #ffffff !important;
}

/* Toolbar Card */
.session-schedule-toolbar-card {
    background: var(--dash-bg-card, #ffffff);
    border: 1px solid var(--dash-border, #e2e8f0);
    border-radius: var(--dash-radius, 14px);
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: var(--dash-shadow-sm);
}

.session-toolbar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.toolbar-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.toolbar-form-group label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dash-text-muted, #64748b);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.toolbar-form-group label i {
    color: var(--dash-primary, #2563eb);
}

.session-select-control,
.session-input-control {
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--dash-border, #e2e8f0);
    border-radius: var(--dash-radius-sm, 8px);
    background: var(--dash-bg-subtle, #f8fafc);
    color: var(--dash-text-main, #1e293b);
    font-size: 13.5px;
    font-weight: 500;
    outline: none;
    transition: all 0.2s ease;
    width: 100%;
}

.session-select-control:focus,
.session-input-control:focus {
    border-color: var(--dash-primary, #2563eb);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.session-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.session-search-box .btn-clear-search {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: var(--dash-text-light, #94a3b8);
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}

.session-search-box .btn-clear-search:hover {
    color: var(--dash-text-main, #1e293b);
}

.session-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--dash-border-light, #f1f5f9);
}

.session-view-switcher {
    display: flex;
    align-items: center;
    background: var(--dash-bg-subtle, #f8fafc);
    padding: 4px;
    border-radius: var(--dash-radius-sm, 8px);
    border: 1px solid var(--dash-border, #e2e8f0);
    gap: 4px;
}

.view-switch-btn {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--dash-text-muted, #64748b);
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.view-switch-btn:hover {
    color: var(--dash-text-main, #1e293b);
}

.view-switch-btn.active {
    background: #ffffff;
    color: var(--dash-primary, #2563eb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.session-btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    border: none;
    padding: 8px 18px;
    border-radius: var(--dash-radius-sm, 8px);
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
}

.session-btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
    color: #ffffff;
}

/* Main Content Card */
.session-main-content-card {
    background: var(--dash-bg-card, #ffffff);
    border: 1px solid var(--dash-border, #e2e8f0);
    border-radius: var(--dash-radius, 14px);
    padding: 24px;
    box-shadow: var(--dash-shadow-sm);
    min-height: 400px;
}

/* Matrix Table Wrapper */
.session-matrix-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.session-matrix-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.session-badge-count-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.session-matrix-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--dash-radius-pill, 9999px);
    font-size: 12.5px;
    font-weight: 500;
}

.session-matrix-badge.badge-total {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.session-matrix-badge.badge-exam {
    background: var(--dash-amber-light, #fef3c7);
    color: #92400e;
    border: 1px solid var(--dash-amber-border, #fcd34d);
}

.session-matrix-badge.badge-consultation {
    background: var(--dash-indigo-light, #eef2ff);
    color: var(--dash-indigo, #4f46e5);
    border: 1px solid #c7d2fe;
}

.session-matrix-badge.badge-groups {
    background: var(--dash-sky-light, #e0f2fe);
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.btn-matrix-action {
    background: #f8fafc;
    border: 1px solid var(--dash-border, #e2e8f0);
    color: var(--dash-text-main, #1e293b);
    padding: 6px 14px;
    border-radius: var(--dash-radius-sm, 8px);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-matrix-action:hover {
    background: var(--dash-primary-light, #eff6ff);
    color: var(--dash-primary, #2563eb);
    border-color: #bfdbfe;
}

/* Institutional Matrix Table */
.session-matrix-table-container {
    overflow-x: auto;
    border: 1px solid var(--dash-border, #e2e8f0);
    border-radius: var(--dash-radius, 14px);
    background: #ffffff;
}

.session-matrix-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
    font-size: 13px;
}

.session-matrix-table th,
.session-matrix-table td {
    border: 1px solid #cbd5e1;
    padding: 10px 12px;
    vertical-align: top;
}

.session-matrix-table thead th {
    background: #f8fafc;
    color: var(--dash-text-main, #1e293b);
    font-weight: 700;
    text-align: center;
    padding: 14px 10px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.col-date-header {
    width: 150px;
    min-width: 140px;
    background: #f1f5f9 !important;
}

.header-cell-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}

.header-main-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-text-main, #1e293b);
}

.header-sub-text {
    font-size: 11px;
    font-weight: 500;
    color: var(--dash-text-muted, #64748b);
}

.col-group-header {
    min-width: 180px;
}

.header-group-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--dash-primary, #2563eb);
}

.header-group-dept {
    font-size: 11px;
    font-weight: 500;
    color: var(--dash-text-muted, #64748b);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-matrix-table tbody tr:hover {
    background: rgba(248, 250, 252, 0.6);
}

.session-matrix-table tr.row-sunday {
    background: #fafafa;
}

.cell-date {
    background: #f8fafc;
    text-align: center;
    vertical-align: middle !important;
    font-weight: 600;
    width: 150px;
}

.date-badge-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-num {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dash-text-main, #1e293b);
}

.date-dow {
    font-size: 11.5px;
    color: var(--dash-text-muted, #64748b);
    text-transform: capitalize;
}

.cell-session-data {
    position: relative;
    padding: 8px !important;
    min-height: 100px;
    background: #ffffff;
}

.cell-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 80px;
    justify-content: center;
}

/* Card inside Matrix Cell */
.matrix-item-card {
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.matrix-item-card.item-card-consultation {
    background: #f8faff;
    border: 1px solid #e0e7ff;
    border-left: 4px solid #6366f1;
}

.matrix-item-card.item-card-exam {
    background: #fffdfa;
    border: 1px solid #fef3c7;
    border-left: 4px solid #f59e0b;
}

.matrix-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.item-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.item-type-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.item-type-badge.badge-consultation {
    background: #e0e7ff;
    color: #4338ca;
}

.item-type-badge.badge-exam {
    background: #fef3c7;
    color: #92400e;
}

.item-card-quick-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.matrix-item-card:hover .item-card-quick-actions {
    opacity: 1;
}

.btn-item-action {
    background: transparent;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    color: var(--dash-text-muted, #64748b);
    transition: all 0.15s;
}

.btn-item-action:hover {
    background: #ffffff;
    color: var(--dash-text-main, #1e293b);
}

.btn-item-action.delete:hover {
    background: #fee2e2;
    color: #dc2626;
}

.item-subject-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dash-text-main, #1e293b);
    line-height: 1.35;
}

.item-teacher-name {
    font-size: 12px;
    color: var(--dash-text-muted, #64748b);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.item-teacher-name i {
    color: #94a3b8;
}

.item-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    margin-top: 2px;
}

.item-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
}

.item-meta-pill.time {
    background: #f1f5f9;
    color: #334155;
}

.item-meta-pill.room {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.item-online-link {
    margin-top: 4px;
}

.link-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--dash-primary, #2563eb);
    text-decoration: none;
    padding: 2px 6px;
    background: var(--dash-primary-light, #eff6ff);
    border-radius: 4px;
}

.link-online-badge:hover {
    text-decoration: underline;
}

.btn-cell-add-more {
    width: 100%;
    padding: 3px;
    border: 1px dashed #cbd5e1;
    background: transparent;
    color: var(--dash-text-light, #94a3b8);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-cell-add-more:hover {
    border-color: var(--dash-primary, #2563eb);
    color: var(--dash-primary, #2563eb);
    background: var(--dash-primary-light, #eff6ff);
}

.btn-cell-quick-add {
    width: 100%;
    min-height: 60px;
    border: 1px dashed #e2e8f0;
    background: transparent;
    border-radius: 6px;
    color: #cbd5e1;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.cell-session-data:hover .btn-cell-quick-add {
    border-color: #93c5fd;
    color: var(--dash-primary, #2563eb);
    background: rgba(239, 246, 255, 0.4);
}

.btn-cell-quick-add:hover {
    border-color: var(--dash-primary, #2563eb) !important;
    background: var(--dash-primary-light, #eff6ff) !important;
    color: var(--dash-primary, #2563eb) !important;
}

.session-table-empty-cell {
    padding: 40px !important;
    text-align: center;
    color: var(--dash-text-muted, #64748b);
}

.empty-matrix-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
}

/* Tabular List View */
.session-list-view-container {
    overflow-x: auto;
}

.session-list-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    font-size: 13.5px;
}

.session-list-table thead th {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dash-text-muted, #64748b);
    border-bottom: 2px solid var(--dash-border, #e2e8f0);
}

.session-list-table tbody tr {
    background: #ffffff;
    box-shadow: var(--dash-shadow-sm);
    border-radius: var(--dash-radius-sm, 8px);
    transition: all 0.2s ease;
}

.session-list-table tbody tr:hover {
    transform: translateY(-1px);
    box-shadow: var(--dash-shadow-md);
}

.session-list-table tbody td {
    padding: 12px 14px;
    border-top: 1px solid var(--dash-border-light, #f1f5f9);
    border-bottom: 1px solid var(--dash-border-light, #f1f5f9);
    vertical-align: middle;
}

.session-list-table tbody td:first-child {
    border-left: 1px solid var(--dash-border-light, #f1f5f9);
    border-top-left-radius: var(--dash-radius-sm, 8px);
    border-bottom-left-radius: var(--dash-radius-sm, 8px);
}

.session-list-table tbody td:last-child {
    border-right: 1px solid var(--dash-border-light, #f1f5f9);
    border-top-right-radius: var(--dash-radius-sm, 8px);
    border-bottom-right-radius: var(--dash-radius-sm, 8px);
}

.list-date-cell {
    display: flex;
    flex-direction: column;
}

.list-date-cell .date-main {
    font-weight: 700;
    color: var(--dash-text-main, #1e293b);
}

.list-date-cell .date-sub {
    font-size: 11.5px;
    color: var(--dash-text-muted, #64748b);
    text-transform: capitalize;
}

.list-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #f1f5f9;
    color: #334155;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12.5px;
}

.list-group-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--dash-sky-light, #e0f2fe);
    color: #0369a1;
    border-radius: var(--dash-radius-pill, 9999px);
    font-size: 12.5px;
    font-weight: 600;
}

.list-subject-cell .subject-title {
    font-weight: 700;
    color: var(--dash-text-main, #1e293b);
    display: block;
}

.list-subject-cell .subject-notes {
    font-size: 11.5px;
    color: var(--dash-text-muted, #64748b);
    display: block;
    margin-top: 2px;
}

.list-teacher-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--dash-text-main, #1e293b);
}

.list-room-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #fef2f2;
    color: #991b1b;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
}

.list-actions-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-table-action {
    width: 32px;
    height: 32px;
    border: 1px solid var(--dash-border, #e2e8f0);
    background: #ffffff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dash-text-muted, #64748b);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-table-action.edit:hover {
    background: var(--dash-primary-light, #eff6ff);
    color: var(--dash-primary, #2563eb);
    border-color: #bfdbfe;
}

.btn-table-action.delete:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Modal Form inside WinBox */
.session-modal-form-container {
    padding: 20px 24px;
}

.session-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--dash-border, #e2e8f0);
}

.modal-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    flex-shrink: 0;
}

.modal-header-icon.bg-consultation {
    background: linear-gradient(135deg, #6366f1, #4338ca);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.modal-header-icon.bg-exam {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.modal-header-text h4 {
    margin: 0 0 4px 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--dash-text-main, #1e293b);
}

.modal-header-text p {
    margin: 0;
    font-size: 13px;
    color: var(--dash-text-muted, #64748b);
}

.session-form-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-row-highlight {
    background: var(--dash-bg-subtle, #f8fafc);
    border: 1px solid var(--dash-border, #e2e8f0);
    border-radius: var(--dash-radius-sm, 8px);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.consultation-toggle-wrap {
    flex: 1;
}

.custom-checkbox-container {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
}

.custom-checkbox-container input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--dash-primary, #2563eb);
}

.checkbox-label-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checkbox-label-text strong {
    font-size: 13.5px;
    color: var(--dash-text-main, #1e293b);
}

.checkbox-label-text small {
    font-size: 11.5px;
    color: var(--dash-text-muted, #64748b);
}

.event-type-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.event-type-selector .form-label-sm {
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-text-muted, #64748b);
    margin: 0;
}

.event-type-selector .form-control-sm {
    height: 32px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--dash-border, #e2e8f0);
    font-size: 12.5px;
    font-weight: 600;
    background: #ffffff;
}

.form-group-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.session-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-main, #1e293b);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.session-form-label i {
    color: var(--dash-primary, #2563eb);
    font-size: 13px;
}

.session-form-label.required::after {
    content: " *";
    color: #ef4444;
}

.session-form-input {
    height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--dash-border, #e2e8f0);
    border-radius: var(--dash-radius-sm, 8px);
    background: #ffffff;
    color: var(--dash-text-main, #1e293b);
    font-size: 13.5px;
    outline: none;
    transition: all 0.15s ease;
    width: 100%;
}

.session-form-input:focus {
    border-color: var(--dash-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-helper-text {
    font-size: 11.5px;
    color: var(--dash-text-muted, #64748b);
    margin-top: 3px;
}

.form-grid-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    .form-grid-three-col {
        grid-template-columns: 1fr;
    }
}

.time-input-preset-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quick-time-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.time-pill-btn {
    padding: 2px 6px;
    background: var(--dash-bg-subtle, #f8fafc);
    border: 1px solid var(--dash-border, #e2e8f0);
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--dash-text-muted, #64748b);
    cursor: pointer;
    transition: all 0.15s;
}

.time-pill-btn:hover {
    background: var(--dash-primary-light, #eff6ff);
    color: var(--dash-primary, #2563eb);
    border-color: #bfdbfe;
}

.session-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    margin-top: 6px;
    border-top: 1px solid var(--dash-border, #e2e8f0);
}

.btn-session-cancel {
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid var(--dash-border, #e2e8f0);
    border-radius: var(--dash-radius-sm, 8px);
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-muted, #64748b);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}

.btn-session-cancel:hover {
    background: #f1f5f9;
    color: var(--dash-text-main, #1e293b);
}

.btn-session-submit {
    padding: 8px 20px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: none;
    border-radius: var(--dash-radius-sm, 8px);
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    transition: all 0.15s;
}

.btn-session-submit:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);
}

/* Student Dashboard Session Widget */
.student-session-widget-container {
    background: var(--dash-bg-card, #ffffff);
    border: 1px solid var(--dash-border, #e2e8f0);
    border-radius: var(--dash-radius, 14px);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--dash-shadow-sm);
}

.student-section-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dash-border-light, #f1f5f9);
}

.section-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.section-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    flex-shrink: 0;
}

.section-icon-badge.bg-gradient-session {
    background: linear-gradient(135deg, #4f46e5, #3730a3);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

.title-with-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.section-title-wrap h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--dash-text-main, #1e293b);
}

.section-title-wrap p {
    margin: 2px 0 0 0;
    font-size: 13px;
    color: var(--dash-text-muted, #64748b);
}

.group-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    background: var(--dash-indigo-light, #eef2ff);
    color: var(--dash-indigo, #4f46e5);
    border: 1px solid #c7d2fe;
    border-radius: var(--dash-radius-pill, 9999px);
    font-size: 12px;
    font-weight: 700;
}

.section-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-kpi-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--dash-radius-pill, 9999px);
    font-size: 12px;
    font-weight: 600;
}

.session-kpi-pill.kpi-exam {
    background: var(--dash-amber-light, #fef3c7);
    color: #92400e;
    border: 1px solid var(--dash-amber-border, #fcd34d);
}

.session-kpi-pill.kpi-consultation {
    background: var(--dash-indigo-light, #eef2ff);
    color: var(--dash-indigo, #4f46e5);
    border: 1px solid #c7d2fe;
}

.btn-refresh-session {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid var(--dash-border, #e2e8f0);
    color: var(--dash-text-muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-refresh-session:hover {
    background: #ffffff;
    color: var(--dash-primary, #2563eb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Student Cards Grid */
.student-session-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.student-session-card {
    background: #ffffff;
    border: 1px solid var(--dash-border, #e2e8f0);
    border-radius: var(--dash-radius, 14px);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    transition: all 0.2s ease;
    border-top: 4px solid transparent;
}

.student-session-card.card-session-consultation {
    border-top-color: #6366f1;
    background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
}

.student-session-card.card-session-exam {
    border-top-color: #f59e0b;
    background: linear-gradient(180deg, #fffdfa 0%, #ffffff 100%);
}

.student-session-card.card-session-today {
    border-top-color: #10b981;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.student-session-card.card-session-passed {
    opacity: 0.65;
    border-top-color: #94a3b8;
    background: #f8fafc;
}

.student-session-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-md);
    opacity: 1;
}

.card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.student-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.student-type-pill.type-consultation {
    background: #e0e7ff;
    color: #4338ca;
}

.student-type-pill.type-exam {
    background: #fef3c7;
    color: #92400e;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill, 9999px);
}

.status-pill.pill-today {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

.status-pill.pill-tomorrow {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.status-pill.pill-upcoming {
    background: #f1f5f9;
    color: #475569;
}

.status-pill.pill-passed {
    background: #f1f5f9;
    color: #94a3b8;
}

.student-session-subject {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-main, #1e293b);
    line-height: 1.35;
}

.student-session-teacher {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--dash-text-muted, #64748b);
}

.student-session-teacher i {
    color: #94a3b8;
}

.student-session-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 8px;
    border-top: 1px solid var(--dash-border-light, #f1f5f9);
    font-size: 12.5px;
}

.student-session-details .detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--dash-text-main, #1e293b);
}

.student-session-details .detail-item i {
    width: 14px;
    text-align: center;
    color: var(--dash-primary, #2563eb);
}

.student-session-details .detail-item.room i {
    color: #dc2626;
}

.student-session-online {
    margin-top: 4px;
}

.btn-online-session {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 6px 12px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff !important;
    border-radius: var(--dash-radius-sm, 8px);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.btn-online-session:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-1px);
}

.student-session-notes {
    font-size: 11.5px;
    color: var(--dash-text-muted, #64748b);
    display: flex;
    align-items: center;
    gap: 5px;
    font-style: italic;
}

.student-session-empty {
    text-align: center;
    padding: 40px 20px;
}

.student-session-empty .empty-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px auto;
    font-size: 24px;
    color: #94a3b8;
}

.student-session-empty h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main, #1e293b);
    margin: 0 0 6px 0;
}

.student-session-empty p {
    font-size: 13px;
    color: var(--dash-text-muted, #64748b);
    max-width: 480px;
    margin: 0 auto;
}

/* ============================================================================
   12. VICERECTOR & DEAN DASHBOARDS (Views/ViceRector/Index.cshtml & Views/Dean/Index.cshtml)
   ============================================================================ */

.vicerector-dashboard-container,
.dean-dashboard-container {
    padding: 10px 0 40px;
    font-family: inherit;
    color: var(--dash-text-main);
}

/* Hero Headers */
.vicerector-hero,
.dean-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: var(--dash-radius);
    padding: 26px 30px;
    margin-bottom: 24px;
    color: #ffffff;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.vicerector-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.35) 0%, rgba(79, 70, 229, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.dean-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.35) 0%, rgba(37, 99, 235, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.role-hero-content {
    display: flex;
    align-items: center;
    gap: 18px;
    z-index: 1;
}

.role-avatar-badge {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.vicerector-avatar-badge {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.dean-avatar-badge {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.role-hero-text h3 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 6px 0;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.role-hero-text p {
    font-size: 13.5px;
    color: #cbd5e1;
    margin: 0 0 10px 0;
    max-width: 600px;
}

.role-info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.role-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 500;
    color: #e2e8f0;
}

.role-quick-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    z-index: 1;
}

.role-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--dash-radius-pill);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.role-action-pill:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* KPI Grids */
.role-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.role-kpi-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 18px 20px;
    box-shadow: var(--dash-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: all 0.2s ease;
    text-decoration: none !important;
    color: inherit;
}

.role-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.role-kpi-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.role-kpi-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--dash-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-kpi-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--dash-text-main);
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-kpi-sub {
    font-size: 11.5px;
    color: var(--dash-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-kpi-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    flex-shrink: 0;
}

/* Gradient Backgrounds */
.bg-sky-gradient {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
}

.bg-rose-gradient {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
}

/* Tabs & Filter Bar */
.role-tabs-wrapper {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 6px 8px;
    margin-bottom: 22px;
    box-shadow: var(--dash-shadow-sm);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
}

.role-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--dash-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--dash-text-muted);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.role-tab-btn:hover {
    color: var(--dash-text-main);
    background: var(--dash-bg-subtle);
}

.role-tab-btn.active {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    border-color: #bfdbfe;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08);
    font-weight: 700;
}

.role-tab-btn i {
    font-size: 14px;
    transition: color 0.18s ease;
}

.role-tab-btn.active i {
    color: var(--dash-primary);
}

.role-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--dash-radius-pill);
    background: #f1f5f9;
    color: var(--dash-text-muted);
    border: 1px solid var(--dash-border);
    transition: all 0.18s ease;
}

.role-tab-btn.active .role-tab-badge {
    background: #ffffff;
    color: var(--dash-primary);
    border-color: #bfdbfe;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.role-tab-badge.badge-danger-soft {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border-color: #fca5a5;
}

/* Card & Table Layouts */
.role-section-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
}

.role-card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--dash-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #ffffff;
}

.role-card-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.role-card-title-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.role-card-title-group h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0 0 3px 0;
}

.role-card-title-group p {
    font-size: 12.5px;
    color: var(--dash-text-muted);
    margin: 0;
}

.role-card-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.role-search-box {
    position: relative;
    min-width: 240px;
}

.role-search-box input {
    width: 100%;
    height: 36px;
    padding: 6px 12px 6px 34px;
    font-size: 13px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    outline: none;
    transition: all 0.2s ease;
}

.role-search-box input:focus {
    background: #ffffff;
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.role-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dash-text-light);
    font-size: 13px;
}

/* Modern Role Tables */
.role-table-responsive {
    width: 100%;
    overflow-x: auto;
}

.role-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.role-table th {
    background: #f8fafc;
    color: var(--dash-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 12px 18px;
    border-bottom: 1px solid var(--dash-border);
    text-align: left;
    white-space: nowrap;
}

.role-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--dash-border-light);
    color: var(--dash-text-main);
    vertical-align: middle;
}

.role-table tr:hover td {
    background-color: #f8fafc;
}

.role-table tr:last-child td {
    border-bottom: none;
}

/* Badges & Pills */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 600;
}

.badge-risk-critical {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.badge-risk-warning {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.badge-risk-success {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.badge-study-budget {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    border: 1px solid #bfdbfe;
}

.badge-study-contract {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border: 1px solid #c7d2fe;
}

/* Action Buttons */
.role-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--dash-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid var(--dash-border);
    background: #ffffff;
    color: var(--dash-text-main);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none !important;
}

.role-action-btn:hover {
    background: var(--dash-bg-subtle);
    border-color: #cbd5e1;
    color: var(--dash-primary);
}

.role-action-btn-primary {
    background: var(--dash-primary);
    color: #ffffff;
    border-color: var(--dash-primary);
}

.role-action-btn-primary:hover {
    background: var(--dash-primary-dark);
    color: #ffffff;
}

.role-action-btn-danger {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.role-action-btn-danger:hover {
    background: #fee2e2;
    color: #991b1b;
}

.role-action-btn-success {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.role-action-btn-success:hover {
    background: #d1fae5;
    color: #065f46;
}

/* Filter Chips */
.role-chips-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.role-filter-chip {
    padding: 5px 12px;
    border-radius: var(--dash-radius-pill);
    background: #f1f5f9;
    border: 1px solid var(--dash-border);
    color: var(--dash-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.role-filter-chip:hover {
    background: #e2e8f0;
    color: var(--dash-text-main);
}

.role-filter-chip.active {
    background: var(--dash-primary);
    color: #ffffff;
    border-color: var(--dash-primary);
}

/* Stat Progress Bars */
.stat-mini-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
}

.stat-mini-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dash-text-muted);
}

.stat-mini-bar-track {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 9999px;
    overflow: hidden;
}

.stat-mini-bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.fill-emerald {
    background: #10b981;
}

.fill-amber {
    background: #f59e0b;
}

.fill-rose {
    background: #f43f5e;
}

/* ============================================================================
   ADMIN STUDY GROUP COURSE PROMOTION WIZARD (Views/Admin/_PromoteStudyGroupsPartial.cshtml)
   ============================================================================ */

.promotion-wizard-container {
    padding: 6px 4px 10px;
}

.promotion-year-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--dash-primary-light);
    border: 1px solid #bfdbfe;
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    color: var(--dash-primary-dark);
}

.promotion-year-badge i {
    color: var(--dash-primary);
}

.promotion-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--dash-radius-sm);
    margin-bottom: 14px;
}

.promotion-banner-icon {
    font-size: 18px;
    color: #16a34a;
    flex-shrink: 0;
    margin-top: 1px;
}

.promotion-banner-content {
    font-size: 12.5px;
    line-height: 1.5;
    color: #166534;
}

.promotion-banner-content code {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.promotion-quick-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border-light);
    border-radius: var(--dash-radius-sm);
}

.promotion-qa-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-qa-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    color: var(--dash-text-main);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-qa-pill:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--dash-primary);
    transform: translateY(-1px);
}

.promotion-qa-right {
    display: flex;
    align-items: center;
}

.promotion-summary-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chip-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--dash-radius-pill);
    font-size: 11.5px;
    font-weight: 600;
}

.chip-promote {
    background: var(--dash-primary-light);
    color: var(--dash-primary-dark);
    border: 1px solid #bfdbfe;
}

.chip-graduate {
    background: var(--dash-amber-light);
    color: #b45309;
    border: 1px solid #fde68a;
}

.chip-skip {
    background: #f1f5f9;
    color: var(--dash-text-muted);
    border: 1px solid var(--dash-border);
}

.promotion-table-container {
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    background: #ffffff;
}

.promotion-table {
    margin-bottom: 0;
    font-size: 13px;
}

.promotion-table thead tr {
    background: var(--dash-bg-subtle);
    border-bottom: 1px solid var(--dash-border);
}

.promotion-table thead th {
    padding: 10px 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--dash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    border-top: none;
}

.promotion-table tbody td {
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid var(--dash-border-light);
}

.promotion-row:hover {
    background: #f8fafc;
}

.row-final-year {
    background: rgba(254, 243, 199, 0.25);
}

.promo-group-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.promo-group-name strong {
    font-size: 13.5px;
    color: var(--dash-text-main);
}

.promo-dept-label {
    font-size: 11px;
    color: var(--dash-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.course-transition-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--dash-radius-pill);
    background: #f1f5f9;
    border: 1px solid var(--dash-border);
    font-size: 11.5px;
    font-weight: 600;
}

.course-step-old {
    color: var(--dash-text-muted);
}

.course-arrow {
    color: var(--dash-primary);
    font-weight: 800;
}

.course-step-new {
    color: var(--dash-primary);
    font-weight: 700;
}

.course-badge-grad {
    background: var(--dash-amber-light);
    border-color: #fde68a;
}

.course-badge-grad .course-step-new {
    color: #b45309;
}

.promotion-name-input {
    width: 100%;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-main);
    background: #ffffff;
    border: 1.5px solid var(--dash-border);
    border-radius: 6px;
    transition: all 0.15s ease;
    outline: none;
}

.promotion-name-input:focus {
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.promotion-name-input.input-disabled {
    background: #f1f5f9;
    color: var(--dash-text-light);
    border-color: #e2e8f0;
    cursor: not-allowed;
}

.promotion-name-input.input-error {
    border-color: var(--dash-danger);
    background: #fff5f5;
}

.promotion-action-select {
    width: 100%;
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dash-text-main);
    background: #ffffff;
    border: 1.5px solid var(--dash-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
}

.promotion-action-select:focus {
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.promotion-empty-state {
    text-align: center;
    padding: 36px 20px;
    color: var(--dash-text-muted);
}

.promotion-empty-state i {
    color: var(--dash-text-light);
    margin-bottom: 10px;
}

.promotion-empty-state h6 {
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin-bottom: 4px;
}

.promotion-empty-state p {
    font-size: 13px;
    margin-bottom: 0;
}

/* ============================================================================
   TEACHER CARD - DEPARTMENT, CATHEDRAS & HEAD OF CATHEDRA ENHANCEMENTS
   ============================================================================ */

.profile-data-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 1280px) {
    .profile-data-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .profile-data-grid-3 {
        grid-template-columns: 1fr;
    }
}

.profile-cathedras-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
    max-width: 250px;
}

.profile-cathedra-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dash-text-main);
    transition: all 0.15s ease;
}

.profile-cathedra-badge:hover {
    border-color: var(--dash-indigo);
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
}

.btn-assign-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    border: 1px dashed var(--dash-primary);
    border-radius: var(--dash-radius-pill);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-assign-badge:hover {
    background: var(--dash-primary);
    color: #ffffff;
}

/* ============================================================================
   DEAN DASHBOARD (Views/Dean/Index.cshtml)
   ============================================================================ */
.dean-dashboard-container {
    padding: 10px 0 40px;
    color: var(--dash-text-main);
}

.dean-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: var(--dash-radius);
    padding: 26px 30px;
    margin-bottom: 24px;
    color: #ffffff;
    box-shadow: var(--dash-shadow-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.dean-hero::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.35) 0%, rgba(37, 99, 235, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.dean-hero::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 25%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.role-hero-content {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 300px;
    z-index: 1;
}

.role-avatar-badge {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.dean-avatar-badge {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.role-hero-text h3 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 6px 0;
    color: #ffffff;
}

.role-hero-text p {
    font-size: 13.5px;
    color: #94a3b8;
    margin: 0 0 12px 0;
    line-height: 1.45;
}

.role-info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.role-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--dash-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 12px;
    font-weight: 600;
    color: #f1f5f9;
}

.role-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 1;
}

.academic-year-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--dash-radius-pill);
    padding: 3px 12px 3px 14px;
    backdrop-filter: blur(8px);
}

.academic-year-select-wrap label {
    color: #94a3b8;
    font-size: 12px;
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.academic-year-select-wrap select {
    background: transparent;
    border: none;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    padding: 4px 6px;
}

.academic-year-select-wrap select option {
    background: #1e293b;
    color: #ffffff;
}

.role-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: var(--dash-radius-pill);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.role-action-pill:hover,
.role-action-pill:focus {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.role-action-pill.pill-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
}

.role-action-pill.pill-primary:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
    color: #ffffff;
}

.role-action-pill.pill-success {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.role-action-pill.pill-success:hover {
    background: linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.55);
    color: #ffffff;
}

/* KPI Cards Grid */
.role-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.role-kpi-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 18px 20px;
    box-shadow: var(--dash-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    transition: all 0.2s ease;
}

.role-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.role-kpi-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.role-kpi-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--dash-text-muted);
}

.role-kpi-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--dash-text-main);
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-kpi-sub {
    font-size: 12px;
    color: var(--dash-text-muted);
    font-weight: 500;
}

.role-kpi-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff;
    flex-shrink: 0;
}

.bg-blue-gradient {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.bg-purple-gradient {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bg-rose-gradient {
    background: linear-gradient(135deg, #f43f5e, #be123c);
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}

.bg-emerald-gradient {
    background: linear-gradient(135deg, #10b981, #047857);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.bg-amber-gradient {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.bg-indigo-gradient {
    background: linear-gradient(135deg, #6366f1, #4338ca);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.status-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    animation: pulseAnimation 2s infinite;
}

@keyframes pulseAnimation {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}



/* Section Card */
.role-section-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
}

.role-card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--dash-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #ffffff;
}

.role-card-title-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.role-card-title-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.role-card-title-group h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 2px 0;
    color: var(--dash-text-main);
}

.role-card-title-group p {
    font-size: 12.5px;
    color: var(--dash-text-muted);
    margin: 0;
}

.role-card-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.role-chips-group {
    display: flex;
    gap: 4px;
    background: #f1f5f9;
    padding: 3px;
    border-radius: var(--dash-radius-pill);
    border: 1px solid var(--dash-border);
    overflow-x: auto;
}

.role-filter-chip {
    padding: 5px 12px;
    border-radius: var(--dash-radius-pill);
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.role-filter-chip:hover {
    color: var(--dash-text-main);
}

.role-filter-chip.active {
    background: #ffffff;
    color: var(--dash-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.role-search-box {
    position: relative;
    width: 200px;
}

.role-search-box input {
    width: 100%;
    padding: 6px 12px 6px 32px;
    font-size: 13px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    background: var(--dash-bg-subtle);
    outline: none;
    transition: all 0.15s ease;
}

.role-search-box input:focus {
    background: #ffffff;
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.role-search-box i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dash-text-light);
    font-size: 13px;
    pointer-events: none;
}

/* Table Responsive */
.role-table-responsive {
    width: 100%;
    overflow-x: auto;
}

.role-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.role-table th {
    background: #f8fafc;
    padding: 12px 18px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--dash-text-muted);
    border-bottom: 1px solid var(--dash-border);
    text-align: left;
    white-space: nowrap;
}

.role-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--dash-border-light);
    color: var(--dash-text-main);
    vertical-align: middle;
}

.role-table tbody tr:hover {
    background: #f8fafc;
}

.role-table tbody tr:last-child td {
    border-bottom: none;
}

/* Badges */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--dash-radius-pill);
    font-size: 11.5px;
    font-weight: 600;
}

.badge-study-contract {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    border: 1px solid #bfdbfe;
}

.badge-risk-critical {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.badge-risk-warning {
    background: var(--dash-amber-light);
    color: var(--dash-amber);
    border: 1px solid var(--dash-amber-border);
}

.badge-risk-success {
    background: var(--dash-success-light);
    color: var(--dash-success);
    border: 1px solid #a7f3d0;
}

.badge-neutral {
    background: #f1f5f9;
    color: var(--dash-text-muted);
    border: 1px solid var(--dash-border);
}

.badge-info-soft {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border: 1px solid #c7d2fe;
}

.bg-purple-gradient {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.3);
}

/* Mini Bar Stats */
.stat-mini-bar-wrap {
    width: 120px;
}

.stat-mini-bar-labels {
    font-size: 11px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin-bottom: 3px;
}

.stat-mini-bar-track {
    height: 6px;
    background: #e2e8f0;
    border-radius: var(--dash-radius-pill);
    overflow: hidden;
}

.stat-mini-bar-fill {
    height: 100%;
    border-radius: var(--dash-radius-pill);
    transition: width 0.3s ease;
}

.fill-amber { background: #d97706; }
.fill-emerald { background: #10b981; }
.fill-rose { background: #ef4444; }
.fill-blue { background: #2563eb; }

/* Action Buttons */
.role-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--dash-radius-sm);
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    color: var(--dash-text-main);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

.role-action-btn:hover {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    border-color: #bfdbfe;
    text-decoration: none;
}

.role-action-btn-danger {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

.role-action-btn-danger:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

.role-action-btn-success {
    color: #059669;
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.role-action-btn-success:hover {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
}

/* Dean Not Assigned State */
.dean-not-assigned-container {
    padding: 40px 15px;
    max-width: 650px;
    margin: 0 auto;
}

.dean-not-assigned-card {
    background: var(--dash-bg-card);
    border: 1px solid #fed7aa;
    border-radius: var(--dash-radius);
    padding: 40px 30px;
    text-align: center;
    box-shadow: var(--dash-shadow-md);
    position: relative;
    overflow: hidden;
}

.dean-not-assigned-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #f59e0b, #ea580c);
}

.dean-not-assigned-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #fff7ed;
    border: 2px solid #ffedd5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #ea580c;
}

.dean-not-assigned-card h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--dash-text-main);
    margin: 0 0 10px 0;
}

.dean-not-assigned-card p {
    font-size: 14px;
    color: var(--dash-text-muted);
    line-height: 1.55;
    margin: 0 0 24px 0;
}

.dean-not-assigned-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* ==========================================================================
   STUDENT DEAN REQUESTS COMPONENT (Views/Student/Index.cshtml)
   ========================================================================== */

.student-requests-modal-nav {
    display: flex;
    border-bottom: 1px solid var(--dash-border);
    margin-bottom: 20px;
    gap: 8px;
}

.student-requests-nav-btn {
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dash-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.student-requests-nav-btn:hover {
    color: var(--dash-primary);
}

.student-requests-nav-btn.active {
    color: var(--dash-primary);
    border-bottom-color: var(--dash-primary);
}

.student-request-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    position: relative;
}

.student-request-card:hover {
    border-color: #cbd5e1;
    box-shadow: var(--dash-shadow-sm);
}

.student-request-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.student-request-type {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--dash-text-main);
}

.student-request-date {
    font-size: 11.5px;
    color: var(--dash-text-light);
}

.student-request-reason {
    font-size: 13px;
    color: #334155;
    line-height: 1.45;
    margin-bottom: 10px;
}

.student-request-meta {
    font-size: 12px;
    color: var(--dash-sky);
    margin-bottom: 8px;
}

.student-request-resolution {
    background: var(--dash-bg-subtle);
    border-left: 3px solid var(--dash-primary);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: var(--dash-text-main);
    margin-top: 8px;
}

.student-request-empty {
    text-align: center;
    padding: 35px 20px;
    color: var(--dash-text-muted);
}

.student-request-empty i {
    font-size: 38px;
    color: var(--dash-text-light);
    margin-bottom: 12px;
}

/* ============================================================================
   COURSE STUDY GROUPS & SYLLABUS / WORK PROGRAM (РНП) STYLES
   ============================================================================ */

.course-add-modal-container {
    display: block;
    width: 100%;
    max-width: 580px;
    padding: 6px 8px;
}

.course-field-group {
    margin-bottom: 18px;
}

.course-field-label {
    display: block;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--dash-text-main);
}

.course-field-label i {
    color: var(--dash-primary);
    margin-right: 6px;
}

.course-field-required {
    color: var(--dash-danger);
    font-weight: 700;
}

.course-field-optional {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--dash-text-muted);
    margin-left: 4px;
}

/* Groups Selection Box */
.group-selection-box {
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 12px 14px;
    transition: all 0.2s ease;
}

.group-selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.group-selection-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}

.group-select-all-btn {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dash-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.group-select-all-btn:hover {
    background: var(--dash-primary-light);
    border-color: var(--dash-primary);
}

.group-chips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    max-height: 160px;
    overflow-y: auto;
    padding-right: 4px;
}

.group-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dash-text-main);
    user-select: none;
    margin-bottom: 0;
}

.group-checkbox-label:hover {
    border-color: var(--dash-primary);
    background: var(--dash-primary-light);
}

.group-checkbox-label.is-checked {
    background: var(--dash-primary-light);
    border-color: var(--dash-primary);
    color: var(--dash-primary-dark);
}

.group-checkbox-label input[type="checkbox"] {
    accent-color: var(--dash-primary);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.group-selection-empty {
    font-size: 12.5px;
    color: var(--dash-text-muted);
    text-align: center;
    padding: 14px 10px;
    font-style: italic;
}

/* File Upload Dropzones */
.file-upload-dropzone {
    position: relative;
    border: 1.5px dashed var(--dash-border);
    border-radius: var(--dash-radius-sm);
    background: var(--dash-bg-subtle);
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-upload-dropzone:hover {
    border-color: var(--dash-primary);
    background: #f0f7ff;
}

.file-upload-dropzone.has-file {
    border-color: var(--dash-success);
    background: var(--dash-success-light);
    border-style: solid;
}

.file-upload-dropzone input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-dropzone-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--dash-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--dash-primary);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.file-upload-dropzone.has-file .file-dropzone-icon {
    background: #ffffff;
    border-color: var(--dash-success);
    color: var(--dash-success);
}

.file-dropzone-text {
    flex: 1;
    min-width: 0;
}

.file-dropzone-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dash-text-main);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-dropzone-desc {
    font-size: 11.5px;
    color: var(--dash-text-muted);
    display: block;
}

.file-remove-btn {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dash-danger);
    font-size: 12px;
    cursor: pointer;
    z-index: 2;
    transition: all 0.15s ease;
}

.file-remove-btn:hover {
    background: var(--dash-danger-light);
    border-color: var(--dash-danger);
}

/* Course Document Download Cards & Pills */
.course-docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.course-doc-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: var(--dash-shadow-sm);
    transition: all 0.2s ease;
}

.course-doc-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-md);
    border-color: var(--dash-primary);
}

.course-doc-card-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.course-doc-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.course-doc-icon.bg-rnp {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    border: 1px solid rgba(37, 99, 235, 0.15);
}

.course-doc-icon.bg-syllabus {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border: 1px solid rgba(79, 70, 229, 0.15);
}

.course-doc-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-text-main);
    display: block;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-doc-subtitle {
    font-size: 12px;
    color: var(--dash-text-muted);
    display: block;
}

.course-doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

.course-doc-btn-primary {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    border: 1px solid rgba(37, 99, 235, 0.25);
}

.course-doc-btn-primary:hover {
    background: var(--dash-primary);
    color: #ffffff;
    text-decoration: none;
}

.course-doc-actions-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.course-doc-btn-secondary {
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    border: 1px solid var(--dash-border);
}

.course-doc-btn-secondary:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    color: var(--dash-primary);
    text-decoration: none;
}

.course-doc-btn-danger {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
    padding: 8px 10px;
}

.course-doc-btn-danger:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    text-decoration: none;
}

.course-doc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--dash-radius-pill);
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
}

.course-doc-pill.pill-rnp {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.course-doc-pill.pill-rnp:hover {
    background: var(--dash-primary);
    color: #ffffff;
    text-decoration: none;
}

.course-doc-pill.pill-syllabus {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border: 1px solid rgba(79, 70, 229, 0.2);
}

.course-doc-pill.pill-syllabus:hover {
    background: var(--dash-indigo);
    color: #ffffff;
    text-decoration: none;
}

.group-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    border: 1px solid var(--dash-border);
    margin-right: 4px;
    margin-bottom: 3px;
}

/* Student Educational Materials Lesson Accordion Styles */
.student-lesson-item:hover {
    border-color: #cbd5e1 !important;
    box-shadow: var(--dash-shadow-sm);
}
.student-lesson-toggle-btn[aria-expanded="true"] .accordion-arrow {
    transform: rotate(180deg);
    color: var(--dash-primary) !important;
}
.student-lesson-toggle-btn[aria-expanded="true"] {
    background: var(--dash-primary-light) !important;
}
.student-lesson-toggle-btn:hover {
    background: var(--dash-bg-subtle);
}
.lesson-rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.lesson-rich-content table {
    width: 100%;
    margin: 14px 0;
    border-collapse: collapse;
}
.lesson-rich-content table th,
.lesson-rich-content table td {
    padding: 8px 12px;
    border: 1px solid var(--dash-border);
}

/* ============================================================================
   12. ADVANCED TESTING SYSTEM (5 QUESTION TYPES & ANTI-CHEATING SHUFFLE)
   ============================================================================ */

/* Anti-cheating Shuffle Toggles in Hero Header */
.test-shuffle-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.test-shuffle-toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--dash-radius-pill);
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.test-shuffle-toggle-pill:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

.test-shuffle-toggle-pill.active {
    background: rgba(16, 185, 129, 0.35);
    border-color: #34d399;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.test-shuffle-toggle-pill input[type="checkbox"] {
    cursor: pointer;
    width: 14px;
    height: 14px;
    accent-color: #10b981;
    margin: 0;
}

/* Question Type Selector Tabs in Builder Modal */
.builder-qtype-selector-wrap {
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.builder-qtype-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}

.qtype-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    background: #ffffff;
    border: 1.5px solid var(--dash-border);
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dash-text-muted);
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.qtype-tab-btn:hover {
    border-color: var(--dash-indigo);
    color: var(--dash-indigo);
    background: var(--dash-indigo-light);
    transform: translateY(-1px);
}

.qtype-tab-btn.active {
    background: var(--dash-indigo);
    border-color: var(--dash-indigo);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* Matching Question Teacher Preview & Builder */
.matching-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.matching-pair-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: var(--dash-shadow-sm);
    transition: all 0.15s ease;
}

.matching-pair-card:hover {
    border-color: var(--dash-indigo);
    box-shadow: var(--dash-shadow-md);
}

.matching-pair-left {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pair-num {
    display: inline-block;
    color: var(--dash-indigo);
    font-weight: 800;
    min-width: 18px;
}

.matching-pair-arrow {
    color: var(--dash-text-light);
    font-size: 14px;
    flex-shrink: 0;
}

.matching-pair-right {
    flex: 1;
    font-size: 13px;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 4px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.pair-letter {
    font-weight: 800;
    color: #059669;
}

.matching-builder-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    margin-bottom: 6px;
}

.matching-builder-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.matching-builder-row {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.15s ease;
}

.matching-builder-row:hover {
    border-color: #cbd5e1;
    box-shadow: var(--dash-shadow-sm);
}

.matching-pair-badge {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    font-weight: 800;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    min-width: 26px;
    text-align: center;
}

.matching-pair-badge-letter {
    background: #ecfdf5;
    color: #059669;
    font-weight: 800;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    min-width: 26px;
    text-align: center;
}

.matching-pair-divider {
    color: var(--dash-text-light);
    font-size: 14px;
    flex-shrink: 0;
}

/* Ordering Question Teacher Preview & Builder */
.ordering-preview-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.ordering-step-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--dash-shadow-sm);
}

.step-num-badge {
    background: var(--dash-amber-light);
    color: #b45309;
    border: 1px solid var(--dash-amber-border);
    font-size: 11.5px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--dash-radius-pill);
    flex-shrink: 0;
}

.step-text {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dash-text-main);
    flex: 1;
}

.ordering-builder-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ordering-builder-row {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.15s ease;
}

.ordering-builder-row:hover {
    border-color: #cbd5e1;
    box-shadow: var(--dash-shadow-sm);
}

.ordering-step-index {
    background: var(--dash-amber-light);
    color: #b45309;
    border: 1px solid var(--dash-amber-border);
    font-weight: 800;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.ordering-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.step-move-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--dash-border);
    background: var(--dash-bg-subtle);
    color: var(--dash-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.step-move-btn:hover {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border-color: #c7d2fe;
}

/* Text / Numeric Answer Teacher Preview & Builder */
.textanswer-preview-card {
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 12px 16px;
    margin-top: 10px;
}

.textanswer-pill {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: var(--dash-radius-pill);
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-text-main);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.textanswer-builder-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.textanswer-builder-row {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ----------------------------------------------------------------------------
   STUDENT TAKING TEST UI: 5 QUESTION TYPES
   ---------------------------------------------------------------------------- */

/* Matching in Student View */
.student-matching-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.student-matching-row {
    background: #ffffff;
    border: 1.5px solid var(--dash-border);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: all 0.2s ease;
}

.student-matching-row:hover {
    border-color: #cbd5e1;
    box-shadow: var(--dash-shadow-sm);
}

.student-matching-left {
    flex: 1.2;
    font-size: 14px;
    font-weight: 600;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.student-matching-select-wrap {
    flex: 1.5;
}

.student-matching-select {
    width: 100%;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 600;
    border: 1.5px solid var(--dash-border);
    border-radius: 8px;
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.student-matching-select:focus,
.student-matching-select:hover {
    border-color: var(--dash-indigo);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

/* Ordering in Student View */
.student-ordering-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.student-ordering-card {
    background: #ffffff;
    border: 1.5px solid var(--dash-border);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--dash-shadow-sm);
    transition: all 0.2s ease;
}

.student-ordering-card:hover {
    border-color: #94a3b8;
    box-shadow: var(--dash-shadow-md);
}

.ordering-card-step-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--dash-amber-light);
    color: #b45309;
    border: 1.5px solid var(--dash-amber-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
}

.ordering-card-text {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--dash-text-main);
    line-height: 1.4;
}

.ordering-card-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ordering-card-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1.5px solid var(--dash-border);
    background: var(--dash-bg-subtle);
    color: var(--dash-text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ordering-card-btn:hover {
    background: var(--dash-primary);
    color: #ffffff;
    border-color: var(--dash-primary);
    transform: scale(1.05);
}

/* Text / Numeric Input in Student View */
.student-textanswer-wrap {
    margin-top: 6px;
}

.student-textanswer-input {
    width: 100%;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    border: 2px solid var(--dash-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--dash-text-main);
    transition: all 0.2s ease;
    outline: none;
}

.student-textanswer-input:focus {
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.badge-status-purple {
    background: #faf5ff;
    color: #9333ea;
    border: 1px solid #e9d5ff;
}

/* ============================================================================
   13. DOCS HUB / KNOWLEDGE BASE & DOCUMENTATION CENTER
   ============================================================================ */
.docs-hub-container {
    font-family: inherit;
    color: var(--dash-text-main);
    padding: 6px 0 40px;
}

.docs-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    margin-bottom: 24px;
}

.badge-role-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--dash-radius-pill);
    padding: 2px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #e2e8f0;
}

.docs-hero-search-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.docs-search-box {
    position: relative;
    width: 280px;
}

.docs-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dash-text-light);
    font-size: 13px;
    pointer-events: none;
}

.docs-search-input {
    width: 100%;
    height: 40px;
    padding: 8px 38px 8px 36px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--dash-radius-pill);
    color: #ffffff;
    font-size: 13px;
    outline: none;
    transition: all 0.2s ease;
}

.docs-search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.docs-search-input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.docs-search-shortcut {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    pointer-events: none;
}

.btn-docs-print {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--dash-radius-pill);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-docs-print:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

/* 3-Column Docs Layout */
.docs-layout-grid {
    display: grid;
    grid-template-columns: 280px 1fr 240px;
    gap: 24px;
    align-items: flex-start;
}

/* Left Sidebar Navigation */
.docs-sidebar-pane {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    padding: 18px;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.docs-sidebar-header {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dash-border-light);
    margin-bottom: 14px;
}

.docs-sidebar-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--dash-text-muted);
}

.docs-nav-tree {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.docs-nav-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin-bottom: 8px;
    padding: 4px 6px;
}

.docs-group-badge {
    font-size: 10px;
    font-weight: 800;
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    border-radius: var(--dash-radius-pill);
    padding: 1px 7px;
}

.docs-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.docs-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dash-text-muted);
    text-decoration: none;
    transition: all 0.15s ease;
}

.docs-nav-link:hover {
    background: var(--dash-bg-subtle);
    color: var(--dash-primary);
    text-decoration: none;
    padding-left: 14px;
}

.docs-nav-link.active {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    font-weight: 700;
}

/* Center Content Pane */
.docs-content-pane {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    padding: 32px 36px;
    min-height: 800px;
}

.docs-breadcrumb {
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-text-light);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.docs-main-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--dash-text-main);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
}

.docs-lead-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--dash-text-muted);
    margin-bottom: 18px;
}

.docs-quick-links-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.docs-divider {
    border: none;
    border-top: 1px solid var(--dash-border-light);
    margin: 28px 0;
}

.docs-section {
    margin-bottom: 32px;
}

.docs-section-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--dash-text-main);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-num {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}

.docs-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.docs-type-info-card {
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 16px;
    transition: all 0.2s ease;
}

.docs-type-info-card:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-sm);
}

.docs-type-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 12px;
}

.bg-blue-grad { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.bg-indigo-grad { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.bg-emerald-grad { background: linear-gradient(135deg, #10b981, #059669); }
.bg-amber-grad { background: linear-gradient(135deg, #f59e0b, #d97706); }
.bg-purple-grad { background: linear-gradient(135deg, #a855f7, #9333ea); }

.docs-type-info-card h5 {
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0 0 6px 0;
}

.docs-type-info-card p {
    font-size: 12.5px;
    color: var(--dash-text-muted);
    line-height: 1.45;
    margin-bottom: 10px;
}

/* Interactive Demo Box */
.docs-demo-box {
    background: #ffffff;
    border: 1.5px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
    margin: 20px 0;
}

.docs-demo-header {
    background: var(--dash-indigo-light);
    border-bottom: 1px solid rgba(79, 70, 229, 0.15);
    padding: 10px 16px;
    font-size: 13px;
    color: var(--dash-indigo);
    display: flex;
    align-items: center;
    gap: 8px;
}

.docs-demo-body {
    padding: 18px;
    background: var(--dash-bg-subtle);
}

/* Callout Alerts */
.docs-callout {
    border-radius: var(--dash-radius-sm);
    padding: 14px 18px;
    margin: 16px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.docs-callout .callout-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.docs-callout .callout-body {
    font-size: 13.5px;
    line-height: 1.5;
}

.docs-callout-tip {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}
.docs-callout-tip .callout-icon { color: #10b981; }

.docs-callout-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}
.docs-callout-info .callout-icon { color: #3b82f6; }

.docs-callout-note {
    background: #fdf4ff;
    border: 1px solid #f5d0fe;
    color: #86198f;
}
.docs-callout-note .callout-icon { color: #c026d3; }

.docs-table-wrap {
    overflow-x: auto;
    margin: 16px 0;
}

.docs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.docs-table th {
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    padding: 10px 14px;
    font-weight: 700;
    color: var(--dash-text-main);
    text-align: left;
}

.docs-table td {
    border: 1px solid var(--dash-border);
    padding: 10px 14px;
    color: var(--dash-text-main);
}

.badge-tag {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    font-weight: 700;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill);
}

.docs-bullets, .docs-ordered-list {
    padding-left: 22px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--dash-text-main);
}

.docs-bullets li, .docs-ordered-list li {
    margin-bottom: 6px;
}

/* Right TOC Pane */
.docs-toc-pane {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    padding: 18px;
    position: sticky;
    top: 20px;
}

.docs-toc-header {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--dash-text-muted);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dash-border-light);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.docs-toc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.docs-toc-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-text-muted);
    text-decoration: none;
    transition: all 0.15s ease;
    line-height: 1.35;
    padding: 3px 0;
}

.docs-toc-link:hover {
    color: var(--dash-primary);
    text-decoration: none;
    padding-left: 4px;
}

.docs-quick-help-card {
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 14px;
}

/* Responsive Layout */
@media (max-width: 1200px) {
    .docs-layout-grid {
        grid-template-columns: 240px 1fr;
    }
    .docs-toc-pane {
        display: none;
    }
}

@media (max-width: 900px) {
    .docs-layout-grid {
        grid-template-columns: 1fr;
    }
    .docs-sidebar-pane {
        position: static;
        max-height: none;
    }
}

/* Print Styles */
@media print {
    .left_col, .navbar, .docs-sidebar-pane, .docs-toc-pane, .docs-hero-search-wrap, .docs-quick-links-bar {
        display: none !important;
    }
    .docs-layout-grid {
        display: block !important;
    }
    .docs-content-pane {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}

/* ============================================================================
   LESSON ADD / EDIT MODAL STYLES (Views/Teacher/_AddNewLessonPartial.cshtml)
   ============================================================================ */
.lesson-add-modal-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 4px;
}

.lesson-field-group {
    margin-bottom: 16px;
}

.lesson-field-label {
    display: block;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--dash-text-main);
}

.lesson-field-label i {
    color: var(--dash-primary);
    margin-right: 6px;
}

.lesson-field-required {
    color: #ef4444;
    font-weight: 700;
}

.lesson-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    margin-top: 8px;
    border-top: 1px solid var(--dash-border-light);
    position: sticky;
    bottom: -20px;
    background: #ffffff;
    z-index: 10;
    padding-bottom: 4px;
}

/* ============================================================================
   SUMMERNOTE RICH TEXT EDITOR MODERN DASHBOARD THEME
   ============================================================================ */
.note-editor.note-frame {
    border: 1px solid var(--dash-border) !important;
    border-radius: var(--dash-radius-sm) !important;
    box-shadow: var(--dash-shadow-sm) !important;
    background-color: var(--dash-bg-card, #ffffff) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    overflow: hidden;
}

.note-editor.note-frame:focus-within {
    border-color: var(--dash-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.note-editor.note-frame .note-toolbar {
    background: var(--dash-bg-subtle, #f8fafc) !important;
    border-bottom: 1px solid var(--dash-border-light, #f1f5f9) !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    gap: 4px;
}

.note-editor.note-frame .note-toolbar .note-btn-group {
    margin-right: 6px !important;
    margin-bottom: 2px !important;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid var(--dash-border, #e2e8f0);
    padding: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.note-editor.note-frame .note-toolbar .note-btn {
    background: transparent !important;
    border: none !important;
    color: var(--dash-text-main, #1e293b) !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    transition: all 0.15s ease !important;
}

.note-editor.note-frame .note-toolbar .note-btn:hover,
.note-editor.note-frame .note-toolbar .note-btn.active,
.note-editor.note-frame .note-toolbar .note-btn:active {
    background: var(--dash-primary-light, #eff6ff) !important;
    color: var(--dash-primary, #2563eb) !important;
}

.note-editor.note-frame .note-editing-area .note-editable {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--dash-text-main, #1e293b) !important;
    padding: 14px 16px !important;
    background-color: #ffffff !important;
}

.note-editor.note-frame .note-editing-area .note-editable:focus {
    outline: none !important;
}

.note-editor.note-frame .note-editing-area .note-editable p {
    margin-bottom: 8px;
}

.note-editor.note-frame .note-statusbar {
    background-color: var(--dash-bg-subtle, #f8fafc) !important;
    border-top: 1px solid var(--dash-border-light, #f1f5f9) !important;
    border-radius: 0 0 var(--dash-radius-sm) var(--dash-radius-sm) !important;
}

.note-modal .modal-content {
    border-radius: var(--dash-radius) !important;
    border: 1px solid var(--dash-border) !important;
    box-shadow: var(--dash-shadow-lg) !important;
}

.note-modal .modal-header {
    border-bottom: 1px solid var(--dash-border-light) !important;
    padding: 14px 18px !important;
}

.note-modal .modal-footer {
    border-top: 1px solid var(--dash-border-light) !important;
    padding: 12px 18px !important;
}

/* ============================================================================
   SELECT2 & FLATPICKR MODERN DASHBOARD THEME
   ============================================================================ */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--dash-border) !important;
    border-radius: var(--dash-radius-sm) !important;
    height: 38px !important;
    padding: 4px 8px !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--dash-text-main) !important;
    line-height: 28px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding-left: 4px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 8px !important;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--dash-border) !important;
    border-radius: var(--dash-radius-sm) !important;
    min-height: 38px !important;
    padding: 2px 6px !important;
    background-color: #ffffff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--dash-primary-light, #eff6ff) !important;
    border: 1px solid #bfdbfe !important;
    color: var(--dash-primary-dark, #1d4ed8) !important;
    border-radius: var(--dash-radius-pill) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 3px 10px 3px 8px !important;
    margin: 3px 4px 3px 0 !important;
    line-height: 1.4 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static !important;
    border: none !important;
    background: transparent !important;
    color: var(--dash-primary, #2563eb) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin-right: 6px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    transition: all 0.15s ease !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: rgba(37, 99, 235, 0.18) !important;
    color: #1d4ed8 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding: 0 !important;
    color: var(--dash-text-main, #1e293b) !important;
    font-weight: 600 !important;
}

.select2-dropdown {
    border: 1px solid var(--dash-border) !important;
    border-radius: var(--dash-radius-sm) !important;
    box-shadow: var(--dash-shadow-lg) !important;
    background: #ffffff !important;
    z-index: 999999 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--dash-primary, #2563eb) !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option {
    padding: 8px 12px !important;
    font-size: 13.5px !important;
}

/* Flatpickr Theme */
.flatpickr-calendar {
    border: 1px solid var(--dash-border) !important;
    border-radius: var(--dash-radius) !important;
    box-shadow: var(--dash-shadow-lg) !important;
    font-family: 'Inter', sans-serif !important;
    z-index: 999999 !important;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--dash-primary, #2563eb) !important;
    border-color: var(--dash-primary, #2563eb) !important;
}

.flatpickr-day:hover {
    background: var(--dash-primary-light, #eff6ff) !important;
}

/* Modern Switch */
.dash-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin-bottom: 0;
    vertical-align: middle;
}

.dash-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.dash-switch .dash-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 24px;
}

.dash-switch .dash-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.dash-switch input:checked + .dash-slider {
    background-color: var(--dash-primary, #2563eb);
}

.dash-switch input:checked + .dash-slider:before {
    transform: translateX(20px);
}

/* ============================================================================
   TUITION & DASHBOARD MODALS (MODERN DESIGN SYSTEM)
   ============================================================================ */
.modal-dialog {
    margin: 30px auto;
}

.modal-content {
    border: 1px solid var(--dash-border) !important;
    border-radius: var(--dash-radius, 14px) !important;
    box-shadow: var(--dash-shadow-lg, 0 10px 25px -5px rgba(0, 0, 0, 0.08)) !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 22px !important;
    border-bottom: 1px solid var(--dash-border-light, #f1f5f9) !important;
    background: #ffffff !important;
}

.modal-header .modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-header .modal-header-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.modal-header .modal-title {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--dash-text-main, #1e293b) !important;
    line-height: 1.3 !important;
}

.modal-header .modal-subtitle {
    font-size: 12px;
    color: var(--dash-text-muted, #64748b);
    display: block;
    margin-top: 1px;
}

.modal-header .modal-close-btn,
.modal-header .close {
    background: transparent !important;
    border: none !important;
    color: var(--dash-text-muted, #64748b) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    opacity: 0.7 !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
    margin: 0 !important;
    padding: 0 !important;
}

.modal-header .modal-close-btn:hover,
.modal-header .close:hover {
    opacity: 1 !important;
    background: var(--dash-bg-subtle, #f8fafc) !important;
    color: var(--dash-text-main, #1e293b) !important;
}

.modal-body {
    padding: 20px 24px !important;
    background: #ffffff !important;
}

.modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 14px 24px !important;
    border-top: 1px solid var(--dash-border-light, #f1f5f9) !important;
    background: var(--dash-bg-subtle, #f8fafc) !important;
}

.dash-form-group {
    margin-bottom: 16px;
}

.dash-form-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dash-text-main, #1e293b);
    margin-bottom: 6px;
}

.dash-form-control,
.modal-body .form-control {
    width: 100% !important;
    height: 38px !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    color: var(--dash-text-main, #1e293b) !important;
    background-color: #ffffff !important;
    border: 1px solid var(--dash-border, #e2e8f0) !important;
    border-radius: var(--dash-radius-sm, 8px) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

.dash-form-control:focus,
.modal-body .form-control:focus {
    border-color: var(--dash-primary, #2563eb) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.modal-body select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px 10px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 32px !important;
    cursor: pointer !important;
}

.dash-input-addon-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.dash-input-addon-group .dash-input-addon-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dash-text-muted, #64748b);
    background: var(--dash-bg-subtle, #f8fafc);
    border: 1px solid var(--dash-border, #e2e8f0);
    border-right: none;
    border-top-left-radius: var(--dash-radius-sm, 8px);
    border-bottom-left-radius: var(--dash-radius-sm, 8px);
}

.dash-input-addon-group .dash-input-addon-suffix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dash-text-muted, #64748b);
    background: var(--dash-bg-subtle, #f8fafc);
    border: 1px solid var(--dash-border, #e2e8f0);
    border-left: none;
    border-top-right-radius: var(--dash-radius-sm, 8px);
    border-bottom-right-radius: var(--dash-radius-sm, 8px);
}

.dash-input-addon-group .form-control {
    border-radius: 0 !important;
}

.dash-input-addon-group .dash-input-addon-prefix + .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.dash-input-addon-group .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.dash-input-addon-group .form-control:first-child {
    border-top-left-radius: var(--dash-radius-sm, 8px) !important;
    border-bottom-left-radius: var(--dash-radius-sm, 8px) !important;
}

.dash-input-addon-group .form-control:last-child {
    border-top-right-radius: var(--dash-radius-sm, 8px) !important;
    border-bottom-right-radius: var(--dash-radius-sm, 8px) !important;
}

.dash-custom-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.dash-custom-checkbox input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    border-radius: 4px;
    accent-color: var(--dash-primary, #2563eb);
    margin: 0;
}

.dash-custom-checkbox span {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-main, #1e293b);
}

.btn-modal-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--dash-radius-sm, 8px);
    border: 1px solid var(--dash-border, #e2e8f0);
    background: #ffffff;
    color: var(--dash-text-muted, #64748b);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-modal-cancel:hover {
    background: var(--dash-bg-subtle, #f8fafc);
    color: var(--dash-text-main, #1e293b);
    border-color: #cbd5e1;
}

.btn-modal-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--dash-radius-sm, 8px);
    border: 1px solid transparent;
    background: var(--dash-primary, #2563eb);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    transition: all 0.15s ease;
}

.btn-modal-submit:hover {
    background: var(--dash-primary-dark, #1d4ed8);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}

.btn-modal-submit.btn-success {
    background: var(--dash-success, #10b981) !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
}

.btn-modal-submit.btn-success:hover {
    background: #059669 !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35) !important;
}

/* ============================================================================
   DATATABLES 2.x SCROLL DUPLICATE HEADER & SORT ARROWS FIX
   ============================================================================ */
div.dt-scroll-body thead,
div.dt-scroll-body thead tr,
div.dt-scroll-body thead th,
div.dt-scroll-body thead td,
.dataTables_scrollBody thead,
.dataTables_scrollBody thead tr,
.dataTables_scrollBody thead th,
.dataTables_scrollBody thead td {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    line-height: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
}

div.dt-scroll-body thead *,
.dataTables_scrollBody thead * {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    opacity: 0 !important;
}

/* ============================================================================
   STUDENT TEST REVIEW MODAL (Teacher / Test Results Breakdown)
   ============================================================================ */

.score-cell-interactive {
    cursor: pointer;
    display: inline-block;
    transition: transform 0.15s ease;
}

.score-cell-interactive:hover {
    transform: translateY(-2px);
}

.score-badge-clickable {
    box-shadow: var(--dash-shadow-sm);
    transition: all 0.2s ease;
}

.score-badge-clickable:hover {
    box-shadow: var(--dash-shadow-md);
    filter: brightness(0.96);
}

.review-modal-dialog {
    max-width: 980px !important;
}

.review-modal-content {
    border-radius: var(--dash-radius);
    border: 1px solid var(--dash-border);
    box-shadow: var(--dash-shadow-lg);
    overflow: hidden;
    background: #ffffff;
}

.test-review-modal-header {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.review-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.review-avatar-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-indigo));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
    flex-shrink: 0;
}

.review-student-name {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.review-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.review-meta-item {
    font-size: 12.5px;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.review-meta-item i {
    color: #60a5fa;
}

.review-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.review-close-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: scale(1.05);
}

.test-review-modal-body {
    background: var(--dash-bg-subtle);
    padding: 24px;
    max-height: 75vh;
    overflow-y: auto;
}

/* Title Banner */
.review-title-banner {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    box-shadow: var(--dash-shadow-sm);
}

.review-title-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
}

.review-score-pill {
    font-size: 14px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--dash-radius-pill);
    display: inline-flex;
    align-items: center;
}

.score-pill-high {
    background: var(--dash-success-light);
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.score-pill-med {
    background: var(--dash-amber-light);
    color: #92400e;
    border: 1px solid var(--dash-amber-border);
}

.score-pill-low {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* KPI Summary Cards */
.review-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.review-kpi-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--dash-shadow-sm);
}

.review-kpi-card .kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.review-kpi-card.kpi-total .kpi-icon {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
}

.review-kpi-card.kpi-correct .kpi-icon {
    background: var(--dash-success-light);
    color: var(--dash-success);
}

.review-kpi-card.kpi-partial .kpi-icon {
    background: var(--dash-amber-light);
    color: var(--dash-amber);
}

.review-kpi-card.kpi-wrong .kpi-icon {
    background: #fee2e2;
    color: #dc2626;
}

.review-kpi-card .kpi-value {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--dash-text-main);
}

.review-kpi-card .kpi-label {
    font-size: 12px;
    color: var(--dash-text-muted);
    margin-top: 2px;
}

/* Filter Bar */
.review-filter-bar {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-muted);
}

.filter-buttons-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.review-filter-btn {
    border: 1px solid var(--dash-border);
    background: #ffffff;
    color: var(--dash-text-main);
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--dash-radius-pill);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
}

.review-filter-btn:hover {
    background: var(--dash-bg-subtle);
    border-color: #cbd5e1;
}

.review-filter-btn.active {
    background: var(--dash-primary);
    color: #ffffff;
    border-color: var(--dash-primary);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.review-filter-btn.btn-filter-wrong.active {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}

.review-filter-btn.btn-filter-partial.active {
    background: #d97706;
    border-color: #d97706;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25);
}

.review-filter-btn.btn-filter-correct.active {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

/* Question Cards */
.review-questions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-question-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
    position: relative;
    border-left: 4px solid var(--dash-border);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.review-question-card:hover {
    box-shadow: var(--dash-shadow-md);
}

.review-question-card.status-correct {
    border-left-color: var(--dash-success);
}

.review-question-card.status-partial {
    border-left-color: var(--dash-amber);
}

.review-question-card.status-wrong {
    border-left-color: #dc2626;
}

.review-card-head {
    padding: 12px 18px;
    background: #f8fafc;
    border-bottom: 1px solid var(--dash-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.card-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.question-num-pill {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dash-text-main);
    background: #ffffff;
    border: 1px solid var(--dash-border);
    padding: 3px 10px;
    border-radius: var(--dash-radius-pill);
}

.question-type-badge {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dash-text-muted);
    background: #e2e8f0;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.review-status-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--dash-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.review-status-badge.badge-success {
    background: var(--dash-success-light);
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.review-status-badge.badge-warning {
    background: var(--dash-amber-light);
    color: #92400e;
    border: 1px solid var(--dash-amber-border);
}

.review-status-badge.badge-danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.review-question-body {
    padding: 18px;
}

.question-content-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--dash-text-main);
    font-weight: 500;
    margin-bottom: 16px;
}

/* Option Rows (Single / Multi) */
.review-options-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.review-option-row {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    gap: 12px;
    font-size: 14px;
    transition: background 0.15s ease;
}

.review-option-row.opt-correct-chosen {
    background: #ecfdf5;
    border-color: #6ee7b7;
}

.review-option-row.opt-wrong-chosen {
    background: #fef2f2;
    border-color: #fca5a5;
}

.review-option-row.opt-correct-missed {
    background: #f0fdf4;
    border-color: #86efac;
    border-style: dashed;
}

.opt-indicator {
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.opt-icon.icon-success {
    color: #10b981;
}

.opt-icon.icon-danger {
    color: #ef4444;
}

.opt-icon.icon-missed {
    color: #059669;
}

.opt-icon.icon-neutral {
    color: #94a3b8;
}

.opt-text {
    flex: 1;
    color: var(--dash-text-main);
    word-break: break-word;
}

.opt-badge-note {
    margin-left: auto;
    flex-shrink: 0;
}

.badge-student-choice {
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-student-choice.success {
    background: #d1fae5;
    color: #065f46;
}

.badge-student-choice.danger {
    background: #fee2e2;
    color: #991b1b;
}

.badge-correct-target {
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* Matching Rows */
.review-matching-wrap {
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    overflow: hidden;
}

.matching-table-header {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    background: #f1f5f9;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--dash-text-muted);
    border-bottom: 1px solid var(--dash-border);
}

.matching-row {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    padding: 10px 14px;
    background: #ffffff;
    border-bottom: 1px solid var(--dash-border-light);
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
}

.matching-row:last-child {
    border-bottom: none;
}

.matching-row.pair-correct {
    background: #f0fdf4;
}

.matching-row.pair-wrong {
    background: #fff5f5;
}

.student-match-val {
    font-weight: 600;
}

.correct-match-val {
    font-weight: 600;
}

.badge-match-ok {
    font-size: 11.5px;
    font-weight: 600;
    color: #15803d;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Ordering Rows */
.review-ordering-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ordering-help-note {
    font-size: 12.5px;
    color: var(--dash-text-muted);
    margin-bottom: 4px;
}

.ordering-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ordering-item-row {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    gap: 14px;
    background: #ffffff;
}

.ordering-item-row.order-correct {
    background: #f0fdf4;
    border-color: #86efac;
}

.ordering-item-row.order-wrong {
    background: #fff5f5;
    border-color: #fca5a5;
}

.order-pos-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.order-pos-badge.pos-ok {
    background: #dcfce7;
    color: #166534;
}

.order-pos-badge.pos-wrong {
    background: #fee2e2;
    color: #991b1b;
}

.order-text {
    flex: 1;
    font-size: 14px;
    color: var(--dash-text-main);
}

.order-verdict {
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Text Answer Rows */
.review-textanswer-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.student-text-box {
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 12px 14px;
    background: #ffffff;
}

.student-text-box.box-correct {
    background: #f0fdf4;
    border-color: #86efac;
}

.student-text-box.box-wrong {
    background: #fff5f5;
    border-color: #fca5a5;
}

.student-text-box .box-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--dash-text-muted);
    margin-bottom: 4px;
}

.student-entered-text {
    font-size: 15px;
    font-weight: 700;
}

.accepted-text-box {
    border: 1px dashed #86efac;
    background: #f0fdf4;
    border-radius: var(--dash-radius-sm);
    padding: 12px 14px;
}

.accepted-text-box .box-label {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.accepted-variants-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.accepted-pill {
    background: #ffffff;
    border: 1px solid #86efac;
    color: #166534;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
}

/* Empty State in Review */
.review-empty-state {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 36px 24px;
    text-align: center;
    box-shadow: var(--dash-shadow-sm);
}

.review-empty-state .empty-icon {
    font-size: 36px;
    color: var(--dash-sky);
    margin-bottom: 12px;
}

.review-empty-state .empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin-bottom: 8px;
}

.review-empty-state .empty-desc {
    font-size: 13.5px;
    color: var(--dash-text-muted);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.5;
}

.test-review-modal-footer {
    background: #ffffff;
    border-top: 1px solid var(--dash-border);
    padding: 14px 24px;
}

/* ==========================================================================
   GRADE AUDIT LOGGING & HISTORY (Views/Grade/_GradeAuditHistoryPartial.cshtml)
   ========================================================================== */

/* Grade Modal Header & Segmented Tab Navigation */
.grade-modal-header {
    background: #ffffff;
    padding: 14px 20px;
    border-bottom: 1px solid var(--dash-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.grade-modal-nav-tabs {
    display: inline-flex;
    align-items: center;
    background: var(--dash-bg-subtle);
    padding: 3px;
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border);
    gap: 4px;
}

.grade-modal-tab-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--dash-text-muted);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.grade-modal-tab-btn:hover {
    color: var(--dash-text-main);
    background: rgba(0, 0, 0, 0.04);
}

.grade-modal-tab-btn.active {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.06);
    color: var(--dash-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.grade-modal-close-btn {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--dash-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.grade-modal-close-btn:hover {
    color: var(--dash-text-main);
    background: var(--dash-bg-subtle);
}

/* Audit Summary Banner */
.grade-audit-history-wrap {
    padding: 20px;
    background: var(--dash-bg-subtle);
    max-height: 65vh;
    overflow-y: auto;
}

.audit-student-summary {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    box-shadow: var(--dash-shadow-sm);
    flex-wrap: wrap;
    gap: 12px;
}

.audit-summary-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.audit-avatar-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.audit-student-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-main);
}

.audit-context-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--dash-text-muted);
    margin-top: 2px;
    flex-wrap: wrap;
}

.audit-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.audit-current-score-pill {
    background: var(--dash-primary-light);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: var(--dash-radius-pill);
    padding: 4px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.audit-current-score-pill .score-label {
    font-size: 11.5px;
    color: var(--dash-primary-dark);
    font-weight: 600;
}

.audit-current-score-pill .score-val {
    font-size: 13px;
    font-weight: 800;
    color: var(--dash-primary);
}

.audit-timeline-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Timeline Components */
.audit-timeline {
    position: relative;
    padding-left: 20px;
}

.audit-timeline::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 6px;
    width: 2px;
    background: var(--dash-border);
}

.timeline-item {
    position: relative;
    margin-bottom: 18px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -20px;
    top: 14px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--dash-primary);
    box-shadow: 0 0 0 2px #ffffff;
    z-index: 1;
}

.timeline-marker.marker-primary {
    border-color: var(--dash-primary);
}

.timeline-marker.marker-danger {
    border-color: #ef4444;
}

.timeline-marker.marker-indigo {
    border-color: var(--dash-indigo);
}

.timeline-content-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    overflow: hidden;
    box-shadow: var(--dash-shadow-sm);
    transition: all 0.2s ease;
}

.timeline-content-card:hover {
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.timeline-card-header {
    background: #ffffff;
    border-bottom: 1px solid var(--dash-border-light);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.card-author-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-author-info .author-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dash-text-main);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.role-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.role-badge.role-teacher {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
}

.role-badge.role-dean {
    background: var(--dash-amber-light);
    color: var(--dash-amber);
}

.role-badge.role-admin {
    background: #fef2f2;
    color: #dc2626;
}

.role-badge.role-system {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
}

.card-meta-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.audit-action-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--dash-radius-pill);
}

.audit-action-badge.badge-audit-created {
    background: var(--dash-success-light);
    color: var(--dash-success);
}

.audit-action-badge.badge-audit-updated {
    background: var(--dash-sky-light);
    color: var(--dash-sky);
}

.audit-action-badge.badge-audit-deleted {
    background: #fef2f2;
    color: #dc2626;
}

.audit-action-badge.badge-audit-synced {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
}

.audit-action-badge.badge-audit-appeal {
    background: var(--dash-amber-light);
    color: var(--dash-amber);
}

.audit-time {
    font-size: 12px;
    color: var(--dash-text-light);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.timeline-card-body {
    padding: 12px 14px;
}

.audit-changes-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.change-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    flex-wrap: wrap;
}

.change-label {
    font-weight: 600;
    color: var(--dash-text-muted);
    min-width: 90px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.change-values {
    display: flex;
    align-items: center;
    gap: 8px;
}

.val-old {
    color: var(--dash-text-muted);
    text-decoration: line-through;
    font-weight: 500;
}

.val-old.val-none {
    text-decoration: none;
    color: var(--dash-text-light);
}

.change-arrow {
    font-size: 11px;
    color: var(--dash-text-light);
}

.val-new {
    font-weight: 700;
    color: var(--dash-text-main);
    background: var(--dash-bg-subtle);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--dash-border);
}

.val-new.val-higher {
    background: var(--dash-success-light);
    color: var(--dash-success);
    border-color: rgba(16, 185, 129, 0.25);
}

.val-new.val-lower {
    background: #fff1f2;
    color: #e11d48;
    border-color: rgba(225, 29, 72, 0.25);
}

.val-new.val-deleted {
    background: #fef2f2;
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.25);
}

.change-comment-text {
    font-style: italic;
    color: var(--dash-text-main);
    background: var(--dash-bg-subtle);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12.5px;
    border-left: 3px solid var(--dash-primary);
}

.audit-reason-box {
    margin-top: 10px;
    padding: 6px 10px;
    background: var(--dash-amber-light);
    border: 1px solid var(--dash-amber-border);
    border-radius: 6px;
    font-size: 12px;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 6px;
}

.audit-empty-state {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 30px 20px;
    text-align: center;
}

.audit-empty-state .empty-icon {
    font-size: 32px;
    color: var(--dash-text-light);
    margin-bottom: 8px;
}

.audit-empty-state .empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin-bottom: 4px;
}

.audit-empty-state .empty-desc {
    font-size: 13px;
    color: var(--dash-text-muted);
    max-width: 380px;
    margin: 0 auto;
}

/* ==========================================================================
   GRADE AUDIT LOG DASHBOARD (Views/Grade/AuditLog.cshtml)
   ========================================================================== */

.audit-dashboard-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 30px;
}

.audit-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    border-radius: var(--dash-radius);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: var(--dash-shadow-lg);
    position: relative;
    overflow: hidden;
}

.audit-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0) 70%);
    pointer-events: none;
}

.audit-avatar-badge {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    flex-shrink: 0;
}

/* KPI Cards Grid */
.audit-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.audit-kpi-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 18px 20px;
    box-shadow: var(--dash-shadow-sm);
    transition: all 0.2s ease;
}

.audit-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-md);
    border-color: #cbd5e1;
}

.kpi-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.kpi-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: var(--dash-shadow-sm);
}

.bg-blue-gradient {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.bg-amber-gradient {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.bg-indigo-gradient {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
}

.bg-emerald-gradient {
    background: linear-gradient(135deg, #059669, #10b981);
}

.kpi-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.kpi-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.kpi-val-row {
    margin: 4px 0 2px;
}

.kpi-number {
    font-size: 26px;
    font-weight: 800;
    color: var(--dash-text-main);
    line-height: 1.1;
}

.kpi-subtext {
    font-size: 11.5px;
    color: var(--dash-text-light);
}

.status-pulse-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--dash-amber-light);
    color: var(--dash-amber);
    border: 1px solid var(--dash-amber-border);
    padding: 1px 7px;
    border-radius: var(--dash-radius-pill);
    font-size: 10.5px;
    font-weight: 700;
}

.status-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    animation: pulseDotAnim 1.8s infinite;
}

@keyframes pulseDotAnim {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

/* Filter Card */
.audit-filter-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 18px 22px;
    box-shadow: var(--dash-shadow-sm);
}

.filter-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--dash-border-light);
}

.filter-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-title i {
    color: var(--dash-primary);
}

.btn-filter-reset {
    font-size: 12px;
    color: var(--dash-text-muted);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--dash-radius-pill);
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    transition: all 0.15s ease;
}

.btn-filter-reset:hover {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
    text-decoration: none;
}

.filter-controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    align-items: flex-end;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-item-search {
    grid-column: span 2;
}

@media (max-width: 991px) {
    .filter-item-search {
        grid-column: span 1;
    }
}

.filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-text-muted);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.filter-label i {
    color: var(--dash-text-light);
    font-size: 11px;
}

.search-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-input-group .form-control {
    flex: 1;
}

.btn-filter-submit {
    background: var(--dash-primary);
    color: #ffffff;
    border: none;
    padding: 7px 16px;
    border-radius: var(--dash-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.btn-filter-submit:hover {
    background: var(--dash-primary-dark);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* Audit Table Card */
.audit-table-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
}

.audit-table-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--dash-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.table-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.table-header-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.table-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin: 0;
}

.table-subtitle {
    font-size: 12.5px;
    color: var(--dash-text-muted);
}

.badge-total-count {
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    color: var(--dash-text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--dash-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.audit-table-responsive {
    margin-bottom: 0;
}

.audit-table {
    margin-bottom: 0;
    font-size: 13px;
}

.audit-table thead th {
    background: var(--dash-bg-subtle);
    color: var(--dash-text-muted);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-top: none;
    border-bottom: 1px solid var(--dash-border);
    padding: 12px 16px;
    vertical-align: middle;
}

.audit-table tbody tr {
    transition: background 0.15s ease;
}

.audit-table tbody tr:hover {
    background: #f8fafc;
}

.audit-table tbody td {
    padding: 12px 16px;
    border-top: 1px solid var(--dash-border-light);
}

/* Specific Cell Layouts */
.audit-datetime-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.datetime-date {
    font-weight: 700;
    color: var(--dash-text-main);
    font-size: 13px;
}

.datetime-time {
    font-size: 11.5px;
    color: var(--dash-text-light);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.audit-student-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-avatar-sm {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #6366f1);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.student-info-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.student-name {
    font-weight: 700;
    color: var(--dash-text-main);
    font-size: 13px;
}

.student-group-pill, .group-pill {
    font-size: 11px;
    font-weight: 600;
    color: var(--dash-text-muted);
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    padding: 1px 7px;
    border-radius: var(--dash-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
}

.audit-col-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.col-class-name {
    font-weight: 700;
    color: var(--dash-text-main);
    font-size: 13px;
}

.col-title-badge {
    font-size: 11.5px;
    color: var(--dash-primary);
    background: var(--dash-primary-light);
    border-radius: 4px;
    padding: 2px 7px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    font-weight: 500;
}

.max-score-sub {
    color: var(--dash-text-light);
    font-size: 10.5px;
}

/* Delta Value Box */
.audit-delta-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.delta-score-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.delta-old-val {
    color: var(--dash-text-muted);
    text-decoration: line-through;
    font-weight: 500;
}

.delta-arrow {
    font-size: 11px;
    color: var(--dash-text-light);
}

.delta-new-val {
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    color: var(--dash-text-main);
}

.delta-new-val.delta-up {
    background: var(--dash-success-light);
    color: var(--dash-success);
    border-color: rgba(16, 185, 129, 0.25);
}

.delta-new-val.delta-down {
    background: #fff1f2;
    color: #e11d48;
    border-color: rgba(225, 29, 72, 0.25);
}

.delta-new-val.delta-cleared {
    background: #fef2f2;
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.25);
}

.delta-note-row {
    font-size: 11px;
    color: var(--dash-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.note-old {
    text-decoration: line-through;
    color: var(--dash-text-light);
}

.note-new {
    font-weight: 600;
    color: var(--dash-text-main);
}

/* Author Box */
.audit-author-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.author-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.author-name {
    font-weight: 700;
    color: var(--dash-text-main);
    font-size: 12.5px;
}

.author-email {
    font-size: 11px;
    color: var(--dash-text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
}

.author-ip {
    font-size: 10.5px;
    color: var(--dash-text-light);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Reason & Comment */
.audit-reason-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reason-pill {
    font-size: 11.5px;
    color: #92400e;
    background: var(--dash-amber-light);
    border: 1px solid var(--dash-amber-border);
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.3;
}

.comment-pill {
    font-size: 11px;
    color: var(--dash-text-main);
    background: var(--dash-bg-subtle);
    border-left: 2px solid var(--dash-primary);
    padding: 2px 6px;
    border-radius: 0 4px 4px 0;
    font-style: italic;
}

/* Action button */
.btn-cell-history {
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    color: var(--dash-primary);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13px;
}

.btn-cell-history:hover {
    background: var(--dash-primary);
    color: #ffffff;
    border-color: var(--dash-primary);
    transform: scale(1.05);
}

/* Empty State Card */
.audit-table-empty {
    padding: 50px 20px;
    text-align: center;
}

.empty-icon-wrap {
    font-size: 40px;
    color: var(--dash-text-light);
    margin-bottom: 12px;
}

.audit-table-empty h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin-bottom: 6px;
}

.audit-table-empty p {
    font-size: 13px;
    color: var(--dash-text-muted);
    max-width: 400px;
    margin: 0 auto 16px;
}

/* Pagination */
.audit-pagination-wrapper {
    padding: 16px 22px;
    border-top: 1px solid var(--dash-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.pagination-info {
    font-size: 12.5px;
    color: var(--dash-text-muted);
}

.audit-pagination-wrapper .pagination .page-item .page-link {
    color: var(--dash-text-main);
    border-color: var(--dash-border);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    margin: 0 2px;
}

.audit-pagination-wrapper .pagination .page-item.active .page-link {
    background-color: var(--dash-primary);
    border-color: var(--dash-primary);
    color: #ffffff;
}

.audit-pagination-wrapper .pagination .page-item.disabled .page-link {
    color: var(--dash-text-light);
    border-color: var(--dash-border-light);
    background-color: var(--dash-bg-subtle);
}

/* Modal styles for Audit Popup */
.audit-modal-content {
    border-radius: var(--dash-radius);
    border: 1px solid var(--dash-border);
    box-shadow: var(--dash-shadow-lg);
    overflow: hidden;
}

.audit-modal-header {
    background: #0f172a;
    color: #ffffff;
    border-bottom: 1px solid #334155;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.audit-modal-header .modal-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.audit-modal-header .modal-subtitle {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
    display: block;
}

.audit-modal-header .close {
    color: #ffffff;
    text-shadow: none;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.audit-modal-header .close:hover {
    opacity: 1;
}

.audit-modal-body {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--dash-bg-card);
}

.audit-modal-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 12px;
    color: var(--dash-text-muted);
    font-size: 13px;
}

.audit-modal-footer {
    padding: 12px 20px;
    background: var(--dash-bg-subtle);
    border-top: 1px solid var(--dash-border);
}

/* DataTables Toolbars & Controls Styling */
.audit-dt-top-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding: 0 4px;
}

.audit-dt-bottom-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 4px 4px;
    border-top: 1px solid var(--dash-border-light);
}

.audit-dt-length label,
.audit-dt-filter label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text-muted);
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.audit-dt-length select {
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 4px 10px;
    font-size: 13px;
    background-color: var(--dash-bg-card);
    color: var(--dash-text-main);
    outline: none;
    transition: border-color 0.15s ease;
}

.audit-dt-length select:focus {
    border-color: var(--dash-primary);
}

.audit-dt-filter input {
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 6px 12px;
    font-size: 13px;
    background-color: var(--dash-bg-card);
    color: var(--dash-text-main);
    outline: none;
    min-width: 220px;
    transition: all 0.15s ease;
}

.audit-dt-filter input:focus {
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.audit-dt-bottom-toolbar .dataTables_info,
.admin-dt-info {
    font-size: 12.5px;
    color: var(--dash-text-muted);
    padding-top: 0 !important;
}

.audit-dt-bottom-toolbar .dataTables_paginate,
.admin-dt-pagination {
    padding-top: 0 !important;
}

.audit-dt-bottom-toolbar .dataTables_paginate .paginate_button,
.admin-dt-pagination .paginate_button {
    border-radius: 6px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 5px 11px !important;
    margin: 0 2px !important;
    border: 1px solid var(--dash-border) !important;
    background: #ffffff !important;
    color: var(--dash-text-main) !important;
    transition: all 0.15s ease !important;
}

.audit-dt-bottom-toolbar .dataTables_paginate .paginate_button:hover,
.admin-dt-pagination .paginate_button:hover {
    background: var(--dash-primary-light) !important;
    color: var(--dash-primary) !important;
    border-color: var(--dash-primary) !important;
}

.audit-dt-bottom-toolbar .dataTables_paginate .paginate_button.current,
.admin-dt-pagination .paginate_button.current {
    background: var(--dash-primary) !important;
    color: #ffffff !important;
    border-color: var(--dash-primary) !important;
}

.audit-dt-bottom-toolbar .dataTables_paginate .paginate_button.disabled,
.admin-dt-pagination .paginate_button.disabled {
    color: var(--dash-text-light) !important;
    border-color: var(--dash-border-light) !important;
    background: var(--dash-bg-subtle) !important;
    opacity: 0.6;
}

/* =============================================================================
   COURSE MODULES, WORKLOAD HOURS & CURRICULUM RNP STRUCTURE TABLE
   ============================================================================= */

/* Course Add Modal: Workload Grid */
.course-workload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
    background: var(--dash-bg-subtle);
    padding: 12px 14px;
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border);
}

.course-workload-grid .course-field-group {
    margin-bottom: 0;
}

/* Modules Top Action Bar */
.modules-management-wrapper {
    width: 100%;
}

.modules-top-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--dash-border-light);
}

.modules-top-stats {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    font-size: 12.5px;
    color: var(--dash-text-main);
}

.modules-top-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Module Block Cards */
.modules-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.module-block-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.module-block-card:hover {
    border-color: #cbd5e1;
    box-shadow: var(--dash-shadow-md);
}

.module-block-card.unassigned-block {
    border-style: dashed;
    background: #fafafa;
}

.module-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(180deg, #ffffff 0%, var(--dash-bg-subtle) 100%);
    border-bottom: 1px solid var(--dash-border);
}

.module-block-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 260px;
}

.module-order-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-indigo));
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.module-block-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-text-main);
}

.module-block-desc {
    margin: 2px 0 0 0;
    font-size: 12.5px;
    color: var(--dash-text-muted);
}

.module-block-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.module-hours-pills {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hours-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--dash-radius-pill);
    font-size: 11.5px;
    font-weight: 500;
}

.hours-chip.ft-chip {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.hours-chip.pt-chip {
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

.module-actions-btn-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.module-lessons-container {
    padding: 14px 16px;
}

.module-empty-lessons {
    padding: 18px;
    text-align: center;
    color: var(--dash-text-muted);
    font-size: 13px;
    background: var(--dash-bg-subtle);
    border-radius: var(--dash-radius-sm);
    border: 1px dashed var(--dash-border);
}

/* Lesson Items within Modules */
.lesson-card {
    margin-bottom: 8px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lesson-card:hover {
    border-color: #cbd5e1;
    box-shadow: var(--dash-shadow-sm);
}

.lesson-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 12px;
    background: #ffffff;
    transition: background 0.15s ease;
}

.lesson-card-header:hover {
    background: #f8fafc;
}

.lesson-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    user-select: none;
}

.lesson-num-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    font-size: 12px;
    font-weight: 700;
    padding: 0 6px;
    flex-shrink: 0;
}

.lesson-title-text {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dash-text-main);
    line-height: 1.4;
    word-break: break-word;
}

.lesson-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.lesson-hours-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.lesson-hour-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.lesson-hour-tag.ft-tag {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fef08a;
}

.lesson-hour-tag.pt-tag {
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

.lesson-actions-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--dash-border);
    background: #ffffff;
    color: var(--dash-text-muted);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
    padding: 0;
}

.btn-icon-action:hover {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    border-color: #bfdbfe;
}

.btn-icon-action.text-danger {
    color: #ef4444;
}

.btn-icon-action.text-danger:hover {
    background: #fef2f2;
    color: #dc2626 !important;
    border-color: #fecaca;
}

.lesson-toggle-chevron-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--dash-text-muted);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    padding: 0;
}

.lesson-toggle-chevron-btn:hover {
    background: #f1f5f9;
    color: var(--dash-text-main);
}

.lesson-chevron-icon {
    transition: transform 0.2s ease;
    display: inline-block;
}

.lesson-chevron-icon.rotated,
.lesson-header-left:not(.collapsed) ~ .lesson-header-right .lesson-chevron-icon,
.lesson-toggle-chevron-btn:not(.collapsed) .lesson-chevron-icon {
    transform: rotate(180deg);
}

.lesson-card-body {
    padding: 16px 18px;
    border-top: 1px solid var(--dash-border-light);
    background: #ffffff;
}

.lesson-content-text {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--dash-text-main);
}

/* Hours Modal Inputs Grid */
.hours-input-grid-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.hours-form-card {
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 12px 14px;
}

.hours-form-card.ft-card {
    border-left: 3px solid var(--dash-amber);
}

.hours-form-card.pt-card {
    border-left: 3px solid var(--dash-indigo);
}

.hours-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.hours-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.hours-badge.ft-badge {
    background: #fef3c7;
    color: #92400e;
}

.hours-badge.pt-badge {
    background: #e0e7ff;
    color: #3730a3;
}

.hours-calc-total {
    font-size: 12.5px;
    color: var(--dash-text-main);
}

.hours-inputs-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.hours-input-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hours-input-item label {
    font-size: 11px;
    font-weight: 700;
    color: var(--dash-text-muted);
    margin-bottom: 3px;
    text-transform: uppercase;
}

.hours-input-item input {
    width: 100%;
    text-align: center;
    padding: 4px 2px;
    font-size: 13px;
    font-weight: 600;
    height: 32px;
    border-radius: 4px;
}

/* =============================================================================
   CURRICULUM STRUCTURE (РНП) TABLE
   ============================================================================= */

.curriculum-table-wrapper {
    width: 100%;
}

.curriculum-summary-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--dash-bg-subtle);
    padding: 12px 16px;
    border-radius: var(--dash-radius-sm);
    border: 1px solid var(--dash-border);
    margin-bottom: 16px;
}

.curriculum-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.curriculum-stat-label {
    color: var(--dash-text-muted);
}

.curriculum-stat-val {
    font-weight: 700;
    color: var(--dash-text-main);
}

.badge-ects {
    background: #eff6ff;
    color: #1d4ed8;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #bfdbfe;
    font-size: 12px;
}

.badge-control-form {
    background: #ecfdf5;
    color: #047857;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #a7f3d0;
    font-size: 12px;
}

.curriculum-empty-state {
    padding: 36px 20px;
    text-align: center;
    color: var(--dash-text-muted);
    background: var(--dash-bg-subtle);
    border-radius: var(--dash-radius-sm);
    border: 1px dashed var(--dash-border);
}

.curriculum-empty-state i {
    font-size: 32px;
    color: var(--dash-text-light);
    margin-bottom: 8px;
    display: block;
}

.curriculum-empty-state h5 {
    font-weight: 700;
    color: var(--dash-text-main);
    margin-bottom: 4px;
}

/* Exact RNP Table Styles matching official document */
.curriculum-rnp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #ffffff;
    border: 2px solid #0f172a;
}

.curriculum-rnp-table th,
.curriculum-rnp-table td {
    border: 1px solid #334155;
    padding: 6px 8px;
    vertical-align: middle;
}

.curriculum-rnp-table thead th {
    text-align: center;
    font-weight: 700;
    background: #f8fafc;
    color: #0f172a;
}

.curriculum-rnp-table thead .col-topic-title {
    width: 40%;
    min-width: 240px;
    text-align: left;
    padding-left: 12px;
}

.curriculum-rnp-table thead .col-hours-header {
    background: #f1f5f9;
    font-size: 13.5px;
    letter-spacing: 0.3px;
}

.curriculum-rnp-table thead .col-form-ft {
    background: #fef3c7;
    color: #92400e;
}

.curriculum-rnp-table thead .col-form-pt {
    background: #eef2ff;
    color: #3730a3;
}

.curriculum-rnp-table thead .col-sub {
    font-size: 11.5px;
    font-weight: 600;
    width: 4.5%;
    text-transform: lowercase;
}

.curriculum-rnp-table thead .col-sub-total {
    font-size: 11.5px;
    font-weight: 700;
    width: 6%;
    background: #f8fafc;
}

/* Module Section Header in Table */
.curriculum-rnp-table .module-section-row td {
    background: #e2e8f0;
    padding: 8px 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #0f172a;
}

.module-title-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

/* Topic Rows in Table */
.curriculum-rnp-table .topic-data-row:hover {
    background: #f8fafc;
}

.curriculum-rnp-table .topic-name-cell {
    padding-left: 16px;
    color: var(--dash-text-main);
    line-height: 1.4;
}

.topic-num-tag {
    font-weight: 700;
    color: var(--dash-primary-dark);
    margin-right: 4px;
}

.curriculum-rnp-table .hours-val {
    text-align: center;
    font-size: 13px;
    color: #1e293b;
}

.curriculum-rnp-table .hours-total {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.02);
}

/* Module Subtotal Row */
.curriculum-rnp-table .module-subtotal-row td {
    background: #f1f5f9;
    font-weight: 700;
    border-top: 1.5px solid #0f172a;
    border-bottom: 1.5px solid #0f172a;
}

.curriculum-rnp-table .subtotal-label-cell {
    padding-left: 12px;
    font-weight: 700;
    color: #0f172a;
}

/* Grand Total Row */
.curriculum-rnp-table .grand-total-row td {
    background: #0f172a;
    color: #ffffff;
    font-weight: 800;
    font-size: 13.5px;
    padding: 10px 8px;
    border: 1px solid #0f172a;
}

.curriculum-rnp-table .grand-total-row .hours-val {
    color: #ffffff;
}

.curriculum-rnp-table .grand-total-label-cell {
    padding-left: 12px;
    letter-spacing: 0.4px;
}

/* ==========================================================================
   STUDENT PRE-TEST SPLASH SCREEN & ACADEMIC INTEGRITY (BeginTest.cshtml)
   ========================================================================== */

.test-splash-card {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-md);
    overflow: hidden;
    margin-bottom: 30px;
    animation: splashFadeIn 0.3s ease-out;
}

@keyframes splashFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.test-splash-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    padding: 28px 32px;
    color: #ffffff;
    position: relative;
    border-bottom: 3px solid var(--dash-amber);
}

.test-splash-hero-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.test-splash-avatar-badge {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #ffffff;
}

.test-splash-hero-text h2 {
    margin: 0 0 6px 0;
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.test-splash-hero-text p {
    margin: 0;
    font-size: 13.5px;
    color: #94a3b8;
    line-height: 1.4;
}

.test-splash-body {
    padding: 28px 32px;
}

/* Course & Test Info Banner */
.test-splash-course-banner {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1.5px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 16px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.2s ease;
}

.test-splash-course-banner:hover {
    border-color: #cbd5e1;
    box-shadow: var(--dash-shadow-sm);
}

.test-splash-course-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-top: 2px;
}

.test-splash-course-details {
    flex: 1;
    min-width: 0;
}

.test-splash-course-label {
    font-size: 11.5px;
    color: var(--dash-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.test-splash-course-title {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--dash-text-main);
    line-height: 1.4;
    word-break: break-word;
    margin-bottom: 6px;
}

.test-splash-topic-subtitle {
    font-size: 13px;
    color: var(--dash-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.test-splash-topic-subtitle b {
    color: var(--dash-text-main);
}

/* Parameters KPI Grid */
.test-splash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.test-splash-kpi-item {
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.test-splash-kpi-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.test-splash-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.test-splash-kpi-icon.icon-blue {
    background: var(--dash-primary-light);
    color: var(--dash-primary);
}

.test-splash-kpi-icon.icon-amber {
    background: var(--dash-amber-light);
    color: var(--dash-amber);
}

.test-splash-kpi-icon.icon-emerald {
    background: var(--dash-success-light);
    color: var(--dash-success);
}

.test-splash-kpi-icon.icon-purple {
    background: var(--dash-indigo-light);
    color: var(--dash-indigo);
}

.test-splash-kpi-icon.icon-sky {
    background: var(--dash-sky-light);
    color: var(--dash-sky);
}

.test-splash-kpi-meta {
    display: flex;
    flex-direction: column;
}

.test-splash-kpi-label {
    font-size: 11px;
    color: var(--dash-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.test-splash-kpi-val {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--dash-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Academic Integrity Declaration Box */
.integrity-declaration-box {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1.5px solid #fde68a;
    border-radius: var(--dash-radius-sm);
    padding: 20px 22px;
    margin-bottom: 24px;
    position: relative;
}

.integrity-declaration-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: #92400e;
    font-weight: 800;
    font-size: 15px;
}

.integrity-declaration-header i {
    font-size: 18px;
    color: #d97706;
}

.integrity-rules-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.integrity-rule-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: #78350f;
    line-height: 1.45;
}

.integrity-rule-item i {
    color: #d97706;
    margin-top: 3px;
    font-size: 13px;
    flex-shrink: 0;
}

.integrity-rule-item b {
    color: #451a03;
}

/* Agreement Checkbox Section */
.integrity-agreement-container {
    background: #f8fafc;
    border: 1.5px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 16px 20px;
    margin-bottom: 26px;
    transition: all 0.2s ease;
}

.integrity-agreement-container:hover,
.integrity-agreement-container.is-checked {
    background: #eff6ff;
    border-color: #93c5fd;
}

.integrity-custom-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.integrity-custom-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--dash-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.integrity-checkbox-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dash-text-main);
    line-height: 1.45;
}

/* CTA Buttons */
.test-splash-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    border-top: 1px solid var(--dash-border);
    padding-top: 22px;
}

.test-start-cta-btn {
    padding: 13px 32px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--dash-radius-pill);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.test-start-cta-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    filter: grayscale(40%);
}

.test-start-cta-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

.test-cancel-back-btn {
    padding: 11px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dash-text-muted);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-pill);
    background: #ffffff;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.test-cancel-back-btn:hover {
    color: var(--dash-text-main);
    background: #f1f5f9;
    border-color: #cbd5e1;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Grading Criteria & ECTS Scale Box (BeginTest.cshtml)
   -------------------------------------------------------------------------- */
.test-criteria-box {
    background: #f8fafc;
    border: 1.5px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 20px 22px;
    margin-bottom: 24px;
}

.test-criteria-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--dash-text-main);
    font-weight: 800;
    font-size: 15px;
}

.test-criteria-header i {
    font-size: 17px;
    color: var(--dash-primary);
}

.test-criteria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.test-criteria-item {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--dash-text-muted);
    line-height: 1.4;
}

.test-criteria-item i {
    color: var(--dash-primary);
    margin-top: 2px;
    font-size: 14px;
    flex-shrink: 0;
}

.test-criteria-item b {
    color: var(--dash-text-main);
}

/* ECTS Scale Strip */
.ects-scale-strip {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: 8px;
    padding: 12px 14px;
}

.ects-scale-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--dash-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ects-pills-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ects-grade-pill {
    padding: 5px 12px;
    border-radius: var(--dash-radius-pill);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ects-grade-pill.grade-a {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.ects-grade-pill.grade-b-c {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.ects-grade-pill.grade-d-e {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.ects-grade-pill.grade-f {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* --------------------------------------------------------------------------
   Focus Tracking Warning Toast (BeginTest.cshtml)
   -------------------------------------------------------------------------- */
.focus-warning-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    max-width: 540px;
    width: 90%;
    background: #78350f;
    color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(245, 158, 11, 0.4);
    padding: 14px 18px;
    animation: toastSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toastSlideDown {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.focus-warning-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.focus-warning-content i {
    font-size: 20px;
    color: #fbbf24;
    margin-top: 1px;
    flex-shrink: 0;
    animation: focusWarnPulse 1.2s infinite;
}

@keyframes focusWarnPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.focus-warning-content strong {
    font-size: 13.5px;
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}

.focus-warning-content p {
    margin: 0;
    font-size: 12.5px;
    color: #fef3c7;
    line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Teacher Review Modal Focus Integrity Badge
   -------------------------------------------------------------------------- */
.review-meta-item.review-focus-badge {
    border-radius: var(--dash-radius-pill);
    padding: 3px 10px;
    font-weight: 700;
    font-size: 11.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.review-focus-badge.focus-clean {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.review-focus-badge.focus-warn {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.review-focus-badge.focus-danger {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

/* ==========================================================================
   ELECTRONIC TEST APPEALS STYLES (НАЗЯВО Критерій 5.4)
   ========================================================================== */

/* --- Student Card Appeal Badges & Actions --- */
.btn-card-action.btn-card-appeal {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--dash-radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-card-action.btn-card-appeal:hover {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.15);
}

.test-appeal-indicator-box {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--dash-border);
}

.appeal-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--dash-radius-pill);
    line-height: 1.3;
}

.badge-appeal-pending {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.badge-appeal-approved {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.badge-appeal-rejected {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.badge-appeal-retest {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* --- Student & Teacher Appeal Modal Dialogs --- */
.appeal-modal-content {
    border-radius: var(--dash-radius);
    border: none;
    box-shadow: var(--dash-shadow-lg);
    overflow: hidden;
}

.appeal-modal-header {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #ffffff;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
}

.appeal-modal-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.appeal-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.appeal-header-title {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 2px 0;
    color: #ffffff;
}

.appeal-header-subtitle {
    font-size: 12px;
    color: #94a3b8;
}

.appeal-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.appeal-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.appeal-modal-body {
    padding: 24px;
    background: #ffffff;
}

.appeal-test-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    gap: 14px;
}

.appeal-banner-discipline {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--dash-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.appeal-banner-testname {
    font-size: 16px;
    font-weight: 800;
    color: var(--dash-text-main);
    margin: 0;
}

.appeal-banner-score-wrap {
    text-align: right;
    flex-shrink: 0;
}

.appeal-banner-score-label {
    font-size: 11px;
    color: var(--dash-text-muted);
    display: block;
}

.appeal-banner-score-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--dash-amber);
}

.appeal-form-group {
    margin-bottom: 18px;
}

.appeal-form-label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.appeal-select-control,
.appeal-textarea-control,
.appeal-input-control {
    border-radius: 8px;
    border: 1px solid var(--dash-border);
    font-size: 13.5px;
    color: var(--dash-text-main);
    transition: all 0.2s ease;
}

.appeal-select-control:focus,
.appeal-textarea-control:focus,
.appeal-input-control:focus {
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.appeal-char-counter {
    text-align: right;
    font-size: 11.5px;
    color: var(--dash-text-light);
    margin-top: 4px;
}

.appeal-modal-footer {
    background: #f8fafc;
    border-top: 1px solid var(--dash-border-light);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* --- Teacher Appeals Workspace Styles --- */
.teacher-appeals-modal-dialog {
    max-width: 1180px;
    margin: 1.25rem auto;
    max-height: calc(100vh - 2.5rem);
    display: flex;
    align-items: center;
}

.teacher-appeals-modal-content {
    border-radius: var(--dash-radius);
    border: none;
    box-shadow: var(--dash-shadow-lg);
    overflow: hidden;
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #f8fafc;
}

.teacher-appeals-wrapper {
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: var(--dash-radius);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

.teacher-appeals-header-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--dash-shadow-sm);
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0;
}

.appeals-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.appeals-header-title {
    font-size: 17.5px;
    font-weight: 800;
    color: var(--dash-text-main);
    margin: 0 0 2px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.appeals-header-subtitle {
    font-size: 11.5px;
    color: var(--dash-text-muted);
}

.appeals-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.appeal-kpi-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--dash-shadow-sm);
    transition: transform 0.2s ease;
}

.appeal-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dash-shadow-md);
}

.appeal-kpi-card .kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f1f5f9;
    color: var(--dash-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.appeal-kpi-card .kpi-num {
    font-size: 19px;
    font-weight: 800;
    color: var(--dash-text-main);
    line-height: 1.1;
}

.appeal-kpi-card .kpi-txt {
    font-size: 11px;
    color: var(--dash-text-muted);
    margin-top: 1px;
}

.appeals-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.appeals-search-box {
    position: relative;
    min-width: 240px;
}

.appeals-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dash-text-light);
    font-size: 13px;
}

.appeals-search-box input {
    padding-left: 32px;
    font-size: 12.5px;
    height: 34px;
}

/* Card Deck Navigation Bar */
.appeals-deck-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 7px 14px;
    margin-bottom: 10px;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.deck-nav-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-text-main);
}

.deck-nav-pills {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.deck-pill-btn {
    border: 1px solid var(--dash-border);
    background: #f8fafc;
    color: var(--dash-text-muted);
    padding: 3px 8px;
    border-radius: var(--dash-radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.deck-pill-btn:hover {
    background: #e2e8f0;
    color: var(--dash-text-main);
}

.deck-pill-btn.active {
    background: var(--dash-primary);
    border-color: var(--dash-primary);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.deck-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.deck-nav-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Appeals Feed Container & Deck Mode */
.appeals-feed-list {
    position: relative;
    width: 100%;
}

/* Deck Mode (Single card active) */
.appeals-feed-list.mode-deck .appeal-item-card {
    display: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.appeals-feed-list.mode-deck .appeal-item-card.is-active-deck-card {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateY(0);
}

/* List Mode (All cards vertically scrollable) */
.appeals-feed-list.mode-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: calc(100vh - 300px);
    padding-right: 6px;
    padding-bottom: 10px;
}

.appeal-item-card {
    background: #ffffff;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-sm);
    overflow: hidden;
    transition: all 0.2s ease;
}

.appeal-item-card:hover {
    border-color: #cbd5e1;
    box-shadow: var(--dash-shadow-md);
}

.appeal-item-header {
    background: #ffffff;
    padding: 12px 18px;
    border-bottom: 1px solid var(--dash-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.appeal-student-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.appeal-avatar-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.appeal-student-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--dash-text-main);
    margin: 0 0 2px 0;
}

.appeal-meta-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.appeal-meta-pills .meta-pill {
    font-size: 11px;
    color: var(--dash-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.appeal-item-body {
    padding: 14px 18px;
}

.appeal-tags-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.appeal-reason-pill {
    font-size: 11.5px;
    font-weight: 700;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    padding: 3px 9px;
    border-radius: var(--dash-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.appeal-testname-pill {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dash-indigo);
    background: var(--dash-indigo-light);
    padding: 3px 9px;
    border-radius: var(--dash-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.appeal-score-pill {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--dash-text-main);
    background: #f1f5f9;
    padding: 3px 9px;
    border-radius: var(--dash-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.appeal-focus-pill {
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--dash-radius-pill);
    padding: 3px 9px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.appeal-comment-block {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
}

.comment-block-header {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--dash-text-muted);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.comment-block-text {
    font-size: 13px;
    color: var(--dash-text-main);
    line-height: 1.45;
    max-height: 100px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.comment-block-text::-webkit-scrollbar {
    width: 5px;
}
.comment-block-text::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.appeal-resolution-block {
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 8px;
}

.appeal-resolution-block.resolution-approved {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.appeal-resolution-block.resolution-rejected {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.appeal-resolution-block.resolution-retest {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.resolution-header {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.resolution-date {
    font-weight: normal;
    color: var(--dash-text-muted);
    font-size: 11px;
}

.resolution-text {
    font-size: 12.5px;
    color: var(--dash-text-main);
    line-height: 1.4;
    max-height: 80px;
    overflow-y: auto;
}

.resolution-text::-webkit-scrollbar {
    width: 5px;
}
.resolution-text::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.appeal-item-footer {
    background: #f8fafc;
    border-top: 1px solid var(--dash-border-light);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}


.appeal-resolve-meta-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
}

.meta-banner-item .meta-label {
    font-size: 11px;
    color: var(--dash-text-muted);
    display: block;
}

.meta-banner-item .meta-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-text-main);
}

.appeal-modal-content {
    border-radius: var(--dash-radius);
    border: none;
    box-shadow: var(--dash-shadow-lg);
    overflow: hidden;
}

.appeal-modal-header {
    background: #ffffff;
    border-bottom: 1px solid var(--dash-border-light);
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.appeal-modal-body {
    max-height: calc(85vh - 120px);
    overflow-y: auto;
    padding: 20px 24px;
}

.appeal-modal-body::-webkit-scrollbar {
    width: 6px;
}

.appeal-modal-body::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 8px;
}

.appeal-modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
}

.appeal-modal-footer {
    background: #f8fafc;
    border-top: 1px solid var(--dash-border-light);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}


/* ============================================================================
   14. STUDENT TEST TIMEOUT / STATUS VIEW (Views/Student/TestTimeOut.cshtml)
   ============================================================================ */
.test-timeout-page-wrapper {
    max-width: 820px;
    margin: 25px auto 50px;
    padding: 0 15px;
}

.test-timeout-container {
    background: var(--dash-bg-card);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-lg);
    overflow: hidden;
}

.test-timeout-hero {
    padding: 28px 32px;
    position: relative;
    color: #ffffff;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.test-timeout-hero.hero-completed {
    background: linear-gradient(135deg, #064e3b 0%, #0f172a 100%);
}

.test-timeout-hero.hero-expired {
    background: linear-gradient(135deg, #78350f 0%, #1e293b 100%);
}

.test-timeout-hero-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.test-timeout-hero-badge {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.test-timeout-hero-text h2 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px;
    color: #ffffff;
    letter-spacing: -0.3px;
}

.test-timeout-hero-text p {
    font-size: 13.5px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.45;
}

.test-timeout-body {
    padding: 28px 32px;
}

.test-timeout-info-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--dash-bg-subtle);
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    margin-bottom: 20px;
}

.test-timeout-info-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    background: var(--dash-primary-light);
    color: var(--dash-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.test-timeout-info-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dash-text-muted);
    letter-spacing: 0.5px;
    display: block;
}

.test-timeout-info-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--dash-text-main);
    margin: 2px 0 4px;
}

.test-timeout-course-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--dash-text-muted);
}

.test-timeout-status-box {
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.test-timeout-status-box.status-box-amber {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}

.test-timeout-status-box.status-box-success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.test-timeout-status-box.status-box-info {
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    color: #0369a1;
}

.status-box-header {
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.status-box-message {
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.45;
}

.status-box-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
}

.test-timeout-advice-card {
    background: #f8fafc;
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 22px;
}

.advice-card-header {
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-text-main);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.advice-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.advice-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--dash-text-muted);
    line-height: 1.45;
}

.advice-list li i {
    margin-top: 3px;
    color: var(--dash-primary);
    font-size: 13px;
}

.test-timeout-request-section {
    margin-bottom: 22px;
}

.request-time-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 16px 20px;
    flex-wrap: wrap;
}

.request-time-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.request-time-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 10px;
    background: #fef3c7;
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.request-time-title {
    font-size: 14px;
    font-weight: 700;
    color: #92400e;
}

.request-time-subtitle {
    font-size: 12px;
    color: #b45309;
}

.alert-time-request-sent {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    padding: 14px 18px;
    color: #065f46;
    font-size: 13px;
}

.test-timeout-footer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--dash-border-light);
    flex-wrap: wrap;
}