/* =========================================================
   🌟 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 }
/* ===== Notice (Glass/Neo friendly for dark & light) ===== */

/* الحاوية الخارجية تبقى شفافة؛ التأثير كله داخل الـ__inner */
.notice-top{
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: saturate(1.2) blur(8px);
}

/* شريط زجاجي بنفس لغة البطاقات، مع لمسة تدرّج من ألوان البراند */
.notice-top__inner{
  display:flex; align-items:center; gap:.75rem; padding:.65rem 1rem;

  /* خلفية: طبقة زجاجية + لمسة جرادينت خفيفة من البراند */
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--brand) 14%, transparent),
      color-mix(in oklab, var(--brand-2) 14%, transparent)
    ),
    var(--glass);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);

  /* نص متباين مع الثيمين */
  color: var(--ink);
  font-size:14px; line-height:1.6;
}

/* شريط تمييز رفيع على الطرف ينسجم مع الألوان */
.notice-top__inner::before{
  content:""; pointer-events:none;
  position:absolute; inset:0; border-radius: inherit; padding:1px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.35;
}

/* الأيقونة وكلمات التنبيه */
.notice-top i{ font-size:18px; opacity:.95 }
.notice-top b{
  color: color-mix(in oklab, var(--brand-2) 70%, var(--ink) 30%);
  font-weight:900;
}
.notice-top u{ text-underline-offset:2px }

/* زر صغير متناسق */
.btn.btn-xs{ padding:6px 10px; border-radius:10px; font-size:12px; line-height:1; }

/* زر “اذهب إلى المهمة”: افتراضيًا حدود فقط، ويتلوّن عند التحويم/التركيز */
.notice-top .go-task{
  background: transparent;
  color: var(--ink);
  border:1px solid color-mix(in oklab, var(--brand) 60%, var(--brand-2) 40%);
  box-shadow: none;
}
.notice-top .go-task:hover,
.notice-top .go-task:focus{
  background: var(--accent);
  color: #0b1020; /* نفس تباين btn-primary لديك */
  border-color: transparent;
  box-shadow: 0 10px 26px color-mix(in oklab, var(--brand-2) 28%, transparent);
}

/* نسخة أنحف لو تحب ارتفاعًا أقل */
.notice-top--compact .notice-top__inner{ padding:.5rem .8rem; font-size:13px }