/* =========================================================
   🌟 Global Modern RTL Styles for "Mish" School Portal
   - تصميم حديث ومتجاوب
   - دعم الوضع الليلي عبر [data-theme="dark"]
   - متوافق مع الهيدر الجديد والصفحات (home, tasks_list, task, forms)
   ========================================================= */

/* متغيرات الألوان والخلفيات */
:root{
  --ink:#0c142a;            /* النص الأساسي */
  --muted:#6d7a99;          /* نص ثانوي */
  --bg:#f6f8ff;             /* خلفية عامة */
  --card:#ffffff;           /* خلفية البطاقات */
  --brand:#1565c0;          /* لون العلامة */
  --brand-2:#2d6cdf;        /* تدرّج ثانٍ */
  --ok:#10b981;             /* نجاح */
  --warn:#e8a317;           /* تحذير */
  --bad:#ef4444;            /* خطأ */
  --border:#e3e9ff;         /* حدود ناعمة */
  --shadow:0 10px 28px rgba(25,42,89,.08);
  --header-grad: linear-gradient(90deg, #1565c0, #2d6cdf);
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --focus:0 0 0 3px rgba(45,108,223,.25);
}

[data-theme="dark"]{
  --ink:#eaf0ff;
  --muted:#b8c1d9;
  --bg:#0b1224;
  --card:#0f1933;
  --border:#1e2a4d;
  --shadow:0 10px 28px rgba(0,0,0,.35);
  --header-grad: linear-gradient(90deg, #0d2a66, #173a88);
}

/* Reset بسيط + RTL */
*,*::before,*::after{ box-sizing: border-box }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.7;
}

/* اختيار النص */
::selection{ background:rgba(45,108,223,.18) }

/* حاوية عامة */
.site-container{ max-width:1200px; margin:0 auto; padding:0 16px }

/* روابط */
a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }

/* عناوين */
h1,h2,h3,h4{ margin:0 0 .6rem 0; line-height:1.3 }
.kids-title{
  font-weight:900;
  font-size:20px;
  color:#0d47a1;
}
[data-theme="dark"] .kids-title{ color:#93b2ff }

/* نص مساعد + شارات */
.help{ color:var(--muted); font-size:.95rem }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.45); color:var(--ink); font-weight:800;
}
[data-theme="dark"] .badge{ background:rgba(255,255,255,.06) }

/* بطاقات عامة */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:16px;
  margin:12px 0;
}

/* شبكات وبلاطات */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
}
.grid-2{ display:grid; grid-template-columns:1.2fr .8fr; gap:16px }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr } }

/* صفوف النموذج */
.row{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; align-items:start }
@media (max-width:720px){ .row{ grid-template-columns: 1fr } }

/* أزرار */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border:0; border-radius:12px; padding:10px 14px;
  font-weight:800; cursor:pointer; text-decoration:none;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#fff; box-shadow:0 4px 12px rgba(45,108,223,.25);
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover{ transform: translateY(-1px); filter:brightness(1.02) }
.btn:active{ transform: translateY(0) }

.btn.ghost{
  background:transparent; color:var(--brand);
  border:1px solid var(--border); box-shadow:none;
}
.btn.ghost:hover{ background:rgba(45,108,223,.08) }

