/* ===================================================================
   نظام متابعة الصلاة — مركز حكايتي
   نظام التصميم: ألوان الهوية، RTL، أزرار كبيرة، متجاوب مع اللوحي والهاتف
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

:root{
  /* ألوان هوية حكايتي */
  --gold:#E8B21E;  --gold-d:#C89506;  --gold-l:#FCF3D8;
  --purple:#7B57A3; --purple-l:#F1ECF7;
  --teal:#4FC0D0;   --teal-l:#E5F7FA;
  --green:#7CC242;  --green-l:#EDF8E2;
  --yellow:#F3CE3C;
  --orange:#F0942E; --orange-l:#FDF0E2;
  --red:#E05252;    --red-l:#FDECEC;

  --ink:#2C3A47; --ink-2:#55636F; --muted:#8A98A5;
  --bg:#F5F7FA; --card:#FFFFFF; --line:#E4E9EF;

  --r:14px; --r-lg:22px;
  --sh:0 2px 10px rgba(44,58,71,.07);
  --sh-lg:0 12px 34px rgba(44,58,71,.13);
  --nav:270px;

  /* مساحات الشاشة الآمنة: النتوء أعلى الآيفون وشريط المنزل أسفله */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --topbar-h:58px;
  --tap:44px;            /* أصغر مساحة لمس مريحة للإصبع */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* شبكة أمان ضد أي تجاوز أفقي — clip لا يُنشئ حاوية تمرير فلا يُعطّل position:sticky */
body{overflow-x:clip}
/* لا تتجاوز أي وسيطة عرض حاويتها مهما كان مقاسها الأصلي */
img,svg,video,canvas,iframe{max-width:100%}
body{
  font-family:'Tajawal',-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink);
  direction:rtl; text-align:right;
  font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--purple);text-decoration:none}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* ========== شاشة الدخول ========== */
.login-wrap{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(140deg,#7B57A3 0%,#4FC0D0 45%,#7CC242 100%)}
.login-card{background:#fff;border-radius:26px;box-shadow:var(--sh-lg);
  padding:44px 38px;width:100%;max-width:430px;text-align:center}
.login-card img{width:210px;margin-bottom:6px}
.login-card h1{font-size:23px;margin-bottom:4px}
.login-card p.sub{color:var(--muted);margin-bottom:26px;font-size:15px}
/* ========== الهيكل العام ========== */
.layout{display:flex;min-height:100vh;min-height:100dvh}
.sidebar{
  width:var(--nav);flex-shrink:0;background:#fff;border-left:1px solid var(--line);
  display:flex;flex-direction:column;position:fixed;inset:0 0 0 auto;height:100vh;height:100dvh;z-index:60;
}
.sidebar-logo{padding:20px 22px 14px;border-bottom:1px solid var(--line)}
.sidebar-logo img{width:100%;max-width:180px}
.nav{flex:1;overflow-y:auto;padding:12px 12px 20px}
.nav a{
  display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:var(--r);
  color:var(--ink-2);font-weight:500;font-size:16px;margin-bottom:4px;transition:.15s;
}
.nav a svg{width:23px;height:23px;flex-shrink:0;stroke-width:1.9}
.nav a:hover{background:var(--bg);color:var(--ink)}
.nav a.active{background:var(--purple);color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(123,87,163,.32)}
.nav-sep{margin:14px 15px 8px;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.4px}
.sidebar-user{padding:14px 18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:11px}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--purple-l);color:var(--purple);
  display:grid;place-items:center;font-weight:800;flex-shrink:0}
.sidebar-user .nm{font-weight:700;font-size:14.5px;line-height:1.3}
.sidebar-user .rl{font-size:12.5px;color:var(--muted)}

.main{flex:1;margin-right:var(--nav);min-width:0;display:flex;flex-direction:column}
.topbar{display:none;align-items:center;gap:12px;background:#fff;padding:10px 14px;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.topbar img{height:38px}
.burger{background:none;border:none;padding:0;cursor:pointer;border-radius:12px;
  width:var(--tap);height:var(--tap);display:grid;place-items:center;color:var(--ink);flex-shrink:0}
.burger svg{width:26px;height:26px;stroke-width:2.1}
.burger:hover{background:var(--bg)}
.burger:active{background:var(--line)}
.content{padding:28px 32px 60px;flex:1}

/* ========== العناوين ========== */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:24px}
.page-head h1{font-size:28px;font-weight:800}
.page-head .sub{color:var(--muted);font-size:15px;margin-top:2px}

/* ========== البطاقات ========== */
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);padding:24px;margin-bottom:20px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:18px}
.card-h h2{font-size:19px;font-weight:800}

