/* ============================================================
   نظام الإدارة المدرسية الذكي — رواد الإبداع (قسم البنين)
   التنسيقات العامة وإصلاح تداخل شاشة تسجيل الدخول
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

:root {
  --primary-50: #edfafd;
  --primary-100: #d8f4fb;
  --primary-200: #bfeaf6;
  --primary-500: #2aa4c8;
  --primary-600: #1c8db0;
  --primary-700: #176f92;
  --primary-800: #145776;
  --primary-900: #0d3d4e;

  --teal-50: #f0fdf4;
  --teal-100: #dffaf8;
  --teal-600: #0c9a97;
  --teal-700: #0a7b7e;
  --teal-800: #115e59;

  --slate-50: #f7fafc;
  --slate-100: #edf3f7;
  --slate-200: #dfe7ee;
  --slate-300: #c8d5e2;
  --slate-600: #53667a;
  --slate-800: #1b2b3a;
  --slate-900: #111827;

  --rose-600: #e11d48;
  --amber-500: #f59e0b;
  --emerald-600: #059669;
  --shadow-soft: 0 14px 35px rgba(17, 24, 39, 0.08);
  --shadow-strong: 0 22px 45px rgba(13, 61, 78, 0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Tajawal', sans-serif; }
html { overflow-x: hidden; }
body {
  background:
    radial-gradient(circle at top right, rgba(42, 164, 200, 0.15), transparent 28%),
    radial-gradient(circle at bottom left, rgba(12, 154, 151, 0.09), transparent 24%),
    linear-gradient(180deg, #f3f9fb 0%, #edf5f7 100%);
  color: var(--slate-900);
  direction: rtl;
  height: 100vh;
  overflow: hidden;
  overflow-x: clip;
}

/* التحكم التام بإخفاء العناصر التي تحمل كلاس hidden */
.hidden { display: none !important; }

/* شاشة تسجيل الدخول السينمائية */
#login-screen {
  position: fixed; inset: 0;
  background:
    linear-gradient(135deg, rgba(10, 40, 58, 0.9), rgba(17, 24, 39, 0.88)),
    radial-gradient(circle at top right, rgba(42, 164, 200, 0.35), transparent 28%),
    radial-gradient(circle at bottom left, rgba(12, 154, 151, 0.28), transparent 25%);
  display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 20px;
  /* شاشة الدخول محصورة بارتفاع الشاشة وتُمرَّر رأسيًا إذا تجاوز المحتوى الارتفاع
     (كانت overflow:hidden مع body overflow:hidden تُقتطع أسفل البطاقة على الجوال:
      الحقول وزر «دخول» يصبحان خارج الشاشة بلا إمكانية التمرير) */
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#login-screen.hidden { display: none !important; }

.login-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.login-orbs .orb { position: absolute; border-radius: 50%; filter: blur(6px); opacity: .55; animation: orbDrift ease-in-out infinite; }
.orb-1 { width: 220px; height: 220px; top: -60px; right: -40px; background: radial-gradient(circle, rgba(42,164,200,.55), transparent 70%); animation-duration: 14s; }
.orb-2 { width: 160px; height: 160px; bottom: -30px; left: 5%; background: radial-gradient(circle, rgba(12,154,151,.5), transparent 70%); animation-duration: 18s; animation-delay: 1.2s; }
.orb-3 { width: 120px; height: 120px; top: 30%; left: -40px; background: radial-gradient(circle, rgba(245,158,11,.35), transparent 70%); animation-duration: 16s; animation-delay: .6s; }
.orb-4 { width: 90px; height: 90px; bottom: 18%; right: 8%; background: radial-gradient(circle, rgba(167,139,250,.4), transparent 70%); animation-duration: 12s; animation-delay: 2s; }
@keyframes orbDrift { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(18px,-22px) scale(1.08); } 66% { transform: translate(-14px,14px) scale(.95); } }

.login-grid-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%); }
/* margin:auto بدل الاعتماد على align-items:center: عند تجاوز المحتوى تصبح الهوامش 0
   فتبدأ البطاقة من الأعلى فلا يُقتطع رأسها وهي قابلة للتمرير كاملة */
.login-card { z-index: 1; margin: auto; }

.login-title-cinematic { background: linear-gradient(100deg, var(--slate-900) 30%, var(--primary-600) 45%, var(--teal-600) 52%, var(--slate-900) 65%); background-size: 260% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: titleShine 5s linear infinite; }
@keyframes titleShine { to { background-position: -260% center; } }

.login-card {
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(6px);
  width: 100%; max-width: 540px; padding: 36px; border-radius: 28px;
  box-shadow: var(--shadow-strong); text-align: center; border: 1px solid rgba(255,255,255,0.35);
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(42, 164, 200, 0.06), rgba(12, 154, 151, 0.04));
  pointer-events: none;
}
.login-card > * { position: relative; z-index: 1; }
.school-logo-img { height: 52px; width: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 10px 20px rgba(17, 24, 39, 0.08); }
.role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 20px 0; max-height: 260px; overflow-y: auto; padding: 4px; }
.role-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4fafc 100%);
  border: 2px solid var(--slate-200); border-radius: 16px; padding: 12px;
  cursor: pointer; text-align: right; transition: all .25s ease; display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.04);
}
.role-card:hover { border-color: var(--primary-600); transform: translateY(-2px); box-shadow: 0 12px 22px rgba(28, 141, 176, 0.12); }
.role-card.sel {
  background: linear-gradient(135deg, #eaf9ff 0%, #ecfffb 100%);
  border-color: var(--primary-600); box-shadow: 0 0 0 3px rgba(28, 141, 176, 0.16), 0 12px 22px rgba(28, 141, 176, 0.12);
}
.rc-ico { font-size: 20px; } .rc-name { font-weight: 800; font-size: 13px; color: var(--slate-900); }
.rc-desc { font-size: 10.5px; color: var(--slate-600); line-height: 1.3; }

/* ===== حقول اسم المستخدم وكلمة المرور في شاشة الدخول ===== */
.login-fields { display: flex; flex-direction: column; gap: 12px; text-align: right; margin-bottom: 6px; }
.login-fields .field span { font-size: 11.5px; }
.login-pass-wrap { position: relative; display: flex; align-items: center; }
.login-pass-wrap input { padding-left: 40px; }
.login-pass-toggle {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1;
  padding: 6px; border-radius: 8px; opacity: .7;
}
.login-pass-toggle:hover { opacity: 1; background: rgba(15, 118, 110, 0.08); }

.login-error {
  background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.25); color: #b91c1c;
  font-size: 11.5px; font-weight: 800; padding: 9px 12px; border-radius: 10px; margin: 10px 0 0;
  animation: loginShake .4s ease;
}
.login-error.hidden { display: none; }
@keyframes loginShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }

.login-forgot-link {
  display: block; margin: 12px auto 0; background: none; border: none; cursor: pointer;
  font-size: 11.5px; font-weight: 800; color: var(--teal-700); text-decoration: underline; text-underline-offset: 3px;
}
.login-forgot-link:hover { color: var(--primary-700); }
#login-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(110, 231, 160, .42) !important;
  border-radius: 999px !important;
  color: #f0fdf4 !important;
  background: linear-gradient(115deg, #1e293b 0%, #1f5c55 48%, #3a9b8e 100%) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .22), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
#login-btn:hover,
#login-btn:focus-visible {
  color: #fff !important;
  border-color: rgba(134, 239, 172, .9) !important;
  background: linear-gradient(115deg, #1f5c55 0%, #248048 48%, #4ab889 100%) !important;
  box-shadow: 0 10px 24px rgba(20, 83, 45, .3), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  filter: brightness(1.08);
  transform: translateY(-1px);
}
#login-btn:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 3px;
}

/* ===== نافذة إعادة تعيين كلمة المرور ===== */
.cp-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cp-modal.hidden { display: none !important; }
.cp-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); }
.cp-card {
  position: relative; z-index: 1; background: #fff; width: 100%; max-width: 380px; border-radius: 20px;
  padding: 26px; box-shadow: var(--shadow-strong); text-align: right; display: flex; flex-direction: column; gap: 12px;
  animation: modalPop .25s ease;
}
.cp-card h3 { font-size: 15px; font-weight: 900; margin: 0; }
.cp-card p { font-size: 11.5px; color: var(--slate-600); margin: 0 0 4px; }
.cp-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }

