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

/*
  ┌─────────────────────────────────────────────────────┐
  │  5 Premium Themes — Professional Design System      │
  │  Inspired by: Linear · Vercel · Raycast · Figma     │
  └─────────────────────────────────────────────────────┘
*/

/*
  ┌─────────────────────────────────────────────────────┐
  │  3 Zid Premium Themes — Exclusive Design System      │
  │  Inspired by Zid's Elegant Arabic E-Commerce Style  │
  │  Created with high-end dark and light modes         │
  └─────────────────────────────────────────────────────┘
*/

/* 1. ZID PURPLE (Default Deep Dark) */
:root,[data-theme="zid-dark"] {
  --bg:       #07050d;
  --surface:  #0d091a;
  --surface2: #140e26;
  --surface3: #1b1233;
  --accent:   #8C3DF5; /* Zid Iconic Royal Purple */
  --accent2:  #F5A623; /* Zid Accent Gold */
  --green:    #34d399;
  --orange:   #fb923c;
  --blue:     #60a5fa;
  --text:     #f5f2fc;
  --text2:    #a89dbd;
  --text3:    #8879a3;
  --border:   rgba(140, 61, 245, 0.2);
  --border2:  rgba(255, 255, 255, 0.04);
  --glow:       rgba(140, 61, 245, 0.35);
  --green-glow: rgba(52, 211, 153, 0.18);
  --shadow:     0 8px 40px rgba(0, 0, 0, 0.8);
  --shadow-sm:  0 4px 16px rgba(0, 0, 0, 0.4);
  --sidebar-w: 256px;
  --radius:    14px;
  --radius-sm: 8px;
  --mesh1: rgba(140, 61, 245, 0.1);
  --mesh2: rgba(245, 166, 35, 0.05);
  --mesh-pos1: 80% 5%;
  --mesh-pos2: 15% 95%;
  --topbar-bg: rgba(13, 9, 26, 0.85);
  --premium-gradient: linear-gradient(135deg, #8C3DF5 0%, #F5A623 100%);
}

/* 2. ZID PURE (Crisp Lavender Light) */
[data-theme="zid-light"] {
  --bg:       #fbfafd;
  --surface:  #ffffff;
  --surface2: #f4f0fa;
  --surface3: #eae4f5;
  --accent:   #7723E2; /* Rich Zid Royal Purple */
  --accent2:  #e89209; /* Rich Golden Bronze */
  --green:    #059669;
  --orange:   #ea580c;
  --blue:     #0284c7;
  --text:     #171026;
  --text2:    #635b75;
  --text3:    #847c94;
  --border:   rgba(119, 35, 226, 0.18);
  --border2:  rgba(0, 0, 0, 0.06);
  --glow:       rgba(119, 35, 226, 0.22);
  --green-glow: rgba(5, 150, 105, 0.15);
  --shadow:     0 8px 30px rgba(119, 35, 226, 0.05);
  --shadow-sm:  0 4px 12px rgba(119, 35, 226, 0.03);
  --mesh1: rgba(119, 35, 226, 0.06);
  --mesh2: rgba(232, 146, 9, 0.03);
  --mesh-pos1: 75% 10%;
  --mesh-pos2: 25% 90%;
  --topbar-bg: rgba(255, 255, 255, 0.85);
  --premium-gradient: linear-gradient(135deg, #7723E2 0%, #4c0bb3 100%);
}


/* ══════════════════════════════════════════════════════ */

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

body{
  font-family:'Cairo',sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  min-height:100vh;
  overflow:hidden;
  direction:rtl;
}

/* mesh background — adapts to theme via CSS vars */
body::before{
  content:'';
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 65% 45% at var(--mesh-pos1, 75% 5%), var(--mesh1, rgba(124,92,252,.09)) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at var(--mesh-pos2, 15% 90%), var(--mesh2, rgba(52,211,153,.04)) 0%, transparent 65%);
  transition: background 0.6s ease;
}
.main-content,.sidebar{position:relative;z-index:1}


/* ── SIDEBAR ── */
.sidebar{
  width:var(--sidebar-w);
  background:var(--surface);
  border-left:1px solid var(--border);
  display:flex;
  flex-direction:column;
  position:fixed;
  right:0;top:0;bottom:0;
  z-index:200;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}

.sidebar-header{
  padding:22px 18px 16px;
  border-bottom:1px solid var(--border2);
}

.logo{display:flex;align-items:center;gap:12px}
.logo-icon{
  width:44px;height:44px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 24px var(--glow);
  flex-shrink:0;
}
.logo-icon svg{width:22px;height:22px;fill:white}
.logo-title{display:block;font-size:15px;font-weight:800;letter-spacing:-.3px}
.logo-sub{display:block;font-size:11px;color:var(--text2);margin-top:1px}

/* Connection Card */
.connection-card{
  margin:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border-radius:var(--radius);
  padding:14px;
  border:1px solid var(--border);
}
.connection-status{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px;font-weight:600}
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.status-dot.connected{background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 2s infinite}
.status-dot.disconnected{background:var(--accent2)}
.status-dot.connecting,.status-dot.qr{background:var(--orange);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}
.connection-phone{font-size:11px;color:var(--text2);margin-bottom:10px;padding-right:16px}
.btn-connect{
  width:100%;padding:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;border:none;border-radius:10px;
  font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;
  cursor:pointer;transition:all .25s;letter-spacing:.2px;
}
.btn-connect:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--glow)}
.btn-connect:active{transform:translateY(0)}

/* Nav */
.sidebar-nav{padding:8px;flex:1;overflow-y:auto}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:12px;
  color:var(--text2);text-decoration:none;
  font-size:14px;font-weight:600;
  margin-bottom:3px;
  transition:all .2s;position:relative;
}
.nav-item svg{width:18px;height:18px;fill:currentColor;flex-shrink:0;transition:transform .2s}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-item:hover svg{transform:scale(1.1)}
.nav-item.active{
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:var(--accent);
  border:1px solid var(--border);
  box-shadow:inset 0 0 20px rgba(0,0,0,.1);
}
.nav-item.active::before{
  content:'';position:absolute;right:0;top:25%;bottom:25%;
  width:3px;background:var(--accent);border-radius:3px;
  box-shadow:0 0 8px var(--glow);
}
.badge{
  margin-right:auto;
  background:var(--accent);color:white;
  font-size:10px;padding:2px 7px;border-radius:20px;font-weight:700;
  animation:badgePop .3s ease;
}
@keyframes badgePop{0%{transform:scale(0)}100%{transform:scale(1)}}
.sidebar-footer{padding:12px 16px;border-top:1px solid var(--border2)}
.version-badge{font-size:11px;color:var(--text3);text-align:center;margin-top:8px}

/* Theme Switcher */
.theme-switcher{margin-bottom:10px}
.theme-label{font-size:11px;color:var(--text3);font-weight:600;margin-bottom:8px;text-align:center}
.theme-options{display:flex;gap:7px;justify-content:center}
.theme-btn{
  width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(255,255,255,0.08);
  cursor:pointer;padding:0;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
  position:relative;flex-shrink:0;
}
.theme-btn::after{
  content:'';position:absolute;inset:-4px;
  border-radius:50%;border:2px solid transparent;
  transition:border-color .2s;
}
.theme-btn:hover{transform:scale(1.18);border-color:rgba(255,255,255,0.2)}
.theme-btn.active{
  transform:scale(1.15);
  border-color:rgba(255,255,255,0.5);
  box-shadow:0 0 12px rgba(255,255,255,0.2), 0 0 4px rgba(255,255,255,0.15);
}

