/* ═══════════════════════════════════════════════════════════
   BankDash-inspired theme for WhatsApp Gateway dashboards
   Light (BankDash) / Dark • RTL/LTR • Inter + Cairo
   Loaded AFTER app.css on dashboard + admin pages only
   ═══════════════════════════════════════════════════════════ */
:root{
  --bd-bg:#F5F7FA; --bd-side:#FFFFFF; --bd-card:#FFFFFF;
  --bd-text:#343C6A; --bd-muted:#718EBF; --bd-faint:#A3B4CC;
  --bd-primary:#1DA851; --bd-blue:#25D366; --bd-pink:#FA00FF;
  --bd-orange:#FC7900; --bd-green:#41D4A8; --bd-red:#FF4D4F;
  --bd-input:#F5F7FA; --bd-border:#E6EFF5;
  --bd-shadow:0 8px 30px rgba(52,60,106,.07);
  --bd-tagblue:rgba(37,211,102,.14); --bd-tagpink:rgba(250,0,255,.1);
  color-scheme:light;
}
[data-theme="dark"]{
  --bd-bg:#0a0e15; --bd-side:#0c1220; --bd-card:#121a2a;
  --bd-text:#e9eef6; --bd-muted:#8b98ad; --bd-faint:#5a6878;
  --bd-primary:#34e07f; --bd-blue:#25D366;
  --bd-input:rgba(255,255,255,.05); --bd-border:rgba(255,255,255,.09);
  --bd-shadow:0 18px 50px rgba(0,0,0,.4);
  --bd-tagblue:rgba(77,124,255,.16);
  color-scheme:dark;
}
body{background:var(--bd-bg)!important;color:var(--bd-text)}
html[lang="en"] body{font-family:'Estedad','Segoe UI',sans-serif}