/* ===== مؤثرات حركية سينمائية ===== */
@keyframes pageEnter { from { opacity: 0; transform: translateY(22px) scale(.985) translateZ(0); filter: blur(6px); } 55% { filter: blur(0); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes cardRise { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes rowFadeIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes chipPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(28,141,176,0); } 50% { box-shadow: 0 0 0 7px rgba(28,141,176,.10); } }
@keyframes iconFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-3deg); } }
@keyframes shimmerSweep { 0% { background-position: -180% 0; } 100% { background-position: 180% 0; } }
@keyframes bgAurora { 0% { background-position: 0% 0%, 100% 100%, 0 0; } 50% { background-position: 8% 6%, 92% 94%, 0 0; } 100% { background-position: 0% 0%, 100% 100%, 0 0; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastCinematic { 0% { opacity: 0; transform: translateY(24px) scale(.9); } 60% { transform: translateY(-3px) scale(1.02); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes breadcrumbSlide { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes underlineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pageSweep { 0% { opacity: .9; background-position: 200% 0; } to { opacity: 0; background-position: -20% 0; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* خلفية متحركة هادئة */
body { background-size: 220% 220%, 220% 220%, 100% 100%; }
body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(rgba(17,24,39,.05) 1px, transparent 1px); background-size: 3px 3px; opacity: .5; mix-blend-mode: multiply; }
body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 160px rgba(13, 61, 78, 0.10); }
/* #login-screen يستبق position:fixed من قاعدته الأساسية ليكون صندوقًا ممرِّرًا بارتفاع الجهاز */
#app { position: relative; z-index: 2; }
#app::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(38% 32% at 88% 8%, rgba(42,164,200,.12), transparent 70%), radial-gradient(34% 30% at 6% 92%, rgba(12,154,151,.10), transparent 70%); }

/* تخطيط التطبيق الأساسي */
#app { display: flex; height: 100vh; width: 100%; min-width: 0; overflow: hidden; }
#app.hidden { display: none !important; }

sidebar {
  width: 290px; background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
  border-left: 1px solid rgba(203, 213, 225, 0.85); display: flex; flex-direction: column; z-index: 100;
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.04); flex-shrink: 0; height: 100%; overflow-y: auto;
}
content-area { flex: 1; min-width: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #cbd5e1 0%, #bfd3d4 100%); height: 100%; overflow: hidden; }

topbar {
  height: auto; min-height: 78px; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(203, 213, 225, 0.9); display: flex; align-items: center; padding: 0 24px; z-index: 99; flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.02);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand { min-width: 0; flex: 0 1 auto; }
.brand-name { min-width: 0; }
.brand-name b {
  display: block; width: fit-content; max-width: 100%; font-size: 15px; font-weight: 900;
  color: #020617; background: linear-gradient(100deg, #000 0%, #000 34%, #020617 45%, #052e16 50%, #34a853 53%, #020617 60%, #000 100%);
  background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .42));
}
.brand-name span {
  display: block; width: fit-content; max-width: 100%; font-size: 11px; font-weight: 900;
  color: #020617; background: linear-gradient(100deg, #000 0%, #000 34%, #020617 45%, #052e16 50%, #34a853 53%, #020617 60%, #000 100%);
  background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .42));
}
.topbar-left { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 1 1 650px; min-width: 0; flex-wrap: wrap; }
.mobile-nav-toggle {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1px solid var(--slate-200); border-radius: 10px; background: #fff; color: var(--slate-800);
  font-size: 20px; cursor: pointer;
}
#mobile-nav-backdrop { display: none; }
/* مبدّل اتجاه ورقة الطباعة: تلقائي / رأسي / أفقي */
.orient-wrap {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
  border: 1px solid rgba(13, 148, 136, 0.28);
  padding: 5px 9px; border-radius: 12px;
  box-shadow: 0 6px 14px rgba(13, 148, 136, 0.06);
  cursor: pointer; white-space: nowrap;
}
.orient-wrap:focus-within { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15); }
.orient-ic { font-size: 14px; }
.orient-select {
  border: none; background: transparent; font-family: inherit;
  font-size: 12px; font-weight: 900; color: #0f766e;
  cursor: pointer; outline: none; padding: 0;
}
.orient-select:hover { color: #115e59; }
@media print { .orient-wrap { display: none !important; } }
.section-switcher-wrap {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 55%, #f0fdf4 100%);
  border-color: rgba(20, 83, 45, .32);
  box-shadow: 0 5px 15px rgba(20, 83, 45, .14), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.section-switcher-wrap:hover,
.section-switcher-wrap:focus-within {
  border-color: rgba(20, 83, 45, .65);
  box-shadow: 0 7px 20px rgba(20, 83, 45, .22), inset 0 1px 0 rgba(255, 255, 255, .95);
  transform: translateY(-1px);
}
.section-switcher-wrap .orient-select,
.section-switcher-wrap .orient-select:hover {
  color: #14532d;
}
.section-switcher-wrap .orient-select option {
  color: #14532d;
  background: #f0fdf4;
}
.topbar-notify {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--slate-200);
  background: #fff; cursor: pointer; transition: all .2s; font-size: 18px;
}
.topbar-notify:hover { background: var(--primary-50); border-color: var(--primary-600); box-shadow: 0 4px 12px rgba(42,164,200,.12); }
.notif-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  border-radius: 999px; background: var(--rose-600); color: #fff;
  font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; box-shadow: 0 2px 6px rgba(225,29,72,.3);
  animation: badgePop .3s ease;
}
@keyframes badgePop { from { transform: scale(0); } to { transform: scale(1); } }
.notif-icon { font-size: 18px; }
.date-chip {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #f0f9ff 0%, #ecfeff 100%);
  border: 1px solid rgba(28, 141, 176, 0.18);
  padding: 6px 14px; border-radius: 12px; text-align: center;
  box-shadow: 0 6px 14px rgba(28, 141, 176, 0.05);
  white-space: nowrap;
}
.dc-day { font-size: 12px; font-weight: 900; color: var(--slate-800); }
.dc-sep { font-size: 11px; color: var(--slate-400); font-weight: 700; }
.dc-greg { font-size: 12px; font-weight: 800; color: var(--primary-700); }
.dc-hijri { font-size: 11px; font-weight: 700; color: var(--teal-700); }
.dc-year { font-size: 10px; font-weight: 800; color: var(--slate-600); }