/* Conv action buttons (archive/delete) */
.conv-actions{display:flex;gap:4px;margin-right:auto;opacity:0;transition:opacity .15s}
.conv-preview-item:hover .conv-actions{opacity:1}
.conv-action-btn{
  padding:4px 8px;border-radius:8px;border:none;cursor:pointer;font-size:11px;
  font-family:'Cairo',sans-serif;font-weight:600;transition:all .15s;
}
.conv-action-btn.archive{background:rgba(255,167,38,.1);color:var(--orange)}
.conv-action-btn.archive:hover{background:rgba(255,167,38,.2)}
.conv-action-btn.delete{background:rgba(239,68,68,.1);color:#ef5350}
.conv-action-btn.delete:hover{background:rgba(239,68,68,.2)}
.conv-action-btn.unarchive{background:rgba(0,212,170,.1);color:var(--green)}
.conv-action-btn.unarchive:hover{background:rgba(0,212,170,.2)}

/* archived conv style */
.conv-preview-item.archived-item .conv-name{color:var(--text3)}
.conv-preview-item.archived-item .conv-avatar{opacity:.5}
.archived-badge{background:rgba(255,167,38,.1);color:var(--orange);padding:2px 6px;border-radius:10px;font-size:9px;font-weight:700;margin-top:2px;display:block}

/* ── MAIN ── */
.main-content{
  flex:1;margin-right:var(--sidebar-w);
  display:flex;flex-direction:column;
  height:100vh;overflow:hidden;
  background:var(--bg);
}

/* Topbar */
.topbar{
  height:58px;
  background:var(--topbar-bg);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border2);
  display:flex;align-items:center;
  padding:0 24px;gap:14px;flex-shrink:0;
  position:sticky;top:0;z-index:50;
}
.menu-btn{background:none;border:none;color:var(--text2);cursor:pointer;padding:7px;border-radius:10px;transition:all .2s}
.menu-btn:hover{background:var(--surface2);color:var(--text)}
.menu-btn svg{width:20px;height:20px;fill:currentColor;display:block}
.topbar-title{font-size:16px;font-weight:800;flex:1;letter-spacing:-.3px}
.notification-bell{
  position:relative;cursor:pointer;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;transition:all .2s;
}
.notification-bell:hover{background:var(--surface2)}
.notification-bell svg{width:18px;height:18px;fill:var(--text2)}
.notif-count{
  position:absolute;top:4px;left:4px;
  background:var(--accent2);color:white;
  font-size:9px;font-weight:700;
  width:15px;height:15px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* Pages */
.page{display:none;flex:1;overflow-y:auto;padding:28px}
.page.active{display:block;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.page-header{margin-bottom:28px}
.page-header h1{font-size:26px;font-weight:900;letter-spacing:-.5px;margin-bottom:4px}
.page-subtitle{color:var(--text2);font-size:13px}
.page-actions{display:flex;gap:10px;margin-top:10px}

/* Stats Grid */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{
  background:var(--surface);
  border-radius:18px;padding:20px 22px;
  border:1px solid var(--border2);
  display:flex;align-items:center;gap:16px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  cursor:default;position:relative;overflow:hidden;
}
.stat-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.025),transparent 60%);
  pointer-events:none;
}
.stat-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4);border-color:var(--border)}
.stat-card[onclick]{cursor:pointer}
.stat-icon-wrap{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
}
.stat-icon-wrap.green{background:var(--green-glow);box-shadow:0 0 20px var(--green-glow);color:var(--green)}
.stat-icon-wrap.blue{background:var(--glow);box-shadow:0 0 20px var(--glow);color:var(--blue)}
.stat-icon-wrap.orange{background:var(--glow);box-shadow:0 0 20px var(--glow);color:var(--orange)}
.stat-icon-wrap.purple{background:var(--glow);box-shadow:0 0 20px var(--glow);color:var(--accent)}
.stat-icon{font-size:28px;filter:drop-shadow(0 0 8px rgba(255,255,255,.1))}
.stat-value{display:block;font-size:30px;font-weight:900;line-height:1;letter-spacing:-1px}
.stat-label{font-size:11px;color:var(--text2);margin-top:5px;font-weight:500}
.stat-trend{font-size:12px;margin-right:auto;color:var(--green);font-weight:700}
.stat-arrow{margin-right:auto;color:var(--text3);font-size:18px;transition:transform .2s}
.stat-card:hover .stat-arrow{transform:translateX(-4px);color:var(--accent)}
.stat-card.primary{border-color:var(--border)}
.stat-card.success{border-color:var(--border)}
.stat-card.warning{border-color:var(--border)}

/* Welcome Banner */
.welcome-banner{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:28px;padding:22px 28px;
  background:linear-gradient(135deg,var(--mesh1),var(--mesh2));
  border:1px solid var(--border);
  border-radius:20px;
  position:relative;overflow:hidden;
}
.welcome-banner::before{
  content:'';position:absolute;top:-50%;right:-10%;
  width:300px;height:300px;
  background:radial-gradient(circle,var(--glow),transparent 70%);
  pointer-events:none;
}
.welcome-text h1{font-size:22px;font-weight:900;margin-bottom:4px;letter-spacing:-.5px}
.welcome-text p{font-size:13px;color:var(--text2)}
.welcome-badge{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border2);
  padding:8px 16px;border-radius:20px;
  font-size:13px;font-weight:600;
}
.w-dot{width:8px;height:8px;border-radius:50%;background:var(--text3);display:inline-block}
.w-dot.on{background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s infinite}
.w-dot.off{background:var(--accent2)}



/* Section Card */
.section-card{
  background:var(--surface);
  border-radius:18px;border:1px solid var(--border2);
  overflow:hidden;margin-bottom:16px;
}
.section-header{
  padding:18px 22px;border-bottom:1px solid var(--border2);
  display:flex;align-items:center;justify-content:space-between;
}
.section-header h2{font-size:15px;font-weight:700}
.view-all{font-size:13px;color:var(--accent);text-decoration:none;font-weight:600;transition:opacity .2s}
.view-all:hover{opacity:.7}

/* Recent Conversations */
.conv-preview-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 22px;border-bottom:1px solid var(--border2);
  cursor:pointer;transition:all .15s;
}
.conv-preview-item:hover{background:rgba(255,255,255,.03)}
.conv-preview-item.active{
  background:var(--surface2);
  border-right: 4px solid var(--accent);
}
.conv-preview-item:last-child{border-bottom:none}
.conv-avatar{
  width:42px;height:42px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;color:white;flex-shrink:0;
}
.conv-info{flex:1;min-width:0}
.conv-name{font-size:14px;font-weight:700}
.conv-last-msg{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.conv-meta{text-align:left;font-size:11px;color:var(--text2);flex-shrink:0}
.human-badge{background:rgba(255,167,38,.12);color:var(--orange);padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;margin-top:4px;display:block}

/* ═══════════════════════════════════════════════════
   WhatsApp Business UI — واجهة واتساب بيزنس الكاملة
   ═══════════════════════════════════════════════════ */

/* Layout */
.conversations-layout{
  display:flex;gap:0;height:calc(100vh - 130px);
  border-radius:16px;overflow:hidden;
  border:1px solid var(--border2);
  box-shadow:0 8px 32px rgba(0,0,0,.25);
}

/* ── Sidebar / Contact List ───────────────────────── */
.conv-list-panel{
  width:360px;background:var(--surface);
  border-right:1px solid var(--border2);
  display:flex;flex-direction:column;flex-shrink:0;
}
.conv-list-header{
  padding:14px 16px 10px;
  border-bottom:1px solid var(--border2);
  background:var(--surface2);
}
.conv-list-header-top{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}
.conv-list-title{font-size:18px;font-weight:800;color:var(--text)}
.conv-list-actions{display:flex;gap:6px}
.conv-list-icon-btn{
  width:32px;height:32px;border-radius:50%;background:transparent;
  border:none;color:var(--text2);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.conv-list-icon-btn:hover{background:var(--surface3)}

.conv-search-wrap{
  position:relative;
}
.conv-search-wrap input{
  width:100%;background:var(--surface3);border:none;border-radius:8px;
  padding:8px 36px 8px 12px;color:var(--text);font-family:'Cairo',sans-serif;
  font-size:13px;outline:none;
}
.conv-search-wrap input::placeholder{color:var(--text3)}
.conv-search-icon{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:var(--text3);font-size:14px;pointer-events:none;
}

.conv-list{flex:1;overflow-y:auto}
.conv-list::-webkit-scrollbar{width:4px}
.conv-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* ── Contact Item ─────────────────────────────────── */
.conv-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--border2);
  transition:background .12s;position:relative;
}
.conv-item:hover{background:var(--surface2)}
.conv-item.active{background:var(--surface3)}

