/* ============================================
   ATLAS SkillTech CRM — Design System
   Slate (#1e293b) + Emerald (#10b981) + Clean White
   ============================================ */

:root {
  --navy: #1e293b;
  --navy-light: #334155;
  --navy-lighter: #475569;
  --lime: #10b981;
  --lime-light: #34d399;
  --lime-dark: #059669;
  --bg: #f8fafc;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --danger: #ef4444;
  --danger-bg: #fef2f2;
  --warning: #f59e0b;
  --warning-bg: #fffbeb;
  --success: #22c55e;
  --success-bg: #f0fdf4;
  --info: #3b82f6;
  --info-bg: #eff6ff;
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --transition: 150ms ease;
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

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

.sidebar {
  width: 240px;
  background: var(--navy);
  color: #fff;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 40;
  transition: width var(--transition);
}

.sidebar-logo {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-logo .logo-icon {
  width: 32px; height: 32px;
  background: var(--lime);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--navy);
}
.sidebar-logo h1 { font-size: 14px; font-weight: 700; letter-spacing: -.3px; }
.sidebar-logo small { font-size: 10px; color: rgba(255,255,255,.5); display: block; }
/* Uploaded institute branding — icon fills the rounded square edge to
   edge (no white box / padding); cover crops away surrounding margin. */
.logo-icon.logo-icon--img { background: transparent; padding: 0; overflow: hidden; }
.logo-icon.logo-icon--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.sidebar-logo-full { max-height: 36px; max-width: 168px; object-fit: contain; display: block; }

.sidebar-nav { flex: 1; padding: 12px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
/* Slim, subtle scrollbar so it doesn't sit on top of the menu labels. */
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.32); }
.sidebar-nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.65);
  transition: all var(--transition);
  margin-bottom: 1px;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-nav a.active { background: var(--lime); color: var(--navy); font-weight: 600; }
.sidebar-nav a svg, .sidebar-nav a .nav-icon {
  width: 18px; height: 18px; flex-shrink: 0; opacity: .8;
}
.sidebar-nav a.active svg, .sidebar-nav a.active .nav-icon { opacity: 1; }

/* Collapsible nav group (Dashboard → Dashboard / All Tasks / Reports) */
.nav-group { margin-bottom: 1px; }
.nav-group-btn {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.65);
  background: none; border: 0; cursor: pointer; text-align: left;
  transition: all var(--transition);
}
.nav-group-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-group-btn svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .8; }
.nav-group-btn .nav-caret { margin-left: auto; width: 14px; height: 14px; transition: transform .15s; }
.nav-group.open .nav-group-btn { color: #fff; }
.nav-group.open .nav-group-btn .nav-caret { transform: rotate(90deg); }
.nav-group .nav-sub {
  display: none; margin: 1px 0 5px 18px; padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.12);
}
.nav-group.open .nav-sub { display: block; }
.nav-group .nav-sub a { padding: 6px 10px; font-size: 12.5px; }

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; gap: 8px;
}
.sidebar-footer .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--lime); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  overflow: hidden; flex-shrink: 0;
  text-decoration: none; cursor: pointer;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.sidebar-footer .avatar:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.25); transform: scale(1.04); }
.sidebar-footer .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.sidebar-footer .user-info { flex: 1; min-width: 0; }
.sidebar-footer .user-info p { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer .user-info span { font-size: 11px; color: rgba(255,255,255,.5); text-transform: capitalize; }

.main-content { margin-left: 0; flex: 1; min-width: 0; }

/* ---- Header ---- */
.header {
  height: 52px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  position: sticky; top: 0; z-index: 30;
}

.header-search {
  position: relative; max-width: 400px; flex: 1;
}
.header-search input {
  width: 100%; height: 38px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px; background: var(--bg);
  transition: border-color var(--transition);
}
.header-search input:focus { outline: none; border-color: var(--lime); }
.header-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); }

.header-actions { display: flex; align-items: center; gap: 8px; }
.header-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition); position: relative;
}
.header-btn:hover { background: var(--bg); }
.header-btn svg { width: 18px; height: 18px; color: var(--text-muted); }
.header-btn .badge-dot {
  position: absolute; top: 6px; right: 6px;
  width: 9px; height: 9px; background: #10b981;
  border-radius: 50%; border: 2px solid var(--card);
  /* Unread notifications: a pulsing EMERALD dot so a new notification on the
     bell is prominent (was a static red dot). */
  box-shadow: 0 0 0 0 rgba(16, 185, 129, .55);
  animation: hbBellPulse 2s ease-out infinite;
}
@keyframes hbBellPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ---- Header Left (hamburger + search) ---- */
.header-left {
  display: flex; align-items: center; gap: 12px; flex: 1;
}

/* ---- Hamburger Button ---- */
.hamburger-btn {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition);
  flex-shrink: 0;
  padding: 0;
}
.hamburger-btn:hover { background: var(--bg); }
.hamburger-btn svg { color: var(--text); }
.hamburger-btn .close-icon { display: none; }
.hamburger-btn.active .hamburger-icon { display: none; }
.hamburger-btn.active .close-icon { display: block; }

/* ---- Sidebar Overlay ---- */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 39;
  opacity: 0;
  transition: opacity .3s ease;
}
.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

.page-content { padding: 18px 20px; }

/* ---- Page Header ---- */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.page-header h2 { font-size: 18px; font-weight: 700; }
.page-header p { color: var(--text-muted); font-size: 12px; margin-top: 2px; }

