/* =====================================================================
   نظام إدارة المدارس — نظام التصميم (Design System) — النسخة العربية RTL
   HTML + CSS + Bootstrap 5 فقط. لا JavaScript مكتوب. لا حقن محتوى.
   قائمة الجوال عبر Bootstrap Offcanvas. الأنيميشن CSS خالص.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) الرموز التصميمية (Design Tokens)
   --------------------------------------------------------------------- */
:root {
  --brand-primary:      #1e50a0;
  --brand-primary-dark: #163e7d;
  --brand-primary-light:#3f74c9;
  --brand-accent:       #f59e0b;

  --c-success: #16a34a;
  --c-warning: #d97706;
  --c-danger:  #dc2626;
  --c-info:    #0ea5e9;

  --c-bg:        #f4f6fb;
  --c-surface:   #ffffff;
  --c-border:    #e5e9f0;
  --c-text:      #1f2937;
  --c-text-soft: #6b7280;
  --c-text-mute: #9ca3af;

  --sidebar-w:    16.5rem;   /* 264px */
  --sidebar-bg:   #12213f;
  --sidebar-bg-2: #0d1a33;
  --sidebar-text: #c7d2e4;
  --sidebar-active:#1e50a0;
  --topbar-h:     4.125rem;  /* 66px */

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem;

  --radius-sm:.375rem; --radius:.625rem; --radius-lg:1rem;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow-md:0 4px 12px rgba(16,24,40,.08);
  --shadow-lg:0 12px 32px rgba(16,24,40,.14);

  --t-fast:.2s ease;
  --t:.35s cubic-bezier(.4,0,.2,1);
  --font-ar:'Cairo','Tajawal',system-ui,sans-serif;
}

/* ---------------------------------------------------------------------
   2) الأساس (Base)
   --------------------------------------------------------------------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  direction:rtl; text-align:right; font-family:var(--font-ar);
  background:var(--c-bg); color:var(--c-text); margin:0;
  font-size:.95rem; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:var(--brand-primary); transition:color var(--t-fast); }
a:hover { color:var(--brand-primary-dark); }
h1,h2,h3,h4,h5,h6 { font-weight:700; color:var(--c-text); }
img { max-width:100%; height:auto; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:#c7cfdd; border-radius:20px; }
::-webkit-scrollbar-thumb:hover { background:#a9b4c7; }
:focus-visible { outline:3px solid rgba(30,80,160,.45); outline-offset:2px; border-radius:4px; }
.text-soft { color:var(--c-text-soft); }
.text-mute { color:var(--c-text-mute); }
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }

/* ---------------------------------------------------------------------
   3) تخطيط التطبيق (App Shell) — Flexbox + Bootstrap Offcanvas
   --------------------------------------------------------------------- */
.app-layout { min-height:100vh; }

