/* Naweb design system — shared by public, guest and authenticated screens. */
:root {
    --naweb-primary: #0f766e;
    --naweb-primary-dark: #0b4f4a;
    --naweb-primary-soft: #e6f6f3;
    --naweb-secondary: #123a4a;
    --naweb-accent: #f59e0b;
    --naweb-danger: #dc4961;
    --naweb-success: #168568;
    --naweb-info: #2787b7;
    --naweb-ink: #102a43;
    --naweb-muted: #66788a;
    --naweb-border: #dce7ec;
    --naweb-surface: #ffffff;
    --naweb-canvas: #f4f8f9;
    --naweb-radius-sm: .75rem;
    --naweb-radius: 1.1rem;
    --naweb-radius-lg: 1.6rem;
    --naweb-shadow-sm: 0 4px 18px rgba(15, 61, 70, .06);
    --naweb-shadow: 0 14px 40px rgba(15, 61, 70, .10);
    --naweb-shadow-lg: 0 24px 64px rgba(15, 61, 70, .14);
    --bs-primary: var(--naweb-primary);
    --bs-primary-rgb: 15, 118, 110;
    --bs-success: var(--naweb-success);
    --bs-success-rgb: 22, 133, 104;
    --bs-info: var(--naweb-info);
    --bs-info-rgb: 39, 135, 183;
    --bs-danger: var(--naweb-danger);
    --bs-danger-rgb: 220, 73, 97;
    --bs-warning: var(--naweb-accent);
    --bs-warning-rgb: 245, 158, 11;
    --bs-body-color: var(--naweb-ink);
    --bs-body-bg: var(--naweb-canvas);
    --bs-border-color: var(--naweb-border);
    --bs-link-color: var(--naweb-primary);
    --bs-link-hover-color: var(--naweb-primary-dark);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    color: var(--naweb-ink);
    background: var(--naweb-canvas);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

a { transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }

:focus-visible {
    outline: 3px solid rgba(15, 118, 110, .28) !important;
    outline-offset: 3px;
}

::selection { background: rgba(15, 118, 110, .18); color: var(--naweb-secondary); }

/* Brand */
.brand-lockup { display: inline-flex; align-items: center; gap: .72rem; color: inherit; text-decoration: none; }
.brand-mark {
    width: 2.55rem; height: 2.55rem; display: inline-grid; place-items: center;
    border-radius: .85rem; color: #fff;
    background: linear-gradient(145deg, #14a397, var(--naweb-primary));
    box-shadow: 0 8px 20px rgba(15, 118, 110, .25);
}
.brand-mark i { font-size: 1.3rem; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-size: 1.03rem; font-weight: 800; letter-spacing: -.02em; }
.brand-tagline { margin-top: .18rem; font-size: .64rem; font-weight: 600; opacity: .65; }

/* Navigation */
.app-navbar,
.public-navbar {
    border-bottom: 1px solid rgba(220, 231, 236, .9);
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 6px 24px rgba(15, 61, 70, .055) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.app-navbar { padding-block: .62rem; }
.app-navbar .navbar-brand,
.public-navbar .navbar-brand { color: var(--naweb-secondary) !important; padding-block: 0; }
.app-navbar .navbar-toggler,
.public-navbar .navbar-toggler { border: 1px solid var(--naweb-border); border-radius: .75rem; padding: .42rem .62rem; box-shadow: none; }
.app-navbar .navbar-toggler-icon,
.public-navbar .navbar-toggler-icon { filter: none; }
.app-navbar .navbar-nav { gap: .14rem; }
.app-navbar .nav-link,
.public-navbar .nav-link {
    color: #40576a !important; border-radius: .72rem; padding: .58rem .76rem !important;
    font-size: .88rem; font-weight: 650; white-space: nowrap;
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus,
.public-navbar .nav-link:hover,
.public-navbar .nav-link:focus { color: var(--naweb-primary-dark) !important; background: var(--naweb-primary-soft); }
.app-navbar .nav-link.active,
.public-navbar .nav-link.active { color: var(--naweb-primary-dark) !important; background: var(--naweb-primary-soft); }
.app-navbar .dropdown-menu,
.public-navbar .dropdown-menu {
    min-width: 15rem; padding: .55rem; margin-top: .7rem;
    border: 1px solid var(--naweb-border); border-radius: 1rem;
    box-shadow: var(--naweb-shadow); background: rgba(255,255,255,.99);
}
.app-navbar .dropdown-item,
.public-navbar .dropdown-item { border-radius: .65rem; padding: .62rem .72rem; color: #40576a; font-size: .88rem; font-weight: 600; }
.app-navbar .dropdown-item i,
.public-navbar .dropdown-item i { color: var(--naweb-primary); }
.app-navbar .dropdown-item:hover,
.public-navbar .dropdown-item:hover { background: var(--naweb-primary-soft); color: var(--naweb-primary-dark); }
.notification-trigger { width: 2.55rem; height: 2.55rem; display: grid !important; place-items: center; padding: 0 !important; }
.user-trigger { border: 1px solid var(--naweb-border); background: #fff; }

/* App shell */
.app-body { min-height: 100vh; display: flex; flex-direction: column; background:
    radial-gradient(circle at 92% 0%, rgba(15,118,110,.09), transparent 24rem), var(--naweb-canvas); }
.app-page-header { background: transparent !important; box-shadow: none !important; margin: 0 !important; }
.app-page-header > .container { padding-top: 1.8rem !important; padding-bottom: .75rem !important; }
.app-page-header h1, .app-page-header h2 { color: var(--naweb-secondary); letter-spacing: -.025em; }
.app-main { width: 100%; flex: 1; margin-top: .65rem !important; margin-bottom: 2.5rem !important; }
.app-footer { margin-top: auto !important; border-color: var(--naweb-border) !important; background: rgba(255,255,255,.78) !important; }
.app-footer a { color: var(--naweb-primary); font-weight: 700; }
.floating-action { bottom: 1.5rem; left: 1.5rem; z-index: 1030; border-radius: 999px !important; box-shadow: 0 12px 30px rgba(15,118,110,.28); }

/* Cards and panels */
.card {
    border: 1px solid rgba(220, 231, 236, .88) !important;
    border-radius: var(--naweb-radius) !important;
    box-shadow: var(--naweb-shadow-sm) !important;
    background: var(--naweb-surface);
    overflow: hidden;
}
.card-header {
    min-height: 3.75rem; display: flex; align-items: center;
    padding: .9rem 1.15rem; border-bottom: 1px solid var(--naweb-border) !important;
    background: linear-gradient(180deg, #fff, #fbfdfd) !important;
}
.card-header h4, .card-header h5, .card-header h6 { color: var(--naweb-secondary); }
.card-body { padding: 1.25rem; }
.card-footer { border-top-color: var(--naweb-border); background: #fbfdfd; }
.metric-card { position: relative; min-height: 8.8rem; }
.app-main > div > .row.g-4.mb-4:first-of-type > [class*="col-"] > .card.h-100,
.dashboard-metrics .card { position: relative; min-height: 8.8rem; overflow: hidden; }
.app-main > div > .row.g-4.mb-4:first-of-type > [class*="col-"] > .card.h-100::after,
.dashboard-metrics .card::after {
    content: ''; position: absolute; inset-inline-end: -2.4rem; inset-block-start: -2.8rem;
    width: 8rem; height: 8rem; border-radius: 50%; background: rgba(15,118,110,.055);
}
.metric-card::after {
    content: ''; position: absolute; inset-inline-end: -2.4rem; inset-block-start: -2.8rem;
    width: 8rem; height: 8rem; border-radius: 50%; background: rgba(15,118,110,.055);
}
.metric-card .card-body { display: flex; align-items: center; position: relative; z-index: 1; }
.metric-card .rounded.p-3,
.metric-icon {
    width: 3.35rem; height: 3.35rem; padding: 0 !important; display: grid; place-items: center;
    border-radius: 1rem !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
}
.metric-card .fs-3 { color: var(--naweb-secondary); font-size: 1.8rem !important; line-height: 1.15; }
.metric-card .small { color: var(--naweb-muted) !important; font-weight: 650; }
.feature-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.feature-card:hover { transform: translateY(-6px); border-color: rgba(15,118,110,.24) !important; box-shadow: var(--naweb-shadow) !important; }
.dashboard-welcome {
    position: relative; overflow: hidden; padding: clamp(1.35rem, 3vw, 2rem);
    border-radius: var(--naweb-radius-lg); color: #fff;
    background: linear-gradient(125deg, var(--naweb-secondary), var(--naweb-primary));
    box-shadow: var(--naweb-shadow); }
.dashboard-welcome::after { content: ''; position: absolute; width: 16rem; height: 16rem; border-radius: 50%; inset: -9rem auto auto -5rem; background: rgba(245,158,11,.15); }
.dashboard-welcome > * { position: relative; z-index: 1; }
.dashboard-welcome .welcome-date { color: rgba(255,255,255,.7); font-size: .83rem; font-weight: 650; }
.dashboard-welcome .welcome-copy { color: rgba(255,255,255,.78); }

/* Buttons */
.btn { border-radius: .78rem; padding: .58rem 1rem; font-weight: 700; border-width: 1px; }
.btn-sm { border-radius: .66rem; padding: .42rem .76rem; }
.btn-lg { border-radius: .92rem; padding: .74rem 1.25rem; }
.btn-primary { --bs-btn-bg: var(--naweb-primary); --bs-btn-border-color: var(--naweb-primary); --bs-btn-hover-bg: var(--naweb-primary-dark); --bs-btn-hover-border-color: var(--naweb-primary-dark); --bs-btn-active-bg: var(--naweb-primary-dark); --bs-btn-active-border-color: var(--naweb-primary-dark); box-shadow: 0 7px 18px rgba(15,118,110,.19); }
.btn-outline-primary { --bs-btn-color: var(--naweb-primary); --bs-btn-border-color: rgba(15,118,110,.42); --bs-btn-hover-bg: var(--naweb-primary); --bs-btn-hover-border-color: var(--naweb-primary); }
.btn-light { color: var(--naweb-secondary); border-color: #fff; }

/* Forms */
.form-label { margin-bottom: .42rem; color: #334e60; font-size: .88rem; font-weight: 700; }
.form-control, .form-select {
    min-height: 2.85rem; border-color: #d4e1e7; border-radius: .78rem;
    background-color: #fbfdfd; color: var(--naweb-ink); padding-inline: .9rem;
}
textarea.form-control { min-height: auto; }
.form-control:hover, .form-select:hover { border-color: #aac7c8; }
.form-control:focus, .form-select:focus { border-color: var(--naweb-primary); background-color: #fff; box-shadow: 0 0 0 .24rem rgba(15,118,110,.11); }
.form-check-input:checked { background-color: var(--naweb-primary); border-color: var(--naweb-primary); }
.input-group-text { border-color: #d4e1e7; background: #eef5f5; color: var(--naweb-muted); }

/* Tables, badges and feedback */
.table-responsive { border-radius: .85rem; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f2faf8; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .88rem .78rem; border-bottom-color: #e8eff2; vertical-align: middle; }
.table thead th { background: #f2f7f7 !important; color: #496171; font-size: .78rem; font-weight: 800; white-space: nowrap; border-bottom: 0; }
.table tbody tr:last-child td { border-bottom: 0; }
.badge { border-radius: 999px; padding: .45em .72em; font-weight: 700; }
.alert { border: 0; border-radius: .9rem; box-shadow: var(--naweb-shadow-sm); }
.alert-success { background: #e8f7f1; color: #0d654f; }
.alert-danger { background: #fcedf0; color: #a52d43; }
.alert-warning { background: #fff6df; color: #805400; }
.alert-info { background: #eaf5fa; color: #1c678c; }
.pagination { gap: .25rem; }
.page-link { border: 0; border-radius: .62rem !important; color: var(--naweb-muted); }
.active > .page-link, .page-link.active { background-color: var(--naweb-primary); }
.modal-content { border: 0; border-radius: var(--naweb-radius-lg); box-shadow: var(--naweb-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--naweb-border); }
.dropdown-divider { border-color: var(--naweb-border); }

/* Public website */
.public-body { min-height: 100vh; display: flex; flex-direction: column; background: #fff; }
.public-body main { flex: 1; }
.public-navbar { padding-block: .68rem; }
.public-navbar .navbar-nav { gap: .15rem; }
.public-navbar .nav-cta { color: #fff !important; background: var(--naweb-primary); box-shadow: 0 7px 18px rgba(15,118,110,.18); }
.public-navbar .nav-cta:hover { color: #fff !important; background: var(--naweb-primary-dark); }
.hero-section {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(4.5rem, 8vw, 7.5rem) 0;
    color: #fff;
    background: linear-gradient(130deg, #0b4f4a 0%, #0f766e 55%, #168f83 100%);
}
.hero-section::before,
.hero-section::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; }
.hero-section::before { width: 34rem; height: 34rem; inset: -18rem auto auto -9rem; background: rgba(255,255,255,.08); }
.hero-section::after { width: 24rem; height: 24rem; inset: auto -7rem -13rem auto; background: rgba(245,158,11,.16); }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.15rem;
    padding: .42rem .78rem; border: 1px solid rgba(255,255,255,.24); border-radius: 999px;
    background: rgba(255,255,255,.1); color: #e8fffb; font-size: .82rem; font-weight: 700;
}
.hero-title { max-width: 13ch; font-size: clamp(2.35rem, 5.6vw, 4.6rem); line-height: 1.18; letter-spacing: -.045em; }
.hero-lead { max-width: 42rem; color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.4vw, 1.18rem); }
.hero-visual { position: relative; min-height: 24rem; display: grid; place-items: center; }
.hero-orbit { width: min(24rem, 82vw); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(255,255,255,.07); box-shadow: inset 0 0 70px rgba(255,255,255,.05); }
.hero-school { width: 9rem; height: 9rem; display: grid; place-items: center; border-radius: 2.2rem; background: #fff; color: var(--naweb-primary); box-shadow: 0 28px 55px rgba(0,0,0,.2); transform: rotate(-3deg); }
.hero-school i { font-size: 4.8rem; }
.hero-float { position: absolute; display: flex; align-items: center; gap: .55rem; padding: .72rem .9rem; border: 1px solid rgba(255,255,255,.26); border-radius: .9rem; background: rgba(8,55,52,.68); backdrop-filter: blur(12px); font-size: .78rem; font-weight: 700; box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.hero-float i { color: #ffd27a; font-size: 1.1rem; }
.hero-float-one { inset-block-start: 15%; inset-inline-start: 3%; }
.hero-float-two { inset-block-end: 18%; inset-inline-end: 0; }
.section-shell { padding: clamp(4rem, 7vw, 6.5rem) 0; }
.section-soft { background: linear-gradient(180deg, #f7fbfb, #eef6f5); }
.section-kicker { color: var(--naweb-primary); font-size: .82rem; font-weight: 800; letter-spacing: .02em; }
.section-title { color: var(--naweb-secondary); font-size: clamp(1.75rem, 3vw, 2.45rem); letter-spacing: -.035em; }
.page-hero { position: relative; overflow: hidden; padding: clamp(3.2rem, 6vw, 5rem) 0; text-align: center; background: linear-gradient(180deg, #eef8f6, #f8fbfb); border-bottom: 1px solid var(--naweb-border); }
.page-hero h1 { color: var(--naweb-secondary); letter-spacing: -.035em; }
.page-hero p { color: var(--naweb-muted); }
.about-visual { width: min(21rem, 75vw); aspect-ratio: 1; display: grid; place-items: center; margin-inline: auto; border-radius: 3rem; background: linear-gradient(145deg, var(--naweb-primary-soft), #fff); border: 1px solid var(--naweb-border); box-shadow: var(--naweb-shadow); }
.about-visual i { color: var(--naweb-primary); font-size: clamp(5rem, 12vw, 8rem); }
.feature-icon { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 1rem; background: var(--naweb-primary-soft); color: var(--naweb-primary); font-size: 1.45rem; }
.stats-card { height: 100%; padding: 1.6rem; color: var(--naweb-secondary); border: 1px solid var(--naweb-border); border-radius: var(--naweb-radius); background: #fff; box-shadow: var(--naweb-shadow-sm); }
.stats-card i { color: var(--naweb-primary); }
.stats-card h3 { font-size: 2rem; }
.cta-card { position: relative; overflow: hidden; border: 0 !important; color: #fff; background: linear-gradient(130deg, var(--naweb-secondary), var(--naweb-primary)) !important; box-shadow: var(--naweb-shadow-lg) !important; }
.cta-card::after { content: ''; position: absolute; width: 18rem; height: 18rem; border-radius: 50%; inset: -9rem auto auto -6rem; background: rgba(245,158,11,.17); }
.cta-card .card-body { position: relative; z-index: 1; }
.public-footer { margin-top: 0 !important; padding: 4.5rem 0 1.8rem; color: #c8d9df; background: #0d2e3a; }
.public-footer h5 { color: #fff; }
.public-footer a { color: #c8d9df; text-decoration: none; }
.public-footer a:hover { color: #fff; }
.public-footer .footer-brand { color: #fff; }
.public-footer .brand-mark { box-shadow: none; }
.public-footer hr { border-color: rgba(255,255,255,.12) !important; }

/* Guest/authentication */
.guest-body { min-height: 100vh; display: flex; flex-direction: column; background:
    radial-gradient(circle at 85% 8%, rgba(15,118,110,.16), transparent 23rem),
    radial-gradient(circle at 8% 90%, rgba(245,158,11,.11), transparent 20rem), #f4f8f9; }
.guest-shell { flex: 1; display: grid; place-items: center; padding-block: 3rem; }
.guest-panel { width: 100%; max-width: 31rem; }
.guest-brand { display: flex; justify-content: center; margin-bottom: 1.2rem; }
.guest-panel > .card { border: 1px solid rgba(220,231,236,.95) !important; border-radius: 1.45rem !important; box-shadow: var(--naweb-shadow-lg) !important; }
.guest-panel > .card .card-body { padding: clamp(1.5rem, 5vw, 2.35rem) !important; }
.guest-footer { border-top: 0 !important; background: transparent !important; }

@media (max-width: 1199.98px) {
    .app-navbar .navbar-collapse, .public-navbar .navbar-collapse { margin-top: .8rem; padding: .75rem; border: 1px solid var(--naweb-border); border-radius: 1rem; background: #fff; box-shadow: var(--naweb-shadow-sm); }
    .app-navbar .navbar-nav, .public-navbar .navbar-nav { gap: .12rem; }
    .app-navbar .dropdown-menu, .public-navbar .dropdown-menu { margin-top: .2rem; box-shadow: none; background: #f8fbfb; }
    .notification-trigger { width: 100%; justify-content: start; padding-inline: .8rem !important; }
}

@media (max-width: 767.98px) {
    body { font-size: .93rem; }
    .brand-tagline { display: none; }
    .brand-mark { width: 2.35rem; height: 2.35rem; }
    .app-page-header > .container { padding-top: 1.2rem !important; }
    .app-main { margin-top: .35rem !important; padding-inline: .8rem; }
    .card-body { padding: 1rem; }
    .card-header { padding-inline: 1rem; }
    .hero-section { text-align: center; padding-block: 4rem; }
    .hero-title, .hero-lead { margin-inline: auto; }
    .hero-actions { justify-content: center; }
    .hero-visual { min-height: 19rem; margin-top: 2rem; }
    .hero-orbit { width: min(19rem, 78vw); }
    .hero-school { width: 7rem; height: 7rem; border-radius: 1.7rem; }
    .hero-school i { font-size: 3.7rem; }
    .hero-float { font-size: .7rem; }
    .section-shell { padding-block: 3.5rem; }
    .page-hero { padding-block: 3rem; }
    .floating-action { right: .8rem; left: .8rem; bottom: .8rem; text-align: center; }
    .table > :not(caption) > * > * { padding: .72rem .62rem; }
}

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