@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');
:root {
  --bg:#f8fafc;--surface:#fff;--surface2:#f1f5f9;--border:#e2e8f0;--border2:#cbd5e1;
  --text:#1a1916;--text2:#6b6860;--text3:#9e9b94;
  --accent:#423A8E;--accent-light:#ede9ff;--accent-text:#2e2870;
  --danger:#DC3545;--danger-light:#fdf0ee;--warning:#FFC107;--warning-light:#fff8e1;
  --info:#0D6EFD;--info-light:#e8f0ff;--success:#198754;--success-light:#eafaf1;
  --radius:10px;--radius-sm:6px;--font:'DM Sans',sans-serif;--mono:'DM Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;min-height:100vh}
#app{display:flex;min-height:100vh}
/* ── Sidebar slide toggle ── */
#sidebar-toggle-btn{position:fixed;top:50%;left:0;transform:translateY(-50%);z-index:101;background:linear-gradient(135deg,#2e2870,#423A8E);color:#fff;border:none;border-radius:0 10px 10px 0;width:18px;height:56px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:3px 0 12px rgba(0,0,0,0.25);transition:left .3s ease,background .2s;font-size:12px}
#sidebar-toggle-btn:hover{background:linear-gradient(135deg,#423A8E,#00CCCD)}
#sidebar-toggle-btn.collapsed{left:0}
#sidebar-toggle-btn.expanded{left:256px}
#sidebar{width:256px;min-height:100vh;background:linear-gradient(180deg,#1a1650 0%,#2e2870 30%,#27245a 70%,#1a1650 100%);color:#d4d2cc;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 24px rgba(0,0,0,0.35)}
#sidebar::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 10%,rgba(0,204,205,0.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(66,58,142,0.12) 0%,transparent 50%);pointer-events:none}
#sidebar.collapsed{transform:translateX(-256px)}
#sidebar .logo{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,0.1);background:linear-gradient(135deg,rgba(0,204,205,0.2),transparent)}
#sidebar .logo-main{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.5px;text-shadow:0 2px 8px rgba(0,0,0,0.3)}
#sidebar .logo-sub{font-size:12px;color:rgba(255,255,255,0.55);margin-top:3px;font-weight:500;letter-spacing:.03em}
#sidebar nav{flex:1;padding:14px 10px;overflow-y:auto}
.nav-section{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,0.32);padding:12px 10px 6px}
.nav-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;cursor:pointer;color:rgba(255,255,255,0.72);font-size:14px;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);margin-bottom:3px;user-select:none;position:relative;letter-spacing:.01em}
.nav-item:hover{background:rgba(255,255,255,0.1);color:#fff;transform:translateX(3px)}
.nav-item.active{background:linear-gradient(135deg,#423A8E,#00CCCD);color:#fff;box-shadow:0 4px 16px rgba(66,58,142,0.4),inset 0 1px 0 rgba(255,255,255,0.15)}
.nav-item.active::before{content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:4px;height:60%;background:#00CCCD;border-radius:0 3px 3px 0}
.nav-item svg{width:18px;height:18px;flex-shrink:0;opacity:.85}
.nav-item.active svg{opacity:1}
.nav-badge{margin-left:auto;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;box-shadow:0 2px 8px rgba(230,57,70,0.4)}
#sidebar .user-area{padding:14px;border-top:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;gap:11px;background:rgba(0,0,0,0.2)}
.user-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#423A8E,#00CCCD);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 3px 12px rgba(66,58,142,0.4);border:2px solid rgba(255,255,255,0.2)}
.user-name{font-size:13px;color:#7ee8fa;font-weight:700;letter-spacing:.01em}
.user-role{font-size:11px;color:#fbbf24;text-transform:capitalize;font-weight:600;letter-spacing:.03em}
.logout-btn{margin-left:auto;cursor:pointer;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);transition:all .2s cubic-bezier(.4,0,.2,1);color:rgba(255,255,255,.5);flex-shrink:0}
.logout-btn:hover{background:rgba(248,113,113,0.18);border-color:rgba(248,113,113,0.35);color:#f87171;transform:scale(1.08);box-shadow:0 0 14px rgba(248,113,113,0.22)}
.logout-btn svg{width:18px;height:18px;display:block;transition:transform .2s}
.logout-btn:hover svg{transform:translateX(2px)}
#main{margin-left:256px;flex:1;display:flex;flex-direction:column;min-height:100vh;transition:margin-left .3s cubic-bezier(.4,0,.2,1)}
#main.sidebar-collapsed{margin-left:0}
#topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 12px;height:56px;display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:50;overflow:hidden}
#topbar .page-title{display:none}
#topbar .breadcrumb{display:none}
#topbar .topbar-right{margin-left:0;display:flex;align-items:center;gap:8px;flex-shrink:0}
/* Inline marquee in topbar */
#topbar-marquee-wrap{flex:1;overflow:hidden;position:relative;height:56px;display:flex;align-items:center;margin:0 8px}
#topbar-marquee-wrap::before,#topbar-marquee-wrap::after{content:'';position:absolute;top:0;bottom:0;width:32px;z-index:2;pointer-events:none}
#topbar-marquee-wrap::before{left:0;background:linear-gradient(to right,var(--surface),transparent)}
#topbar-marquee-wrap::after{right:0;background:linear-gradient(to left,var(--surface),transparent)}
.tb-marquee-track{display:flex;align-items:center;white-space:nowrap;animation:tbMarquee 36s linear infinite;gap:0;will-change:transform}
.tb-marquee-track:hover{animation-play-state:paused}
@keyframes tbMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tb-chip{display:inline-flex;align-items:center;gap:7px;padding:0 18px;height:56px;cursor:default;transition:background .15s;flex-shrink:0}
.tb-chip:hover{background:var(--surface2)}
.tb-chip-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tb-chip-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tb-chip-label{font-size:12px;font-weight:700;color:#1a1916;letter-spacing:.02em}
.tb-chip-sub{font-size:9px;font-weight:600;color:#4b4840;text-transform:uppercase;letter-spacing:.05em}
.tb-chip-divider{display:inline-block;width:1px;height:22px;background:var(--border);flex-shrink:0}
#content{padding:24px;flex:1}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{font-size:14px;font-weight:600}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.10)}
.stat-card-accent{position:absolute;top:0;left:0;right:0;height:4px;border-radius:14px 14px 0 0}
.stat-card-icon{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.stat-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.stat-value{font-size:48px;font-weight:700;line-height:1;margin-bottom:8px}
.stat-sub{font-size:13px;color:var(--text3);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:13px}
table th{background:var(--surface2);padding:10px 14px;text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);border-bottom:1px solid var(--border);white-space:nowrap}
table td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table tr:last-child td{border-bottom:none}
table tr:hover td{background:var(--surface2)}
.empty-row{text-align:center;padding:40px !important;color:var(--text3)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-fresh{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
.badge-called{background:var(--info-light);color:var(--info)}
.badge-followup{background:var(--warning-light);color:var(--warning)}
.badge-interested{background:var(--success-light);color:var(--success)}
.badge-not_interested{background:var(--danger-light);color:var(--danger)}
.badge-closed{background:var(--accent-light);color:var(--accent-text)}
.badge-admin{background:#f3e8ff;color:#6b21a8}
.badge-manager{background:var(--info-light);color:var(--info)}
.badge-senior{background:var(--warning-light);color:var(--warning)}
.badge-counsellor{background:var(--surface2);color:var(--text2)}
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.form-control{width:100%;padding:9px 12px;border:1px solid var(--border2);border-radius:var(--radius-sm);font-family:var(--font);font-size:13px;background:var(--surface);color:var(--text);transition:border-color .15s,box-shadow .15s;outline:none}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(66,58,142,.15)}
select.form-control{cursor:pointer}
textarea.form-control{resize:vertical;min-height:80px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--radius-sm);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:#2e2870}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border2)}
.btn-secondary:hover{background:var(--surface2)}
.btn-danger{background:var(--danger-light);color:var(--danger);border-color:#f5c6c0}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-xs{padding:3px 8px;font-size:11px}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}
.upload-zone{border:2px dashed var(--border2);border-radius:var(--radius);padding:40px;text-align:center;cursor:pointer;transition:all .2s;background:var(--surface2)}
.upload-zone:hover,.upload-zone.drag{border-color:var(--accent);background:var(--accent-light)}
.upload-zone svg{width:40px;height:40px;color:var(--text3);margin:0 auto 12px;display:block}
.upload-zone .upload-title{font-size:15px;font-weight:600;margin-bottom:4px}
.upload-zone .upload-sub{font-size:12px;color:var(--text3)}
.alert{padding:11px 14px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:14px;display:flex;align-items:flex-start;gap:8px}
.alert-success{background:var(--success-light);color:var(--success);border:1px solid #c3e6cb}
.alert-danger{background:var(--danger-light);color:var(--danger);border:1px solid #f5c6c0}
.alert-info{background:var(--info-light);color:var(--info);border:1px solid #bee5eb}
.alert-warning{background:var(--warning-light);color:var(--warning);border:1px solid #ffd49e}
#login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#1a1650 0%,#2e2870 35%,#423A8E 60%,#2e2870 100%);position:relative;overflow:hidden}
#login-page::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(64,145,108,0.18) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(40,167,69,0.12) 0%,transparent 50%);pointer-events:none}
.login-wrap{width:100%;max-width:860px;display:flex;gap:0;border-radius:20px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,0.5);position:relative;z-index:1}
.login-brand{flex:1;background:#1a1650;padding:0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;min-width:280px;position:relative;overflow:hidden}
/* ── Login Slider ── */
#login-slider{position:relative;width:100%;height:100%;min-height:420px;overflow:hidden;background:#1a1650}
.ls-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;display:flex;flex-direction:column}
.ls-slide.active{opacity:1;z-index:1}
.ls-slide img{width:100%;height:100%;object-fit:cover;display:block}
.ls-slide-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,40,0.82) 0%,rgba(10,8,40,0.18) 60%,transparent 100%)}
.ls-caption{position:absolute;bottom:0;left:0;right:0;padding:20px 22px 28px;z-index:2}
.ls-org{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:5px;display:flex;align-items:center;gap:7px}
.ls-heading{font-size:20px;font-weight:800;color:#fff;line-height:1.22;margin-bottom:5px;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.ls-subheading{font-size:12px;color:rgba(255,255,255,.72);line-height:1.5}
/* nav arrows */
.ls-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(255,255,255,.18);border:none;color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:background .2s}
.ls-arrow:hover{background:rgba(255,255,255,.35)}
.ls-arrow.prev{left:12px}
.ls-arrow.next{right:12px}
/* dots */
.ls-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
.ls-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:all .3s;border:2px solid rgba(255,255,255,.25);padding:0}
.ls-dot:hover{background:rgba(255,255,255,.75);border-color:rgba(255,255,255,.6);transform:scale(1.2)}
.ls-dot:active{background:#fff;transform:scale(0.95)}
.ls-dot.active{width:28px;border-radius:5px;background:#00CCCD;border-color:rgba(0,204,205,.5)}
/* fallback gradient when no slides */
#login-slider.empty{background:linear-gradient(160deg,#2e2870 0%,#423A8E 50%,#00CCCD 100%);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:13px;padding:40px;text-align:center}
@media(max-width:640px){.login-brand{min-height:200px;}.ls-heading{font-size:16px}.ls-arrow{width:28px;height:28px;font-size:13px}}
.login-card{flex:1;background:#fff;border:none;border-radius:0;padding:48px 40px;box-shadow:none;max-width:440px}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo-main{font-size:22px;font-weight:800;background:linear-gradient(135deg,#2e2870,#00CCCD);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}
.login-logo-sub{font-size:12px;color:var(--text3);margin-top:4px}
@media(max-width:640px){.login-wrap{flex-direction:column;max-width:360px;border-radius:16px}.login-brand{padding:30px 28px;min-width:unset}.login-brand-logo{width:80px;height:80px;margin-bottom:14px}.login-brand-title{font-size:18px}.login-brand-feature{display:none}.login-card{padding:28px 24px;border-radius:0}}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:var(--surface);border-radius:14px;width:100%;max-width:980px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.2)}
.modal-header{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:15px;font-weight:600}
.modal-close{cursor:pointer;width:30px;height:30px;border-radius:8px;flex-shrink:0;transition:transform .15s ease}
.modal-close:hover{transform:scale(1.1)}
.modal-body{padding:20px 24px;flex:1 1 auto;overflow-y:auto}
.modal-footer{padding:14px 24px 20px;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--border);flex-shrink:0;position:sticky;bottom:0;background:var(--surface)}
.comment-item{border-left:3px solid var(--border2);padding:8px 12px;margin-bottom:10px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--surface2)}
.comment-meta{font-size:11px;color:var(--text3);margin-bottom:3px}
.comment-text{font-size:13px}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.filter-bar input,.filter-bar select{font-family:var(--font);font-size:13px;padding:8px 12px;border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);outline:none;transition:border-color .15s}
.filter-bar input:focus,.filter-bar select:focus{border-color:var(--accent)}
.filter-bar input{min-width:200px}
#ll-pagination{border-top:1px solid var(--border);margin-top:4px}
#ll-pagination button:hover:not(:disabled){filter:brightness(0.92)}
.overdue-row td{background:#fff8f7 !important}
.today-row td{background:#f0f9f4 !important}
.progress-bar{height:10px;background:var(--border);border-radius:6px;overflow:hidden;cursor:default;transition:box-shadow .2s}
.progress-bar:hover{box-shadow:0 0 0 3px rgba(66,58,142,.15)}
.progress-fill{height:100%;background:var(--accent);border-radius:6px;transition:width .4s,background .25s}
.progress-bar:hover .progress-fill{background:linear-gradient(90deg,var(--accent),#00CCCD)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px}
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99}
#sidebar-overlay.show{display:block}
.loading-screen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:999;flex-direction:column;gap:12px}
.loading-spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:768px){
  #sidebar{transform:translateX(-256px)}
  #sidebar.open{transform:translateX(0)}
  #sidebar.collapsed{transform:translateX(-256px)}
  #main{margin-left:0 !important}
  .hamburger{display:flex}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  #content{padding:14px}
  .filter-bar input{min-width:140px}
  #sidebar-toggle-btn.expanded{left:0}
  #sidebar-toggle-btn.collapsed{left:0}
}
.hidden{display:none !important}
/* Toast notifications */
#toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,0.15);pointer-events:all;animation:toast-in .25s ease;max-width:320px}
.toast-success{background:var(--success);color:#fff}
.toast-danger{background:var(--danger);color:#fff}
.toast-info{background:var(--info);color:#fff}
@keyframes toast-in{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes toast-out{from{opacity:1}to{opacity:0;transform:translateY(8px)}}
@keyframes cl-pop{from{transform:scale(0.7);opacity:0}to{transform:scale(1);opacity:1}}
.cl-lead-chk:checked{accent-color:#7c3aed}
.text-muted{color:var(--text3)}
.text-sm{font-size:12px}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}
.fw-600{font-weight:600}
.mono{font-family:var(--mono)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.phone-link{font-family:var(--mono);font-size:12px;color:var(--text)}
.phone-link:hover{color:var(--accent);text-decoration:underline}
/* ── Scrollbars — bigger, interactive (hover + click color change) ── */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{
  background:var(--surface2);
  border-radius:8px;
}
::-webkit-scrollbar-track:hover{
  background:#e2e8f0;
}
::-webkit-scrollbar-thumb{
  background:var(--border2);
  border-radius:8px;
  border:2px solid var(--surface2);
  transition:background .2s;
}
::-webkit-scrollbar-thumb:hover{
  background:var(--accent);
  border-color:var(--accent-light);
}
::-webkit-scrollbar-thumb:active{
  background:var(--accent-text);
  border-color:var(--accent-light);
}
::-webkit-scrollbar-corner{background:var(--surface2)}

/* Firefox scrollbar */
*{
  scrollbar-width:auto;
  scrollbar-color:var(--border2) var(--surface2);
}
*:hover{
  scrollbar-color:var(--accent) var(--surface2);
}
/* Fresh Leads Ticker Banner */
#fresh-leads-ticker{display:none;overflow:hidden;background:linear-gradient(90deg,#7b2ff7,#f107a3,#ff6b35,#f107a3,#7b2ff7);background-size:300% 100%;animation:tickerGradient 4s ease infinite;color:#fff;font-size:13px;font-weight:600;padding:8px 0;position:relative;z-index:49;border-bottom:1px solid rgba(255,255,255,0.2)}
#fresh-leads-ticker.visible{display:block}
@keyframes tickerGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.ticker-inner{display:flex;align-items:center;white-space:nowrap;animation:tickerScroll 22s linear infinite}
.ticker-inner:hover{animation-play-state:paused}
@keyframes tickerScroll{0%{transform:translateX(100vw)}100%{transform:translateX(-100%)}}
.ticker-text{padding:0 60px;letter-spacing:.02em}
.ticker-icon{font-size:16px;margin-right:8px;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}
/* Fresh Leads card distinct color */
.stat-card-fresh{background:linear-gradient(135deg,#4a1472 0%,#7b2ff7 60%,#b347ff 100%) !important;border:none;color:#fff}
.stat-card-fresh .stat-label{color:rgba(255,255,255,0.75) !important}
.stat-card-fresh .stat-value{color:#fff !important}
.stat-card-fresh .stat-sub{color:rgba(255,255,255,0.65) !important}
/* Disposition styles */
.disp-section{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px}
.sub-disp-wrap{display:none;margin-bottom:4px}
.sub-disp-wrap.visible{display:block}
.disp-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600;background:var(--accent-light);color:var(--accent-text);border:1px solid #c3d9cc}
.admin-disp-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px}
.admin-disp-card-title{font-weight:600;font-size:13px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.sub-disp-pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border2);border-radius:20px;padding:4px 10px;font-size:12px;margin:3px}
.sub-disp-pill button{background:none;border:none;cursor:pointer;color:var(--text3);font-size:14px;line-height:1;padding:0}
.sub-disp-pill button:hover{color:var(--danger)}

/* ═══════════════════════════════════════════
   FLOATING CALENDAR WIDGET
═══════════════════════════════════════════ */
#fc-widget{position:fixed;bottom:24px;right:60px;z-index:9995;display:flex;flex-direction:column;align-items:flex-end}
#fc-icon-btn{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#423A8E,#00CCCD);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(66,58,142,0.45);transition:transform .2s,box-shadow .2s;flex-shrink:0}
#fc-icon-btn:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(66,58,142,0.55)}
#fc-icon-btn svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#fc-popup{position:absolute;bottom:56px;right:0;width:460px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,0.18);padding:0;overflow:hidden;opacity:0;pointer-events:none;transform:scale(0.9) translateY(10px);transform-origin:bottom right;transition:opacity .2s ease,transform .2s ease}
#fc-popup.fc-open{opacity:1;pointer-events:all;transform:scale(1) translateY(0)}
#fc-header{background:linear-gradient(135deg,#423A8E,#2e2870);padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
#fc-month-label{font-size:15px;font-weight:700;color:#fff;letter-spacing:.02em}
.fc-nav-btn{background:rgba(255,255,255,.15);border:none;color:#fff;width:28px;height:28px;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background .15s;flex-shrink:0}
.fc-nav-btn:hover{background:rgba(255,255,255,.3)}
#fc-weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:8px 10px 4px;gap:3px;border-bottom:1px solid var(--border)}
#fc-weekdays span{text-align:center;font-size:10px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;padding:3px 0}
#fc-days{display:grid;grid-template-columns:repeat(7,1fr);padding:6px 10px 12px;gap:4px}
.fc-day{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;padding:5px 6px 6px;border-radius:8px;min-height:54px;cursor:default;transition:background .12s;position:relative;border:1px solid transparent}
.fc-day-num{font-size:13px;font-weight:600;color:var(--text);line-height:1;align-self:flex-end}
.fc-day-badge{display:inline-flex;align-items:center;justify-content:center;margin-top:6px;align-self:center;min-width:36px;padding:3px 8px;border-radius:20px;font-size:12px;font-weight:700;line-height:1;background:#423A8E;color:#fff}
.fc-day.today{background:linear-gradient(135deg,#423A8E,#00CCCD);border-color:transparent}
.fc-day.today .fc-day-num{color:#fff}
.fc-day.today .fc-day-badge{background:rgba(255,255,255,0.25);color:#fff}
.fc-day.has-leads:not(.today){background:#f5f3ff;border-color:#ddd6fe}
.fc-day.has-leads:not(.today) .fc-day-num{color:#1a1916}
.fc-day.overdue:not(.today){background:#fff0f0;border-color:#fecaca}
.fc-day.overdue:not(.today) .fc-day-num{color:#1a1916}
.fc-day.overdue:not(.today) .fc-day-badge{background:#ef4444;color:#fff}
.fc-day.no-leads .fc-day-num{color:var(--text3)}
.fc-day.other-month{opacity:0.4}
.fc-day.other-month .fc-day-num{color:var(--text3)}
.fc-day.other-month .fc-day-badge{display:none}
.fc-footer{border-top:1px solid var(--border);padding:8px 14px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.fc-legend{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--text2)}
.fc-legend-dot{width:8px;height:8px;border-radius:50%}

/* ═══════════════════════════════════════════
   LEAD UPDATE PANEL — Enhanced Design
═══════════════════════════════════════════ */
/* Lead info header bar */
.lead-info-header{
  background:linear-gradient(135deg,#1a1650 0%,#2e2870 60%,#423A8E 100%);
  border-radius:10px 10px 0 0;
  padding:14px 16px;
  margin:-1px -1px 0 -1px;
  position:relative;
  overflow:hidden;
}
.lead-info-header::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 50%,rgba(64,145,108,0.25),transparent 60%);
  pointer-events:none;
}
.lead-info-header .lih-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;position:relative}
.lead-info-header .lih-item{font-size:12px;color:rgba(255,255,255,0.72)}
.lead-info-header .lih-item strong{color:#fff;font-weight:600}
.lead-info-header .lih-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700;background:rgba(255,255,255,0.18);color:#d4edda;border:1px solid rgba(255,255,255,0.25);letter-spacing:.03em}

/* Edit details section */
.lead-edit-details{
  border:1.5px solid var(--border);
  border-radius:8px;
  margin-bottom:14px;
  overflow:hidden;
  transition:box-shadow .2s;
}
.lead-edit-details:focus-within{box-shadow:0 0 0 3px rgba(45,90,61,0.10);border-color:var(--accent)}
.lead-edit-details summary{
  padding:10px 14px;
  font-size:12px;font-weight:700;
  cursor:pointer;
  background:linear-gradient(90deg,var(--surface2),var(--surface));
  color:var(--text2);
  user-select:none;
  border-radius:8px;
  transition:background .15s;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.lead-edit-details summary:hover{background:var(--accent-light);color:var(--accent-text)}
.lead-edit-details .edit-fields-body{
  padding:14px;
  border-top:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;gap:0 12px;
  background:var(--surface);
}

/* Disposition panel card */
.disp-panel{
  background:linear-gradient(135deg,#f0f9f4 0%,#e8f5ec 100%);
  border:1.5px solid #b8ddc8;
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:14px;
  position:relative;
  overflow:hidden;
}
.disp-panel::before{
  content:'';position:absolute;top:-20px;right:-20px;
  width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,rgba(45,90,61,0.08),transparent 70%);
  pointer-events:none;
}
.disp-panel .disp-panel-label{
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:#423A8E;margin-bottom:10px;display:flex;align-items:center;gap:6px;
}
.disp-panel .disp-panel-label::before{content:'';display:inline-block;width:3px;height:12px;background:var(--accent);border-radius:2px}
.disp-section-new{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── Lead Stage Strip — visual-only funnel indicator at top of lead modal ──
   Column count is set inline per-render (style="grid-template-columns:...")
   since the number of stages is admin-configurable, not fixed at 4.
   Active stage: bold gradient + glow + subtle pop-in. Inactive: crisp
   outlined "ghost" pill — no heavy opacity-wash, stays legible and lively. ── */
.lead-stage-strip{
  display:grid;gap:8px;
  margin-bottom:18px;
}
.lead-stage-seg{
  --stage-color:#9ca3af;
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:13px 10px;
  font-family:var(--font);font-size:13px;font-weight:700;
  border-radius:10px;
  background:#fff;
  border:2px solid color-mix(in srgb, var(--stage-color) 35%, #fff);
  color:var(--stage-color);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background .25s,border-color .25s;
  white-space:nowrap;
  overflow:hidden;
  letter-spacing:.2px;
}
.lead-stage-seg.past{
  background:color-mix(in srgb, var(--stage-color) 12%, #fff);
  border-color:color-mix(in srgb, var(--stage-color) 45%, #fff);
  color:color-mix(in srgb, var(--stage-color) 80%, #1f2330);
}
.lead-stage-seg:not(.active):hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--stage-color) 70%, #fff);
  box-shadow:0 4px 10px color-mix(in srgb, var(--stage-color) 20%, transparent);
}
.lead-stage-seg.active{
  background:linear-gradient(135deg, var(--stage-color), color-mix(in srgb, var(--stage-color) 75%, #000));
  border-color:transparent;
  color:#fff;
  transform:scale(1.06);
  box-shadow:0 6px 18px color-mix(in srgb, var(--stage-color) 55%, transparent), 0 0 0 3px color-mix(in srgb, var(--stage-color) 18%, transparent);
  animation:stagePopIn .35s cubic-bezier(.34,1.56,.64,1);
}
.lead-stage-seg.active .lead-stage-seg-icon{
  animation:stageIconBounce .5s ease .15s;
}
@keyframes stagePopIn{
  0%{ transform:scale(.85); }
  60%{ transform:scale(1.1); }
  100%{ transform:scale(1.06); }
}
@keyframes stageIconBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}
.lead-stage-seg-icon{font-size:16px;line-height:1;flex-shrink:0}
.lead-stage-seg-label{overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){
  .lead-stage-strip{grid-template-columns:repeat(2,1fr) !important;gap:8px 8px}
  .lead-stage-seg{font-size:12px;padding:11px 8px}
  .lead-stage-seg::after{ display:none; }
}

/* Follow-up Toggle Slider */
.fu-toggle-wrap{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface);
  border:1.5px solid var(--border2);
  border-radius:10px;
  padding:10px 14px;
  margin-bottom:12px;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.fu-toggle-wrap.fu-required{
  border-color:#198754;background:linear-gradient(90deg,#f0faf4,#fff);
  box-shadow:0 0 0 3px rgba(34,134,58,0.10);
}
.fu-toggle-wrap.fu-not-required{
  border-color:#9ca3af;background:linear-gradient(90deg,#f9fafb,#fff);
  box-shadow:none;
}
.fu-toggle-label-area{display:flex;flex-direction:column;gap:2px}
.fu-toggle-title{font-size:13px;font-weight:700;transition:color .25s}
.fu-toggle-wrap.fu-required .fu-toggle-title{color:#423A8E}
.fu-toggle-wrap.fu-not-required .fu-toggle-title{color:var(--text2)}
.fu-toggle-sub{font-size:11px;color:var(--text3)}
/* The actual iOS-style slide toggle */
.fu-switch{position:relative;display:inline-block;width:64px;height:32px;flex-shrink:0}
.fu-switch input{opacity:0;width:0;height:0;position:absolute}
.fu-slider{
  position:absolute;inset:0;
  background:#d1d5db;
  border-radius:32px;
  cursor:pointer;
  transition:background .3s cubic-bezier(.4,0,.2,1),box-shadow .2s;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.15);
}
.fu-slider:hover{box-shadow:inset 0 1px 3px rgba(0,0,0,0.15),0 0 0 3px rgba(156,163,175,.25)}
.fu-slider::before{
  content:'';
  position:absolute;top:4px;left:4px;
  width:24px;height:24px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,0.22);
  transition:transform .3s cubic-bezier(.4,0,.2,1),background .3s;
}
.fu-switch input:checked + .fu-slider{background:linear-gradient(135deg,#198754,#423A8E);box-shadow:inset 0 1px 3px rgba(0,0,0,.1),0 0 0 3px rgba(25,135,84,.18)}
.fu-switch input:checked + .fu-slider:hover{box-shadow:inset 0 1px 3px rgba(0,0,0,.1),0 0 0 4px rgba(25,135,84,.28)}
.fu-switch input:checked + .fu-slider::before{transform:translateX(32px)}
.fu-switch input:focus + .fu-slider{box-shadow:inset 0 1px 3px rgba(0,0,0,0.15),0 0 0 3px rgba(34,134,58,0.2)}
/* Labels on slider */
.fu-switch-labels{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--text3);
  transition:color .25s;
}
.fu-switch-labels.active-yes{color:#423A8E}
.fu-switch-labels.active-no{color:#6b7280}

/* Follow-up date/time card */
.fu-date-card{
  background:linear-gradient(135deg,#fffbeb 0%,#fef9ee 100%);
  border:1.5px solid #fbbf24;
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:14px;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.fu-date-card.hidden-slide{
  max-height:0!important;padding:0 14px;border-width:0;margin-bottom:0;opacity:0;
  pointer-events:none;
}
.fu-date-card-label{
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:#b45309;margin-bottom:10px;display:flex;align-items:center;gap:6px;
}
.fu-date-card-label::before{content:'';display:inline-block;width:3px;height:12px;background:#f59e0b;border-radius:2px}

/* Notes card */
.notes-card{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:14px;
  transition:border-color .2s,box-shadow .2s;
}
.notes-card:focus-within{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,0.15)}
.notes-card-label{
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:#1d4ed8;margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
.notes-card-label::before{content:'';display:inline-block;width:3px;height:12px;background:#60a5fa;border-radius:2px}

/* Share Fee Checkbox */
.share-fee-chk-wrap{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px 4px 8px;
  border-radius:20px;
  border:1.5px solid #93c5fd;
  background:linear-gradient(90deg,#eff6ff,#fff);
  cursor:pointer;
  transition:all .2s;
  user-select:none;
  font-size:11px;font-weight:700;color:#1e40af;
  white-space:nowrap;
  position:relative;
}
.share-fee-chk-wrap:hover{border-color:#3b82f6;background:#dbeafe}
.share-fee-chk-wrap.fee-checked{
  border-color:#059669;background:linear-gradient(90deg,#d1fae5,#ecfdf5);color:#065f46;
  box-shadow:0 0 0 3px rgba(5,150,105,0.12);
}
.share-fee-chk-wrap input[type=checkbox]{
  width:14px;height:14px;cursor:pointer;accent-color:#059669;
}
.share-fee-chk-wrap .sfc-icon{font-size:13px;line-height:1}
.share-fee-pdf-status{
  display:none;font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;
  margin-top:4px;
}
.share-fee-pdf-status.generating{display:inline-flex;background:#fef9c3;color:#92400e;border:1px solid #fde68a}
.share-fee-pdf-status.ready{display:inline-flex;background:#d1fae5;color:#065f46;border:1px solid #6ee7b7}
.share-fee-pdf-status.error{display:inline-flex;background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}

/* Course Fee Toggle */
.cf-toggle-wrap{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,#eff6ff,#fff);
  border:1.5px solid #93c5fd;
  border-radius:10px;
  padding:10px 14px;
  margin-bottom:12px;
  transition:border-color .25s,background .25s,box-shadow .25s;
  cursor:pointer;
}
.cf-toggle-wrap.cf-active{
  border-color:#2563eb;background:linear-gradient(90deg,#dbeafe,#eff6ff);
  box-shadow:0 0 0 3px rgba(37,99,235,0.10);
}
.cf-toggle-title{font-size:13px;font-weight:700;color:#1e40af}
.cf-toggle-sub{font-size:11px;color:#6b7280;margin-top:2px}

/* Course Fee Panel */
.cf-fee-panel{
  background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%);
  border:1.5px solid #38bdf8;
  border-radius:12px;
  padding:0 14px;
  margin-bottom:14px;
  transition:all .35s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
  max-height:0;
  opacity:0;
  pointer-events:none;
}
.cf-fee-panel.cf-open{
  max-height:600px;
  opacity:1;
  padding:14px;
  pointer-events:all;
}
.cf-fee-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.cf-fee-panel-title{
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:#0369a1;display:flex;align-items:center;gap:6px;
}
.cf-fee-panel-title::before{content:'';display:inline-block;width:3px;height:12px;background:#38bdf8;border-radius:2px}
.cf-close-btn{
  background:none;border:none;cursor:pointer;font-size:16px;color:#64748b;
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;line-height:1;padding:0;
}
.cf-close-btn:hover{background:#fee2e2;color:#dc2626}
.cf-fee-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:12px}
.cf-fee-table th{
  background:linear-gradient(90deg,#0369a1,#0284c7);color:#fff;
  padding:7px 10px;text-align:left;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
}
.cf-fee-table th:first-child{border-radius:6px 0 0 0}
.cf-fee-table th:last-child{border-radius:0 6px 0 0;text-align:right}
.cf-fee-table td{padding:7px 10px;border-bottom:1px solid #bae6fd;vertical-align:middle}
.cf-fee-table tr:last-child td{border-bottom:none}
.cf-fee-table tr.cf-total-row td{
  background:linear-gradient(90deg,#0c4a6e,#075985);color:#fff;
  font-weight:700;font-size:13px;border-radius:0 0 6px 6px;
}
.cf-fee-table td:last-child{text-align:right;font-weight:600}
.cf-fee-table tr.cf-total-row td:last-child{color:#fde68a}
.cf-badge{
  display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;
}
.cf-badge-annual{background:#ede9ff;color:#423A8E}
.cf-badge-sem{background:#fef9c3;color:#854d0e}
.cf-note{font-size:10px;color:#64748b;margin-top:8px;font-style:italic;text-align:center}

/* Reassign card */
.reassign-card{
  background:linear-gradient(135deg,#fdf4ff 0%,#faf5ff 100%);
  border:1.5px solid #e9d5ff;
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:14px;
}
.reassign-card-label{
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:#6b21a8;margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
.reassign-card-label::before{content:'';display:inline-block;width:3px;height:12px;background:#a855f7;border-radius:2px}

/* Enhanced form controls inside modal */
.lm-select,.lm-input,.lm-textarea{
  width:100%;padding:9px 12px;
  border:1.5px solid var(--border2);border-radius:7px;
  font-family:var(--font);font-size:13px;
  background:var(--surface);color:var(--text);
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.lm-select:focus,.lm-input:focus,.lm-textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,90,61,.12)
}
.lm-textarea{resize:vertical;min-height:76px}
.lm-select{cursor:pointer}

/* ═══════════════════════════════════════════
   RESPONSIVE — Mobile / Tablet / Desktop
═══════════════════════════════════════════ */

/* Fluid content box */
#content { padding: 20px; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
#main { overflow-x: hidden; }

/* Tables scroll horizontally on small screens */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { min-width: 500px; }

/* Cards + grids fluid */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card { box-sizing: border-box; width: 100%; }

/* Modal always fits viewport */
.modal-box { max-width: min(980px, 97vw); max-height: 90vh; box-sizing: border-box; }

/* Filter bar wraps */
.filter-bar { flex-wrap: wrap; gap: 8px; }
.filter-bar input, .filter-bar select { flex: 1 1 140px; min-width: 120px; max-width: 100%; box-sizing: border-box; }

/* Topbar: don't overflow */
#topbar { flex-wrap: wrap; min-height: 56px; height: auto; padding: 8px 16px; gap: 8px; }
#topbar-actions { flex-wrap: wrap; gap: 6px; }

/* ── Tablet (769–1024px) ── */
@media (max-width: 1024px) and (min-width: 769px) {
  #sidebar { width: 220px; }
  #main { margin-left: 220px; }
  #sidebar-toggle-btn.expanded { left: 220px; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  #content { padding: 16px; }
  .disp-section { grid-template-columns: 1fr; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  #sidebar { width: 260px; transform: translateX(-260px); }
  #sidebar.open { transform: translateX(0); }
  #main { margin-left: 0 !important; }
  .hamburger { display: flex !important; }
  #sidebar-toggle-btn { display: none; }

  #content { padding: 12px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .grid-2 { grid-template-columns: 1fr; }

  .modal-box { max-width: 98vw; margin: 4px auto; border-radius: 12px; }

  /* Admin 3-col → 1-col */
  div[style*="grid-template-columns:1fr 1fr 1fr"] { display: flex !important; flex-direction: column !important; }
  /* Admin 2-col → 1-col */
  div[style*="grid-template-columns:1fr 1fr"] { display: flex !important; flex-direction: column !important; }
  div[style*="grid-template-columns:2fr 1fr"] { display: flex !important; flex-direction: column !important; }

  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar input, .filter-bar select { max-width: 100%; }

  /* Table font smaller on mobile */
  table { font-size: 12px; min-width: 420px; }
  th, td { padding: 6px 8px !important; }

  /* Topbar page title size */
  #topbar .page-title { font-size: 13px; }

  /* Button groups wrap */
  .btn-group { flex-wrap: wrap; gap: 4px; }

  /* Card padding reduced */
  .card { padding: 12px; }

  /* Report field grid → 2 col */
  #report-fields-grid .grid-section-cols { grid-template-columns: repeat(2, 1fr) !important; }

  /* Hide breadcrumb on mobile */
  #topbar .breadcrumb { display: none; }
}

/* ── Small phones (≤400px) ── */
@media (max-width: 400px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stat-card { padding: 10px 12px; }
  .stat-value { font-size: 20px; }
  #content { padding: 8px; }
  .card { padding: 10px; }
}

/* ── Call Button ── */
.call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00CCCD, #198754);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 6px rgba(34,197,94,0.35);
  border: none;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 6px;
}
.call-btn:hover { transform: scale(1.12); box-shadow: 0 4px 10px rgba(34,197,94,0.5); text-decoration: none; }
.call-btn:active { transform: scale(0.95); }
.phone-with-call { display: inline-flex; align-items: center; gap: 4px; }

/* ── Mobile card view for leads table ── */
.lead-mobile-card {
  display: none;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.lead-mobile-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.lead-mobile-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.lead-mobile-card-name { font-weight: 700; font-size: 14px; color: var(--text); flex: 1; min-width: 0; }
.lead-mobile-card-phone-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.lead-mobile-card-phone { font-family: var(--mono); font-size: 13px; color: var(--text2); }
.lead-mobile-card-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.lead-mobile-card-actions { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.lead-mobile-card-actions .btn { flex: 1; font-size: 12px; padding: 6px 10px; text-align: center; }

@media (max-width: 768px) {
  /* Hide desktop table, show mobile cards */
  .leads-desktop-table { display: none !important; }
  .leads-mobile-cards { display: block !important; }
  .lead-mobile-card { display: block; }

  /* Stack filter bar fully */
  #ll-search { max-width: 100% !important; width: 100%; }
  #ll-status, #ll-fu { max-width: 100% !important; }

  /* Dashboard scope banner compact */
  .dash-scope-banner { padding: 10px 14px !important; }
  .dash-scope-banner > div:first-child { margin-bottom: 6px; }

  /* Stat cards full-width pair */
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .stat-card { padding: 12px !important; }
  .stat-value { font-size: 22px !important; }
  .stat-label { font-size: 10px !important; }

  /* Modal full screen on mobile — keyboard-safe layout */
  .modal-overlay { align-items: flex-end !important; }
  .modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
  .modal-box {
    max-width: 100vw !important; width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92svh !important;
    display: flex !important; flex-direction: column !important;
    /* When keyboard opens, browser shrinks visual viewport — modal shrinks too */
  }
  .modal-header { flex-shrink: 0; }
  .modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-footer {
    flex-shrink: 0;
    position: sticky; bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    /* Lift above keyboard — iOS/Android handle this via interactive-widget */
  }
  /* Pull textarea above keyboard automatically when focused */
  .lm-textarea:focus, textarea:focus {
    scroll-margin-bottom: 120px;
  }

  /* Follow-up cards grid → 1 col */
  div[style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns: 1fr !important; }

  /* Team progress grid → 2 col */
  div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  div[style*="grid-template-columns:repeat(6,1fr)"] { grid-template-columns: repeat(3,1fr) !important; }

  /* Topbar tighter */
  #topbar { padding: 8px 12px !important; }

  /* Make filter bar inputs full width */
  .filter-bar { flex-direction: column !important; }
  .filter-bar input, .filter-bar select { max-width: 100% !important; width: 100%; }

  /* User breakdown table on dashboard scroll horizontally */
  .team-breakdown-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Lead modal phone buttons bigger on mobile */
  .phone-link { font-size: 14px !important; }
  .call-btn { width: 32px; height: 32px; font-size: 15px; }
}

@media (max-width: 400px) {
  .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 6px; }
  .stat-card-icon { display: none; }
}

/* ── Notification Bell ── */
#notif-bell-wrap {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: background .15s;
}
#notif-bell-wrap:hover { background: var(--surface2); }
#notif-bell { font-size: 18px; }
#notif-badge {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 4px;
  min-width: 14px;
  text-align: center;
  display: none;
  line-height: 14px;
}
#notif-panel {
  position: fixed;
  top: 56px;
  right: 12px;
  width: min(340px, 95vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  z-index: 999;
  display: none;
  max-height: 420px;
  overflow-y: auto;
}
#notif-panel.open { display: block; }
.notif-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
  font-size: 13px;
}
.notif-item:hover { background: var(--accent-light); }
.notif-item.unread { background: #f0faf5; border-left: 3px solid var(--accent); }
.notif-item-title { font-weight: 600; margin-bottom: 2px; }
.notif-item-sub { font-size: 11px; color: var(--text3); }
.notif-empty { padding: 20px; text-align: center; color: var(--text3); font-size: 13px; }

/* ── GLA University Marquee Banner ── */
#gla-marquee-bar {
  width: 100%;
  background: linear-gradient(90deg, #1a1650 0%, #2e2870 30%, #1a1650 60%, #2e2870 90%, #1a1650 100%);
  background-size: 300% 100%;
  animation: glaBarShimmer 6s ease infinite;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(0,204,205,0.25);
  height: 44px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: default;
  z-index: 48;
}
#gla-marquee-bar::before,
#gla-marquee-bar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
#gla-marquee-bar::before {
  left: 0;
  background: linear-gradient(to right, #1a1650, transparent);
}
#gla-marquee-bar::after {
  right: 0;
  background: linear-gradient(to left, #1a1650, transparent);
}
@keyframes glaBarShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gla-marquee-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: glaMarqueeScroll 38s linear infinite;
  gap: 0;
  will-change: transform;
}
.gla-marquee-track:hover { animation-play-state: paused; }
@keyframes glaMarqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.gla-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  height: 44px;
  position: relative;
  transition: background .2s;
}
.gla-chip:hover { background: rgba(0,204,205,0.12); }
.gla-chip-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.gla-chip-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.gla-chip-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gla-chip-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.gla-chip-label {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .03em;
}
.gla-chip-sub {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  letter-spacing: .04em;
  text-transform: uppercase;
}


/* ── Quick-Launch Floating Bar ── */
#quick-launch-bar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9990;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 14px 0 0 14px;
  overflow: visible;
  box-shadow: -4px 0 24px rgba(0,0,0,0.22);
}
.ql-btn {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  outline: none;
  transition: filter .15s, transform .15s;
  text-decoration: none;
  flex-shrink: 0;
  border-radius: 0;
}
.ql-btn:first-child { border-radius: 14px 0 0 0; }
.ql-btn:last-child  { border-radius: 0 0 0 14px; }
.ql-btn:hover { filter: brightness(1.14); transform: translateX(-3px); }
.ql-btn svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform .15s;
  position: relative;
  z-index: 1;
}
.ql-btn:hover svg { transform: scale(1.1); }

/* Expanded label panel that slides out on hover */
.ql-label {
  position: absolute;
  right: 100%;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 14px 0 12px;
  background: inherit;
  border-radius: 10px 0 0 10px;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(100%);
  opacity: 0;
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s;
  box-shadow: -4px 0 16px rgba(0,0,0,0.18);
}
.ql-label-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ql-label-name {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
  line-height: 1.2;
}
.ql-label-url {
  font-size: 10px;
  color: rgba(255,255,255,0.65);
  font-family: monospace;
  letter-spacing: .02em;
}
.ql-btn:hover .ql-label {
  transform: translateX(0);
  opacity: 1;
  pointer-events: none;
}

/* Arrow connector */
.ql-label::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid inherit;
}

@media (max-width: 768px) {
  #quick-launch-bar { display: none; }
}