@font-face{font-family:'Jameel Noori Nastaleeq';src:url('https://cdn.jsdelivr.net/gh/Noori-spec/Jameel-Noori-Nastaleeq-Kasheeda-Font/jameel_noori_nastaleeq_kasheeda-webfont.woff2') format('woff2');font-display:swap;}
/* ============================================================================
   Ashraful Makateeb — Premium UI Theme (v2.0)
   Modern • Animated • Glassy • Responsive
   ========================================================================== */

:root {
    --primary: #0d9488;
    --primary-dark: #0f766e;
    --primary-light: #ccfbf1;
    --primary-glow: rgba(13, 148, 136, .22);

    --secondary: #14b8a6;
    --accent: #f59e0b;
    --accent-glow: rgba(245, 158, 11, .25);

    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;

    --sidebar: #0b1220;
    --sidebar-hover: #162035;
    --sidebar-active: linear-gradient(135deg, #0d9488, #0f766e);

    --background: #f4f6fb;
    --background-alt: #eef1f8;
    --card: #ffffff;
    --card-glass: rgba(255, 255, 255, .72);

    --text: #172033;
    --text-soft: #334155;
    --muted: #64748b;
    --muted-light: #94a3b8;

    --border: #e5e9f2;
    --border-strong: #cbd5e1;

    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 22px;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow: 0 3px 15px rgba(15, 23, 42, .06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
    --shadow-lg: 0 16px 42px rgba(15, 23, 42, .12);
    --shadow-glow: 0 12px 40px var(--primary-glow);

    --transition: all .25s cubic-bezier(.4, 0, .2, 1);
    --transition-slow: all .45s cubic-bezier(.4, 0, .2, 1);

    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-urdu: 'Noto Nastaliq Urdu', 'Segoe UI', serif;
}

/* =====================================================
   RESET & BASE
===================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--background);
    background-image:
        radial-gradient(circle at 15% 0%, rgba(13, 148, 136, .06), transparent 45%),
        radial-gradient(circle at 85% 100%, rgba(20, 184, 166, .05), transparent 50%);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: var(--primary);
    transition: color .2s ease;
}

a:hover {
    color: var(--primary-dark);
}

::selection {
    background: var(--primary);
    color: #fff;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
    background-clip: content-box;
}

/* =====================================================
   APP SHELL
===================================================== */

.app-shell {
    min-height: 100vh;
    display: flex;
}

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

.app-sidebar {
    width: 260px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background:
        linear-gradient(180deg, #0b1220 0%, #0a1628 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    border-right: 1px solid rgba(255, 255, 255, .04);
    box-shadow: 4px 0 30px rgba(0, 0, 0, .08);
}

.app-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 0% 0%, rgba(13, 148, 136, .15), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(20, 184, 166, .08), transparent 45%);
    pointer-events: none;
}

/* =====================================================
   BRAND
===================================================== */

.app-brand {
    height: 72px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    position: relative;
    z-index: 1;
    transition: var(--transition);
}

.app-brand:hover {
    background: rgba(255, 255, 255, .03);
}

.brand-logo {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #14b8a6, #0f766e);
    color: #fff;
    font-size: 19px;
    box-shadow: 0 6px 20px rgba(20, 184, 166, .35);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.brand-logo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, .3));
    opacity: 0;
    transition: opacity .3s ease;
}

.app-brand:hover .brand-logo {
    transform: rotate(-6deg) scale(1.05);
}

.app-brand:hover .brand-logo::after {
    opacity: 1;
}

.brand-name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.sidebar-profile {
    margin: 14px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
    transition: var(--transition);
}

.sidebar-profile:hover {
    background: rgba(255, 255, 255, .08);
    transform: translateY(-1px);
}

.profile-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ccfbf1, #99f6e4);
    color: #0f766e;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(20, 184, 166, .3);
}

.profile-info {
    min-width: 0;
    flex: 1;
}

.profile-info strong {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-info small {
    color: #94a3b8;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}

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

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 4px 12px 8px;
    position: relative;
    z-index: 1;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .1);
    border-radius: 4px;
}

.nav-label {
    margin: 22px 9px 7px;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.sidebar-link {
    min-height: 44px;
    width: 100%;
    margin: 3px 0;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 11px;
    color: #cbd5e1 !important;
    font-size: 13px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.sidebar-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: #5eead4;
    border-radius: 0 3px 3px 0;
    transition: transform .25s ease;
}

.sidebar-link i {
    width: 22px;
    text-align: center;
    font-size: 15px;
    transition: transform .25s ease;
}

.sidebar-link:hover {
    background: var(--sidebar-hover);
    color: #fff !important;
    transform: translateX(3px);
}

.sidebar-link:hover i {
    transform: scale(1.12);
}

.sidebar-link.active {
    background: var(--sidebar-active);
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(13, 148, 136, .3);
}

.sidebar-link.active::before {
    transform: translateY(-50%) scaleY(1);
}

.sidebar-link.active i {
    transform: scale(1.1);
}

.sidebar-count {
    margin-left: auto;
    min-width: 20px;
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--danger);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 3px 10px rgba(239, 68, 68, .4);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.sidebar-footer {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    position: relative;
    z-index: 1;
}

.logout-link {
    color: #94a3b8 !important;
}

.logout-link:hover {
    background: rgba(239, 68, 68, .12) !important;
    color: #fca5a5 !important;
}

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

.app-main {
    width: 100%;
    min-width: 0;
    margin-left: 260px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* =====================================================
   TOPBAR
===================================================== */

.app-topbar {
    height: 72px;
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, .85);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-heading strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--text);
}

.topbar-heading small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 1px;
}

.mobile-menu-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #475569;
    cursor: pointer;
    transition: var(--transition);
}

.mobile-menu-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
    transform: scale(1.05);
}

/* =====================================================
   TOPBAR ICONS
===================================================== */

.topbar-icon {
    width: 40px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fff;
    color: #475569;
    font-size: 15px;
    transition: var(--transition);
}

.topbar-icon:hover {
    color: var(--primary);
    background: var(--primary-light);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--primary-glow);
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: var(--danger);
    color: #fff;
    border: 2px solid #fff;
    font-size: 9px;
    font-weight: 800;
    box-shadow: 0 3px 10px rgba(239, 68, 68, .45);
    animation: bounceIn .4s cubic-bezier(.68, -.55, .27, 1.55);
}

@keyframes bounceIn {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* =====================================================
   TOPBAR USER
===================================================== */

.topbar-user {
    border: 0;
    background: transparent;
    padding: 4px 8px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text);
    cursor: pointer;
    transition: var(--transition);
}

.topbar-user:hover {
    background: var(--background-alt);
}

.top-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #ccfbf1, #99f6e4);
    color: var(--primary-dark);
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(20, 184, 166, .25);
    transition: var(--transition);
}

.topbar-user:hover .top-avatar {
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(20, 184, 166, .4);
}

.top-user-text {
    text-align: left;
}

.top-user-text strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
}

.top-user-text small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}

.topbar-user > i {
    color: #94a3b8;
    font-size: 9px;
    transition: transform .25s ease;
}

.topbar-user:hover > i {
    transform: rotate(180deg);
}

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

.app-content {
    flex: 1;
    padding: 26px;
    animation: fadeInUp .5s ease;
}

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

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

.app-footer {
    padding: 18px 26px;
    background: #fff;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-links {
    display: flex;
    gap: 15px;
}

.footer-links a {
    color: var(--primary);
    font-weight: 600;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--primary-dark);
    transform: translateY(-1px);
}

/* =====================================================
   STUDENT NAVBAR
===================================================== */

.student-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .85);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 3px 15px rgba(15, 23, 42, .04);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.student-nav-inner {
    max-width: 1280px;
    margin: auto;
    min-height: 72px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.student-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
    transition: var(--transition);
}

.student-brand:hover {
    color: var(--primary);
    transform: translateX(-2px);
}

.student-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-icon {
    border: 1px solid var(--border);
    background: #fff;
}

.student-content {
    max-width: 1280px;
    margin: 0 auto;
    min-height: calc(100vh - 150px);
    padding: 28px 22px 90px;
    animation: fadeInUp .5s ease;
}

.student-footer {
    padding: 20px;
    background: #fff;
    border-top: 1px solid var(--border);
    color: var(--muted);
    text-align: center;
    font-size: 11px;
}

