/* ═══════════════════════════════════════════
   واتساب برو — Brand Identity + Dark Mode
   Bootstrap handles layout & utilities.
   This file: vars, brand colors, dark fixes,
   and truly non-Bootstrap components only.
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');

/* ─── Brand Variables ─── */
:root {
  --wa-green:    #25D366;
  --wa-green-dk: #128C7E;
  --wa-glow:     rgba(37,211,102,.18);
  --bg:          #F0F2F5;
  --bg-card:     #FFFFFF;
  --bg-hover:    #F5F7FA;
  --border:      #E2E8F0;
  --text:        #374151;
  --text-muted:  #6B7280;
  --text-bright: #111827;
  --side-active-bg:    rgba(37,211,102,.1);
  --side-active-color: #128C7E;
}
[data-theme="dark"] {
  --bg:          #0D1117;
  --bg-card:     #161B22;
  --bg-hover:    #1C2333;
  --border:      rgba(255,255,255,.08);
  --text:        #C9D1D9;
  --text-muted:  #8B949E;
  --text-bright: #FFFFFF;
  --side-active-bg:    rgba(37,211,102,.12);
  --side-active-color: #25D366;
}

/* ─── Typography (Cairo site-wide) ─── */
body, button, input, select, textarea { font-family:'Cairo',sans-serif !important; }
.fa,.fas,.far,.fab,.fa-solid,.fa-brands,.fa-regular {
  font-family:"Font Awesome 6 Free","Font Awesome 6 Brands" !important;
}

/* ─── Base ─── */
body { background:var(--bg) !important; color:var(--text); }

