/* ═══════════════════════════════════════════
   Travera Accounting — Combined Stylesheet
   Extracted from v25c.html (Level 1 refactor)
   ═══════════════════════════════════════════ */

/* ══════ MAIN STYLES ══════ */
/* v26-96: dark theme (default) */
:root, html[data-theme="dark"] {
  --bg:#07090f;
  --s1:#0d1117;
  --s2:#111827;
  --s3:#1a2234;
  --border:#1e2d42;
  --border2:#243347;
  --green:#22d97a;
  --green2:rgba(34,217,122,.1);
  --red:#ff4d4d;
  --red2:rgba(255,77,77,.1);
  --yellow:#f5b50a;
  --yellow2:rgba(245,181,10,.1);
  --blue:#4da3ff;
  --blue2:rgba(77,163,255,.1);
  --purple:#b57bff;
  --purple2:rgba(181,123,255,.1);
  --cyan:#00d4e0;
  --orange:#ff8c42;
  --orange2:rgba(255,140,66,.1);
  --text:#eaf0fb;
  --muted:#5a7090;
  --muted2:#8da3bc;
  /* v28-81: brand palette from the Travera Group logo (crimson→plum→blue) */
  --crimson:#d05a4e;
  --brand-grad:linear-gradient(115deg,#d05a4e 0%,#8a4a74 38%,#4d5fa8 62%,#4da3ff 100%);
  --r:10px;
}

/* v26-96: medium-light theme (slate gray، مش أبيض ناصع) */
html[data-theme="light"] {
  --bg:#cfd5e0;          /* رمادي متوسّط */
  --s1:#dde2eb;          /* أفتح شوي للـ topbar/panel */
  --s2:#d4dae5;          /* متوسّط */
  --s3:#c4cad6;          /* أغمق للـ cards */
  --border:#a8b3c4;
  --border2:#94a0b3;
  --green:#15803d;
  --green2:rgba(21,128,61,.12);
  --red:#b91c1c;
  --red2:rgba(185,28,28,.12);
  --yellow:#b45309;
  --yellow2:rgba(180,83,9,.12);
  --blue:#2a6db5;
  --blue2:rgba(42,109,181,.13);
  --purple:#7e22ce;
  --purple2:rgba(126,34,206,.12);
  --cyan:#0e7490;
  --orange:#c2410c;
  --orange2:rgba(194,65,12,.12);
  --text:#1e293b;        /* نصّ غامق للقراءة */
  --muted:#475569;
  --muted2:#334155;
  /* v28-81: brand palette from the logo — darkened for light-bg contrast */
  --crimson:#b8463b;
  --brand-grad:linear-gradient(115deg,#b8463b 0%,#6f4a72 45%,#2a6db5 100%);
  --r:10px;
}

/* light theme — تحسينات للقراءة */
html[data-theme="light"] body{
  background:var(--bg);
}
html[data-theme="light"] .topbar{
  box-shadow:0 1px 2px rgba(15,23,42,.08);
}
html[data-theme="light"] .panel,
html[data-theme="light"] .modal,
html[data-theme="light"] .sc{
  box-shadow:0 1px 3px rgba(15,23,42,.06);
}
html[data-theme="light"] .ov{
  background:rgba(30,41,59,.55);
}
html[data-theme="light"] input.inp,
html[data-theme="light"] select.inp,
html[data-theme="light"] textarea.inp{
  background:#e6eaf1;
  color:var(--text);
  border-color:#a8b3c4;
}
html[data-theme="light"] input.inp:focus,
html[data-theme="light"] select.inp:focus,
html[data-theme="light"] textarea.inp:focus{
  background:#eef2f7;
  border-color:var(--blue);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Tajawal',sans-serif;min-height:100vh;font-size:14px}

/* ── TOPBAR ── */
.topbar{
  background:var(--s1);
  border-bottom:1px solid var(--border);
  min-height:56px;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:300;
  gap:10px;
}
/* v28-81: brand hairline under the topbar (logo gradient) */
.topbar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--brand-grad);opacity:.55;pointer-events:none}
/* v28-81: logo wordmark + dot take the brand gradient (logo colors) */
.logo{font-weight:900;font-size:1.1rem;letter-spacing:.5px;display:flex;align-items:center;gap:8px;flex-shrink:0;
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-grad);box-shadow:0 0 8px var(--blue)}
.nav-tabs{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:thin}
.nav-tabs::-webkit-scrollbar{height:3px}
.nav-tabs::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.ntab{background:none;border:none;color:var(--muted);padding:6px 10px;border-radius:7px;cursor:pointer;font-family:'Tajawal',sans-serif;font-size:.78rem;font-weight:600;transition:all .18s;white-space:nowrap;flex-shrink:0}
.ntab:hover{color:var(--text);background:var(--s3)}
.ntab.on{background:var(--blue2);color:var(--blue)}

/* More dropdown */
.more-wrap{position:relative;flex-shrink:0}
.more-btn{background:var(--s3);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:7px;cursor:pointer;font-family:'Tajawal',sans-serif;font-size:.78rem;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:4px}
.more-btn:hover{background:var(--s2);border-color:var(--border2)}
.more-btn.active{background:var(--blue2);color:var(--blue);border-color:var(--blue)}
.more-dd{position:fixed;background:var(--s1);border:1px solid var(--border2);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);min-width:220px;max-height:70vh;overflow-y:auto;z-index:350;display:none;padding:6px}
.more-dd.open{display:block}
.more-dd button{display:block;width:100%;background:none;border:none;color:var(--muted2);padding:9px 12px;border-radius:6px;cursor:pointer;font-family:'Tajawal',sans-serif;font-size:.82rem;font-weight:600;text-align:right;transition:all .12s;white-space:nowrap}
.more-dd button:hover{background:var(--s3);color:var(--text)}
.more-dd button.on{background:var(--blue2);color:var(--blue)}
.more-dd button.sa{color:var(--orange)}
.more-backdrop{position:fixed;inset:0;z-index:340;display:none}
.more-backdrop.open{display:block}
.topbar-right{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:8px;flex-shrink:0;min-width:0}

/* v26-51: Update banner — fixed at the bottom of the screen, slides up */
.update-banner{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  z-index:9500; display:flex; align-items:center; gap:14px;
  background:linear-gradient(135deg, var(--s2) 0%, var(--s3) 100%);
  border:1px solid var(--purple); border-radius:14px;
  padding:12px 18px; box-shadow:0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(139,124,246,.15);
  max-width:calc(100vw - 24px); animation:ub-slide-up .35s ease-out;
}
/* v26-52: Install banner — same shape as update banner, blue accent */
.update-banner.install-banner{
  border-color:var(--blue);
  box-shadow:0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(108,168,255,.15);
}
/* v26-54: Notification banner — for Super Admin announcements/offers */
.update-banner.notif-banner{
  border-color:var(--green);
  box-shadow:0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(34,217,122,.15);
  max-width:min(540px, calc(100vw - 24px));
}
.update-banner.notif-banner .ub-icon{font-size:2rem}
.update-banner.notif-banner .ub-sub{
  white-space:normal; line-height:1.5; max-width:340px;
}
.notif-icon-btn.on{
  background:var(--purple) !important; color:#fff !important;
  border-color:var(--purple) !important;
}
.update-banner .ub-icon{font-size:1.6rem; line-height:1; flex-shrink:0}
.update-banner .ub-text{flex:1; min-width:0}
.update-banner .ub-title{font-weight:800; font-size:.92rem; color:var(--text)}
.update-banner .ub-sub{font-size:.74rem; color:var(--muted); margin-top:2px}
.update-banner .ub-actions{display:flex; gap:6px; flex-shrink:0}
@keyframes ub-slide-up{
  from{opacity:0; transform:translate(-50%, 30px)}
  to  {opacity:1; transform:translate(-50%, 0)}
}
@media(max-width:600px){
  .update-banner{
    left:10px; right:10px; bottom:10px; transform:none;
    flex-direction:column; align-items:stretch; gap:10px; padding:12px;
  }
  .update-banner .ub-actions{justify-content:stretch}
  .update-banner .ub-actions .btn{flex:1}
  @keyframes ub-slide-up{
    from{opacity:0; transform:translateY(30px)}
    to  {opacity:1; transform:translateY(0)}
  }
}
/* v26-39: prevent ISP owner badge from overflowing on tablet/medium screens */
#userBadge{display:inline-flex;align-items:center;gap:6px;max-width:240px;min-width:0;overflow:hidden}
#userBadge > span:first-child{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
#userBadge .bdg{flex-shrink:0}

