/* ============================================================
   نظام التصميم - إدارة بيانات الطلاب
   فكرة التصميم: "سجل الحضور الورقي" - ورق دافئ، حبر أخضر داكن
   لتمييز الأقسام، مع لون العلامات الأخضر/الأحمر المستخدم أصلاً
   في تسجيل الحضور والغياب.
   ============================================================ */

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

:root{
  /* ألوان */
  --paper: #FBF8F2;
  --surface: #FFFFFF;
  --surface-2: #F3EFE4;
  --ink: #20302B;
  --ink-soft: #5C6B63;
  --border: #E5DECB;

  --brand: #2F6F5E;
  --brand-dark: #21503F;
  --brand-tint: #E7F0EC;

  --present: #3F8F5F;
  --present-tint: #E7F5EB;
  --absent: #B54A3A;
  --absent-tint: #FBEAE7;

  --warn: #B98900;
  --warn-tint: #FBF3DA;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(32,48,43,.06), 0 6px 20px -8px rgba(32,48,43,.18);
  --shadow-sm: 0 1px 2px rgba(32,48,43,.08);

  --font-display: 'Cairo', 'Tahoma', sans-serif;
  --font-body: 'Almarai', 'Tahoma', sans-serif;
}

*{ box-sizing: border-box; }

/* ---------- الوضع الليلي ---------- */
html[data-theme="dark"]{
  --paper: #171C1A;
  --surface: #1F2623;
  --surface-2: #29322D;
  --ink: #E9EFEA;
  --ink-soft: #9FB2A8;
  --border: #38443C;

  --brand: #4FA588;
  --brand-dark: #1C3A30;
  --brand-tint: #1E332C;

  --present: #4FAE6E;
  --present-tint: #1E3324;
  --absent: #E28A76;
  --absent-tint: #3B241F;

  --warn: #E3C15C;
  --warn-tint: #3A3117;

  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px -8px rgba(0,0,0,.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
}
html[data-theme="dark"] img{ filter: brightness(.92); }
/* في كل هذه المواضع يُستخدم brand-dark كلون نص على خلفية فاتحة بالوضع
   العادي؛ بالوضع الليلي نحتاج لوناً فاتحاً بدل الغامق ليبقى مقروءاً على
   خلفية داكنة، لذلك نستخدم brand (الأفتح) بدلاً منه بهذه المواضع تحديداً
   دون المساس بباقي استخدامات brand-dark كخلفية (شريط علوي، أزرار...) */
html[data-theme="dark"] a,
html[data-theme="dark"] .drawer-body a.active,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] table.data td.section-title,
html[data-theme="dark"] .gift-box h2,
html[data-theme="dark"] .stat-card .stat-num,
html[data-theme="dark"] .bar-chart .bar-count,
html[data-theme="dark"] .link-card .link-icon{
  color: var(--brand);
}
/* تظليل الصفوف الزوجية وألوان نص التنبيهات كانت قيماً ثابتة (مو
   متغيرات)، فنعدّلها هنا خصيصاً للوضع الليلي */
html[data-theme="dark"] table.data tbody tr:nth-child(even){ background: var(--surface-2); }
html[data-theme="dark"] .error, html[data-theme="dark"] .alert{ color: var(--absent); }
html[data-theme="dark"] .alert.success{ color: var(--present); }
html[data-theme="dark"] .alert.notice{ color: var(--warn); }

