/* ══════════════════════════════════════════════════════
   WA Business Hub — Modern Bootstrap 5 Theme
   Clean, mobile-first, production ready
   ══════════════════════════════════════════════════════ */
:root {
  --wa-green:#25D366; --wa-dark:#075E54; --wa-teal:#128C7E;
  --bg:#0c1410; --bg2:#111c18; --bg3:#182420;
  --card:#1c2b25; --card2:#203028; --border:#2b3f38;
  --text:#e5f2ee; --text2:#85b0a6; --text3:#527872;
  --accent:#25D366; --accent2:#128C7E;
  --danger:#ff4d6d; --warning:#ffd60a; --info:#4cc9f0; --purple:#7c3aed;
  --sidebar-w:225px;
  --navbar-h:60px;
  --footer-h:38px;
  /* Override Bootstrap */
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-border-color:var(--border);
  --bs-link-color:var(--accent);
  --bs-primary:#25D366;
}

/* ─ Reset & Base ─ */
*, *::before, *::after { box-sizing: border-box; }
body { font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--text3); }

/* ═══════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════ */
.navbar-main {
  position:fixed; top:0; left:0; right:0;
  height:var(--navbar-h); z-index:1045;
  background:linear-gradient(135deg,#071f18,#0d2d22);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  padding:0 1rem; gap:.75rem;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.navbar-brand-custom {
  display:flex; align-items:center; gap:.65rem;
  font-weight:800; font-size:1.05rem;
  letter-spacing:-.025em; color:var(--text);
  flex-shrink:0; white-space:nowrap;
}
.brand-icon {
  width:34px; height:34px;
  background:linear-gradient(135deg,var(--wa-green),var(--wa-teal));
  border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-size:1rem; color:#fff;
  box-shadow:0 0 16px rgba(37,211,102,.4); flex-shrink:0;
}
.nav-status {
  display:flex; align-items:center; gap:.4rem;
  font-size:.71rem; color:var(--text2);
  padding:.3rem .65rem; background:rgba(255,255,255,.04);
  border:1px solid var(--border); border-radius:20px;
}
.status-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--wa-green); animation:pulse 2s infinite; flex-shrink:0;
}
.status-dot.red { background:var(--danger); animation:none; }
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  50%      { box-shadow:0 0 0 5px rgba(37,211,102,0); }
}
.navbar-actions { display:flex; align-items:center; gap:.45rem; margin-left:auto; }
.btn-icon {
  width:34px; height:34px;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  border-radius:8px; display:inline-flex; align-items:center;
  justify-content:center; cursor:pointer; color:var(--text2);
  transition:all .18s; font-size:.82rem; flex-shrink:0;
}
.btn-icon:hover { background:var(--card2); color:var(--accent); border-color:rgba(37,211,102,.4); }
.notif-dot { position:absolute; top:7px; right:7px; width:6px; height:6px; background:var(--danger); border-radius:50%; border:1px solid var(--bg2); }
.avatar {
  width:32px; height:32px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:.77rem; font-weight:700; color:#fff; cursor:pointer;
}
.theme-toggle { display:flex; gap:.3rem; }
.theme-btn {
  width:30px; height:30px; border-radius:7px; border:1px solid var(--border);
  background:transparent; color:var(--text3); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.77rem; transition:all .18s;
}
.theme-btn:hover, .theme-btn.active { background:var(--accent); color:#000; border-color:var(--accent); }

/* Hamburger */
.navbar-hamburger {
  display:none; width:34px; height:34px; background:none; border:none;
  color:var(--text); font-size:1rem; cursor:pointer; border-radius:8px;
  align-items:center; justify-content:center; transition:background .15s;
  flex-shrink:0;
}
.navbar-hamburger:hover { background:var(--bg3); }

/* ═══════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════ */
.sidebar {
  position:fixed; top:var(--navbar-h); left:0; bottom:0;
  width:var(--sidebar-w); background:var(--bg2);
  border-right:1px solid var(--border);
  overflow-y:auto; overflow-x:hidden;
  z-index:1040; transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.sidebar-ver {
  padding:.6rem 1rem .3rem; font-size:.63rem; color:var(--text3);
  font-family:'JetBrains Mono',monospace; letter-spacing:.06em; flex-shrink:0;
}
.sidebar-section {
  padding:.65rem 1rem .2rem; font-size:.6rem; font-weight:700;
  color:var(--text3); text-transform:uppercase; letter-spacing:.1em; flex-shrink:0;
}
.nav-item-custom {
  display:flex; align-items:center; gap:.55rem;
  padding:.52rem .9rem; margin:.08rem .45rem; border-radius:8px;
  cursor:pointer; color:var(--text2); font-size:.79rem;
  font-weight:500; transition:all .15s; border:1px solid transparent;
}
.nav-item-custom:hover { background:var(--card); color:var(--text); }
.nav-item-custom.active {
  background:linear-gradient(135deg,rgba(37,211,102,.15),rgba(18,140,126,.08));
  color:var(--accent); border-color:rgba(37,211,102,.2);
}
.nav-icon { width:16px; text-align:center; font-size:.8rem; flex-shrink:0; }
.nav-badge {
  margin-left:auto; background:var(--danger); color:#fff;
  font-size:.6rem; padding:1px 5px; border-radius:10px; font-weight:700;
}
.nav-badge.green { background:var(--accent); color:#000; }

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px); z-index:1039;
}
.sidebar-overlay.open { display:block; }

/* ═══════════════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════════════ */
.main-content {
  margin-left:var(--sidebar-w); margin-top:var(--navbar-h);
  padding:1.5rem; min-height:calc(100vh - var(--navbar-h) - var(--footer-h));
  padding-bottom:calc(var(--footer-h) + 1rem);
}
.footer-main {
  position:fixed; bottom:0; left:var(--sidebar-w); right:0;
  height:var(--footer-h); background:var(--bg2);
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.25rem; font-size:.68rem; color:var(--text3); z-index:999;
}
.footer-links { display:flex; gap:.85rem; }
.footer-links a { color:var(--text3); transition:color .15s; }
.footer-links a:hover { color:var(--accent); }

/* ═══════════════════════════════════════
   PAGE STRUCTURE
   ═══════════════════════════════════════ */
.page-header {
  margin-bottom:1.5rem; display:flex; align-items:flex-start;
  justify-content:space-between; flex-wrap:wrap; gap:.75rem;
}
.page-title { font-size:1.3rem; font-weight:800; letter-spacing:-.025em; line-height:1.2; }
.page-subtitle { font-size:.76rem; color:var(--text2); margin-top:.2rem; }
.breadcrumb-custom { display:flex; align-items:center; gap:.35rem; font-size:.7rem; color:var(--text3); margin-bottom:.3rem; }

/* ═══════════════════════════════════════
   CARDS
   ═══════════════════════════════════════ */
.card-custom {
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:1.25rem; transition:border-color .2s;
}
.card-custom:hover { border-color:rgba(37,211,102,.2); }
.stat-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:1.25rem;
  position:relative; overflow:hidden; height:100%;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.stat-card:hover { border-color:rgba(37,211,102,.2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); }
.stat-card::before {
  content:''; position:absolute; top:-10px; right:-10px;
  width:80px; height:80px; border-radius:50%; opacity:.08;
}
.stat-card.green::before  { background:var(--wa-green); }
.stat-card.teal::before   { background:var(--wa-teal); }
.stat-card.blue::before   { background:var(--info); }
.stat-card.purple::before { background:var(--purple); }
.stat-card.yellow::before { background:var(--warning); }
.stat-value { font-size:1.8rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
.stat-label { font-size:.71rem; color:var(--text2); margin-top:.28rem; }
.stat-change { font-size:.69rem; margin-top:.45rem; }
.stat-change.up   { color:var(--wa-green); }
.stat-change.down { color:var(--danger); }
.stat-icon { font-size:1.35rem; margin-bottom:.6rem; }

/* ═══════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════ */
.btn-wa {
  background:linear-gradient(135deg,var(--wa-green),var(--wa-teal));
  border:none; color:#fff; font-weight:600; font-size:.82rem;
  padding:.5rem 1.1rem; border-radius:9px; cursor:pointer;
  transition:all .2s; display:inline-flex; align-items:center;
  gap:.4rem; font-family:inherit; white-space:nowrap;
}
.btn-wa:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,211,102,.4); color:#fff; }
.btn-wa:active { transform:translateY(0); }
.btn-wa-outline {
  background:transparent; border:1px solid var(--accent); color:var(--accent);
  font-weight:600; font-size:.82rem; padding:.5rem 1.1rem; border-radius:9px;
  cursor:pointer; transition:all .2s; display:inline-flex; align-items:center;
  gap:.4rem; font-family:inherit; white-space:nowrap;
}
.btn-wa-outline:hover { background:rgba(37,211,102,.1); color:var(--accent); }
.btn-danger-custom {
  background:linear-gradient(135deg,#ff4d6d,#c9184a);
  border:none; color:#fff; font-weight:600; font-size:.82rem;
  padding:.5rem 1.1rem; border-radius:9px; cursor:pointer;
  transition:all .2s; display:inline-flex; align-items:center; gap:.4rem; font-family:inherit;
}
.btn-sm-custom { padding:.32rem .7rem!important; font-size:.73rem!important; border-radius:7px!important; }
.btn-icon-sm {
  width:28px; height:28px; background:var(--bg3); border:1px solid var(--border);
  border-radius:6px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text2); transition:all .18s; font-size:.73rem;
}
.btn-icon-sm:hover { background:var(--card2); color:var(--accent); }

/* ═══════════════════════════════════════
   FORMS (override Bootstrap completely)
   ═══════════════════════════════════════ */
.form-control, .form-control-custom {
  display:block; width:100%; padding:.55rem .9rem;
  font-size:.82rem!important; font-family:inherit; font-weight:400;
  line-height:1.5; color:var(--text)!important; appearance:none;
  background-color:var(--bg3)!important; background-clip:padding-box;
  border:1px solid var(--border)!important; border-radius:9px!important;
  transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  outline:none!important;
}
.form-control:focus, .form-control-custom:focus {
  color:var(--text)!important; background-color:var(--bg3)!important;
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(37,211,102,.14)!important; outline:0;
}
.form-control::placeholder, .form-control-custom::placeholder { color:var(--text3)!important; opacity:1; }
textarea.form-control, textarea.form-control-custom { resize:vertical; min-height:80px; }
.form-select, .form-select-custom {
  display:block; width:100%; padding:.55rem 2.25rem .55rem .9rem;
  font-size:.82rem!important; font-family:inherit; font-weight:400;
  line-height:1.5; color:var(--text)!important; appearance:none; -webkit-appearance:none;
  background-color:var(--bg3)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238ab5ad' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:right .75rem center!important;
  background-size:12px!important;
  border:1px solid var(--border)!important; border-radius:9px!important;
  transition:border-color .15s; cursor:pointer; outline:none!important;
}
.form-select:focus, .form-select-custom:focus {
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(37,211,102,.14)!important;
  background-color:var(--bg3)!important; color:var(--text)!important;
}
.form-select option, .form-select-custom option { background:var(--bg3); color:var(--text); }
.form-label, .form-label-custom {
  display:block; margin-bottom:.35rem; font-size:.75rem!important;
  font-weight:600!important; color:var(--text2)!important;
}
.input-group > .form-control { border-radius:9px 0 0 9px!important; }
.input-group > .form-control:last-child { border-radius:0 9px 9px 0!important; }
.input-group-text {
  background:var(--bg3)!important; border:1px solid var(--border)!important;
  color:var(--text2)!important; font-size:.82rem!important; padding:.55rem .9rem;
}
input[type="range"] { accent-color:var(--accent); width:100%; }
input[type="checkbox"], input[type="radio"] { accent-color:var(--accent); }

/* ═══════════════════════════════════════
   TABLE
   ═══════════════════════════════════════ */
.table-custom { width:100%; border-collapse:collapse; font-size:.8rem; }
.table-custom thead th {
  padding:.65rem 1rem; font-size:.68rem; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--border); background:var(--bg3); white-space:nowrap;
}
.table-custom tbody td {
  padding:.7rem 1rem; border-bottom:1px solid rgba(43,63,56,.4);
  color:var(--text2); vertical-align:middle;
}
.table-custom tbody tr:hover td { background:rgba(37,211,102,.025); }
.table-custom tbody tr:last-child td { border-bottom:none; }
.table-responsive-custom { overflow-x:auto; border-radius:14px; -webkit-overflow-scrolling:touch; }

