@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   مدارس التربية الإسلامية — سمة لوحة البيانات
   ---------------------------------------------------------------------------
   ملف جديد. لا يُعدَّل أي ملف .cs ولا أي إجراء في قاعدة البيانات.
   الألوان مستخرَجة من شعار Futuristic Learning Schools:
       #40286B بنفسجي غامق · #8877E3 بنفسجي فاتح · #F9CC47 أصفر
   ---------------------------------------------------------------------------
   لتبديل الهوية: غيّر الكتلة التالية وحدها.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ─── الهوية — مستخرَجة من شعار Futuristic Learning Schools ───
     #40286B بنفسجي غامق · #8877E3 بنفسجي فاتح · #F9CC47 أصفر           */
  --brand:       #40286B;   /* البنفسجي الغامق — اللون الأساسي */
  --brand-deep:  #2C1B4A;   /* درجة أغمق للترويسة والتدرّجات */
  --brand-mid:   #5B3D92;   /* درجة وسطى */
  --brand-lite:  #8877E3;   /* البنفسجي الفاتح — للتمييز */
  --brand-tint:  #EDE9F7;   /* خلفية خفيفة */
  --brand-wash:  #F7F5FC;   /* أخف درجة — رؤوس الجداول */
  --crest:       #F9CC47;   /* الأصفر — الشعار والخطوط المميّزة */
  --crest-soft:  #FEF6E0;

  /* ─── الحياد ─── */
  --ink:         #1C1630;
  --ink-2:       #514A66;
  --ink-3:       #8A83A0;
  --line:        #E4E1EE;
  --line-soft:   #F0EEF7;
  --paper:       #F6F5FA;
  --card:        #FFFFFF;

  /* ─── إشارات الحالة ─── */
  --sig-present: #2E9E6B;
  --sig-late:    #E0A020;
  --sig-leave:   #5B7BC8;
  --sig-absent:  #C43D4E;

  /* ─── هندسة ─── */
  --r-lg:  16px;
  --r-md:  11px;
  --r-sm:  8px;
  --sh-1:  0 1px 2px rgba(28,22,48,.05);
  --sh-2:  0 1px 2px rgba(28,22,48,.05), 0 10px 28px -16px rgba(28,22,48,.24);

  /* ─── ربط Bootstrap بالهوية ─── */
  --bs-primary:          var(--brand);
  --bs-body-color:       var(--ink);
  --bs-body-bg:          var(--paper);
  --bs-border-color:     var(--line);
  --bs-body-font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --bs-border-radius:    var(--r-md);
}

*,*::before,*::after{box-sizing:border-box}

/* النسخة الإنجليزية (dir=ltr): خط لاتيني ورؤوس أعمدة بحروف كبيرة */
[dir="ltr"] body,
[dir="ltr"] .app-rail label,
[dir="ltr"] .eyebrow h2,
[dir="ltr"] .mode-btn,
[dir="ltr"] .chart-tab{font-family:"IBM Plex Sans", system-ui, sans-serif}
[dir="ltr"] .table-dash thead th{letter-spacing:.6px; text-transform:uppercase}

/* محاذاة الجداول والمحاور في الوضع الإنجليزي */
[dir="ltr"] .table-dash thead th,
[dir="ltr"] .table-dash tbody td,
[dir="ltr"] .table-dash tfoot td,
[dir="ltr"] .cell-n{text-align:left}
[dir="ltr"] .eyebrow::after{
  background:linear-gradient(to right,
    var(--crest) 0%, rgba(249,204,71,.25) 20%, var(--line) 20%, var(--line) 100%);
}
[dir="ltr"] .num{letter-spacing:0}
[dir="ltr"] .login-card,[dir="ltr"] .lg-card{text-align:left}