/* مظهر موحّد ولامع لأدوات وأيقونات الشريط العلوي */
.topbar-left .orient-wrap,
.topbar-left .btn.btn-ghost.btn-sm,
.topbar-left .topbar-holiday-chip,
.topbar-left .topbar-notify,
.topbar-left .date-chip,
.mobile-nav-toggle {
  color: #f0fdf4;
  background: linear-gradient(115deg, #0f172a 0%, #123b3b 48%, #287f72 100%);
  border: 1px solid rgba(110, 231, 160, .38);
  box-shadow: 0 7px 18px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
.topbar-left .orient-wrap,
.topbar-left .btn.btn-ghost.btn-sm,
.topbar-left .topbar-holiday-chip,
.topbar-left .date-chip {
  border-radius: 999px;
}
.topbar-left .orient-wrap {
  min-height: 40px;
  padding: 5px 12px;
}
.topbar-left .orient-ic,
.topbar-left .hc-ic,
.topbar-left .notif-icon {
  filter: drop-shadow(0 0 5px rgba(110, 231, 160, .35));
}
.topbar-left .orient-select,
.topbar-left .orient-select:hover {
  color: #f0fdf4;
}
.topbar-left .orient-select option,
.topbar-left .section-switcher-wrap .orient-select option {
  color: #14532d;
  background: #f0fdf4;
}
.topbar-left .section-switcher-wrap {
  background: linear-gradient(115deg, #0f172a 0%, #123b3b 48%, #287f72 100%);
  border-color: rgba(110, 231, 160, .38);
  box-shadow: 0 7px 18px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.topbar-left .section-switcher-wrap .orient-select,
.topbar-left .section-switcher-wrap .orient-select:hover {
  color: #f0fdf4;
}
.topbar-left .btn.btn-ghost.btn-sm {
  min-height: 40px;
  padding-inline: 14px;
}
.topbar-left .topbar-notify {
  width: 40px;
  height: 40px;
  border-radius: 999px;
}
.topbar-left .topbar-holiday-chip .hc-days {
  color: #052e16;
  background: linear-gradient(135deg, #86efac, #22c55e);
  box-shadow: 0 0 10px rgba(34, 197, 94, .35);
}
.topbar-left .date-chip {
  padding: 6px 14px;
}
.topbar-left .dc-day,
.topbar-left .dc-greg,
.topbar-left .dc-hijri,
.topbar-left .dc-year {
  color: #f0fdf4;
}
.topbar-left .dc-sep {
  color: rgba(220, 252, 231, .55);
}
.topbar-left .notif-badge {
  color: #052e16;
  background: linear-gradient(135deg, #86efac, #22c55e);
  box-shadow: 0 2px 9px rgba(34, 197, 94, .4);
}
.topbar-left .orient-wrap:hover,
.topbar-left .btn.btn-ghost.btn-sm:hover,
.topbar-left .topbar-holiday-chip:hover,
.topbar-left .topbar-notify:hover,
.topbar-left .topbar-notify[aria-expanded="true"],
.topbar-left .date-chip:hover,
.mobile-nav-toggle:hover {
  color: #fff;
  border-color: rgba(134, 239, 172, .85);
  box-shadow: 0 10px 24px rgba(20, 83, 45, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.topbar-left .orient-wrap:focus-within,
.topbar-left .btn.btn-ghost.btn-sm:focus-visible,
.topbar-left .topbar-holiday-chip:focus-visible,
.topbar-left .topbar-notify:focus-visible,
.mobile-nav-toggle:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 2px;
}
.school-logo-img { height: 38px; width: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 4px 10px rgba(17, 24, 39, 0.08); }

main { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable both-edges; padding: 24px; height: auto; }
.page { width: 100%; max-width: 1400px; min-width: 0; margin: 0 auto; padding-bottom: 40px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* القائمة الجانبية */
.role-box { padding: 16px; border-bottom: 1px solid var(--slate-200); background: linear-gradient(180deg, #f9fcfd 0%, #f2f7f9 100%); }
.role-box label { display: block; font-size: 11px; font-weight: 800; color: var(--slate-600); margin-bottom: 6px; }
.role-box .role-perm { font-weight: 800; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--slate-200); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
/* بطاقة صاحب الحساب: شريط سينمائي داكن يحمل الاسم أسفل الصلاحية + مؤشر «متصل» */
.role-owner {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 8px; padding: 9px 11px; border-radius: 12px;
  background: linear-gradient(135deg, #0f172a 0%, #134e4a 52%, #0f766e 100%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
/* لمعة ضوء تمرّ فوق البطاقة (لمحة سينمائية) */
.role-owner::after {
  content: ''; position: absolute; top: -40%; left: -70%; width: 45%; height: 180%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.24) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg); animation: ownerSweep 5s ease-in-out infinite;
}
@keyframes ownerSweep { 0%, 60% { left: -70%; } 100% { left: 140%; } }
.role-owner-name {
  position: relative; z-index: 1; min-width: 0; font-size: 13px; font-weight: 900; color: #f8fafc;
  letter-spacing: 0.2px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.role-online {
  position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; color: #bbf7d0;
  background: rgba(16, 185, 129, 0.16); border: 1px solid rgba(74, 222, 128, 0.45);
}
.role-online .online-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.9); animation: onlinePulse 1.9s ease-out infinite;
}
@keyframes onlinePulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6), 0 0 6px rgba(34, 197, 94, 0.9); }
  70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0), 0 0 6px rgba(34, 197, 94, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0), 0 0 6px rgba(34, 197, 94, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .role-owner::after, .role-online .online-dot { animation: none; }
}
.role-box select { width: 100%; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--slate-200); font-size: 12px; font-weight: 700; outline: none; background: #fff; }
.role-hint { padding: 8px 16px; font-size: 11px; font-weight: 800; color: var(--primary-700); background: linear-gradient(135deg, #edfafd 0%, #ecfffb 100%); border-bottom: 1px solid rgba(28, 141, 176, 0.12); }
.side-section { padding: 10px 12px; border-bottom: 1px solid var(--slate-100); }
.side-section.side-open { background: linear-gradient(180deg, rgba(28,141,176,.05) 0%, rgba(12,154,151,.02) 100%); }
.side-title { font-size: 10.5px; font-weight: 900; color: var(--slate-600); text-transform: uppercase; margin-bottom: 8px; letter-spacing: .5px; }
/* العنوان الرئيسي للقسم: زر يفتح الأيقونات كقائمة منسدلة */
.side-title.side-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  margin-bottom: 6px; padding: 9px 14px; border: 1px solid rgba(110, 231, 160, .38); border-radius: 999px;
  background: linear-gradient(115deg, #334155 0%, #2c6b65 48%, #4db3a4 100%); cursor: pointer; text-transform: none;
  letter-spacing: 0; font-size: 12px; font-weight: 900; color: #f0fdf4;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
.side-title.side-toggle:hover {
  border-color: rgba(134, 239, 172, .85);
  background: linear-gradient(115deg, #2c6b65 0%, #338f5d 48%, #61c78f 100%);
  color: #fff; box-shadow: 0 10px 24px rgba(20, 83, 45, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
  filter: brightness(1.08); transform: translateY(-1px);
}
.side-title.side-toggle:focus-visible { outline: 2px solid #86efac; outline-offset: 2px; }
.side-title .st-caret { font-size: 11px; line-height: 1; color: #bbf7d0; transition: transform .2s ease; }
.side-open > .side-title .st-caret { transform: rotate(180deg); color: #dcfce7; }
.side-title.side-toggle .st-text,
.side-section-ext > .side-title.side-toggle .st-text { color: inherit; }
.side-drop[hidden] { display: none !important; }
.side-nav.side-drop { gap: 4px; padding-top: 2px; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: none; background: none;
  border-radius: 12px; cursor: pointer; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--slate-600); transition: all .2s;
}
.nav-item:hover { background: linear-gradient(135deg, #f1f7fa 0%, #edf8ff 100%); color: var(--slate-900); }
.nav-item.active {
  background: linear-gradient(135deg, #1c8db0 0%, #0c9a97 100%);
  color: #fff; box-shadow: 0 10px 18px rgba(28, 141, 176, 0.2);
}
/* روابط المنصات المساندة داخل قسم «🔗 منصات مساندة» */
.side-section-ext { background: linear-gradient(180deg, rgba(13,148,136,.05) 0%, rgba(15,118,110,.03) 100%); }
.side-section-ext > .side-title .st-text { color: #0f766e; }
.side-ext { background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%); border: 1px dashed rgba(13, 148, 136, 0.35); }
.side-ext:hover { background: linear-gradient(135deg, #ccfbf1 0%, #cffafe 100%); color: #0f766e; border-color: rgba(13, 148, 136, 0.6); box-shadow: 0 6px 14px rgba(13, 148, 136, 0.14); }
.side-ext .ext-label { flex: 1; }
.side-ext .ext-go { font-size: 11px; font-weight: 900; color: #0d9488; }
.side-status { margin-top: auto; padding: 16px; font-size: 11px; color: var(--slate-600); text-align: center; border-top: 1px solid var(--slate-200); font-weight: 700; }

/* البطاقات والمكونات */
.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 20px; font-weight: 900; color: var(--slate-900); }
.page-head p { font-size: 12.5px; color: var(--slate-600); margin-top: 4px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

.card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-radius: 20px; padding: 20px; box-shadow: var(--shadow-soft); border: 1px solid rgba(203, 213, 225, 0.9); margin-bottom: 16px;
}
.card:hover { box-shadow: 0 16px 28px rgba(17, 24, 39, 0.06); }
.card-title { font-size: 14px; font-weight: 900; color: var(--slate-900); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.tag { background: linear-gradient(135deg, #ecfffb 0%, #edfafd 100%); color: var(--teal-700); padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; }

.stat-card {
  background: linear-gradient(135deg, #ffffff 0%, #f5fbff 100%); border-radius: 20px; padding: 20px;
  border: 1px solid rgba(203, 213, 225, 0.9); box-shadow: var(--shadow-soft); position: relative; overflow: hidden;
}
.stat-card::before {
  content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--primary-500), var(--teal-600));
}
.stat-card.stat-teal { background: linear-gradient(135deg, #ecfeff 0%, #f0fdf4 100%); }
.stat-card.stat-teal::before { background: linear-gradient(90deg, #14b8a6 0%, #0f766e 100%); }
.stat-card.stat-sky { background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%); }
.stat-card.stat-sky::before { background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%); }
.stat-card.stat-emerald { background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%); }
.stat-card.stat-emerald::before { background: linear-gradient(90deg, #10b981 0%, #047857 100%); }
.stat-card.stat-amber { background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%); }
.stat-card.stat-amber::before { background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%); }
.stat-card.stat-rose { background: linear-gradient(135deg, #fff1f2 0%, #fef2f2 100%); }
.stat-card.stat-rose::before { background: linear-gradient(90deg, #f43f5e 0%, #e11d48 100%); }
.stat-card .label { font-size: 12px; font-weight: 800; color: var(--slate-600); display: block; margin-bottom: 8px; }
.stat-card .value { font-size: 28px; font-weight: 900; color: var(--slate-900); }
.stat-card .sub { font-size: 11px; color: var(--primary-700); font-weight: 700; margin-top: 6px; display: block; }
.stat-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.stat-icon {
  width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6); font-size: 20px;
}
.stat-trend {
  font-size: 10.5px; font-weight: 800; color: var(--primary-700); background: rgba(255,255,255,0.7);
  padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(28,141,176,0.1);
}
.mini-panel {
  display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, #f8fbff 0%, #f5f9fb 100%);
  border: 1px solid var(--slate-200); border-radius: 16px; padding: 14px 16px; min-height: 86px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.02);
}
.mini-panel-icon {
  width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(42,164,200,0.13), rgba(12,154,151,0.1)); font-size: 20px;
}
.mini-panel strong { display: block; font-size: 13px; color: var(--slate-900); margin-bottom: 4px; }
.mini-panel p { font-size: 11.5px; color: var(--slate-600); line-height: 1.5; }

.page-head h1 {
  background: linear-gradient(135deg, var(--slate-900) 0%, var(--primary-700) 40%, var(--teal-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.table-wrap { width: 100%; overflow-x: auto; margin-top: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: right; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--slate-200); }
th {
  background: linear-gradient(180deg, #f6fbfd 0%, #eff6f9 100%); color: var(--slate-800); font-weight: 900; border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}
tr:hover { background: rgba(218, 244, 249, 0.35); }
tr:nth-child(even) { background: rgba(248, 250, 252, 0.45); }
.empty { text-align: center; color: var(--slate-600); padding: 24px; font-weight: 700; }

/* سجل متابعة الغياب الأسبوعي */
.wa-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
  border: 1px solid rgba(13, 148, 136, 0.28); border-radius: 999px;
  padding: 4px 10px; font-size: 11px; font-weight: 800; color: #0f766e;
}
.wa-cell { transition: transform .12s ease, box-shadow .12s ease; }
.wa-cell:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12); position: relative; z-index: 1; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; }
.badge-green { background: #d1fae5; color: #065f46; }
.badge-rose { background: #ffe4e6; color: #9f1239; }
.badge-sky { background: #e0f2fe; color: #0369a1; }
.badge-amber { background: #fef3c7; color: #92400e; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 12px; font-size: 12px; font-weight: 800; cursor: pointer; border: none; transition: all .2s; }
.btn-primary {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--teal-600) 100%);
  color: #fff; box-shadow: 0 10px 20px rgba(28, 141, 176, 0.22);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-700) 0%, var(--teal-700) 100%); transform: translateY(-1px); }
.btn-ghost { background: linear-gradient(180deg, #f7fafc 0%, #eef5f9 100%); color: var(--slate-800); border: 1px solid rgba(148, 163, 184, 0.25); }
.btn-ghost:hover { background: linear-gradient(180deg, #edf3f7 0%, #e7edf5 100%); }
.btn-sm { padding: 5px 10px; font-size: 11px; border-radius: 8px; }

button[data-duty-tab] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid rgba(110, 231, 160, .42);
  border-radius: 999px;
  color: #f0fdf4;
  background: linear-gradient(115deg, #0f172a 0%, #123b3b 48%, #287f72 100%);
  box-shadow: 0 6px 15px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
button[data-duty-tab]::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 25%, rgba(220, 252, 231, .24) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform .55s ease;
}
button[data-duty-tab]:hover,
button[data-duty-tab]:focus-visible {
  color: #fff;
  border-color: rgba(134, 239, 172, .9);
  background: linear-gradient(115deg, #123b3b 0%, #166534 48%, #34a875 100%);
  box-shadow: 0 9px 20px rgba(20, 83, 45, .3), inset 0 1px 0 rgba(255, 255, 255, .28);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
button[data-duty-tab]:hover::after { transform: translateX(120%); }
button[data-duty-tab]:focus-visible { outline: 2px solid #86efac; outline-offset: 2px; }

button[data-duty-add],
button[data-duty-print],
button[data-duty-excel],
button[data-duty-pdf],
button[data-duty-archive] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(110, 231, 160, .42);
  border-radius: 999px;
  color: #f0fdf4;
  background: linear-gradient(115deg, #0f172a 0%, #123b3b 48%, #287f72 100%);
  box-shadow: 0 6px 15px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
button[data-duty-add]::after,
button[data-duty-print]::after,
button[data-duty-excel]::after,
button[data-duty-pdf]::after,
button[data-duty-archive]::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 25%, rgba(220, 252, 231, .24) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform .55s ease;
}
button[data-duty-add]:hover,
button[data-duty-print]:hover,
button[data-duty-excel]:hover,
button[data-duty-pdf]:hover,
button[data-duty-archive]:hover,
button[data-duty-add]:focus-visible,
button[data-duty-print]:focus-visible,
button[data-duty-excel]:focus-visible,
button[data-duty-pdf]:focus-visible,
button[data-duty-archive]:focus-visible {
  color: #fff;
  border-color: rgba(134, 239, 172, .9);
  background: linear-gradient(115deg, #123b3b 0%, #166534 48%, #34a875 100%);
  box-shadow: 0 9px 20px rgba(20, 83, 45, .3), inset 0 1px 0 rgba(255, 255, 255, .28);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
button[data-duty-add]:hover::after,
button[data-duty-print]:hover::after,
button[data-duty-excel]:hover::after,
button[data-duty-pdf]:hover::after,
button[data-duty-archive]:hover::after {
  transform: translateX(120%);
}
button[data-duty-add]:focus-visible,
button[data-duty-print]:focus-visible,
button[data-duty-excel]:focus-visible,
button[data-duty-pdf]:focus-visible,
button[data-duty-archive]:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 2px;
}

button#att-add-student-btn,
button#att-save-all-btn,
button#att-archive-log-btn,
button#att-clear-btn,
button#att-print-btn,
button#att-excel-btn,
button#att-pdf-btn,
button#att-empty-print-btn,
button#att-empty-excel-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(110, 231, 160, .42);
  border-radius: 999px;
  color: #f0fdf4;
  background: linear-gradient(115deg, #0f172a 0%, #123b3b 48%, #287f72 100%);
  box-shadow: 0 6px 15px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
button#att-add-student-btn::after,
button#att-save-all-btn::after,
button#att-archive-log-btn::after,
button#att-clear-btn::after,
button#att-print-btn::after,
button#att-excel-btn::after,
button#att-pdf-btn::after,
button#att-empty-print-btn::after,
button#att-empty-excel-btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 25%, rgba(220, 252, 231, .24) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform .55s ease;
}
button#att-add-student-btn:hover,
button#att-save-all-btn:hover,
button#att-archive-log-btn:hover,
button#att-clear-btn:hover,
button#att-print-btn:hover,
button#att-excel-btn:hover,
button#att-pdf-btn:hover,
button#att-empty-print-btn:hover,
button#att-empty-excel-btn:hover,
button#att-add-student-btn:focus-visible,
button#att-save-all-btn:focus-visible,
button#att-archive-log-btn:focus-visible,
button#att-clear-btn:focus-visible,
button#att-print-btn:focus-visible,
button#att-excel-btn:focus-visible,
button#att-pdf-btn:focus-visible,
button#att-empty-print-btn:focus-visible,
button#att-empty-excel-btn:focus-visible {
  color: #fff;
  border-color: rgba(134, 239, 172, .9);
  background: linear-gradient(115deg, #123b3b 0%, #166534 48%, #34a875 100%);
  box-shadow: 0 9px 20px rgba(20, 83, 45, .3), inset 0 1px 0 rgba(255, 255, 255, .28);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
button#att-add-student-btn:hover::after,
button#att-save-all-btn:hover::after,
button#att-archive-log-btn:hover::after,
button#att-clear-btn:hover::after,
button#att-print-btn:hover::after,
button#att-excel-btn:hover::after,
button#att-pdf-btn:hover::after,
button#att-empty-print-btn:hover::after,
button#att-empty-excel-btn:hover::after {
  transform: translateX(120%);
}
button#att-add-student-btn:focus-visible,
button#att-save-all-btn:focus-visible,
button#att-archive-log-btn:focus-visible,
button#att-clear-btn:focus-visible,
button#att-print-btn:focus-visible,
button#att-excel-btn:focus-visible,
button#att-pdf-btn:focus-visible,
button#att-empty-print-btn:focus-visible,
button#att-empty-excel-btn:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 2px;
}

#task-form button[type="submit"].btn.btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(110, 231, 160, .42);
  border-radius: 999px;
  color: #f0fdf4;
  background: linear-gradient(115deg, #0f172a 0%, #123b3b 48%, #287f72 100%);
  box-shadow: 0 6px 15px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
#task-form button[type="submit"].btn.btn-primary:hover,
#task-form button[type="submit"].btn.btn-primary:focus-visible {
  color: #fff;
  border-color: rgba(134, 239, 172, .9);
  background: linear-gradient(115deg, #123b3b 0%, #166534 48%, #34a875 100%);
  box-shadow: 0 9px 20px rgba(20, 83, 45, .3), inset 0 1px 0 rgba(255, 255, 255, .28);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
#task-form button[type="submit"].btn.btn-primary:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 2px;
}

#report-month-filter + button.btn.btn-primary,
button[onclick^="printMonthlySummaryReport("],
button[onclick^="exportMonthlySummaryReport("] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(110, 231, 160, .42);
  border-radius: 999px;
  color: #f0fdf4;
  background: linear-gradient(115deg, #0f172a 0%, #123b3b 48%, #287f72 100%);
  box-shadow: 0 6px 15px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
#report-month-filter + button.btn.btn-primary:hover,
button[onclick^="printMonthlySummaryReport("]:hover,
button[onclick^="exportMonthlySummaryReport("]:hover,
#report-month-filter + button.btn.btn-primary:focus-visible,
button[onclick^="printMonthlySummaryReport("]:focus-visible,
button[onclick^="exportMonthlySummaryReport("]:focus-visible {
  color: #fff;
  border-color: rgba(134, 239, 172, .9);
  background: linear-gradient(115deg, #123b3b 0%, #166534 48%, #34a875 100%);
  box-shadow: 0 9px 20px rgba(20, 83, 45, .3), inset 0 1px 0 rgba(255, 255, 255, .28);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
#report-month-filter + button.btn.btn-primary:focus-visible,
button[onclick^="printMonthlySummaryReport("]:focus-visible,
button[onclick^="exportMonthlySummaryReport("]:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 2px;
}

#usr-template-btn,
#upload-usr-excel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(110, 231, 160, .42);
  border-radius: 999px;
  color: #f0fdf4;
  background: linear-gradient(115deg, #0f172a 0%, #123b3b 48%, #287f72 100%);
  box-shadow: 0 6px 15px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
#usr-template-btn:hover,
#upload-usr-excel:hover,
#usr-template-btn:focus-visible,
#upload-usr-excel:focus-visible {
  color: #fff;
  border-color: rgba(134, 239, 172, .9);
  background: linear-gradient(115deg, #123b3b 0%, #166534 48%, #34a875 100%);
  box-shadow: 0 9px 20px rgba(20, 83, 45, .3), inset 0 1px 0 rgba(255, 255, 255, .28);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
#usr-template-btn:focus-visible,
#upload-usr-excel:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 2px;
}

#set-section-save,
#set-section-reset,
#set-logo-btn,
#set-logo-reset,
#set-school-save,
#set-school-reset {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(110, 231, 160, .42);
  border-radius: 999px;
  color: #f0fdf4;
  background: linear-gradient(115deg, #0f172a 0%, #123b3b 48%, #287f72 100%);
  box-shadow: 0 6px 15px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
#set-section-save:hover,
#set-section-reset:hover,
#set-logo-btn:hover,
#set-logo-reset:hover,
#set-school-save:hover,
#set-school-reset:hover,
#set-section-save:focus-visible,
#set-section-reset:focus-visible,
#set-logo-btn:focus-visible,
#set-logo-reset:focus-visible,
#set-school-save:focus-visible,
#set-school-reset:focus-visible {
  color: #fff;
  border-color: rgba(134, 239, 172, .9);
  background: linear-gradient(115deg, #123b3b 0%, #166534 48%, #34a875 100%);
  box-shadow: 0 9px 20px rgba(20, 83, 45, .3), inset 0 1px 0 rgba(255, 255, 255, .28);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
#set-section-save:focus-visible,
#set-section-reset:focus-visible,
#set-logo-btn:focus-visible,
#set-logo-reset:focus-visible,
#set-school-save:focus-visible,
#set-school-reset:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 2px;
}

[data-uustatus],
[data-uuedit],
[data-uudel],
[data-uurestore],
[data-uufinal],
#usr-bulk-del-btn,
#user-form button[type="submit"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid rgba(110, 231, 160, .42) !important;
  border-radius: 999px;
  color: #f0fdf4 !important;
  background: linear-gradient(115deg, #0f172a 0%, #123b3b 48%, #287f72 100%);
  box-shadow: 0 6px 15px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
[data-uustatus]:hover,
[data-uuedit]:hover,
[data-uudel]:hover,
[data-uurestore]:hover,
[data-uufinal]:hover,
#usr-bulk-del-btn:hover,
#user-form button[type="submit"]:hover,
[data-uustatus]:focus-visible,
[data-uuedit]:focus-visible,
[data-uudel]:focus-visible,
[data-uurestore]:focus-visible,
[data-uufinal]:focus-visible,
#usr-bulk-del-btn:focus-visible,
#user-form button[type="submit"]:focus-visible {
  color: #fff !important;
  border-color: rgba(134, 239, 172, .9) !important;
  background: linear-gradient(115deg, #123b3b 0%, #166534 48%, #34a875 100%);
  box-shadow: 0 9px 20px rgba(20, 83, 45, .3), inset 0 1px 0 rgba(255, 255, 255, .28);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
[data-uustatus]:focus-visible,
[data-uuedit]:focus-visible,
[data-uudel]:focus-visible,
[data-uurestore]:focus-visible,
[data-uufinal]:focus-visible,
#usr-bulk-del-btn:focus-visible,
#user-form button[type="submit"]:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 2px;
}

button[onclick^="printReportByType("],
button[onclick^="exportReportByType("] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid rgba(110, 231, 160, .42);
  border-radius: 999px;
  color: #f0fdf4;
  background: linear-gradient(115deg, #0f172a 0%, #123b3b 48%, #287f72 100%);
  box-shadow: 0 6px 15px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
button[onclick^="printReportByType("]:hover,
button[onclick^="exportReportByType("]:hover,
button[onclick^="printReportByType("]:focus-visible,
button[onclick^="exportReportByType("]:focus-visible {
  color: #fff;
  border-color: rgba(134, 239, 172, .9);
  background: linear-gradient(115deg, #123b3b 0%, #166534 48%, #34a875 100%);
  box-shadow: 0 9px 20px rgba(20, 83, 45, .3), inset 0 1px 0 rgba(255, 255, 255, .28);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
button[onclick^="printReportByType("]:focus-visible,
button[onclick^="exportReportByType("]:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 2px;
}

.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 800; color: var(--slate-800); }
.field input, .field select, .field textarea { padding: 9px 14px; border-radius: 12px; border: 1px solid var(--slate-200); font-size: 12px; font-weight: 700; outline: none; background: #fff; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15); }

/* إشعارات التوست */
#toast-root { position: fixed; bottom: 24px; left: 24px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; }
#login-welcome.login-welcome-full { position: fixed; inset: 0; z-index: 99990; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: radial-gradient(1400px 800px at 50% 25%, #f0fdfa 0%, #ccfbf1 42%, #99f6e4 78%, #0f2a3a 170%); text-align: center; padding: 32px 20px; animation: welcomeFullIn .45s ease both; }
#login-welcome .wf-logo { width: 92px; height: 92px; border-radius: 26px; object-fit: cover; border: 4px solid rgba(255, 255, 255, .85); box-shadow: 0 22px 50px rgba(15, 42, 58, .35); background: #fff; }
#login-welcome .wf-greet { font-size: clamp(24px, 5.4vw, 40px); font-weight: 900; color: var(--navy, #0f2a3a); line-height: 1.7; }
#login-welcome .wf-greet b { color: var(--teal-700, #0d9488); }
#login-welcome .wf-role { display: inline-block; margin-top: 6px; font-size: .78em; color: var(--teal-700, #0d9488); font-weight: 900; }
#login-welcome .wf-sub { font-size: 14px; font-weight: 800; color: var(--slate-600, #475569); opacity: .85; }
@keyframes welcomeFullIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
.cloud-sync-hint { font-size: 10.5px; font-weight: 700; color: var(--slate-600); background: rgba(148, 163, 184, .12); border: 1px dashed rgba(148, 163, 184, .5); border-radius: 10px; padding: 6px 10px; margin-top: 6px; line-height: 1.7; text-align: right; }
.toast { background: var(--slate-900); color: #fff; padding: 12px 20px; border-radius: 14px; font-size: 12px; font-weight: 800; box-shadow: 0 10px 25px rgba(0,0,0,0.2); animation: slideUp .3s ease; }
.toast.ok { background: var(--teal-600); } .toast.err { background: var(--rose-600); }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   إعدادات الطباعة المخصصة والتوافق التام مع ورق A4
   ============================================================ */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body {
    background: #fff !important; color: #000 !important; font-size: 11pt !important;
    height: auto !important; overflow: visible !important; line-height: 1.6 !important;
  }

  #toast-root, .btn, button, input, select, textarea, .role-box, .side-status, .side-section, .nav-item, .date-chip, .brand, .topbar-inner, .page-head p, .card-title, .field, .role-card {
    display: none !important;
  }

  #app {
    display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; overflow: visible !important;
    background: #fff !important;
  }

  sidebar {
    display: none !important;
  }

  content-area, main, .page, .card {
    display: block !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important;
    box-shadow: none !important; border: none !important; background: #fff !important; height: auto !important; overflow: visible !important;
  }

  .table-wrap, table, thead, tbody, tr, th, td {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  table {
    border-collapse: collapse !important;
    margin-top: 12px; page-break-inside: auto;
    table-layout: fixed;
  }

  tr { page-break-inside: avoid; page-break-after: auto; }

  th, td {
    border: 1px solid #94a3b8 !important; padding: 7px 8px !important; font-size: 10pt !important; color: #000 !important; text-align: right !important; vertical-align: top !important;
    word-wrap: break-word !important;
  }

  th {
    background: #f0fdfa !important; color: #115e59 !important; font-weight: 900 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  .page-head {
    margin-bottom: 12px !important; padding-bottom: 8px !important; border-bottom: 1px solid #cbd5e1 !important;
  }

  .page-head h1 {
    font-size: 18pt !important; color: #111827 !important; margin: 0 !important;
  }

    .page-head p {
    display: none !important;
  }
}

/* ============ الخطة الأسبوعية: جدول المواد ============ */
.wp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 760px; }
.wp-table thead th {
  background: linear-gradient(115deg, var(--teal-700) 0%, var(--primary-700) 45%, var(--teal-700) 100%);
  background-size: 220% 100%;
  color: #fff; font-weight: 900; font-size: 12px; padding: 14px 12px; text-align: right; white-space: nowrap;
  animation: shimmerSweep 6s ease-in-out infinite;
  position: sticky; top: 0; z-index: 2;
}
.wp-table tbody td { padding: 12px; border-bottom: 1px solid var(--slate-100); vertical-align: middle; position: relative; }
.wp-table tbody tr:nth-child(even) { background: #f8fbfd; }
.wp-table tbody tr { position: relative; transition: background .2s ease, transform .2s ease; }
.wp-table tbody tr:not(.wp-add-row)::before {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--primary-500), var(--teal-600));
  transform: scaleY(0); transform-origin: center; transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.wp-table tbody tr:hover:not(.wp-add-row) { background: var(--teal-50); transform: translateX(-2px); }
.wp-table tbody tr:hover:not(.wp-add-row)::before { transform: scaleY(1); }
.wp-table tbody tr:last-child td { border-bottom: none; }
.wp-idx {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--slate-100); color: var(--slate-700); font-weight: 900; font-size: 11px;
}
.wp-subject-badge {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 900; white-space: nowrap;
  position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.wp-table tbody tr:hover .wp-subject-badge {
  transform: translateY(-1px) scale(1.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 4px 10px rgba(13,61,78,.14);
}
.wp-c1 { background: #e0f2fe; color: #075985; }
.wp-c2 { background: #dcfce7; color: #166534; }
.wp-c3 { background: #fef3c7; color: #92400e; }
.wp-c4 { background: #fee2e2; color: #991b1b; }
.wp-c5 { background: #ede9fe; color: #5b21b6; }
.wp-c6 { background: #ffe4e6; color: #9f1239; }
.wp-c7 { background: #cffafe; color: #155e75; }
.wp-c8 { background: #fae8ff; color: #86198f; }
.wp-lesson { font-weight: 800; color: var(--slate-900); }
.wp-homework { font-weight: 700; color: var(--slate-800); }
.wp-notes { font-size: 11.5px; color: var(--slate-600); }
.wp-muted { font-size: 11.5px; color: var(--slate-400); font-weight: 700; }
.wp-page-badge {
  display: inline-flex; min-width: 30px; height: 24px; padding: 0 8px; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--slate-100); color: var(--slate-800); font-weight: 900; font-size: 11.5px;
}
.wp-del-btn {
  border: none; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff1f2; color: var(--rose-600); box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.15);
  transition: all .15s;
}
.wp-del-btn:hover { background: var(--rose-600); color: #fff; }
.wp-toolbar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start;
  padding: 14px 16px; border-radius: 0;
  background: linear-gradient(135deg, #f7fafc 0%, #eef7f7 100%);
  border: none; border-bottom: 1px solid var(--slate-200); position: relative;
}
.wp-toolbar::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 3px;
  background: linear-gradient(90deg, var(--primary-500), var(--teal-600)); opacity: .6;
}
.wp-toolbar-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wp-toolbar-label { font-size: 11.5px; font-weight: 900; color: var(--slate-700); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.wp-toolbar input[type="date"] { border: 1px solid var(--slate-200); background: #fff; border-radius: 9px; padding: 6px 9px; font-size: 12px; outline: none; color: var(--slate-900); }
.wp-toolbar input[type="date"]:focus { border-color: var(--primary-600); box-shadow: 0 0 0 3px rgba(42, 164, 200, 0.12); }
.wp-arrow { color: var(--slate-400); font-weight: 900; }
.wp-subjects-inline .subject-chip-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wp-subject-add-form { display: inline-flex; gap: 6px; align-items: center; }
.wp-subject-add-form input { border: 1px solid var(--slate-200); background: #fff; border-radius: 9px; padding: 6px 10px; font-size: 12px; outline: none; width: 150px; color: var(--slate-900); }
.wp-subject-add-form input:focus { border-color: var(--primary-600); box-shadow: 0 0 0 3px rgba(42, 164, 200, 0.12); }
.wp-add-row { background: linear-gradient(135deg, #ecfffb 0%, #edfafd 100%) !important; box-shadow: inset 0 -2px 0 rgba(28, 141, 176, 0.18); }
.wp-add-row:hover { background: linear-gradient(135deg, #ecfffb 0%, #edfafd 100%) !important; }
.wp-add-row td { padding: 8px !important; vertical-align: middle; }
.wp-table .wp-add-row input, .wp-table .wp-add-row select {
  width: 100%; min-width: 78px; border: 1px solid var(--slate-200); background: #fff; border-radius: 8px;
  padding: 7px 8px; font-size: 11.5px; outline: none; color: var(--slate-900); transition: border-color .2s ease, box-shadow .2s ease;
}
.wp-table .wp-add-row input:focus, .wp-table .wp-add-row select:focus {
  border-color: var(--primary-600); box-shadow: 0 0 0 3px rgba(42, 164, 200, 0.12);
}
.wp-idx-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary-600); color: #fff; font-weight: 900; font-size: 12px;
  animation: iconFloat 2.4s ease-in-out infinite;
}
.wp-add-btn {
  border: none; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--teal-600) 100%); color: #fff;
  box-shadow: 0 8px 16px rgba(28, 141, 176, 0.25); transition: all .2s;
}
.wp-add-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 22px rgba(28, 141, 176, 0.35); }
.wp-add-btn:active { transform: translateY(0) scale(.95); }
.wp-table-card { border-radius: 18px; overflow: hidden; border: 1px solid var(--slate-200); box-shadow: var(--shadow-soft); margin-top: 6px; }
.wp-table-scroll { width: 100%; overflow-x: auto; }

/* شرائح المواد المصغّرة */
.wp-mini-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; margin-top: 2px; max-width: 100%; }
.wp-mini-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 900; white-space: nowrap; line-height: 1.6; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.wp-mini-chip.wp-mini-more { background: var(--slate-100); color: var(--slate-600); }
.wp-mini-empty { font-size: 10px; font-weight: 700; color: var(--slate-400); font-style: normal; }

/* ===== عناصر السجل الفصلي ===== */
.mr-wrap { overflow: auto; max-height: 66vh; border: 1px solid var(--slate-200); border-radius: 14px; background: #fff; }
.mr-table { border-collapse: separate; border-spacing: 0; font-size: 11.5px; width: max-content; min-width: 100%; }
.mr-table th, .mr-table td { border-bottom: 1px solid var(--slate-200); border-left: 1px solid var(--slate-200); padding: 5px 4px; text-align: center; vertical-align: middle; background: #fff; }
.mr-table thead th { position: sticky; top: 0; z-index: 3; background: linear-gradient(135deg, var(--primary-600), var(--teal-600)); color: #fff; font-weight: 900; font-size: 11.5px; }
.mr-table thead tr:nth-child(2) th { top: 31px; }
.mr-table thead th small { display: block; font-size: 9px; font-weight: 800; opacity: .85; }
.mr-weekhead { font-size: 12px; letter-spacing: .3px; border-left: 2px solid rgba(255,255,255,.55)!important; }
.mr-dayhead { min-width: 34px; font-size: 10px; font-weight: 800; position: relative; }
.mr-today-head { background: #fbbf24!important; color: #1e293b!important; box-shadow: inset 0 0 0 2px #f59e0b; }
.mr-today-tag { display: block; font-size: 8px; font-weight: 900; color: #7c2d12; background: #fff; border-radius: 6px; padding: 1px 4px; margin-top: 2px; }
.mr-day.mr-today-col { background: rgba(251,191,36,.14)!important; }
.mr-num { width: 34px; color: var(--slate-600); font-weight: 800; }
.mr-name { position: sticky; right: 0; z-index: 2; min-width: 150px; text-align: right!important; font-weight: 800; box-shadow: -2px 0 0 var(--slate-200); background: #fff; }
.mr-table thead .mr-name { z-index: 5; }
.mr-sec { width: 52px; font-weight: 800; color: var(--slate-600); }
.mr-day { padding: 2px!important; }
.mr-off { background: #f8fafc; color: #cbd5e1; }
.mr-dot { width: 28px; height: 28px; border: 1px solid var(--slate-200); border-radius: 8px; font-size: 13px; font-weight: 900; cursor: pointer; line-height: 1; transition: .15s; background: #fff; }
.mr-dot:hover { transform: scale(1.1) rotate(-2deg); border-color: var(--primary-600); box-shadow: 0 4px 10px rgba(23,111,146,.18); }
.mr-wscore { min-width: 54px; background: #fffdf5!important; }
.mr-wscore input { width: 46px; padding: 5px 2px; border: 1px solid var(--slate-200); border-radius: 7px; font-weight: 900; font-size: 12px; text-align: center; background: #fff; color: var(--slate-900); }
.mr-table thead .mr-wscore { background: #fde68a!important; color: #1e293b!important; font-size: 10px; }
.mr-avg { min-width: 56px; font-weight: 900; background: var(--primary-50)!important; }
.mr-table thead .mr-avg,.mr-avghead { background: var(--primary-200)!important; color: #1e293b!important; font-size: 11px; }
.mr-score { min-width: 62px; background: #f8fafc!important; }
.mr-score input { width: 52px; padding: 5px 2px; border: 1px solid var(--slate-200); border-radius: 7px; font-weight: 900; font-size: 12px; text-align: center; background: #fff; color: var(--slate-900); }
.mr-total { min-width: 60px; font-weight: 900; background: #eef2ff!important; }
.mr-pct { min-width: 62px; font-weight: 900; font-size: 13px; background: #ecfdf5!important; }
.mr-table tbody tr:hover td { background: #f1f5f9; }
.mr-table tbody tr:hover .mr-name { background: #e2e8f0; }
@media(max-width:700px) { .mr-name { min-width: 112px; font-size: 11px; } .mr-dot { width: 25px; height: 25px; font-size: 12px; } .mr-score input,.mr-wscore input { width: 42px; } }

@media print { #monthlyRecordPrintArea { display: block!important; } body * { visibility: hidden!important; } #monthlyRecordPrintArea,#monthlyRecordPrintArea * { visibility: visible!important; } #monthlyRecordPrintArea { position: absolute!important; top: 0; right: 0; left: 0; width: 100%; padding: 0; margin: 0; background: #fff; } #monthlyRecordPrintArea .table-wrap { max-height: none!important; overflow: visible!important; border: 1px solid #333!important; } #monthlyRecordPrintArea table { width: 100%!important; font-size: 11px!important; -webkit-print-color-adjust: exact!important; print-color-adjust: exact!important; } #monthlyRecordPrintArea button { display: none!important; } @page { size: A4 landscape; margin: 8mm; } }

/* ===== مؤثرات الاحتفال ===== */
@keyframes mrBadgeReveal { from { opacity: 0; transform: scale(.45) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes mrBadgeGlow { 0%,100% { box-shadow: 0 12px 30px rgba(23,111,146,.28); } 50% { box-shadow: 0 14px 42px rgba(12,154,151,.42),0 0 0 8px rgba(23,111,146,.05); } }
@keyframes mrButtonShine { 0%,55% { left: -120%; } 75%,100% { left: 140%; } }
@keyframes mrConfettiFall { 0% { transform: translateY(-40px) rotate(0deg); opacity: 1; } 100% { transform: translateY(320px) rotate(540deg); opacity: 0; } }
@keyframes mrCelebratePop { from { opacity: 0; transform: translateY(24px) scale(.92); } to { opacity: 1; transform: none; } }
.mr-excellent-badge { animation: mrBadgeReveal .5s cubic-bezier(.2,.8,.2,1) both, mrBadgeGlow 2.6s ease-in-out infinite .5s; }
.mr-shine-btn { position: relative; overflow: hidden; }
.mr-shine-btn::after { content: ""; position: absolute; top: -80%; left: -35%; width: 28%; height: 260%; background: rgba(255,255,255,.35); transform: rotate(24deg); }
.mr-shine-btn:hover::after { animation: mrButtonShine 1.1s ease forwards; }
#mrCelebrateOverlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); }
#mrCelebrateOverlay.hidden { display: none; }
.mr-celebrate-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mr-confetti-piece { position: absolute; top: -10px; width: 8px; height: 14px; border-radius: 2px; animation: mrConfettiFall linear forwards; }
.mr-celebrate-card { position: relative; background: #fff; border-radius: 22px; padding: 28px 26px; max-width: 360px; width: 92%; text-align: center; box-shadow: var(--shadow-strong); animation: mrCelebratePop .5s cubic-bezier(.2,.8,.2,1) both; }
.mr-celebrate-card .mr-emoji { font-size: 44px; display: block; margin-bottom: 8px; animation: mrBadgeGlow 2.2s ease-in-out infinite; }
.mr-celebrate-card h3 { font-size: 17px; font-weight: 900; color: var(--slate-900); margin-bottom: 6px; }
.mr-celebrate-card p { font-size: 12.5px; color: var(--slate-600); margin-bottom: 16px; }

/* ===== أنماط البحث ===== */
.search-bar { position: relative; flex: 1; max-width: 400px; }
.search-bar input { width: 100%; padding: 8px 14px 8px 34px; border-radius: 12px; border: 1px solid var(--slate-200); font-size: 12px; font-weight: 700; outline: none; background: #fff; direction: rtl; font-family: 'Tajawal', sans-serif; transition: border-color .2s, box-shadow .2s; }
.search-bar input:focus { border-color: var(--primary-600); box-shadow: 0 0 0 3px rgba(42,164,200,.12); }
.search-bar .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--slate-400); font-size: 14px; pointer-events: none; }
.search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border-radius: 14px; box-shadow: 0 14px 35px rgba(0,0,0,.15); max-height: 320px; overflow-y: auto; z-index: 1000; display: none; }
.search-results.visible { display: block; animation: modalPop .2s ease; }
.search-result-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--slate-100); transition: background .2s; }
.search-result-item:hover { background: var(--primary-50); }
.search-result-type { font-size: 10px; font-weight: 800; color: var(--primary-700); padding: 2px 8px; border-radius: 6px; background: var(--primary-100); }
.search-result-name { font-size: 12px; font-weight: 700; color: var(--slate-900); }
.search-no-results { padding: 20px; text-align: center; color: var(--slate-600); font-weight: 700; }

/* ===== صفحة سجل تصنيف المعلمين ===== */
.teacher-rating-table .badge { padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.teacher-rating-card { background: linear-gradient(135deg, #f0fdfa 0%, #e0f4ff 100%); border: 1px solid #bae6fd; }
.teacher-rating-stat { text-align: center; padding: 14px; background: #fff; border-radius: 14px; border: 1px solid var(--slate-200); }
.teacher-rating-stat .value { font-size: 24px; font-weight: 900; color: var(--slate-900); }
.teacher-rating-stat .label { font-size: 11px; font-weight: 700; color: var(--slate-600); margin-top: 4px; }

/* ===== سجل متابعة تقويم الطالب (جدول الدرجات) ===== */
.fu-table-wrap { max-height: 68vh; overflow: auto; margin-top: 12px; border: 1px solid var(--slate-200); border-radius: 14px; }
.fu-table { min-width: 980px; font-size: 12px; border-collapse: separate; border-spacing: 0; }
.fu-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: linear-gradient(180deg, #0f766e 0%, #115e59 100%);
  color: #fff; font-weight: 900; font-size: 11.5px; text-align: center;
  padding: 9px 7px; border: 1px solid #0f766e; line-height: 1.45;
}
.fu-table thead th small { display: block; font-size: 10px; opacity: .85; font-weight: 800; }
.fu-table thead tr:nth-child(2) th { top: 40px; z-index: 3; background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%); border-color: #0f766e; }
.fu-table thead th.fu-group { background: linear-gradient(180deg, #134e4a 0%, #115e59 100%); font-size: 12.5px; letter-spacing: .3px; }
.fu-table tbody td { border: 1px solid var(--slate-200); padding: 5px 6px; text-align: center; background: #fff; }
.fu-table tbody tr:nth-child(even) td { background: #f8fafc; }
.fu-table tbody tr:hover td { background: #ecfdf5; }
.fu-num { width: 38px; font-weight: 900; color: var(--slate-500); }
.fu-name { min-width: 210px; text-align: right !important; font-weight: 800; color: var(--slate-800); white-space: nowrap; }
.fu-input {
  width: 58px; padding: 6px 4px; text-align: center; font-weight: 900; font-size: 12.5px;
  border: 1px solid var(--slate-300); border-radius: 8px; background: #fff; color: var(--slate-900);
  transition: border-color .15s, box-shadow .15s;
}
.fu-input:focus { outline: none; border-color: #14b8a6; box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
.fu-input::-webkit-outer-spin-button, .fu-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fu-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.fu-sum-cell { font-weight: 900; font-size: 13px; min-width: 60px; }
.fu-formative { background: #f0fdfa !important; color: #0f766e; }
.fu-written { background: #eff6ff !important; color: #1d4ed8; }
.fu-total { background: #fef9c3 !important; color: #a16207; font-size: 14px !important; }
.fu-grade { min-width: 86px; font-weight: 900; font-size: 12.5px; }
.fu-table tfoot td { border: 1px solid var(--slate-300); padding: 9px 7px; font-weight: 900; text-align: center; background: #f1f5f9; }
/* شريط المعلومات */
.fu-info-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; padding: 10px 12px; background: linear-gradient(135deg, #f0fdfa, #ecfeff); border: 1px solid #99f6e4; border-radius: 12px; }
.fu-info-right, .fu-info-left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fu-info-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; color: #0f766e; background: #fff; border: 1px solid #99f6e4; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.fu-teacher-lbl { font-size: 11.5px; font-weight: 900; color: var(--slate-600); }
.fu-teacher-input { min-width: 170px; padding: 7px 10px; border: 1px solid var(--slate-300); border-radius: 9px; font-size: 12px; font-weight: 800; background: #fff; color: var(--slate-900); }
.fu-teacher-input:focus { outline: none; border-color: #14b8a6; box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
/* شريط ربط السجل مع معلم (الإدارة) وفك الارتباط */
.fu-link-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; padding: 8px 12px; background: #f8fafc; border: 1px dashed #94a3b8; border-radius: 10px; }
.fu-link-bar .fu-teacher-input { min-width: 190px; }
.fu-link-title { font-size: 12px; font-weight: 900; color: var(--teal-700); }
/* الطباعة */
@media print {
  .fu-table-wrap { max-height: none !important; overflow: visible !important; border: none !important; }
  .fu-table { min-width: 0 !important; font-size: 10px !important; }
  .fu-table thead th { background: #0f766e !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color: #fff !important; position: static !important; }
  .fu-table thead tr:nth-child(2) th { background: #14b8a6 !important; }
  .fu-formative, .fu-written, .fu-total, .fu-table tfoot td { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .fu-input { border: none !important; -webkit-appearance: none !important; appearance: none !important; }
}
@media(max-width:768px) {
  #app { min-width: 0; }
  sidebar {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 320px); max-width: 320px;
    height: 100dvh; transform: translateX(105%); transition: transform .22s ease; z-index: 1001;
  }
  #app.mobile-nav-open sidebar { transform: translateX(0); }
  #mobile-nav-backdrop {
    display: block; position: fixed; inset: 0; width: 100%; height: 100%; border: 0;
    background: rgba(15, 23, 42, .48); z-index: 1000;
  }
  #app:not(.mobile-nav-open) #mobile-nav-backdrop { display: none; }
  .mobile-nav-toggle { display: inline-flex; flex: 0 0 auto; }
  content-area { width: 100%; min-width: 0; flex: 1 1 auto; }
  topbar { height: auto; min-height: 70px; padding: 10px 12px; }
  .topbar-inner { flex-wrap: wrap; gap: 8px; }
  .brand { flex: 1; min-width: 0; }
  .brand-name b { font-size: 13px; }
  .brand-name span, .date-chip, .topbar-holiday-chip { display: none; }
  .topbar-left { width: 100%; flex-wrap: wrap; gap: 6px; }
  main { width: 100%; min-width: 0; height: auto; min-height: 0; flex: 1 1 auto; padding: 14px; }
  .page { min-width: 0; }
  .search-bar { max-width: 100%; }
  .grid-4 .stat-card { min-width: 140px; }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
  .fu-info-bar { flex-direction: column; align-items: stretch; }
}
@media(max-width:480px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .grid-6 { grid-template-columns: 1fr; }
  .fu-input { width: 46px; }
  .fu-name { min-width: 150px; white-space: normal; }
}
/* ===== شاشة الدخول على الجوال: تقليل الارتفاع حتى تظهر الحقول وزر «دخول» بالكامل ===== */
@media(max-width:768px) {
  #login-screen { padding: 12px; }
  .login-card { padding: 20px 16px; border-radius: 20px; }
  .login-card .school-logo-img { height: 42px; }
  .login-title-cinematic { font-size: 17px !important; }
  .login-title-cinematic + p { margin-bottom: 12px !important; }
  .role-grid { max-height: min(30vh, 230px); gap: 8px; margin: 14px 0; }
  .role-card { padding: 10px; gap: 3px; border-radius: 14px; }
  .rc-ico { font-size: 17px; }
  .rc-name { font-size: 12px; }
  .rc-desc { font-size: 10px; }
  .login-fields .field span { font-size: 11px; }
  #login-btn { padding: 12px !important; font-size: 13.5px !important; }
}
/* --- استمارة الزيارة الصفية 1448 --- */
.cv-doc-head { text-align: center; border-bottom: 2px solid var(--teal-600); padding-bottom: 10px; margin-bottom: 14px; }
.cv-doc-org { font-weight: 900; font-size: 15px; }
.cv-doc-dept { color: var(--teal-600); font-weight: 700; font-size: 12px; }
.cv-doc-title { margin: 6px 0 0; font-size: 17px; font-weight: 900; }
.cv-table input[type="radio"] { width: 18px; height: 18px; accent-color: var(--teal-600); cursor: pointer; }
.cv-sum-row td { background: #fefce8; font-size: 12px; font-weight: 700; color: #854d0e; }
.cv-sum-row b { color: #0f766e; }
.cv-total-bar { background: #ecfdf5; border: 1px solid #6ee7b7; border-radius: 12px; padding: 12px 16px; font-size: 13px; font-weight: 800; text-align: center; }
.cv-total-bar b { color: #0f766e; }
.cv-note { background: #f8fafc; border: 1px solid var(--slate-200); border-radius: 10px; padding: 10px 14px; font-size: 12px; font-weight: 700; color: #475569; }

/* --- ملف تقارير المعلم (نافذة التفاصيل) --- */
.tr-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tr-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px); }
.tr-card { position: relative; background: #fff; border-radius: 18px; max-width: 880px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,0.3); overflow: hidden; }
.tr-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; background: linear-gradient(135deg, #f0fdfa, #ecfeff); border-bottom: 2px solid var(--teal-600); }
.tr-modal-head h3 { margin: 0 0 6px; font-size: 16px; font-weight: 900; }
.tr-modal-head p { margin: 0; font-size: 12px; color: var(--slate-600); font-weight: 700; }
.tr-modal-body { padding: 16px 20px; overflow-y: auto; }
.tr-modal-body h4 { margin: 16px 0 8px; font-size: 13px; font-weight: 900; color: #0f766e; }
.tr-kv { display: flex; flex-wrap: wrap; gap: 8px 16px; background: #f8fafc; border: 1px solid var(--slate-200); border-radius: 12px; padding: 10px 14px; font-size: 12px; font-weight: 700; }
.tr-notes { font-size: 12px; font-weight: 700; color: var(--slate-600); background: #f8fafc; border-radius: 10px; padding: 10px 14px; }
.tr-modal-foot { padding: 12px 20px; border-top: 1px solid var(--slate-200); display: flex; justify-content: flex-end; gap: 8px; }

/* --- Distance Learning Plan (DL plan) --- */
.dl-tbl { width: 100%; min-width: 560px; table-layout: fixed; border-collapse: collapse; font-size: 12px; text-align: center; }
.dl-tbl th, .dl-tbl td { border: 1px solid var(--slate-200); padding: 6px 4px; vertical-align: middle; text-align: center; }
.dl-tbl thead th { background: #f0fdfa; color: #0f766e; font-weight: 800; font-size: 13px; }
.dl-tbl .dl-sub { text-align: right; background: #f8fafc; min-width: 110px; }
.dl-tbl .dl-sub b { font-size: 13px; color: #0f172a; }
.dl-period { display: inline-block; font-size: 10px; font-weight: 800; color: #fff; background: #0d9488; border-radius: 999px; padding: 2px 8px; }
.dl-cell { display: flex; flex-direction: column; gap: 3px; align-items: stretch; min-width: 0; }
.dl-lbl { font-size: 10px; font-weight: 800; color: #64748b; }
.dl-sel { width: 100%; min-width: 0; padding: 5px 4px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 11px; background: #fff; font-family: inherit; color: #0f172a; cursor: pointer; text-overflow: ellipsis; }
.dl-sel:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.15); }
.dl-tbl thead th.dl-daycol, .dl-tbl th.dl-daycol { background: #dbeafe; color: #1e3a8a; font-weight: 900; width: 76px; min-width: 64px; position: sticky; right: 0; z-index: 2; }
.dl-tbl tbody th.dl-daycol { background: #eff6ff; color: #1e40af; font-size: 13px; }
.dl-tbl td { background: #fff; }
.dl-tbl tbody tr:hover td { background: #f8fafc; }
.dl-cell .dl-sel + .dl-lbl { margin-top: 6px; }
.dl-tbl thead th { background: #dcfce7; color: #14532d; }
.dl-times { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.dl-tlbl { font-size: 10px; font-weight: 800; color: #64748b; }
.dl-time { flex: 1 1 60px; min-width: 54px; padding: 3px 3px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 11px; background: #fff; font-family: inherit; color: #0f172a; cursor: pointer; }
.dl-time:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.15); }
.dl-cell { min-width: 0; }
/* عناوين الشعب في العرض الرأسي: كل شعبة بجدولها أسفل بعضها */
.dl-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 900; color: #115e59; background: linear-gradient(180deg, #f0fdfa, #ecfdf5); border: 1px solid #99f6e4; border-radius: 10px; padding: 8px 14px; margin: 16px 0 8px; cursor: pointer; user-select: none; }
.table-wrap > .dl-sec-head:first-child { margin-top: 0; }
.dl-sec-head:hover { border-color: #0d9488; }
.dl-sec-head.is-active { background: #0d9488; border-color: #0d9488; color: #fff; }
.dl-sec-tag { font-size: 10px; font-weight: 800; background: rgba(255, 255, 255, .28); border-radius: 999px; padding: 2px 10px; }
/* بنود المعلمين قبل التوليد */
.dl-roster-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 8px 12px; font-size: 12px; background: #f8fafc; }
.dl-roster-row b { color: #0f172a; }
.dl-roster-chip { background: #f0fdfa; border: 1px solid #99f6e4; color: #0f766e; font-weight: 800; border-radius: 999px; padding: 2px 10px; font-size: 11px; }
.dl-roster-empty { font-size: 12px; color: #b45309; background: #fffbeb; border: 1px dashed #fcd34d; border-radius: 10px; padding: 10px 12px; }
  /* شاشة طريقة الإسناد (المعلمين/المواد/الصف + العدادات والأزرار) */
  .dl-method-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; }
  .dl-method-title { font-size: 13px; font-weight: 900; color: #0f766e; }
  .dl-radio { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #0f172a; cursor: pointer; }
  .dl-radio input { accent-color: #0d9488; width: 16px; height: 16px; cursor: pointer; }
  .dl-method-hint { font-size: 11.5px; color: #64748b; margin: 0 0 8px; }
  .dl-scope-row { background: #eff6ff; border-color: #bfdbfe; }
  .dl-scope-row .dl-method-title { color: #1e40af; }
  .dl-multi { width: 100%; min-width: 0; height: auto; min-height: 150px; padding: 6px 8px; border: 1px solid var(--slate-300, #cbd5e1); border-radius: 10px; background: #fff; font-size: 12.5px; font-family: inherit; }
  .dl-multi option { padding: 3px 6px; border-radius: 6px; }
  .dl-multi option:checked { background: #0d9488; color: #fff; }
  .dl-multi-grid { align-items: start; margin-bottom: 8px; }
  .dl-src-hint { display: block; margin: 0 0 6px; padding: 6px 10px; border: 1px dashed #99f6e4; border-radius: 8px; background: #f0fdfa; color: #0f766e; font-size: 11.5px; font-weight: 700; line-height: 1.7; }
  .dl-src-hint b { color: #115e59; }
  .dl-cnt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
  .dl-cnt { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; border-radius: 10px; padding: 6px 14px; border: 1px solid; }
  .dl-cnt b { font-size: 16px; font-weight: 900; }
  .dl-cnt i { font-style: normal; font-size: 11px; opacity: 0.75; }
  .dl-cnt-in { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
  .dl-cnt-assigned { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
  .dl-cnt-note { font-size: 11.5px; color: #64748b; }
  .dl-btn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
  .dl-hr { border: none; border-top: 1px dashed var(--slate-300, #cbd5e1); margin: 12px 0 10px; }

  /* أيقونات سينمائية تتفاعل بسلاسة مع المرور والتركيز */
  @keyframes iconCinemaHover {
    0% { transform: translateY(0) rotate(0) scale(1); }
    45% { transform: translateY(-5px) rotate(-9deg) scale(1.16); }
    75% { transform: translateY(1px) rotate(4deg) scale(1.08); }
    100% { transform: translateY(0) rotate(0) scale(1.1); }
  }
  @keyframes iconLightSweep {
    from { transform: translateX(-160%) rotate(25deg); opacity: 0; }
    35% { opacity: .8; }
    to { transform: translateX(160%) rotate(25deg); opacity: 0; }
  }
  .nav-item .ic {
    position: relative; isolation: isolate; overflow: hidden; flex: 0 0 34px; width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 11px;
    background: linear-gradient(135deg, #6ee7b7 0%, #5eead4 48%, #2dd4bf 100%);
    border: 1px solid rgba(13, 148, 136, .3);
    color: #064e3b;
    box-shadow: 0 5px 12px rgba(13, 148, 136, .16), inset 0 1px 0 rgba(255,255,255,.55);
    font-size: 17px; line-height: 1;
    transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, background .32s ease;
  }
  .nav-item .ic::after {
    content: ""; position: absolute; z-index: 1; inset: -30% auto -30% -60%; width: 45%;
    background: linear-gradient(90deg, transparent, rgba(220,252,231,.9), transparent);
    opacity: 0; pointer-events: none;
  }
  .nav-item:hover .ic, .nav-item:focus-visible .ic {
    background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 48%, #34d399 100%);
    border-color: rgba(5, 150, 105, .52);
    color: #064e3b;
    box-shadow: 0 8px 18px rgba(13, 148, 136, .2), inset 0 1px 0 rgba(255,255,255,.65);
    animation: iconCinemaHover .62s cubic-bezier(.2,.8,.2,1) both;
  }
  .nav-item:hover .ic::after, .nav-item:focus-visible .ic::after { animation: iconLightSweep .65s ease-out both; }
  .nav-item.active .ic {
    background: linear-gradient(135deg, #5eead4, #34d399);
    border-color: rgba(13, 148, 136, .42);
    color: #064e3b;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 5px 12px rgba(13, 148, 136, .18);
  }
  .nav-item.active:hover .ic, .nav-item.active:focus-visible .ic {
    background: linear-gradient(135deg, #a7f3d0, #6ee7b7);
  }
    button[id^="wp-tab-"],
    button[id^="td-tab-"],
    button[id^="tab-"] {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      min-height: 36px;
      padding: 6px 14px;
      border: 1px solid rgba(110, 231, 160, .42);
      border-radius: 999px;
      color: #f0fdf4;
      background: linear-gradient(115deg, #0f172a 0%, #123b3b 48%, #287f72 100%);
      box-shadow: 0 6px 15px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
    }
    button[id^="wp-tab-"]::after,
    button[id^="td-tab-"]::after,
    button[id^="tab-"]::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(105deg, transparent 25%, rgba(220, 252, 231, .24) 50%, transparent 75%);
      transform: translateX(-120%);
      transition: transform .55s ease;
    }
    button[id^="wp-tab-"]:hover,
    button[id^="td-tab-"]:hover,
    button[id^="tab-"]:hover,
    button[id^="wp-tab-"]:focus-visible,
    button[id^="td-tab-"]:focus-visible,
    button[id^="tab-"]:focus-visible {
      color: #fff;
      border-color: rgba(134, 239, 172, .9);
      background: linear-gradient(115deg, #123b3b 0%, #166534 48%, #34a875 100%);
      box-shadow: 0 9px 20px rgba(20, 83, 45, .3), inset 0 1px 0 rgba(255, 255, 255, .28);
      filter: brightness(1.08);
      transform: translateY(-1px);
    }
    button[id^="wp-tab-"]:hover::after,
    button[id^="td-tab-"]:hover::after,
    button[id^="tab-"]:hover::after {
      transform: translateX(120%);
    }
    button[id^="wp-tab-"]:focus-visible,
    button[id^="td-tab-"]:focus-visible,
    button[id^="tab-"]:focus-visible {
      outline: 2px solid #86efac;
      outline-offset: 2px;
    }
    .stat-icon, .mini-panel-icon, .topbar-notify .notif-icon {
    transform-origin: center;
    transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, filter .32s ease;
  }
  .stat-card:hover .stat-icon, .stat-card:focus-within .stat-icon,
  .mini-panel:hover .mini-panel-icon, .mini-panel:focus-within .mini-panel-icon,
  .topbar-notify:hover .notif-icon, .topbar-notify:focus-visible .notif-icon {
    transform: translateY(-4px) rotate(-8deg) scale(1.15);
    filter: drop-shadow(0 5px 6px rgba(28,141,176,.24));
  }
  .stat-card:hover .stat-icon, .stat-card:focus-within .stat-icon,
  .mini-panel:hover .mini-panel-icon, .mini-panel:focus-within .mini-panel-icon {
    box-shadow: 0 8px 18px rgba(28,141,176,.16), inset 0 0 0 1px rgba(255,255,255,.8);
  }
  .topbar-notify:hover .notif-icon, .topbar-notify:focus-visible .notif-icon {
    animation: iconCinemaHover .62s cubic-bezier(.2,.8,.2,1) both;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-item .ic, .stat-icon, .mini-panel-icon, .topbar-notify .notif-icon {
      animation: none !important; transition: none !important;
    }
  }

/* توحيد المظهر السينمائي لجميع أزرار المنصة */
button:not(#mobile-nav-backdrop) {
  border: 1px solid rgba(110, 231, 160, .42) !important;
  border-radius: 999px !important;
  color: #f0fdf4 !important;
  background: linear-gradient(115deg, #1e293b 0%, #1f5c55 48%, #3a9b8e 100%) !important;
  box-shadow: 0 6px 15px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
button:not(#mobile-nav-backdrop):hover:not(:disabled),
button:not(#mobile-nav-backdrop):focus-visible {
  border-color: rgba(134, 239, 172, .9) !important;
  color: #fff !important;
  background: linear-gradient(115deg, #1f5c55 0%, #248048 48%, #4ab889 100%) !important;
  box-shadow: 0 9px 20px rgba(20, 83, 45, .3), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  filter: brightness(1.08);
  transform: translateY(-1px);
}
button:not(#mobile-nav-backdrop):focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 2px;
}
button:not(#mobile-nav-backdrop):disabled {
  cursor: not-allowed;
  opacity: .58;
  filter: saturate(.65);
}
@media (prefers-reduced-motion: reduce) {
  button:not(#mobile-nav-backdrop) {
    transition: none !important;
  }
}

/* حركة سينمائية هادئة لبطاقات المجالات والمؤشرات */
.card,
.stat-card,
.mini-panel {
  position: relative;
  isolation: isolate;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1), box-shadow .38s ease, border-color .38s ease;
}
.card::after,
.stat-card::after,
.mini-panel::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .35) 48%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.card:hover,
.stat-card:hover,
.mini-panel:hover {
  transform: translateY(-4px);
  border-color: rgba(15, 118, 110, .28);
  box-shadow: 0 18px 36px rgba(15, 23, 42, .14), 0 0 18px rgba(52, 168, 117, .1);
}
.card:hover::after,
.stat-card:hover::after,
.mini-panel:hover::after {
  transform: translateX(130%);
}
@media (prefers-reduced-motion: reduce) {
  .card,
  .stat-card,
  .mini-panel,
  .card::after,
  .stat-card::after,
  .mini-panel::after {
    transition: none !important;
  }
}

/* لوحة القيادة تبقى ثابتة داخل عرض الصفحة دون تأثيرات البطاقات العامة */
.smart-dashboard-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}
.page.dashboard-page {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
.smart-dashboard-page .grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.smart-dashboard-page .card,
.smart-dashboard-page .stat-card,
.smart-dashboard-page .mini-panel {
  min-width: 0;
  transform: none !important;
  transition: none !important;
}
.smart-dashboard-page .card::after,
.smart-dashboard-page .stat-card::after,
.smart-dashboard-page .mini-panel::after {
  content: none !important;
}
.smart-dashboard-page .card:hover {
  transform: none !important;
  border-color: rgba(203, 213, 225, 0.9);
  box-shadow: 0 16px 28px rgba(17, 24, 39, 0.06);
}
.smart-dashboard-page .stat-card:hover {
  transform: none !important;
  border-color: rgba(203, 213, 225, 0.9);
  box-shadow: var(--shadow-soft);
}
.smart-dashboard-page .mini-panel:hover {
  transform: none !important;
  border-color: var(--slate-200);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.02);
}
@media (max-width: 980px) {
  .smart-dashboard-page .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .smart-dashboard-page .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}