/* ========== الأزرار ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border:none;border-radius:var(--r);background:var(--gold);color:#3A2E00;
  font-weight:800;font-size:16px;cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--gold-d);color:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn svg{width:20px;height:20px;stroke-width:2}
.btn-purple{background:var(--purple);color:#fff}      .btn-purple:hover{background:#674790;color:#fff}
.btn-green{background:var(--green);color:#fff}        .btn-green:hover{background:#68a936;color:#fff}
.btn-teal{background:var(--teal);color:#fff}          .btn-teal:hover{background:#3aa9b9;color:#fff}
.btn-red{background:var(--red);color:#fff}            .btn-red:hover{background:#c73f3f;color:#fff}
.btn-ghost{background:var(--bg);color:var(--ink-2)}   .btn-ghost:hover{background:var(--line);color:var(--ink)}
.btn-line{background:#fff;border:1.5px solid var(--line);color:var(--ink-2)}
.btn-line:hover{background:var(--bg);color:var(--ink)}
.btn-sm{padding:7px 13px;font-size:14px;border-radius:10px;gap:6px}
.btn-sm svg{width:16px;height:16px}
.btn-xl{padding:22px 40px;font-size:23px;border-radius:20px}
.btn-xl svg{width:28px;height:28px}
.btn-block{width:100%}

/* ========== النماذج ========== */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-weight:700;font-size:14.5px;color:var(--ink-2)}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  padding:12px 15px;border:1.5px solid var(--line);border-radius:var(--r);
  background:#fff;transition:.15s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-l)}
.field textarea{resize:vertical;min-height:88px}
.field .hint{font-size:12.5px;color:var(--muted)}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;
  padding-top:20px;border-top:1px solid var(--line)}

.search-box{position:relative;flex:1;min-width:230px}
.search-box input{padding-right:46px;font-size:17px;padding-top:14px;padding-bottom:14px}
.search-box svg{position:absolute;right:15px;top:50%;transform:translateY(-50%);
  width:21px;height:21px;color:var(--muted);pointer-events:none}

/* ========== الجداول ========== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  border-radius:var(--r);border:1px solid var(--line);
  /* ظلال حافّة تظهر فقط عند وجود محتوى مخفي خارج الإطار */
  background:
    linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left center/26px 100% no-repeat local,
    linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right center/26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(44,58,71,.16),transparent) left center/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(44,58,71,.16),transparent) right center/12px 100% no-repeat scroll,
    #fff}
table{width:100%;border-collapse:collapse;background:#fff;min-width:640px}
th{background:var(--bg);padding:14px 15px;text-align:right;font-weight:800;
  font-size:14px;color:var(--ink-2);white-space:nowrap;border-bottom:1px solid var(--line)}
td{padding:14px 15px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FAFBFC}
.t-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ========== الإحصائيات ========== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:18px;margin-bottom:24px}
.stat{background:#fff;border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh);
  display:flex;align-items:center;gap:16px}
.stat-ic{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;flex-shrink:0}
.stat-ic svg{width:28px;height:28px;stroke-width:2}
.stat .v{font-size:31px;font-weight:900;line-height:1.15}
.stat .l{font-size:14px;color:var(--muted);font-weight:500}
.ic-purple{background:var(--purple-l);color:var(--purple)}
.ic-teal{background:var(--teal-l);color:var(--teal)}
.ic-green{background:var(--green-l);color:var(--green)}
.ic-gold{background:var(--gold-l);color:var(--gold-d)}
.ic-orange{background:var(--orange-l);color:var(--orange)}
.ic-red{background:var(--red-l);color:var(--red)}

/* ========== الشارات ========== */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;
  font-size:13px;font-weight:700;white-space:nowrap}
