/* ══════════════════════════════════════════════════════════════
   الجوال — تُحمَّل بعد app.css و ui.css فتعلو عليهما
   المبدأ: لا تمرير أفقي، ولا جدول يُقرأ بالعرض، ولا هدف لمس أصغر
   من ٤٤ بكسل، وكل ما يحتاجه المستخدم في متناول إبهامه.
   ══════════════════════════════════════════════════════════════ */

/* الزرّ يُنشأ على الجوال فقط، ولو بقي بعد توسيع النافذة فلا يظهر */
.foldbtn{display:none}

/* ══════════ شريط الجوال — أسفل الشاشة حيث يصل الإبهام ══════════
   اليد تمسك الجهاز من أسفله، فأعلى الشاشة أبعد ما يكون عن الإبهام.
   الشريط هنا مثبّت في الأسفل، وزرّه يمتدّ بعرض الشاشة كاملًا
   فلا يحتاج تصويبًا، ويعلن القسم الحالي في الوقت نفسه. */
.mobbar{display:none}

@media screen and (max-width:880px){

  .mobbar{
    display:block;position:fixed;inset-inline:0;bottom:0;z-index:30;
    background:var(--rail);
    padding:8px 12px max(8px,env(safe-area-inset-bottom));
    box-shadow:0 -4px 18px -9px rgba(0,0,0,.6)}

  /* زرّ القسم الحالي — يفتح لوحة الأقسام */
  .mobpick{
    width:100%;min-height:52px;padding:11px 15px;border-radius:13px;cursor:pointer;
    background:#ffffff1c;color:var(--rail-hi);border:1px solid #ffffff30;
    font:inherit;font-size:15px;font-weight:600;
    display:flex;align-items:center;gap:11px;text-align:start}
  .mobpick:active{background:#ffffff2e}
  .mobpick i{font-style:normal;font-size:17px;opacity:.9;flex:none}
  .mobpick span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobpick em{font-style:normal;font-size:15px;opacity:.75;flex:none}

  /* ══════════ الهيكل ══════════ */
  /* عنصر الشبكة أو الفلكس min-width الافتراضي فيه auto، فيتجاوز خليّته
     إن كان محتواه أعرض. تصفيره يمنع فيضان الصفحة من جذره. */
  .grid > *,.row > *,.sp > *{min-width:0}
  .app{grid-template-columns:1fr}
  .rail{display:none}
  main{padding:16px 14px calc(88px + env(safe-area-inset-bottom))}
  .pagehead h1{font-size:21px;line-height:1.35}
  .pagehead p{font-size:13.5px}

  /* ══════════ أهداف اللمس ══════════ */
  .btn,.chiptab,.navbtn,.tab,.atab,
  .toolbar select,.toolbar input,
  .ffield select,.ffield input,
  .f input,.f select,.fld select,.fld input{min-height:44px}
  .btn.sm,.btn.ghost.sm{min-height:40px;padding-inline:14px}
  .iconbtn{min-height:38px;padding:7px 12px;font-size:13px}
  .scale button{min-height:46px;min-width:46px;font-size:15px}
  .revbadge{min-height:32px;padding:4px 10px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}

  /* ══════════ الجداول تصير بطاقات ══════════ */
  /* التمرير يبقى: الجداول التي تظل جداولًا (العريضة) تحتاجه،
     وإلغاؤه يجعلها تشدّ أبويها فتُحدث تمريرًا في الصفحة كلها. */
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .tw:has(> table:not(.wide)){border:0;background:none}
  .tw table:not(.wide){width:100%;border-collapse:separate;border-spacing:0}
  .tw table:not(.wide) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tw table:not(.wide) tbody tr{
    display:block;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r);padding:11px 13px;margin-bottom:9px}
  .tw table:not(.wide) tbody tr:hover td{background:none}
  .tw table:not(.wide) tbody td{
    display:flex;gap:10px;align-items:baseline;justify-content:space-between;
    padding:5px 0;border:0;text-align:start;max-width:none}
  .tw table:not(.wide) tbody td+td{border-top:1px dashed var(--line)}
  .tw table:not(.wide) tbody td::before{
    content:attr(data-label);flex:none;font-size:11px;font-weight:700;
    color:var(--ink-3);letter-spacing:.2px;padding-top:2px}
  /* الخلية الأولى عنوان البطاقة: بلا تسمية وبخطّ أبرز */
  .tw table:not(.wide) tbody td:first-child{
    display:block;font-size:14.5px;font-weight:600;padding:0 0 7px;
    border-bottom:1px solid var(--line);margin-bottom:5px}
  .tw table:not(.wide) tbody td:first-child::before{display:none}
  /* خلية فارغة لا تشغل سطرًا */
  .tw table:not(.wide) tbody td:empty{display:none}
  .tw table:not(.wide) tbody td.act{justify-content:flex-start;flex-wrap:wrap;gap:6px;padding-top:9px}
  .tw table:not(.wide) tbody td.act::before{display:none}
  .tw table:not(.wide) tbody td.c{justify-content:space-between}
  .gapbar{min-width:120px}

  /* جداول تبقى شبكةً لأن معناها في التقاطع: المراسي والمصفوفة والخريطة.
     تُمرَّر أفقيًا داخل إطارها وحدها، لا تُحوَّل إلى بطاقات. */
  .heat{font-size:10.5px}
  table.wide{min-width:560px;font-size:11.5px}
  table.wide td,table.wide th{padding:7px 8px}

  /* ══════════ القاموس ══════════ */
  /* عموداه ينهاران، وقائمة الجدارات تُحدّ ارتفاعًا فلا تدفع البطاقة بعيدًا.
     وأسماء الجدارات تلتفّ سطرين بدل أن تُبتر — الاسم هو ما يميّزها. */
  .mod > .grid[style*="268px"]{grid-template-columns:1fr !important}
  .mod > .grid[style*="268px"] > .panel:first-child{
    max-height:250px;overflow-y:auto;overflow-x:hidden}
  .mod > .grid[style*="268px"] .navbtn{
    width:100%;min-width:0;align-items:flex-start;min-height:42px;padding:9px 10px}
  .mod > .grid[style*="268px"] .navbtn span{
    min-width:0;white-space:normal;word-break:break-word;line-height:1.5;text-align:start}
  .mod > .grid[style*="268px"] .navbtn i{flex:none}
  .cdetail .anchors{grid-template-columns:1fr}

  /* ══════════ ورقة التقييم ══════════ */
  .srow{grid-template-columns:1fr;gap:10px}
  .srow .scale{display:flex;flex-wrap:wrap;gap:7px}
  .srow .scale button{flex:1;min-width:64px}
  .anchors{grid-template-columns:1fr;gap:7px}
  .anch{font-size:12.5px;line-height:1.7}

  /* ══════════ صفوف الحقول ══════════ */
  .row{flex-direction:column;align-items:stretch;gap:10px}
  .row .fld{width:100%}
  .fld select,.fld input{width:100%}
  .kv{grid-template-columns:1fr !important;row-gap:4px}
  .kv dt{color:var(--ink-3);font-size:11.5px;padding-top:8px}
  .kv dd{padding-bottom:6px;border-bottom:1px dashed var(--line)}

  /* ══════════ لوحات تُطوى ══════════ */
  /* الشاشة الأولى على الجوال ثمينة: تُعطى للنتيجة، والأدوات تُطلب. */
  /* المطويّ يُخفى بقاعدة واحدة، والمفتوح لا تُمسّ أنماطه أصلًا —
     فلا display:revert يهدم ما بناه المؤلّف. */
  .foldable:has(> .foldbtn){padding-block:0 !important}
  /* الإخفاء مشروط بوجود الزرّ: لو وُسّعت النافذة ثم ضُيّقت بلا إعادة عرض
     بقيت اللوحة بلا زرّ — والشرط يمنع أن تظهر فارغة. */
  .foldable:not(.open):has(> .foldbtn) > *:not(.foldbtn){display:none}
  .foldbtn{display:flex}
  .foldable.open{padding-bottom:13px !important}
  .foldbtn{
    display:flex;align-items:center;gap:9px;width:100%;min-height:48px;
    padding:13px 0;border:0;background:none;cursor:pointer;
    font:inherit;color:var(--ink);text-align:start}
  .foldbtn:active{background:var(--sunk)}
  .foldbtn > span{flex:none;font-size:13.5px;font-weight:700}
  .foldbtn > small{flex:1;min-width:0;font-size:11.5px;color:var(--ink-3);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .foldbtn > .foldn{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
    background:var(--brand);color:#fff;font-size:11px;font-weight:700;
    display:grid;place-items:center;line-height:1}
  .foldbtn > em{flex:none;font-style:normal;font-size:13px;color:var(--ink-3);
    transition:transform .18s ease}
  .foldable.open > .foldbtn > em{transform:rotate(180deg)}
  /* زرّ الطيّ يحمل العنوان والملخّص أصلًا، فترويستها تكرار —
     يبقى منها ما ليس في الزرّ: أزرارها. */
  .foldable:has(> .foldbtn) > .sechead > h2,
  .foldable:has(> .foldbtn) > .sechead > .hint{display:none}
  .foldable:has(> .foldbtn) > .sechead:not(:has(.btn,button)){display:none}

  /* ══════════ لوحة التحكم ══════════ */
  .agroups{gap:12px;overflow-x:auto;padding-bottom:12px;
    flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .agroup{flex:none}
  .agtabs{flex-wrap:nowrap}
  .fbar{padding:11px 12px}
  .fbar-main{flex-direction:column;align-items:stretch}
  .fbar-filters{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .fbar-count{position:static;order:-1;margin-bottom:2px}
  .ffield{min-width:0}

  /* ══════════ المواد والخطة ══════════ */
  .rescards{grid-template-columns:1fr}
  .acts,.act{font-size:13px}
  .minires{padding:9px 10px;min-height:44px}
  .actres .addrow{gap:7px}
  .actres .addrow .iconbtn{flex:1;text-align:center}
  .pitem{flex-direction:column;align-items:stretch;gap:9px}
  .pitem .sp{justify-content:flex-start}

  /* ══════════ المراجعة ══════════ */
  .rvhead{gap:6px}
  .rvhead .when{margin-inline-start:0;width:100%}
  .rvacts .iconbtn{flex:1;min-width:72px;text-align:center}

  /* ══════════ النافذة الجانبية ══════════ */
  .drawer{width:100%;inset-inline:0}
  .drawer header{padding:14px 16px}
  .drawer .body{padding:16px}
  .drawer footer{padding:12px 16px;position:sticky;bottom:0}
  .drawer footer .btn{flex:1}
  .chkgrid{grid-template-columns:1fr;max-height:200px}

  /* ══════════ البطاقات والإشعارات ══════════ */
  .tile{padding:14px}
  .tile .v{font-size:23px}
  .toasts{inset-inline:12px;bottom:calc(84px + env(safe-area-inset-bottom));max-width:none}
  .modcard{padding:14px}
  .legend{font-size:11px;gap:8px}
  .sechead{flex-wrap:wrap;gap:7px}
  .sechead h2{font-size:15.5px}
  .hint{font-size:11.5px;width:100%}
}

/* ══════════ شاشات ضيقة جدًا ══════════ */
@media screen and (max-width:380px){
  main{padding:14px 11px calc(86px + env(safe-area-inset-bottom))}
  .fbar-filters{grid-template-columns:1fr}
  .srow .scale button{min-width:0;font-size:14px}
  .pagehead h1{font-size:19px}
}

/* ══════════ الطباعة من الجوال ══════════ */
@media print{
  .mobbar{display:none !important}
  .tw thead{position:static;width:auto;height:auto;clip:auto}
  .tw tbody tr{display:table-row;border:0;padding:0;margin:0}
  .tw tbody td{display:table-cell;padding:7px 9px}
  .tw tbody td::before{display:none}
}

/* ══════════════════════════════════════════════════════════════
   لوحة الأقسام — تنزلق من الأسفل حيث يصل الإبهام،
   وتُبقي تجميع الأقسام وأيقوناتها كما في الشريط الجانبي.
   ══════════════════════════════════════════════════════════════ */
.sheet,.sheet-scrim{display:none}

@media screen and (max-width:880px){
  .sheet-scrim{
    display:block;position:fixed;inset:0;z-index:40;
    background:#0b1a1566;animation:shfade .16s ease}
  @keyframes shfade{from{opacity:0}}

  .sheet{
    display:flex;flex-direction:column;
    position:fixed;inset-inline:0;bottom:0;z-index:41;
    max-height:min(76vh,560px);
    background:var(--surface);color:var(--ink);
    border-top-left-radius:18px;border-top-right-radius:18px;
    box-shadow:0 -10px 34px -12px rgba(0,0,0,.45);
    padding-bottom:max(10px,env(safe-area-inset-bottom));
    animation:shup .22s cubic-bezier(.22,.8,.3,1)}
  @keyframes shup{from{transform:translateY(14px);opacity:.5}}

  .sheet[hidden],.sheet-scrim[hidden]{display:none}

  .sheet-grip{
    width:40px;height:4px;border-radius:99px;background:var(--line);
    margin:9px auto 4px;flex:none}

  /* مَن أنت وزرّ الخروج — انتقلا إلى هنا مع الشريط،
     فالخروج فعل نادر لا يستحق موضعًا دائمًا على الشاشة. */
  .sheet-who{
    display:flex;align-items:center;gap:10px;flex:none;
    padding:6px 16px 11px;border-bottom:1px solid var(--line)}
  .sw-txt{flex:1;min-width:0;line-height:1.35}
  .sw-txt b{display:block;font-family:var(--disp);font-size:14.5px;color:var(--ink)}
  .sw-txt span{display:block;font-size:11.5px;color:var(--ink-3);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sw-txt small{display:block;font-size:10.5px;color:var(--ink-3);opacity:.75;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  .sw-out{flex:none;min-height:40px;padding:9px 15px;border-radius:10px;cursor:pointer;
    background:var(--sunk);border:1px solid var(--line);color:var(--ink-2);
    font:inherit;font-size:13px;font-weight:600}
  .sw-out:active{background:var(--line)}

  /* آخر القائمة أقرب ما يكون إلى الإبهام، فلا يُشغَل بزينة */
  .sheet-body{overflow-y:auto;padding:8px 10px 4px;-webkit-overflow-scrolling:touch}

  .sheet-sec{
    font-size:10.5px;font-weight:700;color:var(--ink-3);letter-spacing:.4px;
    padding:11px 10px 5px}
  .sheet-sec:first-child{padding-top:4px}

  .sheet-item{
    width:100%;min-height:50px;display:flex;align-items:center;gap:12px;
    background:none;border:0;cursor:pointer;border-radius:10px;
    padding:11px 12px;font:inherit;font-size:14.5px;font-weight:500;
    color:var(--ink);text-align:start}
  .sheet-item:active{background:var(--sunk)}
  .sheet-item i{font-style:normal;font-size:17px;color:var(--ink-3);width:24px;text-align:center;flex:none}
  .sheet-item span{flex:1;min-width:0}
  .sheet-item em{font-style:normal;color:var(--brand);font-weight:700;flex:none}
  .sheet-item[aria-current="page"]{background:var(--brand-wash);color:var(--brand);font-weight:700}
  .sheet-item[aria-current="page"] i{color:var(--brand)}

  body.sheet-open{overflow:hidden}
}

@media print{ .sheet,.sheet-scrim{display:none !important} }