.conv-avatar{
  width:48px;height:48px;border-radius:50%;
  background:var(--surface3);display:flex;align-items:center;
  justify-content:center;font-size:18px;font-weight:700;
  color:#fff;flex-shrink:0;overflow:hidden;
  border:2px solid transparent;
}
.conv-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.conv-avatar.group{font-size:20px}

.conv-info{flex:1;min-width:0}
.conv-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.conv-name{
  font-size:14px;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;
}
.conv-time{font-size:11px;color:var(--text3);flex-shrink:0}
.conv-body-row{display:flex;justify-content:space-between;align-items:center}
.conv-msg{
  font-size:12px;color:var(--text2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;
}
.conv-unread{
  background:#25d366;color:#fff;border-radius:50%;
  width:18px;height:18px;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* Status Badge */
.conv-status-badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;border-radius:10px;font-size:10px;font-weight:700;flex-shrink:0;
}
.conv-status-badge.ai{background:rgba(37,211,102,.12);color:#25d366}
.conv-status-badge.human{background:rgba(255,167,38,.12);color:var(--orange)}

/* ── Chat Panel ───────────────────────────────────── */
.chat-panel{
  flex:1;background:var(--surface);
  display:flex;flex-direction:column;overflow:hidden;
}

/* WhatsApp chat background pattern */
.chat-messages{
  flex:1;overflow-y:auto;padding:12px 16px;
  display:flex;flex-direction:column;gap:2px;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(37,211,102,.03) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(124,92,252,.03) 0%, transparent 50%);
}
.chat-messages::-webkit-scrollbar{width:4px}
.chat-messages::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* ── Chat Header ──────────────────────────────────── */
.chat-header{
  padding:10px 16px;border-bottom:1px solid var(--border2);
  display:flex;align-items:center;gap:12px;
  background:var(--surface2);flex-shrink:0;
}
.chat-header .conv-avatar{width:40px;height:40px;font-size:15px}
.chat-header-info{flex:1;min-width:0}
.chat-header-name{font-size:15px;font-weight:700;color:var(--text)}
.chat-header-status{font-size:11px;color:#25d366;font-weight:600}
.chat-header-actions{display:flex;gap:6px;align-items:center}

.takeover-btn{
  padding:6px 14px;border-radius:20px;border:none;
  font-family:'Cairo',sans-serif;font-size:11px;font-weight:700;
  cursor:pointer;transition:all .2s;
}
.takeover-btn.ai{background:rgba(37,211,102,.12);color:#25d366;border:1px solid rgba(37,211,102,.25)}
.takeover-btn.human{background:rgba(255,167,38,.12);color:var(--orange);border:1px solid rgba(255,167,38,.25)}
.takeover-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}

.chat-header-icon-btn{
  width:34px;height:34px;border-radius:50%;background:transparent;
  border:none;color:var(--text2);cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.chat-header-icon-btn:hover{background:var(--surface3)}

/* ── Chat Empty State ─────────────────────────────── */
.chat-empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;height:100%;color:var(--text3);gap:14px;
  background-image:radial-gradient(circle at 50% 40%, rgba(37,211,102,.04) 0%, transparent 60%);
}
.chat-empty-icon{font-size:72px;opacity:.4;filter:grayscale(.3)}
.chat-empty h3{font-size:20px;font-weight:700;color:var(--text2);margin:0}
.chat-empty p{font-size:13px;color:var(--text3);margin:0;text-align:center;max-width:240px}

/* ── Message Bubbles ──────────────────────────────── */
.msg-wrapper{
  display:flex;flex-direction:column;margin-bottom:2px;
  max-width:72%;
}
.msg-wrapper.incoming{align-self:flex-start;align-items:flex-start}
.msg-wrapper.outgoing-ai,.msg-wrapper.outgoing-human{align-self:flex-end;align-items:flex-end}

/* Date divider */
.msg-date-divider{
  align-self:center;background:var(--surface3);
  border-radius:8px;padding:3px 12px;font-size:11px;
  color:var(--text2);margin:8px 0;font-weight:600;
}

.msg-sender{
  font-size:11px;font-weight:700;margin-bottom:2px;padding:0 8px;
}
.msg-wrapper.incoming .msg-sender{color:#25d366}
.msg-wrapper.outgoing-ai .msg-sender{color:var(--accent);text-align:left}
.msg-wrapper.outgoing-human .msg-sender{color:var(--orange);text-align:left}

.msg-bubble{
  padding:8px 12px 6px;border-radius:8px;font-size:13.5px;
  line-height:1.55;word-break:break-word;position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,.25);max-width:100%;
}

/* Incoming bubble — light grey like WhatsApp */
.msg-wrapper.incoming .msg-bubble{
  background:var(--surface2);color:var(--text);
  border-top-right-radius:8px;border-top-left-radius:0;
  border:1px solid var(--border2);
}
/* Outgoing AI bubble — WhatsApp green */
.msg-wrapper.outgoing-ai .msg-bubble{
  background:linear-gradient(135deg,#1a8a4a,#25d366);
  color:#fff;border-top-right-radius:0;border-top-left-radius:8px;
}
/* Outgoing human bubble — blue-toned */
.msg-wrapper.outgoing-human .msg-bubble{
  background:linear-gradient(135deg,#5c3cbc,var(--accent));
  color:#fff;border-top-right-radius:0;border-top-left-radius:8px;
}

/* Bubble tail */
.msg-wrapper.incoming .msg-bubble::before{
  content:'';position:absolute;right:100%;top:0;
  border:6px solid transparent;
  border-right-color:var(--surface2);border-top-color:var(--surface2);
}
.msg-wrapper.outgoing-ai .msg-bubble::before,
.msg-wrapper.outgoing-human .msg-bubble::before{
  content:'';position:absolute;left:100%;top:0;
  border:6px solid transparent;
  border-left-color:#25d366;border-top-color:#25d366;
}
.msg-wrapper.outgoing-human .msg-bubble::before{
  border-left-color:var(--accent);border-top-color:var(--accent);
}

.msg-meta{
  display:flex;align-items:center;gap:4px;margin-top:3px;padding:0 4px;
  justify-content:flex-end;
}
.msg-time{font-size:10.5px;color:var(--text3)}
.msg-wrapper.outgoing-ai .msg-time,
.msg-wrapper.outgoing-human .msg-time{color:rgba(255,255,255,.65)}

.msg-ticks{font-size:13px;line-height:1}
.msg-ticks.sent{color:var(--text3)}
.msg-ticks.delivered{color:var(--text3)}
.msg-ticks.read{color:#34b7f1}

/* ── Chat Input Area ──────────────────────────────── */
.chat-input-area{
  padding:10px 14px;border-top:1px solid var(--border2);
  display:flex;gap:8px;align-items:flex-end;
  background:var(--surface2);flex-shrink:0;
}
.chat-input-wrap{
  flex:1;background:var(--surface);border:1px solid var(--border2);
  border-radius:24px;padding:0 14px;display:flex;align-items:center;
  transition:border .2s;
}
.chat-input-wrap:focus-within{border-color:rgba(37,211,102,.4)}
.chat-input{
  flex:1;background:transparent;border:none;
  color:var(--text);font-family:'Cairo',sans-serif;font-size:13.5px;
  resize:none;outline:none;padding:10px 0;max-height:120px;
  line-height:1.5;
}
.chat-input::placeholder{color:var(--text3)}
.chat-attach-btn{
  background:none;border:none;color:var(--text2);cursor:pointer;
  font-size:18px;padding:4px;display:flex;align-items:center;
  transition:color .15s;
}
.chat-attach-btn:hover{color:var(--accent)}

.send-btn{
  width:46px;height:46px;border-radius:50%;border:none;flex-shrink:0;
  background:linear-gradient(135deg,#1a8a4a,#25d366);
  color:white;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;box-shadow:0 2px 8px rgba(37,211,102,.35);
}
.send-btn:hover{transform:scale(1.08);box-shadow:0 4px 16px rgba(37,211,102,.5)}

/* Reply preview bar */
.reply-preview-bar{
  padding:8px 16px;background:var(--surface3);
  border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);
  display:flex;align-items:center;gap:10px;
}
.reply-preview-content{flex:1;border-left:3px solid #25d366;padding-left:8px}
.reply-preview-label{font-size:11px;color:#25d366;font-weight:700;margin-bottom:2px}
.reply-preview-text{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
.reply-cancel-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:18px;padding:2px}

/* WhatsApp-style tab buttons */
.wa-tab-bar{
  display:flex;border-bottom:1px solid var(--border2);
  background:var(--surface2);
}
.wa-tab-btn{
  flex:1;padding:12px;text-align:center;font-size:12px;font-weight:700;
  color:var(--text2);cursor:pointer;border:none;background:transparent;
  border-bottom:2px solid transparent;font-family:'Cairo',sans-serif;
  transition:all .2s;
}
.wa-tab-btn.active{color:#25d366;border-bottom-color:#25d366}
.wa-tab-btn:hover{background:var(--surface3)}

@media(max-width:768px){
  .conv-list-panel{width:100%;height:220px}
  .conversations-layout{flex-direction:column;height:auto}
}

/* Search */
.search-input{
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:12px;padding:9px 16px;
  color:var(--text);font-family:'Cairo',sans-serif;
  font-size:13px;outline:none;width:260px;transition:border .2s;
}
.search-input:focus{border-color:var(--accent)}

/* Empty State */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:56px 24px;
  color:var(--text3);gap:12px;
}
.empty-icon{font-size:44px;opacity:.5}
.empty-state p{font-size:15px;font-weight:700;color:var(--text2)}
.empty-state span{font-size:12px;text-align:center;color:var(--text3)}

/* QR Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;backdrop-filter:blur(8px);
}
.modal{
  background:var(--surface);border-radius:24px;
  border:1px solid var(--border);width:420px;
  box-shadow:0 32px 100px rgba(0,0,0,.7);
  animation:modalIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.modal-header{
  padding:22px 24px;border-bottom:1px solid var(--border2);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-header h2{font-size:18px;font-weight:800}
.modal-close{
  background:none;border:none;color:var(--text2);cursor:pointer;
  font-size:18px;padding:5px 9px;border-radius:8px;transition:all .2s;
}
.modal-close:hover{background:var(--surface2);color:var(--text)}
.modal-body{padding:24px}
.qr-container{
  background:white;border-radius:16px;padding:20px;
  display:flex;align-items:center;justify-content:center;
  min-height:240px;margin-bottom:20px;
  box-shadow:0 0 0 8px var(--border);
}
.qr-container img{width:200px;height:200px}
.qr-loading{display:flex;flex-direction:column;align-items:center;gap:12px;color:#333}
.qr-instructions h3{font-size:14px;font-weight:700;margin-bottom:10px;color:var(--text2)}
.qr-instructions ol{padding-right:18px}
.qr-instructions li{font-size:13px;color:var(--text2);margin-bottom:6px;line-height:1.6}

/* Spinner */
.spinner{
  width:36px;height:36px;
  border:3px solid rgba(108,99,255,.15);
  border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Settings */
.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.settings-card{
  background:var(--surface);border-radius:18px;
  padding:22px;border:1px solid var(--border2);
}
.settings-card h3{font-size:15px;font-weight:700;margin-bottom:16px}
.setting-item{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.setting-status{padding:6px 14px;background:rgba(239,68,68,.08);color:#ef5350;border-radius:10px;font-size:13px;font-weight:700;border:1px solid rgba(239,68,68,.15)}
.setting-status.connected{background:rgba(0,212,170,.08);color:var(--green);border-color:rgba(0,212,170,.2)}
.setting-note{font-size:12px;color:var(--text3);margin-top:8px;width:100%;line-height:1.6}
.model-badge{padding:6px 14px;background:rgba(79,195,247,.08);color:var(--blue);border-radius:10px;font-size:13px;font-weight:700;border:1px solid rgba(79,195,247,.15)}
.tech-stack{display:flex;flex-direction:column;gap:14px}
.tech-item{display:flex;align-items:flex-start;gap:12px}
.tech-icon{font-size:22px}
.tech-item strong{display:block;font-size:13px;font-weight:700}
.tech-item span{font-size:11px;color:var(--text2);margin-top:2px}

/* Stats Dashboard */
.stats-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* Stats KPI Cards */
.stats-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.stats-kpi-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124,92,252,.04), transparent);
  pointer-events: none;
}
.stats-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  border-color: var(--accent);
}
.stats-kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.stats-kpi-num {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--text1);
}
.stats-kpi-lbl {
  font-size: 12px;
  color: var(--text2);
  margin-top: 4px;
  font-weight: 600;
}
.stats-kpi-sub {
  font-size: 11px;
  color: var(--text3);
  margin-top: 3px;
}

/* Stats Chart Cards */
.stats-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 0;
}
.stats-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.stats-chart-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text1);
}
.stats-chart-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(124,92,252,.12);
  color: var(--accent);
  font-weight: 600;
}
.stats-charts-grid {
  grid-template-columns: 1fr 1fr;
}

/* Stats Table */
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.stats-table th {
  padding: 10px 14px;
  text-align: right;
  font-weight: 700;
  font-size: 12px;
  color: var(--text2);
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.stats-table td {
  padding: 10px 14px;
  text-align: right;
  border-bottom: 1px solid var(--border2);
  color: var(--text1);
}
.stats-table tr:last-child td { border: none; }
.stats-table tr:hover td { background: rgba(124,92,252,.04); }

/* CRM Status Bars */
.stats-crm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.stats-crm-label {
  min-width: 90px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
}
.stats-crm-bar-wrap {
  flex: 1;
  height: 10px;
  background: var(--surface2);
  border-radius: 20px;
  overflow: hidden;
}
.stats-crm-bar {
  height: 100%;
  border-radius: 20px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}
.stats-crm-count {
  font-size: 13px;
  font-weight: 800;
  color: var(--text1);
  min-width: 32px;
  text-align: left;
}

/* Old day cards kept for compat */
.stats-day-card{
  background:var(--surface);border-radius:18px;
  padding:18px;border:1px solid var(--border2);
}
.stats-day-card .date{font-size:12px;color:var(--text2);margin-bottom:14px;font-weight:700}
.stats-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--border2);font-size:13px;
}
.stats-row:last-child{border:none}
.stats-row .val{font-weight:800;color:var(--accent)}

