/* ===========================
   ParentEye — Elegant Vibrant Theme
   - RTL-ready
   - Multi theme via [data-theme]
   =========================== */

/* قاعدة متغيّرات — افتراض: Light (Classic) */
:root {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --text: #0e1320;
  --muted: #6b7280;
  --border: #e6e9f0;

  --primary: #2563eb;     /* أزرق راقٍ */
  --primary-600: #1e4fd6;

  --success: #16a34a;
  --danger: #dc2626;
  --warning: #f59e0b;

  --accent: #14b8a6;      /* أخضر مزرق ناعم */

  --row-alt: #f2f5fb;

  --pill-bg: #eef2ff;
  --pill-text: #3730a3;

  --radius: 16px;
  --shadow-sm: 0 6px 18px rgba(17, 24, 39, .06);
  --shadow-md: 0 12px 28px rgba(17, 24, 39, .10);
  --shadow-lg: 0 18px 48px rgba(17, 24, 39, .14);
}

/* ثيم 2: Deep Navy (داكن أنيق) */
:root[data-theme="navy"] {
  --bg: #0b1020;
  --surface: #11162a;
  --text: #e7e9ef;
  --muted: #9aa3b6;
  --border: #1f2740;

  --primary: #60a5fa;
  --primary-600: #3b82f6;

  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;

  --accent: #67e8f9;

  --row-alt: #0f1430;

  --pill-bg: #1c2549;
  --pill-text: #c7d2fe;

  --shadow-sm: 0 6px 18px rgba(0, 0, 0, .28);
  --shadow-md: 0 12px 28px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .45);
}

/* ثيم 3: Emerald (فاتح هادئ غني) */
:root[data-theme="emerald"] {
  --bg: #f5fbf8;
  --surface: #ffffff;
  --text: #0d1410;
  --muted: #5e6b64;
  --border: #dfe7e2;

  --primary: #059669;
  --primary-600: #047857;

  --success: #16a34a;
  --danger: #dc2626;
  --warning: #f59e0b;

  --accent: #22d3ee;

  --row-alt: #eef9f4;

  --pill-bg: #d1fae5;
  --pill-text: #065f46;
}

/* ثيم 4: Sunset (دافئ راقٍ) */
:root[data-theme="sunset"] {
  --bg: #fff7f5;
  --surface: #ffffff;
  --text: #1a1412;
  --muted: #786964;
  --border: #f0e3df;

  --primary: #f97316;
  --primary-600: #ea580c;

  --success: #16a34a;
  --danger: #dc2626;
  --warning: #eab308;

  --accent: #a78bfa;

  --row-alt: #fff1ec;

  --pill-bg: #ffedd5;
  --pill-text: #7c2d12;
}

/* تباين أعلى عند الطلب */
:root[data-contrast="high"] {
  --border: color-mix(in srgb, var(--text) 14%, transparent);
}

/* أساسيات */
*{ box-sizing:border-box }
html[dir="rtl"] body{ direction:rtl }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:
    radial-gradient(900px 420px at 100% -10%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 60%),
    radial-gradient(700px 380px at -10% 120%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    var(--bg);
  color: var(--text);
}
a{ color: var(--primary-600); text-decoration: none }
a:hover{ text-decoration: underline }

/* حاوية */
.container{ max-width: 1160px; margin: 18px auto; padding: 0 14px }

/* شريط علوي */
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 10px 14px; border-radius: calc(var(--radius) - 2px);
  box-shadow: var(--shadow-sm);
}
.brand{
  font-weight:900; letter-spacing:.3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip:text; background-clip:text; color: transparent;
}

/* جزء تبديل الثيم */
.theme-switch{ display:flex; align-items:center; gap:8px }
.theme-select, .contrast-toggle{
  appearance:none; padding:10px 12px; border:1px solid var(--border); border-radius:12px;
  background: var(--surface); color: var(--text);
}
.contrast-toggle{ cursor:pointer }

