/* ============================================================
   we_lines.css — إدارة خطوط الإنترنت (WE)
   بيستخدم توكنز ICM: --surface/-2/-3, --line, --txt/-2/-3,
   --accent(-soft), --ok(-soft), --warn(-soft), --bad(-soft), --info(-soft)
   ============================================================ */

/* fallback لزر ghost خارج الـ sheets */
.btn-ghost{ background:transparent; }

/* ── رأس الصفحة ── */
.we-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-block-end:16px;
}
.we-head-title{ display:flex; align-items:center; gap:12px; min-width:0; }
.we-head-icon{
  inline-size:44px; block-size:44px; border-radius:12px; flex:none;
  display:grid; place-items:center; color:var(--on-accent);
  background:linear-gradient(135deg, var(--accent-strong), hsl(var(--ac-h) var(--ac-s) calc(var(--ac-l) + 16%)));
  box-shadow:0 6px 16px -4px hsl(var(--ac-glow) / .4);
}
.we-head-icon .ic{ inline-size:22px; block-size:22px; }
.we-head-acts{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── شريط الإحصائيات ── */
.we-stats{ margin-block-end:14px; }

/* ── شريط الأدوات (بحث) ── */
.we-toolbar{ margin-block-end:14px; }
.we-search{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-2); border:1.5px solid var(--line);
  border-radius:var(--r-md, 12px); padding:0 12px;
  transition:border-color .15s;
}
.we-search:focus-within{ border-color:var(--accent); }
.we-search > .ic{ inline-size:18px; block-size:18px; color:var(--txt-3); flex:none; }
.we-search input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  color:var(--txt); font-family:inherit; font-size:14px; padding:11px 0;
}

/* ── تنبيه حدّ المزامنة ── */
.we-tip{
  display:flex; align-items:center; gap:8px; margin-block-end:14px;
  padding:9px 12px; border-radius:10px; font-size:12.5px; color:var(--txt-2);
  background:var(--info-soft); border:1px solid transparent;
}
.we-tip .ic{ inline-size:16px; block-size:16px; color:var(--info); flex:none; }
.we-tip b{ color:var(--txt); }

/* شارة المزامنة المتبقية */
.we-lc-syncleft{ display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; }
.we-lc-syncleft .ic{ inline-size:12px; block-size:12px; }

/* ── قائمة الخطوط ── */
.we-line-list{ display:flex; flex-direction:column; gap:10px; }

.we-line-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px;
  transition:border-color .15s, transform .1s;
}
.we-line-card.err{ border-inline-end:3px solid var(--bad); }
.we-line-card.sub{ border-inline-end:3px solid var(--info); }
.we-line-card.we-alert-w{ box-shadow:0 0 0 1px var(--warn-soft); }
.we-line-card.we-alert-d{ box-shadow:0 0 0 1px var(--bad-soft); }

.we-lc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-block-end:8px; }
.we-lc-id{ flex:1; min-width:0; }
.we-lc-name{
  font-weight:800; font-size:14.5px; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.we-lc-cust{ color:var(--txt-3); font-weight:600; font-size:12px; }
.we-sub-badge{
  font-size:10px; font-weight:800; padding:1px 6px; border-radius:5px;
  background:var(--info-soft); color:var(--info);
}
.we-lc-line2{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-block-start:3px; }
.we-lc-phone{
  direction:ltr; font-family:var(--mono, monospace); font-size:12.5px;
  color:var(--txt-3); letter-spacing:.3px;
}
.we-lc-pkg{
  font-size:11.5px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); padding:1px 7px; border-radius:6px;
  max-inline-size:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.we-chip{
  display:inline-flex; align-items:center; gap:3px;
  font-size:10.5px; font-weight:800; padding:1px 6px; border-radius:5px;
}
.we-chip .ic{ inline-size:11px; block-size:11px; }
.we-chip.bad{ background:var(--bad-soft); color:var(--bad); }
.we-chip.warn{ background:var(--warn-soft); color:var(--warn); }

/* أزرار أفعال الكارت */
.we-lc-acts{ display:flex; gap:5px; flex:none; }
.we-abtn{
  inline-size:32px; block-size:32px; border-radius:9px; padding:0;
  border:1px solid var(--line); background:transparent; color:var(--txt-2);
  display:grid; place-items:center; cursor:pointer; transition:.15s;
}
.we-abtn .ic{ inline-size:16px; block-size:16px; }
.we-abtn:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.we-abtn.syn:hover{ border-color:var(--ok); color:var(--ok); background:var(--ok-soft); }

/* شريط الاستهلاك */
.we-lc-usage{ display:flex; align-items:center; gap:10px; margin:8px 0 6px; }
.we-ubar{ flex:1; block-size:8px; background:var(--surface-3); border-radius:5px; overflow:hidden; }
.we-ubar > span{ display:block; block-size:100%; border-radius:5px; transition:width .5s ease; }
.we-upct{ font-size:13px; font-weight:800; min-inline-size:38px; text-align:center; }

.we-lc-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--txt-3); }
.we-lc-meta b{ color:var(--txt); font-weight:800; }
.we-lc-nosync{ color:var(--txt-3); font-size:12.5px; padding:4px 0; }

