/* ===== AI WhatsApp CRM — Shared Styles ===== */

:root {
  --brand-50:#ecfdf5; --brand-100:#d1fae5; --brand-200:#a7f3d0;
  --brand-300:#6ee7b7; --brand-400:#34d399; --brand-500:#10b981;
  --brand-600:#059669; --brand-700:#047857; --brand-800:#065f46;
  --accent-500:#6366f1; --accent-600:#4f46e5;
  --wa:#25D366; --wa-dark:#128C7E;
  --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#f1f5f9;
  --border:#e2e8f0; --text:#0f172a; --text-muted:#64748b;
}
:root.dark {
  --surface:#0b1220; --surface-2:#0f172a; --surface-3:#111827;
  --border:#1f2937; --text:#e5e7eb; --text-muted:#94a3b8;
}

html,body { background:var(--surface-2); color:var(--text); }
body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Scrollbars */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; }
.dark ::-webkit-scrollbar-thumb{ background:#334155; }
::-webkit-scrollbar-track{ background:transparent; }

/* Glass */
.glass{
  background:rgba(255,255,255,0.6);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.5);
}
.dark .glass{
  background:rgba(15,23,42,0.55);
  border:1px solid rgba(148,163,184,0.15);
}

/* Cards */
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.08);
}
.card-hover{ transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px -12px rgba(15,23,42,.18); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .9rem; border-radius:10px; font-weight:600; font-size:.875rem; transition:all .15s ease; border:1px solid transparent; cursor:pointer; }
.btn-primary{ background:linear-gradient(135deg,var(--brand-500),var(--brand-600)); color:white; box-shadow:0 6px 16px -6px rgba(16,185,129,.5); }
.btn-primary:hover{ transform: translateY(-1px); box-shadow:0 10px 22px -8px rgba(16,185,129,.55); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.btn-ghost:hover{ background:var(--surface-3); }
.btn-danger{ background:#ef4444; color:white; }
.btn-danger:hover{ background:#dc2626; }

/* Inputs */
.input, .select, .textarea{
  width:100%; padding:.6rem .8rem; border-radius:10px; background:var(--surface); color:var(--text);
  border:1px solid var(--border); font-size:.9rem; transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}

/* Chips / badges */
.chip{ display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:600; background:var(--surface-3); color:var(--text); }
.chip-green{ background:#d1fae5; color:#065f46; }
.chip-red{ background:#fee2e2; color:#991b1b; }
.chip-blue{ background:#dbeafe; color:#1e40af; }
.chip-yellow{ background:#fef3c7; color:#92400e; }
.chip-purple{ background:#ede9fe; color:#5b21b6; }
.dark .chip-green{ background:rgba(16,185,129,.15); color:#6ee7b7; }
.dark .chip-red{ background:rgba(239,68,68,.15); color:#fca5a5; }
.dark .chip-blue{ background:rgba(59,130,246,.15); color:#93c5fd; }
.dark .chip-yellow{ background:rgba(234,179,8,.15); color:#fde68a; }
.dark .chip-purple{ background:rgba(139,92,246,.15); color:#c4b5fd; }

/* Sidebar */
.sidebar-link{
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem .8rem; border-radius:10px; color:var(--text-muted);
  font-size:.9rem; font-weight:500; transition: all .15s;
}
.sidebar-link:hover{ background:var(--surface-3); color:var(--text); }
.sidebar-link.active{
  background:linear-gradient(90deg, rgba(16,185,129,.14), rgba(16,185,129,0));
  color:var(--brand-600); font-weight:600;
}
.dark .sidebar-link.active{ color:var(--brand-400); }
.sidebar-link.active::before{
  content:""; width:3px; height:20px; background:var(--brand-500); border-radius:2px; margin-left:-.5rem;
}

/* Animations */
@keyframes fadeUp { from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
.fade-up{ animation: fadeUp .3s ease both; }
@keyframes pulseDot { 0%,100%{ box-shadow:0 0 0 0 rgba(16,185,129,.6);} 70%{ box-shadow:0 0 0 8px rgba(16,185,129,0);} }
.pulse-dot{ animation: pulseDot 1.6s infinite; }
@keyframes shimmer { 0%{ background-position: -400px 0; } 100%{ background-position: 400px 0; } }
.skeleton{
  background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 40%, #e2e8f0 80%);
  background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius:8px;
}
.dark .skeleton{ background: linear-gradient(90deg, #1f2937 0%, #263141 40%, #1f2937 80%); background-size:800px 100%; }

/* Typing dots */
.typing span{ display:inline-block; width:6px; height:6px; margin-right:3px; border-radius:50%; background:var(--brand-500); animation: typing 1s infinite; }
.typing span:nth-child(2){ animation-delay:.2s; } .typing span:nth-child(3){ animation-delay:.4s; }
@keyframes typing { 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }

/* Modal */
.modal-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter: blur(4px); z-index:60; display:none; align-items:center; justify-content:center; padding:1rem; }
.modal-backdrop.open{ display:flex; }
.modal-panel{ background:var(--surface); border:1px solid var(--border); border-radius:16px; max-width:560px; width:100%; padding:1.5rem; box-shadow:0 30px 60px -20px rgba(15,23,42,.4); animation: fadeUp .25s ease both; }

/* Toast */
#toast-container{ position:fixed; top:1rem; right:1rem; z-index:80; display:flex; flex-direction:column; gap:.5rem; }
.toast{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--brand-500); border-radius:10px; padding:.7rem 1rem; box-shadow:0 12px 28px -12px rgba(15,23,42,.25); min-width:260px; animation: fadeUp .25s ease both; }
.toast.error{ border-left-color:#ef4444; } .toast.warn{ border-left-color:#f59e0b; } .toast.info{ border-left-color:#3b82f6; }

/* Chat bubbles */
.bubble{ max-width: 78%; padding:.55rem .8rem; border-radius:14px; font-size:.9rem; line-height:1.35; position:relative; word-wrap:break-word; }
.bubble.in{ background:var(--surface); border:1px solid var(--border); border-top-left-radius:4px; align-self:flex-start; }
.bubble.out{ background:#dcfce7; color:#065f46; border-top-right-radius:4px; align-self:flex-end; }
.dark .bubble.out{ background:#064e3b; color:#a7f3d0; }
.bubble .time{ display:block; font-size:.65rem; opacity:.6; margin-top:.15rem; text-align:right; }

/* Chat pattern */
.chat-bg{
  background-color:#e5ded8;
  background-image: radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: 18px 18px;
}
.dark .chat-bg{ background-color:#0b1220; background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px); }

/* Tables */
.tbl{ width:100%; border-collapse:separate; border-spacing:0; }
.tbl th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:600; padding:.7rem .9rem; border-bottom:1px solid var(--border); background:var(--surface-2); }
.tbl td{ padding:.85rem .9rem; border-bottom:1px solid var(--border); font-size:.88rem; }
.tbl tr:hover td{ background:var(--surface-2); }

/* Utility text */
.text-muted{ color:var(--text-muted); }
.h-divider{ height:1px; background:var(--border); margin:1rem 0; }

/* Sidebar collapsed */
.sidebar-collapsed .sidebar-label{ display:none; }
.sidebar-collapsed #sidebar{ width:72px; }
.sidebar-collapsed #sidebar .sidebar-link{ justify-content:center; }

/* Kanban */
.kanban-col{ background:var(--surface-2); border:1px dashed var(--border); border-radius:12px; padding:.6rem; min-height:200px; }
.kanban-card{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.7rem; margin-bottom:.5rem; cursor:grab; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.kanban-card:active{ cursor:grabbing; }

/* Workflow blocks */
.wf-block{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:.7rem 1rem; box-shadow:0 4px 12px -6px rgba(15,23,42,.15); min-width:200px; cursor:grab; user-select:none; position:absolute; }
.wf-line{ position:absolute; height:2px; background:linear-gradient(90deg,var(--brand-500), var(--accent-500)); transform-origin: 0 50%; z-index:0; }

/* Progress */
.progress{ height:6px; background:var(--surface-3); border-radius:999px; overflow:hidden; }
.progress > span{ display:block; height:100%; background:linear-gradient(90deg,var(--brand-500),var(--accent-500)); border-radius:999px; }

/* Focus ring */
button:focus-visible, a:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; border-radius:8px; }

/* Command palette */
#cmdk{ position:fixed; inset:0; z-index:90; display:none; align-items:flex-start; justify-content:center; padding:6rem 1rem 1rem; background:rgba(15,23,42,.5); backdrop-filter:blur(6px); }
#cmdk.open{ display:flex; }
#cmdk .panel{ width:100%; max-width:640px; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,.4); }
#cmdk input{ width:100%; padding:1rem 1.2rem; border:none; outline:none; font-size:1rem; background:transparent; color:var(--text); border-bottom:1px solid var(--border); }
#cmdk .item{ padding:.7rem 1.2rem; display:flex; align-items:center; gap:.7rem; cursor:pointer; font-size:.9rem; }
#cmdk .item:hover, #cmdk .item.active{ background:var(--surface-3); }

/* Mobile bottom nav */
.mobile-nav{ position:fixed; bottom:0; left:0; right:0; background:var(--surface); border-top:1px solid var(--border); display:none; justify-content:space-around; padding:.5rem; z-index:40; }
@media (max-width: 768px){
  .mobile-nav{ display:flex; }
  #sidebar{ display:none; }
  .hide-mobile{ display:none !important; }
}
.mobile-nav a{ display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.35rem .6rem; color:var(--text-muted); font-size:.65rem; }
.mobile-nav a.active{ color:var(--brand-600); }

/* Toggle switch */
.switch{ position:relative; display:inline-block; width:40px; height:22px; }
.switch input{ display:none; }
.switch .slider{ position:absolute; inset:0; background:#cbd5e1; border-radius:999px; transition:.2s; cursor:pointer; }
.switch .slider::before{ content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:white; border-radius:50%; transition:.2s; }
.switch input:checked + .slider{ background:var(--brand-500); }
.switch input:checked + .slider::before{ transform: translateX(18px); }

/* Auth pages */
.auth-shell{
  min-height:100vh;
  background: radial-gradient(1000px 500px at 10% -10%, rgba(16,185,129,.25), transparent 60%),
              radial-gradient(800px 400px at 110% 110%, rgba(99,102,241,.25), transparent 60%),
              var(--surface-2);
  display:flex; align-items:center; justify-content:center; padding:2rem;
}
.auth-card{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:2.25rem; width:100%; max-width:440px; box-shadow:0 40px 80px -20px rgba(15,23,42,.25); }