@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&family=Tajawal:wght@400;500;700&display=swap');

:root {
  --gold:    #f4d03f; --gold2:  #d4ac0d; --gold-soft:#fff9e6;
  --dark:    #0f1623; --dark2:  #1a2235; --dark3: #243044;
  --card:    #ffffff; --surface:#f4f6fb;
  --border:  #e2e8f0; --border2:#c8d3e6;
  --text:    #1a2235; --muted:  #6b7a99; --muted2:#9aa5bc;
  --green:   #10b981; --green2: #d1fae5;
  --red:     #ef4444; --red2:   #fee2e2;
  --blue:    #3b82f6; --blue2:  #dbeafe;
  --orange:  #f59e0b; --orange2:#fef3c7;
  --purple:  #8b5cf6; --purple2:#ede9fe;
  --r: 16px; --r-sm: 10px; --r-xs: 7px;
  --sh: 0 2px 16px rgba(15,22,35,.07);
  --sh-lg: 0 8px 40px rgba(15,22,35,.13);
}

*{box-sizing:border-box;margin:0;padding:0}

#clcrm-db{
  font-family:'Cairo','Tajawal',sans-serif;
  direction:rtl; text-align:right;
  color:var(--text); background:var(--surface);
  min-height:100vh; padding:24px 16px;
}
#clcrm-db a{text-decoration:none}

