/* ========== Reset خفيف ========== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; padding:0; }
img { max-width:100%; display:block; }

/* تخطيط عام */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans Arabic", "Noto Naskh Arabic", Arial, sans-serif;
  background:#f3f4f6;
  color:#111827;
  line-height:1.7;
}
.container { max-width: 980px; margin: 18px auto; padding-inline: clamp(12px, 4vw, 24px); }

/* عناصر عامة */
.cards{display:none}
.card {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding: clamp(14px, 4vw, 18px);
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.card + .card { margin-top:14px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 16px; min-height:44px;
  border-radius:12px; border:1px solid #d1d5db;
  background:#f9fafb; color:#111827; font-weight:700; text-decoration:none; cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .05s ease;
}
.btn:hover { background:#eef2ff; border-color:#c7d2fe; }
.btn:active { transform: translateY(1px); }
.btn-primary { background:#2563eb; color:#fff; border-color:#2563eb; }
.btn-primary:hover { background:#1d4ed8; border-color:#1d4ed8; }
.btn-outline { background:#fff; color:#1f2937; border-color:#d1d5db; }
.btn-ghost { background:#334155; color:#fff; border-color:transparent; }
.small { font-size:12px; color:#fff; }

h1,h2,h3 { line-height:1.25; margin:0 0 8px; }
h1 { font-size: clamp(22px, 6vw, 30px); }
h2 { font-size: clamp(18px, 4.8vw, 22px); }
h3 { font-size: clamp(16px, 4.2vw, 18px); }

/* ===== HERO (الرأس التعريفي) ===== */
.hero{
  background:#111827; color:#fff;
  padding: clamp(22px, 5vw, 34px) clamp(16px, 4vw, 24px);
  border-radius:16px; text-align:center; margin-bottom: clamp(16px, 4vw, 24px);
}
.hero h1{ font-weight:800; line-height:1.2; }
.hero p { margin-top:8px; color:#cbd5e1; font-size: clamp(13px, 3.6vw, 15px); }

/* ===== نماذج عامة (index.php) ===== */
.form-card { max-width: 640px; margin:auto; }
.form-group { margin-bottom: 16px; }
.form-group label { display:block; font-weight:700; margin-bottom:6px; font-size: clamp(14px, 3.5vw, 16px); }
input, select {
  width: 100%;
  padding: 12px 14px;
  font-size: clamp(14px, 4vw, 16px);
  border: 1px solid #d1d5db;
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
  background:#fff;
}
input:focus, select:focus {
  border-color:#2563eb;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}

/* Checkbox الأقسام كأزرار */
.checkbox-group{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:8px; margin-top:8px;
}
.checkbox-group label{
  display:flex; align-items:center; gap:8px;
  background:#f9fafb; border:1px solid #e5e7eb; border-radius:10px;
  padding:10px 12px; font-size: clamp(13px, 3.6vw, 15px); cursor:pointer;
  transition: background .2s, border-color .2s;
}
.checkbox-group input[type="checkbox"]{ width:18px; height:18px; accent-color:#2563eb; }
.checkbox-group label:hover{ background:#eef2ff; border-color:#c7d2fe; }

/* ===== Exam Layout (quiz.php) ===== */
.exam-shell { display:grid; grid-template-columns: 240px 1fr; gap:14px; }
.sidebar .section-nav a{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#F8FAFC; text-decoration:none; color:#0F172A;
}
.sidebar .section-nav a + a { margin-top:8px; }
.sidebar .section-nav a:hover{ background:#EEF2FF; border-color:#C7D2FE; }
.badge{ background:#EEF2FF; color:#1E3A8A; border:1px solid #C7D2FE; border-radius:9999px; padding:2px 8px; font-size:12px; }

/* رأس القسم المثبّت */
.section-header{
  position: sticky; top: 78px; z-index: 1;
  background:rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border:1px solid #E5E7EB; border-radius: 10px; padding:8px 12px; margin: 10px 0;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.section-header .title{ font-weight:800; }

/* تباين شارة القسم داخل رأس السؤال */
.section-chip{
  display:inline-block; background:#DBEAFE; color:#0B1E5B;
  border:1px solid #93C5FD; border-radius:9999px; padding:4px 10px; font-size:12px; margin-bottom:6px; font-weight:700;
}

/* ===== هيدر الامتحان ===== */
.exam-header{
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(90deg,#111827 0%,#1e293b 100%);
  color:#fff; display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 14px; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.18); margin-bottom:12px;
}
.exam-header > div:first-child{ font-weight:800; font-size:clamp(13px,4vw,15px); line-height:1.2; display:flex; align-items:center; gap:8px; }
.exam-header #langToggle,
.exam-header a.btn { background:#334155; color:#fff; border:none; border-radius:9999px; padding:8px 14px; font-weight:700; font-size:clamp(12px,3.5vw,14px); line-height:1; }
.exam-header a.btn.btn-primary{ background:#16a34a; }
.exam-header a.btn:hover{ background:#475569; }
.exam-header a.btn.btn-primary:hover{ background:#22c55e; }
.timer{ background:#0ea5e9; color:#fff; padding:4px 10px; border-radius:9999px; font-weight:700; font-size:12px; }

/* استجابة التخطيط */
@media (max-width: 920px) { .exam-shell { grid-template-columns: 1fr; } .sidebar{ order:2; } main{ order:1; } }
@media (max-width: 640px){
  .exam-header{ flex-direction:column; align-items:stretch; text-align:center; }
  .exam-header #langToggle, .exam-header a.btn { width:100%; }
}

/* ===== البطاقات والأسئلة ===== */
.question { border-radius:16px; }
.q-head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:6px; color:#6b7280; font-size:13px; }
.question-text{ font-size: clamp(16px, 4.5vw, 20px); font-weight:700; margin:10px 0; }

/* خيارات MCQ/TF */
.options{ display:grid; gap:10px; }
.options.two-cols{ grid-template-columns: 1fr 1fr; }
@media (max-width: 640px){ .options.two-cols{ grid-template-columns: 1fr; } }
.option{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; cursor:pointer;
}
.option input[type="radio"]{ width:20px; height:20px; accent-color:#2563eb; }
.option.correct{ border-color:#86efac; background:#f0fdf4; }
.option.wrong{ border-color:#fecdd3; background:#fff1f2; }
.option.locked{ opacity:.7; pointer-events:none; }

/* Fill input + button */
.fill-row{ display:flex; flex-direction:column; gap:10px; align-items:stretch; margin-top:10px; }
.fill-input{
  width:100%; padding:12px 14px; border:1px solid #d1d5db; border-radius:12px;
  font-size:clamp(14px,4vw,16px); transition: border-color .2s, box-shadow .2s; background:#fff;
}
.fill-input:focus{ outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.2); }
.fill-row .btn{ background:#2563eb; color:#fff; border:none; border-radius:12px; padding:12px 16px; font-weight:700; min-height:44px; }
.fill-row .btn:hover{ background:#1d4ed8; }
@media (min-width: 640px){ .fill-row{ flex-direction:row; align-items:center; } .fill-row .fill-input{ flex:1; } .fill-row .btn{ width:180px; } }

/* ===== جدول النتائج (results.php) + بطاقات موبايل ===== */
.table-wrap{ overflow-x:auto; }
.table{ width:100%; border-collapse:collapse; min-width:760px; }
.table th,.table td{ padding:10px; border-bottom:1px solid #e5e7eb; text-align:start; vertical-align:top; }
.table th{ background:#f3f4f6; font-weight:700; }
.row-pass{ background:#f0fdf4; }
.row-fail{ background:#fff1f2; }
.badge-mode{ padding:2px 8px; border-radius:9999px; font-size:12px; border:1px solid #ddd; white-space:nowrap; }
.badge-mode.exam{ background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
.badge-mode.practice{ background:#dbeafe; color:#1e3a8a; border-color:#bfdbfe; }

/* بطاقات موبايل للنتائج */
@media (max-width:720px){
  .table-wrap{ display:none; }
  .cards{ display:grid; gap:10px; }
  .card-row{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:12px; box-shadow:0 2px 6px rgba(0,0,0,.04); }
  .card-row.row-pass{ background:#f0fdf4; border-color:#86efac; }
  .card-row.row-fail{ background:#fff1f2; border-color:#fecdd3; }
  .row-head{ display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:6px; }
  .row-head .id{ font-weight:800; }
  .row-grid{ display:grid; grid-template-columns:1fr; gap:6px; }
  .pair{ display:flex; gap:6px; font-size:14px; }
  .pair .k{ color:#6b7280; min-width:80px; }
  .row-actions{ display:flex; gap:8px; margin-top:8px; }
  .row-actions .btn{ flex:1; min-height:40px; }
}

/* ===== أزرار أسفل الصفحة (نتائج المشاركين + التعليمات) ===== */
.footer-links{
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
  margin-top:18px; text-align:center;
}
.footer-links a{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px; min-height:44px;
  border:1px solid #D1D5DB; border-radius:12px;
  background:#FFFFFF; color:#111827; font-weight:700; text-decoration:none;
  transition:background .2s, border-color .2s, transform .05s;
}
.footer-links a:hover{ background:#F1F5F9; border-color:#CBD5E1; }
.footer-links a:active{ transform:translateY(1px); }
@media (max-width:640px){
  .footer-links{ flex-direction:column; gap:8px; }
  .footer-links a{ width:100%; justify-content:center; }
}

/* ===== Dark Mode عام ===== */
@media (prefers-color-scheme: dark){
  body{ background:#0b1020; color:#e5e7eb; }
  .card, .form-card, .question { background:#11162a; border-color:#1f2937; box-shadow:none; }
  .hero{ background:#0e1426; }
  input, select { background:#0e1426; color:#e5e7eb; border-color:#263043; }
  .option{ background:#0e1426; border-color:#263043; }
  .option:hover{ background:#0f1833; }
  .section-header{ background:#0e1426e6; border-color:#263043; }
  .sidebar .section-nav a{ background:#0E1426; border-color:#263043; color:#E5E7EB; }
  .sidebar .section-nav a:hover{ background:#111A33; }
  .table th{ background:#0e1426; }
}

/* ===== إصلاحات Dark Mode للصفحة الرئيسية فقط (body.index) ===== */
/* أضف class="index" على <body> في index.php لحصر التأثير */
@media (prefers-color-scheme: dark){
  body.index { background:#0b1020; color:#e5e7eb; }

  body.index .form-card{ background:#11162a; border-color:#263043; box-shadow:none; }
  body.index .form-group label{ color:#e5e7eb; }

  body.index input,
  body.index select,
  body.index textarea{
    background-color:#0e1426 !important;
    color:#e5e7eb !important;
    border-color:#263043 !important;
    -webkit-appearance:none; appearance:none;
  }
  body.index input:focus,
  body.index select:focus,
  body.index textarea:focus{
    border-color:#3b82f6 !important;
    box-shadow:0 0 0 3px rgba(59,130,246,.25) !important;
    outline:0;
  }
  body.index input::placeholder,
  body.index textarea::placeholder{
    color:#94a3b8 !important;
  }
  body.index input:-webkit-autofill{
    -webkit-text-fill-color:#e5e7eb !important;
    transition: background-color 9999s ease-in-out 0s;
  }

  body.index .checkbox-group label{
    background:#0e1426; border-color:#263043; color:#e5e7eb;
  }
  body.index .checkbox-group label:hover{
    background:#111a33; border-color:#334155;
  }
  body.index .checkbox-group input[type="checkbox"]{
    accent-color:#3b82f6;
  }

  body.index .btn.btn-primary{
    background:#3b82f6; border-color:#3b82f6; color:#fff;
  }
  body.index .btn.btn-primary:hover{ background:#2563eb; border-color:#2563eb; }

  body.index .footer-links a{
    background:#11162a; color:#e5e7eb; border-color:#263043;
  }
  body.index .footer-links a:hover{ background:#0f1833; border-color:#334155; }
}
/* ===== Dark Mode — results.php (table + cards) ===== */
@media (prefers-color-scheme: dark){
  /* الكارت الحاوي */
  .card.table-wrap{ background:#11162a; border-color:#263043; box-shadow:none; }

  /* الجدول */
  .table{ color:#e5e7eb; }
  .table th{
    background:#0e1426;
    color:#e5e7eb;
    border-bottom:1px solid #263043;
  }
  .table td{
    border-bottom:1px solid #263043;
  }

  /* تلوين الصفوف (ناعم ومقروء) */
  .row-pass{ background: rgba(16, 185, 129, 0.12); }   /* أخضر شفّاف */
  .row-fail{ background: rgba(239, 68, 68, 0.12); }    /* أحمر شفّاف */

  /* بادچ نوع المحاولة */
  .badge-mode{ border-color:#334155; }
  .badge-mode.practice{
    background: rgba(59,130,246,.18);   /* أزرق ناعم */
    color:#c7d2fe; border-color:#1e40af;
  }
  .badge-mode.exam{
    background: rgba(239,68,68,.18);    /* أحمر ناعم */
    color:#fecaca; border-color:#7f1d1d;
  }

  /* أزرار الإجراءات داخل الجدول */
  .actions .btn{ 
    background:#11162a; color:#e5e7eb; border-color:#263043;
  }
  .actions .btn:hover{ background:#0f1833; border-color:#334155; }
  .actions .btn.btn-primary{
    background:#3b82f6; border-color:#3b82f6; color:#fff;
  }
  .actions .btn.btn-primary:hover{
    background:#2563eb; border-color:#2563eb;
  }

  /* بطاقات الموبايل */
  .card-row{ background:#11162a; border-color:#263043; }
  .card-row.row-pass{ background: rgba(16,185,129,.12); border-color:#14532d; }
  .card-row.row-fail{ background: rgba(239,68,68,.12);  border-color:#7f1d1d; }
  .row-head .id{ color:#e5e7eb; }
  .pair .k{ color:#94a3b8; }
  .row-actions .btn{ background:#11162a; color:#e5e7eb; border-color:#263043; }
  .row-actions .btn:hover{ background:#0f1833; border-color:#334155; }
  .row-actions .btn.btn-primary{ background:#3b82f6; border-color:#3b82f6; }
  .row-actions .btn.btn-primary:hover{ background:#2563eb; border-color:#2563eb; }
}
/* ===== وضوح النص داخل زر عرض التقرير في النتائج (الديسكتوب فقط) ===== */
.actions .btn.btn-primary span {
  color: #fff !important;         /* نص أبيض واضح */
  font-weight: 700;
}

/* Hover يكون بنفس التباين */
.actions .btn.btn-primary:hover span {
  color: #fff !important;
}