/* =====================================================================
   المكتبة على الهاتف — طبقةٌ فوق theme-new.css، لا تُعدّلها.

   الموظفون سيفتحون المكتبة من الشاشة الرئيسية لهواتفهم، فالصفحات هنا
   تُقاس لشاشةٍ بعرض إبهام: يُرفع عن الهيدر ما لا يُستعمل على الهاتف
   (البحث والجرس)، ويُختصر التقويم إلى شهرٍ واحد، وتُقرأ الطلبات بطاقاتٍ
   لا جدولاً بأعمدةٍ ضيّقة.
   ===================================================================== */

@media (max-width: 760px){

  /* ---- الهيدر: الاسم، التنقّل، الحساب ---- */
  #searchBox, .bell-wrap{ display:none !important; }
  .hdr-top{ gap:10px }
  /* with the search and the bell gone the account drifted in beside the name;
     it belongs at the far end of the row, where it sits on a desktop */
  .hdr-top #pvUser{ margin-inline-start:auto }
  .side-brand b{ font-size:15px }

  /* ---- المواد: بلا شريط فلترة على الهاتف ---- */
  #filters, #activeFilter{ display:none !important; }

  /* ---- التقويم: اللوحة تنزل تحت الشهر، والشرائط خطوطٌ ملوّنة بلا نصّ
     (يومٌ بعرض ٤٨px لا يتّسع لاسم فعالية؛ الأسماء في البطاقات تحته) ---- */
  .lc-hero{ grid-template-columns:1fr; gap:4px; padding:10px 0 22px }
  .lc-hero .k{ font-size:14px; color:var(--muted); padding:0 }
  .lc-hero h1{ font-size:26px; margin-bottom:14px }
  .lc-layout{ grid-template-columns:1fr; padding-top:20px }
  .lc-cal{ padding:0; border:0 }
  .lc-side{ padding:24px 0 0; margin-top:22px; border-top:2px solid var(--ink) }
  .lc-mh h2, .lc-sh h2{ font-size:23px }
  .lc-dows span{ font-size:10px }
  .lc-day{ padding:4px 2px; text-align:center }
  .lc-day .n{ min-width:22px; height:22px; font-size:12px }
  .lc-wfg{ grid-auto-rows:5px; row-gap:3px; padding:32px 0 8px; min-height:62px }
  .lc-ev{ font-size:0; padding:0; margin:0 3px; border-inline-start:0; background:var(--c); border-radius:3px }
  .lc-ev.cb{ margin-inline-start:0 } .lc-ev.ca{ margin-inline-end:0 }
  .lc-more{ font-size:9.5px; padding:0; text-align:center; line-height:9px }

  /* ---- الطلبات: بطاقة لكل طلب ---- */
  #requestsView .log-table thead{ display:none }
  #requestsView .log-table, #requestsView .log-table tbody,
  #requestsView .log-table tr, #requestsView .log-table td{ display:block; width:auto }
  #requestsView .log-wrap{ border:0; background:none; padding:0; overflow:visible }
  #requestsView .log-table{ min-width:0 !important; width:100% !important; table-layout:fixed }
  #requestsView .log-table tr.req-row td{ white-space:normal; overflow-wrap:anywhere }
  #requestsView .log-table tr.req-row{
    background:var(--panel,#fff); border:1px solid var(--line); border-radius:14px;
    padding:13px 14px; margin-bottom:10px }
  #requestsView .log-table tr.req-row td{ border:0; padding:0 }
  #requestsView .log-table tr.req-row td:first-child{
    font-size:14px; font-weight:600; line-height:1.5; margin-bottom:6px }
  #requestsView .log-table tr.req-row td.log-when{
    font-size:12px; color:var(--muted); display:inline-block; margin-inline-end:10px }
  /* the status badge sits beside the date; it is no longer the last cell —
     the path column follows it, and that one takes a line of its own */
  #requestsView .log-table tr.req-row td:last-child,
  #requestsView .log-table tr.req-row td:nth-child(3){ display:inline-block }
  #requestsView .log-table tr.req-row td.rt-prog{
    display:block; width:100%; margin-top:11px; padding-top:10px;
    border-top:1px solid var(--line-soft,#e7e5e0) }
  #requestsView .col-add-bar{ margin-bottom:14px }
  #requestsView .col-add-bar .btn{ width:100% }

  /* ---- شاشة الطلب: المسار أولاً، ثم البيانات، ثم المواد ---- */
  .rt-cols, .rt-talk{ grid-template-columns:1fr !important; }
  /* the request's own data reads as label over answer, not as two thin
     columns fighting for a thumb's width */
  .req-fields .req-field{ display:block !important; padding:11px 0 }
  .req-fields .req-flabel{ display:block; font-size:11px; margin-bottom:3px }
  .req-fields .req-fval{ display:block; font-size:13.5px; line-height:1.75;
    text-align:start; overflow-wrap:anywhere }
  .rt-panel{ padding:14px 14px }
  .rt-thumbs button{ width:64px; height:52px }
  .rt-facts{ gap:10px 18px }
  .thread .composer{ flex-wrap:wrap }
  .thread .composer textarea{ min-width:0; width:100% }

  /* ---- النماذج والنوافذ ---- */
  .modal{ width:100%; max-width:none; border-radius:16px 16px 0 0; max-height:92vh; padding:18px }
  /* the form's two-up rows are written inline in the page, and a date input is
     wider than half a phone — every one of them goes to a single column, and
     nothing in a grid keeps a width of its own */
  .modal .row2, .modal .grid2,
  .modal div[style*="grid-template-columns:1fr 1fr"],
  .modal div[style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns:1fr !important; }
  .modal [style*="display:grid"] > *, .modal .field{ min-width:0 }
  .modal input[type=date], .modal input[type=time]{ width:100%; max-width:100% }
  .field input, .field select, .field textarea{ font-size:16px }  /* لا يُقرّب iOS */

  /* ---- الشبكة والأقسام ---- */
  .pv-rail{ scroll-snap-type:x mandatory }
  .stats{ overflow-x:auto }
}

/* الشاشات الضيّقة جداً */
@media (max-width: 400px){
  #requestsView .log-table tr.req-row td:first-child{ font-size:13.5px }
}

/* ---------------------------------------------------------------------
   المكتبة وهي مفتوحة من الشاشة الرئيسية: لا شريط متصفّح فوقها، فتُترك
   مسافة القصّة العليا والشريط السفلي للجهاز نفسه.
   --------------------------------------------------------------------- */
@media (display-mode: standalone), (display-mode: fullscreen){
  .hdr-top{ padding-top:calc(10px + env(safe-area-inset-top)) }
  body{ padding-bottom:env(safe-area-inset-bottom) }
  main{ padding-inline:max(0px, env(safe-area-inset-left)) }
}