.btn.small{ padding:7px 10px; border-radius:10px; font-size:.92rem }
.btn.danger{
  background:linear-gradient(180deg, #e11d48,#be123c);
  box-shadow:0 4px 12px rgba(190,18,60,.25);
}

/* تجميعة أزرار */
.actions{ display:flex; gap:8px; flex-wrap:wrap }

/* نماذج: مدخلات وتسميات */
.label{ font-weight:800; color:#0d47a1; margin-bottom:6px; display:block }
[data-theme="dark"] .label{ color:#a9c4ff }

.input, .textarea, select.input{
  width:100%; background:var(--card); color:var(--ink);
  border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; outline:none; transition:border .12s, box-shadow .12s;
}
.input:focus, .textarea:focus, select.input:focus{ border-color:var(--brand-2); box-shadow: var(--focus) }
.textarea{ min-height:120px; resize:vertical }

/* قائمة تحقق للصفوف/الشعب */
.checklist .grade-badge{
  background:rgba(45,108,223,.06);
  border-color:var(--border)!important; border-radius:999px;
}
.checklist input{ transform: translateY(1px) }

/* شريط التحديثات */
.updates{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.u-item{
  background:#fff; color:#0d47a1; border:1px solid #bbdefb;
  padding:6px 10px; border-radius:999px; font-weight:800;
}
[data-theme="dark"] .u-item{ background:#0f1933; color:#93b2ff; border-color:#1e2a4d }

/* شريط التقدّم */
.progress{ height:10px; background:var(--bg); border:1px solid var(--border); border-radius:999px; overflow:hidden }
.progress > span{ display:block; height:100%; background:var(--ok) }

/* جداول */
.table-responsive{ width:100%; overflow:auto; border-radius:14px; border:1px solid var(--border); background:var(--card) }
.table{
  width:100%; border-collapse:separate; border-spacing:0; min-width:780px;
}
.table th, .table td{ padding:12px 14px; border-bottom:1px solid var(--border) }
.table thead th{
  background:linear-gradient(180deg, #eef3ff, #e8efff);
  color:#0d3c8a; font-weight:900; text-align:right; position:sticky; top:0; z-index:1;
}
[data-theme="dark"] .table thead th{ background:linear-gradient(180deg, #101d3c, #0f1a33); color:#a9c4ff }
.table tbody tr:hover{ background:rgba(45,108,223,.05) }
[data-theme="dark"] .table tbody tr:hover{ background:rgba(45,108,223,.08) }

/* بطاقات الصفحة الرئيسية للصفوف/الشعب */
.stage-title{
  font-size:24px; color:#0d47a1; text-align:center; margin-bottom:20px;
  border-bottom:2px dashed #64b5f6; padding-bottom:8px;
}
[data-theme="dark"] .stage-title{ color:#93b2ff; border-color:#254a99 }

.class-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:15px; box-shadow:var(--shadow);
}
.class-title{ font-size:20px; color:#1565c0; text-align:center; margin-bottom:12px }
[data-theme="dark"] .class-title{ color:#93b2ff }

.sections-grid{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center }
.section-card{
  flex:1 1 120px; background:#bbdefb; border-radius:12px;
  padding:12px; text-align:center; color:#0d47a1; font-weight:800;
  box-shadow:0 3px 8px rgba(0,0,0,.1); transition: transform .15s, background .15s, color .15s;
}
.section-card:hover{ background:#64b5f6; color:#fff; transform: translateY(-2px) }
.section-card i{ font-size:22px; display:block; margin-bottom:6px }

/* بطاقات مواد المعلّمين */
.teacher-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow);
  overflow:hidden; transition: transform .15s ease, box-shadow .15s ease;
}
.teacher-card:hover{ transform: translateY(-3px); box-shadow:0 16px 36px rgba(45,108,223,.18) }

/* تذييل بسيط (اختياري) */
.app-footer{
  margin-top:24px; padding:18px; text-align:center;
  color:var(--muted);
}

/* شريط الأخبار الحديث (بديل للماركيه) */
.news-ticker{
  position:relative; overflow:hidden; border-radius:14px;
  background:linear-gradient(90deg,#ffeb3b,#ff9800);
  border:3px solid #f57c00; color:#1b1300;
}
.news-track{
  display:flex; gap:40px; padding:10px 16px; animation:ticker 30s linear infinite;
}
.news-item{ font-weight:800 }
@keyframes ticker{
  0%{ transform: translateX(0) }
  100%{ transform: translateX(-50%) }
}

/* تنبيهات ملونة سريعة */
.alert{
  border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:rgba(255,255,255,.6)
}
.alert.ok{ border-color:rgba(16,185,129,.35); background:rgba(16,185,129,.08); color:#065f46 }
.alert.warn{ border-color:rgba(232,163,23,.35); background:rgba(232,163,23,.08); color:#7a4b00 }
.alert.bad{ border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.08); color:#7f1d1d }
[data-theme="dark"] .alert{ background:rgba(255,255,255,.04) }

/* عناصر إدخال الملف (شكل ألطف) */
input[type="file"].input{
  padding:10px; cursor:pointer;
}
input[type="checkbox"], input[type="radio"]{ accent-color:#2d6cdf }

/* عناصر الهيدر (إذا أزلت CSS المضمّن من header.php) */
.app-header{ background:var(--header-grad); color:#fff; box-shadow:0 2px 16px rgba(0,0,0,.15) }
.app-header__row{ display:flex; align-items:center; gap:16px; min-height:76px }
.brand{ display:flex; align-items:center; gap:12px; min-width:0 }
.brand__logo{ height:52px; flex:0 0 auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.15)) }
.brand__txt{ display:flex; flex-direction:column; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.brand__title{ font-size:18px; font-weight:900 }
.brand__sub{ font-size:13px; opacity:.95 }

.nav-wrap{ flex:1 1 auto; min-width:0 }
.nav-strip{
  display:flex; gap:8px; align-items:center; overflow-x:auto; white-space:nowrap; scrollbar-width:none; padding:8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.nav-strip::-webkit-scrollbar{ display:none }
.nav-link{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.14); color:#fff; text-decoration:none;
  padding:9px 14px; border-radius:999px; font-weight:800;
  border:1px solid rgba(255,255,255,.18);
  transition:background .15s, transform .15s;
}
.nav-link:hover{ background:rgba(255,255,255,.22); transform:translateY(-1px) }
.nav-link.is-active{ background:#fff; color:#0d3c8a }

.user{ display:flex; align-items:center; gap:10px }
.user__pill{ background:rgba(255,255,255,.18); padding:6px 10px; border-radius:999px; font-weight:800; color:#fff }
.icon-btn{ background:none; border:0; color:#fff; font-size:18px; cursor:pointer; padding:6px 8px }
.btn-danger{ background:#dc3545; color:#fff; border:0; border-radius:10px; padding:9px 12px; font-weight:800 }

/* محتوى */
main.site-container{ padding-top:14px; padding-bottom:28px }

/* أدوات مساعدة سريعة */
.text-center{ text-align:center }
.m-0{ margin:0 } .mt-8{ margin-top:8px } .mt-12{ margin-top:12px } .mt-16{ margin-top:16px } .mb-12{ margin-bottom:12px }
.p-0{ padding:0 } .p-8{ padding:8px } .p-12{ padding:12px } .p-16{ padding:16px }
.round{ border-radius:999px }
.hidden{ display:none !important }
/* ===== إصلاح تغطية الهيدر والطبقات على صفحة المختبر ===== */

/* 1) اجعل محتوى الصفحة التفاعلي أعلى كل العناصر */
#labRoot,
#labRoot .tabs,
#labRoot .section,
#labRoot .card,
#labRoot .btn {
  position: relative !important;
  z-index: 2147483600 !important; /* أعلى من أي هيدر أو خلفية */
}

/* 2) أي عناصر كبيرة من الهيدر/الخلفيات لا يسمح لها بأخذ النقرات فوق المختبر */
.app-header,
.app-header::before,
.app-header::after,
[class*="overlay"],
[class*="mask"],
[class*="curve"],
[class*="bg"],
.hero,
.hero::before,
.hero::after {
  pointer-events: none !important;
}

/* لكن الروابط/الأزرار داخل الهيدر تظل قابلة للنقر داخل الهيدر نفسه */
.app-header * { pointer-events: auto; }

/* 3) إن كانت هناك طبقة fixed تمتد على الشاشة، أهبطها تحت المختبر */
.app-header,
[class*="overlay"],
[class*="bg"] {
  z-index: 10 !important;
}

/* 4) توحيد شكل البطاقات مع تصميم موقعك */
#labRoot .card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  background: var(--card) !important;
  padding: 16px !important;
  margin: 12px 0 !important;
}

/* 5) تحسين أزرار المختبر لتطابق أزرار الموقع */
#labRoot .btn {
  background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 12px rgba(45,108,223,.25) !important;
}
#labRoot .btn.ghost {
  background: transparent !important;
  color: var(--brand) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
/* ==== تحسين توزيع وأبعاد البطاقات ==== */

/* وسّع الحاوية قليلًا على الشاشات الكبيرة */
@media (min-width: 1200px){
  .container{ max-width: 1280px; }
}
@media (min-width: 1400px){
  .container{ max-width: 1360px; }
}

/* اجعل شبكة البطاقات متمركزة بدل الالتصاق باليمين */
.section > .grid{
  /* وسط الأعمدة داخل الشبكة */
  justify-content: center;           /* مهم لعدم الانزياح لليمين في RTL */
  align-items: stretch;
  /* قواعد افتراضية للشاشات الصغيرة والمتوسطة */
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
}

/* شاشتان متوسطتان: عمودان عريضـان */
@media (min-width: 900px){
  .section > .grid{
    grid-template-columns: repeat(2, minmax(380px, 1fr));
  }
}

/* شاشات كبيرة: ثلاثة أعمدة مريحة */
@media (min-width: 1200px){
  .section > .grid{
    grid-template-columns: repeat(3, minmax(380px, 1fr));
  }
}

/* ثبّت ارتفاع البطاقات وامنحها مظهرًا متماسكًا */
.card{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card .tool{ margin-top: 8px; }
.box{ border-radius: 16px; }

/* تحسين أزرار الصف الكامل داخل البطاقات */
.btn.row{ min-height: 44px; font-weight: 800; }

/* تباعد ألطف تحت العناوين داخل البطاقات */
.card h3{ margin-bottom: 10px; }
.small{ line-height: 1.7; }
.grid.grid-2{ grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
@media (min-width: 1200px){ .grid.grid-2{ grid-template-columns: repeat(2, minmax(480px, 1fr)); } }
/* ===== شبكة المهام وبطاقاتها (نسخة محسّنة) ===== */

/* متغيرات مرنة للعرض */
:root{
  --content-max: 1320px;        /* حد أقصى مريح لعرض المحتوى */
  --card-min: 360px;            /* أقل عرض مريح للبطاقة */
  --gap: 18px;                  /* المسافة بين البطاقات */
}

/* وسط الشبكة داخل الصفحة وامنحها عرضًا أقصى */
.tasks-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--gap);
  max-width: var(--content-max);
  margin-inline: auto;          /* توسيط */
  align-items: stretch;         /* كل البطاقات تتمدد عموديًا */
  justify-items: stretch;       /* البطاقات تملأ عمودها */
}

/* البطاقة: تمدد لارتفاع كامل العمود */
.task-card{
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--card);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;       /* مهم لتثبيت الأزرار بأسفل البطاقة */
  min-width: 0;                 /* منع تمدد العناوين في الشبكات */
}

.task-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(25,42,89,.12);
  border-color:color-mix(in oklab, var(--border), #9db5ff 35%);
}
[data-theme="dark"] .task-card:hover{ box-shadow:0 20px 50px rgba(0,0,0,.6) }

/* صورة/رأس البطاقة */
.task-media{ position:relative; background:linear-gradient(135deg,#e8f0ff,#eef6ff) }
[data-theme="dark"] .task-media{ background:linear-gradient(135deg,#121b33,#0e162b) }
.task-thumb{ width:100%; height:160px; object-fit:cover; display:block } /* ارتفاع أكبر */
.task-thumb.placeholder{ width:100%; height:160px }

/* جسم البطاقة يتمدد، والأزرار تبقى بأسفل */
.task-body{
  padding:12px 12px 8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex: 1 1 auto;               /* يملأ الفراغ العمودي */
}

/* عناوين أنيقة + قصّ سطرين بدون كسر التصميم */
.task-title{
  margin:0;
  font-size:18px;
  font-weight:900;
  color:var(--ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ميتا ومعلومات */
.task-meta{ display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:14px }
.task-meta .sep{ opacity:.45 }
.task-info{ display:flex; flex-wrap:wrap; gap:8px; color:color-mix(in oklab, var(--ink) 82%, var(--muted)) }

/* شريط التقدم */
.progress{ position:relative; height:8px; background:color-mix(in oklab, var(--card) 40%, #dfe7ff); border:1px solid var(--border); border-radius:999px; overflow:hidden }
.progress>span{ display:block; height:100%; background:linear-gradient(90deg,var(--grad1),var(--grad2)) }
.progress .sr{ position:absolute; inset:0; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* أشرطة الحالة (الـ pills) */
.pill{
  position:absolute; top:10px; right:10px; margin-left:8px;
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  font-weight:800; font-size:13px; background:#fff; color:#0d2a66; border:1px solid #eaefff;
  box-shadow:0 6px 18px rgba(25,42,89,.07);
}
.pill + .pill{ right:auto; left:10px }
[data-theme="dark"] .pill{ background:#0f1730; color:#cde2ff; border-color:#223056 }

/* أزرار البطاقة مثبتة أسفلها دائمًا */
.task-actions{
  display:flex;
  gap:8px;
  padding:12px;
  margin-top:auto;              /* يدفع الأزرار لأسفل */
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, transparent), var(--card));
}

/* ===== تحسينات الاستجابة والتمركز الحقيقي ===== */

/* على الشاشات الصغيرة: بطاقة بعرض شبه كامل */
@media (max-width: 580px){
  :root{ --card-min: 300px; }
  .tasks-grid{ padding-inline: 10px; }
}

/* متوسطة: عمودان مريحان */
@media (min-width: 900px){
  :root{ --card-min: 380px; }
}

/* كبيرة: ثلاثة أعمدة */
@media (min-width: 1200px){
  .tasks-grid{
    grid-template-columns: repeat(3, minmax(var(--card-min), 1fr));
  }
}

/* ضخمة: أربعة أعمدة */
@media (min-width: 1600px){
  .tasks-grid{
    grid-template-columns: repeat(4, minmax(var(--card-min), 1fr));
  }
}

/* ضمان التوسيط في RTL إذا كان هناك فراغ جانبي */
.tasks-grid{
  justify-content: center;      /* يمنع الانجذاب لليمين في RTL عند وجود فراغ */
}

/* لمنع تمدد شديد للبطاقات داخل أعمدة قليلة */
.page-wrap{ display:block }
.probot-launcher,
.probot{
  z-index: 2147483602 !important;
}