/* ============================================================================
   MGIoT — Active Customers (العملاء الفعليون) · elevated redesign on 2027 tokens
   Scope: #viewActiveCustomers.  Loads after redesign-2027.
   Keeps the card+table structure but enriches it: avatar, summary chips,
   gradient accent, chip/pill device cells.
   ========================================================================== */

#viewActiveCustomers .mg-toolbar{ margin-top:16px; }
#viewActiveCustomers .mg-search{ width:100%; }
#viewActiveCustomers .mg-result-count{ color:var(--r27-ink-faint); font-size:12px; font-weight:700; }

/* ── Customer card ────────────────────────────────────────────────────── */
#viewActiveCustomers .ac-card{
  position:relative; overflow:hidden; margin-bottom:16px; padding:0 !important;
}
#viewActiveCustomers .ac-card:last-child{ margin-bottom:0; }
#viewActiveCustomers .ac-card::before{
  content:""; position:absolute; top:0; inset-inline:0; height:3px;
  background:linear-gradient(90deg,var(--r27-accent),var(--r27-brand));
}

/* Card header */
#viewActiveCustomers .ac-cardhead{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:18px 20px; border-bottom:1px solid var(--r27-line);
  background:linear-gradient(180deg,#FAFCFE,#fff);
}
#viewActiveCustomers .ac-avatar{
  width:46px; height:46px; flex:0 0 46px; border-radius:14px;
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:20px;
  background:linear-gradient(135deg,var(--r27-brand),#2D6FC4);
  box-shadow:0 8px 18px -10px rgba(15,77,150,.7);
}
#viewActiveCustomers .ac-idwrap{ min-width:0; }
#viewActiveCustomers .ac-name{
  margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--r27-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px;
}
#viewActiveCustomers .ac-phone{ font-size:12.5px; font-weight:600; color:var(--r27-ink-soft); margin-top:2px; }

#viewActiveCustomers .ac-chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-inline-start:auto; }
#viewActiveCustomers .ac-stat{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--r27-surface-2); border:1px solid var(--r27-line);
  border-radius:var(--r27-pill); padding:5px 12px; font-size:12px; font-weight:700; color:var(--r27-ink-soft);
}
#viewActiveCustomers .ac-stat b{ color:var(--r27-ink); font-weight:800; font-size:13px; }
#viewActiveCustomers .ac-stat--sim{ background:#EAF1FC; border-color:#CFE0F8; color:var(--r27-accent); }
#viewActiveCustomers .ac-stat--sim b{ color:var(--r27-accent); }
#viewActiveCustomers .ac-stat--date{ color:var(--r27-ink-soft); }
#viewActiveCustomers .ac-csv{ flex-shrink:0; }

/* ── Device table ─────────────────────────────────────────────────────── */
#viewActiveCustomers .mg-table-wrap{
  border:0; border-radius:0; box-shadow:none; margin:0; overflow:auto; background:transparent;
}
#viewActiveCustomers .mg-table{ width:100%; border-collapse:separate; border-spacing:0; }
#viewActiveCustomers .mg-table thead th{
  background:var(--r27-surface-2); color:var(--r27-ink-faint);
  font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding:11px 16px; border-bottom:1px solid var(--r27-line); text-align:start; white-space:nowrap;
}
#viewActiveCustomers .mg-table tbody td{
  padding:12px 16px; border-bottom:1px solid var(--r27-line-soft); font-size:13px;
  color:var(--r27-ink-mid); vertical-align:middle; white-space:nowrap;
}
#viewActiveCustomers .mg-table tbody tr:last-child td{ border-bottom:0; }
#viewActiveCustomers .mg-table tbody tr:hover{ background:var(--r27-surface-2); }

#viewActiveCustomers .ac-serial{
  font-family:'Inter', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px;
  font-weight:800; color:var(--r27-ink);
}
#viewActiveCustomers .ac-model{ font-weight:700; color:var(--r27-ink); }
#viewActiveCustomers .mg-cell-mono{ font-family:'Inter', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; color:var(--r27-ink-soft); }
#viewActiveCustomers .ac-date{ color:var(--r27-ink-soft); font-size:12px; }
#viewActiveCustomers .ac-mut{ color:var(--r27-ink-faint); }

/* provider chip + program pill */
#viewActiveCustomers .ac-chip{
  display:inline-block; background:var(--r27-surface-2); border:1px solid var(--r27-line);
  border-radius:var(--r27-pill); padding:2px 10px; font-size:11.5px; font-weight:700; color:var(--r27-ink-mid);
}
#viewActiveCustomers .ac-pill{
  display:inline-block; background:var(--r27-violet-bg); color:var(--r27-violet);
  border-radius:var(--r27-pill); padding:2px 10px; font-size:11.5px; font-weight:800;
}
/* expiry status pill */
#viewActiveCustomers .ac-exp{
  display:inline-block; border-radius:var(--r27-pill); padding:2px 10px; font-size:11.5px; font-weight:800;
}
#viewActiveCustomers .ac-exp--green{ background:var(--r27-green-bg); color:var(--r27-green); }
#viewActiveCustomers .ac-exp--red{ background:var(--r27-red-bg); color:var(--r27-red); }
#viewActiveCustomers .ac-exp--mut{ background:var(--r27-surface-2); color:var(--r27-ink-faint); border:1px solid var(--r27-line); }

/* Row action buttons */
#viewActiveCustomers .mg-table .mg-btn{
  border:1px solid var(--r27-line-2); background:#fff; color:var(--r27-ink-mid);
  border-radius:9px; font-weight:700; padding:5px 9px;
}
#viewActiveCustomers .mg-table .mg-btn--danger{ background:var(--r27-red-bg); border-color:#F3C9C9; color:var(--r27-red); }

/* Stats: CSV tile reads as a quiet hint */
#viewActiveCustomers .mg-stat:last-child .mg-stat-value{ font-size:18px; color:var(--r27-ink-faint); }