body{
  background:var(--paper) !important; color:var(--ink);
  font-family:"IBM Plex Sans Arabic","Cairo",system-ui,sans-serif;
  font-size:15px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* الأرقام أحاديّة العرض ومعزولة الاتجاه لتصطفّ داخل النص العربي */
.num{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate; letter-spacing:-.2px;
}
:focus-visible{outline:2px solid var(--crest); outline-offset:2px; border-radius:var(--r-sm)}
::selection{background:var(--brand-tint); color:var(--brand-deep)}


/* ═══ الترويسة ═══════════════════════════════════════════════════════════ */
.app-top{
  background:var(--brand-deep); color:#fff;
  position:relative; border-bottom:2px solid var(--crest);
}
.app-top::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px);
}
.app-top > *{position:relative; z-index:1}
.app-crest{
  width:42px; height:42px; border-radius:11px; flex:none;
  background:linear-gradient(160deg,#FBDC85,var(--crest));
  display:grid; place-items:center; font-weight:700; font-size:16px;
  color:var(--brand-deep); box-shadow:0 4px 14px -6px rgba(249,204,71,.85);
}
/* شعار المدرسة في الترويسة — على خلفية بيضاء لأن الشعار ملوّن */
.app-logo{
  height:44px; width:auto; flex:none; display:block;
  background:#fff; border-radius:10px; padding:5px 9px;
  box-shadow:0 3px 12px -5px rgba(28,22,48,.45);
}
@media (max-width:640px){ .app-logo{height:36px; padding:4px 7px} }

.app-top h1{margin:0; font-size:16.5px; font-weight:600; letter-spacing:-.25px; color:#fff}
.app-top p{margin:0; font-size:12.5px; color:#B9AEE8; font-weight:300}
.lang-switch{
  display:inline-grid; place-items:center; min-width:36px; height:30px;
  padding:0 10px; border-radius:8px; font-size:12px; font-weight:700;
  color:#9CBFB6 !important; text-decoration:none !important;
  border:1px solid rgba(255,255,255,.18); transition:.15s; letter-spacing:.4px;
}
.lang-switch:hover{background:rgba(255,255,255,.1); color:#fff !important; border-color:rgba(255,255,255,.34)}

.app-stamp{font-size:12px; color:#B9AEE8; display:inline-flex; align-items:center; gap:7px}
.live-dot{
  width:7px; height:7px; border-radius:50%; background:#F9CC47; flex:none;
  box-shadow:0 0 0 3px rgba(249,204,71,.3);
}


/* ═══ شريط التحكّم ═══════════════════════════════════════════════════════ */
.app-rail{
  position:sticky; top:0; z-index:1020;
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.app-rail label{
  font-size:11px; font-weight:600; color:var(--ink-3);
  margin-bottom:5px; display:block; letter-spacing:.3px;
}
.app-rail .form-control,
.app-rail .form-select,
.app-rail input.form-control{
  border:1px solid var(--line); border-radius:var(--r-md);
  font-size:13.5px; min-height:40px; padding:8px 12px;
  background-color:#fff; color:var(--ink); transition:.15s; box-shadow:none;
}
.app-rail .form-select{background-position:left .75rem center}
[dir="ltr"] .app-rail .form-select{background-position:right .75rem center}
.app-rail .form-control:hover,.app-rail .form-select:hover{border-color:#CCC6DF}
.app-rail .form-control:focus,.app-rail .form-select:focus{
  border-color:var(--brand-mid); box-shadow:0 0 0 3.5px rgba(91,61,146,.16);
}
.app-rail .form-control[readonly]{background:var(--brand-wash); color:var(--ink-2)}
.rail-hint{font-size:10px; color:var(--crest); font-weight:600; margin-top:4px; display:block}

.btn-brand{
  background:var(--brand); border:1px solid var(--brand); color:#fff !important;
  font-weight:600; font-size:13.5px; border-radius:var(--r-md);
  min-height:40px; padding:9px 22px; text-decoration:none !important;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:.15s; box-shadow:0 1px 2px rgba(44,27,74,.24); width:100%;
}
.btn-brand:hover,.btn-brand:focus{
  background:var(--brand-deep); border-color:var(--brand-deep);
  box-shadow:0 4px 14px -6px rgba(44,27,74,.6);
}


/* ═══ عنوان القسم — «خط السجل» الذهبي ═══════════════════════════════════ */
.eyebrow{display:flex; align-items:center; gap:12px; margin:36px 0 16px}
.eyebrow:first-child{margin-top:0}
.eyebrow h2{margin:0; font-size:15.5px; font-weight:600; letter-spacing:-.25px; white-space:nowrap}
.eyebrow .sub{font-size:12px; color:var(--ink-3); font-weight:300; white-space:nowrap}
.eyebrow::after{
  content:""; flex:1; height:2px; border-radius:2px;
  background:linear-gradient(to left,
    var(--crest) 0%, rgba(249,204,71,.25) 20%, var(--line) 20%, var(--line) 100%);
}


/* ═══ بطاقات المؤشرات ═══════════════════════════════════════════════════ */
.kpi{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-1); height:100%; transition:.18s;
}
.kpi:hover{box-shadow:var(--sh-2); border-color:#D6D0E6}
.kpi-accent{height:3px; background:var(--c,var(--brand))}
.kpi-body{padding:16px 18px 15px}
.kpi-label{
  font-size:12.5px; color:var(--ink-2); font-weight:500;
  margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.kpi-label i{width:9px; height:9px; border-radius:3px; flex:none; background:var(--c,var(--brand))}
.kpi-figure{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.kpi-val{font-size:34px; font-weight:600; line-height:1; letter-spacing:-1.4px}
.kpi-pct{
  font-size:15px; font-weight:600; color:var(--c,var(--brand));
  letter-spacing:-.4px; padding:2px 9px; border-radius:6px; background:var(--brand-tint);
}
.kpi-foot{
  margin-top:12px; padding-top:10px; border-top:1px dashed var(--line);
  font-size:11px; color:var(--ink-3); font-weight:300; line-height:1.5;
}


/* ═══ اللوحات ═══════════════════════════════════════════════════════════ */
.panel-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); overflow:hidden; height:100%;
}
.panel-head{
  padding:15px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  background:linear-gradient(var(--brand-wash), #fff);
}
.panel-head h3{margin:0; font-size:14.5px; font-weight:600; letter-spacing:-.2px}
.panel-head h3::before{
  content:""; display:inline-block; width:3px; height:14px; background:var(--brand);
  border-radius:2px; margin-inline-end:9px; vertical-align:-2px;
}
.panel-head .tot{margin-inline-start:auto; font-size:12px; color:var(--ink-3)}
.panel-head .tot b{
  font-family:"IBM Plex Mono",monospace; color:var(--ink); font-weight:600; font-size:14px;
}
.panel-foot{
  padding:12px 18px; background:var(--brand-wash); border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-3); font-weight:300; line-height:1.6;
}
.panel-foot b{font-family:"IBM Plex Mono",monospace; color:var(--ink-2); font-weight:600}


/* ═══ الجداول ═══════════════════════════════════════════════════════════ */
.table-dash{width:100%; margin:0; border-collapse:collapse; font-size:13.5px}
.table-dash thead th{
  text-align:start; padding:11px 13px; font-size:10.5px; font-weight:700;
  color:var(--ink-3); background:var(--brand-wash);
  border-bottom:1px solid var(--line); white-space:nowrap; letter-spacing:.4px;
}
.table-dash tbody td{
  padding:12px 13px; border-bottom:1px solid var(--line-soft);
  vertical-align:middle; text-align:start;
}
.table-dash tbody tr:last-child td{border-bottom:0}
.table-dash tbody tr{transition:background .12s}
.table-dash tbody tr:hover{background:var(--brand-wash)}
.table-dash tfoot td{
  padding:12px 13px; background:var(--brand-tint); font-weight:600;
  border-top:2px solid var(--brand); text-align:start;
}

.cell-name{font-weight:500; color:var(--ink)}
.cell-n{
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-weight:500; direction:ltr; unicode-bidi:isolate;
}
.cell-pct{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-2);
  font-weight:600; direction:ltr; unicode-bidi:isolate;
}

/* الرقم القابل للنقر */
.drill{
  color:var(--brand-mid); background:none; border:0; padding:2px 6px;
  font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:13.5px;
  border-radius:6px; cursor:pointer; transition:.13s;
  box-shadow:inset 0 -1px 0 rgba(64,40,107,.42);
}
.drill:hover{background:var(--brand-tint); color:var(--brand-deep); box-shadow:none}
.drill-icon{
  color:var(--ink-3); background:none; border:0; padding:4px 6px;
  border-radius:6px; cursor:pointer; transition:.13s; line-height:1;
}
.drill-icon:hover{background:var(--brand-tint); color:var(--brand)}

/* شريط مصغّر داخل الخلية */
.mini{
  display:inline-block; width:42px; height:5px; border-radius:3px;
  background:var(--line-soft); vertical-align:middle; margin-inline-start:8px;
  position:relative; overflow:hidden;
}
.mini i{
  position:absolute; inset-block:0; inset-inline-start:0;
  background:var(--c,var(--brand)); border-radius:3px;
}


/* ═══ الرسوم البيانية ═══════════════════════════════════════════════════ */
.chart-tabs{
  display:flex; gap:4px; padding:12px 16px 0; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  background:linear-gradient(var(--brand-wash), #fff);
}
.chart-tab{
  background:none; border:0; border-bottom:2px solid transparent;
  padding:8px 14px 10px; font-size:13px; font-weight:500; color:var(--ink-3);
  cursor:pointer; transition:.14s; border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.chart-tab:hover{color:var(--ink-2); background:rgba(64,40,107,.06)}
.chart-tab.active{color:var(--brand); border-bottom-color:var(--crest); font-weight:600}
/* مبدّل ما يعرضه الرسم */
.chart-mode{
  margin-inline-start:auto; display:inline-flex; gap:2px; align-self:center;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:3px; margin-bottom:9px;
}
.mode-btn{
  background:none; border:0; border-radius:7px;
  padding:6px 15px; font-size:12.5px; font-weight:500; color:var(--ink-3);
  cursor:pointer; transition:.13s; white-space:nowrap; font-family:inherit;
}
.mode-btn:hover{color:var(--ink-2); background:var(--brand-wash)}
.mode-btn.active{background:var(--brand); color:#fff; font-weight:600}

.chart-box{padding:18px 16px 16px}
.chart-canvas-wrap{position:relative; height:330px}
@media (max-width:640px){.chart-canvas-wrap{height:290px}}
.chart-note{
  font-size:11px; color:var(--ink-3); font-weight:300; line-height:1.6;
  margin:14px 2px 0; padding-top:12px; border-top:1px dashed var(--line);
}
.chart-note b{font-family:"IBM Plex Mono",monospace; color:var(--ink-2); font-weight:600}


/* ═══ الحالة الفارغة ════════════════════════════════════════════════════ */
.empty{padding:42px 22px; text-align:center; color:var(--ink-3)}
.empty i{font-size:26px; color:#C6BFDC; display:block; margin-bottom:10px}
.empty strong{display:block; color:var(--ink-2); font-weight:600; font-size:14px; margin-bottom:5px}
.empty span{font-size:12.5px; font-weight:300}


/* ═══ النوافذ ═══════════════════════════════════════════════════════════ */
.modal-content{border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden}
.modal-header{
  background:linear-gradient(var(--brand-wash), #fff);
  border-bottom:1px solid var(--line); padding:15px 18px;
}
.modal-title{font-size:15px; font-weight:600; letter-spacing:-.2px}
.modal-body{padding:0}
.modal-body .table-dash thead th{position:sticky; top:0; z-index:2}
.modal-body .empty{padding:36px 20px}


/* ═══ منتقي التاريخ (bootstrap-datepicker) ══════════════════════════════ */
.datepicker{font-family:"IBM Plex Sans Arabic",sans-serif; font-size:13px; border-radius:var(--r-md)}
.datepicker table tr td.active,
.datepicker table tr td.active:hover{background:var(--brand) !important; background-image:none !important}
.datepicker table tr td.today{background:var(--crest-soft) !important; color:var(--ink)}


/* ═══ الاستجابة ═════════════════════════════════════════════════════════ */
@media (max-width:991px){
  .eyebrow{margin:28px 0 14px}
  .eyebrow .sub{display:none}
}
@media (max-width:640px){
  body{font-size:14.5px}
  .chart-mode{margin-inline-start:0; width:100%; flex-wrap:wrap; justify-content:stretch}
  .mode-btn{flex:1 1 40%; padding:7px 6px; font-size:11.5px}
  .kpi-val{font-size:28px; letter-spacing:-1px}
  .kpi-body{padding:14px 15px}
  .app-crest{width:38px; height:38px; font-size:15px}
  .table-dash thead th,.table-dash tbody td{padding:10px 10px}
}

@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

@media print{
  .app-rail,.chart-tabs,.drill-icon,.btn-brand{display:none !important}
  body{background:#fff !important}
  .panel-card,.kpi{box-shadow:none; break-inside:avoid}
  .drill{color:var(--ink); box-shadow:none}
}