:root{
  --bg: #F4F3FB;
  --ink: #231F52;
  --ink-soft: #5E5C80;
  --line: #E3E1F3;
  --card: #FFFFFF;
  --teal: #1BAAB2;
  --teal-dark: #231F52;
  --amber: #F2AB1F;
  --green: #2E8B57;
  --red: #B0453D;
  --blue: #4B63B8;
  --purple: #6B60AC;

  --call: #4B63B8;
  --email: #1BAAB2;
  --linkedin: #3F55A8;
  --social: #6B60AC;
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

.shell{ display:flex; min-height:100vh; }

/* ---------- Sidebar ---------- */
.sidebar{
  width: 236px;
  flex-shrink: 0;
  background: var(--teal-dark);
  color: #EEECF8;
  display:flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand{ display:flex; align-items:center; gap:10px; padding: 4px 6px 22px; }
.brand-logo{ height:38px; width:auto; flex-shrink:0; }
.brand-mark{
  width:36px; height:36px; border-radius:9px;
  background: linear-gradient(135deg, #1BAAB2, #231F52);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; letter-spacing: 0.5px;
  color:#fff;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-text strong{ font-size:16px; color:#FFFFFF; font-weight:700; }
.brand-text span{ font-size:11px; color:#8FCFD3; }

.nav{ display:flex; flex-direction:column; gap:2px; margin-top: 8px; }
.nav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px;
  font-size:13.5px; color:#BFE6E8;
  transition: background .15s ease;
}
.nav a:hover{ background: rgba(255,255,255,0.06); }
.nav a.active{ background: rgba(255,255,255,0.14); color:#fff; font-weight:600; }

.nav-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; background:#5FCAD1; }

.sidebar-foot{ margin-top:auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); display:flex; flex-direction:column; gap:10px; }
.sidebar-account{ color:#CFE7E2; font-size:12.5px; font-weight:600; text-decoration:none; }
.sidebar-account:hover{ color:#fff; }
.sidebar-logout{ align-self:flex-start; color:#EEECF8 !important; border-color:rgba(255,255,255,0.35) !important; background:rgba(255,255,255,0.06) !important; }
.sidebar-logout:hover{ color:#231F52 !important; background:#F1EFFA !important; border-color:#F1EFFA !important; }
.legend{ display:flex; flex-direction:column; gap:8px; font-size:11.5px; color:#B9D9D4; }
.legend span{ display:flex; align-items:center; gap:8px; }
.chip{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.chip-call{ background: var(--call); }
.chip-email{ background: var(--email); }
.chip-linkedin{ background: var(--linkedin); }
.chip-social{ background: var(--social); }

/* ---------- Main ---------- */
.main{ flex:1; padding: 28px 34px; max-width: 1180px; }

.page-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
.page-head h1{ font-size:22px; margin:0 0 4px; letter-spacing:-0.2px; }
.page-head p{ margin:0; color:var(--ink-soft); font-size:13px; }
.page-actions{ display:flex; gap:10px; }

.btn{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--teal); color:#fff; border:none;
  padding: 9px 16px; border-radius: 8px; font-size:13.5px; font-weight:600;
  cursor:pointer;
}
.btn:hover{ background: var(--teal-dark); }
.btn.ghost{ background: transparent; color:var(--teal-dark); border:1px solid var(--line); }
.btn.ghost:hover{ background:#F1EFFA; }
.btn.danger{ background: transparent; color: var(--red); border:1px solid #ECD3D0; }
.btn.danger:hover{ background:#FBEEEC; }
.btn.small{ padding:6px 11px; font-size:12.5px; }

/* ---------- Cards / grid ---------- */
.grid{ display:grid; gap:16px; }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: 1.3fr 1fr; }

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}
.card h3{ margin:0 0 12px; font-size:13.5px; color: var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }

.stat-card .stat-num{ font-size: 30px; font-weight:700; letter-spacing:-0.5px; }
.stat-card .stat-label{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.stat-card{ border-top: 3px solid var(--teal); }

.settings-card{ display:block; text-decoration:none; transition: box-shadow .15s ease, transform .15s ease; }
.settings-card:hover{ box-shadow: 0 4px 14px rgba(0,0,0,0.08); transform: translateY(-1px); }
.settings-card p{ font-size:13px; color:var(--ink-soft); margin: 0 0 14px; }
.settings-card-cta{ font-size:12.5px; font-weight:600; color:var(--teal-dark); }

.type-checkbox-group{ display:flex; flex-wrap:wrap; gap:8px 16px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.type-checkbox{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:400; text-transform:none; color:var(--ink); }
.type-checkbox input{ width:auto; }
.stat-card.call{ border-top-color: var(--call); }
.stat-card.email{ border-top-color: var(--email); }
.stat-card.linkedin{ border-top-color: var(--linkedin); }
.stat-card.social{ border-top-color: var(--social); }

/* ---------- Tables ---------- */
table{ width:100%; border-collapse: collapse; font-size:13.5px; }
th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:0.4px; color:var(--ink-soft); padding:8px 10px; border-bottom:1px solid var(--line); }
td{ padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
tr:hover td{ background:#FAF9FE; }

.badge{ display:inline-block; padding:3px 10px; border-radius: 20px; font-size:11.5px; font-weight:600; }
.badge-new{ background:#E6EEF7; color:var(--blue); }
.badge-contacted{ background:#E6F6F7; color:var(--teal-dark); }
.badge-followup{ background:#FBF0DF; color:var(--amber); }
.badge-qualified{ background:#EDE7F5; color:var(--purple); }
.badge-proposalsent{ background:#FDE9D8; color:#B15A1F; }
.badge-won{ background:#E5F3E9; color:var(--green); }
.badge-lost{ background:#FAE6E4; color:var(--red); }

.tag{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; }
.tag i{ width:8px; height:8px; border-radius:3px; display:inline-block; }
.tag.call i{ background:var(--call); }
.tag.email i{ background:var(--email); }
.tag.linkedin i{ background:var(--linkedin); }
.tag.social i{ background:var(--social); }

/* ---------- Forms ---------- */
form.inline-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field label{ font-size:11.5px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
input, select, textarea{
  font-family: inherit; font-size: 13.5px;
  padding: 9px 11px; border-radius:8px; border:1px solid var(--line);
  background:#fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus{ outline: 2px solid var(--teal); outline-offset: 1px; }
textarea{ resize: vertical; min-height:60px; }

.form-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.form-grid .full{ grid-column: 1 / -1; }

/* ---------- Feed ---------- */
.feed{ display:flex; flex-direction:column; gap:2px; }
.feed-item{
  display:flex; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line);
}
.feed-item:last-child{ border-bottom:none; }
.feed-dot{ width:10px; height:10px; border-radius:3px; margin-top:5px; flex-shrink:0; }
.feed-body{ flex:1; }
.feed-title{ font-size:13.5px; font-weight:600; }
.feed-meta{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.feed-notes{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
.feed-time{ font-size:11.5px; color:#8AA0A6; white-space:nowrap; }

.empty{ text-align:center; padding:40px 20px; color:var(--ink-soft); }
.empty strong{ display:block; color:var(--ink); margin-bottom:6px; font-size:15px;}

/* ---------- Bars (no-CDN charts) ---------- */
.bar-row{ display:grid; grid-template-columns: 130px 1fr 40px; gap:10px; align-items:center; margin-bottom:10px; font-size:12.5px;}
.bar-track{ background:#EEF3F3; border-radius:6px; height:10px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:6px; }

.filters{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.filters select{ min-width:150px; }

.pill-nav{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.pill-nav a{ padding:6px 13px; border-radius:20px; font-size:12.5px; border:1px solid var(--line); }
.pill-nav a.active{ background:var(--teal); color:#fff; border-color:var(--teal); }

.subnav{ display:flex; gap:6px; margin-bottom:20px; }
.subnav a{ padding:7px 14px; border-radius:8px; font-size:13px; font-weight:600; color:var(--ink-soft); }
.subnav a.active{ background:var(--teal-dark); color:#fff; }

.live-dot{ width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; margin-right:6px; animation: pulse 2s infinite; }
@keyframes pulse{ 0%{ opacity:1; } 50%{ opacity:0.3; } 100%{ opacity:1; } }
.live-tag{ font-size:11.5px; color:var(--ink-soft); display:flex; align-items:center; }

@media (max-width: 900px){
  .shell{ flex-direction: column; }
  .sidebar{ width:100%; flex-direction:row; align-items:center; padding:12px 16px; flex-wrap:wrap; position:static; height:auto; overflow-y:visible; }
  .nav{ flex-direction:row; flex-wrap:wrap; }
  .sidebar-foot{ display:flex; flex-direction:row; align-items:center; gap:10px; margin-top:0; margin-left:auto; padding-top:0; border-top:none; }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .main{ padding:20px; }
}

/* ---- Code Care MB brand polish ---- */
body{ font-family: Roboto, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
h1,h2,h3,.brand strong{ font-family: Montserrat, Roboto, sans-serif; }
.btn{ background: var(--amber); color: var(--teal-dark); font-weight:700; border-radius: 50px; }
.btn:hover{ background: var(--teal); color:#fff; }
.btn.ghost{ background: transparent; color: var(--teal-dark); }
.btn.ghost:hover{ background:#F1EFFA; color: var(--teal-dark); }
.sidebar{ background: linear-gradient(180deg,#231F52,#17133A); }
.brand-logo{ background:#fff; border-radius:10px; padding:4px; }
.login-bg{ background: radial-gradient(circle at 80% 10%, rgba(107,96,172,.55), transparent 55%), linear-gradient(135deg,#17133A,#231F52 60%,#3B2F86); }
.brandbar{ height:5px; background: linear-gradient(90deg,#1BAAB2,#F2AB1F,#6B60AC); }