/* GreenLab CRM — app styles. Layers on top of tokens.css (link tokens FIRST).
   Rule: tokens only, no raw hex — colors via hsl(var(--token)) so dark mode works. */

/* ---------- premium gradients (match GREENLAB brand lockup) ---------- */
:root{
  --grad-primary:linear-gradient(135deg, hsl(172 64% 44%), hsl(174 72% 30%));
  --grad-primary-hover:linear-gradient(135deg, hsl(172 66% 48%), hsl(174 74% 33%));
  --grad-soft:linear-gradient(135deg, hsl(var(--primary) / .16), hsl(var(--primary) / .05));
}

/* ---------- utilities ---------- */
.hidden{display:none!important}
.muted{color:hsl(var(--muted-foreground))}
.small{font-size:13px}
.tiny{font-size:11px}
.bold{font-weight:600}
.center{text-align:center}
.num{font-variant-numeric:tabular-nums}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fadeIn var(--dur-base) var(--ease-out)}
a{color:inherit;text-decoration:none}
.ic,.icon{stroke-width:2;stroke:currentColor;fill:none;flex-shrink:0;vertical-align:middle}

/* ---------- card padding (tokens .card has no padding) ---------- */
.card{padding:var(--space-lg)}
.card.pad0{padding:0}

/* ---------- buttons (extend tokens) ---------- */
.btn-outline{color:hsl(var(--foreground));background:hsl(var(--card));border-color:hsl(var(--border))}
.btn-outline:hover:not(:disabled){background:hsl(var(--muted))}
.btn-icon{padding:10px;min-height:0}
.btn-sm{min-height:0;padding:8px 12px;font-size:13px}
.btn-icon.btn-sm{padding:7px}