.b-purple{background:var(--purple-l);color:var(--purple)}
.b-teal{background:var(--teal-l);color:#2E93A2}
.b-green{background:var(--green-l);color:#5B9430}
.b-gold{background:var(--gold-l);color:var(--gold-d)}
.b-orange{background:var(--orange-l);color:#C97416}
.b-red{background:var(--red-l);color:var(--red)}
.b-gray{background:var(--bg);color:var(--muted)}
.code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-weight:700;
  font-size:13.5px;letter-spacing:.3px;direction:ltr;display:inline-block}

/* صف داخل خلية جدول: أيقونة/حرف أول بجانب نص */
.kid-row{display:flex;align-items:center;gap:12px}

/* ========== التنبيهات ========== */
.alert{padding:14px 18px;border-radius:var(--r);margin-bottom:18px;font-weight:600;
  display:flex;align-items:center;gap:11px;font-size:15px}
.alert svg{width:21px;height:21px;flex-shrink:0}
.a-ok{background:var(--green-l);color:#4E8226}
.a-err{background:var(--red-l);color:#B53E3E}
.a-warn{background:var(--gold-l);color:#8A6A00}
.a-info{background:var(--teal-l);color:#2E8A99}

/* ========== الإشعار العائم ========== */
#toasts{position:fixed;bottom:calc(22px + var(--safe-b));left:calc(22px + var(--safe-l));
  z-index:900;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--ink);color:#fff;padding:14px 20px;border-radius:var(--r);
  box-shadow:var(--sh-lg);font-weight:600;animation:up .25s;max-width:min(420px,92vw)}
.toast.ok{background:var(--green)} .toast.err{background:var(--red)} .toast.warn{background:var(--gold);color:#3A2E00}
@keyframes up{from{opacity:0;transform:translateY(14px)}}

/* ========== النافذة المنبثقة ========== */
.modal-bg{position:fixed;inset:0;background:rgba(30,40,50,.55);z-index:800;
  display:grid;place-items:center;padding:18px;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.modal{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  width:100%;max-width:560px;max-height:92vh;max-height:92dvh;overflow-y:auto;
  overscroll-behavior:contain;animation:pop .2s}
@keyframes pop{from{opacity:0;transform:scale(.95)}}
.modal-h{padding:20px 24px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal-h h3{font-size:19px;font-weight:800}
.modal-b{padding:24px}
.modal-f{padding:18px 24px;border-top:1px solid var(--line);display:flex;gap:11px;justify-content:flex-start}
.x{background:none;border:none;cursor:pointer;color:var(--muted);padding:6px;border-radius:9px;line-height:0}
.x:hover{background:var(--bg);color:var(--ink)}

/* ========== الحالة الفارغة والتحميل ========== */
.empty{text-align:center;padding:56px 22px;color:var(--muted)}
.empty svg{width:64px;height:64px;margin-bottom:14px;opacity:.35;stroke-width:1.5}
.empty h3{font-size:18px;color:var(--ink-2);margin-bottom:6px}
.spinner{width:34px;height:34px;border:3.5px solid var(--line);border-top-color:var(--purple);
  border-radius:50%;animation:spin .7s linear infinite;margin:44px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ========== الرسم البياني ========== */
/* الرسم داخل إطار يمرّر أفقياً: الأعمدة تبقى مقروءة بدل أن تُعصر إلى خيوط */
.chart-wrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;padding-bottom:2px}
.chart{display:flex;align-items:flex-end;gap:6px;height:170px;padding-top:16px}
.chart .bar{flex:1;background:linear-gradient(180deg,var(--teal),var(--purple));
  border-radius:7px 7px 0 0;min-height:4px;position:relative;transition:.2s;cursor:default}
.chart .bar:hover{filter:brightness(1.12)}
.chart .bar span{position:absolute;top:-21px;right:50%;transform:translateX(50%);
  font-size:11.5px;font-weight:800;color:var(--ink-2)}
.chart-x{display:flex;gap:6px;margin-top:8px}
.chart-x div{flex:1;text-align:center;font-size:10.5px;color:var(--muted);direction:ltr}

.pbar{height:9px;background:var(--bg);border-radius:999px;overflow:hidden;min-width:70px}
.pbar i{display:block;height:100%;border-radius:999px;background:var(--teal)}

.card-actions{display:flex;flex-direction:column;gap:11px;min-width:215px}

/* ========== ماسح QR ========== */
.scan-stage{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start}
.scan-view{position:relative;background:#101820;border-radius:var(--r-lg);
  overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center}
.scan-view video{width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;inset:14%;border-radius:22px;pointer-events:none;
  box-shadow:0 0 0 100vmax rgba(10,18,26,.42)}
.scan-frame i{position:absolute;width:42px;height:42px;border:5px solid var(--gold)}
.scan-frame i:nth-child(1){top:-3px;right:-3px;border-left:0;border-bottom:0;border-radius:0 18px 0 0}
.scan-frame i:nth-child(2){top:-3px;left:-3px;border-right:0;border-bottom:0;border-radius:18px 0 0 0}
.scan-frame i:nth-child(3){bottom:-3px;right:-3px;border-left:0;border-top:0;border-radius:0 0 18px 0}
.scan-frame i:nth-child(4){bottom:-3px;left:-3px;border-right:0;border-top:0;border-radius:0 0 0 18px}
.scan-off{text-align:center;color:#fff;padding:34px}
.scan-off svg{width:66px;height:66px;opacity:.6;margin-bottom:14px}

.prayer-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,152px),1fr));gap:11px}
.prayer-btn{padding:17px 12px;border:2.5px solid var(--line);border-radius:var(--r);
  background:#fff;font-weight:800;font-size:16.5px;cursor:pointer;transition:.15s;text-align:center}
.prayer-btn:hover{border-color:var(--purple);background:var(--purple-l)}
.prayer-btn.on{border-color:var(--purple);background:var(--purple);color:#fff;
  box-shadow:0 5px 16px rgba(123,87,163,.3)}
.prayer-btn small{display:block;font-size:12.5px;font-weight:600;opacity:.75;margin-top:3px}
.prayer-btn.done{border-color:var(--green);background:var(--green-l);color:#4E8226}
.prayer-btn.done::after{content:' ✓'}

.confirm-hero{text-align:center;padding:30px 20px}
.confirm-hero .tick{width:92px;height:92px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;margin:0 auto 18px;animation:pop .3s}
.confirm-hero .tick svg{width:52px;height:52px;stroke-width:3}
.confirm-hero .nm{font-size:27px;font-weight:900}
.confirm-hero .ac{font-size:19px;color:var(--purple);font-weight:800;margin-top:5px}
.confirm-hero .pt{font-size:36px;font-weight:900;color:var(--green);margin:13px 0 3px}
.confirm-hero .bal{font-size:17px;color:var(--ink-2);font-weight:700}

.tabs{display:flex;gap:7px;border-bottom:2px solid var(--line);margin-bottom:20px;
  overflow-x:auto;padding-bottom:1px}
.tabs button{background:none;border:none;padding:11px 18px;font-weight:700;font-size:15.5px;
  color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;
  margin-bottom:-2px;white-space:nowrap}
.tabs button.on{color:var(--purple);border-bottom-color:var(--purple)}

.filters{display:flex;gap:11px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px}
.filters .field{min-width:145px}

/* ===================================================================
   تجاوب: الحاسوب كما هو، واللوحي والهاتف يعيدان ترتيب الواجهة
   نقاط التوقّف:  ≤1100 لوحي عريض · ≤980 لوحي/هاتف (قائمة منسدلة)
                 ≤700 هاتف عريض · ≤560 هاتف · ≤360 هاتف ضيّق
   =================================================================== */

/* ---------- اللوحي العريض ---------- */
@media(max-width:1100px){
  .scan-stage{grid-template-columns:1fr}
  .content{padding:24px 22px 56px}
  .card{padding:20px}
  .stats{gap:14px}
}

/* ---------- اللوحي والهاتف: القائمة تصبح درجاً ينزلق ---------- */
@media(max-width:980px){
  :root{--nav:0px}
  /* الدرج المنزاح خارج الشاشة عنصر ثابت (fixed) لا يقصّه overflow الأب،
     لذا نمنع التمرير الأفقي على مستوى النافذة نفسها */
  html{overflow-x:hidden}

  /* الدرج مخفي بالكامل (visibility) لا مزاحاً فقط — حتى لا يولّد تمريراً أفقياً */
  .sidebar{
    width:min(86vw,320px);
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .26s cubic-bezier(.4,0,.2,1),visibility .26s;
    box-shadow:var(--sh-lg);
    padding-top:var(--safe-t);
    padding-bottom:var(--safe-b);
    z-index:70;
  }
  .sidebar.open{transform:translateX(0);visibility:visible}
  .main{margin-right:0}
  .topbar{display:flex}
  .content{padding:18px max(16px,var(--safe-r)) calc(56px + var(--safe-b)) max(16px,var(--safe-l))}
  .page-head h1{font-size:23px}
  .page-head{margin-bottom:18px}

  .backdrop{position:fixed;inset:0;background:rgba(30,40,50,.5);z-index:65;
    opacity:0;transition:opacity .26s;touch-action:none;overscroll-behavior:none;
    -webkit-tap-highlight-color:transparent}
  .backdrop.on{opacity:1}
  /* تجميد صفحة الخلفية أثناء فتح الدرج أو أي نافذة منبثقة */
  body.no-scroll{overflow:hidden}

  /* رأس الدرج: الشعار وزر الإغلاق — يظهر على الهاتف فقط */
  .drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .sidebar-logo{padding:14px 16px;display:flex;align-items:center}
  .sidebar-logo .logo-img,.sidebar-logo .logo-draw{max-width:150px}
  .drawer-x{width:var(--tap);height:var(--tap);flex-shrink:0}
  .drawer-x svg{width:24px;height:24px}

  /* عناصر القائمة أكبر لتُلمس بالإبهام بثقة */
  .nav{padding:10px 10px calc(30px + var(--safe-b));overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    /* تلاشٍ خفيف أسفل القائمة يدلّ على وجود أقسام أخرى تحتها */
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)}
  .nav a{padding:14px 15px;min-height:54px;font-size:16.5px;margin-bottom:5px}
  .nav a svg{width:24px;height:24px}
  .nav-sep{margin:14px 15px 7px}
  .sidebar-user{padding:13px 16px calc(13px + var(--safe-b))}
}

/* شاشة قصيرة (هاتف أفقي أو جهاز صغير): عناصر أقرب لتظهر أقسام أكثر دفعة واحدة */
@media(max-width:980px) and (max-height:730px){
  .sidebar-logo{padding:9px 14px}
  .sidebar-logo .logo-img,.sidebar-logo .logo-draw{max-width:122px}
  .nav a{min-height:46px;padding:10px 14px;font-size:15.5px;margin-bottom:2px}
  .nav a svg{width:22px;height:22px}
  .nav-sep{margin:10px 15px 4px;font-size:11.5px}
  .sidebar-user{padding:10px 14px calc(10px + var(--safe-b))}
  .sidebar-user .avatar{width:34px;height:34px}
}

/* ---------- الرأس العلوي للهاتف: ثابت أعلى الشاشة ---------- */
@media(max-width:980px){
  .topbar{
    gap:8px;
    padding:6px max(10px,var(--safe-r)) 6px max(10px,var(--safe-l));
    padding-top:calc(6px + var(--safe-t));
    min-height:calc(var(--topbar-h) + var(--safe-t));
    box-shadow:0 1px 0 var(--line);
  }
  .topbar .brand{display:flex;align-items:center;flex-shrink:0}
  .topbar .logo-img,.topbar .logo-draw{max-width:104px}
  .topbar .logo-word{font-size:22px}
  /* عنوان الصفحة الحالية: يبقى ظاهراً بعد تمرير المحتوى بعيداً */
  .topbar .pgtitle{flex:1;min-width:0;font-weight:800;font-size:15px;color:var(--ink-2);
    text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline-start:4px}
}

/* ---------- هاتف عريض: النماذج والفلاتر عمود واحد ---------- */
@media(max-width:700px){
  .form-grid{grid-template-columns:1fr;gap:15px}
  .field.full{grid-column:auto}

  /* كل فلتر في سطر كامل بعرض الشاشة بدل حقول ضيّقة متراصّة */
  .filters{flex-direction:column;align-items:stretch;gap:12px}
  .filters .field,.filters .search-box{min-width:0;width:100%;flex:none}
  .filters .btn{width:100%}

  .form-actions{gap:10px}
  .form-actions .btn{flex:1 1 100%}

  /* حقول الإدخال ١٦ بكسل على الأقل: أقل من ذلك يُقرّب سفاري الصفحة تلقائياً */
  .field input,.field select,.field textarea,.search-box input{font-size:16px}
  .field input,.field select{min-height:48px}
  .field label{font-size:15px}

  .tabs{gap:4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain}
  .tabs button{padding:11px 14px;font-size:15px;scroll-snap-align:start}

  .chart .bar{min-width:15px}
  .chart-x div{min-width:15px}
  .card-actions{min-width:0}
}

/* ---------- الهاتف ---------- */
@media(max-width:560px){
  .content{padding:14px max(14px,var(--safe-r)) calc(48px + var(--safe-b)) max(14px,var(--safe-l))}
  .card{padding:16px;border-radius:18px;margin-bottom:16px}
  .card-h{margin-bottom:14px} .card-h h2{font-size:17.5px}
  .page-head h1{font-size:22px} .page-head .sub{font-size:14px}
  .page-head .btn{flex:1 1 100%}

  .stats{grid-template-columns:1fr 1fr;gap:11px;margin-bottom:18px}
  .stat{padding:15px 10px;flex-direction:column;text-align:center;gap:9px}
  .stat-ic{width:44px;height:44px} .stat-ic svg{width:23px;height:23px}
  .stat .v{font-size:24px} .stat .l{font-size:12.5px;line-height:1.45}

  .chart{height:135px;gap:4px} .chart .bar{border-radius:5px 5px 0 0;min-width:14px}
  .chart .bar span{font-size:10px;top:-17px}
  .chart-x{gap:4px} .chart-x div{font-size:9.5px;min-width:14px}

  .btn-xl{padding:17px 20px;font-size:18.5px}
  .btn-xl svg{width:24px;height:24px}
  .prayer-pick{grid-template-columns:1fr 1fr;gap:9px}
  .prayer-btn{padding:15px 8px;font-size:15.5px}

  .alert{padding:12px 14px;font-size:14px;align-items:flex-start}
  .alert svg{margin-top:2px}
  .empty{padding:40px 16px} .empty svg{width:52px;height:52px}
  .confirm-hero{padding:22px 10px}
  .confirm-hero .nm{font-size:23px} .confirm-hero .pt{font-size:31px}
  .confirm-hero .tick{width:78px;height:78px} .confirm-hero .tick svg{width:44px;height:44px}

  #toasts{left:12px;right:12px;bottom:calc(14px + var(--safe-b));align-items:stretch}
  .toast{max-width:none}

  .login-card{padding:30px 20px;border-radius:22px}
  .login-card h1{font-size:20px}
  .login-card .logo-img{max-width:170px}
  .login-card .logo-draw{max-width:200px}
  .login-card .logo-word{font-size:36px}
}

/* ---------- هاتف ضيّق (320 بكسل) ---------- */
@media(max-width:360px){
  .content{padding:12px 12px calc(44px + var(--safe-b))}
  .card{padding:13px;border-radius:16px}
  .page-head h1{font-size:20px}
  .stats{gap:9px}
  .stat{padding:13px 7px} .stat .v{font-size:21px} .stat .l{font-size:11.5px}
  /* أسماء الصلوات قصيرة: عمودان يبقيان القائمة قصيرة داخل النافذة */
  .prayer-pick{grid-template-columns:1fr 1fr;gap:8px}
  .prayer-btn{padding:13px 6px;font-size:14.5px}
  .prayer-btn small{font-size:11.5px}
  .btn{padding:11px 16px;font-size:15px}
  .btn-xl{padding:15px 14px;font-size:17px}
  .topbar .logo-img,.topbar .logo-draw{max-width:86px}
  .topbar .pgtitle{font-size:14px}
}

/* ===================================================================
   الجداول على الهاتف: صفوف تتحوّل إلى بطاقات مقروءة (class="cardify")
   والجداول الرقمية العريضة تبقى بتمرير أفقي داخل إطارها وحده
   =================================================================== */
@media(max-width:560px){
  table.cardify{min-width:0;width:100%;display:block;background:none}
  table.cardify thead{display:none}
  table.cardify tbody,table.cardify tr,table.cardify td{display:block;width:auto}
  table.cardify tr{
    background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:4px 13px;margin-bottom:10px;box-shadow:0 1px 3px rgba(44,58,71,.05)}
  table.cardify tr:last-child{margin-bottom:0}
  table.cardify tbody tr:hover{background:#fff}
  table.cardify td{
    border-bottom:1px solid var(--line);padding:9px 0;font-size:14.5px;
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:4px 12px;min-height:40px;
    /* قيمة طويلة بلا مسافات (قائمة صلاحيات مثلاً) تنكسر بدل أن تمتدّ خارج الشاشة */
    min-width:0;overflow-wrap:anywhere}
  table.cardify tr td:last-child{border-bottom:none}
  /* اسم العمود يُطبع أمام القيمة بدل رأس الجدول الغائب */
  table.cardify td[data-l]::before{
    content:attr(data-l);color:var(--muted);font-size:12.5px;font-weight:700;
    flex:0 0 auto;max-width:45%}
  /* خلية بلا عنوان (أزرار الإجراءات) تأخذ السطر كاملاً */
  table.cardify td:not([data-l]){justify-content:flex-start}
  table.cardify td .t-actions{flex:1;gap:8px}
  table.cardify td .t-actions .btn{flex:1;justify-content:center;min-height:42px}
  /* البطاقة كلها قابلة للنقر حين كان الصف كذلك */
  table.cardify tr[data-pick],table.cardify tr[onclick]{cursor:pointer}

  /* جدول مختصر بلا رأس (قوائم الترتيب): الصف يلتفّ في سطرين بدل التمرير */
  table.rank{min-width:0;display:block;background:none}
  table.rank tbody{display:block}
  table.rank tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    padding:11px 2px;border-bottom:1px solid var(--line)}
  table.rank tr:last-child{border-bottom:none}
  table.rank tbody tr:hover{background:none}
  table.rank td{display:block;border:none;padding:0;width:auto!important;font-size:14px}

  /* إطار البطاقات لا يحتاج حدود الجدول ولا التمرير */
  .table-wrap:has(table.cardify),.table-wrap:has(table.rank){
    overflow:visible;border:none;border-radius:0;background:none}
}

/* ===================================================================
   النوافذ المنبثقة على الهاتف: لوح سفلي بعرض الشاشة وأزرار تحت الإبهام
   =================================================================== */
@media(max-width:640px){
  .modal-bg{padding:0;display:grid;grid-template-rows:1fr auto;align-items:end}
  .modal{
    max-width:100%;width:100%;
    max-height:calc(100dvh - 36px);
    border-radius:22px 22px 0 0;
    animation:sheet .24s;
    display:flex;flex-direction:column;overflow:hidden}
  @keyframes sheet{from{transform:translateY(24px);opacity:.4}}
  .modal-h{padding:16px 18px;position:sticky;top:0;background:#fff;z-index:2;flex-shrink:0}
  .modal-h h3{font-size:17.5px}
  .modal-h .x{width:var(--tap);height:var(--tap);display:grid;place-items:center}
  .modal-b{padding:18px;overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0}
  .modal-f{
    padding:14px 18px calc(14px + var(--safe-b));flex-wrap:wrap;gap:9px;
    background:#fff;flex-shrink:0}
  .modal-f .btn{flex:1 1 100%!important;min-height:50px}
  /* النافذة العريضة (wide) لا تتجاوز الشاشة */
  .modal[style]{max-width:100%!important}
}

/* ===================================================================
   اللمس: مساحات لمس مريحة، وإلغاء ما يعتمد على مرور الفأرة
   =================================================================== */
@media(hover:none){
  .btn{min-height:var(--tap)}
  .btn-sm{min-height:38px;padding:8px 13px}
  .btn:hover{transform:none}
  .btn:active{transform:scale(.98)}
  .nav a:hover{background:transparent;color:var(--ink-2)}
  .nav a.active:hover{background:var(--purple);color:#fff}
  tbody tr:hover{background:inherit}
  .prayer-btn:hover{border-color:var(--line);background:#fff}
  .prayer-btn.on:hover{border-color:var(--purple);background:var(--purple);color:#fff}
  .prayer-btn.done:hover{border-color:var(--green);background:var(--green-l)}
  .prayer-btn:active{transform:scale(.97)}
  table.rep th:hover{color:var(--ink-2)}
  table.heat td.hc:hover{outline:none}
  .x{width:var(--tap);height:var(--tap);display:grid;place-items:center}
  a,button{-webkit-tap-highlight-color:rgba(123,87,163,.12)}
}

/* ===================================================================
   الأعمدة الجانبية: تصبح عموداً واحداً على اللوحي والهاتف
   (.prof في ملف الطفل والبطاقة وتفعيل البطاقة، .two-col في لوحة المعلومات)
   =================================================================== */
/* min-width:0 يمنع محتوى عريض (جدول أو شريط تبويبات) من تمديد العمود خارج حاويته:
   العمود يلتزم بالعرض المتاح ويمرَّر المحتوى العريض داخل إطاره وحده.
   على الشاشات الواسعة لا أثر له لأن الأعمدة أصلاً أوسع من محتواها. */
.prof > *,.two-col > *{min-width:0}
.tabs{min-width:0}

@media(max-width:900px){
  .prof,.two-col{grid-template-columns:1fr!important}
  .prof .card-actions{min-width:0}
}

/* تقليل الحركة لمن يطلب ذلك في إعدادات نظامه */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ========== الطباعة ========== */

/* ========== التقارير ========== */
.rep-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:12px}
.rep-kpi{background:var(--bg);border-radius:14px;padding:14px 16px;border:1px solid var(--line)}
.rep-kpi .v{font-size:23px;font-weight:900;color:var(--purple);line-height:1.3;word-break:break-word}
.rep-kpi .l{font-size:12.5px;color:var(--muted);font-weight:600}

/* شريط الفترات السريعة أعلى التقارير */
.rep-quick{display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  padding-top:14px;margin-top:14px;border-top:1px solid var(--line)}
.rep-quick .lb{font-weight:700;color:var(--muted);font-size:14px}

/* أعمدة أفقية — للتسميات الطويلة كأسماء الصلوات وأيام الأسبوع */
.rep-hbar{display:flex;flex-direction:column;gap:11px}
.rep-hbar .row{display:flex;align-items:center;gap:12px}
.rep-hbar .nm{flex:0 0 36%;min-width:0;font-weight:700;font-size:14.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-hbar .v{min-width:44px;text-align:left;font-weight:800}

/* جدول التقرير: أعمدة بعرض محتواها مع تمرير أفقي بدل عصر النص في سطور */
table.rep{width:auto;min-width:100%}
table.rep th,table.rep td{white-space:nowrap}
table.rep th{cursor:pointer;user-select:none}
table.rep th:hover{color:var(--purple)}
table.rep th .ar{font-size:11px;opacity:.55}
table.rep td.num{font-variant-numeric:tabular-nums;font-weight:600}
table.rep tbody td:first-child{position:sticky;right:0;z-index:1;background:#fff;
  font-weight:800;white-space:nowrap}
table.rep tbody tr:hover td:first-child{background:#FAFBFC}
table.rep tfoot td{background:var(--bg);font-weight:900;border-top:2px solid var(--line);
  padding:14px 15px;font-size:15px}
table.rep tfoot td:first-child{position:sticky;right:0;z-index:1}

/* كتلة تقرير واحد داخل التبويب — تفصل بين التقارير المتتالية */
.rep-block + .rep-block{margin-top:26px;padding-top:4px}
.rep-kpis-top .rep-kpi{background:var(--purple-l);border-color:transparent}
.rep-kpis-top .rep-kpi .v{font-size:26px}

/* أبرز الملاحظات — تُقرأ كجُمل جاهزة للإدارة */
.rep-notes{margin-top:16px;padding-top:15px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px}
.rep-notes div{position:relative;padding-right:19px;font-size:15px;line-height:1.75;color:var(--ink-2)}
.rep-notes div::before{content:'';position:absolute;right:0;top:10px;width:7px;height:7px;
  border-radius:50%;background:var(--gold)}

/* صف يفتح التفاصيل عند النقر */
table.rep tr.drillable{cursor:pointer}
table.rep tr.drillable:hover td{background:var(--purple-l)}

/* خريطة الضغط: اليوم × الصلاة */
table.heat td,table.heat th{text-align:center;padding:11px 13px}
table.heat td.hl{text-align:right;font-weight:800}
table.heat td.hc{cursor:pointer;font-weight:800;transition:.12s}
table.heat td.hc:hover{outline:2.5px solid var(--purple);outline-offset:-2.5px}
table.heat tbody td:first-child{background:#fff}

/* نافذة التفاصيل: الجدول وحده بلا هوامش البطاقات */
.rep-in-modal .card{box-shadow:none;padding:0;background:none}
.rep-in-modal .card + .card{margin-top:18px}

/* الهاتف: بطاقتا أرقام في السطر بدل واحدة — يأتي بعد قواعد التقارير ليغلبها */
@media(max-width:700px){
  /* أزرار الفترات السريعة: شبكة مرتّبة بمساحة لمس كافية بدل سطر مزدحم */
  .rep-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,92px),1fr));gap:8px}
  .rep-quick .lb{display:none}
  .rep-quick .btn{width:100%;min-height:42px}
}
@media(max-width:560px){
  .rep-kpis{grid-template-columns:1fr 1fr;gap:9px}
  .rep-kpi{padding:11px 12px}
  .rep-kpi .v{font-size:19px} .rep-kpis-top .rep-kpi .v{font-size:21px}
  .rep-kpi .l{font-size:11.5px}
  .rep-notes div{font-size:14px}
  .rep-hbar .nm{flex:0 0 42%;font-size:13px}
  .rep-hbar .row{gap:9px}

  /* الجداول الرقمية العريضة تبقى جداول وتُمرَّر داخل إطارها — أول عمود مثبّت */
  table.rep th,table.rep td{padding:11px 12px;font-size:13.5px}
  table.rep tfoot td{padding:11px 12px;font-size:13.5px}
  table.heat td,table.heat th{padding:9px 8px;font-size:13px}
  .rep-block + .rep-block{margin-top:18px}
  .rep-in-modal .card + .card{margin-top:14px}
}
@media(max-width:360px){
  .rep-kpis{grid-template-columns:1fr 1fr;gap:7px}
  .rep-kpi{padding:9px 10px}
  .rep-kpi .v{font-size:17px} .rep-kpis-top .rep-kpi .v{font-size:19px}
}

/* ===================================================================
   ماسح QR على الهاتف — أكثر شاشة تُستعمل باليد
   =================================================================== */
/* شريط اختيار الصلاة داخل شاشة المسح: سطر واحد يُمرَّر أفقياً
   حتى تبقى الكاميرا ظاهرة دون تمرير */
@media(max-width:980px){
  .prayer-pick.pick-row{
    display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity}
  .prayer-pick.pick-row .prayer-btn{
    flex:0 0 auto;min-width:126px;padding:12px 14px;font-size:15px;scroll-snap-align:start}
  .prayer-pick.pick-row .prayer-btn small{font-size:11.5px}
}
@media(max-width:700px){
  /* بطاقة اختيار الصلاة مضغوطة: الصلاة المختارة ظاهرة بلونها،
     فلا داعي لعنوان وشارة يزيحان الكاميرا خارج الشاشة */
  .pick-card{padding:12px}
  .pick-card .card-h{display:none}

  /* معاينة عمودية تملأ عرض الشاشة وتطابق نسبة كاميرا الهاتف.
     لا نستخدم max-height مع aspect-ratio: القيد ينتقل للعرض فيضيق الإطار */
  .scan-view{aspect-ratio:3/4;border-radius:18px}
  .scan-frame{inset:12% 9%}
  .scan-frame i{width:34px;height:34px;border-width:4px}
  .scan-off{padding:22px 16px}
  .scan-off svg{width:54px;height:54px;margin-bottom:10px}
  /* تعليمات المسح فوق صورة الكاميرا — مقروءة دون أن تحجب الإطار */
  .scan-hint{
    position:absolute;left:10px;right:10px;bottom:10px;z-index:2;text-align:center;
    color:#fff;font-size:13.5px;font-weight:700;line-height:1.6;
    background:rgba(16,24,32,.62);border-radius:12px;padding:8px 10px;
    backdrop-filter:blur(3px);pointer-events:none}
  .scan-actions .btn{flex:1 1 calc(50% - 6px);min-height:46px}
  .scan-actions .btn:only-child{flex:1 1 100%}
  .scan-stage{gap:16px}
}
/* شاشة قصيرة: إطار مربّع يبقي الأزرار تحته ظاهرة دون تمرير */
@media(max-width:700px) and (max-height:680px){ .scan-view{aspect-ratio:1/1} }
/* الهاتف أفقياً: إطار عريض منخفض */
@media(max-width:980px) and (orientation:landscape) and (max-height:520px){
  .scan-view{aspect-ratio:16/9}
}
@media(min-width:701px){ .scan-hint{display:none} }

/* محرّر الصلاحيات: مساحة لمس أكبر لكل مربّع اختيار */
@media(max-width:700px){
  .perm{padding:13px 14px}
  .perm input{width:22px;height:22px}
}

@media print{
  body{background:#fff}
  .sidebar,.topbar,.card-actions,.page-head,.no-print{display:none!important}
  .main{margin:0} .content{padding:0}
  .card{box-shadow:none;padding:0;margin:0}
  .table-wrap{overflow:visible;border:none}
  table{min-width:0;font-size:11px} th,td{padding:5px 7px}
  table.rep tbody td:first-child,table.rep tfoot td:first-child{position:static}
  .rep-block + .rep-block{margin-top:14px;page-break-before:auto}
  .rep-notes div{font-size:11px}
  .rep-kpis{grid-template-columns:repeat(4,1fr);gap:6px}
  .rep-kpi{padding:7px 9px} .rep-kpi .v{font-size:14px} .rep-kpi .l{font-size:9.5px}
  /* الألوان جزء من معنى خريطة الضغط — لا تُسقَط عند الطباعة */
  table.heat td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:8mm}
}

/* ========== الشعار ========== */
.logo-img{display:block;width:100%;max-width:190px;height:auto}
.logo-draw{display:flex;align-items:center;gap:6px;direction:rtl;max-width:200px}
.logo-mark{width:38%;height:auto;color:#9AA1A8;flex-shrink:0}
.logo-word{font-weight:900;font-size:38px;line-height:1;letter-spacing:0;white-space:nowrap}
.logo-word b{font-weight:900}

.login-card .logo-img{max-width:215px;margin:0 auto 8px}
.login-card .logo-draw{max-width:250px;margin:0 auto 10px}
.login-card .logo-word{font-size:48px}

.sidebar-logo .logo-draw{max-width:100%}
.topbar .logo-img{max-width:118px}
.topbar .logo-draw{max-width:132px}
.topbar .logo-word{font-size:25px}


/* ========== معاينة بطاقة الصلاة على قالب التصميم ========== */
.tplcard{
  position:relative; container-type:inline-size;
  width:100%; aspect-ratio:1240/1748; background:#1F3B66;
  border-radius:12px; overflow:hidden; box-shadow:var(--sh-lg);
}
/* المواضع نفسها في public/js/cardtpl.js (CARD_TPL) */
.tplcard .bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.tplcard .qr{
  position:absolute; left:43.548%; top:84.353%; width:12.903%;
  aspect-ratio:1/1; display:block; background:#fff;
}
.tplcard .qr svg,.qr-box svg{display:block;width:100%;height:auto}
.tplcard .qr-ph{
  display:grid; place-items:center; color:var(--muted);
  border:1px dashed var(--line); border-radius:4px;
}
.tplcard .qr-ph svg{width:52%;height:52%}
.tplcard .sn{
  position:absolute; top:94.85%; left:0; right:0; transform:translateY(-50%);
  text-align:center; direction:ltr; line-height:1; white-space:nowrap;
  font-family:ui-monospace,Menlo,monospace; font-weight:700; color:#5A6B85;
}

/* شبكة معاينة الدفعة */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:16px}
.card-grid .tplcard{box-shadow:var(--sh);border:1px solid var(--line)}

/* لوح تفعيل بطاقة جديدة */
.newcard-hero{
  display:flex; gap:14px; align-items:center; padding:16px 18px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--purple),var(--teal)); color:#fff; margin-bottom:18px;
}
.newcard-hero svg{width:40px;height:40px;flex-shrink:0}
.newcard-hero h3{font-size:19px;font-weight:900;line-height:1.35}
.newcard-hero p{font-size:14px;opacity:.93}

/* ========== محرّر الصلاحيات ========== */
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.perm{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;background:var(--bg);
  border:1.5px solid transparent;border-radius:13px;cursor:pointer;transition:.15s}
.perm:hover{border-color:var(--line)}
.perm:has(input:checked){background:var(--purple-l);border-color:var(--purple)}
.perm:has(input:disabled){opacity:.7;cursor:not-allowed}
.perm input{width:19px;height:19px;flex-shrink:0;margin-top:2px;accent-color:var(--purple)}
.perm b{display:block;font-size:14.5px;line-height:1.4}
.perm small{display:block;color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:2px}
@media(max-width:700px){.perm-grid{grid-template-columns:1fr}}