/* Buttons */
.btn{
  padding:8px 18px;border-radius:10px;border:none;
  font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;
  cursor:pointer;transition:all .2s;color:var(--text2);
  background:var(--surface2);border:1px solid var(--border2);
}
.btn:hover{background:var(--surface3);color:var(--text);border-color:var(--border)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;border:none}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--glow);opacity:.9}
.btn-success{background:linear-gradient(135deg,var(--green),var(--green));color:white;border:none}
.btn-success:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--green-glow)}
.btn-danger{background:rgba(239,68,68,.08);color:#ef5350;border:1px solid rgba(239,68,68,.2)}
.btn-danger:hover{background:rgba(239,68,68,.15)}

/* Toast */
.toast-container{position:fixed;bottom:24px;left:24px;display:flex;flex-direction:column;gap:8px;z-index:9999}
.toast{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:14px;padding:13px 20px;
  font-size:13px;font-weight:600;
  box-shadow:var(--shadow);
  animation:toastIn .35s cubic-bezier(.34,1.56,.64,1);
  max-width:300px;
}
.toast.success{border-color:rgba(0,212,170,.3);color:var(--green)}
.toast.error{border-color:rgba(239,68,68,.3);color:#ef5350}
.toast.info{border-color:rgba(108,99,255,.3);color:var(--accent)}
@keyframes toastIn{from{transform:translateX(-30px) scale(.9);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}

/* Scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--border)}

/* Loading */
.loading-state{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:64px;gap:16px;
  color:var(--text2);grid-column:1/-1;
}

/* Surface var fallback for upsell inline styles */
--surface-2:var(--surface2);

/* ═══════════════════════════════════════════════════════════════
   🚀  SMART CAMPAIGNS — Premium UI v2
   ═══════════════════════════════════════════════════════════════ */

/* ── Header ── */
.camp-header{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:20px;
  margin-bottom:24px;
}
.camp-header-left{display:flex;align-items:center}
.camp-title-wrap{display:flex;align-items:center;gap:16px}
.camp-title-icon{font-size:38px;filter:drop-shadow(0 0 14px rgba(124,92,252,.5));line-height:1}
.camp-title{font-size:24px;font-weight:900;letter-spacing:-.5px;line-height:1.1}
.camp-subtitle{font-size:12px;color:var(--text2);margin-top:4px}

/* ── KPI Cards ── */
.camp-kpis{display:flex;gap:12px;flex-wrap:wrap}
.camp-kpi-card{
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:14px;padding:12px 18px;
  display:flex;flex-direction:column;align-items:center;
  min-width:96px;transition:all .25s;
  position:relative;overflow:hidden;
}
.camp-kpi-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.03),transparent);
  pointer-events:none;
}
.camp-kpi-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.camp-kpi-card.accent{border-color:var(--border);background:linear-gradient(135deg,rgba(124,92,252,.12),var(--surface))}
.camp-kpi-card.green{border-color:rgba(52,211,153,.2);background:linear-gradient(135deg,rgba(52,211,153,.08),var(--surface))}
.camp-kpi-card.orange{border-color:rgba(251,146,60,.2);background:linear-gradient(135deg,rgba(251,146,60,.08),var(--surface))}
.kpi-num{font-size:26px;font-weight:900;letter-spacing:-1px;line-height:1}
.camp-kpi-card.accent .kpi-num{color:var(--accent)}
.camp-kpi-card.green .kpi-num{color:var(--green)}
.camp-kpi-card.orange .kpi-num{color:var(--orange)}
.kpi-lbl{font-size:10px;color:var(--text2);margin-top:3px;font-weight:600;white-space:nowrap}