/* ---------- layout shell ---------- */
.app{display:flex;height:100dvh;width:100vw;overflow:hidden}
.sidebar{width:256px;flex-shrink:0;background:hsl(var(--card));border-right:1px solid hsl(var(--border));display:flex;flex-direction:column}
.brand{display:flex;align-items:center;justify-content:center;min-height:72px;padding:14px 18px;border-bottom:1px solid hsl(var(--border))}
.brand-logo{background:#fff;border-radius:14px;padding:10px 14px;box-shadow:var(--shadow-sm);width:100%;display:flex;justify-content:center}
.brand-logo img{width:100%;max-width:188px;height:auto;display:block}
.nav{flex:1;padding:24px 16px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:var(--radius-md);font-weight:500;color:hsl(var(--muted-foreground));transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.nav a:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.nav a.active{background:var(--grad-primary);color:#fff;box-shadow:0 8px 18px -6px hsl(174 72% 30% / .55)}
.nav a.active:hover{background:var(--grad-primary);color:#fff}
.nav a .ic{color:currentColor;opacity:.85}
.nav a.active .ic{opacity:1}
.sidebar-foot{padding:16px;border-top:1px solid hsl(var(--border))}
.user-chip{display:flex;align-items:center;gap:12px;padding:6px 4px;margin-bottom:12px}
.avatar{height:36px;width:36px;border-radius:50%;background:var(--grad-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0;box-shadow:0 4px 10px -3px hsl(174 72% 30% / .45)}
.content{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{height:64px;background:hsl(var(--card));border-bottom:1px solid hsl(var(--border));padding:0 24px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.topbar h2{font-size:18px;font-weight:600;margin:0}
.view{flex:1;overflow-y:auto;min-height:0;background:hsl(var(--background))}
.menu-btn{display:none;border:1px solid hsl(var(--border));background:hsl(var(--card));border-radius:var(--radius-md);padding:8px;color:hsl(var(--foreground))}
.page{padding:24px;max-width:1600px;margin:0 auto;display:flex;flex-direction:column;gap:24px}

/* ---------- grid / rows ---------- */
.grid{display:grid;gap:24px}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.row{display:flex;align-items:center;gap:12px}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.stat-label{font-size:11px;font-weight:600;color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:.06em}
.stat-value{font-size:26px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.icon-box{height:40px;width:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:hsl(var(--muted));color:hsl(var(--foreground))}
.icon-box.green{background:var(--grad-soft);color:hsl(var(--primary))}
.icon-box.blue{background:hsl(var(--info) / .14);color:hsl(var(--info))}
.icon-box.violet{background:hsl(262 83% 58% / .14);color:hsl(262 83% 62%)}
.icon-box.amber{background:hsl(var(--warning) / .16);color:hsl(38 92% 42%)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;font-weight:600;color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:.05em}
.select{width:100%;min-height:44px;padding:10px 12px;background:hsl(var(--card));color:hsl(var(--foreground));border:1px solid hsl(var(--input));border-radius:var(--radius-md);font:400 14px/1.4 var(--font-sans)}
.select:focus{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring) / .25)}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:hsl(var(--muted-foreground));padding:10px 16px;background:hsl(var(--muted) / .5);white-space:nowrap}
tbody td{padding:12px 16px;border-top:1px solid hsl(var(--border));color:hsl(var(--foreground))}
tbody tr:hover{background:hsl(var(--muted) / .45)}
.table-wrap{overflow-x:auto}

/* ---------- badges / pills ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:500;border:1px solid transparent}
.src-ads{background:hsl(var(--info) / .14);color:hsl(var(--info))}
.src-organic{background:hsl(var(--success) / .15);color:hsl(var(--success))}
.src-unknown{background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.pill{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;text-transform:uppercase;background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.pill-green{background:hsl(var(--primary) / .14);color:hsl(var(--primary))}
.status-online{background:hsl(var(--success) / .15);color:hsl(var(--success))}
.status-qr{background:hsl(var(--warning) / .18);color:hsl(38 92% 38%)}
.status-off{background:hsl(var(--destructive) / .14);color:hsl(var(--destructive))}

/* ---------- auth pages ---------- */
.auth-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:hsl(var(--background))}
.auth-card{width:100%;max-width:420px}
.auth-head{display:flex;flex-direction:column;align-items:center;margin-bottom:24px;text-align:center}
.auth-logo{background:#fff;border-radius:20px;padding:20px 26px;box-shadow:var(--shadow-xl);max-width:340px;width:100%}
.auth-logo img{width:100%;height:auto;display:block}
.auth-head h2{font-size:24px;font-weight:700;margin:18px 0 4px}
.auth-box{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:var(--shadow-xl);padding:32px}

/* ---------- alerts ---------- */
.alert{display:flex;gap:10px;padding:12px;border-radius:var(--radius-md);font-size:13px;align-items:flex-start}
.alert-error{background:hsl(var(--destructive) / .12);color:hsl(var(--destructive));border:1px solid hsl(var(--destructive) / .3)}
.alert-ok{background:hsl(var(--success) / .14);color:hsl(var(--success));border:1px solid hsl(var(--success) / .3)}
.alert-warn{background:hsl(var(--warning) / .16);color:hsl(38 92% 38%);border:1px solid hsl(var(--warning) / .35)}

/* ---------- modal extras (tokens provides .modal-overlay/.modal) ---------- */
.modal-overlay{z-index:80;padding:16px}
.modal{position:relative;animation:fadeIn var(--dur-base) var(--ease-out)}
.modal h3{margin:0 0 20px;font-size:18px;font-weight:700}
.modal .close{position:absolute;top:16px;right:16px;border:none;background:none;color:hsl(var(--muted-foreground));padding:4px;border-radius:var(--radius-sm)}
.modal .close:hover{background:hsl(var(--muted))}

/* ---------- toast ---------- */
#toasts{position:fixed;top:16px;right:16px;z-index:100;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 16px;border-radius:var(--radius-md);color:#fff;font-size:13px;font-weight:500;box-shadow:var(--shadow-lg);animation:fadeIn var(--dur-base) var(--ease-out)}
.toast.ok{background:hsl(var(--success))}.toast.err{background:hsl(var(--destructive))}.toast.info{background:hsl(var(--foreground));color:hsl(var(--background))}

/* Premium Incoming Message Toast */
.toast.msg-notif {
  background: hsl(var(--card) / 0.82);
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border) / 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  width: 328px;
  padding: 12px 14px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.2s;
  animation: slideInToast 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.msg-notif:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--primary) / 0.4);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
}
@keyframes slideInToast {
  from {
    opacity: 0;
    transform: translateX(100px) translateY(0);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}
.toast-body-wrap {
  display: flex;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.toast-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border: 1.5px solid hsl(var(--primary) / 0.3);
}
.toast-avatar-init {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.toast-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.toast-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.toast-title {
  font-size: 13px;
  font-weight: 650;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast-time {
  font-size: 10px;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}
.toast-desc {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.toast-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: hsl(var(--muted-foreground) / 0.6);
  border-radius: 50%;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
  position: absolute;
  top: 6px;
  right: 6px;
}
.toast-close:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}


/* ---------- chat ---------- */
.chat{display:flex;height:calc(100dvh - 64px);overflow:hidden;background:hsl(var(--background))}
.chat-list{width:360px;flex-shrink:0;background:hsl(var(--card));border-right:1px solid hsl(var(--border));display:flex;flex-direction:column}
.chat-filters{padding:14px;border-bottom:1px solid hsl(var(--border));display:flex;flex-direction:column;gap:8px}
.chat-items{flex:1;overflow-y:auto}
.chat-item{display:flex;gap:12px;padding:12px 16px;border-left:3px solid transparent;cursor:pointer;border-bottom:1px solid hsl(var(--border) / .6);width:100%;text-align:left;background:none;border-top:none;border-right:none;color:inherit}
.chat-item:hover{background:hsl(var(--muted) / .5)}
.chat-item.active{background:hsl(var(--primary) / .08);border-left-color:hsl(var(--primary))}
.chat-main{flex:1;min-width:0;display:flex;flex-direction:column;background:hsl(var(--background));position:relative}
.emoji-panel{position:absolute;bottom:62px;left:8px;right:8px;max-height:190px;overflow-y:auto;
  flex-wrap:wrap;gap:2px;padding:8px;background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:12px;box-shadow:var(--shadow-lg);z-index:40}
.emoji-cell{background:transparent;border:none;cursor:pointer;font-size:22px;padding:3px;border-radius:8px;line-height:1}
.emoji-cell:hover{background:hsl(var(--muted))}
.quick-panel{position:absolute;bottom:62px;left:8px;right:8px;max-height:240px;overflow-y:auto;background:hsl(var(--card));
  border:1px solid hsl(var(--border));border-radius:12px;box-shadow:var(--shadow-lg);z-index:40;padding:6px}
.quick-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px 8px;border-bottom:1px solid hsl(var(--border));margin-bottom:4px}
.quick-add-row{display:flex;gap:6px;padding:2px 6px 8px}
.quick-add-row .input{flex:1;min-width:0}
.quick-list{display:flex;flex-direction:column;gap:2px}
/* multi-select mode */
.select-bar{position:absolute;top:0;left:0;right:0;height:56px;display:flex;align-items:center;gap:10px;
  padding:0 14px;background:hsl(var(--card));border-bottom:1px solid hsl(var(--border));z-index:25}
.bubble-wrap.select-mode{cursor:pointer}
.bubble-wrap.select-mode .msg-actions{display:none !important}
.bubble-wrap.selected .bubble{box-shadow:0 0 0 2px hsl(var(--primary))}
.bubble-wrap.select-mode::before{content:'';flex:none;width:20px;height:20px;border-radius:50%;
  border:2px solid hsl(var(--muted-foreground));align-self:center;order:-3;display:flex;align-items:center;
  justify-content:center;font-size:12px;line-height:1;color:#fff}
.bubble-wrap.selected::before{content:'✓';background:hsl(var(--primary));border-color:hsl(var(--primary))}
.quick-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer}
.quick-item:hover{background:hsl(var(--muted))}
.quick-text{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-del{flex:none;background:transparent;border:none;cursor:pointer;color:hsl(var(--muted-foreground));border-radius:50%;padding:3px;display:flex}
.quick-del:hover{background:hsl(var(--muted));color:#dc2626}
.scroll-bottom-btn{position:absolute;bottom:74px;right:18px;z-index:30;width:42px;height:42px;border-radius:50%;
  border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md)}
.scroll-bottom-btn:hover{background:hsl(var(--muted))}
.scroll-bottom-btn .sb-arrow{font-size:20px;line-height:1}
.sb-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-size:11px;font-weight:700;line-height:18px;text-align:center}
.chat-search-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:hsl(var(--card));border-bottom:1px solid hsl(var(--border))}
.chat-search-bar .input{flex:1;min-width:0}
.bubble-wrap.search-hit .bubble{outline:2px solid hsl(var(--primary) / .35)}
.bubble-wrap.search-current .bubble{outline:2px solid hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary) / .2)}
.msg-link{text-decoration:underline;word-break:break-all}
.bubble-in .msg-link{color:#2563eb}
.dark .bubble-in .msg-link{color:#7eb6ff}
.msg-more-btn{background:transparent;border:none;cursor:pointer;color:hsl(var(--muted-foreground));font-size:16px;line-height:1;padding:3px 6px;border-radius:50%}
.msg-more-btn:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.msg-menu{position:fixed;z-index:60;min-width:152px;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:10px;box-shadow:var(--shadow-lg);padding:4px;display:flex;flex-direction:column}
.msg-menu .mi{display:block;width:100%;text-align:left;background:transparent;border:none;cursor:pointer;padding:8px 12px;border-radius:7px;font-size:13px;color:hsl(var(--foreground))}
.msg-menu .mi:hover{background:hsl(var(--muted))}
.msg-menu .mi-danger{color:#dc2626}
.star-badge{font-size:11px;margin-right:2px}
.msg-deleted{font-style:italic;color:hsl(var(--muted-foreground));font-size:13px}
.call-msg{display:flex;align-items:center;gap:5px;font-size:13px}
.call-msg .call-ico{font-size:16px}
.call-msg .call-dir{font-size:12px;opacity:.8}
.call-msg.call-missed{color:#dc2626;font-weight:600}
.modal-card{position:relative;width:100%;max-width:360px;max-height:72vh;overflow:auto;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:14px;padding:16px;box-shadow:var(--shadow-lg);animation:fadeIn var(--dur-base) var(--ease-out)}

/* ---------- wider, responsive form modal (e.g. Pipeline "Detail & Ubah Lead") ---------- */
.modal.modal-form{max-width:720px;width:94%;padding:0;display:flex;flex-direction:column;max-height:calc(100dvh - 32px)}
.modal.modal-form > h3{margin:0;padding:18px 22px;border-bottom:1px solid hsl(var(--border))}
.modal.modal-form .modal-body{flex:1 1 auto;min-height:0;display:flex;overflow:hidden}
.modal-form-body{flex:1 1 auto;min-height:0;width:100%;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:18px 22px}
.pipe-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.pipe-grid .field-full{grid-column:1 / -1}
.pipe-actions{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;padding:12px 0 2px;background:hsl(var(--card));box-shadow:0 -10px 12px -10px rgba(0,0,0,.18)}
@media (max-width:600px){
  .modal-overlay{padding:0;place-items:end stretch}
  .modal.modal-form{width:100%;max-width:100%;max-height:92dvh;border-radius:18px 18px 0 0}
  .modal.modal-form > h3{padding:16px}
  .modal-form-body{padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
  .pipe-grid{grid-template-columns:1fr}
}
.fwd-list{display:flex;flex-direction:column;gap:4px;max-height:50vh;overflow:auto}
.fwd-item{display:block;width:100%;text-align:left;background:transparent;border:1px solid transparent;cursor:pointer;padding:8px 10px;border-radius:8px}
.fwd-item:hover{background:hsl(var(--muted))}
.chat-head{height:64px;background:hsl(var(--card));border-bottom:1px solid hsl(var(--border));padding:0 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.chat-stream{
  flex:1;
  overflow-y:auto;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background-color: #efeae2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath fill-rule='evenodd' d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm1-61c3.148 0 5.7-2.552 5.7-5.7 0-3.148-2.552-5.7-5.7-5.7-3.148 0-5.7 2.552-5.7 5.7 0 3.148 2.552 5.7 5.7 5.7zm43-9.3c0 1.49-1.21 2.7-2.7 2.7-1.49 0-2.7-1.21-2.7-2.7 0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7zM23 75.3c0 .72-.58 1.3-1.3 1.3-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3zM4.3 48c0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3-.72 0-1.3-.58-1.3-1.3z'/%3E%3C/g%3E%3C/svg%3E");
}
.dark .chat-stream {
  background-color: #0b141a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath fill-rule='evenodd' d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm1-61c3.148 0 5.7-2.552 5.7-5.7 0-3.148-2.552-5.7-5.7-5.7-3.148 0-5.7 2.552-5.7 5.7 0 3.148 2.552 5.7 5.7 5.7zm43-9.3c0 1.49-1.21 2.7-2.7 2.7-1.49 0-2.7-1.21-2.7-2.7 0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7zM23 75.3c0 .72-.58 1.3-1.3 1.3-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3zM4.3 48c0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3-.72 0-1.3-.58-1.3-1.3z'/%3E%3C/g%3E%3C/svg%3E");
}
.bubble-wrap{display:flex;flex-direction:row;align-items:center;gap:6px;margin-bottom:2px;width:100%}
.bubble-wrap.out{justify-content:flex-end}
.bubble-wrap:not(.out){justify-content:flex-start}
.bubble-wrap:not(.out) .msg-actions{order:2}
.msg-actions{flex:none;display:flex;align-items:center;gap:2px;opacity:0;transition:opacity .15s}
.bubble-wrap:hover .msg-actions{opacity:.85}
.msg-reply-btn,.msg-react-btn{background:transparent;border:none;cursor:pointer;color:hsl(var(--muted-foreground));
  font-size:15px;line-height:1;padding:3px 5px;border-radius:50%}
.msg-reply-btn:hover,.msg-react-btn:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.bubble{position:relative}
.reaction-badge{position:absolute;bottom:-11px;font-size:13px;background:hsl(var(--background));
  border:1px solid hsl(var(--border));border-radius:999px;padding:0 4px;line-height:18px;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.bubble-in .reaction-badge{left:6px}
.bubble-out .reaction-badge{right:6px}
.bubble-wrap.has-reaction{margin-bottom:14px}
.reaction-picker{position:fixed;z-index:50;display:flex;gap:2px;background:hsl(var(--background));
  border:1px solid hsl(var(--border));border-radius:999px;padding:4px 6px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.reaction-picker button{background:transparent;border:none;cursor:pointer;font-size:20px;padding:2px 4px;border-radius:50%;transition:transform .1s}
.reaction-picker button:hover{background:hsl(var(--muted));transform:scale(1.15)}
.reply-quote{border-left:3px solid hsl(var(--primary));background:rgba(0,0,0,.06);padding:3px 8px;border-radius:4px;
  margin-bottom:4px;font-size:12px;color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px;cursor:pointer}
@keyframes flashHi{0%,100%{background:transparent}30%{background:hsl(var(--primary) / .18)}}
.bubble-wrap.flash-highlight .bubble{animation:flashHi 1.4s ease}
.dark .reply-quote{background:rgba(255,255,255,.07)}
.reply-preview{display:flex;align-items:center;gap:8px;padding:8px 12px;background:hsl(var(--muted));border-top:1px solid hsl(var(--border))}
.date-sep{align-self:center;margin:10px 0;padding:3px 12px;border-radius:999px;font-size:12px;
  background:hsl(var(--muted));color:hsl(var(--muted-foreground));box-shadow:0 1px 1px rgba(0,0,0,.06)}
.unread-sep{align-self:stretch;text-align:center;margin:8px 0;padding:4px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:hsl(var(--primary));background:hsl(var(--primary) / .08);border-radius:6px}
.bubble{
  max-width: 65%;
  padding: 8px 12px 6px;
  font-size: 14.5px;
  line-height: 1.4;
  position: relative;
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
  word-wrap: break-word;
}
.bubble-in{
  background: #ffffff;
  color: #111b21;
  border-radius: 0 10px 10px 10px;
  align-self: flex-start;
}
.bubble-out{
  background: #d9fdd3;
  color: #111b21;
  border-radius: 10px 0 10px 10px;
  align-self: flex-end;
}
.dark .bubble-in {
  background: #202c33;
  color: #e9edef;
}
.dark .bubble-out {
  background: #005c4b;
  color: #e9edef;
}
.bubble-meta{
  font-size: 11px;
  color: #667781;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.dark .bubble-meta {
  color: #8696a0;
}
.chat-foot{padding:14px;background:hsl(var(--card));border-top:1px solid hsl(var(--border));display:flex;gap:8px}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:hsl(var(--muted-foreground));padding:24px}
.ad-banner{background:hsl(var(--info) / .12);border:1px solid hsl(var(--info) / .3);border-radius:var(--radius-md);padding:10px 12px;font-size:12px;color:hsl(var(--info));margin:12px 18px 0}
.ad-banner a{text-decoration:underline}

/* ---------- bars (source distribution) ---------- */
.bar{height:24px;width:100%;border-radius:999px;background:hsl(var(--muted));display:flex;overflow:hidden}
.bar > span{height:100%}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}
.legend .item{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid hsl(var(--border));border-radius:var(--radius-md)}
.swatch{height:12px;width:12px;border-radius:50%;flex-shrink:0}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .sidebar{position:fixed;z-index:60;height:100dvh;transform:translateX(-100%);transition:transform var(--dur-base) var(--ease-out)}
  .sidebar.open{transform:none}
  .menu-btn{display:inline-flex}
  .grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .chat-list{width:100%}
  .chat-list.hide-mobile{display:none}
  .chat-main.hide-mobile{display:none}
  .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55}
}
@media (max-width:560px){.grid.cols-4{grid-template-columns:1fr}.page{padding:16px}}

/* ---------- mobile topbar + drawer polish ---------- */
@media (max-width:640px){
  /* Tighter header: no wrap title, hide name/role text (avatar + drawer cover identity), notch-safe */
  .topbar{min-height:56px;height:auto;padding:0 10px;padding-top:env(safe-area-inset-top)}
  .topbar > .row:first-child{flex:1;min-width:0}
  .topbar h2{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar > .row:last-child{gap:8px;flex-shrink:0}
  .topbar .topbar-user{display:none}
  .menu-btn{padding:9px}
  /* Drawer: a touch wider + safe-area aware top/bottom */
  .sidebar{width:min(86vw,300px)}
  .brand{padding-top:calc(14px + env(safe-area-inset-top))}
  .sidebar-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* ---------- WhatsApp-style mobile conversation ---------- */
/* Back button: hidden on desktop (3-pane), shown on single-pane (≤1024px). */
#backBtn{display:none}
@media (max-width:1024px){
  #backBtn{display:inline-flex}

  /* Full-screen thread: the chat header becomes the only header (hide the global
     topbar) so a conversation fills the viewport, like the WhatsApp app. */
  body.chat-mobile-thread .topbar{display:none}
  body.chat-mobile-thread .chat{height:100dvh}
  body.chat-mobile-thread .chat-detail{top:0;height:100dvh}

  /* Nothing in the conversation column may stretch it wider than the screen
     (otherwise .chat's overflow:hidden clips bubbles & header off the right edge). */
  .chat-main{overflow:hidden}
  .chat-stream,.chat-head{min-width:0}
  .chat-head .row{min-width:0}

  /* Wider bubbles use the available width like the app. */
  .bubble{max-width:82%}
  .reply-quote{max-width:76vw}

  /* Compact one-line header: avatar + name + actions. The contact meta (phone +
     CRM badges) is already shown in the list, so it's hidden here to avoid forcing
     the header wider than the viewport. */
  .chat-head{padding:0 6px;gap:6px;overflow:hidden}
  .chat-head .pill{display:none}
  .chat-head-meta{display:none}
  .chat-stream{padding:12px 10px}

  /* Composer + floating panels clear the iOS home-indicator / gesture bar. */
  .chat-foot{padding:10px 10px calc(10px + env(safe-area-inset-bottom));gap:6px}
  .chat-filters{padding:10px 12px}
  .emoji-panel,.quick-panel{bottom:calc(58px + env(safe-area-inset-bottom))}
  .scroll-bottom-btn{bottom:calc(70px + env(safe-area-inset-bottom))}
}
@media (max-width:480px){
  .bubble{max-width:86%}
  .chat-head{padding:0 4px}
  /* keep the avatar tight against the back button */
  .chat-head .row{gap:8px}
}

/* Settings sub-tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 16px; }
.tabs .tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border: 0; background: transparent; cursor: pointer;
  color: hsl(var(--muted-foreground)); font-weight: 500; font-size: 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs .tab:hover { color: hsl(var(--foreground)); }
.tabs .tab.active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); }
.tab-pane[hidden] { display: none; }

/* ---------- chat details sidebar ---------- */
.chat-detail {
  width: 320px;
  flex-shrink: 0;
  background: hsl(var(--card));
  border-left: 1px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
  animation: slideInRight var(--dur-base) var(--ease-out);
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.chat-detail-head {
  height: 64px;
  border-bottom: 1px solid hsl(var(--border));
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  flex-shrink: 0;
}
.chat-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chat-detail.hidden {
  display: none !important;
}
@media (max-width: 1200px) {
  .chat-detail {
    position: fixed;
    right: 0;
    top: 64px;
    height: calc(100dvh - 64px);
    z-index: 50;
    box-shadow: var(--shadow-lg);
  }
}

/* ---------- collapsible sidebar (desktop & mobile optimization) ---------- */
.sidebar {
  overflow: visible !important;
  transition: width var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
/* position:relative only anchors the desktop collapse toggle. It must NOT apply on
   mobile, where the sidebar is position:fixed and must leave the flex flow entirely
   (otherwise it reserves a 256px empty strip and squashes the app to the right). */
@media (min-width: 1025px) { .sidebar { position: relative; } }
.sidebar-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  margin-left: auto;
}
.sidebar-toggle-btn:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}
.sidebar-toggle-btn svg {
  transition: transform var(--dur-base) var(--ease-out);
}
.sidebar-toggle-btn .icon-close {
  display: none;
}
.sidebar-toggle-btn .icon-collapse {
  display: inline-flex;
}

/* Collapsed Desktop State */
@media (min-width: 1025px) {
  .sidebar.collapsed {
    width: 72px;
  }
  .sidebar.collapsed .brand {
    padding: 14px 8px;
    justify-content: center;
  }
  .sidebar.collapsed .brand-logo {
    padding: 8px;
    width: auto;
    box-shadow: none;
    background: transparent;
  }
  .sidebar.collapsed .brand-logo .logo-full {
    display: none !important;
  }
  .sidebar.collapsed .brand-logo .logo-mini {
    display: block !important;
    width: 24px;
    height: 24px;
  }
  .sidebar.collapsed .sidebar-toggle-btn {
    margin: 0;
    position: absolute;
    right: -13px;
    top: 20px;
    width: 26px;
    height: 26px;
    padding: 0;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 50%;
    z-index: 70;
    box-shadow: var(--shadow-sm);
  }
  .sidebar.collapsed .sidebar-toggle-btn:hover {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary));
  }
  .sidebar.collapsed .sidebar-toggle-btn .icon-collapse svg {
    transform: rotate(180deg);
  }
  .sidebar.collapsed .nav {
    padding: 24px 8px;
  }
  .sidebar.collapsed .nav a {
    justify-content: center;
    padding: 11px;
    gap: 0;
  }
  .sidebar.collapsed .nav a span {
    display: none !important;
  }
  .sidebar.collapsed .sidebar-foot {
    padding: 16px 8px;
  }
  .sidebar.collapsed .user-chip {
    justify-content: center;
    padding: 6px 0;
  }
  .sidebar.collapsed .user-chip > div:last-child {
    display: none !important;
  }
  .sidebar.collapsed #logoutBtn {
    width: 44px !important;
    height: 44px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 50%;
  }
  .sidebar.collapsed #logoutBtn span {
    display: none !important;
  }
}

/* Mobile Toggles & Menu Close behavior */
@media (max-width: 1024px) {
  .sidebar-toggle-btn {
    position: absolute;
    right: 16px;
    top: 16px;
  }
  .sidebar-toggle-btn .icon-close {
    display: inline-flex;
  }
  .sidebar-toggle-btn .icon-collapse {
    display: none;
  }
  .sidebar .brand {
    justify-content: flex-start;
    padding-right: 48px;
  }
}

/* ---------- bubble tails & groupings (whatsapp style) ---------- */
.chat-stream {
  gap: 2px !important; /* Smaller gap for consecutive messages */
}
.bubble-wrap.has-tail {
  margin-top: 8px; /* Extra spacing when starting a new group */
}
.bubble {
  border-radius: 8px !important; /* Overwrite standard radius for consecutive messages */
}
.bubble-in.has-tail {
  border-radius: 0 8px 8px 8px !important;
}
.bubble-out.has-tail {
  border-radius: 8px 0 8px 8px !important;
}
.bubble.has-tail::after {
  content: "";
  position: absolute;
  top: 0;
  width: 8px;
  height: 13px;
  background-size: contain;
  background-repeat: no-repeat;
}
.bubble-in.has-tail::after {
  left: -8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' width='8' height='13'%3E%3Cpath d='M1.533 3.568L8 12.018V0H0c.133 1.29.644 2.58 1.533 3.568z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.dark .bubble-in.has-tail::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' width='8' height='13'%3E%3Cpath d='M1.533 3.568L8 12.018V0H0c.133 1.29.644 2.58 1.533 3.568z' fill='%23202c33'/%3E%3C/svg%3E");
}
.bubble-out.has-tail::after {
  right: -8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' width='8' height='13'%3E%3Cpath d='M6.467 3.568L0 12.018V0h8c-.133 1.29-.644 2.58-1.533 3.568z' fill='%23d9fdd3'/%3E%3C/svg%3E");
}
.dark .bubble-out.has-tail::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' width='8' height='13'%3E%3Cpath d='M6.467 3.568L0 12.018V0h8c-.133 1.29-.644 2.58-1.533 3.568z' fill='%23005c4b'/%3E%3C/svg%3E");
}

/* ---------- custom audio player (whatsapp style) ---------- */
.custom-audio-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  min-width: 250px;
  max-width: 280px;
}
.dark .custom-audio-player {
  background: rgba(255, 255, 255, 0.05);
}
.audio-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: hsl(var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  flex-shrink: 0;
  padding: 0;
}
.audio-play-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}
.dark .audio-play-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.audio-timeline {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
}
.audio-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #c0c0c0;
  outline: none;
  margin: 6px 0;
  cursor: pointer;
}
.dark .audio-slider {
  background: #4f5d64;
}
.audio-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: hsl(var(--primary));
  cursor: pointer;
  transition: transform 0.1s;
}
.audio-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.audio-time-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #667781;
}
.dark .audio-time-row {
  color: #8696a0;
}
.audio-speed-btn {
  font-size: 12px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 99px;
  padding: 2px 8px;
  cursor: pointer;
  color: inherit;
  flex-shrink: 0;
}
.dark .audio-speed-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
.audio-mic-icon {
  font-size: 16px;
  color: #53bdeb; /* blue vn status */
  flex-shrink: 0;
}