/* ── HAMBURGER MENU ── */
.burger-btn{display:none;background:var(--s3);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:8px 11px;font-size:1.15rem;cursor:pointer;flex-shrink:0;line-height:1}
.burger-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:400;backdrop-filter:blur(2px)}
.burger-backdrop.open{display:block}
.burger-drawer{
  display:none;position:fixed;top:0;right:0;
  width:85%;max-width:320px;height:100vh;
  background:var(--s1);border-left:1px solid var(--border2);
  z-index:401;
  flex-direction:column;
  transform:translateX(100%);transition:transform .25s ease;
  box-shadow:-4px 0 20px rgba(0,0,0,.4);
}
.burger-drawer.open{display:flex;transform:translateX(0)}
.burger-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--border);
}
.burger-header .logo{font-size:1.05rem}
.burger-close{background:none;border:none;color:var(--muted);font-size:1.4rem;cursor:pointer;padding:0 4px;line-height:1}
.burger-close:hover{color:var(--text)}
.burger-user{padding:14px 18px;border-bottom:1px solid var(--border);background:var(--s2);min-width:0}
.burger-user-name{font-weight:700;font-size:.9rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.burger-user-team{font-size:.75rem;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.burger-tabs{flex:1;overflow-y:auto;padding:8px 0}
.burger-tab{
  display:flex;align-items:center;gap:10px;
  width:100%;background:none;border:none;color:var(--muted2);
  padding:14px 18px;font-size:.9rem;font-weight:600;
  font-family:'Tajawal',sans-serif;cursor:pointer;text-align:right;
  border-right:3px solid transparent;transition:all .15s;
}
.burger-tab:hover{background:var(--s3);color:var(--text)}
.burger-tab.on{background:var(--blue2);color:var(--blue);border-right-color:var(--blue)}
.burger-footer{padding:12px 18px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.burger-footer .btn{width:100%;justify-content:center;font-size:.82rem}

/* Mobile: show burger, hide inline tabs + date */
@media(max-width:900px){
  .topbar{padding:0 12px;min-height:54px}
  .nav-tabs{display:none}
  .burger-btn{display:block}
  .topbar-right{gap:5px}
  .topbar-right .btn{padding:5px 9px !important;font-size:.72rem !important}
  #topDate{display:none}
  #userBadge{display:none}
}

/* ── PAGES ── */
.pg{display:none;padding:20px;max-width:1500px;margin:0 auto}
.pg.on{display:block}
@media(max-width:900px){.pg{padding:12px 8px}}

/* ── RESPONSIVE IMPROVEMENTS ── */
@media(max-width:768px){
  /* Modals */
  .ov{padding:0}
  .modal{
    max-width:100%!important;
    width:100%!important;
    border-radius:10px 10px 0 0;
    padding:18px 14px;
    margin:auto 0 0 0;
  }
  .modal h3{font-size:1rem}
  .modal-sub{font-size:.78rem}
  .flbl{font-size:.75rem}
  .inp{font-size:.85rem;padding:10px 12px}
  .mfoot{flex-wrap:wrap;gap:6px}
  .mfoot .btn{flex:1;min-width:90px;font-size:.78rem;padding:8px 10px;justify-content:center}
  .mfoot .btn.bsm{min-width:auto;flex:0 0 auto}
  
  /* Tables — smaller font */
  table{font-size:.78rem}
  th{font-size:.66rem;padding:8px 6px}
  td{padding:8px 6px}
  .nm{font-size:.82rem}
  .uid{font-size:.68rem}
  .bdg{font-size:.65rem;padding:2px 6px}
  
  /* Panel headers */
  .ph{padding:11px 12px;gap:8px}
  .ph-title{font-size:.85rem}
  .pb{padding:12px}
  
  /* Detail modal header stacks */
  .detail-header{flex-direction:column;gap:10px;padding:14px}
  .detail-balance{text-align:right;margin-right:0;width:100%;border-top:1px solid var(--border);padding-top:10px}
  .detail-avatar{width:44px;height:44px;font-size:1.2rem}
  .detail-name{font-size:1.05rem}
  .detail-meta{font-size:.75rem;gap:8px}
  .detail-bal-val{font-size:1.4rem}
  
  /* Summary cards */
  .sum-card{min-width:100px;padding:10px 12px}
  .sum-lbl{font-size:.65rem}
  .sum-val{font-size:1.1rem}
  
  /* Stat cards */
  .sc-val{font-size:1.5rem}
  .sc-lbl{font-size:.68rem}
  .sc-sub{font-size:.7rem}
  .sc{padding:12px 14px}
  
  /* Rows/filters wrap */
  .row{gap:6px}
  .inp-w{min-width:130px}
  
  /* Payment item */
  .pay-item{padding:10px}
  .pay-amt{font-size:1rem}
  .pay-meta{font-size:.72rem}
}

/* Extra small phones */
@media(max-width:400px){
  .ntab{padding:5px 8px;font-size:.72rem}
  .sc-val{font-size:1.3rem}
  .mfoot .btn{font-size:.72rem;padding:7px 8px}
  .btn.bsm{font-size:.7rem;padding:4px 7px}
}

/* ═══════════════════════════════════════════
   v26-28: RESPONSIVE HARDENING — fixes mobile
   issues where the login overlay didn't cover
   the full viewport (home content bleeding
   through on the right) and where wide tables
   caused horizontal scroll on the entire page.
   ═══════════════════════════════════════════ */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}
#loginOverlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  z-index: 9999 !important;
  background: var(--bg) !important;
}
/* Make sure modal overlays (.ov) also cover full viewport on mobile */
.ov {
  width: 100vw;
  max-width: 100vw;
}
/* Prevent any rogue element from overflowing the viewport horizontally */
.pg, .panel, .modal, .sum-row, .scards {
  max-width: 100%;
}
/* Tables: keep horizontal scroll INSIDE the wrapper, not on the page */
.twrap {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
table {
  max-width: 100%;
}
/* v26-34 fix: previous `word-break: break-word` was too aggressive — it was
   splitting Arabic names character by character on narrow mobile columns.
   Use overflow-wrap (only breaks unbreakable strings as a last resort)
   instead, and let the cell scroll horizontally inside .twrap if needed. */
td, th {
  overflow-wrap: anywhere;
  word-break: normal;
}
/* Names + usernames: keep on a single line, ellipsis if too long */
.nm {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.uid {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Topbar: in case the row gets too wide on mobile, allow wrapping the right side */
@media(max-width:600px){
  .topbar {
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .topbar-right {
    flex-shrink: 1;
    min-width: 0;
  }
  /* Bulk-send / export rows wrap properly */
  .ph .row {
    flex-wrap: wrap;
    width: 100%;
  }
  .ph .row .inp,
  .ph .row .inp-w {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ── STAT CARDS ── */
.scards{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px}
@media(max-width:1200px){.scards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.scards{grid-template-columns:repeat(2,1fr)}}
.sc{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;position:relative;overflow:hidden;cursor:default;transition:border-color .2s}
.sc:hover{border-color:var(--border2)}
.sc-stripe{position:absolute;top:0;left:0;width:100%;height:3px}
.sc-lbl{font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.sc-val{font-size:1.75rem;font-weight:900;line-height:1}
.sc-sub{font-size:.72rem;color:var(--muted);margin-top:4px}

/* ── PANEL ── */
.panel{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.ph{padding:13px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ph-title{font-weight:800;font-size:.95rem;display:flex;align-items:center;gap:8px}
.pb{padding:18px}

/* ── INPUTS / BUTTONS ── */
.inp{background:var(--s3);border:1px solid var(--border);border-radius:7px;padding:8px 12px;color:var(--text);font-family:'Tajawal',sans-serif;font-size:.88rem;outline:none;transition:border-color .2s}
.inp:focus{border-color:var(--blue)}
.inp::placeholder{color:var(--muted)}
/* v28-35 (U-C-1): iOS Safari auto-zooms when input font-size < 16px.
   On touch devices, bump .inp + textarea + select to 16px. كان كل modal
   على iPhone بيـ zoom في، الـ collectors يفتحوا dozens of payment modals
   باليوم — أعلى friction للـ mobile users. */
@media (pointer: coarse) {
  .inp, textarea.inp, select.inp { font-size: 16px; }
  input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], input[type="date"], input[type="search"], textarea, select { font-size: 16px; }
}
.inp-w{flex:1;min-width:160px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{border-radius:7px;padding:8px 16px;font-family:'Tajawal',sans-serif;font-size:.83rem;cursor:pointer;font-weight:700;border:1px solid transparent;transition:all .18s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.btn:active{transform:scale(.97)}
.bg{background:var(--s3);border-color:var(--border);color:var(--muted2)}
.bg:hover{border-color:var(--blue);color:var(--text)}
.bg.on{background:var(--blue2);border-color:var(--blue);color:var(--blue)}
.bgreen{background:var(--green2);border-color:var(--green);color:var(--green)}
.bgreen:hover{background:rgba(34,217,122,.18)}
.bred{background:var(--red2);border-color:var(--red);color:var(--red)}
.byellow{background:var(--yellow2);border-color:var(--yellow);color:var(--yellow)}
.bblue{background:var(--blue2);border-color:var(--blue);color:var(--blue)}
.bpurple{background:var(--purple2);border-color:var(--purple);color:var(--purple)}
.bcyan{background:rgba(0,212,224,.1);border-color:var(--cyan);color:var(--cyan)}
.bsm{padding:5px 10px;font-size:.78rem}

/* v28-58: super-admin row actions — inline status + kebab (⋮) overflow menu */
.sa-acts{display:flex;gap:6px;align-items:center}
.sa-kebab{font-size:1.05rem;line-height:1;font-weight:900;padding:5px 9px}
#saActionsMenu{position:fixed;z-index:9500;display:none;min-width:212px;background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:5px;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.sa-mi{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;color:var(--text);font-size:.82rem;cursor:pointer;white-space:nowrap}
.sa-mi span:first-of-type{flex:1}
.sa-mi:hover{background:var(--s3)}
.sa-mi-danger{color:var(--red)}
.sa-mi-on{color:var(--green);font-size:.72rem;font-weight:800}
.sa-mlabel{color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.5px;padding:7px 10px 3px;font-weight:800}
.sa-msep{height:1px;background:var(--border);margin:4px 6px}

/* ── TABLE ── */
.twrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.85rem}
thead tr{background:rgba(255,255,255,.02)}
th{padding:10px 13px;text-align:right;font-weight:700;color:var(--muted);font-size:.7rem;border-bottom:1px solid var(--border);white-space:nowrap;text-transform:uppercase;letter-spacing:.4px}
td{padding:9px 13px;border-bottom:1px solid rgba(30,45,66,.5);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.013)}
.nm{font-weight:700;font-size:.88rem}
.uid{font-size:.73rem;color:var(--muted);font-family:monospace;direction:ltr}
.ph-cell{direction:ltr;color:#7ab8ff;font-size:.82rem}
.bdg{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:20px;font-size:.72rem;font-weight:700;white-space:nowrap}
.b-g{background:var(--green2);color:var(--green)}
.b-r{background:var(--red2);color:var(--red)}
.b-y{background:var(--yellow2);color:var(--yellow)}
.b-b{background:var(--blue2);color:var(--blue)}
.b-p{background:var(--purple2);color:var(--purple)}
.b-c{background:rgba(0,212,224,.1);color:var(--cyan)}
.b-o{background:var(--orange2);color:var(--orange)}
.dsub{font-size:.73rem;color:var(--muted);margin-top:2px}
.money-owe{color:var(--red);font-weight:800}
.money-ok{color:var(--green);font-weight:700}
.money-zero{color:var(--muted)}
.overdue-row td:first-child{border-right:2px solid var(--red)}
.warn-row td:first-child{border-right:2px solid var(--yellow)}
.no-phone-row .ph-cell{color:var(--red)!important}

/* ── PRINT STYLES ── */
@media print {
  body { background: #fff !important; color: #000 !important; font-size: 12px; }
  .topbar, #pg-print .panel:first-child { display: none !important; }
  .print-doc { display: block !important; }
  .print-page { page-break-after: always; padding: 16px; }
  .print-page:last-child { page-break-after: auto; }
}
.print-doc {
  font-family: 'Tajawal', sans-serif;
  direction: rtl;
}
.print-header {
  border-bottom: 2px solid #1a2234;
  padding-bottom: 10px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.print-title { font-size: 1.1rem; font-weight: 900; color: #0d1117; }
.print-sub { font-size: .75rem; color: #5a7090; margin-top: 3px; }
.print-date { font-size: .78rem; color: #5a7090; text-align: left; }
.print-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.print-table th { background: #1a2234; color: #eaf0fb; padding: 7px 10px; text-align: right; font-weight: 700; font-size: .72rem; }
.print-table td { padding: 7px 10px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; color: #1a202c; }
.print-table tr:nth-child(even) td { background: #f8fafc; }
.print-table tr:last-child td { border-bottom: none; }
.print-owe { color: #e53e3e; font-weight: 800; }
.print-ok { color: #38a169; font-weight: 700; }
.print-overdue { color: #dd6b20; font-weight: 700; }
.print-summary { margin-top: 12px; padding: 10px 14px; background: #f1f5f9; border-radius: 6px; display: flex; gap: 24px; font-size: .8rem; }
.print-summary-item strong { font-size: 1rem; display: block; font-weight: 900; }
.print-no-phone { color: #e53e3e; font-size: .72rem; }

/* ── PAG ── */
.pag{display:flex;gap:5px;justify-content:center;padding:14px;border-top:1px solid var(--border);flex-wrap:wrap;align-items:center}
.pgb{background:var(--s3);border:1px solid var(--border);color:var(--muted2);border-radius:5px;width:30px;height:30px;cursor:pointer;font-family:'Tajawal',sans-serif;font-size:.8rem;transition:all .15s}
.pgb:hover,.pgb.on{background:var(--blue);border-color:var(--blue);color:#fff}
.pgi{font-size:.78rem;color:var(--muted);padding:0 6px}

/* ── MODAL ── */
.ov{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  z-index:999;
  overflow-y:auto;
  padding:20px 0;
}
.ov.open{display:flex}
.ov{align-items:flex-start;justify-content:center}
/* v28-16: ovLocPicker stacks ABOVE other modals — opened from inside
   the customer edit modal (ovPhone) which is later in the DOM and
   was painting on top because z-index was equal. */
#ovLocPicker{z-index:1050}

/* v29-33: ovFollowup (موعد دفع) opened from inside the detail card (ovDetail), which is
   LATER in the DOM → was painting on top because z-index was equal (999), so the modal
   looked hidden under the card. Same fix as ovLocPicker. */
#ovFollowup{z-index:1050}

/* v28-20: searchable combobox — used in stock-sell modal for customer picker.
   Generic class so we can reuse for any "search a customer / item from a long
   list" UX. */
.combo{position:relative}
.combo-dropdown{
  position:absolute;
  top:100%; left:0; right:0;
  background:var(--s2);
  border:1px solid var(--border2);
  border-radius:8px;
  max-height:260px;
  overflow-y:auto;
  z-index:20;
  margin-top:4px;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.combo-option{
  padding:10px 14px;
  cursor:pointer;
  font-size:.86rem;
  border-bottom:1px solid var(--border);
  transition:background .12s;
}
.combo-option:last-child{border-bottom:none}
.combo-option:hover,
.combo-option.focused{background:var(--s3)}
.combo-option .combo-name{
  font-weight:600;
  color:var(--text);
  margin-bottom:2px;
}
.combo-option .combo-meta{
  font-size:.72rem;
  color:var(--muted);
  font-family:monospace;
  direction:ltr;
  text-align:right;
}
.combo-empty{
  padding:14px;
  color:var(--muted);
  text-align:center;
  font-size:.85rem;
}
.modal{
  background:var(--s2);
  border:1px solid var(--border2);
  border-radius:14px;
  padding:24px;
  width:calc(100% - 40px);
  max-width:480px;
  margin:auto;
  animation:mIn .2s ease;
  flex-shrink:0;
  overflow:hidden;
}
@keyframes mIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.modal h3{font-size:1.05rem;margin-bottom:5px}
.modal-sub{font-size:.83rem;color:var(--muted);margin-bottom:16px}
.mfoot{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}
.mfoot .btn{flex-shrink:0}
.wa-msg{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:13px;font-size:.88rem;line-height:1.75;white-space:pre-wrap;direction:ltr;color:var(--text);min-height:90px;margin-bottom:14px}

/* ── FORM ROWS ── */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media(max-width:500px){.frow{grid-template-columns:1fr}}
.flbl{font-size:.78rem;color:var(--muted2);margin-bottom:4px;font-weight:600}
.finp{width:100%}

/* ── PAYMENT HISTORY ── */
.pay-item{background:var(--s3);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.pay-item:last-child{margin-bottom:0}
.pay-info{display:flex;flex-direction:column;gap:3px}
.pay-amt{font-size:1.1rem;font-weight:900;color:var(--green)}
.pay-meta{font-size:.75rem;color:var(--muted)}
.pay-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;transition:color .2s;padding:4px}
.pay-del:hover{color:var(--red)}

/* ── UPLOAD ── */
.upzone{border:2px dashed var(--border);border-radius:10px;padding:32px;text-align:center;cursor:pointer;transition:all .2s}
.upzone:hover,.upzone.drag{border-color:var(--blue);background:var(--blue2)}
.upzone input{display:none}
.up-icon{font-size:2.2rem;margin-bottom:8px}

/* ── TOAST ── */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(70px);background:var(--s3);border:1px solid var(--border2);color:var(--text);padding:10px 22px;border-radius:8px;font-size:.88rem;font-weight:600;z-index:9999;transition:transform .25s;pointer-events:none}
#toast.show{transform:translateX(-50%) translateY(0)}

/* ── DETAIL CARD ── */
.detail-header{background:var(--s3);border-radius:10px;padding:18px;margin-bottom:16px;display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.detail-avatar{width:52px;height:52px;border-radius:50%;background:var(--blue2);border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:900;color:var(--blue);flex-shrink:0}
.detail-info{flex:1}
.detail-name{font-size:1.2rem;font-weight:900;margin-bottom:4px}
.detail-meta{font-size:.82rem;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.detail-balance{margin-right:auto;text-align:left}
.detail-bal-lbl{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.detail-bal-val{font-size:1.6rem;font-weight:900}

/* ── SUMMARY ROW ── */
.sum-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sum-card{background:var(--s3);border:1px solid var(--border);border-radius:8px;padding:12px 16px;flex:1;min-width:130px}
.sum-lbl{font-size:.7rem;color:var(--muted);font-weight:700;text-transform:uppercase;margin-bottom:4px}
.sum-val{font-size:1.3rem;font-weight:900}

/* PLAN PRICES TABLE */
.price-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.price-item{background:var(--s3);border:1px solid var(--border);border-radius:8px;padding:12px}
.price-lbl{font-size:.75rem;color:var(--muted2);margin-bottom:6px;font-weight:600}
.price-inp-row{display:flex;align-items:center;gap:6px}
.price-sym{color:var(--muted);font-size:.82rem}

/* PROFIT BREAKDOWN PANEL */
.profit-box{background:linear-gradient(135deg,rgba(255,140,66,.08),rgba(34,217,122,.08));border:1px solid var(--orange);border-radius:var(--r);padding:16px 18px;margin-bottom:16px}
.profit-title{font-size:.8rem;color:var(--orange);font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.profit-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.06);font-size:.85rem}
.profit-row:last-child{border-bottom:none;padding-top:12px;margin-top:4px;border-top:1px solid var(--orange);font-weight:900;font-size:1rem}
.profit-row span:last-child{font-weight:800}

/* ══════ Inline block 2 (was inline with modal HTML) ══════ */
.install-opt.selected{outline:2px solid var(--blue);outline-offset:2px}
.install-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border)}
.install-row:last-child{border-bottom:none}
.install-row input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--blue)}
.install-row .ir-name{font-weight:600;font-size:.88rem;flex:1}
.install-row .ir-stock{font-size:.72rem;color:var(--muted2)}
.install-row .ir-qty{width:60px;padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:'Tajawal',sans-serif;font-size:.85rem}
.install-row.selected{background:var(--blue2)}
.install-row.disabled{opacity:.5}
/* v29-15: صفّ مادة "زبون جديد" — رأس (checkbox+اسم) + block تحكّم واضح يظهر لمّا تختار */
.install-row-v2{flex-direction:column;align-items:stretch;gap:8px}
.install-row-v2 .ir-head{display:flex;align-items:center;gap:10px;width:100%}
.install-row-v2 .ir-ctrls{display:flex;gap:10px;padding:8px 10px;background:var(--bg);border:1px dashed var(--cyan);border-radius:8px}
.install-row-v2 .ir-fld{flex:1;display:flex;flex-direction:column;gap:4px}
.install-row-v2 .ir-fld>span{font-size:.7rem;color:var(--muted);font-weight:600}
.install-row-v2 .ir-fld input{width:100%;box-sizing:border-box;padding:8px;background:var(--s3);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:'Tajawal',sans-serif;font-size:.9rem}
.install-row-v2 .ir-fld input.ir-price{color:var(--green);font-weight:700}

/* ══════ مصروف من المخزون — typeahead نتائج البحث (v29-19) ══════ */
.exp-stock-results{margin-top:6px;max-height:200px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
.exp-stock-row{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 11px;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--text);font-family:'Tajawal',sans-serif;text-align:right;cursor:pointer;transition:background .12s}
.exp-stock-row:last-child{border-bottom:none}
.exp-stock-row:hover{background:var(--s3)}
.exp-stock-row.on{background:var(--s3);outline:2px solid var(--cyan);outline-offset:-2px}
.exp-stock-row .esr-name{font-weight:600;font-size:.9rem}
.exp-stock-row .esr-meta{font-size:.74rem;color:var(--muted);white-space:nowrap}
.exp-stock-row[disabled]{opacity:.55;cursor:default}
/* العناصر المختارة (cart) */
.exp-stock-cart{margin-top:10px}
.exp-cart-head{font-size:.74rem;color:var(--muted);font-weight:600;margin-bottom:6px}
.exp-cart-row{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--s3);border:1px solid var(--border);border-radius:8px;margin-bottom:6px}
.exp-cart-row.over{border-color:var(--red)}
.exp-cart-row .ecr-name{flex:1;font-weight:600;font-size:.86rem}
.exp-cart-row .ecr-unit{font-size:.74rem;color:var(--muted);white-space:nowrap}
.exp-cart-row .ecr-qty{width:56px;box-sizing:border-box;padding:6px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:'Tajawal',sans-serif;font-size:.88rem;text-align:center}
.exp-cart-row .ecr-line{min-width:62px;text-align:left;font-weight:700;color:var(--red);font-size:.84rem}
.exp-cart-row .ecr-del{background:transparent;border:none;cursor:pointer;font-size:1rem;padding:2px 4px;line-height:1}

/* ══════ Inline block 3 (was inline with modal HTML) ══════ */
.renew-opt.selected{outline:2px solid var(--blue);outline-offset:2px}

/* ══════ Inline block 4 (was inline with modal HTML) ══════ */
.bulk-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.bulk-row:hover{background:var(--s3)}
.bulk-row:last-child{border-bottom:none}
.bulk-row input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--blue)}
.bulk-row .bulk-nm{font-weight:600;font-size:.88rem}
.bulk-row .bulk-uid{font-size:.72rem;color:var(--muted);font-family:monospace;margin-top:2px}
.bulk-row .bulk-meta{font-size:.75rem;color:var(--muted2);margin-right:auto}
.bulk-row.selected{background:var(--blue2)}

/* ══════ Inline block 5 (was inline with modal HTML) ══════ */
/* v29-14: selector الدفع الموحّد لإنشاء زبون جديد (كاش/جزئي/دين/مجاني) */
.new-rem-opt.selected{outline:2px solid var(--blue);outline-offset:2px}

/* ══════ Inline block 6 (was inline with modal HTML) ══════ */
.pay-type-row{display:flex;gap:8px}
.pay-type-btn{
  flex:1;background:var(--s3);border:2px solid var(--border);
  color:var(--text);padding:10px 8px;border-radius:10px;cursor:pointer;
  font-family:'Tajawal',sans-serif;transition:all .15s;text-align:center
}
.pay-type-btn:hover{border-color:var(--border2);background:var(--s2)}
.pay-type-btn.selected{border-color:var(--blue);background:var(--blue2);box-shadow:0 0 0 1px var(--blue)}
.pay-type-icon{font-size:1.4rem;margin-bottom:4px}
.pay-type-label{font-weight:700;font-size:.9rem;margin-bottom:2px}
.pay-type-hint{font-size:.7rem;color:var(--muted)}
.pay-type-btn.selected .pay-type-hint{color:var(--blue)}
.debt-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.debt-row:hover{background:var(--s3)}
.debt-row:last-child{border-bottom:none}
.debt-row input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--blue);flex-shrink:0}
.debt-row .debt-amt{font-weight:800;color:var(--red);font-size:.95rem}
.debt-row .debt-note{font-size:.78rem;color:var(--muted2);margin-top:2px}
.debt-row .debt-date{font-size:.72rem;color:var(--muted);margin-top:2px}
.debt-row.selected{background:rgba(255,77,77,.08)}

/* ══════ Print window styles (Inline blocks 7 & 8) removed — they were for 
   the separate receipt/renewal print pop-up windows which now generate 
   their own <style> inline via document.write(). Keeping them here was 
   overriding the main app body to max-width:500px. ══════ */
/* ══════════════════════════════════════════════════════════════════════════
   v29-104 — غرفة تحكّم الـ super-admin (S1 + S2)
   الشاشة كانت جدول ١٠ أعمدة + ٨ كروت صامتة + <select>. صارت: كروت بتنضغط
   (كل كرت = فلتر محفوظ)، chips بدل الـ select، وعالموبايل كروت بدل جدول
   بيتزحّط أفقيّاً. ما في لون بيحمل معنى لحالو — الشارة نصّ + لون.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── كروت الرأس ── */
.sa-kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;margin-bottom:14px}
.sa-kcard{position:relative;transition:border-color .15s,transform .1s}
.sa-kcard[role="button"]{cursor:pointer}
.sa-kcard[role="button"]:hover{border-color:var(--muted2)}
.sa-kcard[role="button"]:active{transform:scale(.985)}
.sa-kcard[role="button"]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.sa-kcard-on{border-color:var(--cyan)!important;box-shadow:0 0 0 1px var(--cyan) inset}
.sa-ksub{font-size:.74rem;color:var(--muted2);margin-top:4px;line-height:1.5}

/* ── chips الفلتر ── */
.sa-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.sa-chip{font-size:.8rem;padding:6px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--bd);background:transparent;color:var(--muted2);
  white-space:nowrap;font-family:inherit;transition:background .15s,color .15s,border-color .15s}
.sa-chip:hover{border-color:var(--muted2);color:var(--fg)}
.sa-chip-on{background:var(--cyan);border-color:var(--cyan);color:#05121e;font-weight:700}
.sa-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ── هدف اللمس: القبض والتذكير إجراءات مصاري، مش أزرار .62rem ── */
.sa-collect,.sa-remind{font-size:.8rem}
@media (pointer:coarse){
  .sa-collect,.sa-remind{min-height:38px;padding-inline:12px}
  .sa-chip{min-height:38px}
}

/* ── هيكل عظمي بدل «⏳ جاري التحميل...» ── */
.skel{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--s3) 25%,var(--bd) 37%,var(--s3) 63%);
  background-size:400% 100%;animation:skel-sh 1.2s ease-in-out infinite}
@keyframes skel-sh{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}

/* ══ S2 — عالموبايل: كروت بدل جدول ══
   الجدول ١٠ أعمدة، والمالك بيشغّل هالشاشة من تلفونو: خانة الاشتراك والإجراءات
   بتصيرو برّا الشاشة بعد الزحط. الكرت بيخلّي السطر الأهمّ (الاشتراك) تحت الاسم
   مباشرةً، و«قبض» بمتناول الإبهام. وزنين خطّ بس: الاسم ٧٠٠، الباقي ٤٠٠. */
@media(max-width:900px){
  #pg-superadmin .twrap{overflow-x:visible}
  #pg-superadmin thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #pg-superadmin table,#pg-superadmin tbody,#pg-superadmin tr,#pg-superadmin td{display:block;width:auto}
  #pg-superadmin tbody tr{border:1px solid var(--bd);border-radius:12px;background:var(--s2);
    padding:12px;margin-bottom:10px}
  #pg-superadmin tbody td{border:none;padding:3px 0;text-align:right}
  /* الترقيم ورقم الأعضاء وآخر نشاط بيروحو عالسطر الخفيف تحت */
  #pg-superadmin tbody td[data-c="idx"]{display:none}
  #pg-superadmin tbody td[data-c="sub"]{margin-top:8px;padding-top:8px;border-top:1px solid var(--bd)}
  #pg-superadmin tbody td[data-c="act"]{margin-top:8px}
  #pg-superadmin .sa-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.76rem;color:var(--muted2)}
  #pg-superadmin .sa-acts{justify-content:flex-start}
}

/* ── S5: شريط التسوية بصفحة المقبوضات ──
   التلاتة جنب بعض بأسمائهن: مقبوض (كاش فعلي) · متوقّع (لو الكل جدّد) ·
   مستحقّين (قيمة شهر واحد لكل متأخّر). رقم بلا اسم هو يلّي بيخلّي حدا
   يقرا «متوقّع» ويحسبها مقبوضة. */
.sa-recon{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  padding:12px;background:var(--s3);border:1px solid var(--bd);border-radius:10px;margin:0 4px 8px}
.sa-recon-l{font-size:.76rem;color:var(--muted2);margin-bottom:3px}
.sa-recon-v{font-size:1.3rem;font-weight:800}
.sa-recon-note{font-size:.74rem;color:var(--muted2);line-height:1.7;margin:0 4px 12px}

/* ── v29-105: شريط «اشتراك ترافيرا منتهي» ──
   بيضلّ ظاهر طول ما الاشتراك منتهي. **ما بينسكّر** — هوّي شريط حالة مش تنبيه.
   بيقعد بالـ flow العادي فوق المحتوى — ما بيغطّي ولا زرّ، والتطبيق شغّال كامل
   وراه، وهيدا شرط المالك من أوّل يوم («ما بيوقّف الـ system»). */
.topup-banner{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  padding:8px 14px;font-size:.85rem;font-weight:700;
  /* ⚠️ ألوان صريحة مش var(--yellow2)/var(--red2): هودي 10% شفافيّة — الشريط
     كان بيضيع عالخلفيّة. شريط لازم ينشاف، وبنفس اللحظة لازم يكون واضح
     بالـ dark وبالـ light، فمنثبّت اللونين هون. */
  background:#f5b50a;color:#241a00;border-bottom:1px solid #c98f00;
  text-shadow:none;
  /* ⚠️ مش sticky عن قصد (مراجعة أمنيّة M1): كان top:0/z-60 جنب topbar top:0/z-300
     — عالكمبيوتر بينداعس وراه وبيختفي أوّل scroll (يعني مش دايم)، وعالموبايل
     بيضلّ منّو سطر واقف فوق المحتوى وبيبلع الكبسات. بالـ flow العادي ما بيغطّي
     ولا زرّ، والحضور الدايم من الحبّة بالـ topbar + النافذة المتكرّرة. */
  position:relative
}
.topup-banner .btn{font-size:.78rem;padding:5px 12px}
@media(max-width:600px){ .topup-banner{font-size:.78rem;padding:7px 10px;gap:7px} }
@media print{ .topup-banner{display:none!important} }

/* ── PACK107 (v29-111): لائحة «حوالات غير معروفة» — cards مش جدول.
   الشاشة الفعليّة تلفون: صفّ جدول بستّ خانات بيصير سطر مقصوص. ── */
.ut-card{background:var(--s3);border:1px solid var(--border);border-radius:10px;
  padding:10px 11px;margin-bottom:8px}
.ut-top{font-size:.88rem;line-height:1.6}
.ut-note{font-size:.78rem;color:var(--muted2);margin-top:3px;line-height:1.6;word-break:break-word}
.ut-age{font-size:.76rem;margin-top:4px}
.ut-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
@media (pointer:coarse){ .ut-acts .btn{min-height:38px} }

/* ══════════════════════════════════════════════════════════════════════════
   v29-112 — superadmin mobile: صفحة «👑 إدارة المنصّة» ونوافذها على تلفون
   ──────────────────────────────────────────────────────────────────────────
   كل شي هون **إضافة فوق** قواعد v29-104، ما انلمست ولا قاعدة قديمة:
   منستعمل مُعرِّف مضاعف (#pg-superadmin #superAdminTBody) تا يربح بالأولويّة
   بلا تعديل، ولأنّو كمان بيفرز جدول الـ ISPs عن جدول المقبوضات (التنين جوّا
   نفس الـ #pg-superadmin، وقواعد v29-104 كانت واقعة عالتنين).

   ما بينطبّق ولا سطر منّو فوق 900px → شاشة الكمبيوتر متل ما هيّي بالحرف.
   ══════════════════════════════════════════════════════════════════════════ */

/* عناوين الخانات عالكرت (👥 زبائن / 👔 أعضاء / أشهر …). عالكمبيوتر رأس الجدول
   موجود فمنخبّيها؛ عالموبايل الرأس مخفي والرقم العاري بلا معنى. */
.sa-ml{display:none}

/* القائمة المنسدلة (⋮): سقف طول + scroll — حماية أخيرة لو القائمة أطول من الشاشة
   كلّها (١٧ بند + خطّ متكبّر من إعدادات التلفون). ما بيغيّر شي عالكمبيوتر: طولها
   ~530px وأيّ نافذة عاديّة أطول. */
#saActionsMenu{max-height:calc(100vh - 16px);overflow-y:auto;overscroll-behavior:contain}

/* ══ ≤900px: الصفحة ══ */
@media(max-width:900px){
  /* ⚠️ --bd و--fg **ما إلهن تعريف بهالملف** (v29-104 كتبهن بدل --border/--text).
     النتيجة: border:1px solid var(--bd) بيصير invalid وبيسقط كلّياً → كروت الجدول
     بلا حدود، وخلفيّتها var(--s2) = نفس خلفيّة الـ panel، يعني الصفوف كانت
     **بتذوب ببعضها**. منعرّفهن هون بس (جوّا الموبايل + جوّا صفحات الـ SA) تا
     نصلّح الكروت والـ chips والـ skeleton بلا ما نغيّر شكل الكمبيوتر. */
  #pg-superadmin,#pg-saradius{--bd:var(--border);--fg:var(--text)}

  /* أزرار رأس اللوحة: من ٣ أسطر أزرار .78rem بعلوّ ٢٨px لشبكة عمودين بهدف لمس ٤٠px */
  #pg-superadmin .sa-hbtns,#pg-saradius .sa-hbtns{display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%}
  #pg-superadmin .sa-hbtns .btn,#pg-saradius .sa-hbtns .btn{min-height:40px;
    justify-content:center;font-size:.75rem;padding:6px 8px;width:100%}
  #pg-saradius .sa-hbtns{grid-template-columns:1fr}

  /* شريط البحث + أزرار الأدوات: البحث سطر كامل، والأزرار عمودين بهدف لمس ٤٢px.
     (min-width/max-width كانوا inline فلازم !important). */
  #pg-superadmin .sa-toolbar,#pg-saradius .sa-toolbar{display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #pg-superadmin .sa-toolbar #saSearch,#pg-saradius .sa-toolbar #saRadiusSearch{
    grid-column:1/-1;width:100%;min-width:0!important;max-width:none!important}
  #pg-superadmin .sa-toolbar .btn,#pg-saradius .sa-toolbar .btn{min-height:42px;
    justify-content:center;font-size:.8rem;padding:8px 6px;width:100%}
  #pg-saradius .sa-toolbar .btn{grid-column:1/-1}
  /* #saRadiusSortBtn ما إلو class لون (btn bsm بس) → بيرجع لخلفيّة الزرّ
     الافتراضيّة تبع المتصفّح = بلاطة بيضا. عالكمبيوتر زغير فما بيبيّن؛ عالموبايل
     صار بعرض الشاشة. منلوّنو هون بس — شكل الكمبيوتر ما منلمسو. */
  #pg-saradius .sa-toolbar #saRadiusSortBtn{background:var(--s3);border-color:var(--border);color:var(--muted2)}

  /* chips الفلتر: هلّق إلها حدود (فوق) + هدف لمس حتّى بلا pointer:coarse */
  #pg-superadmin .sa-chips .sa-chip{min-height:38px;display:inline-flex;align-items:center}

  /* ── جدول الـ ISPs → كرت ──
     كان stack عمودي من ٩ أسطر بلا حدود. صار: اسم + حالة بسطر، بعدين المالك،
     بعدين سطر meta أفقي (زبائن · أعضاء · آخر نشاط)، بعدين الاشتراك والقبض،
     وبالآخر الإجراءات. */
  #pg-superadmin #superAdminTBody tr{display:flex;flex-wrap:wrap;align-items:center;
    gap:0 10px;border:1px solid var(--border2);background:var(--s1);
    border-radius:12px;padding:11px 12px;margin-bottom:10px}
  #pg-superadmin #superAdminTBody td{padding:2px 0;border:none;text-align:right}
  #pg-superadmin #superAdminTBody td[data-c="idx"]{display:none}
  #pg-superadmin #superAdminTBody td[data-c="nm"]{flex:1 1 100%;order:1;min-width:0}
  #pg-superadmin #superAdminTBody td[data-c="nm"] .nm{white-space:normal;font-size:.95rem;line-height:1.5}
  #pg-superadmin #superAdminTBody td[data-c="st"]{flex:0 0 auto;order:2;margin-top:2px}
  #pg-superadmin #superAdminTBody td[data-c="own"]{flex:1 1 100%;order:3;margin-top:4px}
  #pg-superadmin #superAdminTBody td[data-c="own"] .nm{max-width:none!important;font-size:.84rem;font-weight:600}
  #pg-superadmin #superAdminTBody td[data-c="own"] a{max-width:none!important}
  #pg-superadmin #superAdminTBody td[data-c="mob"]{flex:1 1 100%;order:4;margin-top:2px}
  #pg-superadmin #superAdminTBody td[data-c="use"],
  #pg-superadmin #superAdminTBody td[data-c="mem"],
  #pg-superadmin #superAdminTBody td[data-c="act2"]{display:inline-flex;flex:0 0 auto;
    align-items:center;flex-wrap:wrap;gap:4px;margin-top:6px;font-size:.78rem;color:var(--muted2)}
  #pg-superadmin #superAdminTBody td[data-c="use"]{order:5}
  #pg-superadmin #superAdminTBody td[data-c="mem"]{order:6}
  #pg-superadmin #superAdminTBody td[data-c="act2"]{order:7}
  #pg-superadmin #superAdminTBody td[data-c="use"] div,
  #pg-superadmin #superAdminTBody td[data-c="act2"] div{display:inline}
  #pg-superadmin #superAdminTBody .sa-ml{display:inline;color:var(--muted);font-size:.72rem;font-weight:600}
  /* الاشتراك: أهمّ سطر بالصفحة — خطّ فاصل فوقو ومساحة تنفّس */
  #pg-superadmin #superAdminTBody td[data-c="sub"]{flex:1 1 100%;order:8;
    margin-top:9px;padding-top:9px;border-top:1px solid var(--border)}
  #pg-superadmin #superAdminTBody td[data-c="act"]{flex:1 1 100%;order:9;margin-top:9px}
  #pg-superadmin #superAdminTBody .sa-acts{gap:8px}
  #pg-superadmin #superAdminTBody .sa-acts .btn{min-height:42px;font-size:.82rem;padding:8px 12px}
  #pg-superadmin #superAdminTBody .sa-acts .btn:not(.sa-kebab){flex:1;justify-content:center}
  #pg-superadmin #superAdminTBody .sa-acts .sa-kebab{flex:0 0 52px;justify-content:center;font-size:1.2rem}
  /* القبض والتذكير = إجراءات مصاري: هدف لمس حتّى عالمتصفّح بلا لمس */
  #pg-superadmin #superAdminTBody .sa-collect,
  #pg-superadmin #superAdminTBody .sa-remind{min-height:40px;padding-inline:14px}
  /* صفّ «ما في نتائج» بياخد الكرت كلّو */
  #pg-superadmin #superAdminTBody td[colspan]{flex:1 1 100%;text-align:center}

  /* ── جدول المقبوضات → كرت كمان ──
     قواعد v29-104 كانت واقعة عليه كمان (نفس الـ #pg-superadmin): thead مخفي
     وكل خانة سطر → «2026-09-01 / ISP / 1 / $20.00 / Whish» بلا ولا عنوان. */
  #pg-superadmin #saRevenueBody tbody tr{display:flex;flex-wrap:wrap;align-items:center;
    gap:4px 10px;border:1px solid var(--border2);background:var(--s1);
    border-radius:10px;padding:10px 11px;margin-bottom:8px}
  #pg-superadmin #saRevenueBody td{padding:0;border:none;text-align:right!important}
  #pg-superadmin #saRevenueBody td[data-c="isp"]{flex:1 1 100%;order:1;font-weight:700;font-size:.9rem;line-height:1.5}
  #pg-superadmin #saRevenueBody td[data-c="amt"]{order:2;font-size:1.02rem;margin-top:3px}
  #pg-superadmin #saRevenueBody td[data-c="met"]{order:3;margin-top:3px}
  #pg-superadmin #saRevenueBody td[data-c="mo"]{order:4;margin-top:3px;font-size:.78rem;color:var(--muted2)}
  #pg-superadmin #saRevenueBody td[data-c="d"]{order:5;margin-top:3px;margin-inline-start:auto;font-size:.78rem;color:var(--muted2)}
  #pg-superadmin #saRevenueBody td[data-c="note"]{flex:1 1 100%;order:6;line-height:1.6}
  #pg-superadmin #saRevenueBody td[data-c="note"]:empty{display:none}
  /* «إلغاء» = عمليّة هدّامة: هدف لمس محترم، بس **مش** أعرض عنصر بالكرت.
     زرّ أحمر بعرض الشاشة بكل صفّ = دعوة لكبسة غلط. */
  #pg-superadmin #saRevenueBody td[data-c="act"]{flex:1 1 100%;order:7;margin-top:8px;text-align:left!important}
  #pg-superadmin #saRevenueBody td[data-c="act"] .btn{min-height:40px;padding-inline:20px}
  #pg-superadmin #saRevenueBody td[colspan]{flex:1 1 100%;text-align:center!important}
  #pg-superadmin #saRevenueBody .sa-ml{display:inline;color:var(--muted);font-size:.72rem;font-weight:600}
  #pg-superadmin #saRevenueBody .sa-rev-tools{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #pg-superadmin #saRevenueBody .sa-rev-tools select{grid-column:1/-1;max-width:none!important;width:100%}
  #pg-superadmin #saRevenueBody .sa-rev-tools .btn{min-height:40px;justify-content:center;width:100%}

  /* ── جدول الـ RADIUS → كرت (كان بيتزحّط ٢٥٧px أفقي وزرّ الإعداد برّا الشاشة) ── */
  #pg-saradius .twrap{overflow-x:visible}
  #pg-saradius thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #pg-saradius table,#pg-saradius tbody{display:block;width:auto}
  #saRadiusTBody tr{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;
    border:1px solid var(--border2);background:var(--s1);border-radius:12px;
    padding:11px 12px;margin-bottom:10px}
  #saRadiusTBody td{display:block;border:none;padding:2px 0;text-align:right}
  #saRadiusTBody td[data-c="idx"]{display:none}
  #saRadiusTBody td[data-c="isp"]{flex:1 1 100%;order:1;min-width:0}
  #saRadiusTBody .sa-uuid{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #saRadiusTBody td[data-c="st"]{flex:1 1 100%;order:2;margin-top:4px}
  #saRadiusTBody td[data-c="prov"],#saRadiusTBody td[data-c="link"],#saRadiusTBody td[data-c="map"]{
    display:inline-flex;flex:0 0 auto;align-items:center;gap:4px;margin-top:6px;font-size:.8rem}
  #saRadiusTBody td[data-c="prov"]{order:3}
  #saRadiusTBody td[data-c="link"]{order:4}
  #saRadiusTBody td[data-c="map"]{order:5}
  #saRadiusTBody td[data-c="act"]{flex:1 1 100%;order:6;margin-top:9px}
  #saRadiusTBody td[data-c="act"] .btn{width:100%;min-height:42px;justify-content:center;font-size:.85rem}
  #saRadiusTBody td[colspan]{flex:1 1 100%;text-align:center}
  #saRadiusTBody .sa-ml{display:inline;color:var(--muted);font-size:.72rem;font-weight:600}
}

/* ══ ≤600px: كروت الرأس ══
   minmax(165px,1fr) كان بينهار لعمود واحد تحت ~٣٧٥px عرض متاح → خمس كروت
   طوال (~٥٧٠px) قبل ما تشوف أوّل ISP. عمودين مضمونين + الكرت الأخير (فيه ٤
   أرقام جوّاتو) سطر كامل. */
@media(max-width:600px){
  #pg-superadmin .sa-kgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #pg-superadmin .sa-kcard{padding:10px 11px;min-width:0}
  #pg-superadmin .sa-kcard .sum-lbl{font-size:.66rem;letter-spacing:0}
  #pg-superadmin .sa-kcard .sum-val{font-size:1.2rem}
  #pg-superadmin .sa-ksub{font-size:.68rem;line-height:1.5;margin-top:3px}
  #pg-superadmin .sa-kgrid>.sa-kcard:last-child{grid-column:1/-1}
  #pg-superadmin .sa-recon{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px}
  #pg-superadmin .sa-recon>div:last-child{grid-column:1/-1}
  #pg-superadmin .sa-recon-v{font-size:1.15rem}
}

/* ══ ≤600px: قائمة الـ ⋮ → ورقة سفليّة ══
   الـ JS بيحطّ left/top inline (fixed جنب الكبسة). عالتلفون الكبسة بتكون عادةً
   بالنصّ السفلي، والقائمة ١٧ بند: كانت تطلع فوق وتنقصّ من تحت. الورقة السفليّة
   بتحلّ الموضوع بلا ما نعيد حساب أي شي — ولهيك الـ !important (بيغلب الـ inline).
   ⚠️ الـ scroll جوّاتها ما بيسكّرها: في استثناء بالـ listener (app.js — v29-112). */
@media(max-width:600px){
  #saActionsMenu{left:8px!important;right:8px!important;top:auto!important;
    bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;
    width:auto;min-width:0;max-height:72vh;overflow-y:auto;
    border-radius:16px;box-shadow:0 -10px 40px rgba(0,0,0,.6)}
  #saActionsMenu .sa-mi{min-height:46px;font-size:.88rem;padding:10px 12px}
  #saActionsMenu .sa-mlabel{font-size:.66rem;padding:9px 12px 4px}
}

/* ══ ≤768px: نوافذ الـ super-admin → ورقة سفليّة ══
   ⚠️ الـ @media(max-width:768px) القديم (سطر ~245) بيحاول يعمل هيدا لكل النوافذ،
   بس قواعد .modal الأساسيّة (سطر ~590) بتجي **بعدو** بنفس الأولويّة فبتغلبو:
   الـ padding بيضلّ 24px، الـ radius 14px، والـ margin:auto (نصّ الشاشة) بدل
   القعر. ما منلمس هالكتلة العامّة (بتمسّ كل نوافذ التطبيق) — منصلّحها هون
   لنوافذ الـ SA بس، عبر الـ id يلّي أولويّتو أعلى من .modal. */
@media(max-width:768px){
  #ovSaBulkWA,#ovBroadcastNotif,#ovDeleteIsp,#ovIspWa,#ovSaRadius,#ovBulkExpiry,
  #ovIspNote,#ovSaCustLog,#ovSaAddCustomer,#ovIspBilling,#ovSaCollect,#ovMonthShift{
    padding:0;align-items:flex-end;--bd:var(--border);--fg:var(--text)}
  #ovSaBulkWA .modal,#ovBroadcastNotif .modal,#ovDeleteIsp .modal,#ovIspWa .modal,
  #ovSaRadius .modal,#ovBulkExpiry .modal,#ovIspNote .modal,#ovSaCustLog .modal,
  #ovSaAddCustomer .modal,#ovIspBilling .modal,#ovSaCollect .modal,#ovMonthShift .modal{
    margin:auto 0 0;border-radius:16px 16px 0 0;padding:16px 14px;
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
    max-height:92vh;overflow-y:auto;overscroll-behavior:contain}
  /* صفوف الأزرار جوّا النوافذ: عمودين، هدف لمس ٤٤px، وما في زرّ بينقصّ */
  #ovSaBulkWA .sa-mbtns,#ovSaAddCustomer .sa-mbtns,#ovIspBilling .sa-mbtns,#ovSaCollect .sa-mbtns{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #ovSaBulkWA .sa-mbtns .btn,#ovSaAddCustomer .sa-mbtns .btn,
  #ovIspBilling .sa-mbtns .btn,#ovSaCollect .sa-mbtns .btn{
    min-height:44px;justify-content:center;width:100%;font-size:.82rem}
  /* الزرّ الرئيسي بياخد سطر كامل لمّا يكونوا ٣ — تا ما يقعد نصّ سطر بالقعر */
  #ovSaAddCustomer .sa-mbtns #saAddCustGoBtn,#ovSaBulkWA .sa-mbtns #saBulkSendBtn{grid-column:1/-1}
  /* فلاتر سجلّ الزبائن: التلاتة كانوا يتزاحموا بسطر واحد و«الأحدث أوّل» بتنقصّ */
  #ovSaCustLog .sa-logfilters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #ovSaCustLog .sa-logfilters #saLogTeam{grid-column:1/-1;min-width:0!important}
  #ovSaCustLog .sa-logfilters select{max-width:none!important;width:100%}
  /* scroll واحد بس: النافذة نفسها. اللائحة كانت جوّاتها scroll تاني (55vh). */
  #ovSaCustLog #saCustLogBody{max-height:none!important;overflow-y:visible!important}
  /* أهداف لمس داخل نوافذ الـ SA */
  #ovSaCollect .sa-chips .sa-chip{min-height:40px;display:inline-flex;align-items:center}
  #ovSaBulkWA .btn,#ovBroadcastNotif .btn,#ovDeleteIsp .btn,#ovIspWa .btn,#ovSaRadius .btn,
  #ovBulkExpiry .btn,#ovIspNote .btn,#ovSaCustLog .btn,#ovSaAddCustomer .btn,
  #ovIspBilling .btn,#ovSaCollect .btn,#ovMonthShift .btn{min-height:38px}
  #ovSaBulkWA .modal>div:first-child .btn.bsm,#ovBroadcastNotif .modal>div:first-child .btn.bsm,
  #ovDeleteIsp .modal>div:first-child .btn.bsm,#ovIspWa .modal>div:first-child .btn.bsm,
  #ovSaRadius .modal>div:first-child .btn.bsm,#ovBulkExpiry .modal>div:first-child .btn.bsm,
  #ovIspNote .modal>div:first-child .btn.bsm,#ovSaCustLog .modal>div:first-child .btn.bsm,
  #ovSaAddCustomer .modal>div:first-child .btn.bsm,#ovIspBilling .modal>div:first-child .btn.bsm,
  #ovSaCollect .modal>div:first-child .btn.bsm,#ovMonthShift .modal>div:first-child .btn.bsm{
    min-width:44px;justify-content:center}
}

