/* =====================================================
   ARIALEARN DESIGN SYSTEM v2
   Learning Beyond Boundaries
===================================================== */

:root{

    /* Colors */

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --primary-light:#60a5fa;

    --sidebar:#0f172a;
    --sidebar-light:#1e293b;
    --sidebar-hover:#334155;

    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;

    --background:#f8fafc;
    --card:#ffffff;

    --text:#1f2937;
    --muted:#94a3b8;

    --border:#e5e7eb;

    --radius:14px;

    --transition:.25s ease;

}

/* ==========================================
RESET
========================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Segoe UI",Tahoma,Verdana,sans-serif;
    background:var(--background);
    color:var(--text);
    overflow-x:hidden;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

/* ==========================================
SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#e2e8f0;

}

::-webkit-scrollbar-thumb{

    background:#3b82f6;
    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#2563eb;

}

/* ==========================================
SIDEBAR
========================================== */

.sidebar{

    position:fixed;

    top:0;
    left:0;

    width:270px;

    height:100vh;

    background:linear-gradient(
        180deg,
        #0f172a,
        #1e3a8a
    );

    color:#fff;

    overflow-y:auto;

    box-shadow:
    8px 0 30px rgba(0,0,0,.18);

    z-index:1000;

}

/* ==========================================
LOGO
========================================== */

.logo{

    text-align:center;

    padding:28px 20px;

    border-bottom:

    1px solid rgba(255,255,255,.08);

}

.logo h3{

    color:#fff;

    font-size:30px;

    font-weight:700;

    letter-spacing:1px;

}

.logo small{

    color:#cbd5e1;

}

/* ==========================================
MENU
========================================== */

.menu{

    padding:18px 15px;

}

.menu-title{

    margin:

    22px 12px 10px;

    color:#94a3b8;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

/* ==========================================
MENU ITEMS
========================================== */

.menu li{

    margin-bottom:6px;

}

.menu a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    color:#e2e8f0;

    border-radius:12px;

    transition:all .25s ease;

    font-weight:500;

}

.menu a i{

    width:22px;

    text-align:center;

    font-size:18px;

}

/* Hover */

.menu a:hover{

    background:#2563eb;

    color:#fff;

    transform:translateX(5px);

    box-shadow:

    0 10px 25px

    rgba(37,99,235,.25);

}

/* Active Menu */

.menu a.active{

    background:#2563eb;

    color:#fff;

    box-shadow:

    0 10px 25px

    rgba(37,99,235,.25);

}

/* ==========================================
MAIN CONTENT
========================================== */

.main-content{

    margin-left:270px;

    min-height:100vh;

    background:#f8fafc;

}
/* ==========================================
TOP NAVBAR
========================================== */

.top-navbar{

    height:80px;

    background:#ffffff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 30px;

    box-shadow:0 4px 20px rgba(0,0,0,.05);

    position:sticky;

    top:0;

    z-index:900;

}

/* ==========================================
SEARCH BOX
========================================== */

.search-box{

    display:flex;

    align-items:center;

    gap:12px;

    background:#f1f5f9;

    border:1px solid var(--border);

    border-radius:12px;

    padding:10px 18px;

}

.search-box i{

    color:#64748b;

}

.search-box input{

    border:none;

    outline:none;

    background:none;

    width:260px;

    color:#1f2937;

}

/* ==========================================
RIGHT NAVBAR
========================================== */

.nav-right{

    display:flex;

    align-items:center;

    gap:10px;

}

/* ==========================================
ICON BUTTON
========================================== */

.icon-btn{

    width:46px;

    height:46px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;

    border:1px solid #dfe7f2;

    border-radius:50%;

    background:#f4f7fb;

    color:#334155;

    font-size:17px;

    cursor:pointer;

    transition:all .25s ease;

}

.icon-btn:hover{

    background:rgba(var(--bs-primary-rgb),.1);

    color:var(--bs-primary);

    border-color:rgba(var(--bs-primary-rgb),.35);

    transform:translateY(-1px);

    box-shadow:0 8px 18px rgba(15,23,42,.1);

}

/* Shared institution logo: one circular mark across every user sidebar and login screen. */
.sidebar .logo img,.sidebar-role-brand img,.sidebar-exam-brand img{
    width:58px!important;height:58px!important;max-height:none!important;
    border-radius:50%!important;object-fit:cover;object-position:center;background:#fff;padding:3px;
    border:2px solid rgba(255,255,255,.75);box-shadow:0 3px 10px rgba(0,0,0,.22);
}
.auth-brand img,.auth-card-brand img{
    width:72px!important;height:72px!important;border-radius:50%!important;
    object-fit:cover;object-position:center;background:#fff;padding:4px;box-shadow:0 5px 16px rgba(15,23,42,.18);
}

/* Examination Office sidebar */
.sidebar-exam-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:20px 22px;
    text-align:left;
}
.sidebar-exam-brand img,
.sidebar-exam-mark{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:12px;
}
.sidebar-exam-brand img{
    object-fit:cover;
    background:#fff;
    padding:3px;
}
.sidebar-exam-mark{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:rgba(255,255,255,.16);
    font-size:21px;
}
.sidebar-exam-brand h3{
    margin:0 0 3px;
    font-size:20px;
    line-height:1.15;
    letter-spacing:0;
}
.sidebar-exam-brand small{
    display:block;
    color:rgba(255,255,255,.74);
    font-size:12px;
}
.sidebar-exam-menu{
    margin:0;
    padding:14px 14px 22px;
}
.sidebar-exam-menu .menu-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin:18px 12px 7px;
    color:rgba(255,255,255,.58);
}
.sidebar-exam-menu .menu-title::after{
    content:"";
    height:1px;
    flex:1;
    background:rgba(255,255,255,.13);
}
.sidebar-exam-menu li{
    margin-bottom:4px;
}
.sidebar-exam-menu a{
    gap:12px;
    min-height:46px;
    padding:11px 13px;
    border:1px solid transparent;
}
.sidebar-exam-menu a i{
    width:24px;
    flex:0 0 24px;
    font-size:18px;
}
.sidebar-exam-menu a.active{
    color:#fff;
    border-color:rgba(255,255,255,.18);
    background:rgba(255,255,255,.16)!important;
    box-shadow:0 8px 20px rgba(15,23,42,.14);
}