/* ---------- media lightbox (whatsapp style) ---------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 20, 26, 0.95);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: rgba(0, 0, 0, 0.4);
  color: #e9edef;
  z-index: 1010;
}
.lightbox-title {
  font-weight: 500;
  font-size: 15px;
}
.lightbox-actions {
  display: flex;
  gap: 12px;
}
.lightbox-btn {
  background: transparent;
  border: none;
  color: #e9edef;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}
.lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.lightbox-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}
.lightbox-media {
  max-width: 90%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  animation: zoomIn 0.25s cubic-bezier(0.1, 0.8, 0.25, 1);
}
@keyframes zoomIn {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}/* ---------- kanban pipeline board ---------- */
.kanban-board {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 10px 0 20px 0;
  align-items: stretch;
  height: calc(100vh - 190px);
  min-height: 450px;
}
.kanban-board::-webkit-scrollbar {
  height: 8px;
}
.kanban-board::-webkit-scrollbar-track {
  background: transparent;
}
.kanban-board::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.15);
  border-radius: 999px;
}
.kanban-board::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.3);
}

.kanban-column {
  flex: 0 0 310px;
  width: 310px;
  background: hsl(var(--muted) / 0.15);
  border: 1px solid hsl(var(--border) / 0.7);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.kanban-column-header {
  padding: 14px 16px;
  border-bottom: 1px solid hsl(var(--border) / 0.7);
  background: hsl(var(--card));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.column-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.column-header-top .title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.column-header-top h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--foreground));
}
.column-header-top .count-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.column-header-value {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 18px;
  font-size: 12.5px;
}
.column-header-value .value-label {
  font-size: 11px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.column-header-value .value-amount {
  font-weight: 700;
}
.column-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.kanban-column-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 150px;
  transition: background-color 0.2s, border-color 0.2s;
}
.kanban-column-body::-webkit-scrollbar {
  width: 5px;
}
.kanban-column-body::-webkit-scrollbar-track {
  background: transparent;
}
.kanban-column-body::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.12);
  border-radius: 999px;
}
.kanban-column-body::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.25);
}
.kanban-column-body.drag-over {
  background: hsl(var(--primary) / 0.03);
  outline: 2px dashed hsl(var(--primary) / 0.5);
  outline-offset: -3px;
}
.kanban-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.6);
  border-radius: 12px;
  padding: 14px;
  cursor: grab;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.015), 0 1px 2px rgba(0, 0, 0, 0.01);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.2s ease, 
              border-color 0.2s ease, 
              background-color 0.2s ease;
}
.kanban-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.06), 
              0 6px 8px -6px rgba(0, 0, 0, 0.04);
  border-color: hsl(var(--border));
}
.kanban-card:active {
  cursor: grabbing;
}
.kanban-card.dragging {
  opacity: 0.55;
  transform: scale(0.96) rotate(-1deg);
  border: 2px dashed hsl(var(--muted-foreground) / 0.5) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}