/* الشريط الجانبي: offcanvas على الجوال، ثابت على الديسكتوب */
.sidebar {
  --bs-offcanvas-width:var(--sidebar-w);
  --bs-offcanvas-bg:var(--sidebar-bg);
  background:linear-gradient(180deg,var(--sidebar-bg) 0%,var(--sidebar-bg-2) 100%);
  color:var(--sidebar-text);
}
.sidebar .offcanvas-header { background:var(--sidebar-bg); color:#fff; }
.sidebar__body { display:flex; flex-direction:column; padding:0; }
.sidebar__brand {
  height:var(--topbar-h); display:flex; align-items:center; gap:var(--sp-3);
  padding-inline:var(--sp-5); border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0;
}
.sidebar__brand img { width:2.375rem; height:2.375rem; }
.sidebar__brand .name { color:#fff; font-weight:800; font-size:1.05rem; white-space:nowrap; line-height:1.2; }
.sidebar__brand .name small { display:block; font-weight:400; font-size:.7rem; color:var(--sidebar-text); }
.sidebar__nav { flex:1; overflow-y:auto; padding:var(--sp-3) var(--sp-3) var(--sp-6); }
.nav-section { color:var(--c-text-mute); font-size:.72rem; font-weight:700; padding:var(--sp-4) var(--sp-3) var(--sp-2); letter-spacing:.04em; white-space:nowrap; }
.nav-link-item {
  display:flex; align-items:center; gap:var(--sp-3); color:var(--sidebar-text);
  padding:.7rem var(--sp-3); border-radius:var(--radius-sm); margin-bottom:2px;
  font-size:.9rem; white-space:nowrap; transition:background var(--t-fast),color var(--t-fast);
}
.nav-link-item i { font-size:1.15rem; flex-shrink:0; width:1.5rem; text-align:center; }
.nav-link-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-link-item.active { background:var(--sidebar-active); color:#fff; box-shadow:var(--shadow-md); }
.nav-link-item .badge { margin-inline-start:auto; }

/* الديسكتوب: صف مرن + شريط جانبي لاصق */
@media (min-width:992px) {
  .app-layout { display:flex; align-items:flex-start; }
  .sidebar.offcanvas-lg {
    position:sticky; top:0; height:100vh; flex:0 0 var(--sidebar-w); width:var(--sidebar-w);
    background:linear-gradient(180deg,var(--sidebar-bg) 0%,var(--sidebar-bg-2) 100%) !important;
    visibility:visible; transform:none;
  }
  .sidebar .offcanvas-body { height:100vh; overflow-y:auto; padding:0 !important; flex-direction:column; }
  .main { flex:1 1 auto; min-width:0; }
}

.main { min-height:100vh; display:flex; flex-direction:column; width:100%; }

/* الشريط العلوي */
.topbar {
  min-height:var(--topbar-h); background:var(--c-surface); border-bottom:1px solid var(--c-border);
  display:flex; align-items:center; gap:var(--sp-3); padding-inline:var(--sp-5);
  position:sticky; top:0; z-index:1020;
}
.topbar__toggle { border:none; background:transparent; font-size:1.4rem; color:var(--c-text-soft); cursor:pointer; padding:6px; border-radius:var(--radius-sm); transition:background var(--t-fast); }
.topbar__toggle:hover { background:var(--c-bg); }
.topbar__search { flex:1; max-width:23.75rem; position:relative; }
.topbar__search input { width:100%; border:1px solid var(--c-border); background:var(--c-bg); border-radius:40px; padding:.55rem 2.6rem .55rem 1rem; font-family:inherit; font-size:.88rem; transition:border var(--t-fast),box-shadow var(--t-fast); }
.topbar__search input:focus { border-color:var(--brand-primary-light); box-shadow:0 0 0 3px rgba(30,80,160,.12); outline:none; }
.topbar__search i { position:absolute; inset-inline-start:.95rem; top:50%; transform:translateY(-50%); color:var(--c-text-mute); }
.topbar__spacer { flex:1; }
.topbar__actions { display:flex; align-items:center; gap:var(--sp-2); }
.icon-btn { position:relative; width:2.6rem; height:2.6rem; border:none; background:transparent; border-radius:50%; color:var(--c-text-soft); font-size:1.2rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background var(--t-fast),color var(--t-fast); }
.icon-btn:hover { background:var(--c-bg); color:var(--brand-primary); }
.icon-btn .dot { position:absolute; top:.5rem; inset-inline-end:.5rem; width:.55rem; height:.55rem; background:var(--c-danger); border:2px solid #fff; border-radius:50%; }
.topbar__user { display:flex; align-items:center; gap:var(--sp-2); cursor:pointer; padding:4px 6px; border-radius:40px; transition:background var(--t-fast); }
.topbar__user:hover { background:var(--c-bg); }
.avatar { width:2.5rem; height:2.5rem; border-radius:50%; background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-light)); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }

/* منطقة الصفحة والفوتر */
.page { padding:var(--sp-5); flex:1; }
.page-head { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.page-head h1 { font-size:1.5rem; margin:0; }
.page-head .breadcrumb { margin:4px 0 0; font-size:.82rem; --bs-breadcrumb-divider:'‹'; }
.page-head__actions { margin-inline-start:auto; display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.app-footer { padding:var(--sp-4) var(--sp-5); color:var(--c-text-mute); font-size:.82rem; border-top:1px solid var(--c-border); background:var(--c-surface); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

/* ---------------------------------------------------------------------
   4) البطاقات و KPI
   --------------------------------------------------------------------- */
.card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-head { padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--c-border); display:flex; align-items:center; gap:var(--sp-3); }
.card-head h3 { font-size:1.02rem; margin:0; }
.card-head .card-tools { margin-inline-start:auto; }
.card-body { padding:var(--sp-5); }
.kpi { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); padding:var(--sp-5); box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:transform var(--t),box-shadow var(--t); height:100%; }
.kpi:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.kpi__icon { width:3.375rem; height:3.375rem; border-radius:var(--radius); display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:var(--sp-3); }
.kpi__label { color:var(--c-text-soft); font-size:.85rem; margin:0; }
.kpi__value { font-size:1.9rem; font-weight:800; margin:2px 0 0; }
.kpi__trend { font-size:.8rem; font-weight:600; display:inline-flex; align-items:center; gap:3px; margin-top:6px; }
.kpi__trend.up { color:var(--c-success); }
.kpi__trend.down { color:var(--c-danger); }
.tint-primary { background:rgba(30,80,160,.12); color:var(--brand-primary); }
.tint-success { background:rgba(22,163,74,.12); color:var(--c-success); }
.tint-warning { background:rgba(217,119,6,.14); color:var(--c-warning); }
.tint-danger  { background:rgba(220,38,38,.12); color:var(--c-danger); }
.tint-info    { background:rgba(14,165,233,.12); color:var(--c-info); }

/* ---------------------------------------------------------------------
   5) الأزرار والشارات
   --------------------------------------------------------------------- */
.btn { border-radius:var(--radius-sm); font-weight:600; font-family:inherit; transition:all var(--t-fast); padding:.5rem 1.125rem; }
.btn:active { transform:translateY(1px); }
.btn-brand { background:var(--brand-primary); border-color:var(--brand-primary); color:#fff; }
.btn-brand:hover { background:var(--brand-primary-dark); border-color:var(--brand-primary-dark); color:#fff; box-shadow:0 6px 16px rgba(30,80,160,.3); }
.btn-soft { background:rgba(30,80,160,.1); color:var(--brand-primary); border:none; }
.btn-soft:hover { background:rgba(30,80,160,.18); color:var(--brand-primary-dark); }
.chip { display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:700; padding:4px 11px; border-radius:40px; white-space:nowrap; }
.chip::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.chip-success { background:rgba(22,163,74,.12); color:var(--c-success); }
.chip-warning { background:rgba(217,119,6,.14); color:var(--c-warning); }
.chip-danger  { background:rgba(220,38,38,.12); color:var(--c-danger); }
.chip-info    { background:rgba(14,165,233,.12); color:var(--c-info); }
.chip-muted   { background:#eef1f6; color:var(--c-text-soft); }

/* ---------------------------------------------------------------------
   6) الجداول والفلاتر
   --------------------------------------------------------------------- */
.table-wrap { overflow-x:auto; }
table.table { margin:0; }
.table thead th { background:#f8fafc; color:var(--c-text-soft); font-weight:700; font-size:.8rem; border-bottom:1px solid var(--c-border); white-space:nowrap; padding:.8rem 1rem; }
.table tbody td { padding:.8rem 1rem; vertical-align:middle; border-bottom:1px solid #f1f3f7; }
.table tbody tr { transition:background var(--t-fast); }
.table tbody tr:hover { background:#f8fafc; }
.u-cell { display:flex; align-items:center; gap:10px; }
.u-avatar { width:2.25rem; height:2.25rem; border-radius:50%; object-fit:cover; background:#dbe4f3; color:var(--brand-primary); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; flex-shrink:0; }
.filter-bar { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; margin-bottom:var(--sp-4); }
.filter-bar .form-select, .filter-bar .form-control { max-width:12.5rem; }
.empty-state { text-align:center; padding:var(--sp-7) var(--sp-4); color:var(--c-text-mute); }
.empty-state i { font-size:3rem; opacity:.4; }
.profile-tabs .nav-link { color:var(--c-text-soft); font-weight:600; border:none; padding:.75rem 1.125rem; border-bottom:3px solid transparent; }
.profile-tabs .nav-link.active { color:var(--brand-primary); background:transparent; border-bottom-color:var(--brand-primary); }
.profile-tabs .nav-link:hover { color:var(--brand-primary); }

/* ---------------------------------------------------------------------
   7) رسم بياني CSS خالص (بدون مكتبات)
   --------------------------------------------------------------------- */
.bar-chart { display:flex; align-items:flex-end; gap:var(--sp-4); height:14rem; padding-top:var(--sp-4); }
.bar-chart .bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); height:100%; justify-content:flex-end; }
.bar-chart .bars { display:flex; align-items:flex-end; gap:4px; height:100%; width:100%; justify-content:center; }
.bar-chart .bar { width:34%; border-radius:6px 6px 0 0; transition:height var(--t); animation:barGrow .7s var(--t) both; }
.bar-chart .bar.paid { background:var(--brand-primary); }
.bar-chart .bar.due  { background:#e5e9f0; }
.bar-chart .bar-label { font-size:.75rem; color:var(--c-text-soft); }
@keyframes barGrow { from { height:0 !important; } }
.legend { display:flex; gap:var(--sp-4); font-size:.8rem; color:var(--c-text-soft); }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend .dot { width:12px; height:12px; border-radius:3px; }

/* ---------------------------------------------------------------------
   8) صفحة الدخول
   --------------------------------------------------------------------- */
.auth-wrap { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-side { background:linear-gradient(150deg,var(--brand-primary-dark),var(--brand-primary) 60%,var(--brand-primary-light)); color:#fff; padding:var(--sp-7); display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.auth-side::after { content:''; position:absolute; width:26rem; height:26rem; background:rgba(255,255,255,.06); border-radius:50%; bottom:-8.75rem; inset-inline-start:-7.5rem; }
.auth-side::before { content:''; position:absolute; width:16rem; height:16rem; background:rgba(255,255,255,.05); border-radius:50%; top:-5rem; inset-inline-end:-3.75rem; }
.auth-side .content { position:relative; z-index:2; max-width:28.75rem; }
.auth-side h2 { color:#fff; font-size:2rem; }
.auth-side .feat { display:flex; align-items:center; gap:12px; margin-top:18px; font-size:.98rem; }
.auth-side .feat i { width:2.5rem; height:2.5rem; background:rgba(255,255,255,.15); border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.auth-form { display:flex; align-items:center; justify-content:center; padding:var(--sp-6); background:var(--c-surface); }
.auth-form .box { width:100%; max-width:25rem; }
.auth-logo { width:3.75rem; height:3.75rem; margin-bottom:var(--sp-4); }

/* ---------------------------------------------------------------------
   9) الحركة (Animations) — CSS خالص
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference) {
  .reveal { animation:rise .5s var(--t) both; }
  @keyframes rise { from { opacity:0; transform:translateY(1rem); } to { opacity:1; transform:none; } }
  .reveal-1{animation-delay:.06s}.reveal-2{animation-delay:.12s}.reveal-3{animation-delay:.18s}
  .reveal-4{animation-delay:.24s}.reveal-5{animation-delay:.3s}.reveal-6{animation-delay:.36s}
}
.hover-lift { transition:transform var(--t),box-shadow var(--t); }
.hover-lift:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* ---------------------------------------------------------------------
   10) الاستجابة (Responsive) — Breakpoints 480 / 768 / 992 / 1024
   القائمة على الجوال تُدار عبر Bootstrap Offcanvas (بدون JS مخصص)
   --------------------------------------------------------------------- */
@media (max-width:768px) {
  .auth-wrap { grid-template-columns:1fr; }
  .auth-side { display:none; }
  .page { padding:var(--sp-4); }
  .topbar { padding-inline:var(--sp-4); }
  .topbar__search { display:none; }
  .page-head h1 { font-size:1.25rem; }
  .bar-chart { height:10rem; }
}
@media (max-width:480px) {
  .topbar__user .u-name { display:none; }
  .page-head__actions { width:100%; }
  .page-head__actions .btn { flex:1; }
  .kpi__value { font-size:1.5rem; }
}