/* ============================================================
   Realty Setu CRM — Complete Design System
   theme.css
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES
   ============================================================ */

:root {
  --accent:           #6c63ff;
  --accent2:          #9b59ff;
  --accent-gradient:  linear-gradient(135deg, #6c63ff, #9b59ff);
  --accent-glow:      rgba(108, 99, 255, 0.25);
  --success:          #22c55e;
  --warning:          #f59e0b;
  --danger:           #ef4444;
  --info:             #06b6d4;

  --font:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', monospace;

  --sidebar-w:         240px;
  --sidebar-collapsed: 68px;
  --topbar-h:          64px;
  --footer-h:          44px;

  --transition:        0.2s ease;
  --transition-slow:   0.3s ease;
}

/* ---- DARK THEME (default) ---- */
[data-theme="dark"] {
  --bg:                  #0d1117;
  --bg2:                 #161b27;
  --sidebar-bg:          #111827;
  --sidebar-hover:       rgba(255,255,255,0.07);
  --sidebar-active:      rgba(108,99,255,0.18);
  --sidebar-active-border: #6c63ff;
  --card:                #1e2540;
  --card2:               #232d42;
  --topbar:              #111827;
  --border:              rgba(255,255,255,0.09);
  --border2:             rgba(255,255,255,0.14);
  --text:                #f1f5f9;
  --text2:               #b0bcd4;
  --text3:               #f1f5f9;
  --text-heading:        #ffffff;
  --text-primary:        #f1f5f9;
  --input-bg:            rgba(255,255,255,0.06);
  --input-border:        rgba(255,255,255,0.13);
  --shadow:              0 4px 24px rgba(0,0,0,0.3);
  --shadow-card:         0 2px 12px rgba(0,0,0,0.2);
}

/* ---- LIGHT THEME ---- */
[data-theme="light"] {
  --bg:                  #f4f6fb;
  --bg2:                 #eef0f7;
  --sidebar-bg:          #ffffff;
  --sidebar-hover:       rgba(108, 99, 255, 0.08);
  --sidebar-active:      rgba(108, 99, 255, 0.12);
  --sidebar-active-border: #6c63ff;
  --card:                #ffffff;
  --card2:               #f8f9fc;
  --topbar:              #ffffff;
  --border:              #e8ecf4;
  --border2:             #d8dff0;
  --text:                #2d3554;
  --text2:               #6b7a9d;
  --text3:               #2d3554;
  --text-heading:        #1a2035;
  --text-primary:        #1a2035;
  --input-bg:            #f4f6fb;
  --input-border:        #d8dff0;
  --shadow:              0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-card:         0 2px 12px rgba(0, 0, 0, 0.04);
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  font-family:             var(--font);
  font-size:               13px;
  line-height:             1.6;
  background:              var(--bg);
  color:                   var(--text);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color:      var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--accent2); }

img { max-width: 100%; display: block; }

button, input, select, textarea { font-family: var(--font); font-size: 13px; }
button    { cursor: pointer; }
ul, ol    { list-style: none; }

/* Custom scrollbar */
::-webkit-scrollbar              { width: 4px; height: 4px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--border2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: var(--text3); }


/* ============================================================
   3. LAYOUT
   ============================================================ */

.app-shell {
  display:  flex;
  height:   100vh;
  overflow: hidden;
}

.main-area {
  flex:           1;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  min-width:      0;
}

.page-content {
  flex:       1;
  overflow-y: auto;
  padding:    22px;
}

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* Flex helpers */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap-8   { display: flex; align-items: center; gap: 8px; }
.flex-gap-12  { display: flex; align-items: center; gap: 12px; }
.flex-gap-16  { display: flex; align-items: center; gap: 16px; }

/* Spacing utilities */
.mt-0  { margin-top:    0; }
.mt-8  { margin-top:    8px; }
.mt-12 { margin-top:   12px; }
.mt-16 { margin-top:   16px; }
.mt-20 { margin-top:   20px; }
.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }

