/* ============================================================
   subpanel.css — لوحة المشترك (إعدادات / خصومات / إشعارات)
   بيعتمد على we_lines.css للمشترك (we-head, we-stats, we-toggle-row,
   we-switch, bsh-field…) + توكنز ICM.
   ============================================================ */

/* ── سكشن (كارت) ── */
.sp-sec{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; margin-block-end:14px; }
.sp-sec-head{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; color:var(--txt); margin-block-end:12px; }
.sp-sec-head .ic{ inline-size:18px; block-size:18px; color:var(--accent); }
.sp-sub-label{ font-size:12.5px; color:var(--txt-3); margin-block-end:10px; }

/* بانر الصيانة */
.sp-maint-banner{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; margin-block-end:14px; background:var(--bad-soft); border:1px solid var(--bad); }
.sp-maint-banner .ic{ inline-size:22px; block-size:22px; color:var(--bad); flex:none; }
.sp-maint-banner b{ color:var(--txt); font-size:13.5px; display:block; }
.sp-maint-banner small{ color:var(--txt-2); font-size:12px; }

/* بلوك تحت التوجل (رسالة صيانة / إعدادات الشراء) */
.sp-indent{ margin-block:10px 4px; }

/* radio cards (خيارات التجديد) */
.sp-radio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sp-radio-card{ border:2px solid var(--line); border-radius:12px; padding:12px; cursor:pointer; transition:.15s; display:block; }
.sp-radio-card:hover{ border-color:var(--accent-line); }
.sp-radio-card.active{ border-color:var(--accent); background:var(--accent-soft); }
.sp-radio-card input{ display:none; }
.sp-radio-card b{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--txt); margin-block-end:4px; }
.sp-radio-card b .ic{ inline-size:15px; block-size:15px; }
.sp-radio-card small{ color:var(--txt-3); font-size:11.5px; }

/* info alert */
.sp-alert{ display:flex; gap:8px; padding:10px 12px; border-radius:10px; font-size:12.5px; margin-block-end:12px; }
.sp-alert .ic{ inline-size:16px; block-size:16px; flex:none; margin-block-start:1px; }
.sp-alert.info{ background:var(--info-soft); color:var(--txt-2); }
.sp-alert.info .ic{ color:var(--info); }
.sp-alert.ok{ background:var(--ok-soft); color:var(--txt-2); }
.sp-alert.ok .ic{ color:var(--ok); }
.sp-alert b{ color:var(--txt); }

/* جدول بسيط */
.sp-table{ inline-size:100%; border-collapse:collapse; font-size:12.5px; }
.sp-table th{ text-align:start; color:var(--txt-3); font-weight:700; font-size:11.5px; padding:8px 10px; border-block-end:1px solid var(--line); }
.sp-table td{ padding:9px 10px; border-block-end:1px solid var(--line); color:var(--txt-2); }
.sp-table td b{ color:var(--txt); }
.sp-table tr:last-child td{ border-block-end:0; }
.sp-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ══ خصومات التحويل ══ */
.sp-search-box{ position:relative; }
.sp-search-results{ position:absolute; inset-inline:0; inset-block-start:calc(100% + 4px); background:var(--surface); border:1px solid var(--line); border-radius:10px; max-block-size:260px; overflow-y:auto; box-shadow:var(--shadow); z-index:20; display:none; }
.sp-search-results.open{ display:block; }
.sp-search-item{ padding:10px 12px; cursor:pointer; border-block-end:1px solid var(--line); }
.sp-search-item:last-child{ border-block-end:0; }
.sp-search-item:hover{ background:var(--accent-soft); }
.sp-search-item b{ display:block; font-size:13px; color:var(--txt); }
.sp-search-item small{ color:var(--txt-3); font-size:11.5px; }
.sp-selected{ font-size:12px; color:var(--ok); margin-block-start:6px; }

.sp-type-toggle{ display:inline-flex; background:var(--surface-2); border-radius:99px; padding:3px; border:1px solid var(--line); }
.sp-type-toggle label{ padding:7px 16px; cursor:pointer; border-radius:99px; font-size:12.5px; font-weight:700; color:var(--txt-3); transition:.15s; }
.sp-type-toggle input{ display:none; }
.sp-type-toggle input:checked + label{ background:var(--accent); color:var(--on-accent); }