/* =====================================================
   MOBILE STUDENT NAV
===================================================== */

.student-mobile-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    height: 68px;
    background: rgba(255, 255, 255, .94);
    border-top: 1px solid var(--border);
    box-shadow: 0 -5px 20px rgba(15, 23, 42, .07);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.student-mobile-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    position: relative;
    transition: var(--transition);
}

.student-mobile-nav a i {
    font-size: 18px;
    transition: transform .25s cubic-bezier(.68, -.55, .27, 1.55);
}

.student-mobile-nav a:hover i,
.student-mobile-nav a.active i {
    transform: translateY(-3px) scale(1.1);
}

.student-mobile-nav a:hover,
.student-mobile-nav a.active {
    color: var(--primary);
}

.student-mobile-nav a.active::after {
    content: '';
    position: absolute;
    bottom: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
}

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

.card {
    background: var(--card);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--transition);
}

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

.card-header {
    background: #fff !important;
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
    font-weight: 700;
    font-size: 14px;
}

.card-body {
    padding: 20px;
}

/* Stat cards with hover lift and glow */
.stat-card,
.card.stat,
.stats-card {
    position: relative;
    overflow: hidden;
}

.stat-card::before,
.card.stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    opacity: 0;
    transition: opacity .3s ease;
}

.stat-card:hover::before,
.card.stat:hover::before {
    opacity: 1;
}

.stat-card:hover,
.card.stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

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

.table {
    vertical-align: middle;
    margin-bottom: 0;
}

.table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    color: var(--text-soft);
}

.table tbody tr {
    transition: background .2s ease;
}

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

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

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

.form-control,
.form-select {
    min-height: 44px;
    border-radius: 11px;
    border: 1px solid #dbe1e8;
    font-size: 13px;
    padding: 8px 14px;
    transition: var(--transition);
    background: #fff;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, .12);
    outline: none;
}

.form-control:hover:not(:focus),
.form-select:hover:not(:focus) {
    border-color: var(--border-strong);
}

.form-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-soft);
    margin-bottom: 6px;
    letter-spacing: .01em;
}

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

.btn {
    border-radius: 11px;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 18px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-width: 1px;
}

.btn:active {
    transform: scale(.97);
}

/* Shimmer effect */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
    transition: left .5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(13, 148, 136, .25);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0f766e, #115e59);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(13, 148, 136, .4);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--primary-glow);
}

.btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(16, 185, 129, .25);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, .4);
    color: #fff;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, .25);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(239, 68, 68, .4);
    color: #fff;
}

.btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger);
}

.btn-outline-danger:hover {
    background: var(--danger);
    color: #fff;
    transform: translateY(-2px);
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(245, 158, 11, .25);
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--accent-glow);
    color: #fff;
}

.btn-secondary {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: var(--text-soft);
}

.btn-secondary:hover {
    background: #e2e8f0;
    color: var(--text);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 9px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 14px;
    border-radius: 13px;
}

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

.alert {
    border: 0;
    border-radius: 13px;
    box-shadow: var(--shadow);
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideDown .4s cubic-bezier(.4, 0, .2, 1);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #065f46;
    border-left: 4px solid var(--success);
}

.alert-danger {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    border-left: 4px solid var(--danger);
}

.alert-warning {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #92400e;
    border-left: 4px solid var(--warning);
}

.alert-info {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #1e40af;
    border-left: 4px solid var(--info);
}

/* =====================================================
   DROPDOWN
===================================================== */

.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 7px;
    box-shadow: var(--shadow-lg);
    animation: dropIn .22s ease;
    min-width: 200px;
}

@keyframes dropIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dropdown-item {
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
}

.dropdown-item:hover {
    background: var(--background-alt);
    transform: translateX(2px);
}

.dropdown-divider {
    margin: 5px 0;
    border-color: var(--border);
}

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

.badge {
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.badge.bg-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    box-shadow: 0 3px 10px rgba(16, 185, 129, .3);
}

.badge.bg-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 3px 10px rgba(239, 68, 68, .3);
}

.badge.bg-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px var(--accent-glow);
}

.badge.bg-info {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    box-shadow: 0 3px 10px rgba(59, 130, 246, .3);
}

.badge.bg-secondary {
    background: #f1f5f9 !important;
    color: var(--text-soft) !important;
}

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

.pagination {
    gap: 4px;
}

.pagination .page-link {
    border: 1px solid var(--border);
    border-radius: 10px !important;
    color: var(--text-soft);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 13px;
    transition: var(--transition);
}

.pagination .page-link:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px var(--primary-glow);
}

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

.modal-content {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--border);
    padding: 18px 22px;
}

.modal-body {
    padding: 22px;
}

.modal-footer {
    border-top: 1px solid var(--border);
    padding: 16px 22px;
}

.modal.fade .modal-dialog {
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    transform: scale(.95);
}

.modal.show .modal-dialog {
    transform: scale(1);
}

/* =====================================================
   OFFCANVAS
===================================================== */

.offcanvas {
    border: 0;
}

.mobile-sidebar {
    background: var(--sidebar) !important;
    color: #fff;
}