/* ── Shell / sidebar ── */
.bd-shell{display:flex;min-height:100vh}
.bd-side{width:250px;flex-shrink:0;background:var(--bd-side);border-inline-end:1px solid var(--bd-border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:60;transition:transform .3s ease}
.bd-logo{display:flex;align-items:center;gap:10px;padding:26px 24px 8px;font-weight:900;font-size:1.12rem;color:var(--bd-text)}
.bd-logo .lg-ic{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--bd-blue),var(--bd-primary));display:grid;place-items:center;flex-shrink:0}
.bd-logo .lg-ic .hgi-stroke{color:#fff;font-size:1.25rem}
.bd-nav{flex:1;overflow-y:auto;padding:16px 0 12px;display:flex;flex-direction:column;gap:2px}
.bd-sec{font-size:.72rem;font-weight:700;color:var(--bd-faint);padding:16px 32px 6px}
.bd-item{position:relative;display:flex;align-items:center;gap:12px;padding:12px 32px;color:var(--bd-muted);font-size:.92rem;font-weight:500;cursor:pointer;background:none;border:none;width:100%;text-align:start;transition:.2s;font-family:inherit}
.bd-item .hgi-stroke{font-size:1.25rem}
.bd-item:hover{color:var(--bd-primary)}
.bd-item.active{color:var(--bd-primary);font-weight:700}
.bd-item.active::before{content:'';position:absolute;inset-inline-start:0;top:8px;bottom:8px;width:6px;border-radius:0 10px 10px 0;background:var(--bd-primary)}
html[dir="ltr"] .bd-item.active::before{border-radius:10px 0 0 10px}
.bd-item .cnt{margin-inline-start:auto;background:var(--bd-primary);color:#fff;font-size:.65rem;font-weight:800;border-radius:99px;padding:2px 9px}
.bd-foot{padding:14px 20px;border-top:1px solid var(--bd-border);display:flex;flex-direction:column;gap:8px}
.bd-foot .lang-switch{justify-content:center;border-color:var(--bd-border);color:var(--bd-text);background:var(--bd-input)}
.bd-foot .bd-item{padding:10px 12px;border-radius:12px}
.bd-foot .bd-item:hover{background:var(--bd-input)}

/* ── Main / topbar ── */
.bd-main{flex:1;min-width:0;display:flex;flex-direction:column}
.bd-top{position:sticky;top:0;z-index:50;background:var(--bd-bg);padding:20px 32px 6px}
.bd-top-row{display:flex;align-items:center;gap:14px}
.bd-title{font-size:1.55rem;font-weight:700;color:var(--bd-text)}
.bd-search{margin-inline-start:auto;display:flex;align-items:center;gap:8px;background:var(--bd-card);border:1px solid var(--bd-border);border-radius:40px;padding:0 18px;height:50px;min-width:255px;color:var(--bd-muted)}
.bd-search .hgi-stroke{font-size:1.15rem}
.bd-search input{border:none;background:transparent;outline:none;color:var(--bd-text);font-size:.9rem;width:100%;font-family:inherit}
.bd-search input::placeholder{color:var(--bd-faint)}
.bd-icbtn{width:50px;height:50px;border-radius:50%;background:var(--bd-card);border:1px solid var(--bd-border);display:grid;place-items:center;cursor:pointer;color:var(--bd-muted);transition:.2s;position:relative;flex-shrink:0}
.bd-icbtn:hover{color:var(--bd-primary);border-color:var(--bd-primary)}
.bd-icbtn .hgi-stroke{font-size:1.3rem}
.bd-icbtn .dot{position:absolute;top:12px;inset-inline-end:13px;min-width:17px;height:17px;border-radius:99px;background:var(--bd-red);color:#fff;font-size:.6rem;font-weight:800;display:grid;place-items:center;padding:0 4px}
.bd-avatar{width:55px;height:55px;border-radius:50%;background:linear-gradient(135deg,var(--bd-blue),var(--bd-primary));display:grid;place-items:center;font-weight:800;color:#fff;font-size:1rem;flex-shrink:0}
.bd-user-meta .nm{font-weight:700;font-size:.85rem;color:var(--bd-text)}
.bd-user-meta .ph{font-size:.7rem;color:var(--bd-faint);direction:ltr}
.bd-page{padding:16px 32px 70px;max-width:1180px;width:100%;margin:0 auto}
.bd-ham{display:none}

/* ── Cards ── */
.bd-card{background:var(--bd-card);border:1px solid var(--bd-border);border-radius:22px;padding:24px;box-shadow:var(--bd-shadow)}
.bd-sec-head{display:flex;justify-content:space-between;align-items:center;margin:26px 0 16px}
.bd-sec-head h3{font-size:1.05rem;font-weight:700;color:var(--bd-text)}
.bd-seeall{font-size:.83rem;font-weight:600;color:var(--bd-text);cursor:pointer;background:none;border:none;font-family:inherit}
.bd-seeall:hover{color:var(--bd-primary)}
.bd-grid{display:grid;gap:22px}
.bd-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bd-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bd-g2{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.bd-g2r{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}

/* plan hero card (like "My Cards" blue card) */
.bd-plan{background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);border-radius:22px;padding:24px;color:#fff;position:relative;overflow:hidden;box-shadow:0 14px 34px rgba(18,140,126,.35)}
.bd-plan::after{content:'';position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.09);top:-80px;inset-inline-end:-60px}
.bd-plan .pl-name{font-size:.8rem;opacity:.85;font-weight:600}
.bd-plan .pl-num{font-size:1.9rem;font-weight:800;margin:6px 0 2px;direction:ltr;text-align:start}
.bd-plan .pl-sub{font-size:.78rem;opacity:.85}
.bd-plan .pl-bar{height:8px;background:rgba(255,255,255,.25);border-radius:99px;margin:14px 0 8px;overflow:hidden}
.bd-plan .pl-bar>div{height:100%;background:#fff;border-radius:99px}
.bd-plan .pl-foot{display:flex;justify-content:space-between;font-size:.74rem;opacity:.9}

/* mini stat cards */
.bd-mini{background:var(--bd-card);border:1px solid var(--bd-border);border-radius:22px;padding:22px;display:flex;gap:14px;align-items:center;box-shadow:var(--bd-shadow)}
.bd-mini .mic{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.bd-mini .mic .hgi-stroke{font-size:1.5rem}
.bd-mini .mv{font-size:1.35rem;font-weight:800;color:var(--bd-text)}
.bd-mini .ml{font-size:.78rem;color:var(--bd-muted)}
.mic.blue{background:rgba(37,211,102,.14);color:#1DA851}
.mic.pink{background:rgba(250,0,255,.12);color:#d633d6}
.mic.green{background:rgba(65,212,168,.15);color:#1d9e75}
.mic.orange{background:rgba(252,121,0,.13);color:#e07b00}
.mic.red{background:rgba(255,77,79,.12);color:var(--bd-red)}
[data-theme="dark"] .mic.pink{color:#f06ff2}
[data-theme="dark"] .mic.green{color:#41D4A8}
[data-theme="dark"] .mic.orange{color:#FC7900}

/* list rows */
.bd-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--bd-border);font-size:.87rem}
.bd-row:last-child{border-bottom:none}
.bd-row .ric{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:var(--bd-input);color:var(--bd-muted)}
.bd-row .ric .hgi-stroke{font-size:1.2rem}
.bd-row .grow{flex:1;min-width:0}
.bd-row .t1{font-weight:600;color:var(--bd-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-row .t2{font-size:.74rem;color:var(--bd-faint)}
.bd-pill{font-size:.7rem;font-weight:700;padding:4px 12px;border-radius:99px;white-space:nowrap}
.bd-pill.g{background:rgba(65,212,168,.16);color:#1d9e75}
.bd-pill.r{background:rgba(255,77,79,.12);color:var(--bd-red)}
.bd-pill.y{background:rgba(252,193,0,.18);color:#a97a00}
.bd-pill.b{background:var(--bd-tagblue);color:var(--bd-blue)}

/* grouped rows: a client with their subscriptions nested underneath */
.bd-grp{border:1px solid var(--bd-border);border-radius:16px;padding:4px 16px;margin:10px 0;background:var(--bd-card,transparent)}
.bd-grp-head{display:flex;align-items:center;gap:10px;padding:12px 0;font-weight:600;color:var(--bd-text);font-size:.87rem;border-bottom:1px solid var(--bd-border)}
.bd-grp-head .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-sub{display:flex;align-items:center;gap:10px;padding:10px 0 10px 22px;border-bottom:1px dashed var(--bd-border);font-size:.82rem;position:relative}
.bd-sub:last-child{border-bottom:none}
.bd-sub::before{content:"";position:absolute;inset-inline-start:6px;top:0;bottom:0;width:2px;background:var(--bd-border);border-radius:2px}
.bd-sub .grow{flex:1;min-width:0}
.bd-sub .t1{font-weight:600;color:var(--bd-text);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bd-sub .t2{font-size:.74rem;color:var(--bd-faint)}
[data-theme="dark"] .bd-pill.g{color:#41D4A8}
[data-theme="dark"] .bd-pill.y{color:#ffd166}

/* forms inside bankdash cards */
.bd-card .input,.bd-card select.input,.bd-card textarea.input{background:var(--bd-input);border:1px solid var(--bd-border);border-radius:15px;color:var(--bd-text)}
.bd-card .input:focus{border-color:var(--bd-primary);box-shadow:0 0 0 4px rgba(29,168,81,.12)}
.bd-card .field label{color:var(--bd-muted)}
.bd-card .btn-primary{background:var(--bd-primary);box-shadow:0 8px 22px rgba(29,168,81,.3)}
.bd-card .btn-primary:hover{box-shadow:0 12px 30px rgba(29,168,81,.45)}
.bd-card .btn-ghost{background:var(--bd-input);border:1px solid var(--bd-border);color:var(--bd-text)}
.bd-card h3{color:var(--bd-text)}
.bd-card .muted{color:var(--bd-muted)}
.bd-card .tag.g{background:rgba(65,212,168,.16);color:#1d9e75}
.bd-card .tag.r{background:rgba(255,77,79,.12);color:var(--bd-red)}
.bd-card .tag.y{background:rgba(252,193,0,.2);color:#a97a00}
.bd-card .tag.b{background:var(--bd-tagblue);color:var(--bd-blue)}
.bd-card .kv{border-color:var(--bd-border)}

/* tables */
table.bd-tbl{width:100%;border-collapse:collapse;font-size:.85rem}
table.bd-tbl th{text-align:start;color:var(--bd-faint);font-size:.72rem;font-weight:600;padding:10px 10px;border-bottom:1px solid var(--bd-border)}
table.bd-tbl td{padding:12px 10px;border-bottom:1px solid var(--bd-border);color:var(--bd-text);vertical-align:middle}

/* legend + chart box */
.bd-legend{display:flex;gap:16px;align-items:center;font-size:.76rem;color:var(--bd-muted)}
.bd-legend .dt{width:10px;height:10px;border-radius:50%;display:inline-block;margin-inline-end:5px}
.chart-box{position:relative;height:230px}
.chart-box.sm{height:210px}

/* overlay for mobile sidebar */
.bd-overlay{display:none}

/* section show/hide */
.page-sec{display:none;animation:fadeSec .3s ease}
.page-sec.active{display:block}
@keyframes fadeSec{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(max-width:1100px){.bd-g3,.bd-g4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.bd-g2,.bd-g2r{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){
  .bd-side{position:fixed;inset-block:0;inset-inline-start:0;transform:translateX(105%);box-shadow:var(--bd-shadow)}
  html[dir="ltr"] .bd-side{transform:translateX(-105%)}
  .bd-side.open{transform:none!important}
  .bd-ham{display:grid}
  .bd-overlay.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55}
  .bd-top{padding:14px 16px 4px}
  .bd-top-row{flex-wrap:wrap;row-gap:10px}
  .bd-titlebox{flex:1 1 auto;min-width:0}
  .bd-title{white-space:normal;min-width:0;overflow-wrap:anywhere}
  .bd-search{flex:1 1 100%;min-width:0;order:9}
  .bd-sec-head{flex-wrap:wrap;gap:8px}
  .bd-page{padding:12px 16px 60px}
  .bd-user-meta{display:none}
  .bd-g3,.bd-g4{grid-template-columns:minmax(0,1fr)}
  .bd-title{font-size:1.25rem}
  .chart-box canvas{max-width:100%}
}
@media(max-width:640px){
  .grid[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  .bd-page .bd-row{flex-wrap:wrap;row-gap:4px}
  .set-row{flex-wrap:wrap;row-gap:8px}
  .set-row .grow{flex:1 1 140px}
  .set-row .field{flex:1 1 160px;min-width:0}
  .set-row .btn{flex:1 1 100%}
}

/* ═══════════ Modal system ═══════════ */
.bd-mov{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(6px);z-index:300;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.bd-mov.show{display:flex}
.bd-dlg{background:var(--bd-card);border:1px solid var(--bd-border);border-radius:22px;width:100%;max-width:500px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:dlgIn .25s ease}
@keyframes dlgIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.bd-dlg-head{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--bd-border);font-weight:700;color:var(--bd-text);font-size:1rem}
.bd-dlg-head .hgi-stroke{color:var(--bd-primary);font-size:1.3rem}
.bd-dlg-head .x{margin-inline-start:auto}
.bd-dlg-body{padding:20px 22px}
.bd-dlg-foot{padding:14px 22px;border-top:1px solid var(--bd-border);display:flex;gap:10px;justify-content:flex-end}
.bd-dlg .field label{color:var(--bd-muted)}
.bd-dlg .input,.bd-dlg select.input,.bd-dlg textarea.input{background:var(--bd-input);border:1px solid var(--bd-border);border-radius:13px;color:var(--bd-text);width:100%;padding:12px 15px;font-size:.9rem;font-family:inherit}
.bd-dlg .input:focus{outline:none;border-color:var(--bd-primary);box-shadow:0 0 0 4px rgba(29,168,81,.12)}
.bd-dlg .input.err-b{border-color:var(--bd-red)}
.f-err{font-size:.76rem;color:var(--bd-red);margin-top:5px;min-height:16px}
select.input option{background:var(--bd-card);color:var(--bd-text)}

/* ═══════════ Empty state ═══════════ */
.bd-empty{text-align:center;padding:38px 20px}
.bd-empty .eic{width:72px;height:72px;border-radius:24px;background:var(--bd-input);display:grid;place-items:center;margin:0 auto 14px;color:var(--bd-faint)}
.bd-empty .eic .hgi-stroke{font-size:2rem}
.bd-empty .et{font-weight:700;color:var(--bd-text);margin-bottom:4px}
.bd-empty .es{font-size:.8rem;color:var(--bd-muted);margin-bottom:14px}

/* ═══════════ Skeleton shimmer ═══════════ */
.skel{border-radius:10px;background:linear-gradient(90deg,var(--bd-input) 25%,var(--bd-border) 50%,var(--bd-input) 75%);background-size:200% 100%;animation:sk 1.3s infinite}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}

/* ═══════════ Avatar ═══════════ */
.avt{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;font-size:.82rem;flex-shrink:0}

/* ═══════════ Icon action buttons (no text) ═══════════ */
.act-btn{width:36px;height:36px;border-radius:11px;display:inline-grid;place-items:center;cursor:pointer;border:1px solid var(--bd-border);background:var(--bd-input);color:var(--bd-muted);transition:.2s;flex-shrink:0}
.act-btn:hover{transform:translateY(-1px)}
.act-btn .hgi-stroke{font-size:1.1rem}
.act-btn.ok:hover{color:#1DA851;border-color:#1DA851}
.act-btn.warn:hover{color:#e07b00;border-color:#e07b00}
.act-btn.bad:hover{color:var(--bd-red);border-color:var(--bd-red)}
.act-btn.info:hover{color:var(--bd-blue);border-color:var(--bd-blue)}
.act-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ═══════════ Toast types ═══════════ */
#toast{display:none;align-items:center;gap:10px}
#toast.show{display:flex}
#toast .hgi-stroke{font-size:1.15rem}
#toast.ok{border-color:rgba(29,168,81,.5);color:#1DA851}
#toast.err{border-color:rgba(255,77,79,.5);color:var(--bd-red)}
#toast.info{border-color:rgba(37,211,102,.35)}
[data-theme="dark"] #toast.ok{color:#34e07f}

/* ═══════════ Breadcrumb ═══════════ */
.bd-crumb{font-size:.74rem;color:var(--bd-faint);margin-top:2px}

/* ═══════════ Stat mini in modal ═══════════ */
.pw-show{display:flex;align-items:center;gap:8px;background:rgba(29,168,81,.08);border:1px dashed rgba(29,168,81,.4);border-radius:12px;padding:10px 14px;margin-top:12px;font-size:.85rem}
.pw-show code{font-family:monospace;font-weight:800;color:#1DA851;direction:ltr;font-size:1rem}
[data-theme="dark"] .pw-show code{color:#34e07f}