.sp-disc-row{ display:grid; grid-template-columns:1fr auto auto auto; gap:10px; align-items:center; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; margin-block-end:8px; }
.sp-disc-row.inactive{ opacity:.55; }
.sp-disc-user b{ font-size:13.5px; color:var(--txt); display:block; }
.sp-disc-user small{ color:var(--txt-3); font-size:11.5px; }
.sp-disc-value{ font-size:13.5px; font-weight:800; color:var(--accent); white-space:nowrap; padding:4px 10px; background:var(--accent-soft); border-radius:99px; }
.sp-disc-badge{ font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:99px; }
.sp-disc-badge.on{ background:var(--ok-soft); color:var(--ok); }
.sp-disc-badge.off{ background:var(--surface-3); color:var(--txt-3); }
.sp-disc-actions{ display:flex; gap:4px; }
.sp-disc-actions button{ inline-size:32px; block-size:32px; border:0; background:transparent; border-radius:8px; cursor:pointer; display:grid; place-items:center; color:var(--txt-3); }
.sp-disc-actions button .ic{ inline-size:16px; block-size:16px; }
.sp-disc-actions button:hover{ background:var(--surface-2); color:var(--txt); }
.sp-disc-actions .del:hover{ color:var(--bad); }

/* ══ الإشعارات ══ */
.sp-quick-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sp-quick-btn{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px; border-radius:12px; cursor:pointer; font-family:inherit; font-weight:800; font-size:13.5px; border:1px solid; transition:.15s; }
.sp-quick-btn small{ font-weight:600; font-size:11px; opacity:.85; }
.sp-quick-btn.warn{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn); }
.sp-quick-btn.ok{ background:var(--ok-soft); color:var(--ok); border-color:var(--ok); }
.sp-quick-btn:hover{ filter:brightness(1.05); }
.sp-quick-btn .ic{ inline-size:20px; block-size:20px; }

.sp-preview-card{ background:hsl(228 30% 10%); color:#fff; border-radius:14px; padding:14px; display:flex; gap:12px; align-items:flex-start; }
.sp-preview-icon{ inline-size:46px; block-size:46px; border-radius:10px; background:linear-gradient(135deg, var(--accent-strong), hsl(var(--ac-h) var(--ac-s) calc(var(--ac-l) + 16%))); flex:none; display:grid; place-items:center; }
.sp-preview-icon .ic{ inline-size:24px; block-size:24px; color:#fff; }
.sp-preview-content{ flex:1; min-inline-size:0; }
.sp-preview-title{ font-weight:800; font-size:14px; margin-block-end:3px; }
.sp-preview-body{ font-size:12.5px; color:#cbd5e1; line-height:1.5; word-wrap:break-word; }
.sp-preview-meta{ font-size:10.5px; color:#94a3b8; margin-block-start:8px; display:flex; align-items:center; gap:4px; }
.sp-preview-meta .ic{ inline-size:12px; block-size:12px; }

.sp-count-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--accent-soft); color:var(--accent); padding:5px 12px; border-radius:99px; font-weight:800; font-size:13px; }
.sp-count-chip .ic{ inline-size:15px; block-size:15px; }

.sp-tips{ margin-block-start:14px; }
.sp-tips h4{ font-size:13px; font-weight:800; color:var(--txt); margin:0 0 6px; display:flex; align-items:center; gap:6px; }
.sp-tips ul{ margin:0; padding-inline-start:18px; color:var(--txt-3); font-size:12px; line-height:1.7; }

/* two-column layout (form + preview) */
.sp-two-col{ display:grid; grid-template-columns:1.3fr 1fr; gap:14px; align-items:start; }
@media (max-width:900px){ .sp-two-col{ grid-template-columns:1fr; } }

/* الحفظ العائم */
.sp-save-row{ display:flex; gap:10px; margin-block-start:6px; }
.sp-save-row .btn{ flex:1; justify-content:center; }

@media (max-width:767px){
  .sp-radio-grid{ grid-template-columns:1fr; }
  .sp-quick-grid{ grid-template-columns:1fr; }
  .sp-disc-row{ grid-template-columns:1fr auto; grid-template-areas:"user value" "badge actions"; }
  .sp-disc-user{ grid-area:user; } .sp-disc-value{ grid-area:value; }
}