/* ── Control Panel ── */
.camp-control-panel{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:20px;padding:20px 24px 18px;
  margin-bottom:18px;
}
.camp-settings-row{
  display:flex;align-items:stretch;gap:14px;
  flex-wrap:wrap;margin-bottom:16px;
}

/* Setting Cards */
.camp-setting-card{
  display:flex;align-items:center;gap:12px;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:14px;padding:14px 16px;
  flex:1;min-width:180px;transition:border .2s;
}
.camp-setting-card:hover{border-color:var(--border)}
.csc-icon{font-size:22px;flex-shrink:0}
.csc-body{flex:1;min-width:0}
.csc-label{display:block;font-size:11px;color:var(--text2);font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.csc-range-wrap{display:flex;align-items:center;gap:8px}
.camp-range{
  flex:1;height:4px;
  -webkit-appearance:none;appearance:none;
  background:var(--surface3);border-radius:10px;outline:none;cursor:pointer;
}
.camp-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;
  background:var(--accent);border-radius:50%;cursor:pointer;
  box-shadow:0 0 8px var(--glow);transition:transform .2s;
}
.camp-range::-webkit-slider-thumb:hover{transform:scale(1.2)}
.camp-range-badge{
  background:var(--accent);color:white;
  font-size:12px;font-weight:800;
  padding:3px 9px;border-radius:20px;
  min-width:36px;text-align:center;flex-shrink:0;
}
.camp-range-unit{font-size:11px;color:var(--text2);flex-shrink:0}

/* AI Model Pills */
.ai-model-pills{display:flex;gap:8px}
.ai-pill{cursor:pointer}
.ai-pill input{display:none}
.ai-pill span{
  display:block;padding:6px 14px;
  background:var(--surface3);border:1px solid var(--border2);
  border-radius:20px;font-size:12px;font-weight:700;
  transition:all .2s;white-space:nowrap;
}
.ai-pill input:checked + span{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;border-color:transparent;
  box-shadow:0 4px 14px var(--glow);
}
.ai-pill:hover span{border-color:var(--border)}

/* File Drop Zone */
.camp-file-drop{
  display:flex;align-items:center;justify-content:center;
  background:var(--surface3);border:1px dashed var(--border);
  border-radius:10px;padding:8px 14px;cursor:pointer;
  font-size:12px;color:var(--text2);font-weight:600;
  transition:all .2s;gap:6px;
}
.camp-file-drop:hover{border-color:var(--accent);color:var(--accent);background:rgba(124,92,252,.05)}
.camp-file-drop input{display:none}

/* Launch Button */
.camp-launch-btn{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;border:none;border-radius:14px;
  padding:0 24px;font-family:'Cairo',sans-serif;
  font-size:15px;font-weight:800;cursor:pointer;
  transition:all .25s;flex-shrink:0;
  box-shadow:0 6px 24px var(--glow);letter-spacing:.2px;
  min-height:60px;
}
.camp-launch-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--glow)}
.camp-launch-btn:active{transform:translateY(0)}
.camp-launch-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* Bulk Message */
.camp-bulk-msg-wrap{
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:14px;padding:14px 16px;
  border-top:2px solid var(--accent);
}
.camp-bulk-header{
  display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;margin-bottom:10px;
}
.camp-bulk-title{font-size:13px;font-weight:800;color:var(--text)}
.camp-bulk-hint{font-size:11px;color:var(--text2);flex:1}
.camp-bulk-hint code{
  background:rgba(124,92,252,.12);color:var(--accent);
  padding:1px 6px;border-radius:6px;font-size:11px;
}
.camp-bulk-actions{display:flex;gap:8px;flex-wrap:wrap}
.cbulk-btn{
  padding:5px 12px;border-radius:8px;border:1px solid var(--border2);
  background:var(--surface3);color:var(--text2);
  font-family:'Cairo',sans-serif;font-size:11px;font-weight:700;
  cursor:pointer;transition:all .2s;
}
.cbulk-btn:hover{border-color:var(--border);color:var(--text);background:var(--surface)}
.cbulk-btn.accent{
  background:rgba(124,92,252,.1);color:var(--accent);
  border-color:rgba(124,92,252,.3);
}
.cbulk-btn.accent:hover{background:rgba(124,92,252,.2)}
.camp-bulk-textarea{
  width:100%;background:var(--surface);
  border:1px solid var(--border2);border-radius:10px;
  padding:12px 14px;color:var(--text);
  font-family:'Cairo',sans-serif;font-size:13px;
  resize:vertical;outline:none;min-height:76px;
  transition:border .2s;line-height:1.7;
}
.camp-bulk-textarea:focus{border-color:var(--accent)}

/* ── Filters Bar ── */
.camp-filters-bar{
  display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;margin-bottom:18px;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:14px;padding:12px 16px;
}
.camp-search-wrap{
  display:flex;align-items:center;gap:8px;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:10px;padding:8px 14px;flex:1;min-width:200px;
  transition:border .2s;
}
.camp-search-wrap:focus-within{border-color:var(--accent)}
.camp-search-icon{font-size:14px;opacity:.6;flex-shrink:0}
.camp-search-input{
  background:none;border:none;outline:none;
  color:var(--text);font-family:'Cairo',sans-serif;
  font-size:13px;flex:1;
}
.camp-search-input::placeholder{color:var(--text2)}