.mobile-sidebar-header {
    height: 72px;
    padding: 0 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.mobile-sidebar-header .app-brand {
    flex: 1;
    border-bottom: 0;
}

.btn-close-white {
    filter: invert(1) brightness(2);
    opacity: .7;
}

.btn-close-white:hover {
    opacity: 1;
}

/* =====================================================
   PROGRESS
===================================================== */

.progress {
    height: 8px;
    border-radius: 8px;
    background: var(--background-alt);
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 8px;
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

/* =====================================================
   UTILITIES
===================================================== */

.text-muted {
    color: var(--muted) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.bg-primary-light {
    background: var(--primary-light) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

.rounded-lg {
    border-radius: var(--radius) !important;
}

.shadow-sm {
    box-shadow: var(--shadow) !important;
}

.shadow {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* Hover lift utility */
.hover-lift {
    transition: var(--transition);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

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

/* Empty state */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--muted);
}

.empty-state i {
    font-size: 56px;
    color: #cbd5e1;
    margin-bottom: 16px;
    display: block;
}

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

.empty-state p {
    font-size: 13px;
    margin: 0;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 991.98px) {

    .app-sidebar {
        display: none;
    }

    .app-main {
        margin-left: 0;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .app-topbar {
        height: 66px;
        padding: 0 16px;
    }

    .app-content {
        padding: 20px 16px;
    }

    .top-user-text,
    .topbar-user > i {
        display: none;
    }

    .mobile-sidebar {
        width: 280px !important;
        background: var(--sidebar);
    }
}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 575.98px) {

    .app-content {
        padding: 16px 12px;
    }

    .student-nav-inner {
        min-height: 62px;
        padding: 0 12px;
    }

    .student-content {
        padding: 18px 12px 90px;
    }

    .student-brand .brand-logo {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .student-brand {
        font-size: 13px;
    }

    .app-footer {
        padding: 15px 12px;
        flex-direction: column;
        gap: 7px;
    }

    .student-mobile-nav {
        display: flex;
    }

    .topbar-heading small {
        display: none;
    }
}

/* =====================================================
   REDUCED MOTION
===================================================== */

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

/* =====================================================
   PRINT
===================================================== */

@media print {
    .app-sidebar,
    .app-topbar,
    .student-navbar,
    .student-mobile-nav,
    .app-footer,
    .student-footer {
        display: none !important;
    }

    .app-main {
        margin-left: 0;
    }

    .app-content,
    .student-content {
        padding: 0;
    }

    body {
        background: #fff;
    }
}

/* =====================================================
   RTL OVERRIDES
===================================================== */

[dir="rtl"] .sidebar-link:hover {
    transform: translateX(-3px);
}

[dir="rtl"] .dropdown-item:hover {
    transform: translateX(-2px);
}

[dir="rtl"] .student-brand:hover {
    transform: translateX(2px);
}

[dir="rtl"] .app-sidebar {
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, .04);
    box-shadow: -4px 0 30px rgba(0, 0, 0, .08);
}

[dir="rtl"] .sidebar-link::before {
    left: auto;
    right: 0;
    border-radius: 3px 0 0 3px;
}

[dir="rtl"] .sidebar-link.active::before {
    transform: translateY(-50%) scaleY(1);
}

[dir="rtl"] .app-main {
    margin-left: 0;
    margin-right: 260px;
}

[dir="rtl"] .dropdown-menu-end {
    right: auto !important;
    left: 0 !important;
    text-align: right;
}

@media (max-width: 991.98px) {
    [dir="rtl"] .app-main {
        margin-right: 0;
    }
}

/* =====================================================
   URDU FONT SUPPORT
===================================================== */

body.am-lang-ur {
    font-family: var(--font-urdu) !important;
    line-height: 2.15;
}

body.am-lang-ur h1,
body.am-lang-ur h2,
body.am-lang-ur h3,
body.am-lang-ur h4,
body.am-lang-ur h5,
body.am-lang-ur h6,
body.am-lang-ur .brand-name,
body.am-lang-ur .btn,
body.am-lang-ur .nav-link,
body.am-lang-ur .topbar-heading strong,
body.am-lang-ur .sidebar-link,
body.am-lang-ur .form-label {
    font-family: var(--font-urdu) !important;
    line-height: 2;
}

body.am-lang-ur .btn {
    padding-top: .35rem;
    padding-bottom: .65rem;
}

body.am-lang-ur .table {
    line-height: 2.1;
}
@font-face {
    font-family: 'Jameel Noori Nastaleeq';
    src: url('https://cdn.jsdelivr.net/gh/Noori-spec/Jameel-Noori-Nastaleeq-Kasheeda-Font@main/jameel_noori_nastaleeq_kasheeda-webfont.woff2') format('woff2');
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

/* ============================================================================
   UI V3: FUTURISTIC RESPONSIVE SYSTEM
   Presentation-only layer. Existing application logic is untouched.
   ========================================================================== */

:root {
    --ui-surface: #ffffff;
    --ui-surface-2: #f8fafc;
    --ui-surface-3: #eef4f6;
    --ui-text: #172033;
    --ui-muted: #64748b;
    --ui-border: rgba(15, 23, 42, .09);
    --ui-shadow: 0 14px 40px rgba(15, 23, 42, .07);
    --ui-shadow-hover: 0 20px 55px rgba(15, 23, 42, .11);
    --ui-glow: rgba(13, 148, 136, .14);
}

html[data-theme="dark"], html[data-bs-theme="dark"] {
    --background: #071017;
    --background-alt: #0b1620;
    --card: #0e1b26;
    --card-glass: rgba(14, 27, 38, .88);
    --text: #edf7f7;
    --text-soft: #c8d8dc;
    --muted: #9bb0b8;
    --muted-light: #78909a;
    --border: #203541;
    --border-strong: #2d4653;
    --ui-surface: #0e1b26;
    --ui-surface-2: #0a151e;
    --ui-surface-3: #132531;
    --ui-text: #edf7f7;
    --ui-muted: #9bb0b8;
    --ui-border: rgba(181, 214, 221, .12);
    --ui-shadow: 0 16px 45px rgba(0, 0, 0, .28);
    --ui-shadow-hover: 0 22px 60px rgba(0, 0, 0, .38);
    --ui-glow: rgba(20, 184, 166, .13);
}

body {
    min-height: 100vh;
    color: var(--ui-text);
}

/* Top navigation controls */
.ui-controls {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.ui-control-btn {
    min-height: 40px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
    color: var(--ui-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .5rem .75rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .05);
}

.ui-control-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(13, 148, 136, .35);
    background: var(--ui-surface);
    box-shadow: 0 8px 25px var(--ui-glow);
    color: var(--primary);
}

.theme-toggle .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-dark,
html[data-bs-theme="dark"] .theme-toggle .theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-light,
html[data-bs-theme="dark"] .theme-toggle .theme-icon-light { display: inline-block; }

/* Bootstrap 5.3 component tokens */
html[data-bs-theme="dark"] {
    --bs-body-bg: #071017;
    --bs-body-color: #edf7f7;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #9bb0b8;
    --bs-tertiary-color: #78909a;
    --bs-border-color: #203541;
    --bs-heading-color: #ffffff;
    --bs-link-color: #5eead4;
    --bs-link-hover-color: #99f6e4;
    --bs-secondary-bg: #0e1b26;
    --bs-tertiary-bg: #132531;
    --bs-light-rgb: 14,27,38;
    --bs-dark-rgb: 237,247,247;
    --bs-white-rgb: 14,27,38;
}

html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .table-light,
html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .toast,
html[data-bs-theme="dark"] .accordion-item {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

html[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ui-text);
    --bs-table-border-color: var(--ui-border);
    --bs-table-striped-bg: rgba(255,255,255,.025);
    --bs-table-hover-bg: rgba(20,184,166,.055);
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .input-group-text,
html[data-bs-theme="dark"] textarea,
html[data-bs-theme="dark"] input,
html[data-bs-theme="dark"] select {
    background-color: #0a151e !important;
    border-color: #29414e !important;
    color: #edf7f7 !important;
}

html[data-bs-theme="dark"] .form-control::placeholder,
html[data-bs-theme="dark"] input::placeholder,
html[data-bs-theme="dark"] textarea::placeholder { color: #718894 !important; }
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 .25rem rgba(20,184,166,.12) !important;
}
html[data-bs-theme="dark"] .dropdown-item { color: var(--ui-text); }
html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus { background: rgba(20,184,166,.10); color: #fff; }
html[data-bs-theme="dark"] .dropdown-divider { border-color: var(--ui-border); }
html[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }
html[data-bs-theme="dark"] .text-dark { color: #edf7f7 !important; }
html[data-bs-theme="dark"] .text-muted { color: #9bb0b8 !important; }

/* Premium cards and page surfaces */
.card,
.stat-card,
.dashboard-card,
.content-card,
.profile-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
    overflow: hidden;
}

.card:hover,
.stat-card:hover,
.dashboard-card:hover,
.content-card:hover,
.profile-card:hover {
    box-shadow: var(--ui-shadow-hover);
}

.card-header {
    background: linear-gradient(135deg, var(--ui-surface), var(--ui-surface-2));
    border-bottom-color: var(--ui-border);
}

/* Futuristic accent line for major content */
.app-content > .card:first-child,
.student-content > .card:first-child {
    position: relative;
}

.app-content > .card:first-child::before,
.student-content > .card:first-child::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), #22c55e, transparent);
    opacity: .75;
}

/* Student experience */
.student-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    backdrop-filter: blur(18px) saturate(140%);
    background: color-mix(in srgb, var(--ui-surface) 88%, transparent) !important;
    border-bottom: 1px solid var(--ui-border) !important;
}

.student-content {
    min-height: calc(100vh - 70px);
    padding-top: clamp(1rem, 3vw, 2rem);
    padding-bottom: 2rem;
}

.student-brand,
.app-brand {
    letter-spacing: -.02em;
}

.brand-logo {
    box-shadow: 0 8px 24px var(--ui-glow);
}

/* Teacher/admin shell */
.app-sidebar {
    border-right: 1px solid rgba(255,255,255,.07);
    box-shadow: 12px 0 40px rgba(0,0,0,.08);
}

.app-topbar {
    backdrop-filter: blur(18px) saturate(140%);
    background: color-mix(in srgb, var(--ui-surface) 88%, transparent) !important;
    border-bottom: 1px solid var(--ui-border) !important;
}

.sidebar-link,
.topbar-icon,
.topbar-user {
    border-radius: 12px;
}

.sidebar-link:hover { transform: translateX(2px); }

/* Urdu / RTL typography */
html[lang="ur"],
html[dir="rtl"] {
    font-family: 'Jameel Noori Nastaleeq', 'Jameel Noori Nastaleeq Kasheeda', 'Noto Nastaliq Urdu', serif;
}

html[lang="ur"] body,
html[dir="rtl"] body,
html[lang="ur"] button,
html[dir="rtl"] button,
html[lang="ur"] input,
html[dir="rtl"] input,
html[lang="ur"] select,
html[dir="rtl"] select,
html[lang="ur"] textarea,
html[dir="rtl"] textarea {
    font-family: 'Jameel Noori Nastaleeq', 'Jameel Noori Nastaleeq Kasheeda', 'Noto Nastaliq Urdu', serif;
}

html[lang="ur"] body,
html[dir="rtl"] body {
    line-height: 2.05;
}

html[lang="ur"] .app-sidebar,
html[dir="rtl"] .app-sidebar { right: 0; left: auto; border-right: 0; border-left: 1px solid rgba(255,255,255,.07); }
html[lang="ur"] .app-main,
html[dir="rtl"] .app-main { margin-left: 0; margin-right: var(--sidebar-width, 270px); }
html[lang="ur"] .sidebar-link:hover,
html[dir="rtl"] .sidebar-link:hover { transform: translateX(-2px); }
html[lang="ur"] .dropdown-menu-end,
html[dir="rtl"] .dropdown-menu-end { right: auto !important; left: 0 !important; }
html[lang="ur"] .text-start,
html[dir="rtl"] .text-start { text-align: right !important; }
html[lang="ur"] .text-end,
html[dir="rtl"] .text-end { text-align: left !important; }
html[lang="ur"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; }
html[lang="ur"] .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; }
html[lang="ur"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[lang="ur"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[lang="ur"] .app-topbar,
html[dir="rtl"] .app-topbar { direction: rtl; }
html[lang="ur"] .topbar-left,
html[dir="rtl"] .topbar-left { flex-direction: row-reverse; }
html[lang="ur"] .topbar-right,
html[dir="rtl"] .topbar-right { flex-direction: row-reverse; }
html[lang="ur"] .student-nav-inner,
html[dir="rtl"] .student-nav-inner { direction: rtl; }
html[lang="ur"] .student-nav-actions,
html[dir="rtl"] .student-nav-actions { flex-direction: row-reverse; }
html[lang="ur"] table,
html[dir="rtl"] table { direction: rtl; }
html[lang="ur"] .form-check,
html[dir="rtl"] .form-check { padding-left: 0; padding-right: 1.5em; }
html[lang="ur"] .form-check .form-check-input,
html[dir="rtl"] .form-check .form-check-input { float: right; margin-left: 0; margin-right: -1.5em; }

/* Mobile-first refinements */
@media (max-width: 991.98px) {
    .ui-control-btn { min-height: 38px; padding: .42rem .62rem; }
    .theme-toggle .theme-label { display: none; }
    .top-user-text { display: none; }
    .student-content { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 575.98px) {
    .ui-controls { gap: .3rem; }
    .language-toggle span { font-size: .78rem; }
    .ui-control-btn { border-radius: 10px; padding: .38rem .52rem; }
    .student-navbar { padding: .65rem .75rem; }
    .student-brand { font-size: .94rem; }
    .student-content { padding: .9rem .75rem 5.5rem; }
    .app-content { padding-left: .75rem !important; padding-right: .75rem !important; }
    .card-body { padding: 1rem; }
    .table-responsive { border-radius: 12px; }
    .btn { min-height: 40px; }
    .btn-sm { min-height: 36px; }
    h1, .h1 { font-size: 1.55rem; }
    h2, .h2 { font-size: 1.35rem; }
    h3, .h3 { font-size: 1.2rem; }
}

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


/* ============================================================================
   UI V4: Production polish, mobile-first surfaces and complete theme tokens
   Presentation only. No business/application logic.
   ========================================================================== */
:root{--ui-radius:18px;--ui-radius-sm:12px;--ui-accent:#14b8a6;--ui-accent-2:#6366f1;--ui-focus:0 0 0 .24rem rgba(20,184,166,.18)}
body{overflow-x:hidden}.page-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--ui-border);border-radius:24px;background:linear-gradient(135deg,var(--ui-surface),color-mix(in srgb,var(--ui-surface-2) 80%,transparent));box-shadow:var(--ui-shadow);overflow:hidden}.page-hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;top:-130px;background:radial-gradient(circle,rgba(20,184,166,.16),transparent 68%);pointer-events:none}.page-hero.compact{padding:1.15rem 1.35rem}.page-hero h1{position:relative;z-index:1;margin:.35rem 0 .2rem;font-size:clamp(1.45rem,3vw,2.15rem);font-weight:850;letter-spacing:-.035em}.page-hero p{position:relative;z-index:1;margin:0;color:var(--ui-muted)}.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:.4rem;color:var(--primary);font-size:.72rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.hero-orb{position:relative;z-index:1;width:78px;height:78px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,var(--primary),#0f766e);color:#fff;font-size:2rem;box-shadow:0 18px 45px rgba(13,148,136,.25)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin:1.7rem 0 .8rem}.section-heading h2{margin:.1rem 0 0;font-size:1.18rem;font-weight:800;letter-spacing:-.02em}.session-card{position:relative;padding:1.25rem;border:1px solid var(--ui-border);border-radius:20px;background:var(--ui-surface);box-shadow:var(--ui-shadow);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.session-card:hover{transform:translateY(-3px);box-shadow:var(--ui-shadow-hover);border-color:rgba(20,184,166,.28)}.session-card-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.session-card h3{font-size:1.1rem;font-weight:800;margin:0 0 .4rem}.session-time,.session-meta{color:var(--ui-muted);font-size:.82rem}.session-meta{display:flex;flex-wrap:wrap;gap:1rem}.status-pill{display:inline-flex;align-items:center;gap:.42rem;border-radius:999px;padding:.32rem .65rem;font-size:.72rem;font-weight:800;background:var(--ui-surface-3);color:var(--ui-text);white-space:nowrap}.status-pill>span{width:6px;height:6px;border-radius:50%;background:currentColor}.status-live{color:#059669;background:rgba(16,185,129,.11)}.status-completed,.status-active,.status-present{color:#059669;background:rgba(16,185,129,.11)}.status-scheduled{color:#2563eb;background:rgba(59,130,246,.11)}.status-absent{color:#dc2626;background:rgba(239,68,68,.10)}.status-late,.status-warning{color:#d97706;background:rgba(245,158,11,.12)}.status-excused{color:#7c3aed;background:rgba(124,58,237,.11)}.btn-soft-primary{background:rgba(20,184,166,.10);color:var(--primary);border:1px solid rgba(20,184,166,.16)}.btn-soft-primary:hover{background:rgba(20,184,166,.17);color:var(--primary-dark)}.table-card,.content-card,.attendance-list{border:1px solid var(--ui-border);border-radius:18px;background:var(--ui-surface);box-shadow:var(--ui-shadow);overflow:hidden}.table-card .table{margin:0}.table-card .table thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ui-muted);font-weight:850;background:var(--ui-surface-2);border-bottom:1px solid var(--ui-border);padding:1rem}.table-card .table tbody td{padding:1rem;border-color:var(--ui-border);color:var(--ui-text)}.table-card .table tbody tr{transition:background .18s ease}.table-card .table tbody tr:hover{background:rgba(20,184,166,.035)}.empty-state-card{padding:2.2rem 1.2rem;text-align:center;border:1px dashed var(--ui-border);border-radius:18px;background:var(--ui-surface)}.empty-icon{width:52px;height:52px;margin:0 auto .8rem;border-radius:16px;display:grid;place-items:center;background:var(--ui-surface-3);color:var(--primary);font-size:1.35rem}.empty-state-card h3{font-size:1rem;margin:0;font-weight:750}.empty-table-state{padding:2rem;text-align:center;color:var(--ui-muted)}.card-section-title{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}.card-section-title h2{font-size:1rem;font-weight:800;margin:.05rem 0 0}.icon-box{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(20,184,166,.11);color:var(--primary)}.person-row,.student-person{display:flex;align-items:center;gap:.8rem}.person-row small,.student-person small{display:block;color:var(--ui-muted);margin-top:.15rem}.avatar-lg,.avatar-sm,.profile-avatar-xl{display:grid;place-items:center;border-radius:50%;font-weight:850;color:#0f766e;background:linear-gradient(135deg,#ccfbf1,#99f6e4)}.avatar-lg{width:48px;height:48px}.avatar-sm{width:36px;height:36px;min-width:36px;font-size:.8rem}.timeline-list{display:grid;gap:.2rem}.timeline-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--ui-border)}.timeline-item:last-child{border-bottom:0}.profile-layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:1rem}.profile-summary{overflow:hidden}.profile-cover{height:110px;background:linear-gradient(135deg,#0f766e,#14b8a6 55%,#6366f1);position:relative}.profile-body{padding:0 1.5rem 1.5rem;margin-top:-38px;position:relative}.profile-avatar-xl{width:76px;height:76px;border:5px solid var(--ui-surface);font-size:1.5rem}.profile-body h2{margin:1rem 0 .15rem;font-size:1.35rem}.profile-facts{display:grid;gap:.7rem}.profile-facts>div{padding:.75rem .85rem;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-surface-2)}.profile-facts span{display:block;font-size:.72rem;color:var(--ui-muted);margin-bottom:.2rem}.profile-facts strong{font-size:.9rem}.back-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:750;margin-bottom:.4rem}.attendance-list{padding:.35rem}.attendance-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem;border-bottom:1px solid var(--ui-border)}.attendance-row:last-child{border-bottom:0}.attendance-controls{display:grid;grid-template-columns:180px minmax(180px,260px);gap:.6rem}.form-control,.form-select{border-radius:12px;border-color:var(--ui-border);background:var(--ui-surface);color:var(--ui-text);min-height:44px}.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:var(--ui-focus)}.btn{border-radius:12px;font-weight:750}.dropdown-menu{border:1px solid var(--ui-border);border-radius:14px;box-shadow:var(--ui-shadow-hover);background:var(--ui-surface)}.alert{border-radius:14px;border-width:1px}.app-footer,.student-footer{color:var(--ui-muted)}
html[data-bs-theme="dark"]{color-scheme:dark}html[data-bs-theme="dark"] .page-hero{background:linear-gradient(135deg,#0d1a24,#10232e)}html[data-bs-theme="dark"] .btn-outline-secondary{color:#cbd5e1;border-color:#425563}html[data-bs-theme="dark"] .table-card .table thead th{background:#0a151e}html[data-bs-theme="dark"] .session-card:hover{border-color:rgba(45,212,191,.32)}html[data-bs-theme="dark"] .profile-avatar-xl{border-color:var(--ui-surface)}
html[lang="ur"] .page-hero,html[dir="rtl"] .page-hero{direction:rtl}html[lang="ur"] .page-hero h1,html[dir="rtl"] .page-hero h1,html[lang="ur"] .section-heading h2,html[dir="rtl"] .section-heading h2,html[lang="ur"] .session-card h3,html[dir="rtl"] .session-card h3{line-height:1.9}html[lang="ur"] .eyebrow,html[dir="rtl"] .eyebrow,html[lang="ur"] .section-kicker,html[dir="rtl"] .section-kicker{letter-spacing:0;text-transform:none}html[lang="ur"] .table-card .table thead th,html[dir="rtl"] .table-card .table thead th{letter-spacing:0}html[lang="ur"] .attendance-controls,html[dir="rtl"] .attendance-controls{direction:rtl}
@media(max-width:991.98px){.profile-layout{grid-template-columns:1fr}.page-hero{padding:1.1rem 1rem}.hero-orb{width:58px;height:58px;border-radius:18px;font-size:1.4rem}.attendance-row{align-items:stretch;flex-direction:column}.attendance-controls{grid-template-columns:1fr 1fr;width:100%}}
@media(max-width:767.98px){.page-hero{border-radius:18px}.page-hero h1{font-size:1.35rem}.hero-orb{display:none}.section-heading{align-items:center}.table-card{border-radius:15px}.table-card .table thead{display:none}.table-card .table,.table-card .table tbody,.table-card .table tr,.table-card .table td{display:block;width:100%}.table-card .table tbody tr{padding:.85rem;border-bottom:1px solid var(--ui-border)}.table-card .table tbody tr:last-child{border-bottom:0}.table-card .table tbody td{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .25rem;border:0;text-align:end}.table-card .table tbody td:before{content:attr(data-label);font-size:.72rem;font-weight:800;color:var(--ui-muted);text-align:start}.table-card .table tbody td[colspan]{display:block}.table-card .table tbody td[colspan]:before{display:none}.attendance-controls{grid-template-columns:1fr}.session-card{padding:1rem}.student-content{padding-bottom:5.8rem}.profile-body{padding-left:1rem;padding-right:1rem}}
@media(max-width:575.98px){.ui-control-btn{min-height:38px}.language-toggle span{display:none}.page-hero.compact{padding:1rem}.session-card-top{align-items:flex-start}.session-meta{gap:.55rem;flex-direction:column}.btn{min-height:42px}.content-card .card-body{padding:1rem!important}.table-card .table tbody td{font-size:.88rem}}


/* ==========================================================================
   v5 application extensions
   ========================================================================== */
[data-theme="dark"]{--background:#07111f;--background-alt:#0b1728;--card:#101d30;--card-glass:rgba(16,29,48,.86);--text:#edf5ff;--text-soft:#cbd5e1;--muted:#9fb0c4;--muted-light:#71839a;--border:#22334a;--border-strong:#334862;--shadow:0 8px 28px rgba(0,0,0,.22);--shadow-md:0 14px 36px rgba(0,0,0,.28);}
[data-theme="dark"] .card,[data-theme="dark"] .content-card,[data-theme="dark"] .table-card,[data-theme="dark"] .list-group-item,[data-theme="dark"] .dropdown-menu,[data-theme="dark"] .modal-content,[data-theme="dark"] .form-control,[data-theme="dark"] .form-select,[data-theme="dark"] .input-group-text,[data-theme="dark"] .accordion-item{background-color:var(--card)!important;color:var(--text);border-color:var(--border)!important}
[data-theme="dark"] .table{--bs-table-bg:transparent;--bs-table-color:var(--text);--bs-table-border-color:var(--border)}
[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-accent-bg:rgba(255,255,255,.025)}
[data-theme="dark"] .text-muted{color:var(--muted)!important}.form-control,.form-select{min-height:44px;border-radius:12px}.btn{border-radius:12px;font-weight:700}.topbar-quick-links{display:flex;gap:4px}.notification-menu{width:min(380px,calc(100vw - 24px));max-height:500px;overflow:hidden}.notification-menu-head{display:flex;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}.notification-menu-list{max-height:420px;overflow:auto}.notification-item{display:flex;gap:10px;padding:13px 15px;color:inherit;border-bottom:1px solid var(--border)}.notification-item:hover{background:rgba(13,148,136,.07)}.notification-item span:not(.notification-dot){display:flex;flex-direction:column;gap:2px}.notification-item small,.notification-item em{color:var(--muted);font-size:12px;font-style:normal}.notification-dot{width:8px;height:8px;border-radius:50%;background:transparent;margin-top:7px;flex:0 0 8px}.notification-item.unread .notification-dot{background:var(--primary);box-shadow:0 0 0 5px rgba(13,148,136,.12)}.notification-empty{padding:28px;text-align:center;color:var(--muted)}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px;border:1px solid var(--border);border-radius:14px;background:rgba(13,148,136,.03)}.setting-row span{display:flex;flex-direction:column}.setting-row small{color:var(--muted);margin-top:3px}.contact-item,.message-row,.attachment-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:14px;color:inherit;margin-bottom:8px;transition:var(--transition)}.contact-item:hover,.message-row:hover,.attachment-row:hover{transform:translateY(-1px);border-color:var(--primary);background:rgba(13,148,136,.04)}.contact-item>span:not(.avatar-sm),.message-row>span:not(.avatar-sm),.attachment-row>span{display:flex;flex-direction:column}.contact-item small,.message-row small,.attachment-row small{color:var(--muted);font-size:12px}.message-stream{display:flex;flex-direction:column;gap:12px;max-height:58vh;overflow:auto;padding:6px}.message-bubble{max-width:min(78%,700px);padding:12px 14px;border:1px solid var(--border);border-radius:18px;background:var(--card)}.message-bubble.mine{margin-left:auto;background:rgba(13,148,136,.12);border-color:rgba(13,148,136,.3)}.message-bubble.theirs{margin-right:auto}.message-meta{display:flex;gap:12px;justify-content:space-between;font-size:12px;margin-bottom:5px}.message-meta time{color:var(--muted)}.message-body{white-space:normal;word-break:break-word}.attachment-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;margin-top:8px;border-radius:10px;background:rgba(13,148,136,.09);font-size:12px}.meeting-frame-card{position:relative;background:#050b13;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);min-height:70vh}.meeting-frame-card iframe{width:100%;height:72vh;border:0;display:block;background:#000}.meeting-fallback{position:absolute;bottom:0;left:0;right:0;padding:10px 14px;background:rgba(0,0,0,.78);color:#fff;font-size:12px;text-align:center}.profile-avatar-xl{overflow:hidden;display:flex;align-items:center;justify-content:center}.profile-avatar-xl img{width:100%;height:100%;object-fit:cover}.profile-avatar-xl i{font-size:42px}.avatar-sm{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-weight:800;flex:0 0 38px}.attachment-row i:first-child{font-size:22px;color:var(--primary)}
html[dir="rtl"] .message-bubble.mine{margin-left:0;margin-right:auto}html[dir="rtl"] .message-bubble.theirs{margin-right:0;margin-left:auto}html[dir="rtl"] .dropdown-menu{ text-align:right }html[dir="rtl"] .topbar-quick-links{direction:rtl}
@media(max-width:767.98px){body{font-size:14px}.app-content{padding:16px!important}.page-hero{padding:20px!important}.page-hero h1{font-size:1.55rem}.table-responsive table{min-width:680px}.message-bubble{max-width:92%}.meeting-frame-card{min-height:65vh}.meeting-frame-card iframe{height:65vh}.meeting-fallback{position:static}.notification-menu{position:fixed!important;top:64px!important;right:8px!important;left:8px!important;width:auto!important}.top-user-text{display:none}.topbar-right{gap:4px}.topbar-quick-links .topbar-icon{display:none}.content-card .card-body{padding:16px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.top-avatar{overflow:hidden}.top-avatar img{width:100%;height:100%;object-fit:cover}.activity-mini{border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px}.activity-mini small{color:var(--muted)}.table-tools .table-search-box{max-width:320px}

/* =========================================================
   v6 communication + responsive control center
========================================================= */
:root{--app-bg:var(--background);--app-surface:var(--card);--app-border:var(--border);--app-text:var(--text)}
[data-theme="dark"]{--background:#07111f;--background-alt:#0b1727;--card:#101c2d;--card-glass:rgba(16,28,45,.88);--text:#edf6ff;--text-soft:#d2dfeb;--muted:#9fb0c3;--border:#23364d;--border-strong:#35506d;--sidebar:#050b14}
html[dir="rtl"] body{font-family:'Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif;line-height:2.05}html[dir="rtl"] .form-control,html[dir="rtl"] .form-select,html[dir="rtl"] .btn,html[dir="rtl"] .dropdown-menu,html[dir="rtl"] input,html[dir="rtl"] textarea{font-family:'Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif}html[dir="rtl"] .bi{line-height:1}
.site-header{position:sticky;top:0;z-index:1030;background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);box-shadow:0 8px 30px rgba(0,0,0,.06)}.site-header-inner{min-height:72px;display:flex;align-items:center;gap:20px}.site-brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:800;white-space:nowrap}.brand-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#14b8a6,#0f766e);box-shadow:0 8px 24px rgba(13,148,136,.3)}.main-nav{gap:4px;flex:1}.main-nav a{display:inline-flex;align-items:center;gap:7px;padding:9px 11px;border-radius:10px;color:var(--muted);font-weight:600}.main-nav a:hover,.main-nav a.active{background:var(--background-alt);color:var(--primary)}.header-actions{margin-left:auto;display:flex;align-items:center;gap:7px}.header-action,.header-icon{border:1px solid transparent;background:transparent;color:var(--text);min-height:40px;padding:7px 10px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;position:relative}.header-action:hover,.header-icon:hover{background:var(--background-alt);border-color:var(--border)}.header-icon{width:42px;font-size:18px}.header-icon span{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#ef4444;color:#fff;font-size:10px;display:grid;place-items:center;font-weight:800}.profile-trigger{border:0;background:transparent;display:flex;align-items:center;gap:8px;padding:4px 7px;color:var(--text)}.profile-trigger small,.profile-trigger strong{display:block;line-height:1.2}.profile-trigger small{color:var(--muted);font-size:11px}.avatar{display:inline-grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--primary-light);color:var(--primary-dark);flex:0 0 auto}.avatar img{width:100%;height:100%;object-fit:cover}.avatar-sm{width:36px;height:36px}.avatar-md{width:46px;height:46px}.notification-popover{width:min(390px,calc(100vw - 24px));border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-lg);padding:0;overflow:hidden}.notification-popover-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:12px}.notification-popover-body{max-height:420px;overflow:auto}.notification-mini{display:flex;gap:10px;padding:12px 15px;color:var(--text);border-bottom:1px solid var(--border)}.notification-mini:hover,.notification-mini.unread{background:var(--background-alt)}.notification-mini-icon{width:34px;height:34px;border-radius:10px;background:var(--primary-light);display:grid;place-items:center;color:var(--primary-dark)}.notification-mini strong,.notification-mini small,.notification-mini time{display:block}.notification-mini small{color:var(--muted);margin-top:2px}.notification-mini time{font-size:11px;color:var(--muted-light);margin-top:4px}.empty-mini{padding:28px 18px;color:var(--muted);display:flex;gap:8px;justify-content:center;align-items:center}.mobile-nav{position:fixed;z-index:1025;left:10px;right:10px;bottom:10px;padding:7px;background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);display:flex;justify-content:space-around}.mobile-nav a{position:relative;color:var(--muted);display:flex;flex-direction:column;align-items:center;font-size:11px;gap:2px;padding:6px 9px}.mobile-nav a i{font-size:18px}.mobile-nav a:hover{color:var(--primary)}.mobile-nav b{position:absolute;top:0;right:1px;background:#ef4444;color:#fff;border-radius:10px;font-size:9px;padding:1px 5px}.site-main{min-height:calc(100vh - 140px);background:var(--background)}.app-container{max-width:1600px;margin:auto;padding:28px clamp(14px,2.5vw,38px)}.site-footer{border-top:1px solid var(--border);background:var(--card);color:var(--muted);padding:22px 0}.site-footer .app-container{display:flex;justify-content:space-between;gap:20px;align-items:center}.site-footer nav{display:flex;gap:18px;flex-wrap:wrap}.site-footer a{color:var(--muted)}.content-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.table-toolbar{padding:16px 18px;display:flex;justify-content:space-between;gap:14px;align-items:center;border-bottom:1px solid var(--border)}.table-search{max-width:300px}.user-cell{display:flex;align-items:center;gap:9px}.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.permission-card{display:flex;gap:10px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--background);cursor:pointer}.permission-card span{display:flex;flex-direction:column}.permission-card small{color:var(--muted);margin-top:2px}.admin-control-badge{border:1px solid var(--border);border-radius:999px;padding:8px 12px;background:var(--card);color:var(--muted);font-size:12px}.setting-row{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:15px 0;border-bottom:1px solid var(--border)}.setting-row:last-child{border-bottom:0}.setting-row small{display:block;color:var(--muted);margin-top:3px}.settings-form .form-check-input{width:2.6em;height:1.35em}.sticky-save{position:sticky;bottom:15px;display:flex;justify-content:flex-end;padding-top:18px;pointer-events:none}.sticky-save .btn{pointer-events:auto;box-shadow:var(--shadow-lg)}.chat-list{padding:8px}.chat-row{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:14px;color:var(--text);border-bottom:1px solid var(--border)}.chat-row:hover{background:var(--background-alt)}.chat-row-main{min-width:0;flex:1}.chat-preview{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.chat-row-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:11px;color:var(--muted)}.chat-row-meta b{background:var(--primary);color:#fff;border-radius:10px;padding:2px 7px}.chat-unread .chat-preview,.chat-unread strong{font-weight:700;color:var(--text)}.chat-thread-card{overflow:hidden}.chat-thread-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}.chat-thread-head small{display:block;color:var(--muted)}.message-stream{padding:22px;max-height:62vh;overflow:auto;background:linear-gradient(180deg,var(--background-alt),var(--card))}.message-bubble{max-width:min(720px,88%);padding:13px 15px;border:1px solid var(--border);border-radius:17px;margin-bottom:12px;background:var(--card);box-shadow:var(--shadow-xs)}.message-bubble.mine{margin-left:auto;background:var(--primary);color:#fff;border-color:transparent;border-bottom-right-radius:5px}.message-bubble.theirs{border-bottom-left-radius:5px}.message-meta{display:flex;justify-content:space-between;gap:15px;font-size:11px;margin-bottom:7px}.message-meta time{opacity:.7}.message-composer{padding:16px;border-top:1px solid var(--border);background:var(--card)}.composer-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}.attachment-chip{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:7px 10px;border-radius:10px;background:var(--background-alt);color:var(--text);font-size:12px}.attachment-chip small{color:var(--muted)}.crop-stage{height:min(60vw,420px);background:#0b1220;border-radius:16px;display:grid;place-items:center;overflow:hidden}.crop-stage img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .1s}.profile-avatar-xl{width:116px;height:116px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--primary-light);color:var(--primary-dark);font-size:42px}.profile-avatar-xl img{width:100%;height:100%;object-fit:cover}
@media(max-width:991.98px){.site-header-inner{min-height:64px}.main-nav{display:none}.app-container{padding-bottom:92px}.site-footer .app-container{flex-direction:column;align-items:flex-start}.permission-grid{grid-template-columns:1fr}.header-action span.theme-label{display:none}.brand-title{max-width:150px;overflow:hidden;text-overflow:ellipsis}.message-stream{max-height:none}.chat-thread-head{position:sticky;top:0;z-index:2;background:var(--card)}}
@media(max-width:575.98px){.site-header-inner{gap:6px}.brand-title{display:none}.language-action span{display:none}.header-actions{gap:2px}.header-icon{width:38px}.profile-trigger>i,.profile-trigger>span+span{display:none}.notification-popover{position:fixed!important;top:68px!important;right:8px!important;left:8px!important;width:auto}.page-hero h1{font-size:1.65rem}.table-toolbar{align-items:stretch;flex-direction:column}.table-search{max-width:none}.chat-row{padding:12px 7px}.chat-row-meta time{font-size:10px}.message-bubble{max-width:94%}.composer-tools .btn-primary{width:100%}.site-footer nav{gap:12px}.profile-layout{display:block}}

.table-shell{padding:14px 16px}.table-auto-search{max-width:320px}.table-shell .table{margin-bottom:0}@media(max-width:575.98px){.table-shell{padding:10px}.table-shell .table{font-size:12px}.table-shell .table th,.table-shell .table td{white-space:nowrap}}
.error-page{text-align:center;max-width:720px;margin:8vh auto;padding:48px 22px}.error-orbit{width:84px;height:84px;margin:0 auto 18px;border-radius:26px;display:grid;place-items:center;font-size:34px;color:#fff;background:linear-gradient(135deg,#0f766e,#14b8a6);box-shadow:0 18px 50px rgba(13,148,136,.28)}.error-code{font-size:clamp(5rem,15vw,9rem);line-height:.9;font-weight:900;letter-spacing:-.08em;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}.error-page h1{margin-top:16px}.error-page p{color:var(--muted);max-width:520px;margin:10px auto 25px}
/* v7 shell refinements */
:root{--sidebar-width:260px}
.app-topbar{min-height:72px;position:sticky;top:0;z-index:1030;display:flex;align-items:center;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(18px)}
.topbar-inner{width:100%;padding:0 clamp(14px,2.5vw,32px);display:flex;align-items:center;gap:14px}.topbar-title{font-size:1rem;font-weight:800;color:var(--text);text-decoration:none}.topbar-actions{display:flex;align-items:center;gap:6px}.topbar-action,.topbar-icon,.topbar-user,.mobile-menu-btn{border:1px solid transparent;background:transparent;color:var(--text);min-height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 10px;text-decoration:none}.topbar-action:hover,.topbar-icon:hover,.topbar-user:hover,.mobile-menu-btn:hover{background:var(--background-alt);border-color:var(--border)}.topbar-icon{width:42px;position:relative}.topbar-icon b{position:absolute;top:-2px;right:-2px;background:#ef4444;color:#fff;border-radius:10px;font-size:10px;padding:1px 5px}.topbar-user{border-color:var(--border);padding:4px 8px}.topbar-user strong,.topbar-user small{display:block;text-align:start;line-height:1.2}.topbar-user small{font-size:10px;color:var(--muted)}.mobile-menu-btn{font-size:1.25rem}.public-header{position:sticky;top:0;z-index:1030;background:var(--card);border-bottom:1px solid var(--border)}.public-header-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 clamp(14px,3vw,38px)}.mobile-nav-panel{width:min(330px,88vw);background:var(--sidebar);color:#fff}.mobile-nav-panel .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.08)}.mobile-nav-panel .sidebar-nav{padding:12px}.mobile-nav-panel .sidebar-link{color:#cbd5e1!important}.mobile-nav-panel .sidebar-link:hover{color:#fff!important}.app-main{margin-left:var(--sidebar-width)}html[dir=rtl] .app-sidebar{left:auto;right:0;border-right:0;border-left:1px solid rgba(255,255,255,.07)}html[dir=rtl] .app-main{margin-left:0;margin-right:var(--sidebar-width)}html[dir=rtl] .sidebar-link::before{left:auto;right:0;border-radius:3px 0 0 3px}html[dir=rtl] .sidebar-link:hover{transform:translateX(-2px)}
html[lang=ur] body,html[lang=ur] button,html[lang=ur] input,html[lang=ur] select,html[lang=ur] textarea{font-family:'Jameel Noori Nastaleeq','Jameel Noori Nastaleeq Kasheeda','Noto Nastaliq Urdu',serif}.accordion-button:focus{box-shadow:none}.settings-form .accordion-button{font-weight:700}.settings-form .accordion-item{overflow:hidden}
@media(max-width:991.98px){.app-sidebar{display:none}.app-main,html[dir=rtl] .app-main{margin:0}.app-topbar{min-height:64px}.app-container{padding-bottom:28px}.site-footer .app-container{flex-direction:column;align-items:flex-start}.topbar-action span{display:none}.topbar-user{border:0}.topbar-title{font-size:.92rem}}
@media(max-width:575.98px){.topbar-inner{padding:0 10px}.topbar-actions{gap:2px}.topbar-icon{width:38px}.public-header-inner{padding:0 10px}.public-header .header-actions{gap:3px}.public-header .header-action span{display:none}.brand-title{display:none}.app-container{padding-left:10px;padding-right:10px}.settings-form .card-body{padding:1rem!important}.setting-row{gap:10px}}

/* Landing / public portal */
.public-nav a{color:var(--text);text-decoration:none;font-size:.9rem;font-weight:700}.public-nav a:hover{color:var(--primary)}
.landing-hero{position:relative;overflow:hidden}.landing-hero:before{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(20,184,166,.14),transparent 68%);pointer-events:none}.landing-visual{position:relative;min-height:430px;display:grid;place-items:center}.landing-window{position:relative;z-index:2;width:min(100%,430px);padding:1.2rem;border:1px solid var(--border);border-radius:26px;background:color-mix(in srgb,var(--card) 92%,transparent);box-shadow:0 28px 80px rgba(15,23,42,.16);backdrop-filter:blur(18px)}.landing-orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-one{width:180px;height:180px;top:10%;left:5%;background:rgba(20,184,166,.18)}.orb-two{width:230px;height:230px;right:0;bottom:5%;background:rgba(99,102,241,.14)}.landing-class{display:flex;align-items:center;gap:.75rem;padding:.9rem 0;border-top:1px solid var(--border)}.landing-class:first-of-type{border-top:0}.landing-class>div{min-width:0;flex:1}.landing-class strong,.landing-class small{display:block}.landing-class small{color:var(--muted);margin-top:.15rem}.landing-trust{height:100%;padding:1rem;border:1px solid var(--border);border-radius:16px;background:var(--card);display:flex;flex-direction:column;gap:.25rem}.landing-trust i{color:var(--primary);font-size:1.2rem;margin-bottom:.2rem}.landing-trust span{color:var(--muted)}.landing-cta{padding:2rem;border:1px solid var(--border);border-radius:24px;background:linear-gradient(135deg,var(--card),var(--background-alt));box-shadow:var(--shadow)}.auth-page{min-height:calc(100vh - 160px)}.auth-card{max-width:560px;margin-left:auto}.auth-feature{display:flex;gap:.8rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--border)}.auth-feature:last-child{border-bottom:0}.auth-feature i{color:var(--primary);font-size:1.25rem}.auth-feature strong,.auth-feature span{display:block}.auth-feature span{color:var(--muted);font-size:.9rem;margin-top:.15rem}.legal-copy{line-height:1.75}.legal-copy h2{font-size:1.12rem;font-weight:800;margin:1.8rem 0 .55rem}.legal-copy h2:first-child{margin-top:0}.legal-copy p{color:var(--text)}
@media(max-width:767.98px){.landing-hero{padding-top:1rem!important}.landing-hero h1{font-size:2.35rem}.landing-visual{min-height:340px}.landing-window{width:94%}.auth-page{padding-top:1rem!important}.auth-card{max-width:none}.landing-cta{padding:1.4rem}}

/* =========================================================
   Public Quran learning experience
   ========================================================= */
.quran-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 15% 15%,rgba(15,118,110,.13),transparent 34%),radial-gradient(circle at 90% 10%,rgba(245,158,11,.10),transparent 30%),var(--bs-body-bg);border-bottom:1px solid var(--app-border,#e5e7eb)}
.quran-hero:after{content:"";position:absolute;inset:auto -10% -140px;height:280px;background:var(--bs-body-bg);border-radius:50% 50% 0 0/100% 100% 0 0;opacity:.55}
.quran-hero>.container{position:relative;z-index:2}
.hero-points{display:flex;flex-wrap:wrap;gap:1rem;color:var(--bs-secondary-color);font-size:.94rem}
.hero-points span{display:inline-flex;align-items:center;gap:.4rem}.hero-points i{color:#0f766e}
.landing-slider{position:relative}.landing-slider .carousel-inner{border:1px solid rgba(255,255,255,.35)}
.landing-slider .carousel-indicators{bottom:.8rem}.landing-slider .carousel-control-prev,.landing-slider .carousel-control-next{width:12%}
.section-heading{max-width:760px}.section-heading h2,.quran-section-soft h2,.cta-panel h2{font-weight:800;letter-spacing:-.02em}
.section-kicker{display:inline-block;color:#0f766e;font-size:.78rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-bottom:.55rem}
.feature-card,.mini-feature,.contact-highlight{border:1px solid var(--app-border,#e5e7eb);background:var(--bs-body-bg);border-radius:1.25rem;padding:1.5rem;box-shadow:0 .6rem 2rem rgba(15,23,42,.05);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.feature-card:hover{transform:translateY(-5px);box-shadow:0 1rem 2.4rem rgba(15,23,42,.09);border-color:rgba(15,118,110,.3)}
.feature-card p,.mini-feature span{color:var(--bs-secondary-color);margin-bottom:0}.feature-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(15,118,110,.10);color:#0f766e;font-size:1.3rem;margin-bottom:1rem}
.quran-section-soft{background:linear-gradient(180deg,rgba(15,118,110,.045),rgba(15,118,110,.015));border-top:1px solid var(--app-border,#e5e7eb);border-bottom:1px solid var(--app-border,#e5e7eb)}
.mini-feature{padding:1.1rem;height:100%;box-shadow:none}.mini-feature i{display:block;color:#0f766e;font-size:1.25rem;margin-bottom:.55rem}.mini-feature strong,.mini-feature span{display:block}.mini-feature span{font-size:.9rem;margin-top:.25rem}
.cta-panel{border:1px solid rgba(15,118,110,.18);border-radius:1.5rem;background:linear-gradient(135deg,rgba(15,118,110,.09),rgba(245,158,11,.07));box-shadow:0 1rem 3rem rgba(15,23,42,.06)}
.public-hero-section{background:radial-gradient(circle at 80% 10%,rgba(15,118,110,.11),transparent 32%),var(--bs-body-bg);border-bottom:1px solid var(--app-border,#e5e7eb)}
.about-list{display:grid;gap:1rem}.about-list>div{display:flex;gap:.9rem;align-items:flex-start}.about-list i{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(15,118,110,.1);color:#0f766e;flex:0 0 40px}.about-list strong,.about-list span{display:block}.about-list span span{color:var(--bs-secondary-color);font-size:.9rem;margin-top:.15rem}
.contact-highlight{background:linear-gradient(135deg,#0f766e,#164e63);color:#fff;border:0;display:flex;flex-direction:column;gap:.55rem}.contact-highlight i{font-size:2rem}.contact-highlight span{opacity:.85}
html[dir="rtl"] .hero-points{flex-direction:row-reverse}html[dir="rtl"] .feature-icon{margin-left:0;margin-right:0}
@media (max-width:767.98px){.quran-hero h1{font-size:2.35rem}.quran-hero .lead{font-size:1.02rem}.hero-points{gap:.6rem;flex-direction:column}.landing-slider{margin-top:1rem}.feature-card{padding:1.25rem}.public-hero-section h1{font-size:2.35rem}}
@media (prefers-reduced-motion:reduce){.feature-card{transition:none}.carousel{transition:none}}
.public-footer{background:var(--bs-body-bg);border-top:1px solid var(--app-border,#e5e7eb)}.public-footer .brand-title{font-weight:800}.public-footer h6{font-weight:800;margin-bottom:.9rem}.footer-links{display:flex;flex-direction:column;gap:.55rem}.footer-links a{color:var(--bs-secondary-color);text-decoration:none}.footer-links a:hover{color:#0f766e}.public-footer .site-brand{color:var(--bs-emphasis-color)}
/* Urdu typography: Jameel Noori Nastaleeq webfont with Noto fallback. */
@font-face{font-family:'Jameel Noori Nastaleeq';src:url('https://cdn.jsdelivr.net/gh/tariq-abdullah/urdu-web-font-CDN/JameelNooriNastaleeq.woff') format('woff');font-display:swap}
html[lang="ur"],html[lang="ur"] body,html[lang="ur"] .urdu-text{font-family:'Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif;line-height:2;}
html[lang="ur"] .btn,html[lang="ur"] .form-control,html[lang="ur"] .form-select,html[lang="ur"] input,html[lang="ur"] textarea{font-family:'Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif;}

/* Class management polish */
.class-detail-hero{background:linear-gradient(135deg,var(--ui-surface,#fff),var(--ui-surface-2,#f8fafc));}
.stat-card{display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;border:1px solid var(--ui-border,var(--border));border-radius:18px;background:var(--ui-surface,var(--card));box-shadow:var(--ui-shadow,var(--shadow));height:100%;}
.stat-card .stat-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:rgba(20,184,166,.11);color:var(--primary);font-size:1.15rem;flex:0 0 44px;}
.stat-card small,.roster-row small{display:block;color:var(--ui-muted,var(--muted));font-size:.74rem;}
.stat-card strong{display:block;margin-top:.15rem;font-size:.94rem;}
.student-roster{display:grid;gap:.45rem;max-height:360px;overflow:auto;}
.roster-row{display:flex;align-items:center;gap:.75rem;padding:.65rem .7rem;border:1px solid var(--ui-border,var(--border));border-radius:14px;background:var(--ui-surface-2,#f8fafc);}
.roster-row strong{font-size:.88rem;}
.resource-upload-form{padding:1rem;border:1px dashed var(--ui-border,var(--border));border-radius:16px;background:rgba(20,184,166,.025);}
.resource-upload-form .form-select[multiple]{min-height:110px;}
@media(max-width:767.98px){.class-detail-hero{align-items:flex-start;flex-direction:column}.stat-card{min-height:78px}.resource-upload-form .btn{width:100%;}.roster-row{padding:.7rem .6rem;}}

/* Final public footer */
.public-footer-dark{background:#0b1220!important;color:#cbd5e1!important;border-top:1px solid rgba(255,255,255,.08)!important}
.public-footer-dark .brand-title,.public-footer-dark h6{color:#fff!important}
.public-footer-dark p,.public-footer-dark .text-secondary{color:#94a3b8!important}
.public-footer-dark .footer-links a{color:#cbd5e1!important}
.public-footer-dark .footer-links a:hover{color:#5eead4!important}
.public-footer-dark hr{border-color:rgba(255,255,255,.1)!important}

/* Class details responsive polish */
.class-detail-hero{gap:1.5rem}
.class-detail-hero form{position:relative;z-index:2}
.resource-list{display:grid;gap:.55rem}
.resource-upload-form label{font-weight:700;font-size:.82rem}
.resource-upload-form .form-text{font-size:.72rem}
@media(max-width:767.98px){.class-detail-hero form{width:100%}.class-detail-hero form .btn{width:100%}.resource-upload-form .form-select[multiple]{min-height:125px}}
.resource-tabs .nav-link{font-weight:800;color:var(--ui-muted,var(--muted));border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:.65rem 1rem}
.resource-tabs .nav-link.active{color:var(--primary);border-bottom-color:var(--primary);background:transparent}
.sidebar-profile .profile-avatar img{width:40px!important;height:40px!important;max-width:40px!important;max-height:40px!important;object-fit:cover!important;border-radius:50%!important;}