/* ============================================================
   ريفاي فلو — تجربة الجوال والتابلت
   حتى ١٠٢٤px: القائمة الجانبية تختفي ← زر قائمة في الهيدر + درج جانبي بكل الصفحات
   + شريط سفلي (اليوم · مهامي · زر البصمة · الإنجاز · القائمة) · الجداول تصير بطاقات على الهاتف
   ============================================================ */
.menubtn,.mbrand{display:none}
.mbrand{align-items:center;gap:6px;text-decoration:none} .mbrand img{height:20px;width:auto;max-width:110px;object-fit:contain} .mbrand .chip.flow{font-size:10px;padding:0 7px;line-height:16px}

/* زر الدوام في الهيدر لا يتكرر في «اليوم» */
body[data-view="home"] #clock{display:none}
/* النوافذ فوق الشريط السفلي والدرج · التنبيهات فوق الجميع */
.overlay{z-index:300} .toasts{z-index:500}

/* ---- الدرج الجانبي ---- */
.drawer{position:fixed;inset:0;z-index:250;visibility:hidden;pointer-events:none}
.drawer.open{visibility:visible;pointer-events:auto}
.dr-back{position:absolute;inset:0;background:rgba(24,16,40,.45);opacity:0;transition:opacity .25s ease}
.drawer.open .dr-back{opacity:1}
.dr-panel{position:absolute;top:0;bottom:0;inset-inline-start:0;width:min(86vw,340px);background:#fff;display:flex;flex-direction:column;box-shadow:0 0 40px rgba(24,16,40,.25);transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);padding-bottom:env(safe-area-inset-bottom);will-change:transform}
html[dir="ltr"] .dr-panel{transform:translateX(-105%)}
.drawer.open .dr-panel{transform:none}
body.dr-open{overflow:hidden}
.dr-head{display:flex;align-items:center;gap:12px;padding:calc(16px + env(safe-area-inset-top)) 14px 16px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
.dr-head .avatar{box-shadow:0 0 0 3px rgba(255,255,255,.35);background:#fff}
.dr-head .who{flex:1;min-width:0} .dr-head .who b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dr-head .who small{display:block;font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-head .iconbtn{color:#fff;background:rgba(255,255,255,.14)} .dr-head .iconbtn:hover{background:rgba(255,255,255,.26);color:#fff}
.dr-dept{display:flex;align-items:center;gap:8px;margin:10px 12px 0;padding:0 4px 0 12px;background:var(--accent-soft);border-radius:12px;color:var(--accent);font-weight:700;font-size:13px}
.dr-dept .dot{width:10px;height:10px;border-radius:50%;flex:none} .dr-dept .l{flex:none}
.dr-dept select{border:0;background:transparent;color:var(--accent);font-weight:700;padding:10px 6px;box-shadow:none}
.dr-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}
.dr-quick a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;background:var(--bg);color:var(--ink);font-size:12px;font-weight:700;text-align:center;line-height:1.3;text-decoration:none}
.dr-quick a svg{color:var(--accent)} .dr-quick a:active{background:var(--accent-soft)}
.dr-nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 10px 10px;margin:0;border-top:1px solid var(--line)}
.dr-nav a{padding:11px 12px;font-size:15px}
.dr-nav .sub a{padding:9px 12px;font-size:14px}
.dr-nav .navdiv{margin:6px 12px}
.dr-foot{display:flex;border-top:1px solid var(--line)}
.dr-foot a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:13px 6px;color:var(--muted);font-weight:700;font-size:13px;text-decoration:none}
.dr-foot a + a{border-inline-start:1px solid var(--line)} .dr-foot a:active{background:var(--hover)}

/* ---- «كل الصفحات» ---- */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.apps a{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:14px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;color:var(--ink);text-decoration:none}
.apps a i{width:44px;height:44px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:2px}
.apps a b{font-size:13.5px;line-height:1.35} .apps a small{color:var(--muted);font-size:11px}

/* ---- خدمات سريعة في «اليوم» ---- */
.qserv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.qserv a,.qserv button{background:#fff;border:0;border-radius:16px;box-shadow:var(--shadow);padding:12px;display:flex;align-items:center;gap:10px;color:var(--ink);font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;text-align:start;text-decoration:none;transition:box-shadow .15s,transform .15s}
.qserv a:hover,.qserv button:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.qserv i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent)}
.qserv .q2 i{background:var(--amber-soft);color:var(--amber)} .qserv .q3 i{background:var(--green-soft);color:var(--green)} .qserv .q4 i{background:var(--blue-soft);color:var(--blue)}
.qserv small{display:block;color:var(--muted);font-weight:600;font-size:11.5px}