.kanban-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.source-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2.5px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.src-google {
  background: hsl(210 100% 96%);
  color: hsl(210 100% 35%);
  border: 1px solid hsl(210 100% 90%);
}
.dark .src-google {
  background: hsl(210 100% 12%);
  color: hsl(210 100% 70%);
  border: 1px solid hsl(210 100% 20%);
}
.src-facebook {
  background: hsl(220 90% 96%);
  color: hsl(220 90% 40%);
  border: 1px solid hsl(220 90% 90%);
}
.dark .src-facebook {
  background: hsl(220 90% 12%);
  color: hsl(220 90% 70%);
  border: 1px solid hsl(220 90% 20%);
}
.src-instagram {
  background: linear-gradient(45deg, rgba(253, 244, 255, 0.9), rgba(255, 241, 242, 0.9));
  color: hsl(330 85% 45%);
  border: 1px solid hsl(330 85% 90%);
}
.dark .src-instagram {
  background: linear-gradient(45deg, hsl(330 85% 10%), hsl(300 85% 10%));
  color: hsl(330 85% 70%);
  border: 1px solid hsl(330 85% 20%);
}
.src-tiktok {
  background: hsl(180 10% 94%);
  color: hsl(180 10% 15%);
  border: 1px solid hsl(180 10% 85%);
}
.dark .src-tiktok {
  background: hsl(0 0% 8%);
  color: hsl(180 80% 65%);
  border: 1px solid hsl(180 10% 20%);
}
.src-organic {
  background: hsl(142.1 76.2% 96.5%);
  color: hsl(142.1 76.2% 28%);
  border: 1px solid hsl(142.1 76.2% 90%);
}
.dark .src-organic {
  background: hsl(142.1 76.2% 10%);
  color: hsl(142.1 76.2% 70%);
  border: 1px solid hsl(142.1 76.2% 20%);
}
.src-manual {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
}
.kanban-card-deal {
  display: flex;
  align-items: center;
  gap: 3.5px;
  background: hsl(45 93% 94%);
  color: hsl(45 93% 25%);
  border: 1px solid hsl(45 93% 85%);
  padding: 2.5px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.05);
}
.dark .kanban-card-deal {
  background: hsl(45 90% 10%);
  color: hsl(45 93% 65%);
  border: 1px solid hsl(45 90% 20%);
}
.deal-icon {
  display: flex;
  color: hsl(45 93% 40%);
}
.dark .deal-icon {
  color: hsl(45 93% 60%);
}
.kanban-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: hsl(var(--foreground));
  line-height: 1.35;
  margin: 2px 0 0 0;
}
.kanban-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kanban-card-phone, .kanban-card-details {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: hsl(var(--muted-foreground));
}
.meta-icon {
  display: flex;
  align-items: center;
  color: hsl(var(--muted-foreground) / 0.7);
  flex-shrink: 0;
}
.kanban-card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.kanban-card-tags .badge-tag {
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: hsl(var(--muted) / 0.7);
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border) / 0.5);
  font-weight: 500;
}
.dark .kanban-card-tags .badge-tag {
  background: hsl(var(--muted) / 0.4);
  border-color: hsl(var(--border) / 0.3);
}
.kanban-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid hsl(var(--border) / 0.4);
  padding-top: 10px;
  margin-top: 4px;
}
.kanban-card-sales {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.sales-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.sales-name {
  font-size: 10.5px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kanban-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.btn-action-chat, .btn-action-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.8);
  color: hsl(var(--muted-foreground));
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}
.btn-action-chat:hover {
  background: hsl(142.1 76.2% 96.5%);
  color: hsl(142.1 76.2% 28%);
  border-color: hsl(142.1 76.2% 80%);
}
.dark .btn-action-chat:hover {
  background: hsl(142.1 76.2% 10%);
  color: hsl(142.1 76.2% 70%);
  border-color: hsl(142.1 76.2% 30%);
}
.btn-action-edit:hover {
  background: hsl(var(--primary) / 0.06);
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.3);
}
.dark .btn-action-edit:hover {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.4);
}