html, body{
  direction: rtl;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4, .brand-font{
  font-family: var(--font-display);
}

a{ color: var(--brand-dark); }

::selection{ background: var(--brand); color: #fff; }

:focus-visible{
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- شريط علوي ---------- */
.app-bar{
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  height: 60px;
  background: var(--brand-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  box-shadow: var(--shadow);
}
.bar-start{
  display: flex;
  align-items: center;
  gap: 10px;
}
.bar-end{
  display: flex;
  align-items: center;
  gap: 6px;
}
.menu-wrap{ position: relative; }
.menu-btn{
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.menu-btn:hover{ background: rgba(255,255,255,.26); }

/* شارة عدد الإشعارات غير المقروءة */
.notify-badge{
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--absent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid var(--brand-dark);
}

/* تبويبات صفحة إدارة النظام */
.tab-btn{
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tab-btn.active{
  background: var(--brand-dark);
  color: #fff;
  border-color: var(--brand-dark);
}
.tab-btn:hover:not(.active){ background: var(--surface-2); }

/* خلايا نسبة تعبئة العبء الأكاديمي (Heatmap) */
.fillrate-cell{ text-align: center; }
.fillrate-na{ background: var(--surface-2); }
.fillrate-low{ background: rgba(220,60,60,.18); }
.fillrate-mid{ background: rgba(230,170,30,.20); }
.fillrate-good{ background: rgba(60,170,90,.18); }
.fillrate-over{ background: rgba(150,80,220,.20); }
.fillrate-clickable{ cursor: pointer; transition: filter .15s ease; }
.fillrate-clickable:hover{ filter: brightness(0.92); }

/* جدول لوائح دوام الموظفين */
.att-week-tabs{ display: none; gap: 6px; overflow-x: auto; margin-bottom: 12px; }
.att-name-cell{ text-align: start !important; white-space: nowrap; font-weight: 700; }
.att-row-copy-btn, .att-row-remove-btn{
  border: none; background: none; cursor: pointer; font-size: 13px;
  padding: 2px 4px; margin-inline-start: 4px; opacity: .7;
}
.att-row-copy-btn:hover, .att-row-remove-btn:hover{ opacity: 1; }
.att-cell{ min-width: 34px; text-align: center; font-weight: 800; border-inline-start: 1px solid var(--border); }
#attendanceGrid thead td{ border-inline-start: 1px solid rgba(255,255,255,.25); }
#attendanceGrid .att-name-cell{ border-inline-start: none; }

/* تجميد الرأس والعمود الأول أثناء التمرير — كل قواعد الالتصاق مجمَّعة
   هنا صراحة (بدل مبعثرة) لتفادي أي تعارض غير مقصود بترتيب الملف */
#attendanceGrid thead tr:nth-child(1) td{
  position: sticky !important;
  top: 0 !important;
  z-index: 3;
}
#attendanceGrid thead tr:nth-child(2) td{
  position: sticky !important;
  top: 34px !important;
  z-index: 3;
}
#attendanceGrid .att-name-cell{
  position: sticky !important;
  inset-inline-start: 0 !important;
  z-index: 4;
  background: var(--surface);
}
#attendanceGrid tbody tr:nth-child(even) .att-name-cell{ background: #FAF7EF; }
#attendanceGrid thead tr td:first-child{
  position: sticky !important;
  inset-inline-start: 0 !important;
  z-index: 5;
}
.att-friday-col{ background: rgba(230,170,30,.14) !important; }
#attendanceGrid thead .att-friday-col{ background: #8a6a1f !important; }

/* صف عناوين الأسابيع (سطح المكتب فقط) — يستقر فوق صف أسماء الأيام */
#attWeekHeaderRow td{ font-size: 12px; padding: 6px 4px !important; }
.att-week-header-cell{ cursor: default; }
.att-week-header-cell.att-week-full{ cursor: pointer; }
@media (max-width: 640px){
  #attWeekHeaderRow{ display: none; }
  #attendanceGrid thead tr:nth-child(2) td{ top: 0 !important; }
}
.att-cell-editable{ cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none; }
#attendanceGrid.att-drag-off .att-cell-editable{ touch-action: pan-x pan-y; }
.table-wrap.att-table-wrap{ max-height: 75vh; overflow-y: auto !important; overflow-x: auto !important; }
/* border-collapse:collapse (من القاعدة العامة table.data) معروف بأنه
   يكسر position:sticky على خلايا الجدول بمتصفحات متعددة — نستثني هذا
   الجدول تحديداً */
#attendanceGrid{ border-collapse: separate !important; border-spacing: 0 !important; }
.att-total-cell{ font-weight: 700; font-size: 12px; white-space: nowrap; background: var(--surface-2); }
.att-reorder-arrows button{ border:none; background:var(--surface-2); border-radius:4px; cursor:pointer; font-size:11px; padding:2px 5px; margin-inline-end:3px; }
.reorder-list-item{ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.att-name-longpress{ cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.att-cell-editable:hover{ background: var(--brand-tint); }
@media (max-width: 640px){
  .att-week-tabs{ display: flex; }
  .att-week-hidden-mobile{ display: none !important; }
  .att-table-wrap{ margin-inline: -20px; width: calc(100% + 40px); border-radius: 0; border-inline: none; }
  #attendanceGrid{ min-width: 0 !important; }
  #attendanceGrid .att-cell{ min-width: 40px; width: 40px; padding: 10px 4px; font-size: 14px; }
  #attendanceGrid .att-name-cell{ max-width: 130px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  #attendanceGrid .att-total-cell{ min-width: 38px; width: 38px; padding: 10px 4px; font-size: 12.5px; }
  #attendanceGrid thead td{ min-width: 40px; width: 40px; padding: 10px 4px; font-size: 12px; white-space: normal; }
  #attendanceGrid thead td:first-child{ max-width: 130px; min-width: 110px; width: auto; }
  #attendanceGrid thead td:last-child{ min-width: 38px; width: 38px; }
}

/* صف تبديل الوضع الليلي بأسفل القائمة الجانبية */
.theme-toggle-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 700;
  font-size: 14.5px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.theme-toggle-switch{
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  flex-shrink: 0;
  transition: background .2s ease;
}
.theme-toggle-switch .theme-toggle-knob{
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: inset-inline-start .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.theme-toggle-switch.on{ background: var(--brand); }
.theme-toggle-switch.on .theme-toggle-knob{ inset-inline-start: 21px; }

/* توقيع "mallouh" بأسفل صفحة الدخول — توهّج نابض خفيف ومستمر */
.signature-mallouh{
  animation: signatureGlow 3s ease-in-out infinite;
}
@keyframes signatureGlow{
  0%, 100% { opacity: .65; text-shadow: 0 0 0 transparent; }
  50% { opacity: 1; text-shadow: 0 0 10px var(--brand); }
}

/* بطاقة تذكير تثبيت الموقع كتطبيق (PWA) */
.pwa-install-banner{
  position: fixed;
  bottom: 16px;
  inset-inline: 16px;
  max-width: 480px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 250;
  transform: translateY(120%);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.pwa-install-banner.open{
  transform: translateY(0);
  opacity: 1;
}
.pwa-install-icon{ font-size: 28px; flex-shrink: 0; }
.pwa-install-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.pwa-install-text b{ font-size: 14px; color: var(--ink); }
.pwa-install-text span{ font-size: 12px; color: var(--ink-soft); }
.pwa-install-close{
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
@media (max-width: 480px){
  .pwa-install-banner{ flex-wrap: wrap; }
  .pwa-install-text{ order: 1; }
}

/* ---------- القائمة الجانبية المنزلقة (Drawer) ---------- */
.drawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(20,26,23,.45);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.drawer-overlay.open{
  opacity: 1;
  pointer-events: auto;
}
.drawer{
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 85vw;
  max-width: 360px;
  background: var(--surface);
  z-index: 80;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 24px rgba(0,0,0,.18);
  transform: translateX(-100%);
  transition: transform .26s ease;
}
[dir="rtl"] .drawer{ transform: translateX(100%); }
.drawer.open{ transform: translateX(0); }

@media (min-width: 720px){
  .drawer{ width: 380px; max-width: 380px; }
}

.drawer-head{
  background: var(--brand-dark);
  color: #fff;
  padding: 24px 20px 20px;
  flex: 0 0 auto;
  position: relative;
}
.drawer-head .drawer-close{
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-head .drawer-close:hover{ background: rgba(255,255,255,.26); }
.drawer-head .avatar{
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--present);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 12px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
.drawer-head .school-name{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  margin: 0 0 3px;
}
.drawer-head .user-name{
  font-size: 13px;
  opacity: .8;
  margin: 0;
}

.drawer-body{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drawer-body a{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 14px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  transition: background .15s ease;
}
.drawer-body a .icon{ font-size: 20px; width: 26px; text-align: center; }
.drawer-body a:hover{ background: var(--surface-2); }
.drawer-body a.active{ background: var(--brand-tint); color: var(--brand-dark); }
.nav-disabled{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 14px;
  border-radius: 12px;
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 700;
  opacity: .55;
  cursor: not-allowed;
}
.nav-disabled .icon{ font-size: 20px; width: 26px; text-align: center; }

.drawer-foot{
  flex: 0 0 auto;
  padding: 14px;
  border-top: 1px solid var(--border);
}
.drawer-foot a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border-radius: 12px;
  background: var(--absent-tint);
  color: var(--absent);
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
}
.drawer-foot a:hover{ background: var(--absent); color: #fff; }


.app-bar .brand{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
}
.app-bar .brand .mark{
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--present);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
.app-bar nav{
  display: flex;
  align-items: center;
  gap: 6px;
}
.app-bar .who{
  font-size: 13px;
  opacity: .85;
  padding-inline-start: 10px;
  margin-inline-start: 4px;
  border-inline-start: 1px solid rgba(255,255,255,.25);
  white-space: nowrap;
}
.app-bar a.nav-link{
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background .15s ease;
  white-space: nowrap;
}
.app-bar a.nav-link:hover{ background: rgba(255,255,255,.14); }
.app-bar a.nav-link.exit{ background: rgba(181,74,58,.85); }
.app-bar a.nav-link.exit:hover{ background: var(--absent); }

.app-shell{
  max-width: 1180px;
  margin: 0 auto;
  padding: 84px 20px 40px;
}

/* ---------- بطاقات ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.card-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}

/* ---------- شريط التحكم (اختيار الصف/الشعبة/الإجراء) ---------- */
.control-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.control-bar .field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  flex: 1 1 220px;
}
.control-bar label{
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 700;
}

/* ---------- عناصر النموذج ---------- */
select, input[type=text], input[type=date], input[type=month],
input[type=number], input[type=password]{
  width: 100%;
  height: 42px;
  padding: 0 12px;
  font-size: 15px;
  font-family: var(--font-body);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
select:focus, input:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
  outline: none;
}
select{ cursor: pointer; }

/* textarea لم تكن مشمولة أبداً بتنسيق الحقول العام، فكانت تبقى بيضاء
   دائماً بألوان المتصفح الافتراضية (يظهر هذا بوضوح بالوضع الليلي) */
textarea{
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
  outline: none;
}
textarea:disabled{
  background: var(--surface-2);
  color: var(--ink-soft);
  border-style: dashed;
  cursor: not-allowed;
}

/* توسيط الأرقام دائماً */
input[type=number]{ text-align: center; -webkit-touch-callout: none; }

/* إخفاء أسهم الزيادة/النقصان بحقول الأرقام */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
input[type=number]{ -moz-appearance: textfield; }

/* تمييز واضح بين الحقول المحسوبة تلقائياً (غير قابلة للتعديل) والحقول
   المطلوب تعبئتها يدوياً */
input:disabled, select:disabled{
  background: var(--surface-2);
  color: var(--ink-soft);
  border-style: dashed;
  cursor: not-allowed;
}

/* حقول أرقام التقرير اليومي (الحضور، البسكويت...) */
input[type=number].dr-num-input{ width: 68px; }

/* مربع تحديد الحضور اليومي (checkbox) */
.dr-checkbox{ width: 22px; height: 22px; cursor: pointer; }

/* جدول مضغوط (مثل جدول الحضور بالتقرير اليومي وجدول الحضور والغياب) —
   على الجوال نقرّب الأعمدة من بعضها أكثر (حشو أقل)، ونلغي الحد الأدنى
   العام لعرض الجدول (min-width:640px) الذي كان يفرض عرضاً أكبر من
   الشاشة، ونجعل عرض الجدول ديناميكياً بالكامل (100% من عرض الشاشة) */
@media (max-width: 480px){
  table.compact-table{ min-width: 0; width: 100%; }
  table.compact-table td{ padding: 6px 3px; font-size: 13px; white-space: normal; }
  table.compact-table .dr-checkbox{ width: 20px; height: 20px; }
}

/* ---------- أزرار ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  border: none;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14.5px;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--brand); color: #fff; }
.btn-primary:hover{ background: var(--brand-dark); }
.btn-danger{ background: var(--absent); color: #fff; }
.btn-danger:hover{ background: #953b2e; }
.btn-ghost{ background: var(--surface-2); color: var(--ink); }
.btn-ghost:hover{ background: var(--border); }
.btn-sm{ height: 34px; padding: 0 14px; font-size: 13px; }
.btn[disabled]{ opacity: .55; cursor: not-allowed; }

/* ---------- جداول البيانات ---------- */
.table-wrap{
  overflow: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
table.data{
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
  background: var(--surface);
  font-size: 14.5px;
}
table.data thead th, table.data thead td{
  position: sticky;
  top: 0;
  background: var(--brand-dark);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  padding: 12px 10px;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
}
table.data tbody td{
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data tbody tr:nth-child(even){ background: #FAF7EF; }
table.data tbody tr:hover{ background: var(--brand-tint); }
table.data td.section-title{
  background: var(--surface-2);
  color: var(--brand-dark);
  font-family: var(--font-display);
  font-weight: 800;
  text-align: start;
  padding-inline-start: 14px;
}

/* تصغير حجم الخط والحشو على شاشات الجوال الضيقة فقط (بدون كسر الكلمات
   أو إجبار التفاف النص — عرض كل عمود يبقى بحجم أطول محتوى فيه تلقائياً،
   ولو الجدول كله أعرض من الشاشة، يظهر تمرير أفقي بدل ضغط الكلمات) */
@media (max-width: 640px){
  table.data{ min-width: 0; font-size: 13.5px; }
  table.data thead th, table.data thead td{ padding: 8px 6px; font-size: 12.5px; }
  table.data tbody td{ padding: 7px 6px; }
}

/* عمود اسم الطالب ثابت عند التمرير الأفقي */
table.data .sticky-col{
  position: sticky;
  inset-inline-end: 0;
  background: inherit;
}

/* ---------- شارة الحضور/الغياب (العنصر المميز) ---------- */
.stamp-toggle{
  --size: 42px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 2.5px solid var(--border);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  color: transparent;
  user-select: none;
  transition: transform .12s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.stamp-toggle:hover{ border-color: var(--brand); }
.stamp-toggle.is-present{
  background: var(--present-tint);
  border-color: var(--present);
  color: var(--present);
}
.stamp-toggle.is-absent{
  background: var(--absent-tint);
  border-color: var(--absent);
  color: var(--absent);
}
.stamp-toggle.stamped{
  animation: stamp-in .18s ease;
}
@keyframes stamp-in{
  0%{ transform: scale(1.35); }
  100%{ transform: scale(1); }
}
tr.row-present{ background: var(--present-tint) !important; }
tr.row-absent{ background: var(--absent-tint) !important; }

/* ---------- تنبيهات / رسائل ---------- */
.error, .alert{
  background: var(--absent-tint);
  color: #7C2E21;
  border: 1px solid var(--absent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 14px;
}
.alert.success{
  background: var(--present-tint);
  color: #1F5B39;
  border-color: var(--present);
}
.alert.notice{
  background: var(--warn-tint);
  color: #6B5100;
  border-color: var(--warn);
}

/* ---------- صندوق تأكيد مخصّص (بديل عن confirm() الافتراضي) ---------- */
.confirm-overlay{
  position: fixed;
  inset: 0;
  background: rgba(20,26,23,.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.confirm-overlay.open{
  opacity: 1;
  pointer-events: auto;
}

/* ---------- قائمة التواصل (اتصال/رسالة/واتساب) ---------- */
.contact-sheet-overlay{
  position: fixed;
  inset: 0;
  background: rgba(20,26,23,.5);
  z-index: 220;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.contact-sheet-overlay.open{ opacity: 1; pointer-events: auto; }
.contact-sheet{
  background: var(--surface);
  width: 100%;
  max-width: 420px;
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow);
  padding: 10px 10px 22px;
  transform: translateY(100%);
  transition: transform .22s ease;
}
.contact-sheet-overlay.open .contact-sheet{ transform: translateY(0); }
.contact-sheet-title{
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 10px 10px;
  color: var(--ink);
}
.contact-sheet a{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}
.contact-sheet a:hover, .contact-sheet a:active{ background: var(--surface-2); }
.contact-sheet a .icon{ font-size: 20px; width: 26px; text-align: center; }
.contact-sheet-cancel{
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: none;
  background: var(--surface-2);
  border-radius: 10px;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--ink-soft);
  cursor: pointer;
}
.confirm-box{
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 380px;
  width: 100%;
  padding: 22px 22px 18px;
  text-align: center;
  transform: translateY(10px);
  transition: transform .18s ease;
}
.confirm-overlay.open .confirm-box{ transform: translateY(0); }
.confirm-box .confirm-icon{
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--absent-tint);
  color: var(--absent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 14px;
}
.confirm-box .confirm-message{
  font-size: 15px;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 20px;
  white-space: pre-line;
}
.confirm-box .confirm-actions{
  display: flex;
  gap: 10px;
}
.confirm-box .confirm-actions .btn{ flex: 1; }
@media (max-width: 480px){
  .confirm-box .confirm-actions{ gap: 6px; }
}

/* ---------- رسالة ترحيب خاصة (هدية) ---------- */
.gift-overlay{
  position: fixed;
  inset: 0;
  background: rgba(20,26,23,.55);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.gift-overlay.open{
  opacity: 1;
  pointer-events: auto;
}
.gift-box{
  position: relative;
  background: linear-gradient(160deg, var(--surface) 60%, var(--brand-tint) 140%);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 20px 60px -12px rgba(32,48,43,.4);
  max-width: 420px;
  width: 100%;
  padding: 34px 28px 26px;
  text-align: center;
  transform: translateY(14px) scale(.97);
  transition: transform .25s ease;
  overflow: hidden;
}
.gift-overlay.open .gift-box{ transform: translateY(0) scale(1); }
.gift-box::before{
  content: "";
  position: absolute;
  top: -60px;
  inset-inline-end: -60px;
  width: 160px;
  height: 160px;
  background: var(--brand-tint);
  border-radius: 50%;
  opacity: .6;
  z-index: 0;
}
.gift-box .gift-icon{
  font-size: 46px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  animation: gift-bounce 1.6s ease-in-out infinite;
}
@keyframes gift-bounce{
  0%, 100%{ transform: translateY(0) rotate(-2deg); }
  50%{ transform: translateY(-6px) rotate(2deg); }
}
.gift-box h2{
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--brand-dark);
  margin: 0 0 12px;
  position: relative;
  z-index: 1;
}
.gift-box p{
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink);
  margin: 0 0 22px;
  position: relative;
  z-index: 1;
}
.gift-box .gift-close-btn{
  position: relative;
  z-index: 1;
}
.gift-box .gift-signature{
  margin-top: 16px;
  font-size: 12px;
  color: var(--ink-soft);
  position: relative;
  z-index: 1;
}
.confetti-piece{
  position: fixed;
  top: -20px;
  width: 8px;
  height: 14px;
  opacity: .9;
  z-index: 310;
  pointer-events: none;
  animation-name: confetti-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes confetti-fall{
  0%{ transform: translateY(0) rotate(0deg); opacity: 1; }
  100%{ transform: translateY(105vh) rotate(540deg); opacity: .85; }
}

/* ---------- تنبيهات عائمة (Toast) ---------- */
#toast-stack{
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 380px);
  align-items: stretch;
}
@media (max-width: 640px){
  #toast-stack{ top: 64px; }
}
.toast{
  background: var(--ink);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: 14px;
  text-align: center;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{ opacity: 1; transform: translateY(0); }
.toast.toast-success{ background: var(--present); }
.toast.toast-error{ background: var(--absent); }
.toast.toast-notice{ background: #6B5100; }

/* ---------- شبكة صفحة الدخول ---------- */
.auth-shell{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at 20% 15%, var(--brand-tint), transparent 55%),
    var(--paper);
}
.auth-card{
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.auth-head{
  background: var(--brand-dark);
  color: #fff;
  padding: 26px 24px 22px;
  text-align: center;
}
.auth-head .mark{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--present);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 10px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
.auth-head h1{
  font-size: 19px;
  margin: 0 0 4px;
}
.auth-head p{
  margin: 0;
  font-size: 13px;
  opacity: .8;
}
.auth-body{ padding: 22px 24px 26px; }
.input-group{ margin-bottom: 14px; }
.input-group label{
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

/* ---------- تذييل مساعد ---------- */
.hint{ font-size: 12.5px; color: var(--ink-soft); }
.badge{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--ink-soft);
}

/* ---------- استجابة الجوال ---------- */
@media (max-width: 640px){
  .app-shell{ padding: 78px 12px 30px; }
  .app-bar{ padding: 0 10px; height: 54px; }
  .app-bar .brand{ font-size: 15px; }
  .app-bar .who{ display: none; }
  .app-bar a.nav-link{ padding: 7px 10px; font-size: 13px; }
  .control-bar .field{ min-width: 100%; }
  .card{ padding: 14px; }
}

/* ---------- بطاقات إحصائية (صفحة الرئيسية) ---------- */
.stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.stat-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  text-align: center;
}
.stat-card .stat-num{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  color: var(--brand-dark);
  line-height: 1.1;
}
.stat-card .stat-label{
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 6px;
  font-weight: 700;
}
.stat-card.accent-present .stat-num{ color: var(--present); }
.stat-card.accent-absent .stat-num{ color: var(--absent); }

/* رسم بياني بسيط بالأعمدة */
.bar-chart{
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 220px;
  padding: 10px 6px 0;
  overflow-x: auto;
}
.bar-chart .bar-col{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 54px;
  height: 100%;
  flex: 1 1 0;
}
.bar-chart .bar-count{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  color: var(--brand-dark);
  margin-bottom: 6px;
}
.bar-chart .bar{
  width: 100%;
  max-width: 46px;
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
  border-radius: 8px 8px 3px 3px;
  min-height: 4px;
  transition: height .4s ease;
}
.bar-chart .bar-label{
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 8px;
  text-align: center;
  font-weight: 700;
}
.bar-chart .bar-sublabel{
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  opacity: .8;
}
.bar-chart .bar-group{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 90px;
  height: 100%;
  flex: 1 1 0;
}
.bar-chart .bar-group-bars{
  display: flex;
  align-items: flex-end;
  gap: 6px;
  width: 100%;
  height: 100%;
  justify-content: center;
}
.bar-chart .bar-subcol{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 34px;
  height: 100%;
}
.bar-chart .bar-subcol .bar{
  max-width: 30px;
}
.bar-chart .bar-subcol .bar.female-bar{
  background: linear-gradient(180deg, #E6AA1E, #B9840F);
}

/* ---------- قائمة عمودية أنيقة (صفحة بيانات الطالب) ---------- */
.info-list{
  display: flex;
  flex-direction: column;
}
.info-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}
.info-row:last-child{ border-bottom: none; }
.info-row .info-main{ display: flex; flex-direction: column; gap: 4px; }
.info-row .info-label{
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 700;
}
.info-row .info-value{
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.info-row .info-actions{ display: flex; align-items: center; gap: 8px; }

/* باج حالة (أونروا/إعاقة) */
.pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}
.pill-yes{ background: var(--absent-tint); color: var(--absent); }
.pill-no{ background: var(--present-tint); color: var(--present); }

/* ---------- بطاقات روابط (صفحة التقارير) ---------- */
.link-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.link-card{
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease;
}
.link-card:hover{
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.link-card .link-icon{
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex: 0 0 auto;
}
.link-card .link-text{ display: flex; flex-direction: column; gap: 3px; }
.link-card .link-title{ font-weight: 800; font-size: 15px; }
.link-card .link-desc{ font-size: 12.5px; color: var(--ink-soft); }

/* إخفاء عناصر w3.css القديمة إن بقيت مرجعية في صفحات لم تُحدَّث بعد */
.w3-table{ width: 100%; border-collapse: collapse; }

/* حقل البحث مع زر مسح داخلي */
.search-field{ position: relative; }
.search-field input{ padding-inline-end: 40px; }
.search-field .clear-btn{
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
}