/* ============ التابلت والجوال (≤ ١٠٢٤) ============ */
@media (max-width:1024px){
  .app{grid-template-columns:1fr!important}
  .sidebar{display:none!important}
  .menubtn{display:grid;color:var(--ink);flex:none}
  .menubtn .dot{top:4px;inset-inline-end:2px}
  .mbrand{display:inline-flex}
  .topbar{padding:0 10px;gap:6px;padding-top:env(safe-area-inset-top);height:calc(var(--topbar) + env(safe-area-inset-top))}
  .topbar .deptsw,#langTop,#clock,#quickAdd{display:none!important}
  .content{padding:16px 16px calc(var(--bottomnav) + 34px + env(safe-area-inset-bottom))}
  .app-footer{margin:16px 12px calc(var(--bottomnav) + 18px);padding:16px 8px}
  .toasts{bottom:calc(var(--bottomnav) + 18px + env(safe-area-inset-bottom));inset-inline:12px}
  .dsave{bottom:calc(var(--bottomnav) + 12px + env(safe-area-inset-bottom))}

  /* الشريط السفلي */
  .bottomnav{display:grid!important;grid-template-columns:repeat(5,1fr);align-items:end;position:fixed;bottom:0;inset-inline:0;height:calc(var(--bottomnav) + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);z-index:210;box-shadow:0 -4px 20px rgba(42,36,56,.06)}
  .bottomnav > a,.bottomnav > button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--bottomnav);font:inherit;font-size:11px;font-weight:700;color:var(--muted);position:relative;padding:0;border:0;background:none;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .bottomnav > a.on,.bottomnav > button.on{color:var(--accent)}
  .bottomnav > a.on::before,.bottomnav > button.on::before{content:'';position:absolute;top:0;width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--accent)}
  .bottomnav > a .cnt,.bottomnav > button .cnt{position:absolute;top:6px;inset-inline-end:calc(50% - 22px);background:var(--red);color:#fff;font-size:10px;border-radius:999px;padding:0 5px;min-width:17px;line-height:17px;text-align:center}
  /* زر البصمة في المنتصف */
  .bottomnav .fab{height:auto;align-self:start;margin-top:-22px;gap:3px;color:var(--accent)}
  .bottomnav .fab svg{width:60px;height:60px;padding:15px;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 8px 22px rgba(84,0,168,.38),0 0 0 5px #fff;transition:transform .15s}
  .bottomnav .fab:active svg{transform:scale(.94)}

  .qserv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal .foot{position:sticky;bottom:-20px;background:#fff;padding:10px 0 4px;margin-bottom:-4px}
}

/* ============ الهاتف (≤ ٦٤٠) ============ */
@media (max-width:640px){
  .page-head{margin-bottom:12px} .page-head h1{font-size:18px}
  .envbar{font-size:11px;padding:3px 8px;white-space:nowrap;overflow:hidden} .envbar > span{overflow:hidden;text-overflow:ellipsis}
  .lv-card .lv-steps b{display:none} .lv-card .lv-steps{max-width:170px}
  .page-head .actions{width:100%} .page-head .actions > .btn{flex:1;justify-content:center}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .tile{padding:10px 12px;gap:10px} .tile .ico{width:34px;height:34px} .tile b{font-size:19px}
  .card{padding:14px} .modal{padding:18px 16px calc(16px + env(safe-area-inset-bottom))}
  .qserv{gap:8px} .qserv a,.qserv button{padding:10px;font-size:12.5px;gap:8px} .qserv i{width:34px;height:34px}
  .apps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .apps a{padding:12px 6px} .apps a i{width:40px;height:40px} .apps a b{font-size:12px} .apps a small{display:none}

  /* الجداول بطاقات: أول خلية عنوان، والبقية «التسمية: القيمة» */
  .tbl{background:transparent;box-shadow:none;overflow:visible}
  .tbl .tbltools{padding:0 0 8px}
  table.rtable,table.rtable tbody,table.rtable tr,table.rtable td{display:block;width:100%}
  table.rtable thead{display:none}
  table.rtable tr{background:#fff;border-radius:14px;box-shadow:var(--shadow);margin-bottom:10px;padding:6px 14px 8px}
  table.rtable tr[hidden]{display:none}
  table.rtable tbody tr:hover td{background:none}
  table.rtable td{border:0;padding:6px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:end;min-height:34px}
  table.rtable td::before{content:attr(data-l);color:var(--muted);font-size:12px;font-weight:700;text-align:start;flex:none}
  table.rtable td:first-child{border-bottom:1px dashed var(--line);padding:8px 0 10px;margin-bottom:2px;text-align:start;justify-content:flex-start;font-size:15px}
  table.rtable td:first-child::before,table.rtable td[data-l=""]::before,table.rtable td.acts::before{display:none}
  table.rtable td.acts{justify-content:flex-end;width:100%;border-top:1px dashed var(--line);margin-top:4px;padding-top:8px}
  table.rtable td .s{display:block}
}

/* الالتقاط: الأزرار تحت النص على الجوال (كان النص ينضغط في عمود ضيّق بجانبها) */
.mitem .m-acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;flex:none;max-width:55%}
@media(max-width:760px){
  .mitem{flex-wrap:wrap}
  .mitem .body{flex:1 1 calc(100% - 52px)}
  .mitem .m-acts{flex:1 1 100%;max-width:none;justify-content:flex-start;padding-inline-start:44px}
}