/* البطاقات */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* أزرار */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:0; cursor:pointer;
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  color:#fff; font-weight:800; text-decoration:none;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 30%, transparent);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 36%, transparent) }
.btn:active{ transform: translateY(0) }
.btn.muted{
  background: linear-gradient(180deg, #eef2f7, #e6ebf3); color:#0f172a;
  box-shadow: 0 6px 16px rgba(15,23,42,.10);
}
.btn.warn{ background: linear-gradient(180deg, var(--danger), color-mix(in srgb, var(--danger) 86%, #8b0000)) }
.btn.success{ background: linear-gradient(180deg, var(--success), color-mix(in srgb, var(--success) 86%, #064e3b)) }

/* حقول */
.input{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; outline:0;
  color:var(--text); background:#fff;
  transition: box-shadow .15s ease, border-color .15s ease;
}
[data-theme="navy"] .input{ background:#0e1430 }
.input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
.label{ font-size:12px; color:var(--muted); margin:6px 0 4px }

/* شبكات */
.grid{ display:grid; gap:12px }
.grid-3{ grid-template-columns: repeat(3, 1fr) }
@media (max-width: 920px){ .grid-3{ grid-template-columns: 1fr } }

/* تنبيهات */
.alert{ padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--muted) }
.alert.success{ background:#e8fff5; color:#065f46; border-color:#b7f7d8 }
.alert.warn{ background:#ffefef; color:#7f1d1d; border-color:#ffc9c9 }

/* الجداول (طلاب/QR/الإعدادات) */
.table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px }
.table thead th{
  padding:12px 10px; text-align:start; font-weight:900;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 10%, #fff), #ffffff);
  color: var(--text);
  border-bottom:1px solid var(--border);
}
[data-theme="navy"] .table thead th{
  background: linear-gradient(180deg, #101735, #0f1530);
  color: #e8ebf6;
}
.table tbody td{ padding:12px 10px; border-bottom:1px solid var(--border) }
.table tbody tr:nth-child(even){ background: var(--row-alt) }
.table tbody tr{
  transition: background .12s ease, transform .06s ease;
}
.table tbody tr:hover{
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%);
}

/* شارات */
.pill{
  padding:4px 10px; border-radius:999px; font-size:12px; font-weight:800;
  background: var(--pill-bg); color: var(--pill-text);
}
.pill.gray{ background: #e5e7eb; color:#111827 }
.pill.green{ background: #d1fae5; color:#065f46 }
.pill.red{ background: #fee2e2; color:#7f1d1d }

/* ملاحظات */
.note{ color:var(--muted); font-size:12px }

/* صفحة الدخول */
.login-page{
  display:grid; place-items:center; min-height:100vh;
  background:
    radial-gradient(700px 420px at 85% -5%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%),
    radial-gradient(620px 380px at 10% 110%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--bg);
}
.login-card{
  width:min(520px, 92vw);
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  padding:20px;
  box-shadow: var(--shadow-lg);
}

/* شريط فرعي */
.subnav{ display:flex; align-items:center; gap:8px; margin-bottom:12px }
.subnav .spacer{ flex:1 }

/* صفوف/أدوات صغيرة */
.row{ display:flex; align-items:center; gap:10px }
.icon{ display:inline-flex; vertical-align:middle }

/* تركيز واضح للوصولية */
:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; border-radius:8px }
/* ===== شعار في الشريط العلوي ===== */
.brand .logo { height:28px; width:auto; vertical-align:middle; }

/* ===== قسم البطل (الواجهة) — مرن مع الشاشات الصغيرة ===== */
.hero { background: linear-gradient(180deg, var(--card), color-mix(in oklab, var(--card), #fff 12%)); }
.hero-img { display:block; max-width:100%; height:auto; border-radius:16px; }
@media (max-width: 640px){
  .hero { flex-direction: column-reverse; text-align:center; }
}



/* ======== Mobile Responsiveness Upgrade (ParentEye) ======== */

/* قاعدة عامة: لفّ العناصر على الهواتف */
@media (max-width: 768px) {
  .container { padding: 8px; }

  /* شريط التنقّل */
  .nav { display:flex; flex-wrap:wrap; gap:8px }
  .nav .brand { flex: 1 1 100%; font-weight: 800; }
  .nav > div { flex: 1 1 100%; display:flex; flex-wrap:wrap; gap:6px }

  /* الأزرار وحقول الإدخال أكبر لمسية */
  .btn { padding: 10px 12px; line-height: 1.2; }
  .input { height:auto; min-height: 40px; font-size: 15px; }

  /* الشبكات تتحوّل لعمود واحد */
  .grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .grid.grid-2, .grid.grid-3, .grid.grid-4 { grid-template-columns: 1fr !important; }

  /* صفوف مرنة تلفّ */
  .row { flex-wrap: wrap; gap: 8px }

  /* الجداول: تمكين التمرير العرضي الآمن بدون كسر الـHTML */
  table.table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; }
  .table thead th, .table tbody td { white-space: nowrap; }

  /* درج (نموذج) إدارة الطلاب ليملأ الشاشة على الجوال */
  .drawer { inset-inline-end: -100%; width: 100%; max-width: 100%; border-radius: 0; }
  .drawer.open { inset-inline-end: 0; }

  /* قارئ الكاميرا */
  #qr-reader { width: 100% !important; max-width: 100%; }
  #qr-reader video { width: 100% !important; height: auto !important; object-fit: cover; }

  /* بطاقات QR في صفحة الطباعة: قلّل الأعمدة للجوال */
  .cards { --cols: 2 !important; }
}

@media (max-width: 480px) {
  .brand { font-size: 18px }
  h1, h2 { font-size: 18px }
  h3 { font-size: 16px }
  .cards { --cols: 1 !important; }
  .card-qr .hdr { font-size: 14px; padding: 6px 8px; }
  .badge { font-size: 10px; }
}