/* ═══════════════════════════════════════
   BADGES
   ═══════════════════════════════════════ */
.badge-custom {
  display:inline-flex; align-items:center; gap:.28rem;
  padding:.22rem .55rem; border-radius:20px;
  font-size:.67rem; font-weight:600; white-space:nowrap;
}
.badge-active   { background:rgba(37,211,102,.13); color:var(--wa-green); border:1px solid rgba(37,211,102,.28); }
.badge-pending  { background:rgba(255,214,10,.13); color:var(--warning);  border:1px solid rgba(255,214,10,.28); }
.badge-rejected { background:rgba(255,77,109,.13); color:var(--danger);   border:1px solid rgba(255,77,109,.28); }
.badge-paused   { background:rgba(82,120,114,.13); color:var(--text3);    border:1px solid rgba(82,120,114,.28); }
.badge-info     { background:rgba(76,201,240,.13); color:var(--info);     border:1px solid rgba(76,201,240,.28); }
.badge-purple   { background:rgba(124,58,237,.13); color:#a78bfa;         border:1px solid rgba(124,58,237,.28); }

/* ═══════════════════════════════════════
   CHAT
   ═══════════════════════════════════════ */
.chat-container {
  display:flex; height:calc(100vh - 155px); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; background:var(--bg2);
}
.chat-list {
  width:300px; background:var(--card); border-right:1px solid var(--border);
  display:flex; flex-direction:column; flex-shrink:0; transition:all .25s;
}
.chat-search-box { padding:.6rem; border-bottom:1px solid var(--border); }
.chat-search-box input {
  background:var(--bg3); border:1px solid var(--border); color:var(--text);
  border-radius:20px; padding:.4rem .85rem; font-size:.78rem;
  width:100%; outline:none; font-family:inherit;
}
.chat-search-box input:focus { border-color:var(--accent); }
.chat-list-items { flex:1; overflow-y:auto; }
.chat-item {
  display:flex; align-items:center; gap:.65rem; padding:.65rem 1rem;
  cursor:pointer; border-bottom:1px solid rgba(43,63,56,.3); transition:background .12s;
}
.chat-item:hover, .chat-item.active { background:rgba(37,211,102,.055); }
.chat-avatar {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.83rem; color:#fff; flex-shrink:0;
}
.chat-avatar.group { background:linear-gradient(135deg,#4cc9f0,#7c3aed); }
.chat-item-info { flex:1; min-width:0; }
.chat-item-name { font-size:.79rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-item-preview { font-size:.7rem; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:.08rem; }
.chat-item-meta { text-align:right; flex-shrink:0; }
.chat-item-time { font-size:.62rem; color:var(--text3); }
.chat-unread { background:var(--accent); color:#000; border-radius:50%; width:17px; height:17px; display:flex; align-items:center; justify-content:center; font-size:.61rem; font-weight:700; margin-top:.28rem; margin-left:auto; }
.chat-main { flex:1; display:flex; flex-direction:column; background:var(--bg2); min-width:0; }
.chat-header { padding:.62rem 1.1rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.65rem; background:var(--card); flex-shrink:0; }
.chat-messages { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.55rem; }
.msg { max-width:68%; }
.msg.sent { align-self:flex-end; }
.msg.received { align-self:flex-start; }
.msg-bubble { padding:.5rem .82rem; border-radius:12px; font-size:.82rem; line-height:1.55; word-break:break-word; }
.msg.sent .msg-bubble { background:linear-gradient(135deg,rgba(37,211,102,.22),rgba(18,140,126,.15)); border:1px solid rgba(37,211,102,.22); color:var(--text); border-bottom-right-radius:3px; }
.msg.received .msg-bubble { background:var(--card); border:1px solid var(--border); color:var(--text); border-bottom-left-radius:3px; }
.msg-meta { font-size:.62rem; color:var(--text3); margin-top:.17rem; display:flex; align-items:center; gap:.25rem; }
.msg.sent .msg-meta { justify-content:flex-end; }
.msg-agent { font-size:.62rem; color:var(--accent); font-weight:600; margin-bottom:.1rem; padding-left:.2rem; }
.tick-delivered { color:var(--text3); } .tick-read { color:var(--info); }
.msg-img { max-width:200px; border-radius:8px; display:block; margin-bottom:.3rem; cursor:pointer; }
.msg-doc { display:flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.05); border-radius:8px; padding:.38rem .58rem; font-size:.74rem; }
.typing-indicator { display:flex; gap:3px; padding:.35rem .55rem; }
.typing-dot { width:7px; height:7px; border-radius:50%; background:var(--text3); animation:typingBounce 1.2s infinite; }
.typing-dot:nth-child(2) { animation-delay:.2s; } .typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes typingBounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.chat-input-area { padding:.6rem .8rem; border-top:1px solid var(--border); background:var(--card); display:flex; align-items:flex-end; gap:.45rem; flex-shrink:0; }
.chat-input { flex:1; background:var(--bg3); border:1px solid var(--border); color:var(--text); border-radius:20px; padding:.5rem 1rem; font-size:.82rem; font-family:inherit; resize:none; outline:none; max-height:120px; overflow-y:auto; line-height:1.4; }
.chat-input:focus { border-color:var(--accent); }
.chat-attach-btn { width:32px; height:32px; background:transparent; border:none; color:var(--text3); cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .14s; font-size:.84rem; flex-shrink:0; }
.chat-attach-btn:hover { background:var(--bg3); color:var(--accent); }
.btn-send { width:38px; height:38px; background:linear-gradient(135deg,var(--wa-green),var(--wa-teal)); border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; transition:all .2s; flex-shrink:0; }
.btn-send:hover { transform:scale(1.08); box-shadow:0 4px 14px rgba(37,211,102,.4); }
.empty-chat-state { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; text-align:center; color:var(--text3); }
.empty-chat-state i { font-size:3rem; margin-bottom:1rem; opacity:.3; }

/* ═══════════════════════════════════════
   MODALS
   ═══════════════════════════════════════ */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(8px); z-index:2000; display:none; align-items:center; justify-content:center; padding:1rem; overflow-y:auto; }
.modal-overlay.show { display:flex; }
.modal-box { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1.75rem; width:100%; max-width:540px; max-height:90vh; overflow-y:auto; animation:modalIn .22s cubic-bezier(.34,1.56,.64,1); }
@keyframes modalIn { from { transform:scale(.93) translateY(10px); opacity:0; } to { transform:scale(1) translateY(0); opacity:1; } }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.modal-title { font-size:.97rem; font-weight:700; }
.modal-close { width:30px; height:30px; background:var(--bg3); border:none; border-radius:7px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text2); transition:all .15s; }
.modal-close:hover { background:var(--danger); color:#fff; }

/* ═══════════════════════════════════════
   TOAST
   ═══════════════════════════════════════ */
.toast-container { position:fixed; bottom:1.75rem; right:1.25rem; z-index:9999; display:flex; flex-direction:column; gap:.4rem; pointer-events:none; }
.toast-item { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:.65rem .9rem; display:flex; align-items:center; gap:.6rem; font-size:.8rem; min-width:235px; max-width:340px; animation:toastIn .26s ease; box-shadow:0 8px 28px rgba(0,0,0,.4); pointer-events:all; }
.toast-item.success { border-color:rgba(37,211,102,.45); } .toast-item.error { border-color:rgba(255,77,109,.45); } .toast-item.info { border-color:rgba(76,201,240,.45); } .toast-item.warning { border-color:rgba(255,214,10,.45); }
@keyframes toastIn { from { transform:translateX(110%); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* ═══════════════════════════════════════
   MISC COMPONENTS
   ═══════════════════════════════════════ */
.progress-custom { background:var(--bg3); border-radius:10px; height:6px; overflow:hidden; }
.progress-fill { height:100%; border-radius:10px; background:linear-gradient(90deg,var(--wa-green),var(--wa-teal)); transition:width .6s; }
.progress-fill.blue { background:linear-gradient(90deg,var(--info),#7c3aed); }
.progress-fill.yellow { background:linear-gradient(90deg,var(--warning),#f77f00); }
.divider { height:1px; background:var(--border); margin:1rem 0; }
.section-title { font-size:.82rem; font-weight:700; color:var(--text); margin-bottom:.72rem; display:flex; align-items:center; gap:.42rem; }
.section-title i { color:var(--accent); }
.tabs-custom { display:flex; gap:.2rem; background:var(--bg3); border-radius:10px; padding:.22rem; margin-bottom:1.2rem; border:1px solid var(--border); flex-wrap:wrap; }
.tab-btn { flex:1; min-width:70px; padding:.42rem .7rem; border:none; background:transparent; color:var(--text2); font-size:.75rem; font-weight:600; border-radius:7px; cursor:pointer; transition:all .16s; font-family:inherit; white-space:nowrap; }
.tab-btn.active { background:var(--card); color:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.3); }
.webhook-log { background:var(--bg); border-radius:8px; padding:.7rem; font-family:'JetBrains Mono',monospace; font-size:.7rem; max-height:320px; overflow-y:auto; border:1px solid var(--border); }
.wh-line { display:flex; gap:.62rem; margin-bottom:.25rem; line-height:1.5; }
.wh-time { color:var(--text3); flex-shrink:0; } .wh-type { flex-shrink:0; min-width:58px; }
.wh-type.msg { color:var(--wa-green); } .wh-type.status { color:var(--info); } .wh-type.error { color:var(--danger); } .wh-type.template { color:#a78bfa; }
.wh-text { color:#64ffda; word-break:break-all; }
.template-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1.05rem; transition:all .2s; }
.template-card:hover { border-color:rgba(37,211,102,.3); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); }
.template-preview { background:var(--bg3); border-radius:8px; padding:.7rem; margin:.58rem 0; font-size:.77rem; color:var(--text2); line-height:1.6; border-left:3px solid var(--accent); }
.call-card, .number-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:.9rem 1rem; display:flex; align-items:center; gap:.85rem; transition:all .2s; }
.call-card:hover, .number-card:hover { border-color:rgba(37,211,102,.28); }
.call-type-icon, .number-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; }
.call-type-icon.inbound, .call-type-icon.incoming { background:rgba(37,211,102,.14); color:var(--wa-green); }
.call-type-icon.outbound, .call-type-icon.outgoing { background:rgba(76,201,240,.14); color:var(--info); }
.call-type-icon.missed { background:rgba(255,77,109,.14); color:var(--danger); }
.number-icon { background:rgba(37,211,102,.14); color:var(--accent); }
.phone-frame { width:215px; background:#1a1a2e; border-radius:26px; padding:.6rem; border:2px solid #333; box-shadow:0 20px 60px rgba(0,0,0,.5); margin:0 auto; }
.phone-screen { background:#e5ddd5; border-radius:18px; overflow:hidden; }
.phone-wh { background:var(--wa-dark); padding:.44rem .68rem; display:flex; align-items:center; gap:.38rem; }
.phone-msgs { padding:.44rem; min-height:136px; display:flex; flex-direction:column; gap:.28rem; }
.phone-bubble-r { background:#dcf8c6; padding:.3rem .52rem; border-radius:8px 8px 0 8px; font-size:.68rem; color:#333; max-width:88%; align-self:flex-end; }
.phone-bubble-l { background:#fff; padding:.3rem .52rem; border-radius:8px 8px 8px 0; font-size:.68rem; color:#333; max-width:88%; align-self:flex-start; }
.loading-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:5000; display:flex; align-items:center; justify-content:center; }
.spinner-custom { width:20px; height:20px; border:2px solid rgba(37,211,102,.2); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty-state { text-align:center; padding:2.5rem 1rem; }
.empty-state i { font-size:2.2rem; color:var(--text3); margin-bottom:.85rem; display:block; }
.empty-state p { color:var(--text2); font-size:.82rem; }
.api-key-field { font-family:'JetBrains Mono',monospace!important; font-size:.73rem!important; letter-spacing:.03em; }
.label-tag { display:inline-flex; align-items:center; gap:.27rem; background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:.17rem .52rem; font-size:.69rem; color:var(--text2); }
.perm-row { display:flex; align-items:center; justify-content:space-between; padding:.46rem 0; border-bottom:1px solid var(--border); font-size:.79rem; }
.perm-row:last-child { border-bottom:none; }
.user-online { width:8px; height:8px; border-radius:50%; background:var(--wa-green); display:inline-block; margin-right:.28rem; animation:pulse 2s infinite; }
.user-offline { width:8px; height:8px; border-radius:50%; background:var(--text3); display:inline-block; margin-right:.28rem; }
.pagination-custom .page-link { background:var(--bg3); border-color:var(--border); color:var(--text2); font-size:.76rem; }
.pagination-custom .page-item.active .page-link { background:var(--accent); border-color:var(--accent); color:#000; }
.audit-line { display:flex; gap:.68rem; padding:.44rem 0; border-bottom:1px solid rgba(43,63,56,.3); font-size:.77rem; align-items:flex-start; }
.audit-line:last-child { border-bottom:none; }
.audit-time { color:var(--text3); flex-shrink:0; width:68px; font-family:'JetBrains Mono',monospace; font-size:.67rem; }
.audit-user { flex-shrink:0; width:100px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.audit-action { flex-shrink:0; width:92px; } .audit-detail { color:var(--text2); flex:1; }
.audit-tag { display:inline-flex; padding:.12rem .4rem; border-radius:4px; font-size:.62rem; font-weight:700; }
.audit-tag.create { background:rgba(37,211,102,.14); color:var(--wa-green); } .audit-tag.update { background:rgba(76,201,240,.14); color:var(--info); } .audit-tag.delete { background:rgba(255,77,109,.14); color:var(--danger); } .audit-tag.login { background:rgba(124,58,237,.14); color:#a78bfa; } .audit-tag.send { background:rgba(255,214,10,.14); color:var(--warning); } .audit-tag.view { background:rgba(82,120,114,.14); color:var(--text3); }
.role-badge { display:inline-flex; align-items:center; padding:.17rem .5rem; border-radius:20px; font-size:.65rem; font-weight:700; }
.role-admin   { background:rgba(255,77,109,.12); color:var(--danger);    border:1px solid rgba(255,77,109,.3); }
.role-manager { background:rgba(76,201,240,.12); color:var(--info);      border:1px solid rgba(76,201,240,.3); }
.role-agent   { background:rgba(37,211,102,.12); color:var(--wa-green);  border:1px solid rgba(37,211,102,.3); }
.chart-bars { display:flex; align-items:flex-end; gap:3px; height:100%; }
.chart-bar-item { flex:1; border-radius:4px 4px 0 0; transition:height .5s; position:relative; cursor:pointer; }
.chart-bar-item:hover::after { content:attr(data-val); position:absolute; top:-22px; left:50%; transform:translateX(-50%); background:var(--card); border:1px solid var(--border); padding:2px 6px; border-radius:4px; font-size:.62rem; color:var(--text); white-space:nowrap; z-index:10; }
.chart-labels { display:flex; gap:3px; margin-top:.22rem; }
.chart-label-item { flex:1; text-align:center; font-size:.59rem; color:var(--text3); }

/* ═══════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════ */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 30% 50%,rgba(37,211,102,.07) 0%,transparent 55%),radial-gradient(ellipse at 70% 50%,rgba(18,140,126,.06) 0%,transparent 55%); padding:1rem; }
.login-box { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:2.5rem; width:100%; max-width:400px; box-shadow:0 24px 80px rgba(0,0,0,.4); }
.login-logo { text-align:center; margin-bottom:1.9rem; }
.login-logo .brand-icon { width:52px; height:52px; border-radius:14px; font-size:1.5rem; margin:0 auto .65rem; }
.login-logo h1 { font-size:1.28rem; font-weight:800; letter-spacing:-.02em; }
.login-logo p  { font-size:.77rem; color:var(--text2); margin-top:.2rem; }

/* ═══════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════ */
[data-theme="light"] {
  --bg:#f0f5f3; --bg2:#e5edeb; --bg3:#d9e8e5;
  --card:#fff; --card2:#f4faf8; --border:#c2d8d4;
  --text:#0d2520; --text2:#3a6660; --text3:#69978f;
}
[data-theme="light"] .navbar-main { background:linear-gradient(135deg,#063d2e,#0a5840); }
[data-theme="light"] .footer-main { background:var(--bg2); }
[data-theme="light"] .modal-overlay { background:rgba(0,0,0,.5); }
[data-theme="light"] .wh-text { color:#0a5c44; }
[data-theme="light"] .msg.sent .msg-bubble { background:linear-gradient(135deg,rgba(37,211,102,.28),rgba(18,140,126,.22)); }
[data-theme="light"] .msg.received .msg-bubble { background:#fff; }
[data-theme="light"] .form-control, [data-theme="light"] .form-control-custom,
[data-theme="light"] .form-select, [data-theme="light"] .form-select-custom { background:#fff!important; }
[data-theme="light"] .toast-item { box-shadow:0 8px 28px rgba(0,0,0,.1); }
[data-theme="light"] .btn-icon { background:rgba(255,255,255,.8); }

/* ═══════════════════════════════════════
   BOOTSTRAP DROPDOWN OVERRIDE
   ═══════════════════════════════════════ */
.dropdown-menu {
  background:var(--card)!important; border:1px solid var(--border)!important;
  border-radius:12px!important; box-shadow:0 8px 32px rgba(0,0,0,.35)!important;
  padding:.4rem!important; min-width:200px;
}
.dropdown-item { color:var(--text2)!important; font-size:.8rem!important; border-radius:8px!important; padding:.44rem .75rem!important; transition:all .14s!important; }
.dropdown-item:hover, .dropdown-item:focus { background:var(--bg3)!important; color:var(--text)!important; }
.dropdown-divider { border-color:var(--border)!important; margin:.3rem 0!important; }

/* ═══════════════════════════════════════
   RESPONSIVE — TABLET & MOBILE
   ═══════════════════════════════════════ */

/* Tablet (< 992px) - hide sidebar, show hamburger */
@media (max-width: 991.98px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0!important; }
  .footer-main { left:0!important; }
  .navbar-hamburger { display:flex!important; }
}

/* Mobile (< 768px) */
@media (max-width: 767.98px) {
  :root { --navbar-h:56px; }
  .navbar-main { padding:0 .75rem; gap:.5rem; }
  .navbar-brand-custom .brand-text { display:none; } /* hide name, keep icon */
  .nav-status { display:none; }
  .theme-toggle { display:none; }
  .main-content { padding:.85rem; }
  .page-title { font-size:1.15rem; }

  /* Chat full-screen stack */
  .chat-container { flex-direction:column; height:auto; min-height:calc(100vh - 120px); border-radius:10px; }
  .chat-list { width:100%!important; max-height:240px; border-right:none!important; border-bottom:1px solid var(--border); }
  .chat-main { min-height:350px; }
  .chat-messages { max-height:calc(100vh - 440px); min-height:200px; }
  .msg { max-width:90%; }

  /* Modal slides up from bottom */
  .modal-overlay { padding:0; align-items:flex-end; }
  .modal-box { max-width:100%!important; border-radius:18px 18px 0 0!important; max-height:92vh; animation:modalSlideUp .25s ease; }
  @keyframes modalSlideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }

  /* Toast full-width */
  .toast-container { bottom:.85rem; right:.65rem; left:.65rem; align-items:stretch; }
  .toast-item { min-width:0; }

  /* Stat cards: Bootstrap handles 2-col via col-6 */
  .stat-value { font-size:1.5rem; }

  /* Prevent iOS zoom on inputs */
  .form-control, .form-control-custom, .form-select, .form-select-custom, .chat-input { font-size:16px!important; }

  /* Call cards wrap */
  .call-card { flex-wrap:wrap; gap:.5rem; }

  /* Footer hidden on mobile */
  .footer-main { display:none; }
  .main-content { padding-bottom:.85rem; }

  /* Table horizontal scroll */
  .table-responsive-custom { border-radius:10px; }
}

@media (max-width: 480px) {
  .btn-wa, .btn-wa-outline { padding:.44rem .9rem; font-size:.78rem; }
  .card-custom, .stat-card { padding:1rem; border-radius:12px; }
  .chat-avatar { width:36px; height:36px; font-size:.77rem; }
}