/* ---- Cards ---- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-header h3 { font-size: 14px; font-weight: 600; }
.card-body { padding: 20px; }
.card-footer { padding: 12px 20px; border-top: 1px solid var(--border); }

/* ---- Stat Cards ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { padding: 20px; }
.stat-card .stat-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.stat-card .stat-icon.blue { background: var(--info-bg); color: var(--info); }
.stat-card .stat-icon.green { background: var(--success-bg); color: var(--success); }
.stat-card .stat-icon.orange { background: var(--warning-bg); color: var(--warning); }
.stat-card .stat-icon.red { background: var(--danger-bg); color: var(--danger); }
.stat-card .stat-value { font-size: 22px; font-weight: 700; line-height: 1.2; }
.stat-card .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  padding: 8px 12px; text-align: left;
  font-size: 11px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
tbody td {
  padding: 8px 12px; font-size: 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: #f1f5f9; }
tbody tr:last-child td { border-bottom: none; }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.5;
  white-space: nowrap;
}
.badge-primary { background: var(--navy); color: #fff; }
.badge-lime { background: var(--lime); color: #fff; }
.badge-success { background: var(--success-bg); color: #15803d; }
.badge-warning { background: var(--warning-bg); color: #92400e; }
.badge-danger { background: var(--danger-bg); color: #b91c1c; }
.badge-info { background: var(--info-bg); color: #1d4ed8; }
.badge-secondary { background: #f1f5f9; color: var(--text-muted); }
.badge-hot { background: #fef2f2; color: #dc2626; }
.badge-warm { background: #fff7ed; color: #ea580c; }
.badge-cold { background: #eff6ff; color: #2563eb; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  border: none; cursor: pointer;
  transition: all var(--transition);
  text-decoration: none; line-height: 1.4;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-light); }
.btn-lime { background: var(--lime); color: #fff; }
.btn-lime:hover { background: var(--lime-dark); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { background: var(--bg); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #dc2626; }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Forms ---- */
.form-group { margin-bottom: 12px; }
.form-group label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text); margin-bottom: 4px;
}
.form-control {
  width: 100%; height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px; background: var(--card);
  transition: border-color var(--transition);
}
.form-control:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
textarea.form-control { height: auto; padding: 8px 10px; min-height: 60px; resize: vertical; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---- Alerts / Flash ---- */
.alert {
  padding: 12px 16px; border-radius: var(--radius);
  font-size: 14px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.alert-success { background: var(--success-bg); color: #15803d; border: 1px solid #bbf7d0; }
.alert-danger { background: var(--danger-bg); color: #b91c1c; border: 1px solid #fecaca; }

/* ---- Funnel ---- */
.funnel-bar { margin-bottom: 12px; }
.funnel-bar .funnel-label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.funnel-bar .funnel-label span { color: var(--text-muted); }
.funnel-track { height: 32px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.funnel-fill { height: 100%; border-radius: 6px; transition: width .6s ease; min-width: 2%; }

/* ---- Activity Timeline ---- */
.timeline { position: relative; padding-left: 24px; }
.timeline::before { content:''; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.timeline-item { position: relative; margin-bottom: 20px; }
.timeline-item::before {
  content:''; position: absolute; left: -24px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--lime);
}
.timeline-item .time { font-size: 11px; color: var(--text-light); }
.timeline-item .desc { font-size: 13px; margin-top: 2px; }

/* ---- Tabs ---- */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.tab-btn {
  padding: 10px 20px; font-size: 14px; font-weight: 500;
  color: var(--text-muted); background: none; border: none;
  cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: all var(--transition);
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--lime-dark); border-bottom-color: var(--lime); font-weight: 600; }

/* ---- Grid helpers ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

/* ---- Detail Section ---- */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-item label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.detail-item p { font-size: 13px; margin-top: 2px; }

/* ============================================
   Lead Detail — Redesigned Layout
   ============================================ */
.ld-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ld-page-title { display: flex; align-items: center; gap: 10px; }
.ld-page-title h2 { font-size: 15px; font-weight: 700; margin: 0; color: #1e293b; }
.ld-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: #475569; text-decoration: none; padding: 5px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; }
.ld-back:hover { background: #f1f5f9; color: #1e293b; }
.ld-back svg { width: 15px; height: 15px; }
.ld-page-sep { color: #cbd5e1; font-size: 14px; }
.ld-nav { display: inline-flex; gap: 6px; margin-left: 4px; }
/* Prev / Next lead arrows share the emerald pill look of the "Next in Queue"
   button (.ld-qa-nextq) — green outline + tint at rest, filled green on hover
   — so the card's two navigation affordances read as one family. */
.ld-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  color: #059669; text-decoration: none; border: 1px solid #10b98155; border-radius: 8px; background: #ecfdf5; transition: all .15s; }
.ld-nav-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.ld-nav-btn.disabled { opacity: .4; pointer-events: none; }
html[data-theme="dark"] .ld-nav-btn { color: #34d399; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.4); }
html[data-theme="dark"] .ld-nav-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.ld-nav-arrows { display: flex; gap: 4px; }

.ld-layout { display: flex; gap: 24px; align-items: flex-start; }
.ld-sidebar { width: 264px; min-width: 264px; display: flex; flex-direction: column; gap: 0; }
.ld-content { flex: 1; min-width: 0; }

/* ── Searchable single-select (js/searchable-select.js) ──────────────────
   Enhances a native <select>: the select is visually hidden and replaced by
   a click-to-open combobox with a type-to-filter box. Applied GLOBALLY to
   every single-select with more than 4 options (opt out with `data-no-search`);
   the native select stays in the DOM as the value store + change source. */
.ss-wrap { position: relative; }
.ss-native { display: none !important; }
.ss-control { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; background: #fff; font-family: inherit; }
.ss-control .ss-control-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-control .ss-control-text.ss-placeholder { color: #94a3b8; }
.ss-control .ss-caret { flex: 0 0 auto; color: #94a3b8; transition: transform .15s; }
.ss-wrap.open .ss-control .ss-caret { transform: rotate(180deg); }
.ss-wrap.open .ss-control { border-color: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.15); }
.ss-panel { display: none; position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 12px 30px rgba(15,23,42,.14); overflow: hidden; }
.ss-wrap.open .ss-panel { display: block; }
.ss-search-wrap { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #eef2f7; color: #94a3b8; }
.ss-search { flex: 1; border: none; outline: none; font-size: 13px; color: #1e293b; background: transparent; font-family: inherit; }
.ss-list { max-height: 240px; overflow-y: auto; padding: 4px; }
.ss-opt { padding: 7px 10px; font-size: 13px; color: #334155; border-radius: 6px; cursor: pointer; }
.ss-opt:hover, .ss-opt.active { background: #ecfdf5; color: #065f46; }
.ss-opt.selected { font-weight: 700; color: #059669; }
.ss-empty { padding: 10px; font-size: 12.5px; color: #94a3b8; text-align: center; }
html[data-theme="dark"] .ss-control, html[data-theme="dark"] .ss-panel { background: var(--card); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .ss-search { color: var(--text); }
html[data-theme="dark"] .ss-search-wrap { border-bottom-color: var(--border); }
html[data-theme="dark"] .ss-opt { color: var(--text); }
html[data-theme="dark"] .ss-opt:hover, html[data-theme="dark"] .ss-opt.active { background: rgba(16,185,129,.14); color: #a7f3d0; }
html[data-theme="dark"] .ss-opt.selected { color: #34d399; }

/* Collapsible left panel — hide/unhide toggle on the Lead Card.
   The collapse button lives at the top-right of the profile card; when
   hidden, a slim vertical "reveal" tab takes the sidebar's place so the
   panel can be brought back. State persists via localStorage. */
.ld-sidebar-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 7px;
  border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b;
  cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s, border-color .15s;
}
.ld-sidebar-toggle:hover { background: #ecfdf5; color: #10b981; border-color: #10b981; }
.ld-profile-card > .ld-sidebar-toggle { position: absolute; top: 12px; right: 12px; }

.ld-sidebar-reveal {
  display: none; align-items: center; justify-content: center; gap: 8px;
  align-self: stretch; min-height: 120px; width: 34px; padding: 12px 0;
  border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
  color: #10b981; cursor: pointer; flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.ld-sidebar-reveal:hover { background: #ecfdf5; border-color: #10b981; }
.ld-layout.ld-sidebar-hidden .ld-sidebar { display: none; }
.ld-layout.ld-sidebar-hidden .ld-sidebar-reveal { display: flex; }

.ld-profile-card { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px 16px 14px; margin-bottom: 12px; }
.ld-profile-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ld-avatar { width: 34px; height: 34px; border-radius: 50%; background: #dbeafe; color: #3b82f6; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.ld-profile-name { font-size: 13px; font-weight: 700; margin: 0; }
.ld-profile-stage { font-size: 11px; color: #64748b; margin: 1px 0 0; }
.ld-stage-label { color: #22c55e; font-weight: 600; }
.ld-contact-row { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9; }
.ld-contact-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #334155; }
.ld-contact-item svg { color: #64748b; flex-shrink: 0; }
.ld-score-row { display: flex; align-items: center; justify-content: space-around; padding-top: 6px; }
.ld-score-item { text-align: center; }
.ld-score-icon { margin-bottom: 3px; }
.ld-score-value { font-size: 16px; font-weight: 700; color: #1e293b; line-height: 1.1; }
.ld-score-label { font-size: 10px; color: #94a3b8; font-weight: 500; }
/* Engagement & Score — expanded by default, header toggles it closed. Kept
   compact: tight header padding + snug score row. */
.ld-engage { margin-top: 8px; border-top: 1px solid #f1f5f9; }
.ld-engage-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; background: none; border: 0; cursor: pointer; padding: 6px 0 2px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: #64748b; }
.ld-engage-meta { display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #94a3b8; }
.ld-engage-chev { transition: transform .18s; }
.ld-engage.open .ld-engage-chev { transform: rotate(180deg); }
.ld-engage-body { display: none; }
.ld-engage.open .ld-engage-body { display: block; }

/* Communication Status — compact tally chips shown high on the Lead Card,
   between the quick actions and the Engagement & Score panel. */
.ld-commstat { margin-top: 10px; }
.ld-commstat-title { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: #94a3b8; margin-bottom: 5px; }
/* Two chips per row so the label + count never crowd each other. */
.ld-commstat-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ld-commstat-chip { display: flex; align-items: center; gap: 5px; min-width: 0;
  padding: 5px 8px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc;
  font-size: 11px; font-weight: 600; color: #64748b; }
.ld-commstat-chip svg { flex: 0 0 auto; }
.ld-commstat-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Count sits hard against the right edge, clear of the label. */
.ld-commstat-chip b { color: #1e293b; font-weight: 700; margin-left: auto; padding-left: 6px; flex: 0 0 auto; }
/* Per-channel colour: tinted chip + brand-coloured icon. */
.ld-cs-email { background: #eff6ff; border-color: #bfdbfe; }
.ld-cs-email svg { color: #2563eb; }
.ld-cs-sms { background: #f5f3ff; border-color: #ddd6fe; }
.ld-cs-sms svg { color: #7c3aed; }
.ld-cs-wa { background: #f0fdf4; border-color: #bbf7d0; }
.ld-cs-wa svg { color: #16a34a; }
.ld-cs-call { background: #f0fdfa; border-color: #99f6e4; }
.ld-cs-call svg { color: #0d9488; }

.ld-sidebar-section { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.ld-section-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; cursor: pointer; }
.ld-section-header h4 { font-size: 12px; font-weight: 600; margin: 0; color: #1e293b; }
.ld-section-header svg { transition: transform .2s; color: #64748b; }
.ld-section-collapsed svg { transform: rotate(-90deg); }
.ld-section-body { padding: 0 14px 10px; }
.ld-hidden { display: none !important; }
.ld-detail-row { display: flex; flex-direction: column; margin-bottom: 7px; }
.ld-detail-row:last-child { margin-bottom: 0; }
.ld-detail-label { font-size: 9.5px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.ld-detail-value { font-size: 12px; color: #1e293b; font-weight: 500; margin-top: 1px; word-break: break-word; }

/* Journey panels (Lead Journey + Application Journey) hug their steps —
   the width follows however many values the journey masters define instead
   of stretching edge-to-edge; max-width + overflow keep long masters usable. */
.ld-status-bar { display: flex; align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; overflow-x: auto; width: fit-content; max-width: 100%; }
.ld-stage-step { display: flex; align-items: center; white-space: nowrap; }
.ld-stage-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #cbd5e1; background: #fff; flex-shrink: 0; margin-right: 6px; }
.ld-stage-text { font-size: 12px; color: #94a3b8; font-weight: 500; }
.ld-stage-line { width: 40px; height: 2px; background: #e2e8f0; margin: 0 8px; flex-shrink: 0; }
.ld-stage-done .ld-stage-dot { background: #22c55e; border-color: #22c55e; }
.ld-stage-done .ld-stage-text { color: #22c55e; }
.ld-stage-done .ld-stage-line { background: #22c55e; }
.ld-stage-active .ld-stage-dot { background: #f97316; border-color: #f97316; }
.ld-stage-active .ld-stage-text { color: #f97316; font-weight: 600; }

.ld-tabs { display: flex; gap: 0; border-bottom: 2px solid #e2e8f0; margin-bottom: 0; background: #fff; border-radius: 10px 10px 0 0; padding: 0 8px; }
.ld-tab { display: flex; align-items: center; gap: 6px; padding: 12px 16px; font-size: 13px; font-weight: 500; color: #64748b; background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; }
.ld-tab:hover { color: #3b82f6; }
.ld-tab.active { color: #3b82f6; border-bottom-color: #3b82f6; font-weight: 600; }
.ld-tab svg { flex-shrink: 0; }

.ld-tab-content { display: none; background: #fff; border: 1px solid #e2e8f0; border-top: none; border-radius: 0 0 10px 10px; padding: 20px; }
.ld-tab-content.active { display: block; }

.ld-subtabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid #e2e8f0; }
.ld-subtab { padding: 8px 16px; font-size: 13px; font-weight: 500; color: #64748b; background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s; }
.ld-subtab:hover { color: #3b82f6; }
.ld-subtab.active { color: #3b82f6; border-bottom-color: #3b82f6; font-weight: 600; }
.ld-subtab-content { display: none; }
.ld-subtab-content.active { display: block; }

.ld-fields-list { max-width: 700px; }
.ld-field-row { display: flex; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #f8fafc; }
.ld-field-row:last-child { border-bottom: none; }
.ld-field-label { width: 220px; min-width: 220px; font-size: 13px; font-weight: 600; color: #1e293b; }
.ld-field-value { font-size: 13px; color: #475569; }

@media (max-width: 900px) {
  .ld-layout { flex-direction: column; }
  .ld-sidebar { width: 100%; min-width: 0; }
  .ld-status-bar { flex-wrap: wrap; gap: 8px; }
  .ld-stage-line { width: 20px; }
  .ld-tabs { overflow-x: auto; }
  .ld-field-label { width: 160px; min-width: 160px; }
}

/* ---- Timeline ---- */
.tl-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tl-title { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0; }
.tl-filters { display: flex; gap: 10px; align-items: center; }
.tl-filter-wrap { position: relative; }
.tl-filter-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; color: #475569; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.tl-filter-btn:hover { border-color: #3b82f6; color: #3b82f6; }
.tl-dropdown { display: none; position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 100; padding: 8px 0; }
.tl-dropdown.tl-open { display: block; }
.tl-check-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 14px; color: #1e293b; cursor: pointer; transition: background .1s; }
.tl-check-item:hover { background: #f0f4ff; }
.tl-check-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: #3b82f6; cursor: pointer; }
.tl-dropdown-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid #e2e8f0; margin-top: 4px; }
.tl-dropdown-cancel { padding: 6px 16px; font-size: 13px; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; color: #475569; }
.tl-dropdown-cancel:hover { background: #f8fafc; }
.tl-dropdown-ok { padding: 6px 20px; font-size: 13px; background: #3b82f6; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
.tl-dropdown-ok:hover { background: #2563eb; }
.tl-date-dropdown { min-width: 200px; }
.tl-date-option { padding: 9px 16px; font-size: 14px; color: #1e293b; cursor: pointer; transition: background .1s; }
.tl-date-option:hover { background: #f0f4ff; }
.tl-date-option.tl-date-active { background: #3b82f6; color: #fff; }
.tl-custom-range { display: flex; gap: 8px; padding: 8px 12px; }
.tl-custom-range input { font-size: 12px; padding: 4px 8px; }

/* Timeline list */
.tl-list { position: relative; }
.tl-loading { text-align: center; padding: 40px; color: #94a3b8; font-size: 14px; }
.tl-empty { text-align: center; padding: 40px; color: #94a3b8; font-size: 14px; }

/* Timeline entry row */
.tl-entry { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid #f1f5f9; }
.tl-entry:last-child { border-bottom: none; }
.tl-entry-date { min-width: 80px; max-width: 80px; text-align: left; }
.tl-entry-date .tl-date-main { font-size: 13px; font-weight: 600; color: #1e293b; line-height: 1.3; }
.tl-entry-date .tl-date-time { font-size: 11px; color: #94a3b8; }
.tl-entry-icon { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #64748b; margin-top: 2px; }
.tl-entry-icon.tl-icon-email { background: #eff6ff; color: #3b82f6; }
.tl-entry-icon.tl-icon-sms { background: #eff6ff; color: #3b82f6; }
.tl-entry-icon.tl-icon-call { background: #f0fdf4; color: #22c55e; }
.tl-entry-icon.tl-icon-assignment { background: #fef3c7; color: #f59e0b; }
.tl-entry-icon.tl-icon-status { background: #f3e8ff; color: #a855f7; }
.tl-entry-icon.tl-icon-api { background: #f1f5f9; color: #64748b; }
.tl-entry-icon.tl-icon-registration { background: #f1f5f9; color: #64748b; }
.tl-entry-icon.tl-icon-create { background: #ecfdf5; color: #10b981; }
.tl-entry-body { flex: 1; min-width: 0; font-size: 13px; color: #334155; line-height: 1.6; }
.tl-entry-body strong { font-weight: 600; color: #1e293b; }
.tl-entry-body a { color: #3b82f6; text-decoration: none; }
.tl-entry-body a:hover { text-decoration: underline; }
.tl-entry-body .tl-meta { color: #f59e0b; font-size: 12px; }
.tl-entry-body .tl-meta a { color: #f59e0b; }
.tl-entry-score { min-width: 40px; text-align: right; font-size: 13px; font-weight: 700; padding-top: 2px; }
.tl-entry-score.tl-score-pos { color: #3b82f6; }
.tl-entry-score.tl-score-neg { color: #ef4444; }
.tl-entry-score.tl-score-zero { color: #94a3b8; }

.tl-load-more-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 24px; font-size: 13px; font-weight: 600; color: #3b82f6; background: #fff; border: 1px solid #3b82f6; border-radius: 8px; cursor: pointer; transition: all .15s; }
.tl-load-more-btn:hover { background: #eff6ff; }

@media (max-width: 768px) {
  .tl-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tl-entry { flex-wrap: wrap; gap: 8px; }
  .tl-entry-date { min-width: auto; max-width: none; }
}

/* ---- Login ---- */
.login-page {
  min-height: 100vh; display: flex; align-items: stretch;
  background: linear-gradient(-45deg, #1e293b, #0f172a, #134e4a, #1e3a5f, #1e293b);
  background-size: 400% 400%;
  animation: loginGradient 15s ease infinite;
  position: relative; overflow: hidden;
}
@keyframes loginGradient {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

/* Floating orbs */
.login-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.3;
  pointer-events: none;
}
.login-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(16,185,129,0.5), transparent 70%);
  top: -150px; right: -100px;
  animation: orbFloat1 8s ease-in-out infinite;
}
.login-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(59,130,246,0.4), transparent 70%);
  bottom: -120px; left: -80px;
  animation: orbFloat2 10s ease-in-out infinite;
}
.login-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(139,92,246,0.3), transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation: orbFloat3 12s ease-in-out infinite;
}
@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-40px, 30px) scale(1.1); }
  66% { transform: translate(20px, -20px) scale(0.95); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
}
@keyframes orbFloat3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.2); }
}

/* Grid overlay */
.login-grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Floating particles */
.login-particles {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.login-particle {
  position: absolute; width: 4px; height: 4px;
  background: rgba(16,185,129,0.6); border-radius: 50%;
  animation: particleRise linear infinite;
}
.login-particle:nth-child(1) { left: 10%; animation-duration: 12s; animation-delay: 0s; width: 3px; height: 3px; }
.login-particle:nth-child(2) { left: 25%; animation-duration: 15s; animation-delay: 2s; width: 5px; height: 5px; background: rgba(59,130,246,0.5); }
.login-particle:nth-child(3) { left: 40%; animation-duration: 10s; animation-delay: 4s; }
.login-particle:nth-child(4) { left: 55%; animation-duration: 14s; animation-delay: 1s; width: 3px; height: 3px; background: rgba(139,92,246,0.5); }
.login-particle:nth-child(5) { left: 70%; animation-duration: 11s; animation-delay: 3s; width: 5px; height: 5px; }
.login-particle:nth-child(6) { left: 85%; animation-duration: 13s; animation-delay: 5s; width: 3px; height: 3px; background: rgba(59,130,246,0.4); }
.login-particle:nth-child(7) { left: 15%; animation-duration: 16s; animation-delay: 7s; background: rgba(139,92,246,0.4); }
.login-particle:nth-child(8) { left: 60%; animation-duration: 9s; animation-delay: 2s; width: 6px; height: 6px; }
@keyframes particleRise {
  0% { bottom: -10px; opacity: 0; transform: translateX(0); }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { bottom: 105%; opacity: 0; transform: translateX(30px); }
}

/* Split layout */
.login-split {
  display: flex; width: 100%; min-height: 100vh; position: relative; z-index: 10;
}

/* Left showcase panel */
.login-showcase {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 60px 48px; position: relative;
}
.login-showcase-content {
  max-width: 480px; animation: loginSlideRight 0.8s ease-out;
}
@keyframes loginSlideRight {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
.login-showcase-brand {
  display: flex; align-items: center; gap: 10px; margin-bottom: 40px;
}
.login-showcase-logo {
  width: 40px; height: 40px; background: var(--lime); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: white;
  box-shadow: 0 4px 16px rgba(16,185,129,0.35);
}
.login-showcase-brand span {
  font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.9); letter-spacing: -0.3px;
}
.login-showcase-title {
  font-size: 44px; font-weight: 800; color: #fff; line-height: 1.15;
  margin-bottom: 20px; letter-spacing: -1px;
}
.login-showcase-title span { color: var(--lime-light); }
.login-showcase-desc {
  font-size: 16px; color: rgba(255,255,255,0.55); line-height: 1.7;
  margin-bottom: 36px;
}

/* Feature cards */
.login-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.login-feature {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}
.login-feature:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
  transform: translateX(4px);
}
.login-feature-1 { animation: loginFeatureIn 0.6s ease-out 0.3s both; }
.login-feature-2 { animation: loginFeatureIn 0.6s ease-out 0.5s both; }
.login-feature-3 { animation: loginFeatureIn 0.6s ease-out 0.7s both; }
@keyframes loginFeatureIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
.login-feature-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.login-feature strong {
  display: block; font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 1px;
}
.login-feature span {
  font-size: 12px; color: rgba(255,255,255,0.45);
}

/* Stats ticker */
.login-stats-ticker {
  display: flex; align-items: center; gap: 24px;
  padding: 20px 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  animation: loginFeatureIn 0.6s ease-out 0.9s both;
}
.login-ticker-item { text-align: center; flex: 1; }
.login-ticker-value {
  font-size: 26px; font-weight: 800; color: var(--lime-light);
  line-height: 1.2;
}
.login-ticker-value small { font-size: 16px; font-weight: 600; }
.login-ticker-label {
  font-size: 11px; color: rgba(255,255,255,0.4);
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-top: 4px;
}
.login-ticker-divider {
  width: 1px; height: 36px; background: rgba(255,255,255,0.1); flex-shrink: 0;
}

/* Right form side */
.login-form-side {
  width: 480px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(4px);
  border-left: 1px solid rgba(255,255,255,0.06);
}

.login-card {
  width: 100%; max-width: 380px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.1);
  padding: 36px;
  animation: loginCardEntry 0.6s ease-out 0.2s both;
}
@keyframes loginCardEntry {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Card header */
.login-card-header {
  text-align: center; margin-bottom: 28px;
}
.login-card-icon {
  width: 52px; height: 52px; margin: 0 auto 14px;
  background: linear-gradient(135deg, #1e1b5e, #141148);
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: white;
  box-shadow: 0 8px 24px rgba(20,17,72,0.35);
  animation: loginIconPulse 3s ease-in-out infinite;
}
@keyframes loginIconPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(20,17,72,0.35); }
  50% { box-shadow: 0 8px 32px rgba(56,199,239,0.45); }
}
.login-card-logo { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; display: block; }
.login-card-header h1 {
  font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.login-card-header p {
  font-size: 13px; color: var(--text-muted);
}

/* Form inputs */
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-input-group {
  position: relative;
}
.login-input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-light); z-index: 1; display: flex;
  transition: color 0.2s ease;
}
.login-input {
  width: 100%; height: 48px;
  padding: 0 14px 0 44px;
  border: 1.5px solid var(--border);
  border-radius: 12px; font-size: 14px;
  background: var(--bg); color: var(--text);
  font-family: inherit;
  transition: all 0.2s ease;
}
.login-input:focus {
  outline: none; border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
  background: #fff;
}
.login-input:focus ~ .login-input-label {
  opacity: 1; transform: translateY(-28px) scale(0.85);
  color: var(--lime-dark);
}
.login-input:not(:placeholder-shown) ~ .login-input-label {
  opacity: 1; transform: translateY(-28px) scale(0.85);
}
.login-input-group:focus-within .login-input-icon { color: var(--lime); }
.login-input-label {
  position: absolute; left: 44px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--text-muted); pointer-events: none;
  transition: all 0.2s ease; opacity: 0;
  background: #fff; padding: 0 4px;
}

/* Submit button */
.login-submit-btn {
  width: 100%; height: 48px; margin-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--lime), #059669);
  color: white; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(16,185,129,0.3);
}
.login-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(16,185,129,0.4);
}
.login-submit-btn:active {
  transform: translateY(0);
}
.login-submit-btn svg {
  transition: transform 0.2s ease;
}
.login-submit-btn:hover svg {
  transform: translateX(3px);
}

/* Divider between password form and Google sign-in */
.login-divider {
  display: flex; align-items: center; text-align: center;
  margin: 20px 0 16px; color: var(--text-light); font-size: 12px;
}
.login-divider::before,
.login-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(0,0,0,0.1);
}
.login-divider span { padding: 0 12px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Sign in with Google */
.login-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px; box-sizing: border-box;
  background: #fff; color: #3c4043;
  border: 1px solid rgba(0,0,0,0.15); border-radius: 10px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.login-google-btn:hover {
  background: #f7f8f8; border-color: rgba(0,0,0,0.25);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.login-google-btn svg { flex-shrink: 0; }

/* When Google is the sole sign-in method, give the button primary weight. */
.login-google-btn-primary {
  margin-top: 8px; padding: 14px 16px; font-size: 15px; border-radius: 12px;
}
.login-google-hint {
  text-align: center; margin: 14px 0 0; font-size: 12px; color: var(--text-light);
}

/* Footer */
.login-footer-text {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 24px; font-size: 11px; color: var(--text-light);
}

/* Legacy support - keep old classes functional */
.login-card .login-logo { text-align: center; margin-bottom: 32px; }
.login-card .login-logo .logo-icon {
  width: 56px; height: 56px; margin: 0 auto 12px;
  background: var(--lime); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: white;
  box-shadow: 0 8px 24px rgba(16,185,129,0.3);
}
.login-card .login-logo h1 { font-size: 20px; font-weight: 700; }
.login-card .login-logo p { font-size: 14px; color: var(--text-muted); }

/* ---- Login Responsive ---- */
@media (max-width: 1024px) {
  .login-showcase { display: none; }
  .login-split { justify-content: center; }
  .login-form-side {
    width: 100%; max-width: 100%;
    border-left: none; background: transparent;
  }
}
@media (max-width: 480px) {
  .login-form-side { padding: 24px 16px; }
  .login-card { padding: 28px 24px; border-radius: 16px; }
  .login-showcase-title { font-size: 32px; }
}

/* ---- Score bar ---- */
.score-bar { display: flex; align-items: center; gap: 8px; }
.score-bar .bar { flex: 1; height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.score-bar .bar-fill { height: 100%; border-radius: 3px; }
.score-bar .bar-fill.hot { background: var(--danger); }
.score-bar .bar-fill.warm { background: var(--warning); }
.score-bar .bar-fill.cold { background: var(--info); }

/* ---- Pagination ---- */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-top: 1px solid var(--border);
}
.pagination .page-info { font-size: 13px; color: var(--text-muted); }
.pagination .page-btns { display: flex; gap: 6px; }

/* ---- Sortable columns ---- */
.sortable-th:hover { background: var(--bg-muted, #f5f5f5); }
.sortable-th.sorted { color: var(--navy, #1a2b4a); }
.sort-arrows { display: inline-flex; flex-direction: column; line-height: 0.7; vertical-align: middle; }

/* ---- Filter bar ---- */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 16px 20px;
}
.filter-bar .form-control { width: auto; min-width: 160px; height: 38px; font-size: 13px; }

/* ---- Empty state ---- */
.empty-state {
  text-align: center; padding: 48px 20px;
  color: var(--text-muted); font-size: 14px;
}
.empty-state svg { width: 48px; height: 48px; margin: 0 auto 12px; opacity: .3; }

/* ---- Modal Overlay (simple) ---- */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.45); align-items: center; justify-content: center;
  padding: 24px;
}
.modal-overlay.open { display: flex; }
.modal, .modal-box {
  background: var(--card); border-radius: 12px;
  width: 95%; max-width: 640px; max-height: 85vh;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-header {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.modal-header h3 { font-size: 16px; font-weight: 700; margin: 0; }
.modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted); line-height: 1; }
.modal-close:hover { color: var(--text); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
  flex-shrink: 0; background: var(--bg);
}

/* ---- Master Data Breadcrumb ---- */
.md-breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
}
.md-breadcrumb-home {
  color: var(--text-muted);
  display: flex; align-items: center;
  transition: color var(--transition);
}
.md-breadcrumb-home:hover { color: var(--info); }
.md-breadcrumb-sep { color: var(--text-light); display: flex; align-items: center; }
.md-breadcrumb-link {
  color: var(--info); font-weight: 500;
  transition: color var(--transition);
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.md-breadcrumb-link:hover { color: var(--lime-dark); text-decoration: underline; }
.md-breadcrumb-current { font-weight: 600; color: var(--text); }

/* ---- Master Data Values Header ---- */
.md-values-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.md-values-count { font-size: 14px; font-weight: 600; color: var(--text); }

/* ---- Toggle Switch ---- */
.md-toggle { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; }
.md-toggle input { opacity: 0; width: 0; height: 0; }
.md-toggle-slider {
  position: absolute; inset: 0;
  background: #cbd5e1; border-radius: 24px;
  transition: background var(--transition);
}
.md-toggle-slider::before {
  content: ''; position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.md-toggle input:checked + .md-toggle-slider { background: var(--info); }
.md-toggle input:checked + .md-toggle-slider::before { transform: translateX(20px); }

/* ---- Master Data Action Dropdown ---- */
.md-dropdown { position: relative; }
.md-dropdown-trigger { position: relative; z-index: 1; }
.md-dropdown-menu {
  display: none;
  position: fixed;
  min-width: 230px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  z-index: 100;
  padding: 6px 0;
}
.md-dropdown-menu.open { display: block; }
.md-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 16px;
  font-size: 13px; font-weight: 500;
  color: var(--text); background: none; border: none;
  cursor: pointer; text-align: left;
  transition: background var(--transition);
  text-decoration: none;
}
.md-dropdown-item:hover { background: var(--bg); }
.md-dropdown-item svg { flex-shrink: 0; color: var(--text-muted); }
.md-dropdown-danger { color: var(--danger); }
.md-dropdown-danger svg { color: var(--danger); }
.md-dropdown-danger:hover { background: var(--danger-bg); }
.md-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ---- Settings Page ---- */
.settings-layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.settings-nav {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px; position: sticky; top: 88px; max-height: calc(100vh - 112px); overflow-y: auto;
  box-shadow: var(--shadow-sm);
}
.settings-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  transition: all var(--transition); cursor: pointer; margin-bottom: 2px;
}
.settings-nav-item:hover { background: var(--bg); color: var(--text); }
.settings-nav-item.active { background: rgba(16,185,129,.1); color: var(--lime-dark); font-weight: 600; }
.settings-nav-item svg { flex-shrink: 0; width: 18px; height: 18px; opacity: .7; }
.settings-nav-item.active svg { opacity: 1; }
.settings-nav-divider { height: 1px; background: var(--border); margin: 8px 6px; }
.settings-nav-label {
  display: block; padding: 8px 14px 4px;
  font-size: 11px; font-weight: 700; color: var(--text-light);
  text-transform: uppercase; letter-spacing: .5px;
}
.settings-content { min-width: 0; }
.settings-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; }
.settings-score-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius);
}
.settings-score-row label { font-size: 13px; font-weight: 500; margin-bottom: 0; }
.settings-score-row .form-control { height: 34px; font-size: 13px; }

@media (max-width: 1024px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 4px; }
  .settings-nav-divider { display: none; }
  .settings-nav-label { display: none; }
  .settings-nav-item { padding: 8px 12px; font-size: 12px; }
}


/* ============================================
   HOME / LANDING PAGE — Modern Design
   ============================================ */

.home-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── Scroll reveal ── */
.scroll-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Scroll progress ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
  z-index: 9999; transition: width 0.05s linear;
  box-shadow: 0 0 8px rgba(16,185,129,0.5);
}

/* ── Nav ── */
.home-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(15,23,42,0.8); backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.06); height: 64px;
}
.home-nav .home-container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.home-nav-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: #fff; }
.home-nav-brand .logo-icon {
  width: 32px; height: 32px; background: var(--lime); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff;
}
.home-nav-links { display: flex; align-items: center; gap: 32px; }
.home-nav-links a {
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.6);
  transition: color 0.2s; letter-spacing: -0.01em;
}
.home-nav-links a:hover { color: #fff; }
.home-nav-actions { display: flex; align-items: center; gap: 10px; }
.home-btn-outline { border-color: rgba(255,255,255,0.2) !important; color: #fff !important; font-size: 13px !important; padding: 7px 16px !important; }
.home-btn-outline:hover { background: rgba(255,255,255,0.06) !important; }
.home-menu-toggle { display: none; background: none; border: none; color: #fff; cursor: pointer; }

/* ── Hero ── */
.home-hero {
  padding: 130px 0 60px; position: relative; overflow: visible;
  background: #0b1120;
}
.home-hero::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,0.06);
}
.hero-bg-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-glow {
  position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none;
}
.hero-glow-1 {
  width: 700px; height: 700px; top: -250px; right: -200px;
  background: radial-gradient(circle, rgba(16,185,129,0.25), transparent 70%);
  animation: glowDrift1 12s ease-in-out infinite;
}
.hero-glow-2 {
  width: 500px; height: 500px; bottom: -200px; left: -150px;
  background: radial-gradient(circle, rgba(59,130,246,0.2), transparent 70%);
  animation: glowDrift2 15s ease-in-out infinite;
}
.hero-glow-3 {
  width: 400px; height: 400px; top: 40%; left: 40%;
  background: radial-gradient(circle, rgba(139,92,246,0.15), transparent 70%);
  animation: glowDrift3 18s ease-in-out infinite;
}
@keyframes glowDrift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-60px,40px)} }
@keyframes glowDrift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,-50px)} }
@keyframes glowDrift3 { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.3)} }

.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 100%);
}

/* Hero particles */
.hero-particles { position: absolute; inset: 0; pointer-events: none; }
.hero-particles span {
  position: absolute; border-radius: 50%; background: rgba(16,185,129,0.5);
  animation: particleDrift linear infinite;
}
.hero-particles span:nth-child(1) { width:3px; height:3px; left:10%; animation-duration:16s; }
.hero-particles span:nth-child(2) { width:4px; height:4px; left:22%; animation-duration:20s; animation-delay:3s; background:rgba(59,130,246,0.5); }
.hero-particles span:nth-child(3) { width:3px; height:3px; left:35%; animation-duration:14s; animation-delay:1s; }
.hero-particles span:nth-child(4) { width:5px; height:5px; left:48%; animation-duration:18s; animation-delay:5s; background:rgba(139,92,246,0.4); }
.hero-particles span:nth-child(5) { width:3px; height:3px; left:60%; animation-duration:22s; animation-delay:2s; }
.hero-particles span:nth-child(6) { width:4px; height:4px; left:72%; animation-duration:15s; animation-delay:7s; background:rgba(59,130,246,0.4); }
.hero-particles span:nth-child(7) { width:3px; height:3px; left:82%; animation-duration:19s; animation-delay:4s; }
.hero-particles span:nth-child(8) { width:5px; height:5px; left:90%; animation-duration:17s; animation-delay:6s; background:rgba(245,158,11,0.3); }
.hero-particles span:nth-child(9) { width:3px; height:3px; left:5%;  animation-duration:21s; animation-delay:8s; background:rgba(139,92,246,0.3); }
.hero-particles span:nth-child(10){ width:4px; height:4px; left:50%; animation-duration:13s; animation-delay:9s; }
@keyframes particleDrift {
  0%{bottom:-8px;opacity:0;transform:translateX(0)}
  8%{opacity:0.8}
  50%{transform:translateX(25px)}
  92%{opacity:0.6}
  100%{bottom:110%;opacity:0;transform:translateX(-15px)}
}

/* Hero inner */
.hero-inner {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center;
  position: relative; z-index: 2;
}

/* Hero text */
.hero-text { animation: heroTextIn 0.8s ease-out both; }
@keyframes heroTextIn { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 10px; border-radius: 999px;
  background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2);
  font-size: 12px; font-weight: 600; color: var(--lime-light);
  margin-bottom: 24px; cursor: default;
  transition: background 0.2s;
}
.hero-pill:hover { background: rgba(16,185,129,0.18); }
.hero-pill-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #34d399;
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.8)} }
.hero-pill svg { opacity: 0.6; }

.hero-h1 {
  font-size: 52px; font-weight: 800; line-height: 1.1; color: #fff;
  letter-spacing: -1.5px; margin-bottom: 20px;
}
.hero-gradient-text {
  background: linear-gradient(135deg, #34d399, #6ee7b7, #34d399, #10b981);
  background-size: 300% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: shimmerText 4s linear infinite;
}
@keyframes shimmerText { 0%{background-position:0% center} 100%{background-position:300% center} }

.hero-sub {
  font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.5);
  max-width: 480px; margin-bottom: 32px; letter-spacing: -0.01em;
}

/* Hero buttons */
.hero-actions { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; flex-wrap: wrap; }
.hero-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 10px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; font-size: 14px; font-weight: 600; font-family: inherit;
  text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 4px 20px rgba(16,185,129,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: all 0.25s ease;
}
.hero-btn-primary:hover { box-shadow: 0 8px 30px rgba(16,185,129,0.4); transform: translateY(-2px); }
.hero-btn-primary svg { transition: transform 0.2s; }
.hero-btn-primary:hover svg { transform: translateX(3px); }

.hero-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8); font-size: 14px; font-weight: 500;
  text-decoration: none; transition: all 0.2s;
}
.hero-btn-secondary:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Social proof */
.hero-social-proof { display: flex; align-items: center; gap: 14px; }
.hero-avatars { display: flex; }
.hero-av {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; margin-left: -6px;
  border: 2px solid #0b1120;
}
.hero-av:first-child { margin-left: 0; }
.hero-proof-text { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.4; }
.hero-proof-text strong { color: rgba(255,255,255,0.85); }
.hero-stars { display: flex; gap: 1px; margin-top: 2px; }

/* ── Hero mockup ── */
.hero-visual {
  animation: mockupIn 1s cubic-bezier(0.22,1,0.36,1) 0.3s both;
  position: relative; padding: 30px 40px 30px 30px;
}
@keyframes mockupIn { from{opacity:0;transform:perspective(1200px) rotateX(6deg) rotateY(-8deg) translateY(50px)} to{opacity:1;transform:perspective(1200px) rotateX(2deg) rotateY(-3deg)} }

.hero-mockup {
  background: #fff; border-radius: 12px; overflow: visible; position: relative;
  box-shadow: 0 40px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06), 0 0 60px rgba(16,185,129,0.08);
  transform: perspective(1200px) rotateX(2deg) rotateY(-3deg);
  transition: transform 0.3s ease;
  font-size: 0; /* reset for tight layout */
}
.hm-body, .hm-bar, .hm-body * { font-size: 14px; }
.hm-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: #f1f5f9; border-bottom: 1px solid #e2e8f0;
}
.hm-dots { display: flex; gap: 5px; }
.hm-dots span { width: 8px; height: 8px; border-radius: 50%; }
.hm-dots span:nth-child(1) { background: #ef4444; }
.hm-dots span:nth-child(2) { background: #f59e0b; }
.hm-dots span:nth-child(3) { background: #22c55e; }
.hm-title { font-size: 11px; font-weight: 600; color: #94a3b8; }
.hm-body { padding: 12px; }

/* Mockup header extras */
.hm-bar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hm-bar-avatar { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; }

/* Mockup stat cards */
.hm-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.hm-stat {
  padding: 10px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0;
  opacity: 0; animation: hmCardIn 0.5s ease-out forwards; position: relative; overflow: hidden;
}
.hm-stat-1 { animation-delay: 0.6s; }
.hm-stat-2 { animation-delay: 0.75s; }
.hm-stat-3 { animation-delay: 0.9s; }
.hm-stat-4 { animation-delay: 1.05s; }
@keyframes hmCardIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.hm-stat-icon-sm { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.hm-stat-num { font-size: 16px; font-weight: 800; color: #1e293b; line-height: 1.2; }
.hm-stat-lbl { font-size: 9px; color: #94a3b8; margin-top: 1px; }
.hm-stat-trend { display: flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; margin-top: 4px; }
.hm-stat-trend.up { color: #10b981; }
.hm-mini-spark { position: absolute; bottom: 4px; right: 4px; opacity: 0.6; }

/* Two-column row */
.hm-row-2 { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 10px; margin-bottom: 12px; }

/* Mockup funnel */
.hm-pipeline { }
.hm-pipe-title { font-size: 9px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.hm-pipe-bars { display: flex; flex-direction: column; gap: 3px; }
.hm-pipe {
  height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px; color: #fff; font-size: 9px; font-weight: 600;
  width: var(--w); background: var(--c);
  transform-origin: left; transform: scaleX(0);
  animation: pipeGrow 0.7s cubic-bezier(0.22,1,0.36,1) var(--d) forwards;
}
@keyframes pipeGrow { to { transform: scaleX(1); } }

/* Donut chart */
.hm-donut-wrap { display: flex; flex-direction: column; align-items: center; }
.hm-donut { position: relative; width: 70px; height: 70px; margin: 0 auto 6px; }
.hm-donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hm-donut-seg { opacity: 0; animation: donutIn 0.8s ease-out forwards; }
.hm-donut-seg:nth-child(2) { animation-delay: 0.8s; }
.hm-donut-seg:nth-child(3) { animation-delay: 1s; }
.hm-donut-seg:nth-child(4) { animation-delay: 1.2s; }
.hm-donut-seg:nth-child(5) { animation-delay: 1.4s; }
@keyframes donutIn { to { opacity: 1; } }
.hm-donut-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 12px; font-weight: 800; color: #1e293b;
}
.hm-donut-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: 8px; color: #64748b; }
.hm-donut-legend div { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.hm-donut-legend span { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Mini leads table */
.hm-leads-table { margin-bottom: 12px; }
.hm-table { border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; }
.hm-trow { display: grid; grid-template-columns: 2fr 1.2fr 1fr 0.6fr; padding: 5px 8px; font-size: 9px; align-items: center; }
.hm-thead { background: #f1f5f9; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.3px; font-size: 8px; }
.hm-trow:not(.hm-thead) { border-top: 1px solid #f1f5f9; color: #334155; }
.hm-trow:not(.hm-thead) span:first-child { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.hm-tav { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 700; color: #fff; flex-shrink: 0; }
.hm-tsrc { color: #64748b; }
.hm-tbadge { padding: 1px 6px; border-radius: 4px; font-size: 8px; font-weight: 600; }
.hm-b-new { background: #eff6ff; color: #3b82f6; }
.hm-b-contacted { background: #faf5ff; color: #8b5cf6; }
.hm-b-applied { background: #fffbeb; color: #f59e0b; }
.hm-b-enrolled { background: #ecfdf5; color: #10b981; }
.hm-tscore { font-weight: 700; color: #1e293b; }
.hm-trow-1 { opacity: 0; animation: hmCardIn 0.4s ease-out 1.2s forwards; }
.hm-trow-2 { opacity: 0; animation: hmCardIn 0.4s ease-out 1.35s forwards; }
.hm-trow-3 { opacity: 0; animation: hmCardIn 0.4s ease-out 1.5s forwards; }
.hm-trow-4 { opacity: 0; animation: hmCardIn 0.4s ease-out 1.65s forwards; }

/* Mockup chart */
.hm-chart { }
.hm-chart-title { font-size: 9px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.hm-chart-bars { display: flex; align-items: flex-end; gap: 5px; height: 60px; }
.hm-bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.hm-bar-fill {
  width: 100%; border-radius: 3px 3px 0 0; height: 0;
  background: linear-gradient(180deg, #10b981, #059669);
  animation: barGrow 0.6s cubic-bezier(0.22,1,0.36,1) calc(1.2s + var(--h, 0) * 0.01s) forwards;
}
@keyframes barGrow { to { height: var(--h); } }
.hm-bar-col span { font-size: 8px; color: #94a3b8; margin-top: 3px; }

/* Floating notification cards */
.hm-notif, .hm-activity, .hm-float-score, .hm-float-task {
  position: absolute; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); font-size: 10px; color: #1e293b;
  white-space: nowrap;
}
.hm-notif {
  top: 25%; right: -36px;
  animation: floatIn 0.5s ease-out 2.2s both, floatBob 3s ease-in-out 2.7s infinite;
}
.hm-activity {
  bottom: 30%; left: -30px;
  animation: floatIn 0.5s ease-out 3s both, floatBob2 3.5s ease-in-out 3.5s infinite;
}
.hm-float-score {
  top: 55%; right: -40px;
  animation: floatIn 0.5s ease-out 3.8s both, floatBob 4s ease-in-out 4.3s infinite;
}
.hm-float-task {
  bottom: 8%; left: -26px;
  animation: floatIn 0.5s ease-out 4.5s both, floatBob2 3.2s ease-in-out 5s infinite;
}
@keyframes floatIn { from{opacity:0;scale:0.9} to{opacity:1;scale:1} }
@keyframes floatBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes floatBob2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.hm-notif-dot, .hm-act-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hm-notif-dot { background: #10b981; animation: dotPulse 1.5s ease-in-out infinite; }
.hm-score-ring { flex-shrink: 0; }
.hm-score-arc { animation: donutIn 1s ease-out 4s both; }
.hm-notif strong, .hm-activity strong { font-weight: 700; }
.hm-notif span, .hm-activity span { color: #64748b; font-size: 10px; }

/* ── Logos marquee ── */
.home-logos { padding: 28px 0; background: #fff; border-bottom: 1px solid var(--border); overflow: hidden; }
.logos-label { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px; }
.logos-marquee-wrap {
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-marquee { display: flex; gap: 40px; width: max-content; animation: marquee 30s linear infinite; }
.logos-marquee:hover { animation-play-state: paused; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.logo-item {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.logo-item svg { color: var(--lime); flex-shrink: 0; }

/* ── Section shared ── */
.section-badge {
  display: inline-block; padding: 4px 14px; border-radius: 6px;
  background: rgba(16,185,129,0.08); color: var(--lime-dark);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 14px;
}
.home-section-header { text-align: center; max-width: 600px; margin: 0 auto 56px; }
.home-section-header h2 { font-size: 34px; font-weight: 800; color: var(--navy); margin-bottom: 14px; letter-spacing: -0.5px; line-height: 1.2; }
.home-section-header p { font-size: 16px; color: var(--text-muted); line-height: 1.7; }

/* ── Features ── */
.home-features { padding: 100px 0; background: #fff; }
.home-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.home-feature-card {
  padding: 28px; border: 1px solid var(--border); border-radius: 14px;
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
  background: #fff; position: relative; overflow: hidden;
}
.home-feature-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--lime), var(--lime-dark));
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;
}
.home-feature-card:hover::after { transform: scaleX(1); }
.home-feature-card:hover { border-color: rgba(16,185,129,0.2); box-shadow: 0 12px 40px rgba(0,0,0,0.06); transform: translateY(-3px); }
.home-feature-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.home-feature-icon.blue { background: #eff6ff; color: #3b82f6; }
.home-feature-icon.green { background: #ecfdf5; color: #10b981; }
.home-feature-icon.purple { background: #faf5ff; color: #8b5cf6; }
.home-feature-icon.orange { background: #fff7ed; color: #f59e0b; }
.home-feature-icon.red { background: #fef2f2; color: #ef4444; }
.home-feature-icon.teal { background: #f0fdfa; color: #14b8a6; }
.home-feature-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.home-feature-card p { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin-bottom: 12px; }
.feature-tag {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  background: #f8fafc; font-size: 11px; font-weight: 600; color: var(--text-muted); border: 1px solid var(--border);
}

/* ── Nav scrolled state ── */
.home-nav.nav-scrolled { background: rgba(11,17,32,0.95); box-shadow: 0 2px 20px rgba(0,0,0,0.3); }

/* ── Hero cursor ── */
.hero-cursor {
  display: inline-block; color: var(--lime-light); font-weight: 300;
  animation: cursorBlink 0.8s step-end infinite;
  margin-left: 2px;
}
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Live Activity Feed Grid ── */
.live-grid-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
  animation: livePulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(239,68,68,0.5);
}
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }
.live-label { font-size: 11px; font-weight: 700; color: #ef4444; text-transform: uppercase; letter-spacing: 0.8px; }
.live-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
.live-card {
  padding: 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateY(16px);
  animation: liveCardIn 0.5s ease-out forwards;
  transition: all 0.25s ease;
}
.live-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-3px);
}
.lc-1 { animation-delay: 0.2s; }
.lc-2 { animation-delay: 0.3s; }
.lc-3 { animation-delay: 0.4s; }
.lc-4 { animation-delay: 0.5s; }
.lc-5 { animation-delay: 0.6s; }
.lc-6 { animation-delay: 0.7s; }
@keyframes liveCardIn {
  to { opacity: 1; transform: translateY(0); }
}
.live-card-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.live-card-text { display: flex; flex-direction: column; gap: 1px; }
.live-card-text strong { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.9); }
.live-card-text span { font-size: 11px; color: rgba(255,255,255,0.45); }
.live-card em {
  font-style: normal; font-size: 10px; color: rgba(255,255,255,0.25);
  margin-top: auto;
}

/* ── Big Numbers ── */
.home-big-numbers { padding: 80px 0; background: #0b1120; position: relative; overflow: hidden; }
.big-nums-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.big-num { text-align: center; padding: 28px 20px; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; background: rgba(255,255,255,0.02); transition: all 0.3s ease; }
.big-num:hover { border-color: rgba(16,185,129,0.2); background: rgba(16,185,129,0.04); transform: translateY(-4px); }
.big-num-val { font-size: 40px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.big-num-label { font-size: 13px; color: rgba(255,255,255,0.45); margin-bottom: 14px; }
.big-num-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
.big-num-fill { height: 100%; border-radius: 4px; width: 0; background: var(--c); transition: width 1.5s cubic-bezier(0.22,1,0.36,1); }

/* ── Testimonials ── */
.home-testimonials { padding: 100px 0; background: #fff; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card {
  padding: 28px; border: 1px solid var(--border); border-radius: 16px;
  background: #fff; transition: all 0.35s ease; position: relative; overflow: hidden;
}
.testimonial-card::before {
  content: '"'; position: absolute; top: -10px; right: 16px;
  font-size: 100px; font-weight: 800; color: rgba(16,185,129,0.06); line-height: 1; pointer-events: none;
}
.testimonial-card:hover { border-color: rgba(16,185,129,0.2); box-shadow: 0 12px 40px rgba(0,0,0,0.06); transform: translateY(-3px); }
.testimonial-stars { display: flex; gap: 2px; margin-bottom: 14px; }
.testimonial-text { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 10px; }
.testimonial-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: 13px; color: var(--text); }
.testimonial-author span { font-size: 11px; color: var(--text-muted); }

/* ── How It Works ── */
.home-how-it-works { padding: 100px 0; background: var(--bg); }
.hiw-timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; }
.hiw-line {
  position: absolute; top: 22px; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #f59e0b, #10b981);
  border-radius: 2px; opacity: 0.25;
}
.hiw-step { text-align: center; position: relative; z-index: 1; }
.hiw-num {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--border);
  font-size: 15px; font-weight: 800; color: var(--lime-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}
.hiw-step:hover .hiw-num { border-color: var(--lime); background: rgba(16,185,129,0.05); transform: scale(1.1); }
.hiw-card { }
.hiw-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.hiw-card h4 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.hiw-card p { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* ── Stats ── */
.home-stats {
  padding: 80px 0; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0b1120 0%, #1e293b 100%);
}
.home-stats::before {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 600px; height: 600px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(16,185,129,0.08), transparent 70%);
}
.home-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
  text-align: center; position: relative; z-index: 1;
}
.home-stat-item { transition: transform 0.3s ease; }
.home-stat-item:hover { transform: translateY(-4px); }
.home-stat-number { font-size: 44px; font-weight: 800; color: var(--lime-light); margin-bottom: 6px; }
.home-stat-text { font-size: 14px; color: rgba(255,255,255,0.5); font-weight: 500; }

/* ── CTA ── */
.home-cta {
  padding: 100px 0; text-align: center; position: relative; overflow: hidden;
  background: #0b1120;
}
.home-cta-content h2 { font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 16px; letter-spacing: -0.5px; line-height: 1.2; }
.home-cta-content p { font-size: 16px; color: rgba(255,255,255,0.5); margin-bottom: 32px; max-width: 480px; margin-left: auto; margin-right: auto; }

/* ── Footer ── */
.home-footer { padding: 60px 0 0; background: #0b1120; border-top: 1px solid rgba(255,255,255,0.05); }
.home-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.home-footer-brand p { font-size: 13px; color: rgba(255,255,255,0.35); margin-top: 14px; line-height: 1.6; }
.home-footer-col h4 { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 14px; }
.home-footer-col a { display: block; font-size: 13px; color: rgba(255,255,255,0.35); padding: 4px 0; transition: color 0.15s; }
.home-footer-col a:hover { color: var(--lime-light); }
.home-footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding: 20px 0; text-align: center; }
.home-footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.25); }

/* ── Sidebar + Layout globals ── */
.hamburger-btn { display: flex; }
.sidebar { transform: translateX(-100%); transition: transform .3s ease; }
.sidebar.open { transform: translateX(0); }
.main-content { margin-left: 0 !important; transition: margin-left .3s ease; }
@media (min-width: 1025px) { .sidebar.open ~ .main-content { margin-left: 240px !important; } }
/* Tablet: the expanded sidebar pushes content (220px) instead of
   overlaying it, so it never sits on top of the page text. */
@media (min-width: 769px) and (max-width: 1024px) { .sidebar.open ~ .main-content { margin-left: 220px !important; } }

/* ── Desktop: collapsed sidebar = icon-only rail (toggle expands it) ──
   When NOT .open the sidebar stays on-screen as a 64px rail showing just
   the icons; toggling adds .open to reveal the full labelled menu. On
   tablet/mobile the base translateX(-100%) slide-in behaviour stands. */
@media (min-width: 1025px) {
  .sidebar { transform: translateX(0); transition: width .2s ease, box-shadow .2s ease; }
  .sidebar:not(.open) { width: 64px; }
  .sidebar.open { width: 240px; }
  .main-content { margin-left: 64px !important; }

  /* Hover the collapsed rail to temporarily expand it into the full
     labelled menu (as an overlay flyout over the content) so you can see
     which menu each icon belongs to. Collapses back on mouse-leave. The
     collapse-to-icons rules below are scoped to :not(:hover) so hovering
     restores the normal labelled layout. */
  .sidebar:not(.open):hover { width: 240px; z-index: 1100; box-shadow: 6px 0 28px rgba(0,0,0,.28); }

  .sidebar:not(.open):not(:hover) .sidebar-nav a,
  .sidebar:not(.open):not(:hover) .nav-group-btn { justify-content: center; gap: 0; font-size: 0; padding: 9px 0; }
  .sidebar:not(.open):not(:hover) .sidebar-nav a svg,
  .sidebar:not(.open):not(:hover) .nav-group-btn svg { width: 20px; height: 20px; opacity: .9; }
  .sidebar:not(.open):not(:hover) .nav-group-btn .nav-caret { display: none; }
  .sidebar:not(.open):not(:hover) .nav-group .nav-sub { display: none !important; }
  .sidebar:not(.open):not(:hover) .sidebar-nav a[style*="border-top"] { border-top: 0 !important; padding-top: 9px !important; margin-top: 4px !important; }
  /* The two-line "rich label" that existed only for the Wati entry is gone —
     that entry is now a plain one-line link like every other. Nothing in
     .sidebar-nav uses <small> or <br> any more, so the rules that hid them in
     the collapsed rail went with it. */

  .sidebar:not(.open):not(:hover) .sidebar-logo { justify-content: center; padding: 14px 0; }
  .sidebar:not(.open):not(:hover) .sidebar-logo h1,
  .sidebar:not(.open):not(:hover) .sidebar-logo small,
  .sidebar:not(.open):not(:hover) .sidebar-logo div:not(.logo-icon) { display: none; }

  .sidebar:not(.open):not(:hover) .sidebar-footer { justify-content: center; padding: 12px 0; }
  .sidebar:not(.open):not(:hover) .sidebar-footer .user-info,
  .sidebar:not(.open):not(:hover) .sidebar-footer > a[href="/logout"] { display: none; }
}

/* ══ Compact & Responsive Overrides ══ */

/* -- Tighter spacing globally -- */
.page-content { padding: 12px 16px; }
.page-header { margin-bottom: 14px; }
.page-header h2 { font-size: 16px; }
.card-body { padding: 14px; }
.card-header { padding: 10px 14px; }
.card-header h3 { font-size: 13px; }
.card-footer { padding: 10px 14px; }

/* -- Compact tables -- */
thead th { padding: 6px 10px; font-size: 10px; }
tbody td { padding: 6px 10px; font-size: 12px; }

/* -- Compact stat cards -- */
.stat-grid { gap: 10px; margin-bottom: 16px; }
.stat-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.stat-card { padding: 12px 14px; }
.stat-card .stat-icon { width: 32px; height: 32px; margin-bottom: 8px; border-radius: 8px; }
.stat-card .stat-value { font-size: 18px; }
.stat-card .stat-label { font-size: 11px; }

/* -- Compact forms -- */
.form-control { height: 32px; font-size: 12px; padding: 0 8px; }
textarea.form-control { padding: 6px 8px; min-height: 50px; }
.form-group { margin-bottom: 10px; }
.form-group label { font-size: 11px; margin-bottom: 3px; }
.form-row { gap: 12px; }

/* -- Compact buttons -- */
.btn { padding: 5px 12px; font-size: 12px; }
.btn svg { width: 14px; height: 14px; }
.btn-sm { padding: 3px 8px; font-size: 11px; }
.btn-icon { width: 28px; height: 28px; }

/* -- Compact header -- */
.header { height: 44px; padding: 0 12px; }
.header-search input { height: 32px; font-size: 12px; padding: 0 10px 0 30px; }
.header-search svg { width: 14px; height: 14px; left: 8px; }
.header-btn { width: 32px; height: 32px; }
.header-btn svg { width: 16px; height: 16px; }
.hamburger-btn { width: 34px; height: 34px; }

/* -- Compact sidebar -- */
.sidebar { width: 220px; }
.sidebar-logo { padding: 10px 12px; }
.sidebar-logo .logo-icon { width: 28px; height: 28px; font-size: 12px; border-radius: 6px; }
.sidebar-logo h1 { font-size: 13px; }
.sidebar-nav { padding: 6px 8px; }
.sidebar-nav a { padding: 6px 10px; font-size: 12px; gap: 8px; }
.sidebar-nav a svg { width: 16px; height: 16px; }
.sidebar-footer { padding: 8px 12px; }
.sidebar-footer .avatar { width: 28px; height: 28px; font-size: 11px; }
.sidebar-footer .user-info p { font-size: 12px; }

/* -- Compact badges -- */
.badge { padding: 1px 6px; font-size: 10px; }

/* -- Compact alerts -- */
.alert { padding: 8px 12px; font-size: 12px; margin-bottom: 12px; }

/* -- Compact modals -- */
.modal-header { padding: 12px 16px; }
.modal-header h3 { font-size: 15px; }
.modal-body { padding: 14px 16px; }
.modal-footer { padding: 10px 16px; }

/* -- Compact pagination -- */
.pagination { padding: 8px 0; font-size: 12px; }

/* -- Compact funnel -- */
.funnel-track { height: 24px; }
.funnel-bar .funnel-label { font-size: 12px; }

/* -- Compact timeline -- */
.timeline { padding-left: 20px; }

/* ══ Responsive Breakpoints ══ */

/* -- Large screens (1025px+) -- */
@media (min-width: 1025px) {
  .sidebar.open ~ .main-content { margin-left: 240px !important; }
}

/* -- Tablet (769px - 1024px) -- */
@media (min-width: 769px) and (max-width: 1024px) {
  .page-content { padding: 10px 12px; }
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .form-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero-h1 { font-size: 40px; }
  .home-features-grid { grid-template-columns: 1fr 1fr; }
  .home-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .home-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* -- Mobile (up to 768px) -- */
@media (max-width: 768px) {
  .main-content { margin-left: 0 !important; }
  .page-content { padding: 8px 10px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
  .page-header h2 { font-size: 15px; }

  /* Stack grids */
  .form-row, .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 8px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card { padding: 10px; }
  .stat-card .stat-value { font-size: 16px; }
  .detail-grid { grid-template-columns: 1fr; }

  /* Compact table for mobile */
  thead th { padding: 5px 6px; font-size: 9px; }
  tbody td { padding: 5px 6px; font-size: 11px; }

  /* Header actions */
  .header { height: 40px; padding: 0 8px; }
  .header-left { gap: 6px; }
  .header-search { max-width: none; }
  .header-search input { height: 28px; font-size: 11px; }
  .header-btn { width: 28px; height: 28px; }
  .header-btn svg { width: 14px; height: 14px; }
  .hamburger-btn { width: 30px; height: 30px; }
  .header-actions { gap: 4px; }

  /* Forms */
  .form-control { height: 30px; font-size: 11px; }
  .btn { padding: 4px 10px; font-size: 11px; }
  .btn-sm { padding: 3px 6px; font-size: 10px; }

  /* Modals */
  .modal-box { margin: 8px; max-height: 90vh; }

  /* Card */
  .card-body { padding: 10px; }

  /* Wg header actions wrap */
  .wg-header-actions { flex-wrap: wrap; gap: 4px; }

  /* Home page responsive */
  .home-nav-links, .home-nav-actions { display: none; }
  .home-nav-links.open, .home-nav-actions.open {
    display: flex; flex-direction: column;
    position: absolute; top: 64px; left: 0; right: 0;
    background: rgba(15,23,42,0.97); padding: 16px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .home-menu-toggle { display: block; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-h1 { font-size: 28px; }
  .hero-visual { display: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .home-hero { padding: 90px 0 50px; }
  .home-features-grid { grid-template-columns: 1fr; }
  .hiw-timeline { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hiw-line { display: none; }
  .home-stats-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .home-stat-number { font-size: 28px; }
  .home-footer-grid { grid-template-columns: 1fr 1fr; }
  .home-cta-content h2 { font-size: 22px; }
  .home-section-header h2 { font-size: 22px; }
  .big-nums-grid { grid-template-columns: 1fr 1fr; }
  .big-num-val { font-size: 24px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .live-grid { grid-template-columns: repeat(2, 1fr); }
  .live-card { padding: 8px; }
}

/* -- Small mobile (up to 480px) -- */
@media (max-width: 480px) {
  .page-content { padding: 6px 8px; }
  .stat-grid { grid-template-columns: 1fr; }
  .page-header { margin-bottom: 8px; }
  .page-header h2 { font-size: 14px; }
  thead th { white-space: nowrap; }
  .header-search { display: none; }
  .sidebar { width: 200px; }
  .modal-box { margin: 4px; }
  .wg-header-actions { gap: 2px; }
}

/* ─── Lead Source Accordion ────────────────────────── */
#ls-accordion { padding: 8px 0; }

.ls-source { border-bottom: 1px solid var(--border); }
.ls-source:last-child { border-bottom: none; }

.ls-source-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; cursor: pointer; transition: background 0.15s;
}
.ls-source-header:hover { background: var(--bg); }

.ls-source-body { padding: 0 0 8px 28px; }

.ls-medium { border: 1px solid var(--border); border-radius: 6px; margin: 4px 16px 4px 12px; background: var(--card); }

.ls-medium-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; cursor: pointer; transition: background 0.15s;
}
.ls-medium-header:hover { background: var(--bg); }

.ls-medium-body { padding: 0 16px 8px 28px; }

.ls-campaign { border-bottom: 1px solid var(--border); }
.ls-campaign:last-child { border-bottom: none; }

.ls-campaign-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px;
}

.ls-label { display: flex; align-items: center; gap: 8px; }

.ls-type { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.ls-name { font-weight: 600; color: #b45309; font-size: 14px; }

.ls-chevron {
  transition: transform 0.2s; flex-shrink: 0; color: var(--text-muted);
}
.ls-chevron-open { transform: rotate(180deg); }

.ls-actions { display: flex; gap: 4px; }

.ls-action-btn {
  background: none; border: none; cursor: pointer; padding: 4px 6px;
  border-radius: 4px; color: var(--text-muted); transition: all 0.15s;
  display: flex; align-items: center;
}
.ls-action-btn:hover { background: var(--border); color: var(--text); }
.ls-action-btn.ls-delete:hover { background: var(--danger-bg); color: var(--danger); }

.ls-add-link {
  padding: 8px 16px; text-align: right;
}
.ls-add-link a {
  color: var(--lime); font-size: 13px; font-weight: 500; text-decoration: none;
}
.ls-add-link a:hover { text-decoration: underline; }

/* ─── Tracking Settings ─────────────────────────── */
.ls-tracking-divider {
  height: 3px; background: var(--lime); width: 60px; margin-bottom: 20px;
}

.ls-tracking-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.ls-tracking-row:last-child { border-bottom: none; }

.ls-tracking-label {
  font-size: 14px; color: var(--text-muted); font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}

.ls-tracking-group {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0 16px; margin-top: 16px;
}

.ls-info-icon {
  font-size: 14px; color: var(--text-light); cursor: help;
}

/* ============================================
   DASHBOARD — Comprehensive Analytics Design
   ============================================ */

/* ---- Dashboard Header ---- */
.dash-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.dash-title { font-size: 24px; font-weight: 700; color: var(--navy); }
.dash-subtitle { color: var(--text-muted); font-size: 14px; margin-top: 2px; display: flex; align-items: center; gap: 8px; }
.dash-date-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  background: var(--info-bg); color: var(--info);
  font-size: 12px; font-weight: 600;
}
.dash-actions { display: flex; align-items: center; gap: 10px; }
.dash-date-filter {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card);
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; transition: all var(--transition);
}
.dash-date-filter:hover { border-color: var(--lime); color: var(--text); }

/* ---- Stat Cards (4-column) ---- */
.stat-grid-4 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 24px;
}
.dash-stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow-sm); transition: all var(--transition);
}
.dash-stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.dash-stat-top { display: flex; align-items: flex-start; justify-content: space-between; }
.dash-stat-label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.dash-stat-value { font-size: 28px; font-weight: 700; line-height: 1.3; color: var(--text); margin-top: 4px; }
.dash-stat-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dash-stat-icon.blue { background: var(--info-bg); color: var(--info); }
.dash-stat-icon.green { background: var(--success-bg); color: var(--success); }
.dash-stat-icon.orange { background: var(--warning-bg); color: var(--warning); }
.dash-stat-icon.purple { background: #f5f3ff; color: #7c3aed; }
.dash-stat-icon.red { background: var(--danger-bg); color: var(--danger); }
.dash-stat-trend {
  display: flex; align-items: center; gap: 4px;
  margin-top: 12px; font-size: 12px; font-weight: 500;
}
.dash-stat-trend.up { color: var(--success); }
.dash-stat-trend.down { color: var(--danger); }
.dash-stat-trend.neutral { color: var(--text-muted); }

/* ---- Dashboard Cards ---- */
.dash-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.dash-card-header {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.dash-card-header h3 { font-size: 15px; font-weight: 600; color: var(--text); }
.dash-card-actions { display: flex; align-items: center; gap: 8px; }
.dash-card-body { padding: 20px; }
.dash-card-body.p-0, .p-0 { padding: 0; }

/* ---- Dashboard Grid Layouts ---- */
.dash-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.dash-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.dash-row-2 > .dash-card, .dash-row-3 > .dash-card { margin-bottom: 0; }

/* ---- Performance Analysis ---- */
.perf-grid { display: flex; align-items: center; gap: 30px; }
.perf-chart-wrap { flex-shrink: 0; width: 180px; height: 180px; position: relative; }
.perf-stats { flex: 1; }
.perf-stat-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.perf-stat-item:last-child { border-bottom: none; }
.perf-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.perf-dot.hot { background: #ef4444; }
.perf-dot.warm { background: #f59e0b; }
.perf-dot.cold { background: #3b82f6; }
.perf-dot.app { background: #8b5cf6; }
.perf-label { flex: 1; font-size: 13px; color: var(--text-muted); font-weight: 500; }
.perf-count { font-size: 15px; font-weight: 700; color: var(--text); }
.perf-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ---- Funnel Visual (trapezoid) ---- */
.funnel-visual { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; }
.funnel-stage { transition: all 0.3s ease; }
.funnel-stage-bar {
  padding: 10px 16px; border-radius: 6px; color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600;
  min-height: 36px; transition: all 0.3s ease;
}
.funnel-stage-bar:hover { opacity: 0.9; transform: scale(1.02); }
.funnel-stage-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funnel-stage-count { font-weight: 700; margin-left: 12px; white-space: nowrap; }

/* ---- Dashboard Table ---- */
.dash-table { width: 100%; border-collapse: collapse; }
.dash-table thead th {
  padding: 10px 16px; text-align: left;
  font-size: 11px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--bg); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.dash-table tbody td {
  padding: 10px 16px; font-size: 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.dash-table tbody tr { transition: background var(--transition); }
.dash-table tbody tr:hover { background: #f8fafc; }
.dash-table tbody tr:last-child td { border-bottom: none; }

/* ---- Counselor Cell ---- */
.counselor-cell { display: flex; align-items: center; gap: 10px; }
.counselor-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.counselor-name { font-size: 13px; font-weight: 600; color: var(--text); }
.counselor-email { font-size: 11px; color: var(--text-muted); }

/* ---- Communication Stats ---- */
.comm-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.comm-stat-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border: 1px solid var(--border);
  border-radius: var(--radius); transition: all var(--transition);
}
.comm-stat-card:hover { border-color: var(--lime); box-shadow: var(--shadow-sm); }
.comm-stat-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.comm-stat-count { font-size: 20px; font-weight: 700; color: var(--text); }
.comm-stat-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }

/* ---- Mini Bar ---- */
.mini-bar-wrap {
  width: 80px; height: 6px; background: var(--bg);
  border-radius: 3px; overflow: hidden; display: inline-block;
  vertical-align: middle; margin-right: 6px;
}
.mini-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.mini-bar-pct { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* ---- Period Tabs ---- */
.dash-period-tabs { display: flex; gap: 4px; }
.dash-period-tab {
  padding: 4px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 500;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  transition: all var(--transition);
}
.dash-period-tab:hover { border-color: var(--lime); color: var(--text); }
.dash-period-tab.active { background: var(--lime); color: #fff; border-color: var(--lime); }

/* ---- Heatmap ---- */
.heatmap-container { overflow-x: auto; }
.heatmap-row { display: flex; gap: 3px; margin-bottom: 3px; }
.heatmap-header-row { margin-bottom: 6px; }
.heatmap-label {
  width: 40px; flex-shrink: 0; font-size: 11px; font-weight: 600;
  color: var(--text-muted); display: flex; align-items: center;
}
.heatmap-cell {
  flex: 1; min-width: 28px; height: 28px;
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600; color: var(--text);
  transition: all var(--transition); cursor: default;
}
.heatmap-cell:hover { transform: scale(1.1); box-shadow: var(--shadow-sm); }
.heatmap-hour-label { background: transparent !important; font-size: 10px; color: var(--text-muted); font-weight: 600; }
.heatmap-legend { display: flex; align-items: center; gap: 12px; }
.heatmap-legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); font-weight: 500; }
.heatmap-box { width: 14px; height: 14px; border-radius: 3px; }

/* ---- Task Stats ---- */
.task-chart-row { display: flex; align-items: center; gap: 30px; }
.task-chart-wrap { flex-shrink: 0; width: 180px; height: 180px; }
.task-stats-list { flex: 1; }
.task-stat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.task-stat-row:last-child { border-bottom: none; }
.task-stat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.task-stat-label { flex: 1; font-size: 13px; color: var(--text-muted); font-weight: 500; }
.task-stat-val { font-size: 15px; font-weight: 700; color: var(--text); }

/* ---- Application Pipeline ---- */
.app-pipeline { padding: 20px; }
.app-pipeline-stage { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.app-pipeline-bar { height: 28px; border-radius: 6px; min-width: 8px; transition: width 0.6s ease; }
.app-pipeline-info { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.app-pipeline-name { font-size: 12px; font-weight: 600; color: var(--text); }
.app-pipeline-count { font-size: 13px; font-weight: 700; color: var(--text-muted); }

/* ---- Opportunity Funnel ---- */
.opp-funnel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.opp-funnel-row { width: 100%; display: flex; justify-content: center; }
.opp-funnel-bar-wrap { transition: all 0.3s ease; }
.opp-funnel-bar {
  padding: 12px 18px; border-radius: 8px; color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600;
  transition: all 0.3s ease;
}
.opp-funnel-bar:hover { opacity: 0.9; transform: scale(1.01); }
.opp-funnel-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp-funnel-val { font-weight: 700; margin-left: 12px; }

/* ---- Dashboard Responsive ---- */
@media (max-width: 1200px) {
  .stat-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .comm-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .stat-grid-4 { grid-template-columns: 1fr; }
  .dash-row-2, .dash-row-3 { grid-template-columns: 1fr; }
  .perf-grid { flex-direction: column; }
  .perf-chart-wrap { width: 150px; height: 150px; }
  .task-chart-row { flex-direction: column; }
  .task-chart-wrap { width: 150px; height: 150px; }
  .comm-stats-grid { grid-template-columns: 1fr 1fr; }
  .heatmap-cell { min-width: 20px; height: 20px; font-size: 8px; }
  .heatmap-label { width: 30px; font-size: 10px; }
  .dash-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dash-actions { flex-wrap: wrap; gap: 8px; }
  .dashlet-modal { width: 95%; max-width: 95%; }
  .header-search { max-width: none; }
  .header-search input { font-size: 14px; }
  .page-content { padding: 16px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 480px) {
  .stat-grid-4 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .comm-stats-grid { grid-template-columns: 1fr; }
  .dash-actions { flex-direction: column; align-items: stretch; }
  .dash-actions .btn { justify-content: center; }
  .header { padding: 0 12px; }
  .page-content { padding: 12px; }
  .header-search input { height: 36px; font-size: 13px; }
}

/* ============================================
   DASHLET MODAL — Add Dashlets Panel
   ============================================ */

/* ---- Sync Info ---- */
.dash-sync-info {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-muted); line-height: 1.3;
}
.dash-sync-info strong { color: var(--text); font-size: 12px; }
.dash-sync-dot {
  width: 24px; height: 24px; border-radius: 50%;
  background: #22c55e; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='M23 4v6h-6'/%3E%3Cpath d='M1 20v-6h6'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px;
}

/* ---- Modal Overlay ---- */
.dashlet-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.5); align-items: flex-start; justify-content: center;
  padding-top: 60px;
  backdrop-filter: blur(2px);
}
.dashlet-modal-overlay.open { display: flex; }

/* ---- Modal Container ---- */
.dashlet-modal {
  background: var(--card); border-radius: 12px;
  width: 680px; max-width: 90vw;
  max-height: calc(100vh - 120px);
  display: flex; flex-direction: column;
  box-shadow: 0 25px 50px rgba(0,0,0,.2);
  animation: dashletSlideIn .25s ease;
}
@keyframes dashletSlideIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Modal Header ---- */
.dashlet-modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-shrink: 0;
}
.dashlet-modal-title {
  display: flex; align-items: center; gap: 10px;
}
.dashlet-modal-title h3 { font-size: 20px; font-weight: 700; color: var(--text); }
.dashlet-modal-play {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--info); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition);
}
.dashlet-modal-play:hover { background: #2563eb; }
.dashlet-modal-top-right {
  display: flex; align-items: center; gap: 12px;
}
.dashlet-modal-close {
  width: 32px; height: 32px; border-radius: 6px;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: all var(--transition);
}
.dashlet-modal-close:hover { background: var(--bg); color: var(--text); }

/* ---- Category Dropdown ---- */
.dashlet-category-dropdown { position: relative; }
.dashlet-category-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card);
  font-size: 13px; font-weight: 500; color: var(--text);
  cursor: pointer; transition: all var(--transition);
  min-width: 160px; justify-content: space-between;
}
.dashlet-category-btn:hover { border-color: var(--lime); }
.dashlet-category-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 200px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,.15); z-index: 70;
  overflow: hidden;
}
.dashlet-category-menu.open { display: block; }
.dashlet-category-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.dashlet-category-search svg { color: var(--text-muted); flex-shrink: 0; }
.dashlet-category-search input {
  width: 100%; border: none; outline: none;
  font-size: 13px; background: transparent; color: var(--text);
}
.dashlet-category-list { max-height: 200px; overflow-y: auto; padding: 4px 0; }
.dashlet-category-item {
  padding: 9px 16px; font-size: 13px; font-weight: 500;
  color: var(--text); cursor: pointer;
  transition: background var(--transition);
}
.dashlet-category-item:hover { background: var(--bg); }
.dashlet-category-item.active { color: var(--info); font-weight: 600; }

/* ---- Modal Body / Dashlet List ---- */
.dashlet-modal-body {
  flex: 1; overflow-y: auto; padding: 0;
}
.dashlet-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  gap: 16px; transition: background var(--transition);
}
.dashlet-item:hover { background: #f8fafc; }
.dashlet-item:last-child { border-bottom: none; }
.dashlet-item-info { flex: 1; min-width: 0; }
.dashlet-item-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.dashlet-item-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* ---- Toggle Switch ---- */
.dashlet-toggle {
  position: relative; display: inline-block;
  width: 48px; height: 26px; flex-shrink: 0; cursor: pointer;
}
.dashlet-toggle input { opacity: 0; width: 0; height: 0; }
.dashlet-toggle-slider {
  position: absolute; inset: 0;
  background: #cbd5e1; border-radius: 26px;
  transition: background .25s ease;
}
.dashlet-toggle-slider::before {
  content: ''; position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: transform .25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.dashlet-toggle input:checked + .dashlet-toggle-slider { background: var(--info); }
.dashlet-toggle input:checked + .dashlet-toggle-slider::before { transform: translateX(22px); }

/* ---- Modal Footer ---- */
.dashlet-modal-footer {
  padding: 16px 24px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0;
}

/* ============================================
   LEAD FIELDS PAGE
   ============================================ */

/* ---- Header Actions ---- */
.lf-header-actions { display: flex; align-items: center; gap: 4px; }
.lf-icon-btn {
  width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--text-muted);
  cursor: pointer; transition: all var(--transition);
}
.lf-icon-btn:hover { background: var(--bg); color: var(--text); border-color: var(--lime); }

/* ---- Search Bar ---- */
.lf-search-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; margin-bottom: 16px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.lf-search-bar svg { color: var(--text-muted); flex-shrink: 0; }
.lf-search-bar .form-control { flex: 1; }

/* ---- Tab Bar ---- */
.lf-tab-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.lf-tabs { display: flex; gap: 0; }
.lf-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 18px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); background: var(--card);
  color: var(--text-muted); cursor: pointer;
  transition: all var(--transition);
}
.lf-tab:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.lf-tab:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }
.lf-tab:hover { color: var(--text); }
.lf-tab.active { background: var(--info); color: #fff; border-color: var(--info); }
.lf-tab.active svg { stroke: #fff; }
.lf-tab-actions { display: flex; gap: 8px; }

/* ---- Fields Table ---- */
.lf-table { width: 100%; border-collapse: collapse; }
.lf-table thead th {
  padding: 6px 10px; text-align: left;
  font-size: 10px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px;
  background: var(--bg); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.lf-th-label { width: 18%; }
.lf-th-key { width: 18%; }
.lf-th-type { width: 22%; }
.lf-th-props { width: 20%; }
.lf-th-status { width: 14%; }
.lf-th-actions { width: 8%; }

.lf-table tbody td {
  padding: 6px 10px; font-size: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.lf-table tbody tr { transition: background var(--transition); }
.lf-table tbody tr:hover { background: #fafbfc; }
.lf-table tbody tr:last-child td { border-bottom: none; }

/* ---- Field Label Link ---- */
.lf-field-link {
  color: var(--info); font-weight: 600; font-size: 12px;
  text-decoration: none; transition: color var(--transition);
}
.lf-field-link:hover { color: var(--lime-dark); text-decoration: underline; }

/* ---- Field Key ---- */
.lf-td-key code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px; color: var(--text);
}

/* ---- Field Type Cell ---- */
.lf-td-type { }
.lf-td-type > div,
.lf-td-type { display: flex; align-items: center; gap: 10px; }
.lf-type-icon {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--bg); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lf-type-label { font-size: 14px; font-weight: 500; color: var(--text); }
.lf-field-source { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* ---- Field Properties ---- */
.lf-props-row { display: flex; align-items: center; gap: 10px; }
.lf-prop-icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light); transition: color var(--transition);
}
.lf-prop-icon:hover { color: var(--text); }
.lf-prop-required { color: #ef4444 !important; }
.lf-prop-duplicate { color: #b45309; }

/* ---- More Button ---- */
.lf-more-btn { color: var(--text-muted); }
.lf-more-btn:hover { color: var(--text); background: var(--bg); }

/* ---- Checkbox label ---- */
.lf-checkbox-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--text);
  cursor: pointer;
}
.lf-checkbox-label input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer;
  accent-color: var(--info);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .lf-tab-bar { flex-direction: column; align-items: flex-start; }
  .lf-th-props, .lf-td-props { display: none; }
  .lf-th-actions, .lf-td-actions { display: none; }
}

/* Lead Fields — Context Menu */
.lf-context-menu {
  position: absolute; z-index: 9999; min-width: 150px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 4px 0;
  animation: lfCtxFadeIn .15s ease;
}
@keyframes lfCtxFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.lf-ctx-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 14px; border: none; background: none;
  font-size: 13px; color: #334155; cursor: pointer; text-align: left;
}
.lf-ctx-item:hover { background: #f1f5f9; }
.lf-ctx-item svg { flex-shrink: 0; }
.lf-ctx-delete { color: #dc2626; }
.lf-ctx-delete:hover { background: #fef2f2; }

/* ============================================
   Lead Fields — Slide Panel
   ============================================ */

/* Overlay */
.lf-panel-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.lf-panel-overlay.open { opacity: 1; visibility: visible; }

/* Panel */
.lf-panel {
  position: fixed; top: 0; right: -520px;
  width: 510px; max-width: 100vw; height: 100vh;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,.15);
  z-index: 1001;
  display: flex; flex-direction: column;
  transition: right .3s cubic-bezier(.4,0,.2,1);
}
.lf-panel.open { right: 0; }

/* Panel Header */
.lf-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  flex-shrink: 0;
}
.lf-panel-header h3 {
  font-size: 16px; font-weight: 600; color: var(--text);
  margin: 0;
}
.lf-panel-header-right {
  display: flex; align-items: center; gap: 12px;
}
.lf-panel-limit {
  font-size: 12px; color: var(--text-muted);
  background: var(--bg); padding: 3px 10px;
  border-radius: 12px; font-weight: 500;
}
.lf-panel-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: var(--bg);
  border-radius: 6px; cursor: pointer;
  color: var(--text-muted); font-size: 18px;
  transition: background var(--transition), color var(--transition);
}
.lf-panel-close:hover { background: var(--border); color: var(--text); }

/* Progress bar */
.lf-panel-progress {
  height: 3px; background: var(--bg);
  flex-shrink: 0;
}
.lf-panel-progress-bar {
  height: 100%; background: var(--lime);
  border-radius: 0 3px 3px 0;
  transition: width .3s ease;
}

/* Panel Body */
.lf-panel-body {
  flex: 1; overflow-y: auto;
  padding: 0;
}

/* Sections */
.lf-section {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.lf-section:last-child { border-bottom: none; }

.lf-section-gray {
  background: #f8fafc;
}

.lf-section h4 {
  font-size: 13px; font-weight: 700;
  color: var(--text); text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 14px;
}

/* Form rows inside sections */
.lf-section .form-row {
  display: flex; gap: 14px; margin-bottom: 14px;
}
.lf-section .form-row:last-child { margin-bottom: 0; }

.lf-section .form-group {
  flex: 1; display: flex; flex-direction: column;
}

/* ── Floating Label Text Inputs ── */
.lf-fg { position: relative; }

.lf-input-wrap {
  position: relative;
}
.lf-input-wrap .lf-input {
  width: 100%; padding: 14px 12px 6px;
  border: 1px solid var(--border);
  border-radius: 6px; font-size: 14px;
  color: var(--text); background: #fff;
  font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
  outline: none;
}
.lf-input-wrap .lf-input:focus {
  border-color: var(--info);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.lf-input-wrap .lf-label {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px; color: var(--text-muted);
  pointer-events: none;
  transition: all .2s ease;
  background: transparent;
  padding: 0 2px;
  white-space: nowrap;
}
.lf-input-wrap .lf-textarea ~ .lf-label {
  top: 14px; transform: none;
}
/* Float up on focus or when input has value */
.lf-input-wrap .lf-input:focus ~ .lf-label,
.lf-input-wrap .lf-input:not(:placeholder-shown) ~ .lf-label {
  top: -1px; transform: translateY(-50%);
  font-size: 11px; font-weight: 500;
  color: var(--info); background: #fff;
}
.lf-section-gray .lf-input-wrap .lf-input:focus ~ .lf-label,
.lf-section-gray .lf-input-wrap .lf-input:not(:placeholder-shown) ~ .lf-label {
  background: #f8fafc;
}
.lf-textarea {
  resize: vertical; min-height: 60px;
}

/* ── Custom Searchable Select ── */
.lf-select-wrap {
  position: relative;
}
.lf-select-display {
  display: flex; align-items: center;
  min-height: 44px; padding: 14px 36px 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px; background: #fff;
  cursor: pointer; position: relative;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lf-select-wrap.open .lf-select-display {
  border-color: var(--info);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.lf-select-display .lf-label {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px; color: var(--text-muted);
  pointer-events: none;
  transition: all .2s ease;
  background: transparent;
  padding: 0 2px;
  white-space: nowrap;
}
/* Floated label when value selected or open */
.lf-select-wrap.has-value .lf-select-display .lf-label,
.lf-select-wrap.open .lf-select-display .lf-label {
  top: -1px; transform: translateY(-50%);
  font-size: 11px; font-weight: 500;
  color: var(--info); background: #fff;
}
.lf-section-gray .lf-select-wrap.has-value .lf-select-display .lf-label,
.lf-section-gray .lf-select-wrap.open .lf-select-display .lf-label {
  background: #f8fafc;
}
.lf-select-text {
  font-size: 14px; color: var(--text); font-weight: 400;
  flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.lf-select-arrow {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.lf-select-wrap.open .lf-select-arrow {
  transform: translateY(-50%) rotate(180deg);
}

/* Dropdown panel */
.lf-select-dropdown {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--info);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  z-index: 100;
  max-height: 240px;
  overflow: hidden;
}
.lf-select-wrap.open .lf-select-dropdown {
  display: block;
}

/* Search inside dropdown */
.lf-select-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.lf-select-search svg { color: var(--text-light); flex-shrink: 0; }
.lf-select-search-input {
  border: none; outline: none;
  font-size: 14px; color: var(--text);
  width: 100%; background: transparent;
  font-family: inherit;
}

/* Options list */
.lf-select-options {
  max-height: 190px; overflow-y: auto;
}
.lf-select-option {
  padding: 9px 14px;
  font-size: 14px; color: var(--text);
  cursor: pointer;
  transition: background .1s ease;
}
.lf-select-option:hover {
  background: #f1f5f9;
}
.lf-select-option.selected {
  background: #dbeafe; color: var(--info); font-weight: 500;
}
.lf-select-option-header {
  color: var(--text-muted); font-weight: 500;
}
.lf-select-option-header.selected {
  background: #dbeafe;
}

/* Required asterisk */
.lf-req { color: #ef4444; margin-left: 2px; }

/* Checkbox/toggle rows in sections */
.lf-section .lf-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
}
.lf-section .lf-toggle-row + .lf-toggle-row {
  border-top: 1px solid #f1f5f9;
}
.lf-section .lf-toggle-row label {
  font-size: 14px; color: var(--text); font-weight: 500;
  cursor: pointer;
}
.lf-section .lf-toggle-row .lf-toggle-hint {
  font-size: 12px; color: var(--text-muted); font-weight: 400;
  display: block; margin-top: 1px;
}

/* Small toggle switch used in panel */
.lf-switch {
  position: relative; width: 38px; height: 20px; flex-shrink: 0;
}
.lf-switch input { opacity: 0; width: 0; height: 0; }
.lf-switch .lf-switch-slider {
  position: absolute; inset: 0;
  background: #cbd5e1; border-radius: 20px;
  cursor: pointer;
  transition: background .2s ease;
}
.lf-switch .lf-switch-slider::before {
  content: ''; position: absolute;
  width: 16px; height: 16px;
  left: 2px; top: 2px;
  background: #fff; border-radius: 50%;
  transition: transform .2s ease;
}
.lf-switch input:checked + .lf-switch-slider {
  background: var(--lime);
}
.lf-switch input:checked + .lf-switch-slider::before {
  transform: translateX(18px);
}

/* Panel Footer */
.lf-panel-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: #fff; flex-shrink: 0;
}
.lf-panel-footer .btn {
  padding: 9px 22px; border-radius: 6px;
  font-size: 14px; font-weight: 500;
  cursor: pointer; border: 1px solid var(--border);
  transition: all var(--transition);
}
.lf-panel-footer .btn-cancel {
  background: #fff; color: var(--text);
}
.lf-panel-footer .btn-cancel:hover { background: var(--bg); }
.lf-panel-footer .btn-save {
  background: var(--info); color: #fff;
  border-color: var(--info);
}
.lf-panel-footer .btn-save:hover {
  background: #2563eb; border-color: #2563eb;
}

/* Panel responsive */
@media (max-width: 540px) {
  .lf-panel { width: 100vw; right: -100vw; }
  .lf-section .form-row { flex-direction: column; }
}

/* ============================================
   Sidebar — Collapsible Submenu
   ============================================ */
.sidebar-submenu { margin-bottom: 2px; }
.sidebar-submenu-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius);
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.65);
  cursor: pointer;
  transition: all var(--transition);
}
.sidebar-submenu-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-submenu.open .sidebar-submenu-toggle,
.sidebar-submenu-toggle:has(~ .sidebar-submenu-items a.active) { color: #fff; }
.sidebar-submenu-toggle .submenu-arrow {
  margin-left: auto; opacity: .5;
  transition: transform .2s ease;
}
.sidebar-submenu.open .sidebar-submenu-toggle .submenu-arrow {
  transform: rotate(180deg);
}
.sidebar-submenu-items {
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease;
  padding-left: 28px;
}
.sidebar-submenu.open .sidebar-submenu-items {
  max-height: 200px;
}
.sidebar-submenu-items a {
  display: block;
  padding: 7px 14px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.55);
  transition: all var(--transition);
  margin-bottom: 1px;
}
.sidebar-submenu-items a:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar-submenu-items a.active { color: var(--navy); background: var(--lime); font-weight: 600; }

/* ============================================
   Widgets — List Page
   ============================================ */
.wg-header-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wg-pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted);
}
.wg-pagination-info {
  background: var(--bg); padding: 4px 12px;
  border-radius: 4px; font-weight: 500;
}
.wg-pagination-controls {
  display: flex; align-items: center; gap: 4px; font-size: 13px;
}

/* ============================================
   Widget Wizard
   ============================================ */
.wiz-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0;
}
.wiz-header h2 { font-size: 18px; font-weight: 600; }
.wiz-header-right { display: flex; align-items: center; gap: 16px; }
.wiz-steps {
  display: flex; align-items: center; gap: 0;
}
.wiz-step {
  position: relative;
  padding: 8px 28px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  cursor: default;
}
.wiz-step:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 20px 0 0 20px; }
.wiz-step:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); border-radius: 0 20px 20px 0; }
.wiz-step.active { background: var(--lime); color: var(--navy); }
.wiz-step.completed { background: var(--lime-light); color: var(--navy); }

.wiz-progress { height: 4px; background: var(--bg); margin: 12px 0 20px; border-radius: 2px; }
.wiz-progress-bar { height: 100%; background: linear-gradient(90deg, var(--lime), #f59e0b); border-radius: 2px; transition: width .3s ease; }

.wiz-panel { background: #fff; border-radius: var(--radius); border: 1px solid var(--border); }

.wiz-success-msg {
  background: #d1fae5; color: #065f46; padding: 10px 20px;
  text-align: center; font-size: 14px; font-weight: 500;
  border-bottom: 1px solid #a7f3d0;
}

/* Step 1: Form */
.wiz-form { padding: 24px 32px; }
.wiz-form-row {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid #f1f5f9;
}
.wiz-form-row:last-child { border-bottom: none; }
.wiz-label {
  width: 280px; flex-shrink: 0;
  font-size: 14px; font-weight: 500; color: var(--text);
  padding-top: 8px;
}
.wiz-field { flex: 1; }
.wiz-field .form-control {
  width: 100%; max-width: 460px;
}
.wiz-field-double { display: flex; gap: 12px; flex: 1; }
.wiz-field-double .form-control { flex: 1; }
.wiz-field-triple { display: flex; gap: 12px; flex: 1; }
.wiz-field-triple .form-control { flex: 1; }

/* Step 2: Field table */
.wiz-fields-table th { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.wiz-fields-table td { vertical-align: middle; }
.wiz-fields-table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--info); }
.wiz-sort-input { text-align: center; }

/* Step 3: Program Mapping */
.wiz-mapping-section {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 16px; overflow: hidden;
}
.wiz-mapping-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.wiz-mapping-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--info-bg); color: var(--info);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wiz-mapping-label { font-size: 14px; font-weight: 600; display: block; }
.wiz-mapping-count { font-size: 12px; color: var(--text-muted); }
.wiz-mapping-body { padding: 0; }
.wiz-mapping-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-bottom: 1px solid #f1f5f9;
}
.wiz-mapping-actions {
  display: flex; gap: 8px; padding: 8px 16px;
  border-bottom: 1px solid #f1f5f9;
}
.wiz-mapping-list {
  max-height: 220px; overflow-y: auto;
}
.wiz-mapping-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid #f8fafc;
  transition: background .1s;
}
.wiz-mapping-item:hover { background: var(--bg); }
.wiz-mapping-item:last-child { border-bottom: none; }
.wiz-mapping-item input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--info); cursor: pointer; flex-shrink: 0;
}
.wiz-fields-table tr.wiz-field-selected { background: var(--info-bg); }
.wiz-fields-table .wiz-label-input { border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; }
.wiz-fields-table .wiz-label-input:focus { border-color: var(--info); outline: none; }
.wiz-field-delete { opacity: .5; transition: opacity .15s; }
.wiz-field-delete:hover { opacity: 1; }

/* Step 3: Style & Preview layout */
.wiz-step3-layout { display: flex; gap: 0; min-height: 600px; }
.wiz-style-panel {
  width: 360px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto; max-height: 700px;
}
.wiz-style-panel h3 {
  font-size: 15px; font-weight: 600; padding: 16px 20px;
  border-bottom: 1px solid var(--border); margin: 0;
}

/* Accordions */
.wiz-accordion { border-bottom: 1px solid var(--border); }
.wiz-accordion-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--text);
  transition: background .15s ease;
}
.wiz-accordion-header:hover { background: var(--bg); }
.wiz-accordion-header svg { transition: transform .2s ease; color: var(--text-muted); }
.wiz-accordion.open .wiz-accordion-header svg { transform: rotate(180deg); }
.wiz-accordion-body {
  max-height: 0; overflow: hidden; padding: 0 20px;
  transition: max-height .3s ease, padding .3s ease;
}
.wiz-accordion.open .wiz-accordion-body {
  max-height: 75vh; padding: 0 20px 16px; overflow-y: auto;
}
.wiz-accordion-body .form-group { margin-bottom: 10px; }
.wiz-accordion-body .form-group label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; display: block; }
.wiz-accordion-body .form-row { display: flex; gap: 12px; margin-bottom: 10px; }
.wiz-accordion-body .form-group { flex: 1; }

/* Preview panel */
.wiz-preview-panel { flex: 1; display: flex; flex-direction: column; }
.wiz-preview-toolbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text-muted);
}
.wiz-preview-devices { display: flex; gap: 4px; }
.wiz-device {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 6px;
  background: #fff; cursor: pointer;
  color: var(--text-muted);
  transition: all .15s ease;
}
.wiz-device:hover { border-color: var(--info); color: var(--info); }
.wiz-device.active { border-color: var(--info); background: var(--info-bg); color: var(--info); }
.wiz-preview-dims { display: flex; gap: 6px; margin-left: auto; align-items: center; }

.wiz-preview-frame {
  flex: 1; display: flex; align-items: flex-start; justify-content: center;
  padding: 24px; background: #f0f0f0; overflow: auto;
}
.wiz-preview-phone {
  width: 100%; max-width: 400px;
  background: #e8e8e8; border-radius: 28px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  transition: max-width .3s ease;
}
.wiz-phone-notch {
  width: 80px; height: 6px; background: #ccc;
  border-radius: 3px; margin: 0 auto 10px;
}
.wiz-phone-screen {
  background: #fff; border-radius: 16px;
  padding: 20px; min-height: 400px;
  overflow-y: auto; max-height: 500px;
}
.wiz-phone-home {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #ccc; margin: 10px auto 0;
}

/* Wizard footer */
.wiz-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; padding: 16px 24px;
  border-top: 1px solid var(--border);
}

/* Step 4: Field Order drag-and-drop */
.fo-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); border-color: #d1d5db !important; }
.fo-item:active { cursor: grabbing; }
.fo-item.dragging { opacity: 0.4; }

@media (max-width: 900px) {
  .wiz-step3-layout { flex-direction: column; }
  .wiz-style-panel { width: 100%; max-height: none; border-right: none; border-bottom: 1px solid var(--border); }
  .wiz-form-row { flex-direction: column; gap: 8px; }
  .wiz-label { width: auto; padding-top: 0; }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Widget list actions */
.wg-actions { display: flex; align-items: center; gap: 4px; }

/* Embed modal */
.wg-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.4); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.wg-modal {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-md); width: 520px; max-width: 90vw;
}
.wg-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.wg-modal-header h3 { font-size: 16px; font-weight: 600; }
.wg-modal-body { padding: 20px; }

/* ============================================
   Custom Scrollbar
   ============================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* ============================================
   Toast Notifications
   ============================================ */
.toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 2000; display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 20px;
  box-shadow: var(--shadow-lg); display: flex; align-items: center;
  gap: 8px; animation: toastSlideIn .3s ease; min-width: 280px;
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}
.toast.success { border-left: 3px solid var(--lime); }
.toast.error { border-left: 3px solid var(--danger); }
.toast.warning { border-left: 3px solid var(--warning); }
.toast-message { font-size: 13px; color: var(--text); }

/* ============================================
   Status Badges (extended)
   ============================================ */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 4px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
}
.status-badge.success { background: rgba(16,185,129,.1); color: var(--lime); }
.status-badge.warning { background: rgba(245,158,11,.1); color: var(--warning); }
.status-badge.danger { background: rgba(239,68,68,.1); color: var(--danger); }
.status-badge.info { background: rgba(59,130,246,.1); color: var(--info); }

/* ============================================
   Loading Spinner
   ============================================ */
.loading-spinner {
  display: flex; align-items: center; justify-content: center; padding: 48px;
}
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--lime);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ============================================
   Tag Components
   ============================================ */
.tag {
  display: inline-block; padding: 2px 8px;
  border-radius: 4px; font-size: 12px; font-weight: 500;
}
.tag-red { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.tag-yellow { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.tag-blue { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.tag-green { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

/* ============================================
   Inline Code & Code Block
   ============================================ */
.inline-code {
  background: var(--bg); padding: 2px 6px;
  border-radius: 4px; font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .85em; color: var(--danger);
}
.code-block {
  background: #1e293b; color: #e2e8f0;
  padding: 16px; border-radius: var(--radius);
  overflow-x: auto; margin: 16px 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px; line-height: 1.5;
}
.code-block code { color: inherit; background: none; padding: 0; }

/* ══ ATLAS brand theme — navy primary accent (applies app-wide) ══
   Placed last so it wins over the compact-overrides section above.
   --primary was previously undefined; defining it here cascades the
   navy accent to the many `var(--primary, …)` usages across pages. */
:root { --primary: #10b981; --primary-dark: #059669; }

/* ── Canonical page/module title ─────────────────────────────────────
   THE single source of truth for every top-level page heading in the
   CRM. Every module — current and future — must give its main title
   `class="page-title"` (or the equivalent `.page-header h2` structure).
   Never hardcode a title colour/size inline; change the brand here once
   and every page follows. ATLAS TECH accent = emerald #10b981. */
.page-title { font-size: 20px; font-weight: 800; color: #10b981; letter-spacing: -.2px; margin: 0; }
html[data-theme="dark"] .page-title { color: #10b981; }
.page-header h2 { font-size: 20px; font-weight: 800; color: #10b981; letter-spacing: -.2px; }
.btn-primary { background: #10b981; }
.btn-primary:hover { background: #059669; }
.btn-outline { color: #10b981; border-color: #cfcbe6; font-weight: 600; }
.btn-outline:hover { color: #10b981; border-color: #10b981; background: rgba(16,185,129,.06); }
.btn-outline svg { stroke: #10b981; }

/* ═══════════════════════════════════════════════════════════════════
 * Dark Mode — opt-in via `html[data-theme="dark"]`. The toggle in the
 * header (#hbThemeToggle) persists the choice in localStorage and the
 * inline script in head.ejs applies it before the stylesheet paints so
 * there's no flash. The sidebar is already dark navy, so only the page
 * surfaces (body, cards, modals, tables, inputs) get re-themed.
 * ═══════════════════════════════════════════════════════════════════ */
.hb-theme-sun { display: none; }
html[data-theme="dark"] .hb-theme-sun { display: inline-block; }
html[data-theme="dark"] .hb-theme-moon { display: none; }

html[data-theme="dark"] {
  --bg: #0f172a;
  --card: #1e293b;
  --border: #334155;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-light: #64748b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 6px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.35);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.5);
}

/* Body + main surfaces */
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .header { background: #111827; color: var(--text); border-bottom-color: var(--border); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .bka-modal,
html[data-theme="dark"] .qv-dropdown,
html[data-theme="dark"] .qf-menu,
html[data-theme="dark"] .af-dropdown,
html[data-theme="dark"] .ba-menu,
html[data-theme="dark"] .tk-panel,
html[data-theme="dark"] .tk-card { background: var(--card); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .bka-head, html[data-theme="dark"] .bka-foot { border-color: var(--border); }
html[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.65); }

/* Headings + helper text colours (page area only — sidebar stays as-is) */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--text); }
html[data-theme="dark"] .sidebar h1, html[data-theme="dark"] .sidebar small { color: #fff; }
html[data-theme="dark"] .page-header h2 { color: #10b981 !important; }

/* Tables */
html[data-theme="dark"] thead th { background: #111827; color: #cbd5e1; border-bottom-color: var(--border); }
html[data-theme="dark"] tbody td { color: var(--text); border-bottom-color: var(--border); }
html[data-theme="dark"] tbody tr { background: transparent; }
html[data-theme="dark"] tbody tr:hover { background: transparent; }
html[data-theme="dark"] tbody tr:hover td { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .lm-compact tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }
html[data-theme="dark"] .lm-compact tbody tr:hover td { background: rgba(99,102,241,.10); }

/* Form controls */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"], html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #0b1220; color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #64748b; }
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(.85); }

/* Quick-filter chips, view selector, advanced-filter shell */
html[data-theme="dark"] .qf-btn { background: #0b1220; color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .qf-item { color: var(--text); }
html[data-theme="dark"] .qf-item:hover, html[data-theme="dark"] .qv-item:hover, html[data-theme="dark"] .ba-menu .ba-item:hover { background: rgba(255,255,255,.04); }
html[data-theme="dark"] .qv-trigger { background: #0b1220; color: #cbd5e1; border-color: var(--border); }
html[data-theme="dark"] .qv-trigger:hover { background: #111c33; }
html[data-theme="dark"] .af-field-select, html[data-theme="dark"] .af-multi { background: #0b1220; border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .af-dropdown-item:hover { background: rgba(255,255,255,.05); }

/* Buttons */
html[data-theme="dark"] .btn-outline { color: #cbd5e1; border-color: var(--border); }
html[data-theme="dark"] .btn-outline:hover { color: #fff; border-color: #64748b; background: rgba(255,255,255,.05); }
html[data-theme="dark"] .btn-outline svg { stroke: #cbd5e1; }
html[data-theme="dark"] .btn-ghost { color: var(--text); }
html[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.06); }

/* Header search + buttons */
html[data-theme="dark"] .header-search input { background: #0b1220; color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .header-btn { color: #cbd5e1; }
html[data-theme="dark"] .header-btn:hover { background: rgba(255,255,255,.06); }

/* AFDateRange popover */
html[data-theme="dark"] .afdr-pop { background: var(--card); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .afdr-topbox, html[data-theme="dark"] .afdr-cal-head select, html[data-theme="dark"] .afdr-time select { background: #0b1220; color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .afdr-side { background: #0b1220; border-left-color: var(--border); }
html[data-theme="dark"] .afdr-day:hover { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .afdr-day.inrange { background: #1e3a5f; }
html[data-theme="dark"] .afdr-preset { color: #cbd5e1; }
html[data-theme="dark"] .afdr-preset:hover { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .afdr-btn { background: var(--card); color: var(--text); border-color: var(--border); }

/* Settings nav, hr lines, dividers */
html[data-theme="dark"] .settings-nav-item { color: #cbd5e1; }
html[data-theme="dark"] .settings-nav-item.active { background: rgba(16,185,129,.15); color: var(--lime-light); }
html[data-theme="dark"] hr, html[data-theme="dark"] .divider { border-color: var(--border); }

/* ── Extensions / Integration page (`.ig-*`) ── */
html[data-theme="dark"] .ig-shell { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .ig-topbar { border-bottom-color: var(--border); }
html[data-theme="dark"] .ig-title { color: var(--text); }
html[data-theme="dark"] .ig-toptab { color: var(--text-muted); }
html[data-theme="dark"] .ig-toptab.active { color: #93c5fd; }
html[data-theme="dark"] .ig-sidenav { background: #0b1220; border-right-color: var(--border); }
html[data-theme="dark"] .ig-navitem { color: var(--text); }
html[data-theme="dark"] .ig-navitem:hover { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .ig-navitem.active { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; }
html[data-theme="dark"] .ig-card { background: #0b1220; border-color: var(--border); }
html[data-theme="dark"] .ig-card-logo { color: var(--text); }
html[data-theme="dark"] .ig-card-desc { color: var(--text-muted); }
html[data-theme="dark"] .ig-btn { background: rgba(255,255,255,.06); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .ig-btn-primary, html[data-theme="dark"] .ig-card-actions a.ig-btn[style*="background"] { color: #fff; }
html[data-theme="dark"] .ig-detail-head, html[data-theme="dark"] .ig-tabs { border-color: var(--border); }
html[data-theme="dark"] .ig-tab { color: var(--text-muted); }
html[data-theme="dark"] .ig-tab.active { color: #93c5fd; }
html[data-theme="dark"] .ig-muted, html[data-theme="dark"] .ig-empty { color: var(--text-muted); }
html[data-theme="dark"] .ig-kv label { color: var(--text-muted); }
html[data-theme="dark"] .ig-val code { background: #0b1220; color: #cbd5e1; border-color: var(--border); }

/* ── Campaign Dashboard (`.cd-*`) ── */
html[data-theme="dark"] .cd-display-toggle { background: #0b1220; border-color: var(--border); }
html[data-theme="dark"] .cd-tog { color: var(--text-muted); }
html[data-theme="dark"] .cd-tog.active { background: #1d4ed8; color: #fff; }
html[data-theme="dark"] .cd-iconbtn { background: #0b1220; color: var(--text-muted); border-color: var(--border); }
html[data-theme="dark"] .cd-iconbtn:hover { background: rgba(255,255,255,.06); color: #93c5fd; border-color: #1d4ed8; }
html[data-theme="dark"] .cd-filter-bar { background: #0b1220; border-bottom-color: var(--border); }
html[data-theme="dark"] .cd-summary-table thead th { background: #0b1220; color: var(--text-muted); }
html[data-theme="dark"] .cd-summary-table thead th.cd-group { background: rgba(255,255,255,.04); color: var(--text); border-bottom-color: var(--border); }
html[data-theme="dark"] .cd-th-stick, html[data-theme="dark"] .cd-td-stick { background: var(--card); }
html[data-theme="dark"] .cd-summary-table thead .cd-th-stick { background: #0b1220; }
html[data-theme="dark"] .cd-summary-table tr.cd-total td { background: #0b1220; color: var(--text); }
html[data-theme="dark"] .cd-summary-table tbody tr:hover td { background: rgba(255,255,255,.04); }
/* Coloured column groups — darker tints + readable foreground. */
html[data-theme="dark"] .cd-summary-table thead th.cd-g-lead  { background: rgba(59,130,246,.18);  color: #bfdbfe; }
html[data-theme="dark"] .cd-summary-table thead th.cd-g-paid  { background: rgba(249,115,22,.18);  color: #fed7aa; }
html[data-theme="dark"] .cd-summary-table thead th.cd-g-enrol { background: rgba(34,197,94,.18);   color: #bbf7d0; }
html[data-theme="dark"] .cd-summary-table thead th.cd-g-tuition { background: rgba(14,165,200,.18); color: #a5e8f5; }
html[data-theme="dark"] .cd-summary-table thead th.cd-g-stage { background: rgba(139,92,246,.18);  color: #ddd6fe; }
html[data-theme="dark"] .cd-summary-table tbody td.cd-g-lead  { background: rgba(59,130,246,.08);  color: var(--text); }
html[data-theme="dark"] .cd-summary-table tbody td.cd-g-paid  { background: rgba(249,115,22,.08);  color: var(--text); }
html[data-theme="dark"] .cd-summary-table tbody td.cd-g-enrol { background: rgba(34,197,94,.08);   color: var(--text); }
html[data-theme="dark"] .cd-summary-table tbody td.cd-g-tuition { background: rgba(14,165,200,.08); color: var(--text); }
html[data-theme="dark"] .cd-summary-table tbody td.cd-g-stage { background: rgba(139,92,246,.08);  color: var(--text); }
html[data-theme="dark"] .cd-summary-table tbody tr:hover td.cd-g-stage { background: rgba(139,92,246,.14); }
html[data-theme="dark"] .cd-summary-header, html[data-theme="dark"] .cd-summary-tabs { border-color: var(--border); }
html[data-theme="dark"] .cd-summary-tab { color: var(--text-muted); }
html[data-theme="dark"] .cd-summary-tab.active { color: #93c5fd; }

/* ── Generic catch-alls for hardcoded light surfaces used elsewhere ── */
html[data-theme="dark"] .tl-card, html[data-theme="dark"] .tl-preview { background: #0b1220; border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .tl-preview > summary { color: var(--text-muted); }
html[data-theme="dark"] .tl-diff-table td { border-color: var(--border); }
html[data-theme="dark"] .bka-row label, html[data-theme="dark"] .form-group label { color: var(--text-muted); }
html[data-theme="dark"] .badge-secondary { background: rgba(148,163,184,.18); color: #cbd5e1; }
html[data-theme="dark"] code, html[data-theme="dark"] pre { background: #0b1220; color: #cbd5e1; }

/* ── Lead Card / Lead Detail (`.ld-*`, `.tl-*`) ── */
html[data-theme="dark"] .ld-page-title h2, html[data-theme="dark"] .ld-profile-name { color: var(--text); }
html[data-theme="dark"] .ld-back { color: var(--text); }
html[data-theme="dark"] .ld-back:hover { background: rgba(255,255,255,.06); color: #fff; }
html[data-theme="dark"] .ld-page-sep { color: var(--text-light); }
html[data-theme="dark"] .ld-profile-stage { color: var(--text-muted); }
html[data-theme="dark"] .ld-profile-card,
html[data-theme="dark"] .ld-section,
html[data-theme="dark"] .ld-info-card,
html[data-theme="dark"] .ld-tab-content { background: var(--card); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .ld-section-header h4 { color: var(--text); }
html[data-theme="dark"] .ld-section-header svg { color: var(--text-muted); }
html[data-theme="dark"] .ld-contact-row { border-bottom-color: var(--border); }
html[data-theme="dark"] .ld-sidebar-toggle { background: rgba(255,255,255,.04); border-color: var(--border); color: var(--text-muted); }
html[data-theme="dark"] .ld-sidebar-toggle:hover { background: rgba(16,185,129,.12); border-color: #10b981; color: #10b981; }
html[data-theme="dark"] .ld-sidebar-reveal { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .ld-sidebar-reveal:hover { background: rgba(16,185,129,.12); border-color: #10b981; }
html[data-theme="dark"] .ld-contact-item { color: var(--text); }
html[data-theme="dark"] .ld-contact-item svg { color: var(--text-muted); }
html[data-theme="dark"] .ld-score-value { color: var(--text); }
html[data-theme="dark"] .ld-score-label { color: var(--text-light); }
html[data-theme="dark"] .ld-engage { border-top-color: var(--border); }
html[data-theme="dark"] .ld-engage-toggle { color: var(--text); }
html[data-theme="dark"] .ld-engage-meta { color: var(--text-muted); }
html[data-theme="dark"] .ld-commstat-chip { background: rgba(255,255,255,.04); border-color: var(--border); color: var(--text-muted); }
html[data-theme="dark"] .ld-commstat-chip b { color: var(--text); }
/* Keep the per-channel icons colourful (and legible) in dark mode. */
html[data-theme="dark"] .ld-cs-email { background: rgba(37,99,235,.12); border-color: rgba(59,130,246,.35); }
html[data-theme="dark"] .ld-cs-email svg { color: #60a5fa; }
html[data-theme="dark"] .ld-cs-sms { background: rgba(124,58,237,.12); border-color: rgba(139,92,246,.35); }
html[data-theme="dark"] .ld-cs-sms svg { color: #a78bfa; }
html[data-theme="dark"] .ld-cs-wa { background: rgba(22,163,74,.12); border-color: rgba(34,197,94,.35); }
html[data-theme="dark"] .ld-cs-wa svg { color: #4ade80; }
html[data-theme="dark"] .ld-cs-call { background: rgba(13,148,136,.12); border-color: rgba(20,184,166,.35); }
html[data-theme="dark"] .ld-cs-call svg { color: #2dd4bf; }
html[data-theme="dark"] .ld-tabs { background: var(--card); border-bottom-color: var(--border); }
html[data-theme="dark"] .ld-tab { color: var(--text-muted); }
html[data-theme="dark"] .ld-tab:hover, html[data-theme="dark"] .ld-subtab:hover { color: #93c5fd; }
html[data-theme="dark"] .ld-tab.active, html[data-theme="dark"] .ld-subtab.active { color: #93c5fd; border-bottom-color: #3b82f6; }
html[data-theme="dark"] .ld-subtabs { border-bottom-color: var(--border); }
html[data-theme="dark"] .ld-subtab { color: var(--text-muted); }

/* Field rows (Lead Details / Application / Walkin / Hostel) */
html[data-theme="dark"] .ld-field-row { background: transparent; }
html[data-theme="dark"] .ld-field-row:hover { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .ld-field-label { color: var(--text-light); }
html[data-theme="dark"] .ld-field-value-text { color: var(--text); }

/* Quick-action pills + drawer + comms + notes + timeline frames */
html[data-theme="dark"] .ld-qa-btn { background: rgba(255,255,255,.05); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .ld-qa-btn:hover { background: rgba(59,130,246,.15); color: #93c5fd; border-color: #3b82f6; }
html[data-theme="dark"] .ld-note-card,
html[data-theme="dark"] .ld-comm-section,
html[data-theme="dark"] .ld-comm-card,
html[data-theme="dark"] .ld-comm-feed,
html[data-theme="dark"] .tl-msg-text,
html[data-theme="dark"] .tl-preview-pre,
html[data-theme="dark"] #tlMsgFrame { background: #0b1220; border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .ld-comm-itab,
html[data-theme="dark"] .ld-radio-pill,
html[data-theme="dark"] .tl-mini-btn { background: rgba(255,255,255,.05); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .ld-comm-itab:hover,
html[data-theme="dark"] .ld-radio-pill:hover,
html[data-theme="dark"] .tl-mini-btn:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .ld-drawer { background: var(--card); color: var(--text); }
html[data-theme="dark"] .ld-stat-group-title { background: rgba(255,255,255,.06); color: var(--text-muted); }
/* End dark mode */

/* ── Opportunities tab (lead card) ───────────────────────────── */
.ld-tab-count { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 5px; border-radius:8px; background:#e0e7ff; color:#4338ca; font-size:11px; font-weight:700; }
.opp-empty { text-align:center; color:#94a3b8; padding:48px 16px; }
.opp-empty p { margin:12px 0 4px; font-size:14px; font-weight:600; color:#64748b; }
.opp-empty span { font-size:12.5px; }
.opp-list { display:flex; flex-direction:column; gap:12px; padding:4px 0; }
.opp-card { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:14px 16px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.opp-row1 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.opp-program { font-size:14.5px; font-weight:700; color:#1e293b; }
.opp-badge { font-size:11px; font-weight:700; color:#b45309; background:#fef3c7; padding:2px 8px; border-radius:10px; }
.opp-status { font-size:11px; font-weight:600; text-transform:capitalize; padding:2px 8px; border-radius:10px; margin-left:auto; }
.opp-status-open { background:#dcfce7; color:#15803d; }
.opp-status-contacted { background:#fef9c3; color:#a16207; }
.opp-status-counselling { background:#ede9fe; color:#6d28d9; }
.opp-status-converted { background:#dbeafe; color:#1d4ed8; }
.opp-status-dropped { background:#f1f5f9; color:#64748b; }
.opp-status-sel { font-size:12px; padding:3px 8px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#334155; cursor:pointer; margin-left:auto; font-weight:600; }
.opp-owner-row { justify-content:space-between; }
.opp-realloc-btn { font-size:12px; font-weight:700; color:#1d4ed8; background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; padding:5px 12px; cursor:pointer; }
.opp-realloc-btn:hover { background:#dbeafe; }
html[data-theme="dark"] .opp-status-sel { background:var(--card); color:var(--text); border-color:var(--border); }
/* Opportunity re-allocation modal */
.opp-modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:3000; align-items:flex-start; justify-content:center; padding:60px 16px; }
.opp-modal-overlay.open { display:flex; }
.opp-modal { background:#fff; border-radius:14px; width:min(440px,100%); box-shadow:0 24px 60px rgba(15,23,42,.3); overflow:hidden; }
.opp-modal-h { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #eef1f7; }
.opp-modal-h h3 { margin:0; font-size:16px; font-weight:800; color:#1e293b; }
.opp-modal-x { background:none; border:none; font-size:22px; line-height:1; color:#94a3b8; cursor:pointer; }
.opp-modal-b { padding:16px 18px; }
.opp-modal-note { font-size:12.5px; color:#64748b; background:#f8fafc; border:1px solid #eef1f7; border-radius:8px; padding:8px 10px; margin:0 0 12px; }
.opp-modal-prog { font-size:13px; font-weight:700; color:#1e293b; margin-bottom:12px; }
.opp-modal-lbl { display:block; font-size:12px; font-weight:700; color:#475569; margin:10px 0 5px; }
.opp-modal-inp { width:100%; box-sizing:border-box; font-size:13px; padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; }
.opp-modal-f { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
html[data-theme="dark"] .opp-modal { background:var(--card); color:var(--text); }
html[data-theme="dark"] .opp-modal-inp { background:var(--card); color:var(--text); border-color:var(--border); }
.opp-row2 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.opp-chip { font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:10px; }
.opp-sub { font-size:12px; color:#64748b; }
.opp-dates { display:flex; gap:20px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:#64748b; }
.opp-dates strong { color:#334155; font-weight:600; }
.opp-attempts { margin-top:10px; font-size:12px; }
.opp-attempts summary { cursor:pointer; color:#4338ca; font-weight:600; }
.opp-attempts ul { margin:8px 0 0; padding-left:18px; color:#64748b; }
.opp-attempts li { margin:3px 0; }
html[data-theme="dark"] .opp-card { background:var(--card); border-color:var(--border); }
html[data-theme="dark"] .opp-program { color:var(--text); }
html[data-theme="dark"] .opp-dates strong { color:var(--text); }
html[data-theme="dark"] .ld-tab-count { background:rgba(99,102,241,.25); color:#c7d2fe; }

/* ── AI Counselor Copilot (lead card) ─────────────────────────── */
.cp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.cp-h { margin:0; font-size:16px; font-weight:800; color:#1e293b; }
.cp-sub { margin:4px 0 0; font-size:12.5px; color:#64748b; max-width:660px; }
.cp-empty { color:#94a3b8; font-size:13px; padding:24px 4px; }
.cp-intent { font-size:13px; font-weight:700; color:#4338ca; background:#eef2ff; border-radius:8px; padding:8px 12px; margin-bottom:8px; }
.cp-summary { font-size:13px; color:#334155; margin-bottom:14px; }
.cp-card { border:1px solid #e2e8f0; border-radius:10px; margin-bottom:12px; overflow:hidden; background:#fff; }
.cp-card-h { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#475569; background:#f8fafc; padding:9px 14px; border-bottom:1px solid #eef1f7; }
.cp-card-b { padding:12px 14px; font-size:13px; color:#334155; }
.cp-script { white-space:pre-wrap; line-height:1.5; }
.cp-list { margin:0; padding-left:18px; } .cp-list li { margin:5px 0; line-height:1.45; }
.cp-obj { border-left:3px solid #f59e0b; padding:6px 0 6px 10px; margin-bottom:10px; }
.cp-obj-q { font-weight:700; color:#b45309; } .cp-obj-r { color:#334155; margin-top:3px; }
.cp-rec strong, .cp-sch strong { color:#1e293b; }
.cp-sch { margin-bottom:10px; }
.cp-sub2 { color:#64748b; font-size:12.5px; margin-top:3px; }
.cp-fu { margin-bottom:10px; }
.cp-fu-h { display:flex; align-items:center; gap:8px; font-weight:700; color:#1e293b; font-size:12.5px; margin-bottom:4px; }
.cp-fu-b { white-space:pre-wrap; background:#f8fafc; border:1px solid #eef1f7; border-radius:8px; padding:8px 10px; line-height:1.5; }
.cp-copy { border:1px solid #cbd5e1; background:#fff; color:#1d4ed8; font-size:11px; font-weight:700; border-radius:6px; padding:2px 8px; cursor:pointer; margin-left:auto; }
.cp-copy:hover { background:#eff6ff; }
.cp-ts { font-size:11px; color:#94a3b8; margin-top:6px; }
html[data-theme="dark"] .cp-card, html[data-theme="dark"] .cp-fu-b { background:var(--card); border-color:var(--border); }
html[data-theme="dark"] .cp-card-h { background:rgba(255,255,255,.04); color:var(--text-muted); }
html[data-theme="dark"] .cp-h, html[data-theme="dark"] .cp-rec strong { color:var(--text); }

/* AI Copilot — editable follow-up + direct send */
.cp-fu-h { justify-content:space-between; }
.cp-fu-note { font-style:normal; font-size:11px; color:#94a3b8; font-weight:600; }
.cp-fu-edit { width:100%; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:8px; padding:8px 10px; font-size:13px; font-family:inherit; resize:vertical; margin-top:5px; }
.cp-fu-edit:focus { border-color:#6366f1; outline:none; box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.cp-fu-actions { display:flex; align-items:center; gap:8px; margin-top:7px; }
.cp-send { border:none; border-radius:8px; padding:6px 13px; font-size:12px; font-weight:700; cursor:pointer; color:#fff; }
.cp-send-wa { background:#16a34a; } .cp-send-wa:hover { background:#15803d; }
.cp-send-em { background:#1d4ed8; } .cp-send-em:hover { background:#1e40af; }
.cp-tpl { font-size:12px; padding:3px 7px; border:1px solid #cbd5e1; border-radius:7px; background:#fff; color:#334155; max-width:200px; }
html[data-theme="dark"] .cp-fu-edit, html[data-theme="dark"] .cp-tpl { background:var(--card); color:var(--text); border-color:var(--border); }

/* ── Call Logs — transcript & AI summary ──────────────────────── */
.ld-call { border-bottom:1px solid #f1f5f9; padding-bottom:8px; margin-bottom:8px; }
.ld-call-dur { font-size:11px; color:#64748b; background:#f1f5f9; padding:1px 7px; border-radius:8px; }
.ld-call-body { margin:6px 0 0 56px; }
.ld-call-rec { margin-bottom:8px; }
.ld-call-sum { background:#eef2ff; border:1px solid #e0e7ff; border-radius:9px; padding:9px 12px; margin-bottom:8px; }
.ld-call-sum-h { font-size:12px; font-weight:800; color:#4338ca; text-transform:uppercase; letter-spacing:.03em; display:flex; align-items:center; gap:8px; }
.ld-call-sum-b { font-size:13px; color:#1e293b; margin-top:5px; line-height:1.45; }
.ld-call-kp { margin:6px 0 0; padding-left:18px; font-size:12.5px; color:#334155; } .ld-call-kp li { margin:3px 0; }
.ld-call-next { font-size:12.5px; color:#334155; margin-top:6px; }
/* AI summary stat tiles */
.ld-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); gap:8px; margin-top:11px; }
.ld-stat { background:#fff; border:1px solid #e5e9f2; border-radius:10px; padding:8px 10px; }
.ld-stat-v { font-size:19px; font-weight:800; line-height:1; }
.ld-stat-l { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; margin-top:4px; }
.ld-stat-bar { height:4px; border-radius:3px; background:#eef1f7; margin-top:7px; overflow:hidden; }
.ld-stat-bar span { display:block; height:100%; border-radius:3px; }
.ld-stat-good .ld-stat-v { color:#15803d; } .ld-stat-good .ld-stat-bar span { background:#22c55e; }
.ld-stat-mid .ld-stat-v { color:#b45309; } .ld-stat-mid .ld-stat-bar span { background:#f59e0b; }
.ld-stat-bad .ld-stat-v { color:#b91c1c; } .ld-stat-bad .ld-stat-bar span { background:#ef4444; }
/* Objection tags + next-step callout */
.ld-call-tags { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; }
.ld-call-tags-l { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; }
.ld-call-tag { font-size:11px; background:#fff4ed; color:#c2410c; border:1px solid #fed7aa; padding:2px 9px; border-radius:11px; }
.ld-call-cta { display:flex; align-items:baseline; gap:8px; font-size:12.5px; color:#1e293b; margin-top:10px; background:#fff; border:1px solid #e5e9f2; border-left:3px solid #4f46e5; border-radius:8px; padding:7px 11px; }
.ld-call-cta-l { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#4f46e5; flex:0 0 auto; }
html[data-theme="dark"] .ld-stat, html[data-theme="dark"] .ld-call-cta { background:var(--card); border-color:var(--border); }
html[data-theme="dark"] .ld-call-tag { background:rgba(194,65,12,0.18); border-color:transparent; color:#fdba74; }
.ld-call-sent { font-size:10px; font-weight:700; padding:1px 8px; border-radius:9px; text-transform:capitalize; }
.ld-call-sent-positive { background:#dcfce7; color:#15803d; }
.ld-call-sent-neutral { background:#f1f5f9; color:#64748b; }
.ld-call-sent-negative { background:#fee2e2; color:#b91c1c; }
.ld-call-tr { margin-bottom:8px; }
.ld-call-tr summary { cursor:pointer; font-size:12px; font-weight:700; color:#475569; }
.ld-call-tr-b { white-space:pre-wrap; font-size:12.5px; color:#334155; background:#f8fafc; border:1px solid #eef1f7; border-radius:8px; padding:8px 10px; margin-top:6px; line-height:1.5; max-height:240px; overflow-y:auto; }
/* Speaker-labeled transcript — chat layout. Reset pre-wrap (which would
   otherwise render the template's own indentation) and lay turns out as a
   grouped agent-left / student-right conversation with avatars. */
.ld-call-turns .ld-call-tr-b { white-space:normal; padding:10px; background:#f8fafc; }
.ld-chat { display:flex; flex-direction:column; gap:3px; }
.ld-chat-row { display:flex; gap:8px; align-items:flex-start; max-width:86%; }
.ld-chat-row.is-first { margin-top:9px; }
.ld-chat-row:first-child { margin-top:0; }
.ld-chat-row.student { flex-direction:row-reverse; align-self:flex-end; }
.ld-chat-av { flex:0 0 28px; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; letter-spacing:.3px; visibility:hidden; }
.ld-chat-row.is-first .ld-chat-av { visibility:visible; }
.ld-chat-row.agent .ld-chat-av { background:#4f46e5; }
.ld-chat-row.student .ld-chat-av { background:#059669; }
.ld-chat-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ld-chat-row.student .ld-chat-main { align-items:flex-end; }
.ld-chat-name { font-size:11px; font-weight:700; padding:0 2px; }
.ld-chat-time { font-weight:500; color:#94a3b8; font-size:10px; margin-left:4px; }
.ld-chat-row.agent .ld-chat-name { color:#4f46e5; }
.ld-chat-row.student .ld-chat-name { color:#059669; }
.ld-chat-bub { font-size:12.5px; line-height:1.5; padding:7px 11px; border-radius:13px; word-break:break-word; }
.ld-chat-row.agent .ld-chat-bub { background:#eef2ff; color:#312e81; border-top-left-radius:4px; }
.ld-chat-row.student .ld-chat-bub { background:#ecfdf5; color:#064e3b; border-top-right-radius:4px; }
.ld-tr-lang { color:#2563eb; text-decoration:none; font-weight:600; }
.ld-tr-lang:hover { text-decoration:underline; }
html[data-theme="dark"] .ld-call-turns .ld-call-tr-b { background:var(--card); }
html[data-theme="dark"] .ld-chat-row.agent .ld-chat-bub { background:rgba(79,70,229,0.18); color:#c7d2fe; }
html[data-theme="dark"] .ld-chat-row.student .ld-chat-bub { background:rgba(5,150,105,0.18); color:#a7f3d0; }
.ld-call-actions { display:flex; gap:8px; flex-wrap:wrap; }
.ld-call-btn { border:1px solid #cbd5e1; background:#fff; color:#1d4ed8; font-size:11.5px; font-weight:700; border-radius:7px; padding:4px 10px; cursor:pointer; }
.ld-call-btn:hover { background:#eff6ff; }
.ld-call-edit { margin-top:8px; }
.ld-call-edit-ta { width:100%; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:8px; padding:8px 10px; font-size:13px; font-family:inherit; resize:vertical; }
.ld-call-edit-actions { display:flex; gap:8px; margin-top:6px; }
.ld-call-save { color:#fff; background:#16a34a; border-color:#16a34a; } .ld-call-save:hover { background:#15803d; }
html[data-theme="dark"] .ld-call-sum, html[data-theme="dark"] .ld-call-tr-b, html[data-theme="dark"] .ld-call-edit-ta, html[data-theme="dark"] .ld-call-btn { background:var(--card); color:var(--text); border-color:var(--border); }

/* Call Logs — add-call form */
.ld-call-add-wrap { margin:10px 0 14px; }
.ld-call-add { margin-top:10px; padding:12px 14px; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; max-width:520px; }
.ld-call-add-row { display:flex; gap:8px; margin-bottom:8px; }
.ld-call-add select, .ld-call-add input[type=number] { border:1px solid #cbd5e1; border-radius:8px; padding:6px 9px; font-size:13px; }
.ld-call-add .ld-call-edit-ta { margin-bottom:8px; }
.ld-call-add-chk { display:flex; align-items:center; gap:7px; font-size:12.5px; color:#475569; margin-bottom:8px; }
html[data-theme="dark"] .ld-call-add { background:var(--card); border-color:var(--border); }

/* Lead card — per-tab Add button (Follow up / Notes) */
.ld-tab-add { display:flex; justify-content:flex-end; margin-bottom:12px; }
.ld-tab-add-btn { display:inline-flex; align-items:center; gap:7px; background:#10b981; color:#fff; border:none; border-radius:9px; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer; }
.ld-tab-add-btn:hover { background:#059669; }

/* Lead Fields — per-category attribute counts */
.lf-tab-cnt { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; margin-left:7px; border-radius:9px; background:#e0e7ff; color:#4338ca; font-size:11px; font-weight:700; }
.lf-tab.active .lf-tab-cnt { background:#10b981; color:#fff; }
.lf-count-summary { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12.5px; color:#64748b; margin:0 0 12px; padding:8px 14px; background:#f8fafc; border:1px solid #eef1f7; border-radius:9px; }
.lf-cs-strong { font-weight:800; color:#1e293b; }
.lf-cs-custom { color:#16a34a; font-weight:700; }
.lf-cs-grand { margin-left:auto; font-weight:700; color:#10b981; }
html[data-theme="dark"] .lf-count-summary { background:var(--card); border-color:var(--border); color:var(--text-muted); }
html[data-theme="dark"] .lf-cs-strong { color:var(--text); }

/* ── Live call panel (.lc-*) ─────────────────────────────────────────────
   Opened by /js/clicktocall.js on EVERY surface that can start a call — the
   Lead Card, a Lead Manager row, the Application Manager listing, a follow-up
   reminder — so it is defined ONCE here rather than per page: the same call,
   started from two screens, must not look like two different features.
   The counsellor keeps working while talking, so this is a persistent bar
   rather than a toast: it can be minimised out of the way and it ends the call
   itself. Bottom-LEFT, so it never fights the follow-up / lead-in stack on the
   right. */
.lc-panel { position:fixed;left:18px;bottom:18px;z-index:12000;width:310px;background:#fff;
            border:1px solid #e2e8f0;border-left:5px solid #16a34a;border-radius:12px;
            box-shadow:0 12px 34px rgba(15,23,42,.22);padding:12px 14px;font-size:13px; }
.lc-panel.lc-min { width:auto;padding:8px 12px;border-radius:22px; }
.lc-head { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px; }
.lc-live { display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.4px;
           color:#15803d;background:#dcfce7;padding:2px 9px;border-radius:9px; }
.lc-dot { width:7px;height:7px;border-radius:50%;background:#16a34a;animation:lcPulse 1.4s ease-in-out infinite; }
@keyframes lcPulse { 0%,100% { opacity:1;transform:scale(1); } 50% { opacity:.35;transform:scale(.8); } }
.lc-min-btn { border:none;background:none;color:#94a3b8;font-size:15px;line-height:1;cursor:pointer;padding:0 3px; }
.lc-min-btn:hover { color:#475569; }
.lc-who { font-weight:700;color:#1e293b;margin-bottom:1px; }
.lc-sub { color:#64748b;font-size:11.5px;line-height:1.45; }
.lc-timer { font-variant-numeric:tabular-nums;font-weight:700;color:#334155; }
/* Started from a LIST, the counsellor is not looking at the lead — the panel
   offers the card (new tab, like every other lead link) so the call can be
   worked and logged without hunting the row down again. */
.lc-links { margin-top:6px;font-size:11.5px; }
.lc-links a { color:#047857;font-weight:700;text-decoration:none; }
.lc-links a:hover { text-decoration:underline; }
.lc-foot { display:flex;align-items:center;gap:8px;margin-top:10px; }
.lc-end { flex:1;border:none;background:#dc2626;color:#fff;font-size:12.5px;font-weight:700;
          border-radius:8px;padding:8px 10px;cursor:pointer; }
.lc-end:hover { background:#b91c1c; }
.lc-end[disabled] { opacity:.6;cursor:default; }
.lc-mini { display:flex;align-items:center;gap:8px;cursor:pointer; }
.lc-mini .lc-end { flex:0 0 auto;padding:5px 11px;font-size:11.5px; }
html[data-theme="dark"] .lc-panel { background:#1e293b;border-color:var(--border);color:var(--text); }
html[data-theme="dark"] .lc-who { color:var(--text); }

/* The number / phone icon in a LIST is a button that dials through the CRM,
   not a tel: link (which hands the browser its own "Open …?" chooser, dials
   from the desktop and logs nothing). It must still read as the link it
   replaced. */
.lm-call-btn { border:none;background:none;padding:0;font:inherit;color:var(--info);cursor:pointer;
               display:inline-flex;align-items:center;gap:4px;text-align:left; }
.lm-call-btn:hover { text-decoration:underline; }
.lm-call-btn[disabled] { opacity:.55;cursor:default;text-decoration:none; }

/* ── Lead Card · Walk-in Visit History ─────────────────────────────────
   A lead that visited earlier shows each past CampusVisit newest-first
   with WHEN it happened and the Walk-in Tab details captured then
   (CampusVisit.walkinSnapshot). See lead-detail.ejs #subtab-walkin. */
.ld-walkin-history { margin-top: 18px; }
.ld-wh-head { display:flex; align-items:center; gap:7px; font-size:14px; font-weight:800; color:#0f766e; margin-bottom:10px; }
.ld-wh-count { background:#ecfdf5; color:#059669; font-size:12px; font-weight:700; border-radius:10px; padding:1px 8px; }
.ld-visit-card { border:1px solid #e5e7eb; border-left:3px solid #10b981; border-radius:10px; padding:12px 14px; margin-bottom:10px; background:#fff; }
.ld-visit-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.ld-visit-when { font-weight:700; color:#1e293b; font-size:13.5px; }
.ld-visit-latest { font-size:10px; font-weight:800; letter-spacing:.3px; color:#059669; background:#ecfdf5; border-radius:8px; padding:1px 7px; }
.ld-visit-chip { font-size:11px; font-weight:800; border-radius:9px; padding:2px 9px; white-space:nowrap; }
.ld-visit-meta { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:#64748b; margin-bottom:8px; }
.ld-visit-fields { margin-top:4px; }
.ld-visit-note { font-size:12.5px; color:#94a3b8; font-style:italic; padding:4px 0; }
.ld-visit-extra { font-size:12.5px; color:#475569; margin-top:4px; }

/* ── Global click-to-sort tables (js/table-sort.js) ──────────────────────
   Progressive enhancement: any plain data table becomes sortable by clicking
   its column headers. Tables that own their sorting (Lead Manager
   `.sortable-th`, User Manager `.usr-sortable`) are skipped by the script, so
   these rules only style headers the generic sorter enhanced. */
th.crm-sortable { cursor: pointer; user-select: none; }
th.crm-sortable:hover { color: var(--primary); }
th.crm-sortable.crm-sorted { color: var(--primary); }
.crm-sort-ind {
  display: inline-block;
  margin-left: 3px;
  font-size: 9px;
  line-height: 1;
  color: #cbd5e1;
  opacity: .55;
}
th.crm-sortable:hover .crm-sort-ind { opacity: 1; }
th.crm-sorted .crm-sort-ind { color: var(--primary); opacity: 1; }
html[data-theme="dark"] .crm-sort-ind { color: #64748b; }