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

:root { --bg:#0d0d0f; --surface:#1b1b1e; --surface-2:#232327; --surface-3:#29292d; --text:#f1f1f3; --text-soft:#aaaab4; --muted:#777783; --line:rgba(255,255,255,.09); --brand:#2463ee; --brand-bright:#3a72f7; --teal:#56d1b2; --blue:#5986ff; --violet:#a78bfa; --amber:#f6d46c; --rose:#fb93a7; --green:#76dcac; --radius:16px; --shadow:0 12px 30px rgba(0,0,0,.16); }
html[data-theme="light"] { --bg:#f6f7fb; --surface:#fff; --surface-2:#f8f9fc; --surface-3:#edf0f6; --text:#20212a; --text-soft:#606475; --muted:#767b8d; --line:#e3e6ef; --brand:#1663e8; --brand-bright:#0f55ca; --shadow:0 10px 28px rgba(36,42,62,.08); }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--bg); color-scheme:dark; }
html[data-theme="light"] { color-scheme:light; }
body { margin:0; min-width:320px; color:var(--text); background:var(--bg); font-family:"Cairo",Tahoma,sans-serif; line-height:1.65; }
a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { color:var(--text); line-height:1.35; }
.ui-icon { width:18px; height:18px; display:block; }
.auth-layout { min-height:100vh; }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:2rem; background:radial-gradient(circle at 75% 7%,rgba(36,99,238,.2),transparent 26rem),var(--bg); }
.auth-card { width:min(100%,30rem); padding:2.5rem; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }
.brand-mark { width:2.75rem; height:2.75rem; display:inline-grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--brand-bright),#1c3ca5); border-radius:.85rem; font-weight:800; }
.auth-card .brand-mark { width:3.25rem; height:3.25rem; margin-bottom:1.25rem; font-size:1.3rem; }
.eyebrow { margin:0 0:.35rem; color:var(--brand-bright); font-size:.76rem; font-weight:800; letter-spacing:.02em; }
.muted { color:var(--text-soft); font-size:.9rem; }
.form-stack,.form-grid { display:grid; gap:1rem; } label { display:grid; gap:.42rem; color:var(--text-soft); font-size:.9rem; font-weight:600; } input,select,textarea { width:100%; min-height:2.8rem; padding:.66rem .82rem; color:var(--text); border:1px solid var(--line); background:var(--surface-2); border-radius:.7rem; outline:none; } input:focus,select:focus,textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(36,99,238,.18); }
.button { min-height:2.75rem; padding:.62rem 1rem; border:1px solid transparent; border-radius:.7rem; font-weight:700; transition:transform 160ms cubic-bezier(.23,1,.32,1),background 160ms cubic-bezier(.23,1,.32,1); } .button:active { transform:scale(.98); }.button-primary { color:#fff; background:var(--brand); }.button-primary:hover { background:var(--brand-bright); }.button-secondary { color:var(--text); border-color:var(--line); background:var(--surface-2); }.button-secondary:hover { background:var(--surface-3); }.button-link { border:0; background:transparent; color:var(--brand-bright); font-weight:700; }
.alert { margin:1rem 0; padding:.8rem .95rem; border-radius:.7rem; font-size:.9rem; }.alert-error { color:#fecaca; background:rgba(251,113,133,.13); border:1px solid rgba(251,113,133,.26); }.alert-success { color:#a7f3d0; background:rgba(86,209,178,.11); border:1px solid rgba(86,209,178,.24); }

/* القالب المستلهم من النسخة المرجعية */
.reference-shell { min-height:100vh; display:grid; grid-template-areas:"main sidebar"; grid-template-columns:minmax(0,1fr) 280px; background:var(--bg); }
.reference-sidebar { grid-area:sidebar; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:16px 12px 13px; color:var(--text); background:var(--surface); border-left:1px solid var(--line); transition:width 220ms cubic-bezier(.23,1,.32,1),padding 220ms cubic-bezier(.23,1,.32,1); overflow:hidden; }
.reference-sidebar__head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:54px; padding:0 5px 12px; }.reference-brand { display:flex; align-items:center; min-width:0; gap:10px; }.reference-brand__mark { width:42px; height:42px; display:grid; flex:0 0 auto; place-items:center; color:#fff; border-radius:13px; background:linear-gradient(145deg,#4d7eff,#234ec6); font-size:1.1rem; font-weight:800; box-shadow:0 8px 18px rgba(36,99,238,.24); }.reference-brand__copy { display:grid; min-width:0; gap:1px; }.reference-brand__copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:.91rem; }.reference-brand__copy small { color:var(--text-soft); font-size:.67rem; }.reference-sidebar__actions { display:flex; gap:3px; }.icon-button { width:31px; height:31px; display:grid; place-items:center; padding:0; color:var(--text-soft); border:0; border-radius:9px; background:transparent; }.icon-button:hover { color:var(--text); background:var(--surface-3); }.theme-icon-light { display:none; } html[data-theme="light"] .theme-icon-light { display:block; } html[data-theme="light"] .theme-icon-dark { display:none; }
.reference-nav { display:grid; gap:5px; margin-top:13px; }.reference-nav__label { margin:0 10px 7px; color:var(--muted); font-size:.64rem; font-weight:800; letter-spacing:.12em; }.reference-nav__link { display:flex; align-items:center; gap:11px; min-height:42px; padding:0 11px; color:var(--text-soft); border-radius:11px; font-size:.88rem; font-weight:600; transition:background 160ms ease,color 160ms ease,transform 160ms ease; }.reference-nav__link:hover { color:var(--text); background:var(--surface-3); }.reference-nav__link:active { transform:scale(.98); }.reference-nav__link.is-active { color:var(--text); background:var(--surface-3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.025); }.reference-nav__icon { width:19px; height:19px; display:grid; flex:0 0 auto; place-items:center; color:var(--text-soft); }.reference-nav__link.is-active .reference-nav__icon { color:var(--brand-bright); }.reference-sidebar__footer { margin-top:auto; padding:14px 4px 0; border-top:1px solid var(--line); }.account-card { display:flex; align-items:center; gap:10px; min-width:0; }.account-avatar { width:36px; height:36px; display:grid; flex:0 0 auto; place-items:center; color:#dae4ff; border-radius:50%; background:linear-gradient(145deg,#3459d5,#223c9c); font-size:.8rem; font-weight:800; }.account-card__copy { display:grid; min-width:0; }.account-card__copy strong,.account-card__copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.account-card__copy strong { font-size:.78rem; }.account-card__copy small { color:var(--muted); font-size:.64rem; }.account-card__bottom { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-top:10px; }.role-chip,.insight-pill,.chart-total { display:inline-flex; align-items:center; border-radius:999px; font-size:.69rem; font-weight:700; }.role-chip { padding:4px 8px; color:#b9caff; background:rgba(64,103,238,.14); }.logout-button { display:flex; align-items:center; gap:4px; padding:4px 6px; color:var(--text-soft); border:0; background:transparent; border-radius:7px; font-size:.68rem; }.logout-button .ui-icon { width:14px; height:14px; }.logout-button:hover { color:var(--rose); background:rgba(251,113,133,.08); }
.reference-content { grid-area:main; min-width:0; background:radial-gradient(circle at 88% 0,rgba(36,99,238,.13),transparent 27rem),var(--bg); }.reference-content__inner { width:min(100%,1450px); margin:0 auto; padding:28px clamp(18px,3vw,45px) 42px; }.mobile-nav-button { display:none; }
body.sidebar-collapsed .reference-shell { grid-template-columns:minmax(0,1fr) 74px; }body.sidebar-collapsed .reference-sidebar { padding-inline:11px; }body.sidebar-collapsed .reference-brand__copy,body.sidebar-collapsed .reference-sidebar__actions,body.sidebar-collapsed .reference-nav__label,body.sidebar-collapsed .reference-nav__text,body.sidebar-collapsed .account-card__copy,body.sidebar-collapsed .account-card__bottom { display:none; }body.sidebar-collapsed .reference-sidebar__head,body.sidebar-collapsed .reference-brand,body.sidebar-collapsed .reference-nav__link,body.sidebar-collapsed .account-card { justify-content:center; }body.sidebar-collapsed .reference-nav__link { padding:0; }

/* تكييف الوحدات القائمة داخل القالب الموحد */
.reference-content .app-shell { display:block; min-height:0; }.reference-content .app-shell > .sidebar { display:none; }.reference-content .main-content { min-width:0; padding:0; }.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:0 0 22px; border-bottom:1px solid var(--line); }.topbar h1 { margin:0; font-size:clamp(1.45rem,2.3vw,2rem); font-weight:800; }.topbar p { color:var(--text-soft); }.account-menu { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; font-size:.84rem; }.welcome-card,.panel,.metric-card { color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }.welcome-card { margin:1.5rem 0; padding:1.4rem; }.welcome-card h2 { margin-bottom:.5rem; }.metric-grid,.metrics-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.metric-card { padding:1.05rem; }.metric-card span { display:block; color:var(--text-soft); font-size:.82rem; }.metric-card strong { display:block; margin-top:.35rem; color:var(--text); font-size:1.24rem; }.two-column { display:grid; grid-template-columns:minmax(19rem,.85fr) minmax(22rem,1.15fr); gap:1rem; margin-top:1.5rem; }.panel { padding:1.25rem; }.panel-heading,.search-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.search-row { margin-top:1rem; justify-content:flex-start; }.search-row label { flex:1; max-width:42rem; } fieldset { margin:0; padding:1.25rem 0; border:0; border-bottom:1px solid var(--line); }fieldset:last-of-type { border-bottom:0; }legend { margin-bottom:1rem; color:var(--brand-bright); font-weight:700; }.form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.form-action { grid-column:1 / -1; }.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }table { width:100%; min-width:32rem; border-collapse:collapse; font-size:.84rem; }th,td { padding:.73rem; text-align:right; border-bottom:1px solid var(--line); }th { color:var(--text-soft); font-weight:700; background:var(--surface-2); }tr:last-child td { border-bottom:0; }.empty-cell { padding:2rem; color:var(--text-soft); text-align:center; }.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }.status { display:inline-flex; align-items:center; padding:.2rem .55rem; border-radius:999px; font-size:.74rem; font-weight:700; }.status-active { color:#8ef0c5; background:rgba(86,209,178,.13); }.status-off { color:#ffc1ca; background:rgba(251,113,133,.14); }

/* لوحة التحكم المطابقة للمرجع */
.dashboard-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }.dashboard-heading h1 { margin:0; font-size:clamp(1.6rem,2.5vw,2.25rem); font-weight:800; letter-spacing:-.03em; }.dashboard-heading__intro { max-width:720px; margin:12px 0 0; color:var(--text-soft); font-size:.9rem; line-height:2; }.dashboard-heading__tools { display:flex; align-items:center; gap:9px; padding-top:5px; }.notification-button { position:relative; width:36px; height:36px; display:grid; place-items:center; color:var(--text-soft); border:1px solid var(--line); border-radius:50%; background:var(--surface); }.notification-button svg { width:17px; }.notification-button:hover { color:var(--text); background:var(--surface-2); }.notification-button b { position:absolute; top:-5px; left:-5px; display:grid; min-width:17px; height:17px; place-items:center; padding:0 3px; color:#fff; border-radius:99px; background:#ec5273; font-size:9px; }
.reference-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }.reference-metric-card { min-width:0; min-height:145px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:21px 19px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:17px; box-shadow:var(--shadow); }.reference-metric-card > div { min-width:0; }.reference-metric-card p { margin:0; color:var(--text-soft); font-size:.82rem; font-weight:600; }.reference-metric-card strong { display:block; min-width:0; margin-top:10px; overflow-wrap:anywhere; color:var(--text); font-size:clamp(1.24rem,1.55vw,1.75rem); font-weight:800; line-height:1.28; letter-spacing:-.02em; }.reference-metric-card small { display:block; margin-top:7px; color:var(--muted); font-size:.7rem; line-height:1.6; }.metric-icon { width:42px; height:42px; display:grid; flex:0 0 auto; place-items:center; border-radius:13px; }.metric-icon svg { width:21px; height:21px; }.metric-icon--blue { color:#7fa1ff; background:rgba(89,134,255,.15); }.metric-icon--teal { color:#78e4c7; background:rgba(86,209,178,.15); }.metric-icon--violet { color:#c3adff; background:rgba(167,139,250,.16); }.metric-icon--amber { color:#ffe18b; background:rgba(246,212,108,.16); }.metric-icon--rose { color:#ffafbd; background:rgba(251,147,167,.16); }.metric-icon--green { color:#9fe9bd; background:rgba(118,220,172,.15); }
.insight-section { margin-top:30px; }.insight-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }.insight-heading h2 { margin:0; font-size:1.52rem; font-weight:800; }.insight-heading p:not(.eyebrow) { margin:6px 0 0; color:var(--text-soft); font-size:.85rem; }.insight-pill { flex:0 0 auto; padding:6px 10px; color:#9bb4ff; background:rgba(36,99,238,.15); }.reference-metric-grid--insights .reference-metric-card { min-height:128px; padding:16px; }.reference-metric-grid--insights .reference-metric-card strong { margin-top:6px; font-size:1.42rem; }
.dashboard-chart-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr); gap:16px; margin-top:16px; }.chart-card { min-width:0; padding:20px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:17px; box-shadow:var(--shadow); }.chart-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.chart-card__head h3 { margin:0; font-size:1rem; font-weight:800; }.chart-card__head p { margin:5px 0 0; color:var(--text-soft); font-size:.75rem; }.chart-total { flex:0 0 auto; padding:5px 8px; color:var(--text-soft); background:var(--surface-3); }.financial-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:17px 0; }.financial-summary > div { display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; padding:8px 9px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); font-size:.71rem; }.financial-summary span { display:flex; align-items:center; min-width:0; gap:5px; color:var(--text-soft); }.financial-summary strong { overflow:hidden; color:var(--text); font-size:.68rem; white-space:nowrap; }.dot { width:8px; height:8px; display:inline-block; flex:0 0 auto; border-radius:50%; }.dot--teal { background:var(--teal); }.dot--blue { background:var(--blue); }.dot--rose { background:var(--rose); }.dot--amber { background:var(--amber); }.financial-chart { display:grid; grid-template-columns:78px minmax(0,1fr); gap:12px; min-height:169px; padding:9px 0 2px; }.financial-chart__labels,.financial-chart__bars { display:grid; grid-template-rows:repeat(3,1fr); gap:15px; }.financial-chart__labels span { display:flex; align-items:center; justify-content:flex-end; color:var(--text-soft); font-size:.76rem; font-weight:700; }.financial-bar { display:flex; align-items:center; gap:10px; min-width:0; }.financial-bar__track { flex:1; height:22px; overflow:hidden; border-radius:7px; background:var(--surface-3); }.financial-bar__fill { display:block; height:100%; min-width:2px; border-radius:7px; }.financial-bar__fill--teal { background:var(--teal); }.financial-bar__fill--blue { background:var(--blue); }.financial-bar__fill--rose { background:var(--rose); }.financial-bar strong { flex:0 0 auto; min-width:80px; color:var(--text); font-size:.69rem; direction:ltr; text-align:left; }.attendance-chart { display:grid; grid-template-columns:155px minmax(0,1fr); align-items:center; gap:18px; min-height:218px; padding-top:12px; }.attendance-donut { width:145px; height:145px; display:grid; place-items:center; border-radius:50%; }.attendance-donut > span { width:93px; height:93px; display:grid; place-content:center; text-align:center; border-radius:50%; background:var(--surface); }.attendance-donut b { display:block; color:var(--text); font-size:1.2rem; }.attendance-donut small { color:var(--text-soft); font-size:.67rem; }.attendance-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.attendance-legend div { display:flex; align-items:center; justify-content:space-between; gap:5px; padding:8px; border-radius:8px; background:var(--surface-2); color:var(--text-soft); font-size:.7rem; }.attendance-legend span { display:flex; align-items:center; gap:5px; }.attendance-legend strong { color:var(--text); }.chart-empty { display:grid; min-height:210px; place-items:center; margin-top:13px; padding:18px; color:var(--text-soft); border:1px dashed var(--line); border-radius:12px; text-align:center; font-size:.84rem; }
.dashboard-followups { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr); gap:16px; margin-top:16px; }.followup-row { display:flex; align-items:center; gap:10px; min-height:54px; margin-top:9px; padding:8px; color:var(--text); border:1px solid var(--line); border-radius:11px; font-size:.78rem; font-weight:700; transition:background 160ms ease,border-color 160ms ease; }.followup-row:hover { border-color:rgba(89,134,255,.45); background:var(--surface-2); }.followup-row .metric-icon { width:33px; height:33px; border-radius:10px; }.followup-row .metric-icon svg { width:16px; }.followup-row b { min-width:24px; margin-right:auto; padding:2px 7px; color:var(--text); border-radius:99px; background:var(--surface-3); text-align:center; }.dashboard-settings-card { display:grid; align-content:start; gap:10px; padding:20px; color:#edf2ff; border-radius:17px; background:linear-gradient(145deg,#255dd7,#1741a4); box-shadow:0 15px 28px rgba(29,66,169,.23); }.dashboard-settings-card p { margin:0; color:#c6d5ff; font-size:.75rem; font-weight:800; }.dashboard-settings-card h3 { margin:0; color:#fff; font-size:1rem; }.dashboard-settings-card span { padding:9px; color:#e5ecff; border-radius:9px; background:rgba(255,255,255,.1); font-size:.72rem; }.dashboard-settings-card a { display:grid; min-height:37px; place-items:center; margin-top:2px; color:#20458f; border-radius:9px; background:#fff; font-size:.75rem; font-weight:800; }
@media (max-width:1180px) { .reference-shell { grid-template-columns:minmax(0,1fr) 245px; }.reference-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-chart-grid,.dashboard-followups { grid-template-columns:1fr; } }
@media (max-width:900px) { .reference-shell { display:block; }.reference-sidebar { position:fixed; z-index:70; top:0; right:0; width:280px; height:100dvh; transform:translateX(105%); box-shadow:-18px 0 40px rgba(0,0,0,.3); transition:transform 220ms cubic-bezier(.23,1,.32,1); }.mobile-nav-open .reference-sidebar { transform:none; }.reference-content__inner { padding:18px 16px 32px; }.mobile-nav-button { display:flex; align-items:center; gap:7px; margin:0; padding:12px 16px; color:var(--text-soft); border:0; background:transparent; font-size:.8rem; font-weight:700; }.mobile-nav-button .ui-icon { width:19px; height:19px; }.desktop-only { display:none; }.two-column,.metric-grid,.metrics-grid,.form-grid { grid-template-columns:1fr; }.panel-heading,.search-row { align-items:stretch; flex-direction:column; }.main-content { padding:0; }body.sidebar-collapsed .reference-shell { display:block; }body.sidebar-collapsed .reference-sidebar { width:280px; padding:16px 12px 13px; }body.sidebar-collapsed .reference-brand__copy,body.sidebar-collapsed .reference-sidebar__actions,body.sidebar-collapsed .reference-nav__label,body.sidebar-collapsed .reference-nav__text,body.sidebar-collapsed .account-card__copy,body.sidebar-collapsed .account-card__bottom { display:initial; } }
@media (max-width:640px) { .auth-page { padding:1rem; }.auth-card { padding:1.45rem; }.dashboard-heading,.insight-heading,.topbar { align-items:flex-start; flex-direction:column; }.dashboard-heading__tools { padding-top:0; }.reference-metric-grid { grid-template-columns:1fr; }.reference-metric-card { min-height:118px; }.financial-summary { grid-template-columns:1fr; }.financial-chart { grid-template-columns:60px minmax(0,1fr); gap:6px; }.financial-bar { gap:6px; }.financial-bar strong { min-width:60px; font-size:.6rem; }.attendance-chart { grid-template-columns:1fr; justify-items:center; }.attendance-legend { width:100%; }.chart-total { white-space:nowrap; }.table-wrap { border-radius:9px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* يظهر ملخص الحساب مرة واحدة في الشريط الجانبي المرجعي فقط. */
.reference-content .account-menu { display:none; }