/* NOON Student Portal - responsive visual refresh */
:root {
    --noon-primary: #ad172b;
    --noon-primary-dark: #861222;
    --noon-navy: #17365d;
    --noon-ink: #1f2937;
    --noon-muted: #718096;
    --noon-bg: #f6f8fb;
    --noon-card: #ffffff;
    --noon-border: #e8edf3;
    --noon-radius: 18px;
    --noon-shadow: 0 10px 30px rgba(23, 54, 93, .08);
}

body.noon-student-portal { background: var(--noon-bg); }
body.noon-student-portal #navbar { position: sticky; top: 0; z-index: 560; }
body.noon-student-portal .panel-content { background: var(--noon-bg); min-height: calc(100vh - 64px); width: calc(100% - 270px); }

/* Student top navigation */
.noon-student-topbar { min-height: 64px !important; background: rgba(255,255,255,.96) !important; border-bottom: 1px solid var(--noon-border); box-shadow: 0 4px 18px rgba(23,54,93,.05); }
.noon-student-topbar .container-fluid { max-width: 1600px; margin: auto; }
.noon-student-topbar .navbar-brand img { width: 142px; height: 46px; object-fit: contain; float: right; }
.noon-student-topbar .student-top-user { display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:14px; background:#f8fafc; }
.noon-student-topbar .student-top-user img { width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.1); }
.noon-student-topbar .student-top-user strong { color:var(--noon-navy); font-size:13px; }
.noon-student-topbar .student-top-logout { display:inline-flex; align-items:center; gap:7px; color:var(--noon-primary); font-weight:700; padding:9px 13px; border-radius:12px; background:#fff3f5; }
.noon-student-topbar .student-top-logout:hover { background:#ffe7eb; color:var(--noon-primary-dark); }

/* Dashboard */
.noon-dashboard { max-width: 1500px; margin: 0 auto; }
.noon-dashboard .dashboard-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.noon-dashboard .dashboard-heading h1 { margin:0; color:var(--noon-navy); font-size:30px; font-weight:800; letter-spacing:-.4px; }
.noon-dashboard .dashboard-heading p { margin:7px 0 0; color:var(--noon-muted); font-size:14px; }
.noon-dashboard .welcome-chip { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; background:#fff; border:1px solid var(--noon-border); border-radius:999px; color:var(--noon-navy); font-weight:700; font-size:13px; }
.noon-dashboard .welcome-chip i { color:var(--noon-primary); }

.noon-info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:28px; }
.noon-info-card { background:var(--noon-card); border:1px solid var(--noon-border); border-radius:var(--noon-radius); box-shadow:var(--noon-shadow); min-height:245px; padding:20px; display:flex; flex-direction:column; overflow:hidden; }
.noon-info-card .info-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.noon-info-card .info-title { display:flex; align-items:center; gap:10px; color:var(--noon-navy); font-size:16px; font-weight:800; }
.noon-info-card .info-icon { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:#fff0f2; color:var(--noon-primary); }
.noon-info-card .info-link { color:var(--noon-primary); font-size:12px; font-weight:800; }
.noon-info-card .info-list { flex:1; overflow:auto; padding:0; margin:0; list-style:none; }
.noon-info-card .info-list li { border-top:1px solid #f0f2f5; padding:12px 0; }
.noon-info-card .info-list li:first-child { border-top:0; }
.noon-info-card .info-list a { display:block; color:var(--noon-ink); text-decoration:none; }
.noon-info-card .info-item-title { font-size:13px; font-weight:700; line-height:1.5; margin:0; }
.noon-info-card .info-meta { color:#98a2b3; font-size:11px; margin-top:4px; }
.noon-empty { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#9aa4b2; gap:8px; text-align:center; }
.noon-empty i { font-size:22px; color:#c4cad3; }

.noon-section-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:6px 0 15px; }
.noon-section-head h2 { margin:0; color:var(--noon-navy); font-size:19px; font-weight:800; }
.noon-section-head span { color:#8a94a4; font-size:12px; }
.noon-menu-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.noon-menu-card { min-width:0; }
.noon-menu-card a { display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--noon-border); border-radius:16px; padding:18px; box-shadow:0 7px 22px rgba(23,54,93,.055); text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.noon-menu-card a:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(23,54,93,.11); border-color:#e2c1c7; }
.noon-menu-icon { width:54px; height:54px; border-radius:15px; background:linear-gradient(135deg,#fff1f3,#f9f4f5); display:grid; place-items:center; margin-bottom:14px; }
.noon-menu-icon img { width:34px !important; height:34px !important; object-fit:contain; }
.noon-menu-card h3 { margin:0; color:var(--noon-navy); font-size:14px; font-weight:800; line-height:1.45; }
.noon-menu-card p { margin:6px 0 0; color:#8b95a5; font-size:11px; line-height:1.5; }
.noon-menu-arrow { margin-top:auto; padding-top:14px; color:#b7bec9; font-size:12px; }

/* Sidebar */
.noon-student-sidebar { top:64px; padding:22px 14px 18px !important; width:270px; background:#fff; border-right:1px solid var(--noon-border); box-shadow:8px 0 25px rgba(23,54,93,.035); }
.rtl .noon-student-sidebar { border-right:0; border-left:1px solid var(--noon-border); }
.noon-student-sidebar .panel-sidebar-close { top:14px; right:14px; }
.rtl .noon-student-sidebar .panel-sidebar-close { left:14px; right:auto; }
.noon-sidebar-profile { padding:14px; margin:0 2px 16px; border-radius:17px; background:linear-gradient(145deg,#fff7f8,#f8fafc); border:1px solid var(--noon-border); text-align:center; }
.noon-sidebar-profile .user-avatar { width:76px !important; height:76px !important; margin:0 auto; display:block; }
.noon-sidebar-profile .user-name { margin-top:10px !important; }
.noon-sidebar-profile .user-name h3 { color:var(--noon-navy); font-size:14px !important; }
.noon-sidebar-profile .create-new-user { display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; background:#fff; border:1px solid var(--noon-border); padding:6px 9px; }
.noon-student-sidebar .sidebar-menu { height:calc(100% - 145px) !important; padding:2px 2px 30px; }
.noon-student-sidebar .sidebar-menu .sidenav-item { padding:3px 0 !important; }
.noon-student-sidebar .sidebar-menu .sidenav-item > .noon-sidebar-link { display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:12px; color:#526070; transition:background .18s ease,color .18s ease; }
.noon-student-sidebar .sidebar-menu .sidenav-item > .noon-sidebar-link:hover { background:#fff2f4; color:var(--noon-primary); }
.noon-student-sidebar .sidebar-menu .sidenav-item > .noon-sidebar-link.active { background:#fff0f2; color:var(--noon-primary); font-weight:800; }
.noon-sidebar-link .noon-sidebar-icon { width:34px; height:34px; min-width:34px; border-radius:10px; display:grid; place-items:center; background:#f7f8fa; }
.noon-sidebar-link .noon-sidebar-icon img { width:22px !important; height:22px !important; object-fit:contain; }
.noon-sidebar-link .noon-sidebar-text { flex:1; min-width:0; font-size:12px; line-height:1.35; }
.noon-sidebar-link .noon-sidebar-chevron { font-size:10px; opacity:.55; }

/* Mobile sidebar trigger */
.noon-student-mobilebar { position:fixed; top:64px; left:0; right:0; z-index:480; background:#fff; border-bottom:1px solid var(--noon-border); padding:9px 14px; box-shadow:0 4px 15px rgba(23,54,93,.05); }
.noon-student-mobilebar .sidebar-toggler { border:1px solid var(--noon-border) !important; border-radius:11px !important; background:#f8fafc; color:var(--noon-navy); padding:8px 12px !important; }

/* Login */
.noon-login-page { min-height:100vh; background:radial-gradient(circle at 10% 10%,#fff4f6 0,transparent 34%),linear-gradient(135deg,#f8fafc,#f3f6fa); display:flex; align-items:center; justify-content:center; padding:28px 16px; }
.noon-login-shell { width:min(1040px,100%); min-height:620px; display:grid; grid-template-columns:1fr 1fr; background:#fff; border:1px solid var(--noon-border); border-radius:26px; overflow:hidden; box-shadow:0 24px 70px rgba(23,54,93,.12); }
.noon-login-visual { position:relative; min-height:620px; background:linear-gradient(145deg,#8d1527,#c12840); overflow:hidden; }
.noon-login-visual:before,.noon-login-visual:after { content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.09); }
.noon-login-visual:before { width:330px; height:330px; right:-130px; top:-80px; }
.noon-login-visual:after { width:240px; height:240px; left:-100px; bottom:-80px; }
.noon-login-visual img { width:100%; height:100%; object-fit:cover; opacity:.25; }
.noon-login-visual-content { position:absolute; inset:0; padding:45px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(180deg,transparent 25%,rgba(50,4,13,.55)); }
.noon-login-visual-content img.logo { width:165px; height:auto; object-fit:contain; object-position:left center; opacity:1; filter:brightness(0) invert(1); margin-bottom:auto; }
.noon-login-visual-content h2 { font-size:34px; font-weight:850; line-height:1.2; margin:0 0 10px; }
.noon-login-visual-content p { font-size:14px; line-height:1.7; max-width:420px; margin:0; color:rgba(255,255,255,.86); }
.noon-login-form { padding:48px 48px 40px; display:flex; flex-direction:column; justify-content:center; }
.noon-login-brand { width:150px; margin-bottom:28px; }
.noon-login-form h1 { color:var(--noon-navy); font-size:27px; font-weight:850; margin:0 0 8px; }
.noon-login-form .login-subtitle { color:#7c8796; font-size:13px; margin:0 0 28px; }
.noon-login-form .form-group { margin-bottom:18px; }
.noon-login-form .input-label { color:#344054; font-size:12px; font-weight:800; margin-bottom:8px; }
.noon-login-form .form-control { height:48px; border:1px solid #dfe5ec; border-radius:12px; padding:0 14px; box-shadow:none; background:#fbfcfd; }
.noon-login-form .form-control:focus { border-color:#c97884; box-shadow:0 0 0 4px rgba(173,23,43,.08); background:#fff; }
.noon-login-form .btn-primary { height:48px; border:0; border-radius:12px; background:var(--noon-primary); font-size:14px; font-weight:800; box-shadow:0 8px 18px rgba(173,23,43,.2); }
.noon-login-form .btn-primary:hover { background:var(--noon-primary-dark); }
.noon-login-form .login-footer { margin-top:22px; text-align:center; color:#98a2b3; font-size:11px; }
.noon-login-alert { border-radius:12px; font-size:12px; margin-bottom:18px; }

@media (max-width:1199px) {
    .noon-menu-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .noon-dashboard .dashboard-heading h1 { font-size:27px; }
}
@media (max-width:991px) {
    body.noon-student-portal .panel-content { padding:94px 15px 30px !important; width:100%; }
    .noon-info-grid { grid-template-columns:1fr; }
    .noon-info-card { min-height:220px; }
    .noon-menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
    .noon-student-sidebar { width:100%; top:64px !important; padding:28px 16px 15px !important; }
    .noon-student-sidebar .sidebar-menu { height:calc(100% - 135px) !important; }
    .noon-student-topbar .student-top-user strong { display:none; }
    .noon-login-shell { grid-template-columns:1fr; max-width:560px; min-height:0; }
    .noon-login-visual { min-height:210px; }
    .noon-login-visual-content { padding:28px; }
    .noon-login-visual-content h2 { font-size:25px; }
    .noon-login-visual-content p { display:none; }
    .noon-login-visual-content img.logo { width:135px; }
    .noon-login-form { padding:34px 28px 30px; }
}
@media (max-width:575px) {
    .noon-student-topbar .navbar-brand img { width:118px; }
    .noon-student-topbar .student-top-logout span { display:none; }
    .noon-student-topbar .student-top-logout { width:38px; height:38px; justify-content:center; padding:0; }
    .noon-dashboard .dashboard-heading { align-items:flex-start; flex-direction:column; margin-bottom:18px; }
    .noon-dashboard .dashboard-heading h1 { font-size:23px; }
    .noon-menu-grid { grid-template-columns:1fr 1fr; }
    .noon-menu-card a { padding:14px; border-radius:14px; }
    .noon-menu-icon { width:46px; height:46px; border-radius:13px; margin-bottom:11px; }
    .noon-menu-icon img { width:28px !important; height:28px !important; }
    .noon-menu-card h3 { font-size:12px; }
    .noon-menu-card p { font-size:10px; }
    .noon-info-card { padding:16px; border-radius:15px; }
    .noon-login-page { padding:12px; }
    .noon-login-shell { border-radius:18px; }
    .noon-login-visual { min-height:165px; }
    .noon-login-form { padding:28px 20px 24px; }
    .noon-login-form h1 { font-size:23px; }
}

/* ===== NOON STUDENT PORTAL FINAL RESPONSIVE OVERRIDES ===== */
html, body { margin:0 !important; padding:0 !important; }
body.noon-student-portal { overflow-x:hidden; }
body.noon-student-portal #navbarVacuum { display:none !important; height:0 !important; }
body.noon-student-portal #navbar.noon-student-topbar {
    position:fixed !important; top:0 !important; left:0 !important; right:0 !important;
    width:100% !important; height:72px !important; min-height:72px !important;
    margin:0 !important; z-index:1000 !important;
}
body.noon-student-portal #navbar.noon-student-topbar .container-fluid { height:72px; }
body.noon-student-portal #panel_app > .d-flex { margin-top:72px !important; min-height:calc(100vh - 72px); }
body.noon-student-portal .panel-content {
    width:calc(100% - 270px) !important; margin-left:270px; min-height:calc(100vh - 72px);
    padding:30px 28px 50px !important; box-sizing:border-box;
}
.rtl body.noon-student-portal .panel-content { margin-left:0; margin-right:270px; }
.noon-dashboard { width:100%; max-width:none; }

/* Empty information panels are never shown */
.noon-info-card.is-empty { display:none !important; }
.noon-info-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.noon-info-grid:has(.noon-info-card:not(.is-empty)) { }
.noon-info-card { min-height:260px; }

/* Larger, clearer service icons */
.noon-menu-icon { width:82px !important; height:82px !important; border-radius:20px !important; margin-bottom:18px !important; }
.noon-menu-icon img { width:62px !important; height:62px !important; object-fit:contain !important; }
.noon-menu-card a { min-height:255px; padding:22px !important; }
.noon-menu-card h3 { font-size:16px; }
.noon-menu-card p { font-size:12px; }
.noon-menu-arrow { font-size:14px; }

/* Desktop sidebar */
.noon-student-sidebar { top:72px !important; bottom:0 !important; height:calc(100vh - 72px) !important; z-index:900 !important; }
.noon-student-sidebar .panel-sidebar-close { display:none !important; }
.noon-student-mobilebar { display:none !important; }

/* Login floating panel switch */
.noon-login-page { position:relative; }
.noon-login-switch {
    position:fixed !important; top:22px !important; right:22px !important; z-index:2000 !important;
    width:46px !important; height:46px !important; border-radius:50% !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    background:#fff !important; color:var(--noon-primary) !important;
    border:1px solid rgba(173,23,43,.12) !important;
    box-shadow:0 10px 28px rgba(23,54,93,.16) !important;
    text-decoration:none !important; transition:transform .2s ease, box-shadow .2s ease !important;
}
.noon-login-switch:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(23,54,93,.22) !important; }

@media (max-width:1199px) and (min-width:992px) {
    body.noon-student-portal .panel-content { padding:28px 20px 45px !important; }
    .noon-menu-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .noon-menu-icon { width:76px !important; height:76px !important; }
    .noon-menu-icon img { width:58px !important; height:58px !important; }
}

/* Tablet + mobile: real off-canvas sidebar */
@media (max-width:991px) {
    body.noon-student-portal #navbar.noon-student-topbar { height:64px !important; min-height:64px !important; }
    body.noon-student-portal #navbar.noon-student-topbar .container-fluid { height:64px; }
    body.noon-student-portal #panel_app > .d-flex { margin-top:64px !important; min-height:calc(100vh - 64px); }
    body.noon-student-portal .panel-content {
        width:100% !important; margin:0 !important; padding:80px 16px 35px !important;
        min-height:calc(100vh - 64px);
    }
    body.noon-student-portal .noon-student-mobilebar {
        display:flex !important; position:fixed !important; top:64px !important; left:0 !important; right:0 !important;
        height:56px !important; z-index:950 !important; box-sizing:border-box; padding:8px 14px !important;
    }
    .noon-student-sidebar,
    .noon-student-sidebar.panel-sidebar {
        position:fixed !important; top:0 !important; left:0 !important; right:auto !important; bottom:0 !important;
        width:min(88vw,360px) !important; height:100dvh !important; max-height:100dvh !important;
        z-index:2000 !important; transform:translateX(-105%) !important; opacity:0 !important; visibility:hidden !important;
        transition:transform .28s ease, opacity .2s ease, visibility 0s linear .28s !important;
        overflow:hidden !important; padding:22px 14px 18px !important;
    }
    .rtl .noon-student-sidebar,
    .rtl .noon-student-sidebar.panel-sidebar { left:auto !important; right:0 !important; transform:translateX(105%) !important; }
    .noon-student-sidebar.nav-show {
        top:0 !important; transform:translateX(0) !important; opacity:1 !important; visibility:visible !important;
        transition:transform .28s ease, opacity .2s ease !important;
    }
    .rtl .noon-student-sidebar.nav-show { transform:translateX(0) !important; }
    .noon-student-sidebar .panel-sidebar-close {
        display:flex !important; position:absolute !important; top:12px !important; right:12px !important;
        z-index:5 !important; width:38px !important; height:38px !important; border-radius:50% !important;
        background:#f7f8fa !important; align-items:center !important; justify-content:center !important;
    }
    .rtl .noon-student-sidebar .panel-sidebar-close { left:12px !important; right:auto !important; }
    .noon-student-sidebar .sidebar-menu { height:calc(100% - 150px) !important; max-height:none !important; }
    body.noon-student-portal .noon-student-sidebar.nav-show::after {
        content:''; position:fixed; top:0; left:100%; width:100vw; height:100dvh; background:rgba(15,23,42,.42); z-index:-1;
    }
    .rtl body.noon-student-portal .noon-student-sidebar.nav-show::after { left:auto; right:100%; }
    .noon-info-grid { grid-template-columns:1fr; }
    .noon-menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .noon-menu-icon { width:72px !important; height:72px !important; border-radius:18px !important; }
    .noon-menu-icon img { width:56px !important; height:56px !important; }
    .noon-menu-card a { min-height:230px; }
}

@media (max-width:575px) {
    body.noon-student-portal .panel-content { padding:78px 12px 30px !important; }
    .noon-student-mobilebar { height:52px !important; top:64px !important; }
    .noon-menu-grid { gap:10px; }
    .noon-menu-card a { min-height:205px; padding:15px !important; }
    .noon-menu-icon { width:64px !important; height:64px !important; border-radius:16px !important; margin-bottom:13px !important; }
    .noon-menu-icon img { width:50px !important; height:50px !important; }
    .noon-menu-card h3 { font-size:13px; }
    .noon-menu-card p { font-size:10px; }
    .noon-menu-arrow { padding-top:10px; font-size:12px; }
    .noon-login-switch { top:14px !important; right:14px !important; width:42px !important; height:42px !important; }
}

/* Mobile sidebar overlay + scroll lock */
.noon-sidebar-overlay { display:none; }
@media (max-width:991px) {
    body.noon-sidebar-open { overflow:hidden !important; }
    .noon-sidebar-overlay.is-visible {
        display:block !important; position:fixed !important; inset:0 !important;
        background:rgba(15,23,42,.45) !important; z-index:1900 !important;
    }
    .noon-student-sidebar { box-shadow:12px 0 35px rgba(15,23,42,.18) !important; }
}