.camp-filter-pills{display:flex;gap:6px}
.cfp{
  padding:6px 14px;border-radius:20px;
  border:1px solid var(--border2);
  background:var(--surface2);color:var(--text2);
  font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.cfp:hover{border-color:var(--border);color:var(--text)}
.cfp.active{
  background:linear-gradient(135deg,rgba(124,92,252,.15),rgba(124,92,252,.08));
  color:var(--accent);border-color:rgba(124,92,252,.3);
}
.camp-sort-select{
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:10px;padding:7px 12px;
  color:var(--text);font-family:'Cairo',sans-serif;
  font-size:12px;font-weight:600;outline:none;cursor:pointer;
  transition:border .2s;
}
.camp-sort-select:focus{border-color:var(--accent)}
.camp-select-all-wrap{margin-right:auto}
.camp-chk-all-label{
  display:flex;align-items:center;gap:8px;
  cursor:pointer;font-size:12px;font-weight:700;color:var(--text2);
  transition:color .2s;
}
.camp-chk-all-label:hover{color:var(--text)}
.camp-chk-all-label input{
  width:16px;height:16px;cursor:pointer;
  accent-color:var(--accent);
}

/* ── Progress Panel ── */
.camp-progress-panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:16px 20px;
  margin-bottom:18px;
  border-top:3px solid var(--accent);
  animation:fadeIn .3s ease;
}
.cpp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cpp-status{font-size:14px;font-weight:700;color:var(--text)}
.cpp-counter{font-size:13px;font-weight:700;color:var(--accent)}
.cpp-bar-track{
  width:100%;height:8px;
  background:var(--surface3);border-radius:10px;
  overflow:hidden;margin-bottom:12px;
}
.cpp-bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:10px;
  transition:width .5s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 10px var(--glow);
}
.cpp-log{
  max-height:120px;overflow-y:auto;
  display:flex;flex-direction:column;gap:4px;
}
.cpp-log-entry{
  font-size:11px;padding:4px 8px;border-radius:6px;
  display:flex;align-items:center;gap:6px;
}
.cpp-log-entry.ok{background:rgba(52,211,153,.06);color:var(--green)}
.cpp-log-entry.fail{background:rgba(239,68,68,.06);color:#ef5350}
.cpp-log-entry.wait{background:rgba(255,255,255,.03);color:var(--text2)}

/* ── Leads Section ── */
.camp-leads-section{margin-top:4px}
.camp-leads-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.camp-leads-title{font-size:16px;font-weight:800}
.camp-leads-count{
  font-size:12px;font-weight:700;color:var(--text2);
  background:var(--surface2);border:1px solid var(--border2);
  padding:4px 12px;border-radius:20px;
}

/* ── Leads Grid (Card Layout) ── */
.camp-leads-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:14px;
}

/* Lead Card */
.camp-lead-card{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:16px;padding:16px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;
}
.camp-lead-card::before{
  content:'';position:absolute;top:0;right:0;
  width:80px;height:80px;border-radius:50%;
  background:radial-gradient(var(--glow),transparent 70%);
  transform:translate(30px,-30px);pointer-events:none;opacity:.5;
}
.camp-lead-card:hover{
  border-color:var(--border);
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.camp-lead-card.selected{
  border-color:var(--accent);
  background:linear-gradient(135deg,rgba(124,92,252,.06),var(--surface));
}

/* Card Top Row */
.clc-top{display:flex;align-items:flex-start;gap:12px}
.clc-avatar{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;color:white;flex-shrink:0;
  box-shadow:0 4px 12px var(--glow);
}
.clc-info{flex:1;min-width:0}
.clc-name{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clc-phone{font-size:12px;color:var(--text2);margin-top:2px;font-family:monospace;direction:ltr;text-align:right}
.clc-badges{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.clc-badge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;
}
.clc-badge.new{background:rgba(52,211,153,.1);color:var(--green);border:1px solid rgba(52,211,153,.2)}
.clc-badge.old{background:rgba(251,146,60,.1);color:var(--orange);border:1px solid rgba(251,146,60,.2)}
.clc-badge.vip{background:linear-gradient(135deg,rgba(250,204,21,.15),rgba(234,179,8,.08));color:#facc15;border:1px solid rgba(250,204,21,.3)}

/* Card Checkbox */
.clc-check-wrap{flex-shrink:0}
.camp-card-check{
  width:20px;height:20px;cursor:pointer;
  accent-color:var(--accent);border-radius:6px;
}

/* AI Draft Area */
.clc-draft-area{display:flex;flex-direction:column;gap:6px}
.clc-draft-box{
  width:100%;background:var(--surface2);
  border:1px solid var(--border2);border-radius:10px;
  padding:10px 12px;color:var(--text);
  font-family:'Cairo',sans-serif;font-size:12px;
  resize:vertical;outline:none;min-height:120px;
  transition:border .2s;line-height:1.6;
}
.clc-draft-box:focus{border-color:var(--accent)}

/* Card Action Buttons */
.clc-actions{display:flex;gap:8px}
.clc-btn-ai{
  display:flex;align-items:center;gap:6px;flex:1;justify-content:center;
  background:rgba(124,92,252,.1);color:var(--accent);
  border:1px solid rgba(124,92,252,.25);border-radius:10px;
  padding:8px 12px;font-family:'Cairo',sans-serif;
  font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;
}
.clc-btn-ai:hover{background:rgba(124,92,252,.2);transform:translateY(-1px)}
.clc-btn-send{
  display:flex;align-items:center;gap:6px;flex:1;justify-content:center;
  background:linear-gradient(135deg,var(--green),#059669);
  color:white;border:none;border-radius:10px;
  padding:8px 12px;font-family:'Cairo',sans-serif;
  font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;
  box-shadow:0 4px 12px rgba(52,211,153,.25);
}
.clc-btn-send:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(52,211,153,.4)}
.clc-btn-send:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* Status indicator on card */
.clc-sent-badge{
  position:absolute;top:12px;left:44px;
  background:rgba(52,211,153,.1);color:var(--green);
  border:1px solid rgba(52,211,153,.3);
  font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;
}
.clc-failed-badge{
  position:absolute;top:12px;left:44px;
  background:rgba(239,68,68,.1);color:#ef5350;
  border:1px solid rgba(239,68,68,.3);
  font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;
}

/* Loading state for grid */
.camp-loading{
  grid-column:1/-1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:64px;gap:16px;color:var(--text2);
}
.camp-loading-spinner{
  width:40px;height:40px;
  border:3px solid rgba(124,92,252,.15);
  border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;
}

/* Empty state for grid */
.camp-empty{
  grid-column:1/-1;display:flex;flex-direction:column;
  align-items:center;gap:12px;padding:56px;
  color:var(--text3);
}
.camp-empty-icon{font-size:48px;opacity:.5}
.camp-empty p{font-size:15px;font-weight:700;color:var(--text2)}
.camp-empty span{font-size:12px;color:var(--text3)}

/* ── Add Customer Button ── */
.camp-add-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--green),#059669);
  color:white;border:none;border-radius:10px;
  padding:7px 14px;font-family:'Cairo',sans-serif;
  font-size:12px;font-weight:700;cursor:pointer;
  transition:all .2s;box-shadow:0 4px 12px rgba(52,211,153,.25);
  white-space:nowrap;flex-shrink:0;
}
.camp-add-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(52,211,153,.4)}
.camp-add-btn:active{transform:translateY(0)}

/* ── Pagination ── */
.camp-pagination{
  display:flex;align-items:center;gap:6px;
  justify-content:center;padding:20px 0 4px;
  flex-wrap:wrap;
}
.cpg-btn{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--border2);
  background:var(--surface2);color:var(--text2);
  font-size:13px;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.cpg-btn:hover:not(:disabled){background:var(--surface3);color:var(--text);border-color:var(--border)}