/* ══ v29-113: chips «ترتيب:» عالموبايل (#saSortChips) ══
   رأس الجدول مخفي ≤900px (v29-104) فما كان في ولا طريقة ترتّب عالتلفون. الـ chips
   بتنادي نفس دوال الـ <th> (saSortByCreated/saSortByCustomers/saSortByExpiry)،
   والسهم + الحالة (sa-chip-on) بيتحدّثو من _renderSATable. عالكمبيوتر مخفيّة —
   الرأس موجود هونيك، فالشكل ما بيتغيّر. */
.sa-sortchips{display:none}
@media(max-width:900px){
  #pg-superadmin .sa-sortchips{display:flex;align-items:center;gap:6px;margin-top:8px}
  #pg-superadmin .sa-sortlbl{font-size:.75rem;color:var(--muted2);padding:0 2px}
  #pg-superadmin .sa-sortchips .sa-chip{min-height:38px;display:inline-flex;align-items:center;gap:4px}
}

/* ══════════════════════════════════════════════════════════════════════════
   v29-114 — «🔍 فحص المطابقة مع RADIUS»
   ──────────────────────────────────────────────────────────────────────────
   كلّو مضاف بالآخر: ولا قاعدة قديمة انلمست. الأسماء كلّها تحت البادئة `rrc-`
   (radius reconcile) فما في احتمال تصادم مع class موجود.

   النافذة بتعرض لائحتين ممكن يكونوا مئات الصفوف، فالـ scroll لازم يكون **جوّا**
   النافذة — مش تحت الصفحة — وعالتلفون بتصير ورقة سفليّة متل نوافذ الـ SA (v29-112).
   ══════════════════════════════════════════════════════════════════════════ */
