@font-face{
  font-family:"Readex Pro";
  src:url("../fonts/ReadexPro.woff2") format("woff2"), url("../fonts/ReadexPro.ttf") format("truetype");
  font-weight:200 700; /* خط متغيّر الوزن */
  font-display:swap;
}
@font-face{
  font-family:"Amiri Quran";
  src:url("../fonts/AmiriQuran.woff2") format("woff2"), url("../fonts/AmiriQuran.ttf") format("truetype");
  font-weight:400;
  font-display:swap;
}
:root{
  --primary:#0E6E5C; --primary-dark:#0B4D40; --bg:#FAF8F4; --surface:#fff;
  --text:#1F2A28; --accent:#C9A227; --border:#cfd8d5; --danger:#a12020;
}
:root.dark{ --primary:#4FD1B5; --primary-dark:#0B3B33; --bg:#0E1513; --surface:#16201D; --text:#E8EDEB; --border:#2a3a36; }
@media (prefers-color-scheme: dark){
  :root:not(.light){ --primary:#4FD1B5; --primary-dark:#0B3B33; --bg:#0E1513; --surface:#16201D; --text:#E8EDEB; --border:#2a3a36; }
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:"Readex Pro","Segoe UI",Tahoma,sans-serif; background:var(--bg); color:var(--text); line-height:1.7; font-size:18px; }
a{ color:var(--primary); }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.skip-link{ position:absolute; inset-inline-start:-9999px; top:0; background:var(--primary-dark); color:#fff; padding:.6rem 1rem; z-index:1000; }
.skip-link:focus{ inset-inline-start:0; }
header{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; background:var(--primary); color:#fff; padding:.75rem 1rem; }
header a{ color:#fff; }
.brand a{ font-size:1.4rem; font-weight:bold; text-decoration:none; }
.lang-switch{ display:flex; gap:.4rem; align-items:center; }
.lang-switch label{ margin:0; color:#fff; }
.lang-switch select{ width:auto; min-width:120px; }
.user-area{ display:flex; gap:.75rem; align-items:center; }
main{ max-width:820px; margin:1.5rem auto; padding:0 1rem; }
h1{ color:var(--primary); }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.25rem; max-width:480px; }
.field{ margin-bottom:1rem; }
label{ display:block; font-weight:600; margin-bottom:.35rem; }
input,select,button{ font:inherit; }
input,select{ width:100%; padding:.6rem .7rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); min-height:48px; }
.password-wrap{ display:flex; gap:.5rem; }
.password-wrap input{ flex:1; }
button{ min-height:48px; padding:.55rem 1.1rem; border-radius:8px; border:2px solid var(--primary); background:var(--surface); color:var(--primary); cursor:pointer; font-weight:600; }
.btn-primary, button[type=submit]{ background:var(--primary); color:#fff; border-color:var(--primary); }
.alert{ background:#fdecec; color:var(--danger); border:1px solid #f0a8a8; padding:.75rem; border-radius:8px; }
.roles .role{ display:inline-block; background:var(--accent); color:#1f1500; border-radius:999px; padding:.1rem .6rem; margin-inline-end:.3rem; font-size:.9rem; }
section{ margin:1.5rem 0; padding-top:.75rem; border-top:1px solid var(--border); }
footer{ text-align:center; padding:1rem; color:#777; }
dialog.confirm-dialog{ border:2px solid var(--primary); border-radius:12px; padding:1.25rem; max-width:90vw; color:var(--text); background:var(--surface); }
dialog::backdrop{ background:rgba(0,0,0,.5); }
.dialog-actions{ margin-top:1rem; display:flex; gap:.75rem; }
@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important; } }

/* البحث والنتائج */
.search-form{ max-width:100%; margin-bottom:1rem; }
.htmx-indicator{ opacity:0; color:var(--primary); font-weight:600; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator{ opacity:1; }
.results-count{ font-weight:700; }
details.teacher-card{ border:1px solid var(--border); border-radius:10px; margin:.6rem 0; background:var(--surface); }
details.teacher-card > summary{ padding:.8rem 1rem; cursor:pointer; font-weight:600; min-height:48px; }
details.teacher-card[open] > summary{ border-bottom:1px solid var(--border); }
.teacher-details{ padding:1rem; }
.btn-link{ display:inline-block; background:var(--primary); color:#fff; padding:.55rem 1.1rem; border-radius:8px; text-decoration:none; min-height:48px; font-weight:600; }

/* لوحة المعلم: بطاقات الطلبات */
.request-card{ border:1px solid var(--border); border-radius:10px; margin:.6rem 0; padding:1rem; background:var(--surface); }
.request-card h3{ margin:0 0 .4rem; color:var(--primary); }
.request-actions{ display:flex; gap:.75rem; flex-wrap:wrap; }
.request-actions form{ margin:0; }

/* الحصص والغرفة */
.session-card{ border:1px solid var(--border); border-radius:10px; margin:.6rem 0; padding:1rem; background:var(--surface); }
.session-card h3{ margin:0 0 .4rem; color:var(--primary); }
#room button{ margin-inline-end:.5rem; margin-bottom:.5rem; }
.session-state{ font-weight:700; }
#chat-log{ border:1px solid var(--border); border-radius:8px; padding:.5rem .75rem; min-height:80px; max-height:240px; overflow-y:auto; background:var(--surface); margin-bottom:.6rem; }
#chat-log p{ margin:.25rem 0; }
#chat-form{ display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap; }
#chat-form input{ flex:1; min-width:200px; }
#comm button{ margin-inline-end:.5rem; }
#page-text{ font-family:"Amiri Quran","Readex Pro",serif; font-size:1.7rem; line-height:2.8; padding:.75rem 1rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); margin:.6rem 0; min-height:2.5rem; }
#page-text:empty{ display:none; }
#page-text .surah-head{ font-size:1.05rem; color:var(--primary); text-align:center; margin:.8rem 0 .4rem; }
#page-text .ayah{ border-radius:6px; padding:0 .15rem; }
/* تظليل الآية المؤشَّر عليها بثلاث إشارات: خلفية + شريط جانبيّ + سماكة (لا لونَ وحده) */
#page-text .ayah.cursor{ background:var(--accent); color:#1f1500; outline:3px solid var(--primary-dark); border-inline-start:6px solid var(--primary-dark); padding-inline-start:.35rem; font-weight:700; }
#page-text .hidden-note{ font-size:1rem; color:#777; margin:0; }
/* وضع المصحف (الافتراضي): طبقة قارئ الشاشة الإملائيّة مخفيّةٌ بصريًّا، وصفحة QPC مرئيّة */
#page-text .sr-ayat{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
#page-text .ayah-num{ color:var(--primary); }
/* صفحة مصحف المدينة المطابقة (QPC V2): خطّ الصفحة + أسطرٌ مُسوّاةٌ من الحافة للحافة */
#page-text .qpc-page{ font-family:'qpcpage', "Amiri Quran", serif; font-size:1.9rem; }
#page-text .qpc-line{ display:flex; direction:rtl; justify-content:space-between; align-items:center; line-height:2.4; }
#page-text .qpc-line.qpc-surah{ justify-content:center; font-family:"Amiri Quran", serif; color:var(--primary); border:1px solid var(--border); border-radius:8px; margin:.5rem 0; padding:.3rem; font-size:1.15rem; }
#page-text .qpc-line.qpc-basmala{ justify-content:center; font-family:"Amiri Quran", serif; font-size:1.4rem; }
#page-text .qpc-w{ white-space:nowrap; }
#page-text .qpc-w.cursor{ background:var(--accent); color:#1f1500; border-radius:6px; padding:0 .1rem; }
/* وضع الأسطر (للكفيف): الإملائيّ مرئيٌّ آيةً لكل سطر */
#page-text.layout-lines .sr-ayat{ position:static; width:auto; height:auto; clip:auto; }
#page-text.layout-lines .ayah{ display:block; white-space:nowrap; overflow-x:auto; padding:.4rem .15rem; border-bottom:1px solid var(--border); }
.attribution{ font-size:.8rem; color:#777; }
.fav-btn{ font-size:.95rem; }
.dash-links{ list-style:none; padding:0; margin:.5rem 0; }
.dash-links li{ margin:.5rem 0; }
.month-nav{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:.5rem 0; }
.month-nav a{ display:inline-block; border:2px solid var(--primary); border-radius:8px; padding:.35rem .8rem; text-decoration:none; min-height:42px; }
.month-nav a[aria-current="true"]{ background:var(--primary); color:#fff; }
table{ border-collapse:collapse; width:100%; background:var(--surface); }
th, td{ border:1px solid var(--border); padding:.5rem .7rem; text-align:start; }
th{ background:var(--primary-dark); color:#fff; }

/* التخطيط الجانبي الموحّد (نمط راكان): قائمة جانبية + منطقة الصفحة */
.layout-sidebar{ display:flex; gap:1.25rem; align-items:flex-start; max-width:1200px; margin:0 auto; padding:0 1rem; }
.page-area{ flex:1; min-width:0; }
.page-area main{ max-width:none; margin:1rem 0; padding:0; }
.side-nav{ flex:0 0 250px; margin-top:1rem; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1rem; }
.side-nav .brand{ margin:0 0 .75rem; }
.side-nav .brand a{ color:var(--primary); font-size:1.25rem; font-weight:bold; text-decoration:none; }
.side-nav ul{ list-style:none; margin:0; padding:0; }
.side-nav li{ margin:.15rem 0; }
.side-nav a{ display:block; padding:.45rem .6rem; border-radius:8px; text-decoration:none; }
.side-nav a:hover, .side-nav a:focus-visible{ background:var(--bg); }
.side-nav details > summary{ padding:.45rem .6rem; cursor:pointer; font-weight:700; color:var(--primary); min-height:40px; }
.side-nav details ul{ padding-inline-start:.75rem; }
.side-search label{ font-size:.9rem; }
.side-search input{ margin:.25rem 0; }
.side-search button{ min-height:40px; padding:.3rem .8rem; }
.month-nav{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.month-nav a{ display:inline-block; border:1px solid var(--border); border-radius:8px; padding:.35rem .7rem; text-decoration:none; }
.month-nav a[aria-current="true"]{ background:var(--primary); color:#fff; }
.side-bottom{ margin-top:1rem; padding-top:.75rem; border-top:1px solid var(--border); }
.lang-buttons{ display:flex; gap:.5rem; flex-wrap:wrap; }
.lang-buttons button{ min-height:42px; padding:.35rem .8rem; }
.topbar{ display:flex; gap:1rem; align-items:center; justify-content:space-between; background:var(--primary); color:#fff; padding:.6rem 1rem; border-radius:0 0 12px 12px; }
.topbar button{ background:var(--surface); }
/* جرس الإشعارات + عدّاده */
.topbar-bell{ display:inline-flex; align-items:center; gap:.3rem; color:#fff; text-decoration:none; padding:.35rem .6rem; border-radius:8px; min-height:42px; }
.topbar-bell:hover, .topbar-bell:focus-visible{ background:rgba(255,255,255,.18); }
.notif-count{ background:var(--accent); color:#1f1500; border-radius:999px; padding:0 .45rem; font-weight:700; font-size:.85rem; min-width:1.5em; text-align:center; }
/* تبويبات وقائمة صفحة الإشعارات */
.notif-tabs{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0; }
.notif-tabs a{ display:inline-block; border:1px solid var(--border); border-radius:999px; padding:.4rem .85rem; text-decoration:none; min-height:42px; }
.notif-tabs a[aria-current="page"]{ background:var(--primary); color:#fff; border-color:var(--primary); }
.notif-list{ list-style:none; padding:0; margin:0; }
.notif-item{ border:1px solid var(--border); border-radius:12px; padding:.7rem 1rem; margin-bottom:.7rem; background:var(--surface); }
.notif-item.is-new{ border-inline-start:4px solid var(--accent); }
.notif-title{ font-size:1.05rem; margin:.1rem 0; }
.notif-body{ margin:.2rem 0; }
.notif-meta{ font-size:.85rem; color:#777; margin:.2rem 0 0; }
.badge-new{ background:var(--accent); color:#1f1500; border-radius:999px; padding:0 .5rem; font-size:.75rem; font-weight:700; margin-inline-start:.4rem; }
/* الجداول على الهاتف: تمرير أفقيّ احتياطًا، وبطاقات مكدّسة دون 860px (data-label من sahab.js) */
.table-scroll{ overflow-x:auto; }
@media (max-width: 860px){
  table.card-table, table.card-table tbody{ display:block; width:100%; border:none; background:none; }
  table.card-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  table.card-table tr{ display:block; border:1px solid var(--border); border-radius:12px; margin-bottom:.8rem; background:var(--surface); }
  table.card-table td{ display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; border:none; border-bottom:1px solid var(--border); padding:.5rem .8rem; }
  table.card-table tr > td:last-child{ border-bottom:none; }
  table.card-table td[data-label]::before{ content:attr(data-label) ":"; font-weight:700; color:var(--primary); flex:0 0 auto; }
}

/* روابط تقليب الصفحات: مساحة لمسٍ مريحة */
.pager a{ display:inline-block; padding:.5rem .9rem; border:1px solid var(--border); border-radius:8px; text-decoration:none; margin-inline:.15rem; }

/* زرّ العودة إلى أعلى الصفحة */
#back-to-top{ position:fixed; bottom:1rem; inset-inline-start:50%; transform:translateX(-50%); z-index:140; border-radius:999px; min-width:48px; box-shadow:0 4px 14px rgba(0,0,0,.3); }
html[dir="rtl"] #back-to-top{ transform:translateX(50%); }

/* درج القائمة على الهاتف (نمط راكان): القائمة تنزلق من جانب البداية، زرّ ☰ يفتحها وطبقة تعتيم خلفها */
.nav-toggle{ display:none; font-size:1.3rem; min-height:42px; min-width:48px; padding:.3rem .7rem; }
.sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:150; }
.sidebar-overlay.active{ display:block; }
@media (max-width: 860px){
  .nav-toggle{ display:block; }
  .side-nav{ position:fixed; top:0; bottom:0; margin:0; width:min(85vw, 320px); height:100dvh; overflow-y:auto; border-radius:0; z-index:200; transition:transform .25s ease; }
  html[dir="rtl"] .side-nav{ right:0; transform:translateX(100%); }
  html[dir="ltr"] .side-nav{ left:0; transform:translateX(-100%); }
  .side-nav.open{ transform:none; }
  /* الشريط العلوي لاصق: زرّا القائمة والوضع المظلم في المتناول دائمًا */
  .topbar{ position:sticky; top:0; z-index:120; border-radius:0; }
}
/* مناطق الأمان للهواتف ذات الكاميرا المغروسة (مع viewport-fit=cover) */
@supports (padding: env(safe-area-inset-top)){
  @media (max-width: 860px){
    .side-nav{ padding-top:calc(1rem + env(safe-area-inset-top)); padding-bottom:calc(1rem + env(safe-area-inset-bottom)); }
    .topbar{ padding-top:calc(.6rem + env(safe-area-inset-top)); }
  }
}
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#teacher-mushaf button{ margin-inline-end:.4rem; margin-bottom:.3rem; }
fieldset{ border:1px solid var(--border); border-radius:8px; padding:.5rem 1rem; }
.radio-row{ display:block; font-weight:400; margin:.3rem 0; }
.radio-row input{ width:auto; min-height:auto; margin-inline-end:.4rem; }
textarea{ width:100%; padding:.6rem .7rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; }

/* لوحة سحاب الداخلية (إدارة الأشخاص) */
.inline-form{ display:inline-block; margin-inline-end:.5rem; }
button.danger{ border-color:var(--danger); color:var(--danger); }
table{ border-collapse:collapse; width:100%; margin:.6rem 0; }
th,td{ border:1px solid var(--border); padding:.5rem .6rem; text-align:start; }
thead th{ background:var(--primary); color:#fff; }