/* ════ HEADER ════════════════════════════════ */
.db-header{
  background:linear-gradient(135deg,var(--dark) 0%,var(--dark2) 60%,#1e3a5f 100%);
  border-radius:var(--r); padding:20px 28px; margin-bottom:20px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.db-header::after{
  content:''; position:absolute; left:-30px; top:-30px;
  width:200px; height:200px; background:var(--gold);
  opacity:.04; border-radius:50%;
}
.db-logo{
  width:50px; height:50px; border-radius:13px;
  background:var(--gold); color:var(--dark);
  font-size:20px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:0 4px 14px rgba(244,208,63,.4);
}
.db-brand-text h1{color:#fff;font-size:18px;font-weight:900;line-height:1.2}
.db-brand-text p{color:#6b8ab0;font-size:11px;margin-top:2px}

.db-nav{display:flex;gap:4px;margin-right:auto;flex-wrap:wrap}
.db-nav-btn{
  padding:9px 16px; border-radius:var(--r-sm); border:none; cursor:pointer;
  font-family:'Cairo',sans-serif; font-size:12px; font-weight:700;
  background:rgba(255,255,255,.07); color:#8899bb; transition:all .2s;
}
.db-nav-btn.active,.db-nav-btn:hover{background:var(--gold);color:var(--dark)}

.db-header-actions{display:flex;gap:8px;align-items:center}
.db-sync-status{font-size:11px;color:#6b8ab0;white-space:nowrap}
.db-refresh{
  padding:8px 14px; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05); color:#8899bb;
  font-family:'Cairo',sans-serif; font-size:12px; cursor:pointer; transition:all .2s;
}
.db-refresh:hover{background:rgba(255,255,255,.12);color:#fff}

/* ════ KPI STRIP ═════════════════════════════ */
.kpi-strip{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:12px; margin-bottom:20px;
}
.kpi{
  background:var(--card); border-radius:var(--r);
  padding:18px 16px; box-shadow:var(--sh);
  border-top:3px solid transparent; position:relative; overflow:hidden;
  transition:transform .2s;
}
.kpi:hover{transform:translateY(-2px)}
.kpi::before{
  content:''; position:absolute; left:-15px; top:-15px;
  width:70px; height:70px; border-radius:50%; opacity:.06;
  background:currentColor;
}
.kpi-icon{font-size:22px;margin-bottom:6px}
.kpi-val{font-size:28px;font-weight:900;color:var(--dark);line-height:1}
.kpi-lbl{font-size:11px;color:var(--muted);margin-top:4px;font-weight:600}
.kpi-sub{font-size:10px;color:var(--muted2);margin-top:2px}

/* ════ PANELS ════════════════════════════════ */
.db-panel{display:none}
.db-panel.active{display:block}

/* ════ CARD ══════════════════════════════════ */
.db-card{
  background:var(--card); border-radius:var(--r);
  box-shadow:var(--sh); padding:22px; margin-bottom:18px;
}
.db-card-title{
  font-size:13px; font-weight:800; color:var(--dark);
  display:flex; align-items:center; gap:8px;
  margin-bottom:16px; padding-bottom:12px;
  border-bottom:2px solid var(--border);
}
.db-card-title .ct-icon{
  width:28px;height:28px; border-radius:8px;
  background:var(--dark); color:var(--gold);
  font-size:14px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.db-card-title .ct-badge{
  background:var(--red); color:#fff;
  padding:2px 8px; border-radius:20px; font-size:10px;
  margin-right:auto;
}

/* ════ FUNNEL / PIPELINE ═════════════════════ */
.pipeline-wrap{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.pipeline-col{
  flex:0 0 200px; background:var(--surface);
  border-radius:var(--r-sm); overflow:hidden; min-height:200px;
}
.pipeline-header{
  padding:10px 14px;
  display:flex;align-items:center;gap:6px;
}
.pipeline-header .ph-icon{font-size:16px}
.pipeline-header .ph-label{font-size:12px;font-weight:800;color:#fff;flex:1}
.pipeline-header .ph-count{
  background:rgba(255,255,255,.2); color:#fff;
  padding:1px 8px; border-radius:20px; font-size:11px; font-weight:900;
}
.pipeline-body{padding:8px;display:flex;flex-direction:column;gap:6px}
.pipeline-body .empty-col{
  color:var(--muted2); font-size:11px; text-align:center;
  padding:20px 8px;
}

/* ── Customer mini-card inside pipeline ─ */
.mini-card{
  background:#fff; border-radius:var(--r-xs); padding:10px 11px;
  border:1.5px solid var(--border); cursor:pointer;
  transition:all .15s; position:relative;
}
.mini-card:hover{border-color:var(--gold);box-shadow:0 2px 10px rgba(244,208,63,.2)}
.mini-card.overdue{border-color:var(--red)!important;background:#fff8f8}
.mini-card .mc-name{font-size:12px;font-weight:800;color:var(--dark);margin-bottom:3px}
.mini-card .mc-phone{font-size:11px;color:var(--muted);margin-bottom:5px}
.mini-card .mc-meta{display:flex;gap:4px;flex-wrap:wrap}
.mini-card .mc-tag{
  font-size:10px; padding:1px 6px; border-radius:10px; font-weight:700; color:#fff;
}
.mini-card .mc-actions{
  display:flex;gap:4px;margin-top:7px;
}
.mini-card .mc-actions a,.mini-card .mc-actions button{
  display:flex;align-items:center;justify-content:center;
  padding:4px 8px; border-radius:6px; font-size:11px; font-weight:700;
  border:none; cursor:pointer; font-family:'Cairo',sans-serif;
  transition:all .15s; flex:1;
}
.mc-call{background:#e0f9f4;color:#059669}
.mc-call:hover{background:#059669;color:#fff}
.mc-wa{background:#e0f9ea;color:#16a34a}
.mc-wa:hover{background:#16a34a;color:#fff}
.mc-open{background:#eff6ff;color:var(--blue)}
.mc-open:hover{background:var(--blue);color:#fff}
.mc-late-badge{
  position:absolute; top:6px; left:6px;
  background:var(--red); color:#fff;
  font-size:9px; font-weight:900; padding:1px 5px; border-radius:10px;
}

/* ════ MARKETER SECTION ══════════════════════ */
.mkt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.mkt-card{
  background:var(--card); border-radius:var(--r);
  box-shadow:var(--sh); overflow:hidden;
}
.mkt-card-header{
  padding:16px 18px; display:flex; align-items:center; gap:12px;
}
.mkt-avatar{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:900; color:#fff; flex-shrink:0;
}
.mkt-name{font-size:15px;font-weight:900;color:#fff}
.mkt-stats{display:flex;gap:8px;margin-top:3px}
.mkt-stat{font-size:11px;color:rgba(255,255,255,.7)}
.mkt-body{padding:12px 16px}
.mkt-kpis{display:flex;gap:8px;margin-bottom:10px}
.mkt-kpi-box{
  flex:1; background:var(--surface); border-radius:var(--r-sm);
  padding:10px; text-align:center;
}
.mkt-kpi-val{font-size:20px;font-weight:900;color:var(--dark)}
.mkt-kpi-lbl{font-size:10px;color:var(--muted);margin-top:2px}
.mkt-assign-btn{
  width:100%; padding:9px; border-radius:var(--r-sm); border:none; cursor:pointer;
  font-family:'Cairo',sans-serif; font-size:13px; font-weight:700;
  background:var(--gold); color:var(--dark); transition:all .2s;
}
.mkt-assign-btn:hover{background:var(--gold2)}

/* ════ OVERDUE SECTION ═══════════════════════ */
.overdue-item{
  background:var(--card); border-radius:var(--r-sm);
  border-right:4px solid var(--red); padding:14px 16px;
  display:grid; grid-template-columns:1fr auto;
  gap:10px; margin-bottom:10px; align-items:center;
  transition:box-shadow .2s;
}
.overdue-item:hover{box-shadow:var(--sh)}
.oi-name{font-size:14px;font-weight:800;color:var(--dark)}
.oi-service{font-size:12px;color:var(--muted);margin-top:2px}
.oi-meta{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}
.oi-days{
  background:var(--red2); color:var(--red);
  padding:2px 9px; border-radius:20px; font-size:11px; font-weight:800;
}
.oi-amount{
  background:var(--orange2); color:#b45309;
  padding:2px 9px; border-radius:20px; font-size:11px; font-weight:800;
}
.oi-actions{display:flex;gap:6px}
.oi-wa-btn,.oi-call-btn,.oi-pay-btn{
  padding:7px 13px; border-radius:var(--r-xs);
  font-family:'Cairo',sans-serif; font-size:12px; font-weight:700;
  border:none; cursor:pointer; transition:all .15s;
  display:flex; align-items:center; gap:4px;
}
.oi-call-btn{background:#e0f9f4;color:#059669}
.oi-call-btn:hover{background:#059669;color:#fff}
.oi-wa-btn{background:#e0f9ea;color:#16a34a}
.oi-wa-btn:hover{background:#16a34a;color:#fff}
.oi-pay-btn{background:var(--blue2);color:var(--blue)}
.oi-pay-btn:hover{background:var(--blue);color:#fff}

/* ════ GROUPS SECTION ════════════════════════ */
.groups-nav{display:flex;gap:6px;overflow-x:auto;margin-bottom:16px;padding-bottom:4px}
.group-tab{
  padding:8px 16px; border-radius:var(--r-sm); border:2px solid var(--border);
  background:#fff; font-family:'Cairo',sans-serif; font-size:12px; font-weight:700;
  color:var(--muted); cursor:pointer; white-space:nowrap; transition:all .2s; flex-shrink:0;
}
.group-tab.active{border-color:var(--gold);background:var(--gold-soft);color:var(--dark)}

/* ── Group members table ─ */
.gm-table{width:100%;border-collapse:collapse;font-size:12.5px}
.gm-table thead{background:var(--dark);color:#fff}
.gm-table thead th{padding:10px 13px;text-align:right;font-size:11px;font-weight:700}
.gm-table tbody tr{border-bottom:1px solid var(--border);transition:background .1s}
.gm-table tbody tr:hover{background:var(--surface)}
.gm-table tbody td{padding:10px 13px;vertical-align:middle}
.pay-bar-wrap{background:var(--border);border-radius:20px;height:7px;overflow:hidden;width:90px}
.pay-bar{height:7px;border-radius:20px;transition:.3s}
.pay-badge{
  display:inline-block; padding:2px 8px; border-radius:10px;
  font-size:10px; font-weight:800; color:#fff;
}
.pay-paid{background:var(--green)}
.pay-partial{background:var(--orange)}
.pay-none{background:var(--red)}
.pay-late{background:var(--red);animation:pulse .8s infinite alternate}
@keyframes pulse{from{opacity:1}to{opacity:.6}}

/* ════ INVOICES ══════════════════════════════ */
.inv-list{display:flex;flex-direction:column;gap:8px}
.inv-row{
  background:var(--card); border-radius:var(--r-sm);
  padding:13px 16px; display:flex; align-items:center; gap:12px;
  border:1px solid var(--border); transition:border-color .15s;
}
.inv-row:hover{border-color:var(--gold)}
.inv-num{font-size:13px;font-weight:900;color:var(--dark);width:90px;flex-shrink:0}
.inv-client{flex:1;font-size:13px;font-weight:600}
.inv-amount{font-size:14px;font-weight:900;color:var(--green);width:110px}
.inv-status{width:80px}
.inv-date{font-size:11px;color:var(--muted);width:90px}
.status-pill{
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:10px; font-weight:800; color:#fff;
}
.s-draft{background:var(--muted2)}
.s-sent{background:var(--blue)}
.s-paid{background:var(--green)}
.s-cancelled{background:var(--red)}

/* ════ PAYMENT MODAL ════════════════════════ */
.db-modal-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.5);z-index:9999;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.db-modal-overlay.open{opacity:1;pointer-events:all}
.db-modal{
  background:#fff;border-radius:var(--r);
  padding:28px;max-width:520px;width:90%;
  box-shadow:var(--sh-lg);
  transform:translateY(20px);transition:transform .2s;max-height:85vh;overflow-y:auto;
}
.db-modal-overlay.open .db-modal{transform:translateY(0)}
.db-modal-title{font-size:16px;font-weight:900;color:var(--dark);margin-bottom:20px;display:flex;align-items:center;gap:8px}
.db-modal-close{margin-right:auto;background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);padding:0 4px}
.db-modal-close:hover{color:var(--red)}

/* ════ FORM ELEMENTS ════════════════════════ */
.db-field{margin-bottom:14px}
.db-field label{display:block;font-size:11px;font-weight:800;color:var(--dark);margin-bottom:5px;letter-spacing:.3px}
.db-field input,.db-field select,.db-field textarea{
  width:100%;padding:9px 13px;
  border:2px solid var(--border);border-radius:var(--r-sm);
  font-family:'Cairo',sans-serif;font-size:13px;color:var(--dark);
  transition:border-color .2s;background:#fff;
}
.db-field input:focus,.db-field select:focus,.db-field textarea:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(244,208,63,.15);
}
.db-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.db-field textarea{min-height:70px;resize:vertical}

/* ════ BUTTONS ═══════════════════════════════ */
.db-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 18px;border-radius:var(--r-sm);border:none;cursor:pointer;
  font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;transition:all .15s;
}
.db-btn-gold{background:var(--gold);color:var(--dark)}
.db-btn-gold:hover{background:var(--gold2);color:var(--dark)}
.db-btn-dark{background:var(--dark);color:var(--gold)}
.db-btn-dark:hover{background:var(--dark2)}
.db-btn-red{background:var(--red);color:#fff}
.db-btn-red:hover{background:#dc2626}
.db-btn-green{background:var(--green);color:#fff}
.db-btn-ghost{background:var(--surface);border:1.5px solid var(--border);color:var(--muted)}
.db-btn-ghost:hover{background:var(--border)}
.db-btn-sm{padding:5px 12px;font-size:11px}

/* ════ FILTERS ═══════════════════════════════ */
.db-filters{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  background:var(--card);border-radius:var(--r-sm);
  padding:12px 16px;margin-bottom:14px;box-shadow:var(--sh);
}
.db-input,.db-select{
  padding:8px 13px;border:2px solid var(--border);
  border-radius:var(--r-sm);font-family:'Cairo',sans-serif;
  font-size:12px;color:var(--dark);transition:border-color .2s;
}
.db-input:focus,.db-select:focus{outline:none;border-color:var(--gold)}
.db-input{min-width:180px}

/* ════ ALERTS & BADGES ═══════════════════════ */
.alert-overdue{
  background:var(--red2);border:1.5px solid #fca5a5;
  border-radius:var(--r-sm);padding:10px 14px;margin-bottom:8px;
  font-size:12px;color:#b91c1c;font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:800;color:#fff}
.badge-lead{background:#6b7a99}
.badge-interested{background:#f59e0b}
.badge-registered{background:var(--blue)}
.badge-active{background:var(--green)}
.badge-completed{background:var(--purple)}
.badge-upsell{background:var(--red)}
.badge-training{background:#2563eb}
.badge-consultation{background:var(--purple)}
.badge-project{background:#0891b2}
.badge-tool{background:#ea580c}
.badge-subscription{background:var(--green)}

/* ════ TOAST ════════════════════════════════ */
.db-toast{
  position:fixed;bottom:24px;right:24px;
  background:var(--dark);color:#fff;
  padding:12px 20px;border-radius:var(--r-sm);
  font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;
  border-right:4px solid var(--gold);box-shadow:var(--sh-lg);
  transform:translateX(200%);transition:transform .3s;z-index:99999;
}
.db-toast.show{transform:translateX(0)}

/* ════ LOADING ═══════════════════════════════ */
.db-loading{
  display:flex;align-items:center;justify-content:center;
  padding:40px;color:var(--muted);font-size:14px;gap:10px;
}
.db-spinner{
  width:20px;height:20px;border:3px solid var(--border);
  border-top-color:var(--gold);border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ════ WHATSAPP MSG PREVIEW ══════════════════ */
.wa-preview{
  background:#e8f5e9;border-radius:var(--r-sm);
  padding:14px;font-size:13px;line-height:1.7;
  direction:rtl;text-align:right;
  border:1px solid #a5d6a7;margin-top:10px;white-space:pre-wrap;
}
.wa-copy-btn{
  display:block;width:100%;margin-top:8px;
  padding:8px;border-radius:var(--r-sm);border:none;cursor:pointer;
  background:#25D366;color:#fff;
  font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;
  transition:all .15s;
}
.wa-copy-btn:hover{background:#128c4a}

/* ════ RESPONSIVE ════════════════════════════ */
@media(max-width:1100px){.kpi-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){
  .kpi-strip{grid-template-columns:repeat(2,1fr)}
  .db-nav{order:3;width:100%}
  .pipeline-wrap{flex-wrap:nowrap}
  .db-grid-2{grid-template-columns:1fr}
  .mkt-grid{grid-template-columns:1fr}
  .overdue-item{grid-template-columns:1fr;gap:8px}
}
@media(max-width:480px){
  .kpi-strip{grid-template-columns:1fr 1fr}
  #clcrm-db{padding:12px 8px}
}

/* ════ CHARTS ════════════════════════════════ */
.chart-wrap{position:relative;height:220px}
.db-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── Body-level modal (injected via JS) ── */
#clcrm-body-modal .db-modal-title{
  font-size:15px;font-weight:900;color:var(--color-text-primary);
  display:flex;align-items:center;gap:8px;margin-bottom:18px;
}
#clcrm-body-modal .db-modal-close{
  margin-right:auto;background:none;border:none;
  font-size:22px;cursor:pointer;color:var(--muted);padding:0 4px;
}
#clcrm-body-modal .db-modal-close:hover{color:var(--red)}
#clcrm-body-modal .db-field{margin-bottom:12px}
#clcrm-body-modal .db-field label{
  display:block;font-size:11px;font-weight:700;
  color:var(--text);margin-bottom:5px;
}
#clcrm-body-modal .db-field input,
#clcrm-body-modal .db-field select,
#clcrm-body-modal .db-field textarea{
  width:100%;padding:10px 13px;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-family:'Cairo',sans-serif;font-size:13px;color:var(--text);
  background:#fff;box-sizing:border-box;
}
#clcrm-body-modal .db-field input:focus,
#clcrm-body-modal .db-field select:focus{
  outline:none;border-color:var(--gold);
}
#clcrm-body-modal .db-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#clcrm-body-modal .db-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:10px 18px;border-radius:var(--r-sm);border:none;cursor:pointer;
  font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;transition:all .15s;
}
#clcrm-body-modal .db-btn-gold{background:var(--gold);color:var(--dark)}
#clcrm-body-modal .db-btn-gold:hover{background:var(--gold2)}
#clcrm-body-modal .db-btn-ghost{background:var(--surface);border:1.5px solid var(--border);color:var(--muted)}

/* ── Mobile Pipeline ─────────────────────── */
@media(max-width:600px){
  .pipeline-wrap{
    display:flex;flex-direction:column;gap:0;overflow-x:visible;
  }
  .pipeline-col{
    width:100%;flex:none;margin-bottom:12px;border-radius:10px;overflow:hidden;
  }
  .pipeline-header{
    border-radius:10px 10px 0 0;
  }
  .pipeline-body{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;
  }
  .mini-card{
    margin:0;
  }
  .db-header{
    flex-wrap:wrap;padding:12px;gap:8px;
  }
  .db-nav{
    order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;gap:4px;
  }
  .db-nav::-webkit-scrollbar{display:none}
  .db-nav-btn{white-space:nowrap;flex-shrink:0;font-size:10px;padding:6px 8px}
  .kpi-strip{grid-template-columns:repeat(3,1fr)!important}
}

/* ── Groups Sidebar (Service Accordion) ─────────── */
#grp-sidebar { font-family: Cairo, sans-serif; }

.grp-svc-block { border-bottom: 1px solid #f0f2f7; }
.grp-svc-block:last-child { border-bottom: none; }

.grp-svc-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  background: #fff;
  transition: background .15s;
  user-select: none;
}
.grp-svc-hdr:hover { background: #f8f9fc; }
.grp-svc-hdr.open  { background: #1a2235; }
.grp-svc-hdr.open .grp-svc-title { color: #f4d03f; }
.grp-svc-hdr.open .grp-svc-meta  { color: #6b8ab0; }
.grp-svc-hdr.open .grp-svc-arrow { color: #f4d03f; }

.grp-svc-title {
  font-size: 13px;
  font-weight: 800;
  color: #1a2235;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.grp-svc-meta  { font-size: 10px; color: #9aa5bc; margin-top: 1px; }
.grp-svc-arrow { font-size: 9px; color: #9aa5bc; flex-shrink: 0; }

/* Body: collapsed by default, expands when .open */
.grp-svc-body {
  display: none;
  background: #fafbfd;
  border-top: 1px solid #f0f2f7;
}
.grp-svc-body.open { display: block; }

.grp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 16px 9px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #f0f2f7;
  cursor: pointer;
  font-family: Cairo, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  text-align: right;
  transition: background .12s;
}
.grp-item:last-child { border-bottom: none; }
.grp-item:hover  { background: #eef2ff; }
.grp-item.active { background: #eef2ff; color: #1a2235; font-weight: 800; }
.grp-item.ended  { opacity: .65; }

.grp-item-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.grp-item-name { flex: 1; text-align: right; }
.grp-item-cnt  {
  background: #e2e8f0; color: #6b7a99;
  padding: 1px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.grp-item.active .grp-item-cnt {
  background: #1a2235; color: #f4d03f;
}

.grp-divider {
  padding: 4px 16px;
  font-size: 9px;
  font-weight: 700;
  color: #9aa5bc;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: #f0f2f7;
}

/* Responsive: stack on mobile */
@media(max-width: 700px){
  #panel-groups > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }
  .grp-svc-title { max-width: 100%; }
}