/* ============================================
   AI Lead CRM — Colorful SaaS theme
   Palette is drawn from the lead journey itself:
   cold (indigo) -> warming (magenta) -> hot (orange)
   ============================================ */

:root{
  --cold:#4F46E5;
  --warm:#C026D3;
  --hot:#F97316;
  --gradient:linear-gradient(135deg, var(--cold) 0%, var(--warm) 55%, var(--hot) 100%);
  --sidebar-gradient:linear-gradient(180deg, #1A1030 0%, #2B1655 55%, #3C1361 100%);

  --bg:#F6F5FB;
  --panel:#FFFFFF;
  --ink:#17132A;
  --muted:#6B6880;
  --border:#EAE7F5;

  --success-bg:#DCFCE7; --success-ink:#15803D;
  --danger:#DC2626; --danger-bg:#FEE2E2; --danger-ink:#991B1B;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:'Inter','Noto Sans Tamil',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.5;
}

h1,h2,h3{
  font-family:'Plus Jakarta Sans','Noto Sans Tamil','Inter',sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
}

a{color:inherit;text-decoration:none}
::selection{background:var(--warm);color:#fff}
:focus-visible{outline:2px solid var(--warm);outline-offset:2px}

/* Layout */
.app-shell{display:flex;min-height:100vh}

.sidebar{
  width:250px;
  background:var(--sidebar-gradient);
  color:#fff;
  padding:28px 18px;
  position:fixed;
  inset:0 auto 0 0;
  display:flex;
  flex-direction:column;
}
.brand{
  font-size:21px;
  font-weight:800;
  margin-bottom:30px;
  padding:0 10px;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.nav{display:flex;flex-direction:column;gap:4px;flex:1}
.nav a,.muted-menu{
  display:block;
  padding:12px 14px;
  border-radius:10px;
  font-weight:600;
  color:rgba(255,255,255,.82);
  transition:background .15s ease,color .15s ease;
}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.muted-menu{font-size:12px;font-weight:500;opacity:.5;padding-top:18px}
.logout-link{
  padding:12px 14px;
  border-radius:10px;
  font-weight:600;
  color:rgba(255,255,255,.7);
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:12px;
  padding-top:16px;
}
.logout-link:hover{color:#fff}

.main{margin-left:250px;width:calc(100% - 250px)}
.topbar{
  background:var(--panel);
  border-bottom:1px solid var(--border);
  padding:16px 28px;
  display:flex;
  justify-content:flex-end;
}
.badge,.status{
  font-size:12px;
  font-weight:700;
  padding:5px 11px;
  border-radius:999px;
  background:#EEF0FF;
  color:var(--cold);
  margin-left:8px;
  display:inline-block;
}

/* Flash messages */
.flash{margin:20px 28px 0;padding:13px 16px;border-radius:12px;font-weight:600;font-size:14px}
.flash-success{background:var(--success-bg);color:var(--success-ink)}
.flash-error{background:var(--danger-bg);color:var(--danger-ink)}

/* Page head */
.page-head{display:flex;justify-content:space-between;align-items:center;padding:28px;gap:16px;flex-wrap:wrap}
.page-head h1{margin:0 0 6px;font-size:26px;display:flex;align-items:center;gap:10px}
.page-head p{margin:0;color:var(--muted)}
.head-actions{display:flex;gap:10px}

/* Buttons */
.btn,button{
  background:var(--gradient);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:12px 18px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  display:inline-block;
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;
  box-shadow:0 6px 16px -6px rgba(192,38,212,.45);
}
.btn:hover,button:hover{transform:translateY(-1px);box-shadow:0 10px 20px -6px rgba(192,38,212,.55)}
.btn:active,button:active{transform:translateY(0)}
.btn:disabled,button:disabled{opacity:.65;cursor:wait;transform:none;box-shadow:none}
.secondary{background:#F1EFFA;color:var(--ink);box-shadow:none}
.secondary:hover{background:#E7E3F7;box-shadow:none;transform:none}
.danger{background:linear-gradient(135deg,#F87171,var(--danger));box-shadow:0 6px 16px -6px rgba(220,38,38,.45)}
.sm{padding:8px 12px;font-size:12.5px;border-radius:8px}

/* Cards & panels */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 28px 20px}
.card,.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  box-shadow:0 4px 20px rgba(23,19,42,.05);
  position:relative;
  overflow:hidden;
}
.card::before,.panel::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient)}
.card span,.mini-grid span{display:block;color:var(--muted);font-size:12.5px;margin-bottom:8px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.card strong{font-size:26px}
.panel{margin:0 28px 20px}
.panel-head{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}

.bar{height:6px;background:#EEECF7;border-radius:999px;margin-top:12px;overflow:hidden}
.bar-fill{height:100%;background:var(--gradient);border-radius:999px}

.summary-box{background:#FAF9FE;border:1px solid var(--border);padding:14px 16px;border-radius:12px;line-height:1.6;white-space:pre-line}
.copy-btn{margin-top:10px;background:#312E45;box-shadow:none}

/* Filters & forms */
.filters{display:flex;gap:10px;padding:0 28px 18px}
.filters input,.filters select,input,select,textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  font-family:inherit;
  font-size:14px;
  color:var(--ink);
  transition:border-color .12s ease,box-shadow .12s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--warm);
  box-shadow:0 0 0 3px rgba(192,38,212,.14);
}
.filters button{padding:11px 18px}

/* Table */
.table-wrap{margin:0 28px;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:auto}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--border);white-space:nowrap}
th{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;background:#FBFAFE}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:#FBF9FF}
tbody tr:last-child td{border-bottom:0}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid label{display:block;margin-bottom:7px;font-size:13px;font-weight:700;color:var(--ink)}
.full{grid-column:1/-1}

.danger-zone{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-color:#FBD5D5;background:#FFF7F7}
.danger-zone::before{background:linear-gradient(135deg,#F87171,var(--danger))}
.danger-zone h2{margin:0 0 4px;font-size:16px;color:var(--danger-ink)}
.danger-zone p{margin:0;color:#B91C1C;font-size:13px;max-width:46ch}

/* Recordings */
.recording audio{max-width:300px;height:38px}
.rec-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rec-actions form{margin:0}

.row-actions{display:flex;align-items:center;gap:8px}
.row-actions form{margin:0}

.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.mini-grid>div{background:#FAF9FE;border:1px solid var(--border);padding:13px;border-radius:12px}

.signal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.signal-box{border-radius:12px;padding:14px 16px;border:1px solid var(--border)}
.signal-box h4{margin:0 0 8px;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em}
.signal-box ul{margin:0;padding-left:18px;line-height:1.6}
.signal-box li{margin-bottom:4px}
.signal-objection{background:#FFF3F0;border-color:#FBD9CE}
.signal-objection h4{color:#C2410C}
.signal-positive{background:#F0FDF4;border-color:#BBF0CC}
.signal-positive h4{color:#15803D}

.alert{background:var(--danger-bg);color:var(--danger-ink);padding:11px 14px;border-radius:10px;margin:10px 0;font-weight:600;font-size:13.5px}

/* Status badges — colour keyed to lead temperature */
.status-new{background:#EEF0FF;color:#4338CA}
.status-hot{background:#FFEDE3;color:#C2410C}
.status-warm{background:#FCE7F6;color:#A21CAF}
.status-cold{background:#E7ECFF;color:#3730A3}
.status-follow-up{background:#FEF3C7;color:#92400E}
.status-won{background:#DCFCE7;color:#15803D}
.status-lost{background:#F1F1F6;color:#6B6880}
.status-pending{background:#F1F1F6;color:#6B6880}
.status-processing{background:#E0E7FF;color:#4338CA}
.status-completed{background:#DCFCE7;color:#15803D}
.status-failed{background:#FEE2E2;color:#991B1B}
.status-none{background:#F1F1F6;color:#6B6880}

/* Login */
.login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:var(--sidebar-gradient);
  background-image:var(--sidebar-gradient),radial-gradient(circle at 15% 15%,rgba(249,115,22,.35),transparent 45%),radial-gradient(circle at 85% 85%,rgba(79,70,229,.4),transparent 45%);
  padding:20px;
}
.login-card{
  width:min(420px,92vw);
  background:#fff;
  border-radius:20px;
  padding:36px 32px;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.brand-mark{
  margin:0 0 4px;
  font-size:26px;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.login-card input{margin:7px 0 16px}
.login-card button{width:100%}
.login-card p{color:var(--muted);margin:0 0 20px}

/* Responsive */
@media(max-width:900px){
  .sidebar{width:78px;padding:24px 10px}
  .brand{font-size:0;margin-bottom:26px;text-align:center}
  .brand:after{content:'AI';font-size:19px}
  .nav a{font-size:0;text-align:center;padding:12px 0}
  .nav a:before{content:'•';font-size:22px}
  .muted-menu{display:none}
  .logout-link{font-size:0;text-align:center}
  .logout-link:before{content:'⏻';font-size:18px}
  .main{margin-left:78px;width:calc(100% - 78px)}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .page-head,.panel,.cards,.filters,.table-wrap{margin-left:14px;margin-right:14px}
  .page-head{padding:20px 14px}
  .cards{padding:0 0 16px;grid-template-columns:1fr}
  .filters{padding:0 14px 14px;flex-direction:column}
  .form-grid{grid-template-columns:1fr}
  .panel-head{align-items:flex-start;flex-direction:column}
  .recording audio{width:100%;max-width:none}
  .mini-grid{grid-template-columns:1fr}
  .signal-grid{grid-template-columns:1fr}
  .sidebar{display:none}
  .main{margin:0;width:100%}
  .danger-zone{flex-direction:column;align-items:flex-start}
}