/* تفصيل الباقات المضغوط */
.we-pkg-list{ margin-block-start:6px; display:flex; flex-direction:column; gap:5px; }
.we-pkg-row{ display:flex; align-items:center; gap:6px; font-size:11.5px; }
.we-pkg-row.depleted{ opacity:.45; }
.we-pkg-tag{
  font-size:10px; font-weight:800; padding:1px 6px; border-radius:5px;
  min-inline-size:46px; text-align:center; flex:none;
}
.we-pkg-tag.prim{ background:var(--accent-soft); color:var(--accent); }
.we-pkg-tag.topup{ background:var(--info-soft); color:var(--info); }
.we-pkg-bar{ flex:1; block-size:5px; background:var(--surface-3); border-radius:3px; overflow:hidden; min-inline-size:40px; }
.we-pkg-bar > span{ display:block; block-size:100%; border-radius:3px; }
.we-pkg-info{ color:var(--txt-3); font-weight:600; white-space:nowrap; }
.we-pkg-days{ font-weight:800; min-inline-size:20px; text-align:center; }

/* فوتر الكارت */
.we-lc-bottom{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-block-start:8px; }
.we-lc-bal{ font-size:14px; font-weight:800; color:var(--ok); }
.we-lc-bal-btn{
  display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  background:transparent; border:0; color:var(--txt-3); font:inherit; font-size:12px; padding:0;
}
.we-lc-bal-btn .ic{ inline-size:13px; block-size:13px; }
.we-lc-bal-btn:hover{ color:var(--accent); }
.we-lc-foot-r{ display:flex; align-items:center; gap:8px; }
.we-lc-time{ display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--txt-3); }
.we-lc-time .ic{ inline-size:12px; block-size:12px; }
.we-lc-err{ display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--bad); }
.we-lc-err .ic{ inline-size:12px; block-size:12px; }

/* ── حالات فارغة / تحميل ── */
.we-empty{ text-align:center; padding:44px 16px; color:var(--txt-3); display:flex; flex-direction:column; align-items:center; gap:8px; }
.we-empty-ic{ inline-size:44px; block-size:44px; opacity:.4; }
.we-empty small{ font-size:12px; }
.we-empty .btn{ margin-block-start:8px; }
.we-loading{ display:flex; align-items:center; justify-content:center; gap:10px; padding:34px; color:var(--txt-3); font-size:13px; }
.we-spinner{
  inline-size:26px; block-size:26px; border-radius:50%;
  border:3px solid var(--surface-3); border-block-start-color:var(--accent);
  animation:weSpin .9s linear infinite;
}
@keyframes weSpin{ to{ transform:rotate(360deg); } }

/* ── نموذج داخل الـ sheet ── */
.we-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.we-hint{ font-weight:600; color:var(--txt-3); font-size:11px; }

/* ── حقل كلمة المرور بزر إظهار ── */
.we-pass-wrap{ position:relative; }
.we-pass-wrap input{ inline-size:100%; padding-inline-end:42px !important; }
.we-pass-eye{
  position:absolute; inset-block-start:50%; inset-inline-end:8px; transform:translateY(-50%);
  background:transparent; border:0; color:var(--txt-3); cursor:pointer; padding:4px; display:grid; place-items:center;
}
.we-pass-eye .ic{ inline-size:18px; block-size:18px; }
.we-pass-eye:hover{ color:var(--accent); }

/* ── مفاتيح الإعدادات فى النموذج ── */
.we-toggles{ display:flex; flex-direction:column; gap:4px; margin-block-start:6px; }
.we-toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border-radius:10px; background:var(--surface-2); cursor:pointer;
}
.we-toggle-row > span:first-child{ display:flex; flex-direction:column; }
.we-toggle-row b{ font-size:13px; color:var(--txt); font-weight:700; }
.we-toggle-row small{ font-size:11px; color:var(--txt-3); }