/* Shared role branding for lecturer and student sidebars */
.sidebar-role-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:20px 22px;
    text-align:left;
}
.sidebar-role-brand img,
.sidebar-role-mark{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:12px;
}
.sidebar-role-brand img{
    display:block;
    object-fit:cover;
    padding:3px;
    background:#fff;
    box-shadow:0 5px 15px rgba(15,23,42,.18);
}
.sidebar-role-mark{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.2);
    font-size:22px;
}
.sidebar-role-brand h3{
    margin:0 0 3px;
    color:#fff;
    font-size:20px;
    line-height:1.15;
    letter-spacing:0;
}
.sidebar-role-brand small{
    display:block;
    color:rgba(255,255,255,.76);
    font-size:12px;
}

/* Compact circular branding for the administrative and finance portals. */
.sidebar-admin-brand,
.sidebar-finance-brand,
.sidebar-institution-admin-brand,
.sidebar-principal-brand{
    padding:18px 20px;
}
.sidebar-admin-brand img,
.sidebar-finance-brand img,
.sidebar-institution-admin-brand img,
.sidebar-principal-brand img{
    width:58px;
    height:58px;
    flex-basis:58px;
    border-radius:50%;
    object-fit:cover;
    padding:3px;
    background:#fff;
}
.sidebar-admin-brand h3,
.sidebar-finance-brand h3,
.sidebar-institution-admin-brand h3,
.sidebar-principal-brand h3{
    font-size:22px;
}

/* Fee structures are now always billed to the normal enrolled cohort. */
.finance-edit-audience option:not(:first-child){display:none}

.icon-btn:focus-visible{
    outline:3px solid rgba(var(--bs-primary-rgb),.2);
    outline-offset:2px;
}

.nav-action-badge{
    position:absolute;
    top:-5px;
    right:-7px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border:2px solid #fff;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:10px;
    font-weight:700;
    line-height:1;
    box-shadow:0 3px 8px rgba(15,23,42,.2);
}

.profile-trigger{
    min-height:56px;
    gap:11px;
    padding:6px 11px 6px 7px;
    border:1px solid transparent;
    border-radius:16px;
    color:var(--text);
    transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.profile-trigger:hover,
.profile-trigger[aria-expanded="true"]{
    background:#f4f7fb;
    border-color:#dfe7f2;
    box-shadow:0 8px 20px rgba(15,23,42,.07);
}

.profile-trigger:focus-visible{
    outline:3px solid rgba(var(--bs-primary-rgb),.2);
    outline-offset:2px;
}

.profile-trigger-avatar{
    width:46px;
    height:46px;
    object-fit:cover;
    padding:2px;
    border:2px solid var(--bs-primary);
    box-shadow:0 0 0 3px rgba(var(--bs-primary-rgb),.1);
}

.profile-trigger-copy strong{
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text);
    font-size:14px;
}

.profile-trigger-copy small{
    font-size:12px;
}

/* ==========================================
USER INFO
========================================== */

.user-info{

    display:flex;

    align-items:center;

    gap:12px;

}

.user-info img{

    width:44px;

    height:44px;

    border-radius:50%;

    object-fit:cover;

}

.user-info h6{

    margin:0;

    font-size:15px;

    font-weight:600;

}

.user-info small{

    color:#64748b;

}

/* ==========================================
PAGE CONTENT
========================================== */

.page-content{

    padding:30px;

}

/* ==========================================
CARDS
========================================== */

.card{

    border:none;

    border-radius:18px;

    background:#ffffff;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    transition:all .25s ease;

}

.card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(0,0,0,.08);

}

.card-header{

    background:#ffffff;

    border-bottom:1px solid #edf2f7;

    font-weight:600;

}

.card-body{

    padding:24px;

}

/* ==========================================
STATISTICS CARDS
========================================== */

.stats-card{

    border-radius:18px;

    color:#ffffff;

    padding:24px;

    overflow:hidden;

    position:relative;

}

.stats-card h2{

    font-size:34px;

    font-weight:700;

    margin-top:10px;

}

.stats-card p{

    margin:0;

    opacity:.9;

}

.stats-card i{

    position:absolute;

    right:20px;

    bottom:15px;

    font-size:48px;

    opacity:.18;

}

/* ==========================================
BUTTONS
========================================== */

.btn{

    border-radius:10px;

    font-weight:500;

}

.btn-primary{

    background:#2563eb;

    border-color:#2563eb;

}

.btn-primary:hover{

    background:#1d4ed8;

    border-color:#1d4ed8;

}

.btn-success{

    border-radius:10px;

}

.btn-danger{

    border-radius:10px;

}

/* ==========================================
FORMS
========================================== */

.form-control,

.form-select{

    height:48px;

    border-radius:10px;

    border:1px solid #dbe4ef;

}

.form-control:focus,

.form-select:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 .15rem rgba(37,99,235,.15);

}

/* ==========================================
TABLES
========================================== */

.table{

    margin-bottom:0;

}

.table thead{

    background:#f8fafc;

}

.table thead th{

    border:none;

    color:#475569;

    font-weight:600;

    padding:15px;

}

.table tbody td{

    padding:15px;

    vertical-align:middle;

}

.table-hover tbody tr:hover{

    background:#f8fbff;

}
/* ==========================================
LOGIN PAGE
========================================== */

.login-page{

    background:#f8fafc;

}

.login-container{

    display:flex;

    min-height:100vh;

}