/* ─── Dark Mode: Bootstrap Component Fixes ─── */
[data-theme="dark"] {
  color-scheme: dark;
}
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .offcanvas {
  background:var(--bg-card) !important;
  border-color:var(--border) !important;
  color:var(--text) !important;
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer { border-color:var(--border) !important; }
[data-theme="dark"] .table { color:var(--text) !important; --bs-table-bg:transparent; }
[data-theme="dark"] .table > :not(caption) > * > * { background:transparent !important; color:var(--text) !important; border-color:var(--border) !important; }
[data-theme="dark"] .table-hover > tbody > tr:hover > * { background:var(--bg-hover) !important; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text {
  background:var(--bg-hover) !important;
  border-color:var(--border) !important;
  color:var(--text) !important;
}
[data-theme="dark"] .form-control::placeholder { color:var(--text-muted) !important; }
[data-theme="dark"] select option { background:var(--bg-hover); color:var(--text); }
[data-theme="dark"] .alert-warning { background:rgba(245,158,11,.12) !important; border-color:rgba(245,158,11,.3) !important; color:#fbbf24 !important; }
[data-theme="dark"] .alert-danger  { background:rgba(239,68,68,.12) !important;  border-color:rgba(239,68,68,.3) !important;  color:#f87171 !important; }
[data-theme="dark"] .alert-info    { background:rgba(59,130,246,.12) !important; border-color:rgba(59,130,246,.3) !important; color:#93c5fd !important; }
[data-theme="dark"] .alert-success { background:rgba(37,211,102,.12) !important; border-color:rgba(37,211,102,.3) !important; color:#4ade80 !important; }
[data-theme="dark"] .bg-light  { background:var(--bg-hover) !important; }
[data-theme="dark"] .bg-white  { background:var(--bg-card)  !important; }
[data-theme="dark"] .text-dark { color:var(--text) !important; }
[data-theme="dark"] .text-muted { color:var(--text-muted) !important; }
[data-theme="dark"] .btn-close { filter:invert(1) !important; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, 
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color:var(--text-bright) !important; }
[data-theme="dark"] .list-group-item { background:var(--bg-card) !important; border-color:var(--border) !important; color:var(--text) !important; }

/* ─── Brand Buttons ─── */
.btn-wa { background:var(--wa-green) !important; color:#fff !important; border:none; }
.btn-wa:hover,.btn-wa:focus { background:var(--wa-green-dk) !important; color:#fff !important; box-shadow:0 4px 14px var(--wa-glow); }
.btn-outline-wa { border:2px solid var(--wa-green) !important; color:var(--wa-green) !important; background:transparent !important; }
.btn-outline-wa:hover { background:var(--wa-green) !important; color:#fff !important; }

/* ─── Form focus brand color ─── */
.form-control:focus,.form-select:focus {
  border-color:var(--wa-green) !important;
  box-shadow:0 0 0 3px var(--wa-glow) !important;
}

/* ─── Card base (theme only) ─── */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; }
.card-header { background:transparent; border-color:var(--border); font-weight:700; }

/* ─── Brand Badges ─── */
.badge-wa    { background:rgba(37,211,102,.15) !important; color:var(--wa-green-dk) !important; }
.badge-wa-dk { background:rgba(18,140,126,.15) !important; color:#128C7E !important; }

/* ─── Progress ─── */
.progress { background:var(--bg-hover) !important; }
.progress-bar { background:linear-gradient(90deg,var(--wa-green),#34B7F1) !important; }

/* ─── Sidebar (no Bootstrap equivalent) ─── */
#sidebar {
  position:fixed; top:0; right:0;
  width:240px; height:100vh;
  background:var(--bg-card);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  z-index:1050; overflow-y:auto;
  transition:transform .28s ease;
}
#main { margin-right:240px; min-height:100vh; }
#topbar {
  position:sticky; top:0; z-index:100;
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
  height:60px; display:flex;
  align-items:center; justify-content:space-between;
  padding:0 1.25rem;
}
.sidebar-logo { padding:.875rem 1rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.sidebar-user { padding:.75rem 1rem; border-top:1px solid var(--border); display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.logo-icon {
  width:36px; height:36px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--wa-green),var(--wa-green-dk));
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  box-shadow:0 3px 10px var(--wa-glow);
}

/* Sidebar nav buttons */
.sb-item {
  display:flex; align-items:center; gap:.6rem;
  width:100%; text-align:right; border:none;
  background:transparent; color:var(--text-muted);
  font-family:'Cairo',sans-serif; font-weight:600; font-size:.88rem;
  padding:.55rem .85rem; border-radius:8px;
  cursor:pointer; transition:background .15s,color .15s;
}
.sb-item:hover  { background:var(--bg-hover); color:var(--text); }
.sb-item.active { background:var(--side-active-bg); color:var(--side-active-color); font-weight:700; }
.sb-badge { margin-right:auto; background:#ef4444; color:#fff; border-radius:99px; padding:1px 7px; font-size:.68rem; font-weight:700; }

/* ─── Mobile sidebar ─── */
@media (max-width:767.98px) {
  #sidebar { transform:translateX(100%); }
  #sidebar.open { transform:translateX(0); box-shadow:-6px 0 20px rgba(0,0,0,.2); }
  #main { margin-right:0; }
  #menu-toggle { display:flex !important; }
}
@media (min-width:768px) { #menu-toggle { display:none !important; } }

#sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1040; }
#sidebar-backdrop.show { display:block; }
#menu-toggle {
  align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:7px;
  border:1px solid var(--border); background:var(--bg-hover);
  color:var(--text); font-size:1.1rem; cursor:pointer;
}

/* ─── Theme toggle button ─── */
.theme-toggle {
  width:34px; height:34px; border-radius:7px;
  border:1px solid var(--border); background:var(--bg-hover);
  color:var(--text); cursor:pointer; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, color .15s;
}
.theme-toggle:hover { border-color:var(--wa-green); color:var(--wa-green); }

/* ─── Page tab animation ─── */
.page { display:none; }
.page.active { display:block; animation:fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }

/* ─── WA connection ring ─── */
.wa-ring {
  width:96px; height:96px; border-radius:50%; font-size:2.4rem;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--border); margin:0 auto .75rem; transition:all .35s;
}
.wa-ring.connected  { border-color:var(--wa-green); box-shadow:0 0 20px var(--wa-glow); }
.wa-ring.connecting { border-color:#F59E0B; }

/* ─── Status dots ─── */
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot-green  { background:#25D366; animation:pulse 2s infinite; }
.dot-yellow { background:#F59E0B; }
.dot-red    { background:#EF4444; }
@keyframes pulse {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(37,211,102,.4); }
  50%      { opacity:.7; box-shadow:0 0 0 4px rgba(37,211,102,0); }
}

/* ─── Notification dropdown (no Bootstrap offcanvas equiv) ─── */
.notif-panel {
  position:absolute; top:calc(100% + 6px); left:0;
  width:310px; max-height:400px; overflow-y:auto;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.16);
  z-index:999; display:none;
}
.notif-panel.open { display:block; }
.notif-item { padding:.7rem 1rem; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:.75rem; transition: background .2s; }
.notif-item:hover { background:var(--bg-hover); }
.notif-item:last-child { border-bottom:none; }
.cursor-pointer { cursor:pointer !important; }

/* ─── Group chips (pill filter buttons) ─── */
.group-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:.28rem .75rem; border:1px solid var(--border);
  border-radius:99px; font-size:.8rem; font-weight:600;
  cursor:pointer; color:var(--text-muted); background:var(--bg-hover);
  transition:all .15s;
}
.group-chip:hover,.group-chip.active { border-color:var(--wa-green); color:var(--wa-green-dk); background:var(--side-active-bg); }

/* ─── Subscription plan cards ─── */
.plan-card { border:2px solid var(--border) !important; transition:transform .22s,border-color .22s; }
.plan-card:hover { transform:translateY(-4px); border-color:var(--wa-green) !important; }
.plan-card.active { border-color:var(--wa-green) !important; background:var(--side-active-bg) !important; }
.plan-price { font-size:2.2rem; font-weight:900; color:var(--wa-green-dk) !important; }

/* ─── Auth page wrapper ─── */
.auth-wrapper { min-height:100vh; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:1.5rem; }

/* ─── QR code box (needs white bg always) ─── */
#qr-box { display:inline-block; padding:10px; background:#fff; border-radius:10px; }

/* ─── Toast container ─── */
.toast-container-custom { position:fixed; top:68px; left:50%; transform:translateX(-50%); z-index:9999; min-width:280px; }

/* ─── Search Items ─── */
.search-item:hover { background: var(--bg-hover) !important; }
.extra-small { font-size: 0.65rem; }

/* ─── Password Show/Hide Toggle ─── */
.password-wrapper {
  position: relative;
}
.password-toggle {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s;
  z-index: 10;
  font-size: 1rem;
}
.password-toggle:hover {
  color: var(--wa-green);
}
.password-wrapper .form-control {
  padding-left: 40px;
}