/* ── لوحة بيانات حساب الإنترنت ── */
.we-acc{
  border:1px solid var(--accent-line); background:var(--accent-soft);
  border-radius:12px; padding:12px 14px; margin-block-end:14px;
}
.we-acc-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-block-end:8px; }
.we-acc-head > span:first-child{ display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:13.5px; color:var(--txt); }
.we-acc-head-btns{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.we-acc-edit.ghost{ background:transparent; color:var(--txt-2); border-color:var(--line); }
.we-acc-edit.ghost:hover{ background:var(--surface-2); color:var(--txt); }
.we-acc-head .ic{ inline-size:17px; block-size:17px; color:var(--accent); }
.we-acc-edit{
  display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:12px; font-weight:700;
  padding:5px 10px; border-radius:8px; cursor:pointer;
  background:var(--surface); border:1px solid var(--accent-line); color:var(--accent);
}
.we-acc-edit .ic{ inline-size:14px; block-size:14px; }
.we-acc-edit:hover{ background:var(--accent); color:var(--on-accent); }
.we-acc-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-block-start:1px solid var(--accent-line); }
.we-acc-row:first-of-type{ border-block-start:0; }
.we-acc-l{ font-size:12px; color:var(--txt-2); }
.we-acc-v{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:800; color:var(--txt); }
.we-acc-copy{
  background:transparent; border:0; color:var(--txt-3); cursor:pointer; padding:2px; display:grid; place-items:center;
}
.we-acc-copy .ic{ inline-size:14px; block-size:14px; }
.we-acc-copy:hover{ color:var(--accent); }

/* ── شبكة الإجراءات ── */
.we-actions-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.we-act-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 10px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface-2); color:var(--txt);
  font-family:inherit; font-weight:700; font-size:13px; transition:.15s;
}
.we-act-btn .ic{ inline-size:18px; block-size:18px; }
.we-act-btn:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.we-act-btn.danger{ grid-column:1 / -1; }
.we-act-btn.danger:hover{ border-color:var(--bad); color:var(--bad); background:var(--bad-soft); }

/* ── التفاصيل ── */
.we-det-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
.we-det-item{ padding:8px 10px; border-radius:10px; background:var(--surface-2); border:1px solid transparent; }
.we-det-l{ font-size:11px; color:var(--txt-3); margin-block-end:2px; }
.we-det-v{ font-size:13px; font-weight:800; color:var(--txt); word-break:break-word; }
.we-det-notes{ margin-block-start:12px; padding:10px 12px; border-radius:10px; background:var(--surface-2); font-size:12.5px; color:var(--txt-2); }
.we-det-notes.err{ color:var(--bad); }

.we-det-pkgs{ margin-block-start:14px; border-block-start:1px solid var(--line); padding-block-start:12px; }
.we-det-pkgs-h{ font-weight:800; font-size:13px; color:var(--txt); margin-block-end:8px; }
.we-det-pkg{ padding:10px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); margin-block-end:8px; }
.we-det-pkg.depleted{ opacity:.6; }
.we-det-pkg-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-block-end:6px; font-size:12.5px; }
.we-det-pkg-top b{ color:var(--txt); }
.we-det-pkg-bar{ block-size:7px; background:var(--surface-3); border-radius:4px; overflow:hidden; margin-block-end:6px; }
.we-det-pkg-bar > span{ display:block; block-size:100%; border-radius:4px; }
.we-det-pkg-meta{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; font-size:11.5px; color:var(--txt-3); }
.we-det-pkg-meta b{ color:var(--txt); }

/* ── الاستهلاك ── */
.we-usage-sec{ margin-block-end:16px; }
.we-usage-sec h4{ margin:0 0 8px; font-size:13px; font-weight:800; color:var(--txt); }
.we-usage-range{ font-size:11.5px; color:var(--txt-3); margin-block-end:6px; }
.we-usage-stack{ display:flex; block-size:14px; border-radius:7px; overflow:hidden; margin-block-end:8px; background:var(--surface-3); }
.we-usage-stack > span{ display:block; }
.we-usage-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(80px, 1fr)); gap:8px; }
.we-usage-item{ text-align:center; padding:8px; border-radius:10px; background:var(--surface-2); }
.we-usage-v{ font-size:15px; font-weight:800; }
.we-usage-l{ font-size:11px; color:var(--txt-3); }