.login-left{

    width:45%;

    background:linear-gradient(180deg,#0f172a,#2563eb);

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:60px;

}

.brand h1{

    font-size:46px;

    font-weight:700;

    margin-bottom:10px;

}

.brand h3{

    margin:35px 0 15px;

}

.brand p{

    color:#dbeafe;

    line-height:1.7;

}

.login-right{

    width:55%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#ffffff;

    padding:40px;

}

.login-card{

    width:100%;

    max-width:470px;

    background:#ffffff;

    border-radius:18px;

    padding:40px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.login-card h2{

    font-weight:700;

    margin-bottom:10px;

}

.login-card p{

    color:#64748b;

    margin-bottom:30px;

}

.login-card .form-control{

    height:52px;

    border-radius:10px;

}

.login-card .btn{

    height:52px;

    border-radius:10px;

}

/* ==========================================
BADGES
========================================== */

.badge{

    padding:7px 12px;

    border-radius:30px;

    font-weight:600;

    font-size:12px;

}

/* ==========================================
ALERTS
========================================== */

.alert{

    border:none;

    border-radius:12px;

}

/* ==========================================
PAGINATION
========================================== */

.pagination .page-link{

    border-radius:8px;

    margin:0 3px;

    color:#2563eb;

}

.pagination .active .page-link{

    background:#2563eb;

    border-color:#2563eb;

}

/* ==========================================
DROPDOWNS
========================================== */

.dropdown-menu{

    border:none;

    border-radius:14px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

/* ==========================================
MODALS
========================================== */

.modal-content{

    border:none;

    border-radius:18px;

}

/* ==========================================
FOOTER
========================================== */

.footer{

    margin-top:30px;

    padding:20px;

    text-align:center;

    color:#64748b;

}

/* ==========================================
UTILITY CLASSES
========================================== */

.shadow-soft{

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}

.radius{

    border-radius:16px;

}

.text-muted{

    color:#64748b !important;

}

.bg-primary-soft{

    background:#eff6ff;

}

.bg-success-soft{

    background:#ecfdf5;

}

.bg-warning-soft{

    background:#fffbeb;

}

.bg-danger-soft{

    background:#fef2f2;

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:992px){

    .sidebar{

        left:-270px;

        transition:.3s;

    }

    .main-content{

        margin-left:0;

    }

    .top-navbar{

        padding:0 20px;

    }

    .search-box{

        display:none;

    }

    .page-content{

        padding:20px;

    }

    .login-left{

        display:none;

    }

    .login-right{

        width:100%;

    }

}

@media(max-width:768px){

    .card{

        margin-bottom:20px;

    }

    .stats-card{

        margin-bottom:20px;

    }

    .user-info h6{

        display:none;

    }

    .user-info small{

        display:none;

    }

    .profile-trigger-copy{display:none}
    .profile-trigger{padding:4px;border-radius:50%}
    .profile-trigger-avatar{width:42px;height:42px}

}

@media(max-width:576px){

    .top-navbar{

        height:70px;

        padding:0 15px;

    }

    .icon-btn{

        width:40px;

        height:40px;

    }

    .page-content{

        padding:15px;

    }

}
.show-sidebar{

    left:0 !important;

}

.dropdown-toggle::after{

    margin-left:10px;

}

.dropdown-menu{

    min-width:220px;

}

.dropdown-item{

    padding:12px 18px;

}

.dropdown-item:hover{

    background:#eff6ff;

}
/* Welcome Banner */

.welcome-banner{

    background:linear-gradient(135deg,#2563eb,#1e40af);

    border-radius:18px;

}

.welcome-banner h1{

    font-size:42px;

    font-weight:700;

}

.welcome-banner h5{

    font-size:20px;

}

.welcome-banner p{

    font-size:17px;

}
.stat-card{

    transition:.3s;

    border-radius:18px;

}

.stat-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.stat-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:30px;

}

.bg-primary{

    background:#2563eb!important;

}

.bg-success{

    background:#16a34a!important;

}

.bg-warning{

    background:#f59e0b!important;

}

.bg-danger{

    background:#dc2626!important;

}
/* ===========================
   Dashboard Charts
=========================== */

.chart-container{
    width:100%;
    max-width:450px;
    height:320px;
    margin:20px auto;
    position:relative;
}
/* ==========================================
   DARK MODE
========================================== */

body{
    transition: background-color .3s ease,color .3s ease;
}

/* Main Background */
body.dark-mode{
    --background:#0b1120;
    --card:#111827;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --border:#263244;
    background:#0b1120;
    color:#e5e7eb;
    color-scheme:dark;
}

/* Sidebar */
body.dark-mode .sidebar{
    background:#0f172a;
}

/* Navbar */
body.dark-mode .top-navbar{
    background:#111827;
    border-color:#263244;
}

.stat-count-icon{
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2rem;
    font-size: 1rem;
}

body.dark-mode .icon-btn{
    background:#162033;
    color:#c6d2e3;
    border-color:#2a384d;
}

body.dark-mode .icon-btn:hover{
    background:#1c2940;
    color:#fff;
    border-color:#40516b;
    box-shadow:0 8px 18px rgba(0,0,0,.2);
}

body.dark-mode .nav-action-badge{border-color:#111827}
body.dark-mode .profile-trigger{color:#e5e7eb}
body.dark-mode .profile-trigger:hover,
body.dark-mode .profile-trigger[aria-expanded="true"]{background:#162033;border-color:#2a384d;box-shadow:0 8px 18px rgba(0,0,0,.18)}
body.dark-mode .profile-trigger-copy strong{color:#e5e7eb}

/* Cards */
body.dark-mode .card{
    background:#111827;
    color:#e5e7eb;
    border-color:#263244!important;
    box-shadow:0 8px 24px rgba(0,0,0,.18)!important;
}

/* Card Headers */
body.dark-mode .card-header{
    background:#162033 !important;
    color:#e5e7eb !important;
    border-color:#263244!important;
}

/* Tables */
body.dark-mode .table{
    --bs-table-color:#dbe4ef;
    --bs-table-bg:transparent;
    --bs-table-hover-color:#f8fafc;
    --bs-table-hover-bg:#172033;
    color:#dbe4ef;
}

body.dark-mode .table th,
body.dark-mode .table td{
    border-color:#263244;
}

/* Form Controls */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea{
    background:#0f172a;
    color:#e5e7eb;
    border-color:#334155;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder{color:#7f8da3;opacity:1}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus{background:#111c30;color:#f1f5f9}

/* Search Box */
body.dark-mode .search-box{
    background:#0f172a;
    border-color:#334155;
}

body.dark-mode .search-box input{
    background:transparent;
    color:#fff;
}

/* Dropdown */
body.dark-mode .dropdown-menu{
    background:#111827;
    border-color:#263244;
}

body.dark-mode .dropdown-item{
    color:#dbe4ef;
}

body.dark-mode .dropdown-item:hover{
    background:#1b2639;
}

/* Page Background */
body.dark-mode .page-content{
    background:#0b1120;
}

body.dark-mode .main-content{background:#0b1120}
body.dark-mode .text-body,
body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,
body.dark-mode h4,body.dark-mode h5,body.dark-mode h6{color:#e5e7eb!important}
body.dark-mode .text-muted{color:#94a3b8!important}
body.dark-mode .bg-white,
body.dark-mode .bg-light{background-color:#162033!important;color:#dbe4ef!important}
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-start,
body.dark-mode .border-end{border-color:#263244!important}
body.dark-mode .list-group-item{background:#111827;color:#dbe4ef;border-color:#263244}
body.dark-mode .modal-content{background:#111827;color:#e5e7eb;border-color:#334155}
body.dark-mode .modal-header,
body.dark-mode .modal-footer{border-color:#263244}
body.dark-mode .page-link{background:#111827;color:#b9c7da;border-color:#334155}
body.dark-mode .page-link:hover{background:#1b2639;color:#fff}
body.dark-mode .alert-info{background:#10243a;color:#b9dcfa;border-color:#1d4567}
body.dark-mode .alert-warning{background:#2a2110;color:#f4d68a;border-color:#5c4716}
body.dark-mode .alert-danger{background:#30161a;color:#f5b8bf;border-color:#66262f}
body.dark-mode .btn-outline-secondary{color:#bdc8d8;border-color:#536176}
body.dark-mode code{color:#e6a7c4}
body.dark-mode ::-webkit-scrollbar-track{background:#0b1120}
body.dark-mode ::-webkit-scrollbar-thumb{background:#3b4c66}
/* ==========================================
END OF FILE
========================================== */

/* ==========================================
   MODERN LOGIN
========================================== */
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(480px,1fr) minmax(480px,1fr);background:#f7f9fe}
.auth-hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:linear-gradient(145deg,var(--primary),color-mix(in srgb,var(--primary) 58%,var(--secondary)));color:#fff;padding:clamp(38px,5vw,78px) clamp(42px,6vw,92px) 28px}
.auth-hero::after{content:"";position:absolute;left:-8%;right:-8%;bottom:-92px;height:150px;border-radius:50% 50% 0 0/100% 100% 0 0;background:#f7f9fe}
.auth-hero-content{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;max-width:720px;margin:auto}
.auth-brand{display:flex;align-items:center;gap:18px;margin-bottom:clamp(38px,7vh,80px)}
.auth-brand img{width:92px;height:72px;object-fit:contain;filter:brightness(0) invert(1)}
.auth-brand-mark{width:88px;height:70px;display:grid;place-items:center;font-size:54px;border:3px solid rgba(255,255,255,.9);border-radius:20px}
.auth-brand h1{font-size:clamp(34px,4vw,58px);line-height:1;font-weight:750;letter-spacing:-1.5px;margin:0}
.auth-brand p{font-size:clamp(15px,1.4vw,20px);margin:10px 0 0;color:rgba(255,255,255,.9)}
.auth-welcome h2{font-size:clamp(30px,3vw,44px);font-weight:750;margin-bottom:16px}
.auth-welcome p{font-size:clamp(16px,1.5vw,21px);line-height:1.55;max-width:510px;color:rgba(255,255,255,.94)}
.auth-illustration{display:block;width:min(100%,690px);margin:auto auto 42px;mix-blend-mode:screen;border-radius:28px}
.auth-footer{position:relative;z-index:2;text-align:center;color:#42526d;font-size:15px}.auth-footer strong{color:var(--primary)}
.auth-form-panel{display:grid;place-items:center;padding:48px;background:radial-gradient(circle at 50% 45%,#fff 0,#f7f9fe 65%)}
.auth-card{width:min(100%,550px);padding:clamp(34px,4vw,58px);background:rgba(255,255,255,.96);border:1px solid rgba(226,232,240,.75);border-radius:34px;box-shadow:0 28px 70px rgba(37,61,110,.14)}
.auth-card h2{font-size:clamp(34px,3vw,48px);font-weight:750;letter-spacing:-1px;color:#17223b;margin-bottom:8px}
.auth-subtitle{font-size:17px;color:#667085;margin-bottom:38px}
.auth-card .form-label{font-size:16px;font-weight:500;color:#17223b;margin-bottom:10px}
.auth-input{height:62px;display:flex;align-items:center;border:1px solid #cbd5e1;border-radius:13px;background:#fff;overflow:hidden;transition:.2s}
.auth-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--bs-primary-rgb,13,110,253),.1)}
.auth-input>i{font-size:22px;color:#718096;margin:0 16px}
.auth-input input{min-width:0;flex:1;height:100%;border:0;outline:0;background:transparent;color:#17223b;font-size:16px}
.auth-input input::placeholder{color:#98a2b3}
.auth-password button{align-self:stretch;width:60px;border:0;border-left:1px solid #cbd5e1;background:#f8fbff;color:var(--primary);font-size:21px;transition:.2s}
.auth-password button:hover,.auth-password button:focus{background:var(--primary);color:#fff;outline:0}
.auth-link{color:var(--primary);font-weight:500}
.auth-submit{height:62px;border:0;border-radius:13px;background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 70%,var(--secondary)));color:#fff;font-size:18px;font-weight:650;box-shadow:0 12px 24px rgba(var(--bs-primary-rgb),.2)}
.auth-submit:hover{color:#fff;transform:translateY(-1px);filter:brightness(.96)}
.auth-mobile-brand{display:none;color:var(--primary);font-size:24px;font-weight:750;margin-bottom:24px}
@media(max-width:992px){.auth-shell{grid-template-columns:1fr}.auth-hero{display:none}.auth-form-panel{min-height:100vh;padding:24px}.auth-card{border-radius:24px;padding:34px 28px}.auth-mobile-brand{display:block}}
@media(max-width:480px){.auth-card{box-shadow:none;border:0;background:transparent;padding:20px 4px}.auth-form-panel{padding:22px}.auth-card h2{font-size:36px}.auth-input{height:58px}.auth-submit{height:58px}.auth-link{font-size:14px}}
/* Unread notification attention cues. They run only while the server reports unread items. */
.nav-action-unread{border-color:color-mix(in srgb,var(--primary) 38%,#d7e1ea)!important;background:color-mix(in srgb,var(--primary) 8%,#fff)!important;box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 24%,transparent)}
.notification-ring>i{display:inline-block;transform-origin:50% 8%;animation:ariaBellRing 2.7s ease-in-out infinite}
.module-chat-nudge>i{display:inline-block;animation:ariaChatNudge 2.4s ease-in-out infinite}
.office-shortcut-pulse>i{display:inline-block;animation:ariaOfficeShortcutPulse 2.25s ease-in-out infinite}
.nav-action-unread .nav-action-badge{animation:ariaUnreadPulse 1.7s ease-in-out infinite;box-shadow:0 0 0 3px #fff}
@keyframes ariaOfficeShortcutPulse{0%,100%{transform:translateY(0)}45%{transform:translateY(-2px)}60%{transform:translateY(0)}}
@keyframes ariaBellRing{0%,68%,100%{transform:rotate(0)}73%{transform:rotate(15deg)}78%{transform:rotate(-13deg)}83%{transform:rotate(9deg)}88%{transform:rotate(-6deg)}93%{transform:rotate(3deg)}}
@keyframes ariaChatNudge{0%,64%,100%{transform:translateY(0) scale(1)}72%{transform:translateY(-3px) scale(1.08)}80%{transform:translateY(0) scale(1)}88%{transform:translateY(-1px) scale(1.04)}}
@keyframes ariaUnreadPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 3px #fff,0 0 0 0 rgba(220,53,69,.25)}50%{transform:scale(1.1);box-shadow:0 0 0 3px #fff,0 0 0 7px rgba(220,53,69,0)}}
.notification-arrived{animation:ariaNotificationArrived .7s ease-out 2}
@keyframes ariaNotificationArrived{0%{transform:scale(1)}42%{transform:scale(1.2);background:#fff1c7}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.notification-ring>i,.module-chat-nudge>i,.office-shortcut-pulse>i,.nav-action-unread .nav-action-badge{animation:none}}
@media(max-width:700px){.nav-right{gap:5px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.nav-right::-webkit-scrollbar{display:none}.icon-btn{width:40px;height:40px;font-size:16px}.nav-right .nav-mobile-optional{display:none!important}.nav-action-badge{top:-4px;right:-5px;min-width:18px;height:18px;font-size:9px}.profile-trigger{min-width:40px}.profile-trigger .profile-info{display:none}}
@media(max-width:420px){.nav-right{gap:3px}.icon-btn{width:38px;height:38px}.nav-right>a[title="My Minutes Archive"]{display:none!important}}

/* Shared page-transition skeleton loader. */
.aria-page-loader{position:fixed;z-index:1025;inset:82px 0 0 280px;padding:28px 34px;background:var(--bs-body-bg,#f6f8fb);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility 0s linear .16s}
.aria-page-loader.is-visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .16s ease}
.aria-skeleton-shell{width:min(100%,1500px);margin:0 auto}
.aria-skeleton-heading{display:grid;gap:10px;margin-bottom:24px}
.aria-skeleton{position:relative;display:block;overflow:hidden;background:#e7ebf1;border-radius:10px}
.aria-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:ariaSkeletonShimmer 1.25s ease-in-out infinite}
.aria-skeleton-title{width:min(330px,62%);height:30px}
.aria-skeleton-subtitle{width:min(520px,82%);height:13px}
.aria-skeleton-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:22px}
.aria-skeleton-card{height:126px;border-radius:18px}
.aria-skeleton-panel{height:330px;padding:28px;border-radius:18px}
.aria-skeleton-line{height:15px;width:72%;margin-bottom:24px;background:#d8dee8}
.aria-skeleton-line-wide{width:94%}.aria-skeleton-line-medium{width:61%}.aria-skeleton-line-short{width:42%}
body.dark-mode .aria-page-loader{background:#0b1120}
body.dark-mode .aria-skeleton{background:#182337}
body.dark-mode .aria-skeleton-line{background:#243149}
body.dark-mode .aria-skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.075),transparent)}

/* Midnight Black night mode: high contrast, restrained surfaces and blue focus light. */
body.dark-mode{--background:#050506;--card:#0b0c0e;--text:#f3f5f7;--muted:#9299a3;--border:#24272c;background:#050506!important;color:#f3f5f7!important;color-scheme:dark}
html[data-bs-theme="dark"] body{background:#050506;color:#f3f5f7;color-scheme:dark}
html[data-bs-theme="dark"] .aria-page-loader{background:#050506!important}
html[data-bs-theme="dark"] .aria-skeleton{background:#15181c!important}
html[data-bs-theme="dark"] .aria-skeleton-line{background:#21262d!important}
html[data-bs-theme="dark"] .aria-skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)!important}
.aria-hover-card{position:fixed;z-index:2200;width:min(330px,calc(100vw - 24px));padding:.6rem .72rem;border:1px solid #d8e0e9;border-radius:.7rem;background:#fff;color:#1d2939;box-shadow:0 14px 30px rgba(15,23,42,.18);font-size:.76rem;line-height:1.4;pointer-events:none}.aria-hover-card strong,.aria-hover-card span,.aria-hover-card small{display:block}.aria-hover-card strong{font-size:.82rem}.aria-hover-card span{margin-top:.18rem;color:#526273}.aria-hover-card small{margin-top:.3rem;color:#738196}.aria-hover-card.is-preview{padding:.75rem .85rem;border-color:rgba(var(--bs-primary-rgb),.32);box-shadow:0 16px 34px rgba(15,23,42,.22)}body.dark-mode .aria-hover-card{background:#111318;border-color:#303640;color:#eef1f4}body.dark-mode .aria-hover-card span,body.dark-mode .aria-hover-card small{color:#aab2bc}
body.dark-mode .main-content,body.dark-mode .page-content{background:#050506!important}
body.dark-mode .sidebar{background:linear-gradient(165deg,rgba(15,19,27,.88),rgba(8,12,19,.76))!important;border-right:1px solid rgba(255,255,255,.10);box-shadow:10px 0 30px rgba(0,0,0,.26),inset -1px 0 rgba(255,255,255,.05);-webkit-backdrop-filter:blur(18px) saturate(125%);backdrop-filter:blur(18px) saturate(125%)}
body.dark-mode .sidebar .menu-title{color:#747d89!important;letter-spacing:.13em;font-size:10px;font-weight:650;margin-top:26px}
body.dark-mode .sidebar .menu a{color:#b8bec6!important;border:1px solid transparent;border-radius:.55rem;margin:.12rem .55rem;padding:.68rem .76rem;font-size:.925rem;font-weight:550}
body.dark-mode .sidebar .menu a:hover,body.dark-mode .sidebar .menu a.active{background:linear-gradient(100deg,rgba(var(--bs-primary-rgb),.25),rgba(255,255,255,.06))!important;border-color:rgba(255,255,255,.14)!important;color:#fff!important;font-weight:700;box-shadow:inset 4px 0 0 var(--bs-primary),0 8px 20px rgba(0,0,0,.22)}
body.dark-mode .top-navbar{background:#08090b!important;border-bottom:1px solid #202329!important;box-shadow:0 10px 28px rgba(0,0,0,.22)}
body.dark-mode .card,body.dark-mode .dropdown-menu,body.dark-mode .modal-content{background:#0b0c0e!important;border:1px solid #24272c!important;box-shadow:0 14px 36px rgba(0,0,0,.24)}
body.dark-mode .card-header,body.dark-mode .card-footer{background:#0e1013!important;border-color:#24272c!important}
body.dark-mode .table{--bs-table-bg:#0b0c0e;--bs-table-color:#e7ebef;--bs-table-border-color:#24272c;--bs-table-striped-bg:#101216;--bs-table-hover-bg:#14171b;--bs-table-hover-color:#fff;color:#e7ebef!important}
body.dark-mode .table-light,body.dark-mode .bg-light,body.dark-mode .bg-white,body.dark-mode .bg-body-tertiary{background:#101216!important;color:#e7ebef!important}
body.dark-mode input,body.dark-mode select,body.dark-mode textarea,body.dark-mode .form-control,body.dark-mode .form-select{background:#111318!important;border-color:#2a2f36!important;color:#eef1f4!important}
body.dark-mode input:focus,body.dark-mode select:focus,body.dark-mode textarea:focus,body.dark-mode .form-control:focus,body.dark-mode .form-select:focus{background:#12151a!important;border-color:var(--bs-primary)!important;box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.2)!important}
body.dark-mode .icon-btn,body.dark-mode .profile-trigger{background:#101216!important;border-color:#282d35!important;color:#e9edf1!important}
body.dark-mode .search-box,body.dark-mode .search-box input{background:#101216!important;border-color:#282d35!important;color:#e9edf1!important}
body.dark-mode .list-group-item{background:#0d0f12!important;border-color:#24272c!important;color:#e7ebef!important}
body.dark-mode .text-muted{color:#9aa2ad!important}
body.dark-mode .border,body.dark-mode .border-top,body.dark-mode .border-bottom,body.dark-mode .border-start,body.dark-mode .border-end{border-color:#24272c!important}
body.dark-mode .page-link{background:#101216!important;border-color:#292e35!important;color:#cbd2da!important}
body.dark-mode .page-link:hover,body.dark-mode .page-item.active .page-link{background:#1a1e24!important;color:#fff!important}
body.dark-mode .btn-outline-secondary{border-color:#444b55!important;color:#d6dbe1!important}
body.dark-mode hr,.dark-mode .dropdown-divider{border-color:#24272c!important;opacity:1}
body.dark-mode .exam-readiness-card{background:#0b0c0e!important;border-color:#24272c!important;box-shadow:0 14px 36px rgba(0,0,0,.24)}
body.dark-mode .exam-readiness-item.is-ready{background:#0d2116!important;color:#87d9a6!important}
body.dark-mode .exam-readiness-item.is-warning{background:#2a1d0d!important;color:#f0c57e!important}
@keyframes ariaSkeletonShimmer{100%{transform:translateX(100%)}}
@media(max-width:992px){.aria-page-loader{inset:82px 0 0 0;padding:22px 18px}.aria-skeleton-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.aria-skeleton-card:last-child{display:none}}
@media(max-width:600px){.aria-page-loader{inset:82px 0 0;padding:18px 14px}.aria-skeleton-cards{grid-template-columns:1fr;gap:12px}.aria-skeleton-card{height:92px}.aria-skeleton-card:nth-child(n+3){display:none}.aria-skeleton-panel{height:280px;padding:18px}}
@media(prefers-reduced-motion:reduce){.aria-page-loader{transition:none}.aria-skeleton::after{animation:none}}

/* Installed PWA navigation is intentionally quiet and app-like. Desktop
   browsers retain the informative skeleton above. */
.aria-pwa-loader{display:none}
@keyframes ariaPwaLoaderSpin{to{transform:rotate(360deg)}}
@media (display-mode:standalone){
    .aria-page-loader{inset:0!important;display:grid;place-items:center;padding:0!important;background:rgba(248,250,252,.86)!important;backdrop-filter:blur(4px)}
    .aria-page-loader .aria-skeleton-shell{display:none}
    .aria-page-loader .aria-pwa-loader{display:grid;place-items:center;gap:11px;color:#536174;font-size:.76rem;font-weight:700;letter-spacing:.04em}
    .aria-pwa-loader-ring{width:34px;height:34px;border:3px solid rgba(var(--bs-primary-rgb),.18);border-top-color:var(--bs-primary);border-radius:50%;animation:ariaPwaLoaderSpin .72s linear infinite}
    html[data-bs-theme="dark"] .aria-page-loader{background:rgba(5,5,6,.88)!important}
    html[data-bs-theme="dark"] .aria-pwa-loader{color:#aeb6c0}
}
html.aria-standalone .aria-page-loader{inset:0!important;display:grid;place-items:center;padding:0!important;background:rgba(248,250,252,.86)!important;backdrop-filter:blur(4px)}
html.aria-standalone .aria-page-loader .aria-skeleton-shell{display:none}
html.aria-standalone .aria-page-loader .aria-pwa-loader{display:grid;place-items:center;gap:11px;color:#536174;font-size:.76rem;font-weight:700;letter-spacing:.04em}
html.aria-standalone[data-bs-theme="dark"] .aria-page-loader{background:rgba(5,5,6,.88)!important}
html.aria-standalone[data-bs-theme="dark"] .aria-pwa-loader{color:#aeb6c0}
@media(prefers-reduced-motion:reduce){.aria-pwa-loader-ring{animation:none}}

/* Smooth page changes, with a graceful fallback for browsers without View Transitions. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:ariaPageFadeOut .16s ease-in both}
::view-transition-new(root){animation:ariaPageFadeIn .28s cubic-bezier(.22,1,.36,1) both}
.page-content{animation:ariaPageContentEnter .34s cubic-bezier(.22,1,.36,1) both;transform-origin:50% 0}
.aria-page-loader.is-visible .aria-skeleton-shell{animation:ariaSkeletonShellEnter .22s cubic-bezier(.22,1,.36,1) both}
/* Finish without a transform so Bootstrap modals are not trapped in a
   stacking context underneath the body-level modal backdrop. */
@keyframes ariaPageContentEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ariaSkeletonShellEnter{from{opacity:0;transform:translateY(6px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ariaPageFadeOut{to{opacity:.82;filter:blur(1px)}}
@keyframes ariaPageFadeIn{from{opacity:.72;filter:blur(1px)}to{opacity:1;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){
    ::view-transition-old(root),::view-transition-new(root),.page-content,.aria-page-loader.is-visible .aria-skeleton-shell{animation:none}
}

/* =====================================================
   ARIALEARN CLEAN WORKSPACE — LIGHT INTERFACE REFRESH
   Shared visual styling only. Routes, permissions, forms and actions remain
   unchanged. Institution administrators can still choose the primary colour.
===================================================== */
:root{
    --aria-workspace:#f4f7fb;
    --aria-surface:#ffffff;
    --aria-surface-soft:#f8fafc;
    --aria-ink:#17233a;
    --aria-muted:#6b7a90;
    --aria-line:#e5ebf3;
    --aria-shadow:0 10px 28px rgba(30,55,90,.055);
    --aria-shadow-raised:0 16px 32px rgba(30,55,90,.10);
    --aria-institution-gradient:linear-gradient(115deg,var(--bs-secondary) 0%,var(--bs-primary) 56%,color-mix(in srgb,var(--bs-primary) 58%,var(--bs-secondary)) 100%);
}

body:not(.dark-mode){
    background:var(--aria-workspace);
    color:var(--aria-ink);
    font-family:Inter,"Segoe UI",Tahoma,Verdana,sans-serif;
}
body:not(.dark-mode) .main-content,
body:not(.dark-mode) .page-content{background:var(--aria-workspace)}

/* Left navigation — calm and readable like a modern learning workspace. */
body:not(.dark-mode) .sidebar{
    width:258px;
    background:linear-gradient(145deg,rgba(255,255,255,.78) 0%,rgba(232,242,255,.58) 48%,rgba(255,255,255,.46) 100%)!important;
    color:var(--aria-ink);
    border-right:1px solid rgba(255,255,255,.92);
    box-shadow:14px 0 38px rgba(35,55,85,.13),inset -1px 0 rgba(102,137,175,.18),inset 1px 0 rgba(255,255,255,.78);
    -webkit-backdrop-filter:blur(28px) saturate(165%) brightness(1.06);
    backdrop-filter:blur(28px) saturate(165%) brightness(1.06);
}
body:not(.dark-mode) .sidebar .logo,
body:not(.dark-mode) .sidebar .sidebar-role-brand,
body:not(.dark-mode) .sidebar .sidebar-exam-brand{
    min-height:82px;
    padding:18px 20px;
    border-bottom:1px solid rgba(126,157,190,.20);
}
body:not(.dark-mode) .sidebar .logo h3,
body:not(.dark-mode) .sidebar .sidebar-role-brand h3,
body:not(.dark-mode) .sidebar .sidebar-exam-brand h3{color:#102a4d!important;font-size:19px}
body:not(.dark-mode) .sidebar .logo small,
body:not(.dark-mode) .sidebar .sidebar-role-brand small,
body:not(.dark-mode) .sidebar .sidebar-exam-brand small{color:#4c6687!important}
body:not(.dark-mode) .sidebar .sidebar-role-mark,
body:not(.dark-mode) .sidebar .sidebar-exam-mark{
    color:var(--bs-primary)!important;
    background:rgba(var(--bs-primary-rgb),.10)!important;
    border-color:rgba(var(--bs-primary-rgb),.12)!important;
}
body:not(.dark-mode) .sidebar .logo img,
body:not(.dark-mode) .sidebar-role-brand img,
body:not(.dark-mode) .sidebar-exam-brand img{
    border-color:rgba(var(--bs-primary-rgb),.18)!important;
    box-shadow:0 4px 13px rgba(34,68,110,.10)!important;
}
body:not(.dark-mode) .menu{padding:14px 12px 24px}
body:not(.dark-mode) .menu-title,
body:not(.dark-mode) .sidebar-exam-menu .menu-title{
    margin:26px 10px 9px;
    color:#6c85a4!important;
    font-size:10px;
    font-weight:650;
    letter-spacing:.13em;
}
body:not(.dark-mode) .sidebar-exam-menu .menu-title::after{background:var(--aria-line)}
body:not(.dark-mode) .menu li{margin-bottom:3px}
body:not(.dark-mode) .menu a{
    position:relative;
    gap:12px;
    min-height:42px;
    padding:10px 12px;
    color:#18395f!important;
    border:1px solid transparent;
    border-radius:10px;
    font-size:.925rem;
    font-weight:550;
    box-shadow:none!important;
    transform:none!important;
}
body:not(.dark-mode) .menu a i{color:#42709d;font-size:17px}
body:not(.dark-mode) .menu a:hover{
    background:rgba(255,255,255,.68)!important;
    color:var(--bs-primary)!important;
    border-color:rgba(var(--bs-primary-rgb),.12)!important;
    box-shadow:0 8px 18px rgba(43,79,117,.10),inset 0 1px rgba(255,255,255,.75)!important;
}
body:not(.dark-mode) .menu a:hover i{color:var(--bs-primary)}
body:not(.dark-mode) .menu a.active,
body:not(.dark-mode) .sidebar-exam-menu a.active{
    color:#082f60!important;
    background:linear-gradient(105deg,rgba(var(--bs-primary-rgb),.24),rgba(255,255,255,.78))!important;
    border-color:rgba(255,255,255,.82)!important;
    font-weight:700;
    box-shadow:0 9px 20px rgba(39,85,135,.12),inset 0 1px rgba(255,255,255,.90)!important;
}
body:not(.dark-mode) .menu a.active::before{
    content:"";
    position:absolute;
    left:-13px;
    width:4px;
    height:28px;
    border-radius:0 5px 5px 0;
    background:var(--bs-primary);
}
body:not(.dark-mode) .menu a.active i{color:var(--bs-primary)}

/* Compact top bar and dashboard canvas. */
body:not(.dark-mode) .main-content{margin-left:258px;min-height:100vh}
body:not(.dark-mode) .top-navbar{
    height:74px;
    padding:0 26px;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid var(--aria-line);
    box-shadow:0 5px 20px rgba(30,55,90,.035);
    backdrop-filter:blur(12px);
}
body:not(.dark-mode) .search-box{
    min-height:42px;
    gap:9px;
    padding:8px 13px;
    background:#f6f8fc;
    border-color:transparent;
    border-radius:10px;
}
body:not(.dark-mode) .search-box:focus-within{background:#fff;border-color:rgba(var(--bs-primary-rgb),.32);box-shadow:0 0 0 3px rgba(var(--bs-primary-rgb),.08)}
body:not(.dark-mode) .search-box input{width:230px;font-size:.88rem}
body:not(.dark-mode) .icon-btn{
    width:42px;
    height:42px;
    border-radius:10px;
    background:#f4f8fd;
    border-color:#edf2f7;
    color:#4a607c;
}
body:not(.dark-mode) .icon-btn:hover{background:rgba(var(--bs-primary-rgb),.10);color:var(--bs-primary);border-color:transparent;box-shadow:none;transform:translateY(-1px)}
body:not(.dark-mode) .profile-trigger{min-height:48px;padding:4px 8px 4px 5px;border-radius:12px}
body:not(.dark-mode) .profile-trigger:hover,
body:not(.dark-mode) .profile-trigger[aria-expanded="true"]{background:#f4f8fd;border-color:#edf2f7;box-shadow:none}
body:not(.dark-mode) .profile-trigger-avatar{width:40px;height:40px;border-width:1px;box-shadow:0 0 0 3px rgba(var(--bs-primary-rgb),.08)}
body:not(.dark-mode) .page-content{padding:clamp(20px,2.1vw,32px)}

/* Reusable surfaces across dashboards, timetable pages, HR, finance and forms. */
body:not(.dark-mode) .card,
body:not(.dark-mode) .modal-content,
body:not(.dark-mode) .dropdown-menu{
    background:var(--aria-surface);
    border:1px solid var(--aria-line)!important;
    border-radius:15px;
    box-shadow:var(--aria-shadow)!important;
}
body:not(.dark-mode) .card{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
body:not(.dark-mode) .card:hover{transform:none;box-shadow:var(--aria-shadow)!important}
body:not(.dark-mode) a .card:hover,
body:not(.dark-mode) .stat-card:hover{transform:translateY(-3px);border-color:rgba(var(--bs-primary-rgb),.18)!important;box-shadow:var(--aria-shadow-raised)!important}
body:not(.dark-mode) .card-header,
body:not(.dark-mode) .card-footer{padding:15px 20px;background:transparent;border-color:var(--aria-line)!important}
body:not(.dark-mode) .card-body{padding:20px}
body:not(.dark-mode) .bg-light,
body:not(.dark-mode) .bg-body-tertiary{background:#f7f9fc!important}
body:not(.dark-mode) .text-muted{color:var(--aria-muted)!important}

/* Keep prominent dashboard areas useful but lighter than the old heavy blue blocks. */
body:not(.dark-mode) .welcome-banner,
body:not(.dark-mode) .login-left{
    background:var(--aria-institution-gradient)!important;
    border-radius:16px;
    box-shadow:0 15px 30px rgba(var(--bs-primary-rgb),.18)!important;
}
body:not(.dark-mode) .welcome-banner{padding:1.35rem!important}
body:not(.dark-mode) .welcome-role-badge{box-shadow:0 2px 8px rgba(16,35,65,.10)}

/* Role-specific dashboard banners and scheduler heroes inherit the same
   institution colours instead of retaining an old hard-coded blue theme. */
body:not(.dark-mode) .scheduler-hero,
body:not(.dark-mode) .exam-scheduler-hero,
body:not(.dark-mode) .finance-structure-summary,
body:not(.dark-mode) .chat-header,
body:not(.dark-mode) section[style*="linear-gradient(120deg,#0d6efd,#063d76)"]{
    background:var(--aria-institution-gradient)!important;
}
body:not(.dark-mode) .scheduler-hero .schedule-dot{background:var(--bs-primary)!important}
body:not(.dark-mode) .timetable-topbar a:hover{color:var(--bs-primary)!important}
body:not(.dark-mode) .timetable-topbar a.active,
body:not(.dark-mode) .exam-scheduler-topbar a:hover,
body:not(.dark-mode) .exam-scheduler-topbar a.active{background:var(--bs-primary)!important;box-shadow:0 .2rem .5rem rgba(var(--bs-primary-rgb),.2)!important}

/* Controls and data tables share the same precise, low-noise language. */
body:not(.dark-mode) .btn{min-height:38px;padding:.48rem .85rem;border-radius:9px;font-weight:650;font-size:.87rem;box-shadow:none}
body:not(.dark-mode) .btn-primary{box-shadow:0 6px 14px rgba(var(--bs-primary-rgb),.18)}
body:not(.dark-mode) .btn-primary:hover{box-shadow:0 8px 18px rgba(var(--bs-primary-rgb),.24);transform:translateY(-1px)}
body:not(.dark-mode) .btn-outline-primary{border-color:rgba(var(--bs-primary-rgb),.45)}
body:not(.dark-mode) .form-label{margin-bottom:.4rem;color:#41536c;font-size:.82rem;font-weight:700}
body:not(.dark-mode) .form-control,
body:not(.dark-mode) .form-select{
    min-height:43px;
    height:auto;
    border-radius:9px;
    border-color:#dfe7f1;
    color:var(--aria-ink);
    background:#fff;
    font-size:.9rem;
}
body:not(.dark-mode) textarea.form-control{min-height:100px}
body:not(.dark-mode) .form-control:focus,
body:not(.dark-mode) .form-select:focus{border-color:var(--bs-primary);box-shadow:0 0 0 3px rgba(var(--bs-primary-rgb),.10)}
body:not(.dark-mode) .input-group-text{border-color:#dfe7f1;background:#f7f9fc;color:#64748b}
body:not(.dark-mode) .table{--bs-table-bg:transparent;--bs-table-border-color:var(--aria-line);--bs-table-hover-bg:#f7faff;--bs-table-hover-color:var(--aria-ink);font-size:.89rem}
body:not(.dark-mode) .table thead{background:#f7f9fc}
body:not(.dark-mode) .table thead th{padding:13px 16px;color:#596b82;font-size:.68rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase;border-bottom:1px solid var(--aria-line)}
body:not(.dark-mode) .table tbody td{padding:14px 16px;border-color:var(--aria-line)}
body:not(.dark-mode) .table-responsive{border-radius:inherit}
body:not(.dark-mode) .badge{padding:.38rem .58rem;font-size:.72rem;letter-spacing:.01em}
body:not(.dark-mode) .alert{border:1px solid transparent;border-radius:12px;box-shadow:0 4px 14px rgba(30,55,90,.04)}
body:not(.dark-mode) .dropdown-menu{padding:.45rem;overflow:hidden}
body:not(.dark-mode) .dropdown-item{border-radius:8px;padding:.65rem .75rem;font-size:.88rem}
body:not(.dark-mode) .dropdown-item:hover{background:#f2f7ff;color:var(--bs-primary)}
body:not(.dark-mode) .pagination .page-link{border-color:var(--aria-line);color:#54657b;margin:0 2px;border-radius:8px}
body:not(.dark-mode) .pagination .active .page-link{color:#fff}

/* Do not let the shell design crowd phones or loader overlays. */
.aria-page-loader{inset:74px 0 0 258px}
@media(max-width:992px){
    body:not(.dark-mode) .sidebar{left:-258px}
    body:not(.dark-mode) .main-content{margin-left:0}
    body:not(.dark-mode) .top-navbar{padding:0 18px}
    .aria-page-loader{inset:74px 0 0 0}
}
@media(max-width:576px){
    body:not(.dark-mode) .top-navbar{height:66px;padding:0 14px}
    body:not(.dark-mode) .page-content{padding:14px}
    body:not(.dark-mode) .card-body{padding:16px}
    body:not(.dark-mode) .card-header,
    body:not(.dark-mode) .card-footer{padding:13px 16px}
    .aria-page-loader{inset:66px 0 0}
}