.cpg-btn:disabled{opacity:.35;cursor:not-allowed}
.cpg-pages{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.cpg-page{
  min-width:34px;height:34px;border-radius:10px;
  border:1px solid var(--border2);
  background:var(--surface2);color:var(--text2);
  font-size:13px;font-weight:700;cursor:pointer;
  font-family:'Cairo',sans-serif;transition:all .2s;
  display:flex;align-items:center;justify-content:center;
  padding:0 6px;
}
.cpg-page:hover{border-color:var(--border);color:var(--text);background:var(--surface3)}
.cpg-page.active{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;border-color:transparent;
  box-shadow:0 4px 12px var(--glow);
}
.cpg-info{
  font-size:11px;color:var(--text2);font-weight:600;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:20px;padding:4px 12px;white-space:nowrap;
}

@media(max-width:960px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .conversations-layout{flex-direction:column}
  .conv-list-panel{width:100%;height:220px}
  .settings-grid{grid-template-columns:1fr}
  .stats-detail-grid{grid-template-columns:1fr}
  .sidebar{transform:translateX(100%)}
  .main-content{margin-right:0}
  .camp-kpis{justify-content:flex-start}
  .camp-leads-grid{grid-template-columns:1fr}
  .camp-settings-row{flex-direction:column}
  .camp-launch-btn{width:100%;justify-content:center}
}

/* 🔔 Premium Dropdown Notifications */
.notif-dropdown {
  position: absolute;
  top: 48px;
  left: 0;
  width: 320px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 1000;
  overflow: hidden;
  direction: rtl;
  text-align: right;
  
  /* Smooth Slide & Fade transitions for premium UI/UX */
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}

.notif-dropdown.active {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


.notif-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border2);
  background: var(--surface3);
}

.notif-dropdown-header h3 {
  font-size: 13px;
  font-weight: 800;
  margin: 0;
  color: var(--text);
}

.notif-clear-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.notif-clear-btn:hover {
  background: rgba(124, 92, 252, 0.1);
  color: var(--accent2);
}

.notif-dropdown-body {
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 0;
}

.notif-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border2);
  cursor: pointer;
  transition: background 0.2s;
}

.notif-item:hover {
  background: var(--surface3);
}

.notif-item.unread {
  background: rgba(124, 92, 252, 0.05);
  border-right: 3px solid var(--accent);
}

.notif-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.notif-content {
  flex: 1;
}

.notif-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.notif-text {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.4;
  margin-top: 2px;
}

.notif-time {
  font-size: 9px;
  color: var(--text3);
  margin-top: 4px;
}

.notif-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text3);
  font-size: 12px;
}


/* Shake error animation */
@keyframes shake-x {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
.shake-error {
  animation: shake-x 0.45s ease;
  border-color: #e74c3c !important;
}

/* Stats KPI count animation */
@keyframes kpiCountUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive stats grid */
@media (max-width: 860px) {
  .stats-charts-grid { grid-template-columns: 1fr !important; }
}

/* Sortable table headers */
.stats-th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background .15s;
}
.stats-th-sort:hover {
  background: rgba(124,92,252,.08);
  color: var(--accent);
}
.sort-icon {
  font-size: 11px;
  opacity: 0.4;
  margin-right: 3px;
  display: inline-block;
  transition: all .15s;
}

/* Table row fade-in animation */
@keyframes fadeRowIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Customer Service Hub Tab Bar ─────────────────── */
.cs-tab-bar {
  display: flex;
  gap: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 5px;
  margin-bottom: 20px;
  width: fit-content;
}

.cs-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text3);
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  white-space: nowrap;
}

.cs-tab svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

.cs-tab:hover {
  background: rgba(255,255,255,.04);
  color: var(--text2);
}

.cs-tab.active {
  background: linear-gradient(135deg, rgba(124,92,252,.18), rgba(167,139,250,.10));
  color: var(--accent);
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(124,92,252,.15);
}

.cs-tab-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  min-width: 18px;
  text-align: center;
}

.cs-tab-badge:empty { display: none; }

.cs-panel {
  animation: fadeIn .25s ease;
}

/* ══════════════════════════════════════════════════════
   👥 Users Management Page — um-*
══════════════════════════════════════════════════════ */

/* Header */
.um-header {
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;margin-bottom:28px;
}
.um-title {
  font-size:22px;font-weight:900;margin:0;letter-spacing:-.5px;
  display:flex;align-items:center;gap:10px;color:var(--text);
}
.um-title-icon { font-size:24px; }
.um-subtitle { font-size:13px;color:var(--text3);margin:4px 0 0; }

.um-add-btn {
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:14px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),#a78bfa);
  color:#fff;font-family:Cairo,sans-serif;font-size:14px;font-weight:700;
  box-shadow:0 4px 20px rgba(124,92,252,.35);
  transition:all .2s;
}
.um-add-btn:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(124,92,252,.45); }
.um-add-btn:active { transform:translateY(0); }

/* Stats Grid */
.um-stats-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;margin-bottom:24px;
}
.um-stat-card {
  background:var(--surface);border:1px solid var(--border2);border-radius:16px;
  padding:18px 20px;display:flex;align-items:center;gap:14px;
  transition:transform .2s,box-shadow .2s;
}
.um-stat-card:hover { transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.25); }
.um-stat-icon {
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.um-stat-num { font-size:26px;font-weight:900;line-height:1;color:var(--text); }
.um-stat-label { font-size:12px;color:var(--text3);font-weight:600;margin-top:3px; }

/* Table Card */
.um-table-card {
  background:var(--surface);border:1px solid var(--border2);
  border-radius:18px;overflow:hidden;
}
.um-table-head {
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border2);
  background:var(--surface2);
}
.um-table-title { font-size:14px;font-weight:800;color:var(--text); }
.um-refresh-btn {
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:8px;border:1px solid var(--border2);
  background:transparent;color:var(--accent);font-family:Cairo,sans-serif;
  font-size:12px;font-weight:700;cursor:pointer;transition:all .18s;
}
.um-refresh-btn:hover { background:var(--surface3);border-color:var(--accent); }

.um-table-wrap { overflow-x:auto; }
.um-table { width:100%;border-collapse:collapse; }
.um-table thead tr {
  background:var(--surface2);border-bottom:2px solid var(--border);
}
.um-table th {
  padding:13px 18px;text-align:right;font-size:11px;
  color:var(--text3);font-weight:700;white-space:nowrap;letter-spacing:.5px;
  text-transform:uppercase;
}
.um-table tbody tr {
  border-bottom:1px solid var(--border2);transition:background .15s;
}
.um-table tbody tr:last-child { border-bottom:none; }
.um-table tbody tr:hover { background:var(--surface2); }
.um-table td { padding:14px 18px;font-size:13px;color:var(--text);vertical-align:middle; }

.um-user-cell { display:flex;align-items:center;gap:12px; }
.um-avatar {
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;color:#fff;flex-shrink:0;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.um-user-name { font-size:13px;font-weight:700;color:var(--text);line-height:1.3; }
.um-user-email { font-size:11px;color:var(--text3);margin-top:2px; }

.um-role-badge {
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:20px;
  font-size:11px;font-weight:700;white-space:nowrap;
}
.um-status-badge {
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:20px;
  font-size:11px;font-weight:700;
}
.um-status-active  { background:rgba(37,211,102,.12);color:#25d366; }
.um-status-inactive{ background:rgba(239,68,68,.12);color:#ef4444; }

.um-actions { display:flex;gap:7px;justify-content:center; }
.um-btn-edit {
  padding:6px 14px;border-radius:8px;border:1px solid rgba(124,92,252,.3);
  background:rgba(124,92,252,.1);color:#a78bfa;font-family:Cairo,sans-serif;
  font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;
}
.um-btn-edit:hover { background:rgba(124,92,252,.22);border-color:rgba(124,92,252,.5); }
.um-btn-del {
  padding:6px 14px;border-radius:8px;border:1px solid rgba(239,68,68,.25);
  background:rgba(239,68,68,.08);color:#f87171;font-family:Cairo,sans-serif;
  font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;
}
.um-btn-del:hover { background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.45); }
.um-empty-row { padding:40px;text-align:center;color:var(--text3);font-size:13px; }

/* Audit log table */
.um-audit-table { width:100%;border-collapse:collapse;font-size:13px; }
.um-audit-table thead tr { background:var(--surface2);border-bottom:2px solid var(--border); }
.um-audit-table th { padding:12px 18px;text-align:right;color:var(--text2);font-weight:700;font-size:12px;letter-spacing:.3px; }
.um-audit-table tbody tr { border-bottom:1px solid var(--border2); }
.um-audit-table tbody tr:hover { background:var(--surface2); }
.um-audit-table td { padding:13px 18px;color:var(--text);vertical-align:middle;font-size:13px; }

/* Modal */
.um-modal-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:16px;
  animation:umFadeIn .18s ease;
}
@keyframes umFadeIn { from{opacity:0} to{opacity:1} }
.um-modal {
  background:var(--surface);border:1px solid var(--border);
  border-radius:22px;padding:32px;width:480px;max-width:100%;
  max-height:90vh;overflow-y:auto;
  animation:umSlideUp .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 32px 80px rgba(0,0,0,.6);
}
@keyframes umSlideUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }
.um-modal-header {
  display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;
}
.um-modal-title { font-size:18px;font-weight:900;color:var(--text); }
.um-modal-close {
  width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;
  background:var(--surface2);color:var(--text2);font-size:18px;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;line-height:1;
}
.um-modal-close:hover { background:var(--surface3);color:var(--text); }