/* ── خطوط مرتبطة ── */
.we-assoc-count{ font-size:12px; color:var(--txt-3); margin-block-end:10px; }
.we-assoc-h{ font-weight:800; font-size:13px; color:var(--txt); margin-block-end:8px; }
.we-assoc-h.sub{ color:var(--txt-3); font-weight:700; font-size:12px; margin-block-start:12px; }
.we-assoc-fbb{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:12px; background:var(--surface-2);
  border:1px solid var(--line); margin-block-end:8px;
}
.we-assoc-fbb.tracked{ background:var(--ok-soft); border-color:var(--ok); }
.we-assoc-num{ font-family:var(--mono, monospace); font-weight:800; font-size:13.5px; color:var(--txt); }
.we-assoc-sub{ font-size:11.5px; color:var(--txt-3); margin-block-start:2px; }
.we-assoc-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.we-assoc-chip{
  padding:4px 8px; border-radius:7px; background:var(--surface-2);
  font-family:var(--mono, monospace); font-size:12px; font-weight:700; color:var(--txt);
  border:1px solid transparent;
}
.we-assoc-chip.cur{ border-color:var(--accent); }
.we-assoc-chip small{ font-family:inherit; color:var(--txt-3); font-size:10px; }

/* switch */
.we-switch{ position:relative; display:inline-block; inline-size:40px; block-size:22px; flex:none; }
.we-switch input{ opacity:0; inline-size:0; block-size:0; }
.we-switch span{
  position:absolute; inset:0; cursor:pointer; border-radius:99px;
  background:var(--surface-3); transition:.2s;
}
.we-switch span::before{
  content:''; position:absolute; inline-size:16px; block-size:16px; inset-block-start:3px; inset-inline-start:3px;
  background:#fff; border-radius:50%; transition:.2s;
}
.we-switch input:checked + span{ background:var(--ok); }
.we-switch input:checked + span::before{ transform:translateX(-18px); }
[dir="ltr"] .we-switch input:checked + span::before{ transform:translateX(18px); }

/* ── الدفعات ── */
.we-pay-history{ margin-block-start:6px; }
.we-pay-h{ font-size:12px; font-weight:800; color:var(--txt-2); margin-block-end:8px; }
.we-pay-empty{ font-size:12px; color:var(--txt-3); padding:8px 0; }
.we-pay-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; border-block-start:1px solid var(--line); font-size:12.5px; }
.we-pay-row b{ color:var(--txt); }
.we-pay-row small{ color:var(--txt-3); }
.we-pay-row-r{ display:flex; align-items:center; gap:8px; color:var(--txt-3); }
.we-pay-del{ background:transparent; border:0; color:var(--txt-3); cursor:pointer; padding:2px; }
.we-pay-del .ic{ inline-size:15px; block-size:15px; }
.we-pay-del:hover{ color:var(--bad); }

/* ── مودال التحقق الأمنى (captcha) + prompt ── */
.we-cap-scrim{
  position:fixed; inset:0; z-index:10000; display:grid; place-items:center;
  background:hsl(228 30% 3% / .6); backdrop-filter:blur(4px); padding:16px;
}
.we-cap-scrim[hidden]{ display:none; }
.we-cap-card{
  inline-size:100%; max-inline-size:340px; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:20px;
  box-shadow:var(--shadow); text-align:center;
}
.we-cap-head{ display:flex; align-items:center; justify-content:center; gap:8px; font-weight:800; color:var(--txt); font-size:15px; margin-block-end:6px; }
.we-cap-head .ic{ inline-size:20px; block-size:20px; color:var(--accent); }
.we-cap-note{ font-size:12.5px; color:var(--txt-3); margin:0 0 12px; }
.we-cap-img{ max-inline-size:220px; inline-size:100%; border:1px solid var(--line); border-radius:10px; margin-block-end:12px; }
.we-cap-input{
  inline-size:100%; padding:12px; text-align:center; letter-spacing:8px; font-size:22px; font-weight:800;
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:10px; color:var(--txt);
  margin-block-end:14px; font-family:inherit;
}
.we-cap-input:focus{ outline:none; border-color:var(--accent); }
.we-cap-acts{ display:flex; gap:10px; }
.we-cap-acts .btn{ flex:1; justify-content:center; }

/* ── موبايل ── */
@media (max-width:767px){
  .we-head-acts .btn span{ display:none; }
  .we-head-acts .btn{ min-inline-size:38px; justify-content:center; }
  .we-form-row{ grid-template-columns:1fr; gap:0; }
  .we-det-grid{ grid-template-columns:repeat(2, 1fr); }
}