@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --ink: #162a25;
    --muted: #6f7e79;
    --line: #e4e9e7;
    --canvas: #f5f7f6;
    --surface: #ffffff;
    --primary: #14745e;
    --primary-dark: #0d5848;
    --primary-soft: #e7f3ef;
    --gold: #c69742;
    --gold-soft: #fbf4e6;
    --danger: #b84949;
    --danger-soft: #faeeee;
    --warning: #b87817;
    --warning-soft: #fff6e3;
    --blue: #3d6f91;
    --blue-soft: #edf5fa;
    --sidebar: #102e28;
    --shadow: 0 12px 35px rgba(19, 46, 39, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
[x-cloak] { display: none !important; }

.portal-body { min-height: 100vh; background: var(--canvas); }
.portal-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 0 0 auto; z-index: 40; width: 274px; background: var(--sidebar); color: #fff; display: flex; flex-direction: column; overflow: hidden; box-shadow: -8px 0 40px rgba(5, 23, 19, .12); }
.sidebar::before { content: ''; position: absolute; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.05); border-radius: 50%; top: -120px; left: -90px; box-shadow: 0 0 0 35px rgba(255,255,255,.018), 0 0 0 70px rgba(255,255,255,.012); pointer-events: none; }
.brand { position: relative; min-height: 95px; padding: 23px 24px 18px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { display: flex; align-items: center; gap: 13px; }
.brand-symbol { width: 47px; height: 47px; border-radius: 15px 15px 15px 5px; display: grid; place-items: center; background: linear-gradient(145deg, #dbb661, var(--gold)); color: #17372f; font-size: 26px; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.brand-mark strong { display: block; font-size: 22px; line-height: 1.1; letter-spacing: .03em; }
.brand-mark small { color: #aabdb7; font-size: 11px; }
.mobile-close { display: none; margin-right: auto; border: 0; background: transparent; color: white; font-size: 28px; cursor: pointer; }
.side-nav { position: relative; flex: 1; padding: 14px 12px 24px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.nav-group + .nav-group { margin-top: 16px; }
.nav-label { display: block; padding: 8px 13px 7px; color: #78938b; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 43px; padding: 0 13px; margin: 2px 0; border-radius: 11px; color: #b9cac5; font-size: 13px; font-weight: 500; transition: .2s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); transform: translateX(-2px); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(35,139,112,.7), rgba(35,139,112,.32)); box-shadow: inset -3px 0 0 var(--gold); }
.nav-item.active .ui-icon { color: #e6c77e; }
.sidebar-foot { padding: 16px; background: rgba(0,0,0,.11); border-top: 1px solid rgba(255,255,255,.06); }
.user-chip { display: flex; align-items: center; gap: 10px; }
.avatar { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #255047; color: #e5c57d; font-weight: 800; }
.user-meta { min-width: 0; flex: 1; }
.user-meta strong, .user-meta small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta strong { font-size: 12px; }
.user-meta small { color: #87a39b; font-size: 10px; margin-top: 2px; }
.icon-button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #91aaa3; background: rgba(255,255,255,.05); }
.logout-button { width: 100%; margin-top: 12px; padding: 9px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; color: #9cb2ab; background: transparent; font-size: 11px; cursor: pointer; }
.logout-button:hover { color: white; border-color: rgba(255,255,255,.2); }

.main-area { min-height: 100vh; margin-right: 274px; display: flex; flex-direction: column; }
.topbar { height: 95px; padding: 0 clamp(20px, 4vw, 52px); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.topbar-start { display: flex; align-items: center; gap: 14px; }
.topbar h1 { margin: 2px 0 0; font-size: clamp(20px, 2vw, 27px); font-weight: 800; color: var(--ink); }
.eyebrow { font-size: 10px; font-weight: 700; color: var(--primary); letter-spacing: .03em; }
.menu-button { display: none; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: white; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.today-chip { height: 39px; padding: 0 13px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: white; border-radius: 10px; color: var(--muted); font-size: 12px; }
.notification-button { position: relative; width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--line); background: white; border-radius: 10px; color: var(--ink); }
.notification-dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); border: 1px solid white; }
.page-content { width: 100%; max-width: 1680px; margin: 0 auto; padding: 30px clamp(20px, 4vw, 52px) 45px; flex: 1; }
.portal-footer { padding: 18px 32px; color: #8b9894; font-size: 10px; text-align: center; border-top: 1px solid var(--line); }
.portal-footer span { color: var(--primary); }
.sidebar-scrim { display: none; }

.flash { min-height: 50px; margin-bottom: 22px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; border-radius: 12px; border: 1px solid; font-size: 12px; }
.flash button { margin-right: auto; border: 0; background: transparent; font-size: 20px; cursor: pointer; color: inherit; }
.flash-success { color: #246650; border-color: #c8e4d9; background: #eff9f5; }
.flash-error { color: #953f3f; border-color: #efd0d0; background: #fff4f4; }
.flash-icon { flex: none; width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.7); font-weight: 800; }

.page-head { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.page-head h2 { margin: 0; font-size: 22px; font-weight: 800; }
.page-head p { margin: 5px 0 0; max-width: 680px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { min-height: 39px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 700; cursor: pointer; transition: .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: #fff; background: var(--primary); box-shadow: 0 7px 18px rgba(20,116,94,.18); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { color: var(--ink); background: #fff; border-color: var(--line); }
.btn-danger { color: var(--danger); background: var(--danger-soft); border-color: #f0d2d2; }
.btn-gold { color: #6d4b12; background: var(--gold-soft); border-color: #ead7ad; }
.btn-sm { min-height: 32px; padding: 0 10px; border-radius: 8px; font-size: 10px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }
.card-header { min-height: 63px; padding: 15px 19px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }
.card-title { margin: 0; font-size: 14px; font-weight: 800; }
.card-subtitle { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; }
.card-body { padding: 19px; }
.card-footer { padding: 13px 19px; border-top: 1px solid var(--line); background: #fbfcfc; border-radius: 0 0 15px 15px; }
.empty-state { padding: 45px 20px; color: var(--muted); text-align: center; }
.empty-state .empty-icon { width: 48px; height: 48px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.empty-state strong { display: block; color: var(--ink); font-size: 13px; }
.empty-state p { margin: 4px auto 0; font-size: 11px; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; margin-bottom: 22px; }
.stat-card { position: relative; min-height: 128px; padding: 19px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.stat-card::after { content: ''; position: absolute; width: 80px; height: 80px; left: -25px; bottom: -35px; border-radius: 50%; background: var(--stat-soft, var(--primary-soft)); opacity: .8; }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--stat-color, var(--primary)); background: var(--stat-soft, var(--primary-soft)); }
.stat-trend { padding: 4px 7px; border-radius: 20px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 700; }
.stat-value { margin-top: 10px; font-size: 27px; font-weight: 800; line-height: 1; }
.stat-label { margin-top: 6px; color: var(--muted); font-size: 11px; }
.stat-gold { --stat-color: #a77420; --stat-soft: var(--gold-soft); }
.stat-blue { --stat-color: var(--blue); --stat-soft: var(--blue-soft); }
.stat-red { --stat-color: var(--danger); --stat-soft: var(--danger-soft); }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-main { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); }
.stack { display: grid; gap: 18px; }

.filter-bar { margin-bottom: 16px; padding: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.search-field { position: relative; min-width: 230px; flex: 1; }
.search-field .ui-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #8d9995; }
.search-field input { padding-right: 39px; }
.form-control, .form-select, .form-textarea { width: 100%; min-height: 40px; padding: 8px 11px; color: var(--ink); background: #fff; border: 1px solid #dce3e0; border-radius: 9px; outline: none; font-size: 12px; transition: border .18s, box-shadow .18s; }
.form-control:focus, .form-select:focus, .form-textarea:focus { border-color: #72aa99; box-shadow: 0 0 0 3px rgba(20,116,94,.08); }
.form-control::placeholder, .form-textarea::placeholder { color: #a4aeaa; }
.form-select { min-width: 145px; appearance: auto; }
.form-textarea { min-height: 90px; resize: vertical; }
.form-label { display: block; margin: 0 0 6px; color: #52645e; font-size: 10px; font-weight: 700; }
.form-hint { display: block; margin-top: 5px; color: #8b9894; font-size: 9px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.form-grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.form-span-2 { grid-column: span 2; }
.form-span-3 { grid-column: span 3; }
.required::after { content: ' *'; color: var(--danger); }
.check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.check-pill input { position: absolute; opacity: 0; }
.check-pill span { display: inline-flex; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 10px; cursor: pointer; }
.check-pill input:checked + span { color: var(--primary); border-color: #95c3b6; background: var(--primary-soft); }

.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.data-table th { padding: 11px 14px; color: #81908b; background: #fafbfb; border-bottom: 1px solid var(--line); font-size: 9px; font-weight: 800; text-align: right; }
.data-table td { padding: 13px 14px; border-bottom: 1px solid #edf0ef; font-size: 11px; vertical-align: middle; }
.data-table tbody tr { transition: background .15s; }
.data-table tbody tr:hover { background: #fafcfb; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.table-person { display: flex; align-items: center; gap: 10px; }
.person-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 800; }
.person-info strong, .person-info small { display: block; }
.person-info strong { color: var(--ink); font-size: 11px; }
.person-info small { margin-top: 2px; color: #87948f; font-size: 9px; }
.table-actions { display: flex; align-items: center; gap: 5px; }
.table-action { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: white; cursor: pointer; }
.table-action:hover { color: var(--primary); border-color: #b7d4cb; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 20px; font-size: 9px; font-weight: 700; }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge-success { color: #23745a; background: #e9f6f1; }
.badge-warning { color: #a16a14; background: #fff4db; }
.badge-danger { color: #ad4747; background: #faecec; }
.badge-info { color: #3e718e; background: #edf5fa; }
.badge-neutral { color: #707d79; background: #f0f2f1; }
.code { padding: 4px 7px; border-radius: 6px; color: #49615a; background: #f1f5f3; font-size: 9px; font-weight: 700; direction: ltr; display: inline-block; }
.muted { color: var(--muted); }
.text-sm { font-size: 11px; }
.text-xs { font-size: 9px; }
.text-success { color: var(--primary); }
.text-danger { color: var(--danger); }
.font-bold { font-weight: 800; }

.list { display: grid; }
.list-item { min-height: 61px; padding: 11px 0; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid #edf0ef; }
.list-item:first-child { padding-top: 0; }
.list-item:last-child { padding-bottom: 0; border-bottom: 0; }
.list-icon { width: 37px; height: 37px; display: grid; place-items: center; flex: none; border-radius: 11px; color: var(--primary); background: var(--primary-soft); }
.list-body { flex: 1; min-width: 0; }
.list-body strong { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-body small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.list-tail { text-align: left; }

.progress { height: 5px; border-radius: 4px; overflow: hidden; background: #e8eeeb; }
.progress > span { height: 100%; display: block; border-radius: inherit; background: var(--primary); }
.circle-row { padding: 13px 0; border-bottom: 1px solid #edf0ef; }
.circle-row:last-child { border-bottom: 0; }
.circle-row-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.circle-row strong { font-size: 11px; }
.circle-row small { color: var(--muted); font-size: 9px; }

.quick-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 22px; }
.quick-action { min-height: 73px; padding: 13px; display: flex; align-items: center; gap: 11px; background: white; border: 1px solid var(--line); border-radius: 13px; transition: .18s; }
.quick-action:hover { border-color: #bad4cc; box-shadow: var(--shadow); transform: translateY(-2px); }
.quick-action .list-icon { width: 38px; height: 38px; }
.quick-action strong { display: block; font-size: 11px; }
.quick-action small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }

details.drawer-card { background: white; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
details.drawer-card > summary { min-height: 56px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: 12px; font-weight: 800; }
details.drawer-card > summary::-webkit-details-marker { display: none; }
details.drawer-card > summary::after { content: '+'; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: 18px; }
details.drawer-card[open] > summary::after { content: '−'; }
details.drawer-card[open] > summary { border-bottom: 1px solid var(--line); }
.drawer-body { padding: 18px; }
.form-actions { margin-top: 17px; padding-top: 14px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }

.pagination-wrap nav { display: flex; justify-content: center; margin-top: 18px; }
.pagination-wrap nav > div:first-child { display: none; }
.pagination-wrap nav > div:last-child { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pagination-wrap nav span, .pagination-wrap nav a { font-size: 10px; }

.profile-hero { position: relative; padding: 22px; overflow: hidden; color: white; background: linear-gradient(125deg, #113a31, #1a705d); border-radius: 17px; box-shadow: 0 15px 35px rgba(15,71,59,.16); }
.profile-hero::after { content: 'ر'; position: absolute; left: 25px; top: -33px; color: rgba(255,255,255,.06); font-size: 145px; font-weight: 800; }
.profile-main { position: relative; z-index: 1; display: flex; align-items: center; gap: 15px; }
.profile-avatar { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; background: #fff; color: var(--primary); font-size: 21px; font-weight: 800; }
.profile-main h2 { margin: 0 0 4px; font-size: 20px; }
.profile-main p { margin: 0; color: #bcd6cf; font-size: 10px; }
.profile-tags { margin-top: 14px; display: flex; gap: 7px; flex-wrap: wrap; }
.profile-tags span { padding: 5px 8px; border-radius: 7px; background: rgba(255,255,255,.09); color: #d8e8e4; font-size: 9px; }
.info-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.info-cell { padding: 15px; background: white; }
.info-cell small { display: block; color: var(--muted); font-size: 9px; }
.info-cell strong { display: block; margin-top: 4px; font-size: 11px; }

.metric-ring { --value: 0; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--value) * 1%), #e5ece9 0); }
.metric-ring::after { content: attr(data-label); width: 57px; height: 57px; display: grid; place-items: center; border-radius: 50%; background: white; font-size: 12px; font-weight: 800; }
.result-score { font-size: 20px; font-weight: 800; color: var(--primary); }
.error-row { padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 8px; background: #fff7f3; font-size: 10px; }

.attendance-options { display: flex; gap: 4px; }
.attendance-option input { position: absolute; opacity: 0; }
.attendance-option span { min-width: 45px; padding: 6px 8px; display: inline-flex; justify-content: center; border: 1px solid var(--line); border-radius: 7px; font-size: 9px; cursor: pointer; }
.attendance-option input:checked + span { color: white; border-color: var(--primary); background: var(--primary); }
.attendance-option.absent input:checked + span { border-color: var(--danger); background: var(--danger); }
.attendance-option.late input:checked + span { border-color: var(--warning); background: var(--warning); }
.attendance-option.excused input:checked + span { border-color: var(--blue); background: var(--blue); }

.finance-number { font-size: 24px; font-weight: 800; direction: ltr; text-align: right; }
.finance-number small { margin-right: 4px; color: var(--muted); font-size: 10px; }
.announcement { position: relative; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.announcement.pinned { border-color: #e4cf9b; background: #fffbf3; }
.announcement h4 { margin: 0 0 5px; font-size: 12px; }
.announcement p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.announcement-meta { margin-top: 9px; display: flex; gap: 12px; color: #94a09c; font-size: 8px; }
.resource-card { min-height: 175px; padding: 17px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: white; }
.resource-type { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: var(--primary-soft); }
.resource-card h3 { margin: 13px 0 4px; font-size: 12px; }
.resource-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.7; flex: 1; }
.resource-foot { margin-top: 13px; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); }

.public-body { min-height: 100vh; color: #15302a; background: #f7f9f8; }
.public-nav { position: absolute; z-index: 5; inset: 0 0 auto; height: 85px; padding: 0 clamp(22px,7vw,110px); display: flex; align-items: center; justify-content: space-between; color: white; }
.public-nav .brand-mark small { color: #bfd2cd; }
.public-links { display: flex; align-items: center; gap: 28px; font-size: 12px; }
.public-links a:not(.btn):hover { color: #e5c982; }
.hero { position: relative; min-height: 680px; padding: 150px clamp(22px,8vw,130px) 80px; display: flex; align-items: center; overflow: hidden; color: white; background: radial-gradient(circle at 18% 20%, rgba(205,164,73,.17), transparent 25%), linear-gradient(125deg, #0d2b25 0%, #154d40 62%, #176a55 100%); }
.hero::before { content: ''; position: absolute; width: 540px; height: 540px; left: -170px; top: 80px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.023), 0 0 0 140px rgba(255,255,255,.015); }
.hero-content { position: relative; z-index: 2; width: min(680px,100%); }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid rgba(229,201,130,.3); border-radius: 20px; color: #e7ce91; background: rgba(0,0,0,.08); font-size: 10px; }
.hero h1 { margin: 22px 0 17px; font-size: clamp(39px,6vw,75px); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; }
.hero h1 span { color: #e3c374; }
.hero p { max-width: 590px; margin: 0; color: #c2d7d1; font-size: 15px; line-height: 2; }
.hero-actions { margin-top: 30px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero-actions .btn { min-height: 48px; padding: 0 21px; }
.btn-light { color: #153b32; background: white; }
.btn-ghost { color: white; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.04); }
.hero-stats { position: absolute; z-index: 2; left: clamp(22px,7vw,110px); bottom: 45px; display: flex; gap: 28px; }
.hero-stat strong { display: block; color: #e8ca80; font-size: 20px; }
.hero-stat small { color: #9fbab2; font-size: 9px; }
.public-section { padding: 85px clamp(22px,8vw,130px); }
.section-head { max-width: 620px; margin: 0 auto 40px; text-align: center; }
.section-head span { color: var(--primary); font-size: 10px; font-weight: 800; }
.section-head h2 { margin: 9px 0 10px; font-size: clamp(26px,3vw,38px); }
.section-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.feature-grid { max-width: 1180px; margin: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.feature-card { padding: 25px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: var(--shadow); }
.feature-card h3 { margin: 16px 0 7px; font-size: 15px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.public-quote { padding: 70px 22px; text-align: center; color: white; background: #11352d; }
.public-quote blockquote { max-width: 830px; margin: auto; color: #f4f8f7; font-size: clamp(21px,3vw,34px); font-weight: 700; line-height: 1.8; }
.public-quote p { color: #92aca5; font-size: 10px; }
.public-footer { padding: 30px clamp(22px,8vw,130px); display: flex; justify-content: space-between; color: #788782; background: #f1f4f3; font-size: 10px; }

.auth-body { min-height: 100vh; background: #f4f7f6; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, .9fr) minmax(420px, 1.1fr); }
.auth-panel { position: relative; min-height: 100vh; padding: 45px clamp(35px,6vw,85px); display: flex; flex-direction: column; overflow: hidden; color: white; background: radial-gradient(circle at 15% 30%, rgba(210,171,81,.16), transparent 28%), linear-gradient(145deg,#0d2d26,#17604e); }
.auth-panel::after { content: ''; position: absolute; width: 520px; height: 520px; left: -280px; bottom: -180px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 65px rgba(255,255,255,.025),0 0 0 130px rgba(255,255,255,.015); }
.auth-message { position: relative; z-index: 1; margin: auto 0; max-width: 500px; }
.auth-message h1 { margin: 20px 0 14px; font-size: clamp(34px,4vw,56px); line-height: 1.35; }
.auth-message p { margin: 0; color: #bad1ca; font-size: 13px; line-height: 2; }
.auth-verse { position: relative; z-index: 1; color: #ddc47f; font-size: 13px; }
.auth-form-side { padding: 45px 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.auth-card { width: min(440px,100%); padding: clamp(24px,4vw,40px); background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 25px 70px rgba(20,45,38,.09); }
.auth-card-head span { color: var(--primary); font-size: 10px; font-weight: 800; }
.auth-card-head h2 { margin: 7px 0 7px; font-size: 24px; }
.auth-card-head p { margin: 0 0 28px; color: var(--muted); font-size: 11px; }
.auth-form { display: grid; gap: 17px; }
.auth-form .form-control { min-height: 46px; }
.auth-options { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.auth-options a { color: var(--primary); font-weight: 700; }
.auth-submit { min-height: 47px; width: 100%; margin-top: 3px; }
.auth-home-link { margin-top: 18px; color: var(--muted); font-size: 10px; }
.auth-home-link:hover { color: var(--primary); }
.auth-mobile-brand { display: none; margin-bottom: 25px; }
.demo-note { margin-top: 25px; padding: 11px; display: flex; gap: 9px; border-radius: 10px; color: #6a766f; background: #f6f8f7; font-size: 9px; line-height: 1.7; }
.demo-note p { margin: 0; }
.demo-note-icon { width: 24px; height: 24px; display: grid; place-items: center; flex: none; border-radius: 7px; color: var(--primary); background: var(--primary-soft); font-weight: 800; }

@media (max-width: 1150px) {
    .stats-grid { grid-template-columns: repeat(2,1fr); }
    .quick-actions { grid-template-columns: repeat(2,1fr); }
    .grid-main { grid-template-columns: 1fr; }
    .form-grid-3 { grid-template-columns: repeat(2,1fr); }
    .form-span-3 { grid-column: span 2; }
}

@media (max-width: 820px) {
    .sidebar { transform: translateX(110%); transition: transform .25s ease; }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar-scrim { position: fixed; display: block; z-index: 35; inset: 0; background: rgba(5,20,16,.55); backdrop-filter: blur(2px); }
    .mobile-close { display: block; }
    .main-area { margin-right: 0; }
    .menu-button { display: grid; }
    .topbar { height: 80px; padding: 0 18px; }
    .topbar .eyebrow { display: none; }
    .today-chip span { display: none; }
    .today-chip { width: 39px; padding: 0; justify-content: center; }
    .page-content { padding: 22px 15px 35px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: 1fr; }
    .public-links a:not(.btn) { display: none; }
    .hero-stats { position: relative; left: auto; bottom: auto; margin-top: 50px; }
    .hero { display: block; min-height: 730px; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-panel { display: none; }
    .auth-form-side { min-height: 100vh; }
    .auth-mobile-brand { display: block; }
}

@media (max-width: 560px) {
    .stats-grid, .quick-actions { grid-template-columns: 1fr; }
    .page-head { align-items: flex-start; flex-direction: column; }
    .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
    .form-span-2, .form-span-3 { grid-column: span 1; }
    .filter-bar > .form-select, .filter-bar > .btn { width: 100%; }
    .info-grid { grid-template-columns: 1fr 1fr; }
    .public-nav { height: 72px; }
    .public-nav .brand-symbol { width: 40px; height: 40px; }
    .public-nav .brand-mark strong { font-size: 18px; }
    .public-links .btn { min-height: 36px; padding: 0 11px; }
    .hero { min-height: 760px; padding-top: 120px; }
    .hero-stats { gap: 16px; }
    .public-footer { flex-direction: column; gap: 8px; text-align: center; }
}

/* Student portal and secure QR scanner */
.student-portal-body { min-height: 100vh; color: var(--ink); background: #f2f6f4; }
.student-topnav { position: sticky; z-index: 30; top: 0; min-height: 76px; padding: 10px clamp(18px,5vw,72px); display: flex; align-items: center; gap: 34px; color: white; background: linear-gradient(110deg,#0d3028,#176d58); box-shadow: 0 8px 25px rgba(7,35,28,.12); }
.student-topnav .brand-mark { min-width: 205px; color: white; }
.student-topnav .brand-mark small { color: #a9cbc2; }
.student-topnav nav { display: flex; align-items: center; gap: 6px; }
.student-topnav nav a { padding: 10px 12px; border-radius: 9px; color: #d4e5e0; font-size: 10px; font-weight: 700; }
.student-topnav nav a:hover { color: white; background: rgba(255,255,255,.09); }
.student-user-menu { margin-right: auto; display: flex; align-items: center; gap: 9px; }
.student-user-avatar { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; color: #12392f; background: var(--gold); font-weight: 900; }
.student-user-menu > span:nth-child(2) { display: grid; min-width: 100px; }
.student-user-menu strong { font-size: 10px; }
.student-user-menu small { color: #a9cbc2; font-size: 8px; direction: ltr; text-align: right; }
.student-user-menu button { padding: 7px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; color: #d4e5e0; background: transparent; font-size: 9px; cursor: pointer; }
.student-portal-main { width: min(1380px,calc(100% - 34px)); min-height: calc(100vh - 150px); margin: 28px auto 50px; }
.student-portal-footer { padding: 23px; text-align: center; color: #82928d; font-size: 9px; }
.student-welcome { position: relative; padding: clamp(25px,4vw,43px); display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; border-radius: 22px; color: white; background: radial-gradient(circle at 9% 20%,rgba(216,177,85,.19),transparent 28%),linear-gradient(115deg,#12352d,#17614f); box-shadow: 0 16px 40px rgba(14,58,47,.12); }
.student-welcome::after { content: ''; position: absolute; width: 270px; height: 270px; left: -95px; bottom: -170px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.015); }
.student-welcome > * { position: relative; z-index: 1; }
.student-welcome-kicker { color: #e3c779; font-size: 10px; font-weight: 800; }
.student-welcome h1 { margin: 6px 0 5px; font-size: clamp(27px,3.4vw,43px); }
.student-welcome p { margin: 0; color: #bed2cc; font-size: 11px; }
.student-welcome-tags { margin-top: 17px; display: flex; flex-wrap: wrap; gap: 7px; }
.student-welcome-tags span { padding: 6px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; color: #d9e6e2; background: rgba(255,255,255,.06); font-size: 9px; }
.student-welcome-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.student-metrics { margin: 17px 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.student-metrics article { min-height: 92px; padding: 18px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: var(--shadow); }
.student-metric-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 12px; color: var(--primary); background: var(--primary-soft); font-size: 18px; font-weight: 900; }
.student-metrics small { display: block; color: var(--muted); font-size: 9px; }
.student-metrics strong { display: block; margin-top: 3px; font-size: 22px; }
.student-metrics em { color: var(--muted); font-size: 8px; font-style: normal; }
.student-next-event { margin-bottom: 17px; padding: 16px 20px; display: grid; grid-template-columns: 55px 1fr auto; align-items: center; gap: 14px; border: 1px solid #eadcb5; border-radius: 15px; background: #fffaf0; }
.student-event-date { width: 52px; height: 54px; display: grid; place-items: center; align-content: center; border-radius: 12px; color: white; background: #b48832; }
.student-event-date strong { line-height: 1; font-size: 20px; }.student-event-date small { font-size: 8px; }
.student-next-event > div small { color: #aa8439; font-size: 8px; font-weight: 800; }.student-next-event h2 { margin: 2px 0; font-size: 14px; }.student-next-event p { margin: 0; color: var(--muted); font-size: 9px; }
.student-dashboard-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(310px,.75fr); gap: 17px; align-items: start; }
.student-profile-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; padding: 0 !important; }
.student-profile-list > div { min-height: 77px; padding: 17px 20px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.student-profile-list > div:nth-child(4n) { border-left: 0; }.student-profile-list > div:nth-last-child(-n+4) { border-bottom: 0; }
.student-profile-list span { color: var(--muted); font-size: 8px; }.student-profile-list strong { margin-top: 5px; font-size: 11px; }
.student-note-cell { max-width: 280px; white-space: normal !important; color: var(--muted); line-height: 1.7; }
.student-assessments { display: grid; gap: 10px; }
.student-assessments article { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfc; }
.student-assessment-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.student-assessment-head small { color: var(--muted); font-size: 8px; }.student-assessment-head h3 { margin: 3px 0 0; font-size: 12px; }
.student-score-row { margin: 12px 0; padding: 10px; display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; border-radius: 9px; background: var(--primary-soft); }
.student-score-row span { color: var(--muted); font-size: 8px; }.student-score-row strong { display: block; margin-top: 3px; color: var(--primary-dark); font-size: 13px; }
.student-errors { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 5px; }.student-errors span { padding: 5px 7px; border-radius: 6px; color: #955146; background: var(--danger-soft); font-size: 8px; }
.student-timeline { padding: 6px 20px !important; }.student-timeline > div { position: relative; min-height: 57px; padding: 12px 17px 12px 0; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }.student-timeline > div:last-child { border: 0; }
.timeline-dot { position: absolute; right: 0; width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }.student-timeline p { flex: 1; margin: 0; display: grid; }.student-timeline strong { font-size: 9px; }.student-timeline small { color: var(--muted); font-size: 8px; }
.student-announcements { display: grid; gap: 9px; }.student-announcements article { padding: 13px; border-radius: 11px; background: #f6f9f8; }.student-announcements article > span { float: left; padding: 3px 6px; border-radius: 5px; color: #89671f; background: #f5e8c6; font-size: 7px; }.student-announcements h3 { margin: 0 0 5px; font-size: 10px; }.student-announcements p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.75; }.student-announcements small { color: #9aa6a2; font-size: 7px; }
.student-requests { display: grid; gap: 8px; }.student-requests article { padding: 11px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border: 1px solid var(--line); border-radius: 10px; }.student-requests article > div { flex: 1; display: grid; }.student-requests strong { font-size: 9px; }.student-requests small { color: var(--muted); font-size: 7px; direction: ltr; text-align: right; }.student-requests p { width: 100%; margin: 0; padding-top: 7px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.student-resources { display: grid; gap: 7px; }.student-resources a { padding: 10px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 9px; }.student-resources a > span:first-child { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: var(--primary); background: var(--primary-soft); }.student-resources a > span:nth-child(2) { flex: 1; display: grid; }.student-resources strong { font-size: 9px; }.student-resources small { color: var(--muted); font-size: 7px; }.student-resources b { color: var(--primary); font-size: 8px; }
.student-actions { display: grid; gap: 8px; }.student-actions article { padding: 11px; display: flex; gap: 9px; border-radius: 9px; color: #7e3e35; background: var(--danger-soft); }.student-actions article > span { width: 23px; height: 23px; display: grid; place-items: center; flex: none; border-radius: 50%; color: white; background: var(--danger); font-weight: 800; }.student-actions strong { font-size: 9px; }.student-actions p { margin: 2px 0 0; font-size: 8px; line-height: 1.6; }
.student-page-heading { margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }.student-page-heading span { color: var(--primary); font-size: 9px; font-weight: 800; }.student-page-heading h1 { margin: 3px 0; font-size: 26px; }.student-page-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.student-account-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 17px; align-items: start; }.student-account-grid .student-profile-list { grid-template-columns: 1fr; }.student-account-grid .student-profile-list > div { border-left: 0; border-bottom: 1px solid var(--line); }.student-account-grid .student-profile-list > div:last-child { border-bottom: 0; }
.section-divider { position: relative; display: flex; align-items: center; gap: 10px; color: var(--primary); font-size: 10px; font-weight: 800; }.section-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }

.scanner-body { min-height: 100vh; color: white; background: radial-gradient(circle at 12% 75%,rgba(208,168,76,.18),transparent 24%),linear-gradient(130deg,#0b2923,#17614f); }
.scanner-nav { position: relative; color: white; background: transparent; }.scanner-nav .brand-mark,.scanner-nav .public-links a:not(.btn) { color: white; }.scanner-nav .brand-mark small { color: #a9cbc2; }
.scanner-shell { width: min(1100px,calc(100% - 36px)); min-height: calc(100vh - 105px); margin: auto; padding: 45px 0 70px; display: grid; grid-template-columns: 1fr 430px; align-items: center; gap: clamp(40px,8vw,100px); }
.scanner-copy h1 { margin: 17px 0 12px; font-size: clamp(38px,5.5vw,65px); line-height: 1.28; }.scanner-copy h1 span { color: #dfc36f; }.scanner-copy > p { max-width: 530px; color: #b9d0ca; font-size: 13px; line-height: 2; }
.scanner-security { margin-top: 24px; padding: 15px; max-width: 500px; display: grid; gap: 3px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.05); }.scanner-security strong { color: #e5cc84; font-size: 10px; }.scanner-security span { color: #a9c0ba; font-size: 9px; }
.scanner-card { padding: 25px; color: var(--ink); border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: white; box-shadow: 0 30px 90px rgba(3,22,17,.28); }
.scanner-frame { position: relative; height: 310px; overflow: hidden; border-radius: 16px; background: #0b201b; }.scanner-frame video { width: 100%; height: 100%; object-fit: cover; }.scanner-target { position: absolute; inset: 48px; }.scanner-target i { position: absolute; width: 32px; height: 32px; border-color: #e0bf64; border-style: solid; }.scanner-target i:nth-child(1){right:0;top:0;border-width:3px 3px 0 0}.scanner-target i:nth-child(2){left:0;top:0;border-width:3px 0 0 3px}.scanner-target i:nth-child(3){right:0;bottom:0;border-width:0 3px 3px 0}.scanner-target i:nth-child(4){left:0;bottom:0;border-width:0 0 3px 3px}
.scanner-placeholder { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 5px; color: white; background: linear-gradient(140deg,#0b2922,#17493e); }.scanner-placeholder span { font-size: 48px; color: #dfc36f; }.scanner-placeholder strong { font-size: 12px; }.scanner-placeholder small { color: #91aba4; font-size: 9px; }.scanner-placeholder[hidden] { display: none; }
.scanner-status { min-height: 18px; margin: 11px 0; text-align: center; color: var(--muted); font-size: 9px; }.scanner-status.is-error { color: var(--danger); }.scanner-status.is-success { color: var(--success); }.scanner-start { width: 100%; min-height: 44px; }.scanner-divider { margin: 19px 0 13px; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 8px; }.scanner-divider::before,.scanner-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }.scanner-manual { display: grid; grid-template-columns: 1fr auto; gap: 7px; }

@media(max-width:1050px){.student-topnav nav{display:none}.student-metrics{grid-template-columns:repeat(2,1fr)}.student-dashboard-grid{grid-template-columns:1fr}.student-profile-list{grid-template-columns:repeat(2,1fr)}.student-profile-list>div:nth-child(2n){border-left:0}.student-profile-list>div:nth-last-child(-n+4){border-bottom:1px solid var(--line)}.student-profile-list>div:nth-last-child(-n+2){border-bottom:0}.scanner-shell{grid-template-columns:1fr;max-width:650px}.scanner-copy{text-align:center}.scanner-copy>p,.scanner-security{margin-right:auto;margin-left:auto}}
@media(max-width:680px){.student-topnav{min-height:68px;padding:8px 14px}.student-topnav .brand-mark{min-width:0}.student-topnav .brand-mark small{display:none}.student-user-menu>span:nth-child(2){display:none}.student-portal-main{width:min(100% - 20px,1380px);margin-top:12px}.student-welcome{align-items:flex-start;flex-direction:column}.student-metrics{grid-template-columns:1fr 1fr}.student-metrics article{padding:12px;min-height:78px}.student-metric-icon{width:35px;height:35px}.student-metrics strong{font-size:17px}.student-next-event{grid-template-columns:48px 1fr}.student-next-event>.badge{display:none}.student-profile-list{grid-template-columns:1fr}.student-profile-list>div{border-left:0!important;border-bottom:1px solid var(--line)!important}.student-profile-list>div:last-child{border-bottom:0!important}.student-score-row{grid-template-columns:1fr 1fr}.student-account-grid{grid-template-columns:1fr}.scanner-shell{padding-top:20px}.scanner-copy h1{font-size:36px}.scanner-card{padding:15px}.scanner-frame{height:270px}.scanner-nav .public-links a:not(.btn){display:none}}
@media(max-width:560px){.public-scan-link{width:62px!important;padding:0!important;font-size:0!important}.public-scan-link::after{content:'مسح QR';font-size:9px}.public-links{gap:5px}}