/* ---------- Google Ads (Iklan) Page Premium Styling ---------- */
.gads-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 1200px) {
  .gads-summary-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.kpi-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.7);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04);
  border-color: hsl(var(--border));
}
.kpi-blue { border-left: 4px solid #3b82f6; }
.kpi-teal { border-left: 4px solid #0d9488; }
.kpi-amber { border-left: 4px solid #f59e0b; }
.kpi-green { border-left: 4px solid #10b981; }
.kpi-emerald { border-left: 4px solid #059669; }
.kpi-purple { border-left: 4px solid #8b5cf6; }

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kpi-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
}
.kpi-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: hsl(var(--muted) / 0.5);
  flex-shrink: 0;
}
.kpi-value {
  font-size: 18px;
  font-weight: 800;
  color: hsl(var(--foreground));
  line-height: 1.2;
}
.kpi-subval {
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}
.kpi-desc {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  margin-top: auto;
}
.text-teal { color: #0d9488 !important; }
.text-green { color: #10b981 !important; }
.text-purple { color: #8b5cf6 !important; }

/* Status pill inside Google Ads Campaign Table */
.gads-status-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
  text-transform: capitalize;
}
.gads-status-enabled {
  background: hsl(142.1 76.2% 96.5%);
  color: hsl(142.1 76.2% 28%);
  border: 1px solid hsl(142.1 76.2% 90%);
}
.dark .gads-status-enabled {
  background: hsl(142.1 76.2% 10%);
  color: hsl(142.1 76.2% 70%);
  border: 1px solid hsl(142.1 76.2% 20%);
}
.gads-status-removed {
  background: hsl(0 84.2% 96.5%);
  color: hsl(0 84.2% 35%);
  border: 1px solid hsl(0 84.2% 90%);
}
.dark .gads-status-removed {
  background: hsl(0 84.2% 12%);
  color: hsl(0 84.2% 70%);
  border: 1px solid hsl(0 84.2% 20%);
}
.gads-status-paused {
  background: hsl(200 10% 93%);
  color: hsl(200 10% 30%);
  border: 1px solid hsl(200 10% 85%);
}
.dark .gads-status-paused {
  background: hsl(200 10% 12%);
  color: hsl(200 10% 70%);
  border: 1px solid hsl(200 10% 20%);
}

/* ROAS badge variants */
.roas-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  text-align: center;
}
.roas-badge-high {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.2);
}
.roas-badge-mid {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2);
}
.roas-badge-low {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
}

/* Premium Table Rows */
.premium-table tr {
  transition: background-color 0.15s ease;
}
.premium-table tr:hover {
  background-color: hsl(var(--muted) / 0.04);
}
.gads-detail-row {
  transition: all 0.2s ease;
}