.um-alert {
  display:none;padding:11px 14px;border-radius:10px;
  font-size:13px;font-weight:600;margin-bottom:16px;
}
.um-alert.error   { background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2); }
.um-alert.success { background:rgba(37,211,102,.1);color:#4ade80;border:1px solid rgba(37,211,102,.2); }

.um-field { margin-bottom:16px; }
.um-label {
  display:block;font-size:12px;font-weight:700;color:var(--text2);margin-bottom:7px;
}
.um-input {
  width:100%;background:var(--surface2);border:1.5px solid var(--border2);
  border-radius:10px;padding:11px 14px;color:var(--text);
  font-family:Cairo,sans-serif;font-size:14px;outline:none;
  transition:border .2s,box-shadow .2s;
}
.um-input:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,252,.12); }
.um-input[readonly] { opacity:.55;cursor:not-allowed; }

.um-grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.um-grid-2 .um-full { grid-column:1/-1; }

.um-role-options { display:flex;flex-direction:column;gap:7px; }
.um-role-option {
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:10px 14px;border-radius:10px;border:1.5px solid var(--border2);
  transition:all .18s;user-select:none;
}
.um-role-option:hover { border-color:var(--accent);background:rgba(124,92,252,.06); }
.um-role-option input[type=radio] { width:16px;height:16px;cursor:pointer; }
.um-role-option-label { font-size:13px;font-weight:700; }
.um-role-option-desc { font-size:11px;color:var(--text3);margin-top:1px; }

.um-modal-footer { display:flex;gap:10px;margin-top:24px; }
.um-btn-submit {
  flex:1;padding:12px;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),#a78bfa);
  color:#fff;font-family:Cairo,sans-serif;font-size:15px;font-weight:800;
  transition:all .2s;box-shadow:0 4px 16px rgba(124,92,252,.3);
}
.um-btn-submit:hover { transform:translateY(-1px);box-shadow:0 8px 24px rgba(124,92,252,.4); }
.um-btn-submit:disabled { opacity:.6;cursor:not-allowed;transform:none; }
.um-btn-cancel {
  padding:12px 20px;border-radius:12px;cursor:pointer;
  background:var(--surface2);color:var(--text);
  border:1px solid var(--border2);font-family:Cairo,sans-serif;font-size:14px;
  transition:all .15s;
}
.um-btn-cancel:hover { background:var(--surface3); }


/* ══════════════════════════════════════════════════════
   Topbar User Badge — tub-*
══════════════════════════════════════════════════════ */
.topbar-user-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  padding: 4px 6px;
  border-radius: 12px;
  transition: background .15s;
}
.topbar-user-badge:hover { background: var(--surface2); }

.tub-info {
  text-align: right;
  line-height: 1.35;
  white-space: nowrap;
}
.tub-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.tub-role {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .3px;
}

.tub-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  border: 2px solid rgba(255,255,255,.2);
}

/* Dropdown menu */
.tub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  min-width: 200px;
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
  z-index: 9999;
  overflow: hidden;
  animation: tubMenuIn .18s cubic-bezier(.34,1.56,.64,1);
}
.tub-menu.open { display: block; }
@keyframes tubMenuIn {
  from { opacity:0; transform:translateY(-8px) scale(.97); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}
.tub-menu-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border2);
}
.tub-menu-username { font-size: 12px; color: var(--text2); font-family: monospace; }
.tub-menu-role     { font-size: 11px; font-weight: 800; margin-top: 2px; }

.tub-menu-item {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition: background .15s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tub-menu-item:hover { background: var(--surface2); }
.tub-menu-danger { color: #ef4444 !important; border-top: 1px solid var(--border2); }

/* ── Super Admin & Page Permissions UI ─────────────────────────────── */
.um-badge-me {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: #3b82f6;
  color: #fff;
  margin-right: 5px;
  vertical-align: middle;
  letter-spacing: .3px;
}
.um-badge-super {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  margin-right: 5px;
  vertical-align: middle;
  letter-spacing: .3px;
}

/* ── Permissions Grid ──────────────────────────────────────────────── */
#umPermsSection {
  margin-top: 16px;
  padding: 14px;
  background: var(--surface2);
  border-radius: 10px;
  border: 1px solid var(--border2);
}
#umPermsSection h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text1);
  margin: 0 0 10px 0;
}
.um-perms-toggle-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.um-perm-toggle-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: var(--surface3);
  color: var(--text2);
  cursor: pointer;
  transition: background .15s;
}
.um-perm-toggle-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.um-perms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 7px;
}
.um-perm-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--surface1);
  border: 1.5px solid var(--border2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-size: 12px;
  color: var(--text2);
  user-select: none;
}
.um-perm-item input[type="checkbox"] {
  accent-color: var(--primary);
  width: 14px; height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.um-perm-item:hover { border-color: var(--primary); background: var(--surface2); }
.um-perm-item.um-perm-checked {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb, 99,102,241), .12);
  color: var(--text1);
  font-weight: 600;
}
.um-perm-label { flex: 1; }

/* ══════════════════════════════════════════════════════════════════
   i18n — Language Toggle Button + LTR Layout
   ══════════════════════════════════════════════════════════════════ */

/* زر تغيير اللغة */
.lang-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--border2);
  background: var(--surface2);
  color: var(--text1);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
  flex-shrink: 0;
}
.lang-toggle-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: scale(1.05);
}

/* ── تعديلات اللغة الإنجليزية LTR ──────────────────────────────── */
body.lang-en {
  font-family: 'Segoe UI', 'Inter', Arial, sans-serif;
}
/* السايدبار على اليسار */
body.lang-en .sidebar       { right: auto; left: 0; }
body.lang-en .main-content  { margin-right: 0; margin-left: 260px; }
body.lang-en .topbar        { right: 0; left: 260px; }

/* عند الطي */
body.lang-en.sidebar-collapsed .main-content { margin-left: 0; }
body.lang-en.sidebar-collapsed .topbar       { left: 0; }

/* اتجاه عناصر flex */
body.lang-en .topbar                  { flex-direction: row; }
body.lang-en .topbar-title            { text-align: left; }
body.lang-en .tub-info                { text-align: left; }
body.lang-en .um-role-options         { flex-direction: row; }
body.lang-en .um-perms-toggle-row     { flex-direction: row; }
body.lang-en .sidebar-nav .nav-item   { font-size: 13px; }
body.lang-en .sidebar-section-title  { font-size: 10px; letter-spacing: .5px; }

/* حجم خط مناسب للإنجليزية */
body.lang-en .sidebar-nav .nav-item span { font-size: 13px; }
body.lang-en .tub-name  { font-size: 13px; }
body.lang-en .tub-role  { font-size: 11px; }