/* Text utilities */
.text-sm      { font-size: 12px; }
.text-xs      { font-size: 11px; }
.text-muted   { color: var(--text3); }
.text-heading { color: var(--text-heading); }
.text-accent  { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.font-600     { font-weight: 600; }
.font-700     { font-weight: 700; }
.font-800     { font-weight: 800; }

/* Display utilities */
.d-none    { display: none; }
.d-block   { display: block; }
.d-flex    { display: flex; }
.d-grid    { display: grid; }
.w-100     { width: 100%; }
.h-100     { height: 100%; }


/* ============================================================
   4. SIDEBAR
   ============================================================ */

.sidebar {
  width:           var(--sidebar-w);
  background:      var(--sidebar-bg);
  display:         flex;
  flex-direction:  column;
  border-right:    1px solid var(--border);
  transition:      width var(--transition-slow);
  overflow:        hidden;
  flex-shrink:     0;
  position:        relative;
  z-index:         100;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

/* Logo / brand area */
.sb-logo {
  height:          var(--topbar-h);
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  padding:         0 16px;
  border-bottom:   1px solid var(--border);
  flex-shrink:     0;
  overflow:        hidden;
  white-space:     nowrap;
}

.sb-logo-icon {
  width:           36px;
  height:          36px;
  border-radius:   10px;
  background:      var(--accent-gradient);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.sb-logo-icon svg { width: 20px; height: 20px; }

.sb-logo-text {
  overflow:   hidden;
  transition: opacity var(--transition-slow), width var(--transition-slow);
  opacity:    1;
}

.sb-logo-text .sb-brand-name {
  font-size:   17px;
  font-weight: 800;
  color:       #fff;
  line-height: 1.2;
}

.sb-logo-text .sb-brand-tag {
  font-size:      9px;
  font-weight:    600;
  color:          var(--text3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.sidebar.collapsed .sb-logo-text {
  opacity: 0;
  width:   0;
}

/* Navigation */
.sb-nav {
  flex:       1;
  overflow-y: auto;
  padding:    10px 0;
}

.sb-section-label {
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--accent);
  font-weight:    700;
  padding:        14px 18px 6px;
  white-space:    nowrap;
  overflow:       hidden;
  transition:     opacity var(--transition-slow), height var(--transition-slow), padding var(--transition-slow);
}

.sidebar.collapsed .sb-section-label {
  opacity: 0;
  height:  0;
  padding: 0;
}

/* Nav item */
.sb-item {
  display:         flex;
  align-items:     center;
  gap:             11px;
  padding:         9px 14px;
  color:           var(--text2);
  border-left:     3px solid transparent;
  transition:      background var(--transition), color var(--transition), border-color var(--transition);
  cursor:          pointer;
  white-space:     nowrap;
  position:        relative;
  text-decoration: none;
}

.sb-item:hover {
  background: var(--sidebar-hover);
  color:      var(--text);
}

.sb-item.active {
  background:        var(--sidebar-active);
  border-left-color: var(--sidebar-active-border);
  color:             #fff;
}

.sb-item svg,
.sb-item .sb-item-icon {
  width:       17px;
  height:      17px;
  opacity:     0.75;
  flex-shrink: 0;
  transition:  opacity var(--transition);
}

.sb-item:hover svg,
.sb-item:hover .sb-item-icon,
.sb-item.active svg,
.sb-item.active .sb-item-icon { opacity: 1; }

.sb-item-text {
  flex:        1;
  font-size:   14.5px;
  font-weight: 500;
  overflow:    hidden;
  transition:  opacity var(--transition-slow), width var(--transition-slow);
}

.sidebar.collapsed .sb-item-text { opacity: 0; width: 0; }

.sb-item-badge {
  font-size:    10px;
  font-weight:  700;
  background:   var(--danger);
  color:        #fff;
  padding:      2px 6px;
  border-radius: 10px;
  line-height:  1.4;
  transition:   opacity var(--transition-slow);
  white-space:  nowrap;
}

.sidebar.collapsed .sb-item-badge { opacity: 0; width: 0; overflow: hidden; }

.sb-arrow {
  width:       12px;
  height:      12px;
  opacity:     0.5;
  transition:  transform var(--transition), opacity var(--transition-slow);
  flex-shrink: 0;
}

.sb-item.open > .sb-arrow { transform: rotate(90deg); }
.sidebar.collapsed .sb-arrow { opacity: 0; width: 0; }


/* Submenu */
.sb-submenu { display: none; }
.sb-submenu.open { display: block; }
.sidebar.collapsed .sb-submenu { display: none !important; }

.sb-sub-item {
  display:         flex;
  align-items:     center;
  padding:         7px 14px 7px 40px;
  color:           var(--text3);
  font-size:       12.5px;
  font-weight:     500;
  cursor:          pointer;
  text-decoration: none;
  transition:      color var(--transition), background var(--transition);
  position:        relative;
  white-space:     nowrap;
}

.sb-sub-item::before {
  content:       '';
  position:      absolute;
  left:          27px;
  top:           50%;
  transform:     translateY(-50%);
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--text3);
  transition:    background var(--transition);
}

.sb-sub-item:hover {
  color:      var(--text);
  background: var(--sidebar-hover);
}

.sb-sub-item:hover::before,
.sb-sub-item.active::before { background: var(--accent); }

.sb-sub-item.active { color: var(--accent); }

/* Sidebar user / footer */
.sb-footer {
  padding:    12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.sb-user {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       8px 10px;
  border-radius: 10px;
  background:    rgba(255, 255, 255, 0.04);
  cursor:        pointer;
  overflow:      hidden;
  white-space:   nowrap;
  transition:    background var(--transition);
}

.sb-user:hover { background: rgba(255, 255, 255, 0.08); }

.sb-avatar {
  width:           32px;
  height:          32px;
  border-radius:   9px;
  background:      var(--accent-gradient);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  font-weight:     700;
  color:           #fff;
  flex-shrink:     0;
}

.sb-user-info {
  overflow:   hidden;
  transition: opacity var(--transition-slow), width var(--transition-slow);
}

.sb-user-name { font-size: 13px; font-weight: 600; color: var(--text); }
.sb-user-role { font-size: 11px; color: var(--text3); }

.sidebar.collapsed .sb-user-info { opacity: 0; width: 0; }

/* Light theme sidebar overrides */
[data-theme="light"] .sb-logo-text .sb-brand-name { color: var(--text-heading); }
[data-theme="light"] .sb-item                     { color: var(--text); }
[data-theme="light"] .sb-item svg,
[data-theme="light"] .sb-item .sb-item-icon       { opacity: 1; }
[data-theme="light"] .sb-item:hover               { color: var(--text-heading); }
[data-theme="light"] .sb-item.active              { color: var(--accent); }
[data-theme="light"] .sb-sub-item                 { color: var(--text2); }
[data-theme="light"] .sb-user                     { background: rgba(0,0,0,0.04); }
[data-theme="light"] .sb-user:hover               { background: rgba(0,0,0,0.07); }
[data-theme="light"] .sb-user-name                { color: var(--text); }


/* ============================================================
   5. TOPBAR
   ============================================================ */

.topbar {
  height:          var(--topbar-h);
  background:      var(--topbar);
  border-bottom:   1px solid var(--border);
  padding:         0 22px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  flex-shrink:     0;
}

.topbar-left,
.topbar-right {
  display:     flex;
  align-items: center;
  gap:         12px;
}

/* Sidebar toggle button */
.sidebar-toggle {
  width:           34px;
  height:          34px;
  border:          1px solid var(--border2);
  border-radius:   9px;
  background:      transparent;
  color:           var(--text2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--transition), color var(--transition);
  flex-shrink:     0;
}

.sidebar-toggle:hover {
  background: var(--input-bg);
  color:      var(--text);
}

/* Page title */
.page-title-block {}

.page-title {
  font-size:   18px;
  font-weight: 800;
  color:       var(--text-heading);
  line-height: 1.2;
}

.breadcrumb {
  font-size:   11.5px;
  color:       var(--text3);
  display:     flex;
  align-items: center;
  gap:         5px;
  margin-top:  2px;
}

.breadcrumb a       { color: var(--text3); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .bc-sep { font-size: 10px; opacity: 0.5; }

/* Search box */
.search-box-wrap { position: relative; }

.search-icon-inside {
  position:       absolute;
  left:           11px;
  top:            50%;
  transform:      translateY(-50%);
  color:          var(--text3);
  pointer-events: none;
  width:          14px;
  height:         14px;
}

.search-box {
  background:    var(--input-bg);
  border:        1px solid var(--input-border);
  border-radius: 10px;
  padding:       8px 12px 8px 34px;
  color:         var(--text);
  width:         210px;
  outline:       none;
  transition:    border-color var(--transition), box-shadow var(--transition), width var(--transition);
}

.search-box::placeholder { color: var(--text3); }

.search-box:focus {
  border-color: rgba(108, 99, 255, 0.5);
  box-shadow:   0 0 0 3px rgba(108, 99, 255, 0.1);
  width:        260px;
}

/* Topbar icon buttons */
.tb-icon-btn {
  width:           36px;
  height:          36px;
  border:          1px solid var(--border);
  border-radius:   9px;
  background:      transparent;
  color:           var(--text2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--transition), color var(--transition), border-color var(--transition);
  position:        relative;
  flex-shrink:     0;
  text-decoration: none;
}

.tb-icon-btn:hover {
  background:   var(--input-bg);
  color:        var(--text);
  border-color: var(--border2);
}

.tb-icon-btn svg { width: 17px; height: 17px; }

/* Notification dot */
.notif-badge {
  position:      absolute;
  top:           4px;
  right:         4px;
  min-width:     17px;
  height:        17px;
  padding:       0 4px;
  border-radius: 10px;
  background:    var(--danger);
  border:        2px solid var(--topbar);
  font-size:     9px;
  font-weight:   800;
  color:         #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  line-height:   1;
}

/* Notification wrap + panel */
.notif-wrap {
  position: relative;
}
.notif-panel {
  position:      fixed;
  width:         360px;
  background:    var(--card);
  border:        1px solid var(--border2);
  border-radius: 14px;
  box-shadow:    0 20px 60px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.2);
  z-index:       9999;
  overflow:      hidden;
  font-family:   var(--font);
}
.notif-panel-hd {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 18px 13px;
  background:      var(--card2);
  border-bottom:   1px solid var(--border);
}
.notif-panel-hd > span {
  font-size:   14px;
  font-weight: 700;
  color:       var(--text-heading);
  letter-spacing: -.01em;
}
.notif-read-all {
  background:    none;
  border:        1px solid var(--border2);
  border-radius: 6px;
  font-size:     11px;
  font-weight:   600;
  color:         var(--accent);
  cursor:        pointer;
  padding:       3px 9px;
  transition:    background .15s, border-color .15s;
}
.notif-read-all:hover {
  background:    rgba(108,99,255,.1);
  border-color:  var(--accent);
}
.notif-panel-body {
  max-height:  400px;
  overflow-y:  auto;
}
.notif-panel-body::-webkit-scrollbar { width: 4px; }
.notif-panel-body::-webkit-scrollbar-track { background: transparent; }
.notif-panel-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

.notif-item {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  padding:       13px 18px;
  border-bottom: 1px solid var(--border);
  cursor:        pointer;
  transition:    background .15s;
  position:      relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--card2); }
.notif-item.unread { background: rgba(108,99,255,.07); }
.notif-item.unread:hover { background: rgba(108,99,255,.11); }
.notif-item.unread::before {
  content:       '';
  position:      absolute;
  left:          0; top: 0; bottom: 0;
  width:         3px;
  background:    var(--accent);
  border-radius: 0 3px 3px 0;
}
.notif-icon {
  width:           36px;
  height:          36px;
  border-radius:   10px;
  background:      rgba(108,99,255,.13);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       16px;
  flex-shrink:     0;
  margin-top:      1px;
}
.notif-content { flex: 1; min-width: 0; }
.notif-title {
  font-size:     12.5px;
  font-weight:   700;
  color:         var(--text-heading);
  margin-bottom: 3px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.notif-msg {
  font-size:  12px;
  color:      var(--text2);
  line-height: 1.45;
  display:    -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:   hidden;
}
.notif-time {
  font-size:  10.5px;
  color:      var(--text3);
  margin-top: 5px;
  display:    flex;
  align-items: center;
  gap:         4px;
}
.notif-empty {
  padding:    48px 24px;
  text-align: center;
}
.notif-empty-icon {
  font-size:     32px;
  margin-bottom: 10px;
}
.notif-empty-text {
  font-size:  13px;
  color:      var(--text3);
  font-weight: 500;
}
.notif-footer {
  padding:       10px 18px;
  border-top:    1px solid var(--border);
  background:    var(--card2);
  text-align:    center;
}
.notif-footer a {
  font-size:   12px;
  font-weight: 600;
  color:       var(--accent);
  text-decoration: none;
}
.notif-footer a:hover { text-decoration: underline; }

/* Theme toggle */
.theme-toggle {
  width:           36px;
  height:          36px;
  border:          1px solid var(--border);
  border-radius:   9px;
  background:      transparent;
  color:           var(--text2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--transition), color var(--transition);
  flex-shrink:     0;
}

.theme-toggle:hover {
  background: var(--input-bg);
  color:      var(--text);
}

.theme-toggle svg { width: 17px; height: 17px; }

/* Add lead / primary CTA in topbar */
.btn-add-lead {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  padding:     9px 16px;
  background:  var(--accent-gradient);
  color:       #fff;
  border:      none;
  border-radius: 10px;
  font-size:   13px;
  font-weight: 700;
  box-shadow:  0 4px 16px var(--accent-glow);
  transition:  box-shadow var(--transition), transform var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

.btn-add-lead:hover {
  box-shadow: 0 6px 24px rgba(108, 99, 255, 0.45);
  transform:  translateY(-1px);
  color:      #fff;
}

.btn-add-lead svg { width: 15px; height: 15px; }


/* ============================================================
   6. FOOTER
   ============================================================ */

.app-footer {
  height:          var(--footer-h);
  background:      var(--topbar);
  border-top:      1px solid var(--border);
  padding:         0 22px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-shrink:     0;
}

.footer-copy { font-size: 11.5px; color: var(--text3); }

.footer-links {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.footer-icon-btn {
  width:           32px;
  height:          32px;
  border:          1px solid var(--border);
  border-radius:   7px;
  background:      transparent;
  color:           var(--text3);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--transition), color var(--transition);
  position:        relative;
}

.footer-icon-btn:hover {
  background: var(--input-bg);
  color:      var(--text);
}

.footer-icon-btn svg { width: 14px; height: 14px; }

/* Footer tooltip via data-tooltip */
.footer-icon-btn[data-tooltip]::after {
  content:        attr(data-tooltip);
  position:       absolute;
  bottom:         calc(100% + 8px);
  left:           50%;
  transform:      translateX(-50%);
  background:     var(--card2);
  color:          var(--text);
  padding:        4px 9px;
  border-radius:  6px;
  font-size:      11px;
  font-weight:    600;
  white-space:    nowrap;
  border:         1px solid var(--border2);
  box-shadow:     var(--shadow);
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--transition);
  z-index:        999;
}

.footer-icon-btn[data-tooltip]:hover::after { opacity: 1; }


/* ============================================================
   7. CARDS
   ============================================================ */

.crm-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 16px;
  padding:       20px 22px;
  box-shadow:    var(--shadow-card);
}

.card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   16px;
}

.card-title {
  font-size:   14px;
  font-weight: 700;
  color:       var(--text-heading);
}

.card-subtitle {
  font-size:  12px;
  color:      var(--text3);
  margin-top: 3px;
}

.card-action {
  font-size:   12px;
  color:       var(--accent);
  font-weight: 600;
  cursor:      pointer;
  transition:  color var(--transition);
  text-decoration: none;
}

.card-action:hover { color: var(--accent2); }

.card-icon-btn {
  width:           30px;
  height:          30px;
  border:          1px solid var(--border);
  border-radius:   8px;
  background:      transparent;
  color:           var(--text3);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--transition), color var(--transition);
}

.card-icon-btn:hover {
  background: var(--input-bg);
  color:      var(--text);
}

.card-icon-btn svg { width: 14px; height: 14px; }

/* KPI / info card variant */
.kpi-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 14px;
  padding:       18px 20px;
  box-shadow:    var(--shadow-card);
}