.rrc-box{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px}
.rrc-trow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border)}
.rrc-trow:last-child{border-bottom:none}

/* رأس النافذة: تلات أرقام — ترافيرا · اللوحة · متطابق. هيدا أوّل شي بيتقرا. */
.rrc-head{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
/* v29-115 — صفّ تاني: «نشط عندك» مقابل «فعّال عاللوحة». هيدا سؤال المالك الحرفي
   («384 نشط عندي مقابل 382 عاللوحة»)، فلازم ينقرا بنظرة وحدة. تنين بس، فبيضلّوا
   جنب بعض حتّى على 320 بكسل — ما في stack بالـ ≤400px. */
.rrc-head2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
/* ⚠️ (مراجعة UX S2) القياس الأساسي هوّي الأرضيّة، مش قاعدة الـ ≤400px: .68rem كان
   بينرسم 10.88 بكسل عربي على آيفون 414/430 — يعني الخطّ بيصغر على تلفون أكبر، لأنّ
   أرضيّة الـ ≤400px ما بتوصل لهنيك. .75rem = 12 بكسل عند جذر 16، بكل العروض. */
.rrc-ksub{font-size:.75rem;color:var(--muted2);text-align:center;line-height:1.5}
.rrc-kpi{background:var(--s2);border:1px solid var(--border);border-radius:10px;
  padding:9px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.rrc-kl{font-size:.68rem;color:var(--muted2);letter-spacing:.3px}
.rrc-kv{font-size:1.25rem;font-weight:800;line-height:1.1}
.rrc-ok{color:var(--green)}
.rrc-meta{font-size:.78rem;color:var(--muted2);margin-bottom:10px;line-height:1.6}
.rrc-cached{color:var(--muted)}
.rrc-warn{background:var(--yellow2);border:1px solid var(--yellow);color:var(--yellow);
  border-radius:8px;padding:8px 10px;font-size:.78rem;line-height:1.6;margin-bottom:10px}
.rrc-note{font-size:.76rem;color:var(--muted2);margin-top:8px;line-height:1.6}
.rrc-allgood{text-align:center;padding:26px 12px;font-size:1rem;font-weight:700;color:var(--green)}

/* الخانات الأربع: <details> — بلا حالة بالـ JS، وبتشتغل بلا كبسة على الكيبورد كمان. */
.rrc-sec{border:1px solid var(--border);border-radius:10px;margin-bottom:8px;background:var(--s1);overflow:hidden}
.rrc-sum{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 12px;font-size:.86rem;font-weight:700;min-height:42px}
.rrc-sum::-webkit-details-marker{display:none}
/* الـ display:flex فوق بيلغي display:list-item فبيختفي المثلّث الأصلي بكل المتصفّحات،
   وبلا بديل الخانة المسكّرة بتبيّن سطر عنوان ميت. هيدا بديلو — CSS بس، بلا ولا
   تعديل عالـ HTML. مسكّر = مدوّر ٩٠° فبيشاور عالبداية (يمين بالـ RTL)، متل ما
   بيعمل الـ <details> الأصلي بالضبط. */
.rrc-sum::before{content:'▾';color:var(--muted2);font-size:.75rem;line-height:1;
  display:inline-block;flex:0 0 auto;transition:transform .15s ease}
.rrc-sec:not([open]) .rrc-sum::before{transform:rotate(90deg)}
.rrc-sum>span:first-child{flex:1;min-width:0}
/* ⚠️ العدّاد صار .bdg — نفس البادج المستعمل بكل التطبيق. اللون الأسود المكتوب بالإيد
   يلّي كان هون كان بيسقط تحت عتبة التباين بالثيم الفاتح (٣.٠:١ على الأحمر). الـ .bdg
   عندو زوج (خلفيّة شفافة + نصّ ملوّن) مضبوط بالثيمين، فما في داعي لولا لون جديد. */
.rrc-badge{min-width:28px;justify-content:center}
.rrc-zero{background:var(--s3);color:var(--muted2)}
/* ⚠️ scroll واحد بالنافذة عكل عرض، مش أربع لوحات scroll جوّا وحدة. القاعدة الأساسيّة
   .modal فيها overflow:hidden وبلا سقف طول، فعالكمبيوتر كانت النافذة بتطول ٢٠٠٠ بكسل
   والصفحة هي يلّي بتزحّط، وجوّاتها أربع خانات كل وحدة ٤٦vh مع overscroll-behavior
   :contain — يعني لمّا تخلص اللائحة الـ scroll بيوقف ميت بدل ما يكمّل. الـ id هون
   أولويّتو أعلى من .modal لحالها، فبلا !important. بلوك الـ ≤768px بعدو بيغلب هيدا. */
#ovRadiusReconcile .modal{max-height:88vh;overflow-y:auto;overscroll-behavior:contain}
.rrc-rows{border-top:1px solid var(--border)}
.rrc-row{padding:9px 12px;border-bottom:1px solid var(--border);line-height:1.6}
.rrc-row:last-child{border-bottom:none}
.rrc-click{cursor:pointer}
.rrc-click:hover{background:var(--s2)}
.rrc-click:active{background:var(--s3)}
/* الـ cursor والـ hover التنين ما إلن وجود عالتلفون، فصفّ بيفتح الزبون وصفّ ما بيفتح
   كانوا بيطلعوا نفس الشي بالحرف. هيدي التلميحة بتبقى ظاهرة دايماً. */
.rrc-open{color:var(--muted);font-size:.72rem;margin-inline-start:6px;white-space:nowrap}
/* ⚠️ text-align:right مع direction:ltr — بالضبط متل .combo-meta (فوق). بلاها،
   «text-align:start» جوّا عنصر direction:ltr بينحلّ **يسار**، فاليوزر بينرسم بأقصى
   شمال الصفّ واسم الزبون بأقصى اليمين: ٧٨٤ بكسل فاضية بين المعرّف وصاحبو. */
.rrc-u{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;
  word-break:break-all;unicode-bidi:isolate;text-align:right}
.rrc-n{font-size:.86rem;font-weight:600;margin-top:1px}
.rrc-m{font-size:.74rem;color:var(--muted2);margin-top:2px}
.rrc-st{color:var(--muted)}
/* حالات الزبون بألوان التطبيق نفسها: نشط أخضر · منتهي أحمر · موقوف مكتوم. */
.rrc-st-on{color:var(--green)}
.rrc-st-off{color:var(--red)}
.rrc-st-pause{color:var(--muted)}
.rrc-chip{display:inline-block;background:var(--s3);color:var(--muted2);border-radius:999px;
  padding:1px 8px;font-size:.68rem;font-weight:600;margin-inline-start:4px}
.rrc-empty{padding:12px;font-size:.8rem;color:var(--muted);text-align:center}
/* v29-115 — سطر «+ N كمان»: بينزل بس لمّا الخانة تتقصّ عند 25 صفّ. مكتوم متل .rrc-empty
   لأنّو مش نتيجة — بيقول «الباقي بالـ Excel»، مش «في مشكلة زيادة». */
.rrc-more{padding:10px 12px;font-size:.78rem;color:var(--muted2);text-align:center}
/* v29-115 — عنوانين صغار جوّا خانة «حالة مختلفة»: المقطوع والمجّاني. الخطّ الفاصل
   فوق العنوان بيفصل المجموعتين؛ أوّل عنوان بالخانة ما إلو خطّ لأنّو تحتو رأس الخانة
   أصلاً. العنوان ما بينرسم أبداً لمّا مجموعتو فاضية (شوف smGroup بـ app.js). */
.rrc-sub{padding:8px 12px 2px;font-size:.8rem;font-weight:700;border-top:1px solid var(--border)}
.rrc-rows>.rrc-sub:first-child{border-top:none}
/* .78rem = 12.5 بكسل — نفس سبب .rrc-ksub فوق (مراجعة UX S2). */
.rrc-hint{padding:0 12px 8px;font-size:.78rem;color:var(--muted2);line-height:1.6}

/* ══ ≤768px: النافذة → ورقة سفليّة ══
   نفس علاج v29-112 لنوافذ الـ SA، وللسبب نفسو: قواعد .modal الأساسيّة بتجي بعد
   الـ @media العام فبتغلبو، فلازم id أولويّتو أعلى. scroll واحد بس: النافذة —
   واللائحة جوّاتها بتفكّ سقفها تا ما يصير scroll جوّا scroll عالتلفون. */
@media(max-width:768px){
  #ovRadiusReconcile{padding:0;align-items:flex-end}
  #ovRadiusReconcile .modal{margin:auto 0 0;border-radius:16px 16px 0 0;padding:14px 12px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
    max-height:92vh;overflow-y:auto;overscroll-behavior:contain}
  #ovRadiusReconcile .btn{min-height:38px}
  /* ⚠️ min-WIDTH كمان، مش بس min-height: الـ ✕ كان ٢٥ بكسل عرض وهوّي المخرج الوحيد من
     الورقة عالتلفون (ما في ESC، والكبسة عالخلفيّة انضافت بنفس الموجة). جنبو زرّ
     «📤 Excel» — فكل كبسة طايشة بتنزّل ملف. نفس قاعدة نوافذ الـ SA (v29-112). */
  #ovRadiusReconcile .modal>div:first-child .btn.bsm{min-width:44px;justify-content:center}
  #ovRadiusReconcile .rrc-rows{max-height:none;overflow-y:visible}
  #ovRadiusReconcile .rrc-sum{min-height:46px}
  #ovRadiusReconcile .rrc-row{padding:11px 12px}
  .rrc-trow{flex-wrap:wrap}
  .rrc-trow .btn{min-height:40px;width:100%;justify-content:center}
}

/* ══ ≤400px (آيفون SE / أندرويد صغير): الأرقام التلاتة لازم تضلّ بسطر واحد ══ */
/* ⚠️ أرضيّة ١٢ بكسل. .rrc-kl هوّي الكلمة يلّي بتقول إذا «320» رقم ترافيرا أو رقم
   اللوحة — وكان عم ينرسم ٩.٩ بكسل عربي على تلفون. تلات القياسات هون كلّها .75rem
   = ١٢ بكسل بالضبط عند جذر ١٦. الشبكة بتضلّ تتّسع: الكلمات قصيرة. */
@media(max-width:400px){
  .rrc-kpi{padding:8px 4px}
  .rrc-kl{font-size:.75rem}
  .rrc-kv{font-size:1.05rem}
  .rrc-sum{font-size:.8rem;padding:10px}
  .rrc-m{font-size:.75rem}
  .rrc-chip{font-size:.75rem}
  .rrc-open{font-size:.75rem}
}

/* ══════════════════════════════════════════════════════════════════════
   v29-116 — «💵 تحصيلي» (صفحة الجابي)
   مقيسة بـ Chrome على العرض الحقيقي (نفس الملف هيدا)، مش تخمين:
     • ديسكتوب/تابلت (>500px): ٥ أعمدة، تاريخ كامل، صفر سحب أفقي (٧٦٨px → جدول ٧٥٠).
     • ≤500px: عمود «الحالة» بينطوي والبادج بينزل تحت اسم الزبون — بلا هالطيّة الجدول
       ٤١٢px جوّا wrapper ٣٧٢px على تلفون ٣٩٠، يعني «الحالة» (سبب وجود الصفحة) بتنقصّ.
       بعد الطيّة: ٣٩٠px → جدول ٣٧٢ = صفر سحب. ٣٧٥ و٣٦٠ كمان صفر.
     • الـ user id بيوصل ٦٤ حرف — مقصوص بـ ellipsis وإلّا لحالو بيمدّ الجدول ٢٠٣px.
     • ≤380px: .nm مقصوصة بالبكسل، لأنّ max-width على الـ td لحالها ما بتشتغل مع
       table-layout:auto. ٣٢٠px بيضل يسحب ٣٨px جوّا .twrap — وهيدا الـ fallback المقبول.
   كلّها مقاسات مقيّدة بـ #pg-tahsili — ولا لون جديد. */
#pg-tahsili .tah-sub{font-size:.7rem;color:var(--muted2);margin-top:2px}
#pg-tahsili .tah-note{font-size:.78rem;color:var(--muted);margin-top:2px}
#pg-tahsili .tah-sep{width:1px;align-self:stretch;min-height:20px;background:var(--border)}
#pg-tahsili .uid{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted2)}
#pg-tahsili .tah-dshort{display:none}
#pg-tahsili .tah-st-inline{display:none}
@media(max-width:768px){
  #pg-tahsili td:nth-child(2){max-width:136px}
  #pg-tahsili .nm{max-width:100%}
}
@media(max-width:500px){
  #pg-tahsili .tah-dfull{display:none}
  #pg-tahsili .tah-dshort{display:inline}
  /* ٤ أعمدة بدل ٥: «الحالة» بتنطوي تحت الاسم، فالجدول بيوقف يمرق أفقياً
     (مقيس على ٣٩٠px: ٤١٢px قبل → ٣٧٢px بعد = صفر سحب). */
  #pg-tahsili th:nth-child(5),#pg-tahsili td:nth-child(5){display:none}
  #pg-tahsili .tah-st-inline{display:block;margin-top:4px}
  #pg-tahsili td:nth-child(2){max-width:140px}
}
@media(max-width:380px){
  /* max-width على الـ td لحالها ما بتكفي (table-layout:auto) — الـ .nm هيّي يلّي
     بتفرض min-content، فلازم قصّة بالبكسل مش بالنسبة. */
  #pg-tahsili td:nth-child(2){max-width:110px}
  #pg-tahsili .nm{max-width:98px}
}
/* الشاشة اللمس: الشيبس هنّي كل تحكّم بالصفحة، و.bsm بينزل لـ ٢٥px تحت ٤٠٠px —
   نفس أرضيّة الـ 38px يلّي معمولة أصلاً لـ .ut-acts. */
@media(pointer:coarse){ #pg-tahsili .ph .btn{min-height:38px} }

/* ── v29-116 fix wave (2026-09-05) — كلّها من قياسات المراجعة، ولا لون جديد ────────
   ux M1: الـ 📡 وتاغ المحذوف كانوا بينقصّوا مع ellipsis تبع .nm — مقيس: مخفيّين
          على ٣٢٠/٣٦٠/٣٩٠ (و📡 كمان على ٤٣٠). صاروا برّات القصّ بـflex.
   ux M2: الشيبس بمجموعتين، كل وحدة بلاين لحالها ≤480 + عنوان لكل مجموعة (كان في
          «الكل» مرّتين جنب بعض على ٣٢٠).
   ux M3: .btn.bsm بينزل لـ 11.2px تحت ٤٠٠px — والشيبس هنّي كل تحكّم بالصفحة.
   ux M4: opacity .6 + --muted صفّ مسوّى = 2.07:1. صار .75 + --muted2 = 4.39:1.
   ux K : «بإيدي هلّق» صار كرت واحد عريض وقيمتو ١.٨rem — التلاتة الباقيين سطر تحت. */
#pg-tahsili .tah-zone,#pg-tahsili .tah-shown{font-size:.75rem;color:var(--muted2);margin-top:4px}
#pg-tahsili .tah-zone:empty,#pg-tahsili .tah-shown:empty{display:none}
#pg-tahsili .tah-net{font-size:.82rem;font-weight:800;color:var(--orange);margin-top:2px}
#pg-tahsili .tah-hand{cursor:pointer}
#pg-tahsili .tah-glbl{font-size:.75rem;color:var(--muted2);align-self:center;font-weight:700}
#pg-tahsili .tah-nmrow{display:flex;align-items:center;gap:4px;min-width:0}
#pg-tahsili .tah-nmrow .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pg-tahsili .tah-nmrow>*:not(.nm){flex:0 0 auto}
#pg-tahsili .tah-mk{font-size:.72rem}
#pg-tahsili .tah-del{color:var(--muted2);font-weight:700}
#pg-tahsili .tah-noteline{font-size:.75rem;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:2px}
#pg-tahsili .tah-done td{opacity:.75}
#pg-tahsili .tah-done .bdg{opacity:1}
#pg-tahsili #tahsiliSummary .sum-card:first-child{flex:1 1 100%;border-color:var(--orange)}
#pg-tahsili #tahsiliSummary .sum-card:first-child .sum-val{font-size:1.8rem}
#pg-tahsili #tahsiliSummary .sum-card:not(:first-child){flex:1 1 0;min-width:0}
@media(max-width:480px){
  /* أرضيّة ١٢px للشيبس: .bsm بيرجع لـ .7rem تحت ٤٠٠px، وهون id فبيغلب. */
  #pg-tahsili .ph .btn{font-size:.78rem}
  /* كل مجموعة شيبس بلاين لحالها — العنوان بياخد العرض كلّو فبيكسر السطر. */
  #pg-tahsili .ph .tah-glbl{flex:0 0 100%;width:100%}
  #pg-tahsili .tah-sep{display:none}
  #pg-tahsili #tahsiliSummary{gap:8px}
  #pg-tahsili #tahsiliSummary .sum-card:not(:first-child){padding:10px 8px}
  #pg-tahsili #tahsiliSummary .sum-card:not(:first-child) .sum-val{font-size:1.05rem}
}