.kpi-label {
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color:          var(--text3);
  font-weight:    600;
  margin-bottom:  8px;
}

.kpi-value {
  font-size:   22px;
  font-weight: 800;
  color:       var(--text-heading);
  line-height: 1.2;
}

.kpi-sub {
  font-size:  12px;
  color:      var(--text3);
  margin-top: 4px;
}


/* ============================================================
   8. STAT CARDS
   ============================================================ */

.stat-card {
  border-radius: 18px;
  padding:       20px 22px;
  color:         #fff;
  position:      relative;
  overflow:      hidden;
  transition:    transform var(--transition), box-shadow var(--transition);
  cursor:        default;
}

.stat-card:hover {
  transform:  translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.stat-label {
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight:    600;
  color:          rgba(255,255,255,0.85);
  margin-bottom:  10px;
}

.stat-value {
  font-size:     30px;
  font-weight:   800;
  line-height:   1.1;
  margin-bottom: 8px;
}

.stat-change {
  font-size:   12px;
  color:       rgba(255, 255, 255, 0.75);
  display:     flex;
  align-items: center;
  gap:         6px;
}

.stat-change.positive { color: rgba(255, 255, 255, 0.9); }
.stat-change svg { width: 12px; height: 12px; }

.stat-pill {
  background:    rgba(255, 255, 255, 0.2);
  padding:       2px 8px;
  border-radius: 20px;
  font-size:     11px;
  font-weight:   700;
}

/* Decorative orbs */
.stat-orb {
  position:      absolute;
  right:         -15px;
  
  width:         70px;
  height:        70px;
  border-radius: 50%;
  background:    rgba(255, 255, 255, 0.12);
}

.stat-orb-2 {
  position:      absolute;
  right:         20px;
  bottom:        -20px;
  width:         50px;
  height:        50px;
  border-radius: 50%;
  background:    rgba(255, 255, 255, 0.07);
}

/* Colour variants */
.sc-purple {
  background: linear-gradient(135deg, #6c63ff 0%, #9b59ff 100%);
  box-shadow: 0 8px 24px rgba(108, 99, 255, 0.35);
}

.sc-blue {
  background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
  box-shadow: 0 8px 24px rgba(0, 91, 234, 0.35);
}

.sc-orange {
  background: linear-gradient(135deg, #f7971e 0%, #e84393 100%);
  box-shadow: 0 8px 24px rgba(232, 67, 147, 0.35);
}

.sc-green {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  box-shadow: 0 8px 24px rgba(17, 153, 142, 0.35);
}

.sc-red {
  background: linear-gradient(135deg, #f74b4b 0%, #c0392b 100%);
  box-shadow: 0 8px 24px rgba(247, 75, 75, 0.35);
}

.sc-teal {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.35);
}


/* ============================================================
   9. BADGES
   ============================================================ */

.badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       3px 10px;
  border-radius: 20px;
  font-size:     11px;
  font-weight:   700;
  letter-spacing: 0.3px;
  white-space:   nowrap;
}

.badge-dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  flex-shrink:   0;
}

/* Priority */
.badge-hot    { background: rgba(239, 68,  68,  0.15); color: #f87171; }
.badge-warm   { background: rgba(245, 158, 11,  0.15); color: #fbbf24; }
.badge-cold   { background: rgba(99,  102, 241, 0.15); color: #a5b4fc; }
.badge-medium { background: rgba(6,   182, 212, 0.15); color: #67e8f9; }

/* Stage */
.badge-new    { background: rgba(139, 92,  246, 0.15); color: #c4b5fd; }
.badge-won    { background: rgba(34,  197, 94,  0.15); color: #4ade80; }
.badge-lost   { background: rgba(239, 68,  68,  0.15); color: #f87171; }
.badge-open   { background: rgba(6,   182, 212, 0.15); color: #67e8f9; }

/* Status */
.badge-active   { background: rgba(34,  197, 94,  0.15); color: #4ade80; }
.badge-inactive { background: rgba(239, 68,  68,  0.15); color: #f87171; }
.badge-pending  { background: rgba(245, 158, 11,  0.15); color: #fbbf24; }
.badge-approved { background: rgba(34,  197, 94,  0.15); color: #4ade80; }
.badge-paid     { background: rgba(6,   182, 212, 0.15); color: #67e8f9; }
.badge-blocked  { background: rgba(239, 68,  68,  0.15); color: #f87171; }
.badge-verified { background: rgba(34,  197, 94,  0.15); color: #4ade80; }

/* Lead type */
.badge-direct { background: rgba(108, 99,  255, 0.15); color: #a5b4fc; }
.badge-broker { background: rgba(245, 158, 11,  0.15); color: #fbbf24; }
.badge-portal { background: rgba(6,   182, 212, 0.15); color: #67e8f9; }
.badge-info   { background: rgba(6,   182, 212, 0.15); color: #67e8f9; }


/* ============================================================
   10. BUTTONS
   ============================================================ */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  padding:         9px 18px;
  border-radius:   10px;
  font-size:       13px;
  font-weight:     600;
  border:          1px solid transparent;
  cursor:          pointer;
  transition:      background var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition), color var(--transition);
  white-space:     nowrap;
  line-height:     1;
  text-decoration: none;
}

.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn:disabled,
.btn[disabled] {
  opacity:        0.5;
  cursor:         not-allowed;
  pointer-events: none;
}

/* Primary */
.btn-primary {
  background:   var(--accent-gradient);
  color:        #fff;
  box-shadow:   0 4px 16px var(--accent-glow);
  border-color: transparent;
}

.btn-primary:hover {
  box-shadow: 0 6px 24px rgba(108, 99, 255, 0.45);
  transform:  translateY(-1px);
  color:      #fff;
}

/* Secondary */
.btn-secondary {
  background: var(--input-bg);
  color:      var(--text);
  border:     1px solid var(--border2);
}

.btn-secondary:hover {
  background: var(--card2);
  color:      var(--text);
}

/* Danger */
.btn-danger {
  background: rgba(239, 68, 68, 0.12);
  color:      #f87171;
  border:     1px solid rgba(239, 68, 68, 0.25);
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color:      #f87171;
}

/* Success */
.btn-success {
  background: rgba(34, 197, 94, 0.12);
  color:      #4ade80;
  border:     1px solid rgba(34, 197, 94, 0.25);
}

.btn-success:hover {
  background: rgba(34, 197, 94, 0.2);
  color:      #4ade80;
}

/* Accent outline */
.btn-outline {
  background:  transparent;
  color:       var(--accent);
  border:      1px solid rgba(108, 99, 255, 0.4);
}

.btn-outline:hover {
  background: rgba(108, 99, 255, 0.1);
  color:      var(--accent);
}

/* Ghost (border only, neutral) */
.btn-ghost {
  background:  transparent;
  color:       var(--text2);
  border:      1px solid var(--border2);
}

.btn-ghost:hover {
  background: var(--input-bg);
  color:      var(--text);
}

/* Sizes */
.btn-xs  { padding: 4px 9px;   font-size: 11px; border-radius: 7px; }
.btn-sm  { padding: 6px 12px;  font-size: 12px; }
.btn-lg  { padding: 12px 24px; font-size: 14px; }

/* Icon-only */
.btn-icon        { width: 34px; height: 34px; padding: 0; }
.btn-icon.btn-sm { width: 28px; height: 28px; }
.btn-icon.btn-xs { width: 24px; height: 24px; }


/* ============================================================
   11. TABLES
   ============================================================ */

.table-wrap {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 16px;
  overflow:      hidden;
}

.table-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px 14px;
  border-bottom:   1px solid var(--border);
}

.table-title {
  font-size:   14px;
  font-weight: 700;
  color:       var(--text-heading);
}

.table-actions {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.crm-table {
  width:           100%;
  border-collapse: collapse;
}

.crm-table thead th {
  padding:        12px 16px;
  text-align:     left;
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color:          #ffffff !important;
  background:     #161b27;
  border-bottom:  1px solid rgba(255,255,255,0.1);
  white-space:    nowrap;
}

.crm-table th input.form-input {
  background:    rgba(255,255,255,0.06) !important;
  border:        1px solid rgba(255,255,255,0.1) !important;
  color:         #e2e8f0 !important;
  font-size:     11px !important;
  padding:       5px 8px !important;
  border-radius: 6px !important;
  width:         100% !important;
}

.crm-table th input.form-input::placeholder {
  color: rgba(255,255,255,0.25) !important;
}

[data-theme="light"] .crm-table thead th {
  color:      #475569 !important;
  background: #f8fafc;
}

[data-theme="light"] .crm-table th input.form-input {
  background: #ffffff !important;
  border:     1px solid #e2e8f0 !important;
  color:      #475569 !important;
}

.crm-table thead th.sortable {
  cursor:      pointer;
  user-select: none;
}

.crm-table thead th.sortable:hover { color: var(--text); }

.crm-table tbody td {
  padding:         12px 16px;
  border-bottom:   1px solid rgba(255,255,255,0.06);
  color:           #d0daea;
  font-size:       12.5px;
  vertical-align:  middle;
}

.crm-table tbody tr:last-child td { border-bottom: none; }

.crm-table tbody tr {
  transition: background var(--transition);
}

.crm-table tbody tr:hover td { background: rgba(255,255,255,0.04); }

/* Row actions — reveal on hover */
.row-actions {
  opacity:    0;
  transition: opacity var(--transition);
  display:    flex;
  align-items: center;
  gap:        6px;
}

.crm-table tbody tr:hover .row-actions { opacity: 1; }

/* Lead name cell */
.lead-name-cell {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.lead-avatar {
  width:           34px;
  height:          34px;
  border-radius:   9px;
  background:      var(--accent-gradient);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       12px;
  font-weight:     700;
  color:           #fff;
  flex-shrink:     0;
}

.lead-name     { font-size: 13px; font-weight: 600; color: var(--text-heading); }
.lead-contact  { font-size: 11.5px; color: var(--text3); margin-top: 2px; }


/* ============================================================
   12. FORMS
   ============================================================ */

.form-group    { margin-bottom: 18px; }

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

.form-label {
  display:        block;
  font-size:      12px;
  font-weight:    600;
  color:          var(--text2);
  margin-bottom:  7px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-label .required { color: var(--danger); margin-left: 3px; }

.form-input,
.form-select,
.form-textarea {
  width:         100%;
  padding:       10px 14px;
  background-color: var(--input-bg);
  border:        1px solid var(--input-border);
  border-radius: 10px;
  color:         var(--text);
  outline:       none;
  transition:    border-color var(--transition), box-shadow var(--transition), background var(--transition);
  appearance:    none;
  -webkit-appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text3); }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color:     rgba(108, 99, 255, 0.5);
  box-shadow:       0 0 0 3px rgba(108, 99, 255, 0.10);
  background-color: var(--input-bg);
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: rgba(239, 68, 68, 0.5);
}

.form-input.is-invalid:focus,
.form-textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-textarea {
  resize:     vertical;
  min-height: 90px;
}

/* ════════════════════════════════════
   SELECT DROPDOWNS — GLOBAL
   ════════════════════════════════════ */

select,
select.form-input,
select.form-select,
.form-select {
  appearance:          none;
  -webkit-appearance:  none;
  -moz-appearance:     none;
  background-color:    var(--input-bg) !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 stroke%3D%22%23a0aec0%22 stroke-width%3D%222.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E%3Cpolyline points%3D%226 9 12 15 18 9%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: right 14px center !important;
  background-size:     14px !important;
  border:              1px solid var(--input-border);
  border-radius:       10px;
  color:               var(--text);
  font-family:         'Inter', sans-serif;
  font-size:           13px;
  padding:             10px 36px 10px 14px;
  cursor:              pointer;
  outline:             none;
  transition:          border-color 0.2s, box-shadow 0.2s;
}

select:focus,
select.form-input:focus,
select.form-select:focus,
.form-select:focus {
  border-color:     rgba(108, 99, 255, 0.5);
  box-shadow:       0 0 0 3px rgba(108, 99, 255, 0.1);
  background-color: var(--input-bg) !important;
}

select:disabled,
.form-select:disabled {
  opacity:    0.5;
  cursor:     not-allowed;
}

/* Option list — dark background */
select option,
select.form-select option,
.form-select option {
  background-color: #1a2236 !important;
  color:            #e2e8f0 !important;
  font-size:        13px;
  font-family:      'Inter', sans-serif;
}

select optgroup,
.form-select optgroup {
  background-color: #111827 !important;
  color:            #8892aa !important;
  font-size:        11px;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.5px;
}

/* Chrome/Windows gradient trick — overrides OS selection colour */
select option:checked,
select option:hover {
  background: linear-gradient(0deg, #2d3a5e 0%, #2d3a5e 100%) !important;
  color:      #ffffff !important;
}

select option[value=""],
select option:first-child {
  color: #6b7a9d !important;
}

/* Light theme */
[data-theme="light"] select,
[data-theme="light"] select.form-input,
[data-theme="light"] select.form-select,
[data-theme="light"] .form-select {
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 stroke%3D%22%236b7a9d%22 stroke-width%3D%222.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E%3Cpolyline points%3D%226 9 12 15 18 9%22%2F%3E%3C%2Fsvg%3E") !important;
  border-color:     #d8dff0;
  color:            #2d3554;
}

[data-theme="light"] select option,
[data-theme="light"] .form-select option {
  background-color: #ffffff !important;
  color:            #2d3554 !important;
}

[data-theme="light"] select optgroup,
[data-theme="light"] .form-select optgroup {
  background-color: #f4f6fb !important;
  color:            #6b7a9d !important;
}

[data-theme="light"] select option[value=""] {
  color: #2d3554 !important;
}

.custom-select-wrap              { position: relative; }
.priority-opts                   { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 200; background: #1e2433; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.priority-opt                    { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; font-size: 13px; color: #e2e8f0; transition: background .15s; }
.priority-opt:hover              { background: rgba(108,99,255,.12); }

/* ── CUSTOM SELECT WIDGET (.cs-*) ── */
.cs-wrap { position: relative; }
.cs-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; min-height: 42px;
  background: var(--input-bg, rgba(255,255,255,.05));
  border: 1px solid var(--border2, rgba(255,255,255,.1));
  border-radius: 10px; cursor: pointer;
  font-size: 13px; font-family: 'Inter', sans-serif;
  color: var(--text); user-select: none;
  transition: border-color .15s, box-shadow .15s;
}
.cs-trigger:hover  { border-color: rgba(108,99,255,.4); }
.cs-trigger.open   { border-color: rgba(108,99,255,.6); box-shadow: 0 0 0 3px rgba(108,99,255,.08); }
.cs-trigger-label  { flex: 1; text-align: left; line-height: 1.4; }
.cs-trigger-caret  { flex-shrink: 0; width: 11px; height: 11px; color: var(--text3); transition: transform .2s; }
.cs-trigger.open .cs-trigger-caret { transform: rotate(180deg); }
.cs-dropdown {
  display: none; position: absolute;
  top: calc(100% + 4px); left: 0; right: 0; z-index: 500;
  background: var(--card, #1a1f38);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  max-height: 220px; overflow-y: auto;
}
.cs-dropdown.open  { display: block; }
.cs-option {
  padding: 9px 14px; font-size: 13px; font-family: 'Inter', sans-serif;
  color: var(--text2); cursor: pointer;
  transition: background .1s, color .1s;
}
.cs-option:hover          { background: rgba(255,255,255,.05); color: var(--text); }
.cs-option.is-selected    { color: var(--accent, #6c63ff); background: rgba(108,99,255,.08); }
.cs-option.is-placeholder { color: var(--text3); }
.cs-option.is-disabled    { opacity: .4; cursor: not-allowed; pointer-events: none; }
.cs-optgroup-label {
  padding: 7px 14px 4px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--text3);
  border-top: 1px solid rgba(255,255,255,.06);
}
.cs-optgroup-label:first-child { border-top: none; }
[data-theme="light"] .cs-trigger         { background: #fff !important; border-color: rgba(0,0,0,.12) !important; color: #2d3554 !important; }
[data-theme="light"] .cs-trigger:hover   { border-color: rgba(108,99,255,.5) !important; }
[data-theme="light"] .cs-dropdown        { background: #fff !important; border-color: rgba(0,0,0,.1) !important; box-shadow: 0 8px 24px rgba(0,0,0,.15) !important; }
[data-theme="light"] .cs-option          { background: #fff !important; color: #2d3554 !important; }
[data-theme="light"] .cs-option:hover    { background: rgba(108,99,255,.06) !important; color: #2d3554 !important; }
[data-theme="light"] .cs-option.is-selected { background: rgba(108,99,255,.08) !important; color: var(--accent) !important; }
[data-theme="light"] .cs-optgroup-label  { background: #fff !important; color: #9aa3be !important; border-color: rgba(0,0,0,.06) !important; }
.cs-search-wrap {
  position: sticky; top: 0; z-index: 1;
  padding: 7px 8px;
  background: var(--card, #1a1f38);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.cs-search {
  width: 100%; box-sizing: border-box;
  padding: 6px 10px; font-size: 12px; font-family: 'Inter', sans-serif;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px; color: var(--text); outline: none;
}
.cs-search:focus { border-color: rgba(108,99,255,.5); background: rgba(108,99,255,.06); }
.cs-search::placeholder { color: var(--text3); }
[data-theme="light"] .cs-search-wrap { background: #fff !important; border-color: rgba(0,0,0,.08) !important; }
[data-theme="light"] .cs-search { background: #f4f5f8 !important; border-color: rgba(0,0,0,.12) !important; color: #2d3554 !important; }
[data-theme="light"] .cs-search:focus { border-color: rgba(108,99,255,.5) !important; background: rgba(108,99,255,.04) !important; }

/* ── MULTI SELECT WIDGET (.ms-*) — mirrors .cs-* with checkbox rows ── */
.ms-wrap { position: relative; }
.ms-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; min-height: 42px;
  background: var(--input-bg, rgba(255,255,255,.05));
  border: 1px solid var(--border2); border-radius: 10px;
  color: var(--text); cursor: pointer; user-select: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: 'Inter', sans-serif; font-size: 13px;
}
.ms-trigger:hover { border-color: rgba(108,99,255,.4); }
.ms-trigger.open  { border-color: rgba(108,99,255,.6); box-shadow: 0 0 0 3px rgba(108,99,255,.08); }
.ms-trigger-label { flex: 1; text-align: left; color: var(--text3); line-height: 1.4; }
.ms-trigger-label.has-value { color: var(--text); }
.ms-trigger-caret { flex-shrink: 0; width: 11px; height: 11px; color: var(--text3); transition: transform .2s; }
.ms-trigger.open .ms-trigger-caret { transform: rotate(180deg); }
.ms-dropdown {
  display: none; position: absolute;
  top: calc(100% + 4px); left: 0; right: 0; z-index: 500;
  background: var(--card, #1a1f38);
  border: 1px solid var(--border2); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  max-height: 220px; overflow-y: auto;
}
.ms-dropdown.open { display: block; }
.ms-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; font-size: 13px; font-family: 'Inter', sans-serif;
  color: var(--text2); cursor: pointer;
  transition: background .1s, color .1s;
}
.ms-option:hover { background: rgba(255,255,255,.05); color: var(--text); }
.ms-option.is-checked { color: var(--text); background: rgba(108,99,255,.08); }
.ms-option input[type="checkbox"] {
  width: 15px; height: 15px; flex-shrink: 0;
  accent-color: var(--accent, #6c63ff); cursor: pointer;
}
[data-theme="light"] .ms-trigger         { background: #fff !important; border-color: rgba(0,0,0,.12) !important; color: #2d3554 !important; }
[data-theme="light"] .ms-trigger:hover   { border-color: rgba(108,99,255,.5) !important; }
[data-theme="light"] .ms-dropdown        { background: #fff !important; border-color: rgba(0,0,0,.1) !important; box-shadow: 0 8px 24px rgba(0,0,0,.15) !important; }
[data-theme="light"] .ms-option          { background: #fff !important; color: #2d3554 !important; }
[data-theme="light"] .ms-option:hover    { background: rgba(108,99,255,.06) !important; color: #2d3554 !important; }
[data-theme="light"] .ms-option.is-checked { background: rgba(108,99,255,.08) !important; }
[data-theme="light"] .ms-trigger-label   { color: #9aa3be !important; }
[data-theme="light"] .ms-trigger-label.has-value { color: #2d3554 !important; }

.form-hint  { font-size: 11.5px; color: var(--text3); margin-top: 5px; }
.form-sub   { font-size: 11.5px; color: var(--text3); margin-top: 5px; }

.form-error {
  font-size:   11.5px;
  color:       #f87171;
  margin-top:  5px;
  display:     flex;
  align-items: center;
  gap:         4px;
}

/* Input with icon / prefix */
.input-wrap { position: relative; }

.input-icon-left {
  position:       absolute;
  left:           12px;
  top:            50%;
  transform:      translateY(-50%);
  color:          var(--text3);
  pointer-events: none;
  width:          15px;
  height:         15px;
}

.input-icon-right {
  position:   absolute;
  right:      12px;
  top:        50%;
  transform:  translateY(-50%);
  color:      var(--text3);
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    0;
  transition: color var(--transition);
}

.input-icon-right:hover { color: var(--text2); }
.input-icon-right svg   { width: 15px; height: 15px; }

.input-has-left  { padding-left:  38px; }
.input-has-right { padding-right: 38px; }

/* Toggle switch */
.toggle-wrap {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.toggle {
  position:   relative;
  width:      38px;
  height:     22px;
  flex-shrink: 0;
}

.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }

.toggle-slider {
  position:      absolute;
  inset:         0;
  background:    var(--input-border);
  border-radius: 22px;
  cursor:        pointer;
  transition:    background var(--transition);
}

.toggle-slider::before {
  content:       '';
  position:      absolute;
  width:         16px;
  height:        16px;
  border-radius: 50%;
  left:          3px;
  top:           3px;
  background:    #fff;
  transition:    transform var(--transition);
}

.toggle input:checked + .toggle-slider               { background: var(--accent); }
.toggle input:checked + .toggle-slider::before       { transform: translateX(16px); }

.toggle-label { font-size: 13px; color: var(--text); font-weight: 500; }


/* ============================================================
   13. FILTER CHIPS
   ============================================================ */

.filter-chips {
  display:       flex;
  align-items:   center;
  gap:           8px;
  flex-wrap:     wrap;
  margin-bottom: 16px;
}

.filter-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       6px 14px;
  border-radius: 20px;
  border:        1px solid var(--border2);
  background:    var(--input-bg);
  color:         var(--text2);
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  transition:    background var(--transition), border-color var(--transition), color var(--transition);
  white-space:   nowrap;
}

.filter-chip:hover {
  background:   var(--card2);
  border-color: var(--text3);
  color:        var(--text);
}

.filter-chip.active {
  background:   rgba(108, 99, 255, 0.15);
  border-color: rgba(108, 99, 255, 0.40);
  color:        var(--accent);
}

.filter-chip svg { width: 13px; height: 13px; }

.chip-remove {
  width:           14px;
  height:          14px;
  border-radius:   50%;
  background:      rgba(255, 255, 255, 0.12);
  border:          none;
  color:           inherit;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      background var(--transition);
  padding:         0;
}

.chip-remove:hover { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.chip-remove svg   { width: 8px; height: 8px; }


/* ============================================================
   14. PAGINATION
   ============================================================ */

.pagination {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      16px;
  padding:         0 4px;
}

.pagination-info { font-size: 12px; color: var(--text3); }

.pagination-pages {
  display:     flex;
  align-items: center;
  gap:         4px;
}

.page-btn {
  width:           30px;
  height:          30px;
  border:          1px solid var(--border2);
  border-radius:   8px;
  background:      transparent;
  color:           var(--text2);
  font-size:       12px;
  font-weight:     600;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      background var(--transition), color var(--transition), border-color var(--transition);
}

.page-btn:hover {
  background:   var(--input-bg);
  color:        var(--text);
  border-color: var(--text3);
}

.page-btn.active {
  background:   var(--accent-gradient);
  color:        #fff;
  border-color: transparent;
  box-shadow:   0 2px 8px var(--accent-glow);
}

.page-btn:disabled {
  opacity:        0.35;
  cursor:         not-allowed;
  pointer-events: none;
}

.page-btn svg { width: 14px; height: 14px; }


/* ============================================================
   15. TOAST NOTIFICATIONS
   ============================================================ */

.toast-container {
  position:       fixed;
  top:            20px;
  right:          20px;
  z-index:        9999;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  pointer-events: none;
}

.toast {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  padding:       13px 18px;
  border-radius: 12px;
  background:    var(--card);
  border:        1px solid var(--border2);
  box-shadow:    var(--shadow);
  min-width:     280px;
  max-width:     360px;
  pointer-events: all;
  animation:     toastIn 0.3s ease forwards;
}

.toast.hiding {
  animation: toastOut 0.25s ease forwards;
}

@keyframes toastIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes toastOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}

.toast-icon {
  width:           32px;
  height:          32px;
  border-radius:   9px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.toast-icon svg { width: 16px; height: 16px; }

.toast-body { flex: 1; min-width: 0; }

.toast-title {
  font-size:   13px;
  font-weight: 700;
  color:       var(--text-heading);
  line-height: 1.3;
}

.toast-message {
  font-size:  12px;
  color:      var(--text3);
  margin-top: 3px;
  line-height: 1.5;
}

.toast-close {
  background:  none;
  border:      none;
  color:       var(--text3);
  cursor:      pointer;
  padding:     2px;
  flex-shrink: 0;
  transition:  color var(--transition);
}

.toast-close:hover { color: var(--text); }
.toast-close svg   { width: 14px; height: 14px; }

/* Variants — coloured left border + icon bg */
.toast-success {
  border-left: 3px solid var(--success);
}
.toast-success .toast-icon {
  background: rgba(34, 197, 94, 0.15);
  color:      var(--success);
}

.toast-error {
  border-left: 3px solid var(--danger);
}
.toast-error .toast-icon {
  background: rgba(239, 68, 68, 0.15);
  color:      var(--danger);
}

.toast-warning {
  border-left: 3px solid var(--warning);
}
.toast-warning .toast-icon {
  background: rgba(245, 158, 11, 0.15);
  color:      var(--warning);
}

.toast-info {
  border-left: 3px solid var(--info);
}
.toast-info .toast-icon {
  background: rgba(6, 182, 212, 0.15);
  color:      var(--info);
}


/* ============================================================
   16. MOBILE & RESPONSIVE
   ============================================================ */

/* Mobile sidebar overlay */
.mob-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0, 0, 0, 0.5);
  z-index:    99;
  backdrop-filter: blur(2px);
}

.mob-overlay.active { display: block; }

@media (max-width: 768px) {

  /* Sidebar becomes off-canvas */
  .sidebar {
    position:  fixed;
    left:      calc(-1 * var(--sidebar-w));
    top:       0;
    bottom:    0;
    z-index:   200;
    transition: left var(--transition-slow);
    width:     var(--sidebar-w) !important;
  }

  .sidebar.mobile-open {
    left: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
  }

  /* Show overlay when sidebar open */
  .sidebar.mobile-open ~ .mob-overlay { display: block; }

  /* Full-width main area */
  .main-area { width: 100%; }

  /* Narrower search */
  .search-box       { width: 150px; }
  .search-box:focus { width: 180px; }

  /* Stack all grids to single column */
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  /* Form rows collapse to single column */
  .form-row-2,
  .form-row-3 { grid-template-columns: 1fr !important; }

  /* Narrower page padding */
  .page-content { padding: 12px; }

  /* Topbar */
  .topbar { padding: 0 12px; }

  /* Hide breadcrumb on small screens */
  .breadcrumb { display: none; }

  /* Hide search on very small screens */
  .search-box-wrap { display: none; }

  /* Cards */
  .crm-card { padding: 14px 14px; border-radius: 12px; }
  .card-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Tables — horizontal scroll */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Pagination wraps */
  .pagination {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
  }
  .pagination-pages { flex-wrap: wrap; }

  /* Stat cards: 2 per row on tablet */
  .stat-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Filter chips wrap */
  .filter-chip-bar { flex-wrap: wrap; }

  /* Buttons in card headers wrap */
  .card-header > div { flex-wrap: wrap; }

  /* Modal full width */
  .modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  /* ── Inline grid: 2-col → 1-col ── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns:3fr 2fr"],
  [style*="grid-template-columns: 3fr 2fr"],
  [style*="grid-template-columns:30% 1fr"],
  [style*="grid-template-columns: 30% 1fr"],
  [style*="grid-template-columns:280px 1fr"],
  [style*="grid-template-columns: 280px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Inline grid: 4-col → 2-col on tablet ── */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  .pipeline-summary {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .page-title  { font-size: 15px; }
  .stat-value  { font-size: 22px; }
  .toast       { min-width: 220px; max-width: calc(100vw - 24px); }
  .toast-container { left: 12px; right: 12px; top: 10px; }
  .page-content { padding: 10px; }
  .crm-card   { padding: 12px; border-radius: 10px; }

  /* Single-column stat cards on phones */
  .stat-cards-grid { grid-template-columns: 1fr !important; }

  /* 4-col grids collapse fully on phones */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  .pipeline-summary {
    grid-template-columns: 1fr !important;
  }

  /* Smaller buttons */
  .btn { padding: 7px 12px; font-size: 12px; }
}


/* ============================================================
   UTILITIES & MISC
   ============================================================ */

/* Global tooltip via data-tooltip */
[data-tooltip] { position: relative; }

[data-tooltip]::after {
  content:        attr(data-tooltip);
  position:       absolute;
  bottom:         calc(100% + 7px);
  left:           50%;
  transform:      translateX(-50%);
  background:     var(--card2);
  color:          var(--text);
  padding:        4px 9px;
  border-radius:  6px;
  font-size:      11px;
  font-weight:    600;
  white-space:    nowrap;
  border:         1px solid var(--border2);
  box-shadow:     var(--shadow);
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--transition);
  z-index:        500;
}

[data-tooltip]:hover::after { opacity: 1; }

/* Skeleton loader */
.skeleton {
  background:         var(--border);
  border-radius:      6px;
  animation:          skeletonPulse 1.6s ease infinite;
  background-image:   linear-gradient(90deg, var(--border) 0%, var(--border2) 40%, var(--border) 80%);
  background-size:    300% 100%;
}

@keyframes skeletonPulse {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Spinner */
.spinner {
  width:         20px;
  height:        20px;
  border:        2px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation:     spin 0.7s linear infinite;
  flex-shrink:   0;
}

.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }

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

/* Empty state */
.empty-state {
  padding:    48px 24px;
  text-align: center;
}

.empty-icon {
  width:           52px;
  height:          52px;
  border-radius:   14px;
  background:      var(--input-bg);
  border:          1px solid var(--border2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 16px;
  color:           var(--text3);
}

.empty-icon svg { width: 24px; height: 24px; }

.empty-title {
  font-size:     15px;
  font-weight:   700;
  color:         var(--text-heading);
  margin-bottom: 6px;
}

.empty-sub {
  font-size: 13px;
  color:     var(--text3);
}

/* Modal base */
.modal-backdrop {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.55);
  z-index:         1000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  backdrop-filter: blur(3px);
  animation:       fadeIn 0.2s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background:    var(--card);
  border:        1px solid var(--border2);
  border-radius: 20px;
  width:         100%;
  max-width:     520px;
  box-shadow:    0 24px 64px rgba(0, 0, 0, 0.4);
  animation:     modalIn 0.25s ease;
  margin:        20px;
  max-height:    calc(100vh - 0px);
  overflow-y:    auto;
}

@keyframes modalIn {
  from { transform: translateY(20px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         22px 24px 18px;
  border-bottom:   1px solid var(--border);
}

.modal-title  { font-size: 16px; font-weight: 800; color: var(--text-heading); }
.modal-body   { padding: 22px 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

.modal-close {
  width:           30px;
  height:          30px;
  border:          1px solid var(--border);
  border-radius:   8px;
  background:      transparent;
  color:           var(--text3);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      background var(--transition), color var(--transition);
}

.modal-close:hover { background: var(--input-bg); color: var(--text); }
.modal-close svg   { width: 14px; height: 14px; }

/* Drawer / side panel */
.drawer-backdrop {
  position:   fixed;
  inset:      0;
  background: rgba(0, 0, 0, 0.45);
  z-index:    1000;
  backdrop-filter: blur(2px);
}

.drawer {
  position:       fixed;
  top:            0;
  right:          0;
  bottom:         0;
  width:          440px;
  background:     var(--card);
  border-left:    1px solid var(--border2);
  box-shadow:     -8px 0 32px rgba(0, 0, 0, 0.3);
  z-index:        1001;
  display:        flex;
  flex-direction: column;
  animation:      drawerIn 0.25s ease;
}

@keyframes drawerIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.drawer-header {
  padding:       20px 24px;
  border-bottom: 1px solid var(--border);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  flex-shrink:   0;
}

.drawer-title  { font-size: 16px; font-weight: 800; color: var(--text-heading); }
.drawer-body   { flex: 1; overflow-y: auto; padding: 22px 24px; }
.drawer-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0; }

/* Drop zone */
.drop-zone {
  border:          2px dashed var(--border2);
  border-radius:   14px;
  padding:         36px 24px;
  text-align:      center;
  cursor:          pointer;
  transition:      border-color var(--transition), background var(--transition);
}

.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--accent);
  background:   rgba(108, 99, 255, 0.05);
}

.drop-zone-icon { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--text3); }
.drop-zone-icon svg { width: 40px; height: 40px; }
.drop-zone-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.drop-zone-sub   { font-size: 12px; color: var(--text3); }


/* ============================================================
   DARK THEME — COMPONENT CONTRAST OVERRIDES
   ============================================================ */

[data-theme="dark"] .sb-section-label {
  color: var(--accent2) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-theme="dark"] .sb-item {
  color: #ffffff !important;
}

[data-theme="dark"] .sb-item:hover {
  color: #c8d8f0 !important;
  background: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .sb-item.active {
  color: #a89fff !important;
}

[data-theme="dark"] .sb-item svg,
[data-theme="dark"] .sb-item .sb-icon {
  color: inherit !important;
  opacity: 0.85;
}

[data-theme="dark"] .sb-sub-item {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .sb-sub-item:hover {
  color: #b0c0dc !important;
}

[data-theme="dark"] .sb-sub-item.active {
  color: #9b91ff !important;
}

[data-theme="dark"] .sb-user-name {
  color: #e2eaf8 !important;
}

[data-theme="dark"] .sb-user-role {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .sb-company-url {
  color: #6b7a99 !important;
}

[data-theme="dark"] .breadcrumb {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .breadcrumb a {
  color: #8892aa !important;
}

[data-theme="dark"] .breadcrumb a:hover {
  color: #a8b8d4 !important;
}

[data-theme="dark"] .page-title {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .card-title {
  color: #e2eaf8 !important;
}

[data-theme="dark"] .section-heading {
  color: #c8d8f0 !important;
}

[data-theme="dark"] .form-label {
  color: #a8b8d0 !important;
}

[data-theme="dark"] .text-muted {
  color: #f1f5f9 !important;
}

/* ════════════════════════════════════════════════════════════════
   SHARED COMPONENTS — use these classes instead of inline styles
   ════════════════════════════════════════════════════════════════ */

/* ── Action dropdown menu ──
   Markup: <div class="ln-menu" id="action-menu-N"> …
             <button class="ln-menu-item">…</button>
             <hr class="ln-menu-sep">
             <button class="ln-menu-item danger">…</button>
           </div>
   The [id^="action-menu-"] selectors below are a legacy fallback that
   themes any not-yet-migrated inline menus the same way. */
.ln-menu,
[id^="action-menu-"] {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
  padding: 5px !important;
  min-width: 150px;
}
.ln-menu { display: none; position: fixed; z-index: 9999; }

.ln-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 12px; border: none; background: transparent;
  color: var(--text2); font-size: 13px; font-family: inherit;
  text-align: left; text-decoration: none; border-radius: 8px;
  cursor: pointer; transition: background 0.12s, color 0.12s;
}
.ln-menu-item:hover { background: rgba(108, 99, 255, 0.12); color: var(--accent); }
.ln-menu-item.danger { color: #f87171; }
.ln-menu-item.danger:hover { background: rgba(239, 68, 68, 0.12); color: #f87171; }
.ln-menu-sep { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* Legacy fallback hover for inline (un-migrated) action menus */
[id^="action-menu-"] > a,
[id^="action-menu-"] > button { border-radius: 8px; transition: background 0.12s, color 0.12s; }
[id^="action-menu-"] > a:hover,
[id^="action-menu-"] > button:hover { background: rgba(108, 99, 255, 0.12) !important; color: var(--accent) !important; }
[id^="action-menu-"] > button[onclick*="confirmDelete"]:hover,
[id^="action-menu-"] > button[onclick*="deleteUser"]:hover { background: rgba(239, 68, 68, 0.12) !important; color: #f87171 !important; }
[id^="action-menu-"] hr { border-color: var(--border) !important; }

/* ── List toolbar (master/list pages: count · search · page-size · export) ── */
.list-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 10px 20px; border-bottom: 1px solid var(--border);
}
.list-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.list-toolbar .list-count { font-size: 13px; color: var(--text2); }
.list-toolbar .list-count strong { color: var(--text); }
.list-toolbar .form-input,
.list-toolbar .form-select { padding: 7px 12px; font-size: 13px; width: auto; }
.list-search { width: 220px; }

[data-theme="dark"] .footer-copy {
  color: #6b7a99 !important;
}

[data-theme="dark"] .search-box input::placeholder {
  color: #6b7a99 !important;
}

[data-theme="dark"] .pipe-label {
  color: #9aaac4 !important;
}

[data-theme="dark"] .badge {
  opacity: 0.95;
}

/* Light theme — white sidebar, dark text */
[data-theme="light"] .sb-section-label   { color: var(--accent2) !important; font-weight: 800 !important; }
[data-theme="light"] .sb-brand-tag       { color: var(--text3) !important; }
[data-theme="light"] .sb-item            { color: var(--text) !important; }
[data-theme="light"] .sb-item:hover      { color: var(--text-heading) !important; background: var(--sidebar-hover) !important; }
[data-theme="light"] .sb-item.active     { color: var(--accent) !important; }
[data-theme="light"] .sb-sub-item        { color: var(--text2) !important; }
[data-theme="light"] .sb-sub-item:hover  { color: var(--text) !important; background: var(--sidebar-hover) !important; }
[data-theme="light"] .sb-sub-item.active { color: var(--accent) !important; }
[data-theme="light"] .sb-user-name       { color: var(--text) !important; }
[data-theme="light"] .sb-user-role       { color: var(--text2) !important; }
[data-theme="light"] .sb-company-url     { color: var(--text3) !important; }
[data-theme="light"] .form-label       { color: #475569 !important; }
[data-theme="light"] .text-muted       { color: #64748b !important; }

/* Reminder wrapper scrollbar */
#reminder-wrapper::-webkit-scrollbar       { width: 4px; }
#reminder-wrapper::-webkit-scrollbar-track { background: transparent; }
#reminder-wrapper::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }


/* ============================================================
   CUSTOM OPTION DROPDOWN  (.lq-dropdown)
   Used for Lead Quality, Priority, and any select that needs
   coloured indicators. Replaces inline style hacks.
   ============================================================ */

.lq-dropdown { position: relative; }

.lq-trigger {
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  user-select:     none;
  min-height:      42px;
  /* inherits .form-input for border / background / radius */
}

.lq-trigger.open {
  border-color: rgba(108, 99, 255, 0.5) !important;
  box-shadow:   0 0 0 3px rgba(108, 99, 255, 0.10) !important;
}

.lq-trigger-label {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   13px;
  color:       var(--text3);
  transition:  color var(--transition);
}

.lq-trigger-label.has-value { color: var(--text); }

.lq-trigger-caret {
  flex-shrink: 0;
  color:       var(--text3);
  transition:  transform var(--transition);
}

.lq-trigger.open .lq-trigger-caret { transform: rotate(180deg); }

.lq-panel {
  display:       none;
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  right:         0;
  background:    var(--card);
  border:        1px solid var(--border2);
  border-radius: 10px;
  z-index:       500;
  box-shadow:    0 8px 32px rgba(0, 0, 0, 0.45);
  overflow:      hidden;
}

.lq-panel.open { display: block; }

.lq-option {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     10px 14px;
  cursor:      pointer;
  font-size:   13px;
  color:       var(--text);
  transition:  background var(--transition);
}

.lq-option:hover             { background: var(--sidebar-hover); }
.lq-option.lq-clear          { color: var(--text3); border-bottom: 1px solid var(--border); }
.lq-option.lq-clear:hover    { background: var(--sidebar-hover); }

.lq-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
  display:       inline-block;
}

/* Native select option overrides — best effort cross-browser dark styling */
select option,
select.form-select option,
select.form-input option {
  background-color: #1a2236 !important;
  color:            #e2e8f0 !important;
  font-family:      'Inter', sans-serif !important;
  font-size:        13px !important;
}

select optgroup,
select.form-select optgroup {
  background-color: #111827 !important;
  color:            #8892aa !important;
  font-weight:      700 !important;
  font-size:        11px !important;
  text-transform:   uppercase !important;
  letter-spacing:   0.5px !important;
}

select option:checked,
select option:hover {
  background: linear-gradient(0deg, #2d3a5e 0%, #2d3a5e 100%) !important;
  color:      #ffffff !important;
}

[data-theme="light"] select option,
[data-theme="light"] select.form-select option {
  background-color: #ffffff !important;
  color:            #2d3554 !important;
}

[data-theme="light"] select optgroup {
  background-color: #f4f6fb !important;
  color:            #6b7a9d !important;
}