/* ============================================================
   2026 Premium Components
   ============================================================ */

/* -- Input / select base style aliases --------------- */
.input, select.input {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--k-border); border-radius: var(--k-radius-md);
  font: var(--k-text-body); color: var(--k-text);
  background: var(--k-surface); outline: none;
  transition:
    border-color     var(--k-dur-normal) var(--k-ease),
    box-shadow       var(--k-dur-normal) var(--k-ease),
    background-color var(--k-dur-normal) var(--k-ease);
}
.input:hover, select.input:hover { border-color: var(--k-text-tertiary); }
.input:focus, select.input:focus {
  border-color: var(--k-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font: var(--k-text-label); color: var(--k-text-secondary); }

/* -- Command Palette Overlay ------------------------- */
.cmd-overlay {
  position: fixed; inset: 0;
  background: var(--k-scrim);
  backdrop-filter: blur(12px);
  z-index: 300;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 15vh;
  animation: fadeOverlay var(--k-dur-fast);
}
.cmd-palette {
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-xl);
  box-shadow: var(--k-shadow-xl), 0 0 0 1px rgba(99,102,241,0.1);
  width: 90%; max-width: 560px;
  overflow: hidden;
  animation: modalIn var(--k-dur-fast) var(--k-ease);
}
.cmd-search-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--k-border-light);
}
.cmd-search-row .material-symbols-outlined { font-size: 22px; color: var(--k-text-secondary); }
.cmd-search-row input {
  flex: 1; border: none; outline: none; background: none;
  font: 500 16px/1 var(--k-font); color: var(--k-text);
}
.cmd-search-row input::placeholder { color: var(--k-text-tertiary); }
.cmd-search-row .cmd-esc {
  font: var(--k-text-xs); color: var(--k-text-tertiary);
  background: var(--k-border-light); border: 1px solid var(--k-border);
  border-radius: 4px; padding: 2px 7px;
}
.cmd-results { max-height: 340px; overflow-y: auto; padding: 8px 0; }
.cmd-results::-webkit-scrollbar { width: 4px; }
.cmd-results::-webkit-scrollbar-thumb { background: var(--k-border); border-radius: 2px; }
.cmd-group-label {
  padding: 6px 20px 4px; font: var(--k-text-label-sm);
  color: var(--k-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px;
}
.cmd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; cursor: pointer;
  transition: background var(--k-dur-fast);
  border-radius: 0;
}
.cmd-item:hover, .cmd-item.selected {
  background: var(--k-primary-light); color: var(--k-primary);
}
.cmd-item .cmd-icon {
  width: 32px; height: 32px; border-radius: var(--k-radius-sm);
  background: var(--k-surface-sunken); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cmd-item .cmd-icon .material-symbols-outlined { font-size: 18px; color: var(--k-text-secondary); }
.cmd-item:hover .cmd-icon, .cmd-item.selected .cmd-icon { background: var(--k-primary); }
.cmd-item:hover .cmd-icon .material-symbols-outlined,
.cmd-item.selected .cmd-icon .material-symbols-outlined { color: #fff; }
.cmd-item-label { font: var(--k-text-body); color: var(--k-text); flex: 1; }
.cmd-item-hint { font: var(--k-text-small); color: var(--k-text-tertiary); }
.cmd-footer {
  padding: 10px 20px; border-top: 1px solid var(--k-border-light);
  display: flex; align-items: center; gap: 16px;
  font: var(--k-text-small); color: var(--k-text-tertiary);
}
.cmd-footer kbd {
  font: var(--k-text-xs); background: var(--k-border-light);
  border: 1px solid var(--k-border); border-radius: 3px; padding: 1px 5px;
}

/* -- Metric Card 2026 — with icon + trend ----------- */
.kpi-card {
  background: var(--k-surface);
  border-radius: var(--k-radius-lg);
  border: 1px solid var(--k-border-light);
  padding: 20px 20px 16px;
  transition:
    box-shadow   var(--k-dur-normal) var(--k-ease),
    transform    var(--k-dur-normal) var(--k-ease),
    border-color var(--k-dur-normal) var(--k-ease);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  will-change: transform;
}
.kpi-card:hover {
  box-shadow: var(--k-shadow-md); transform: translate3d(0, -2px, 0);
  border-color: rgba(99,102,241,0.2);
}
.kpi-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.kpi-card-icon {
  width: 36px; height: 36px; border-radius: var(--k-radius-md);
  display: flex; align-items: center; justify-content: center;
}
.kpi-card-icon .material-symbols-outlined { font-size: 20px; }
.kpi-card-trend {
  display: flex; align-items: center; gap: 3px;
  font: 700 12px/1 var(--k-font);
  padding: 3px 8px; border-radius: var(--k-radius-full);
}
.kpi-card-trend.up   { background: var(--k-success-light); color: var(--k-success); }
.kpi-card-trend.down { background: var(--k-error-light);   color: var(--k-error); }
.kpi-card-trend.flat { background: var(--k-surface-sunken); color: var(--k-text-secondary); }
.kpi-card-trend .material-symbols-outlined { font-size: 14px; }
.kpi-card-value {
  font: var(--k-text-number); color: var(--k-text); letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
}
.kpi-card-label {
  font: var(--k-text-small); color: var(--k-text-secondary);
}
.kpi-card-sparkline { margin-top: 12px; height: 36px; overflow: hidden; }
.kpi-card-sparkline svg { width: 100%; height: 36px; }

/* KPI icon accent colors */
.kpi-icon-indigo  { background: var(--k-primary-light); }
.kpi-icon-indigo .material-symbols-outlined  { color: var(--k-primary); }
.kpi-icon-emerald { background: var(--k-success-light); }
.kpi-icon-emerald .material-symbols-outlined { color: var(--k-success); }
.kpi-icon-amber   { background: var(--k-warning-light); }
.kpi-icon-amber .material-symbols-outlined   { color: var(--k-warning); }
.kpi-icon-rose    { background: var(--k-error-light); }
.kpi-icon-rose .material-symbols-outlined    { color: var(--k-error); }
.kpi-icon-violet  { background: rgba(139,92,246,0.12); }
.kpi-icon-violet .material-symbols-outlined  { color: var(--k-violet); }
.kpi-icon-cyan    { background: rgba(6,182,212,0.12); }
.kpi-icon-cyan .material-symbols-outlined    { color: var(--k-cyan); }
.kpi-icon-sky     { background: var(--k-info-light); }
.kpi-icon-sky .material-symbols-outlined     { color: var(--k-info); }
.kpi-icon-pink    { background: rgba(236,72,153,0.12); }
.kpi-icon-pink .material-symbols-outlined    { color: var(--k-pink); }

/* -- Stat Card (instantly-style lightweight card) ----- */
.stat-card {
  border: 1px solid var(--k-border-light); border-radius: 10px;
  padding: 18px 20px; background: var(--k-surface);
  display: flex; flex-direction: column; gap: 8px;
  min-height: 124px;
}
.stat-card-label {
  font-size: 12px; font-weight: 500; color: var(--k-text-secondary);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.stat-card-value {
  font-size: 28px; font-weight: 700; color: var(--k-text-strong);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat-card-status {
  font-size: 13px; font-weight: 400; color: var(--k-text-secondary);
  margin-top: auto;
}
.stat-card-progress {
  display: flex; flex-direction: column; gap: 6px; margin-top: auto;
}
.stat-card-progress .stat-card-value { font-size: 28px; }
.stat-card-bar {
  width: 100%; height: 4px; background: var(--k-border-light);
  border-radius: 10px; overflow: hidden;
}
.stat-card-bar-fill {
  height: 100%; background: var(--k-success-mid, #15b335); border-radius: inherit;
  transition: width var(--k-dur-normal) var(--k-ease);
}
.stat-card-sub {
  font-size: 13px; color: var(--k-text-secondary); margin-top: 2px;
}

/* -- AI Badge (Copilot Feature Indicator) ----------- */
.ai-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--k-radius-full);
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(99,102,241,0.12));
  border: 1px solid rgba(139,92,246,0.25);
  font: var(--k-text-label-sm); color: var(--k-violet);
  font-weight: 700; letter-spacing: 0.3px;
}
.ai-badge .material-symbols-outlined { font-size: 13px; }

/* -- Pulsing Status Dot (Active Accounts) ----------- */
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.status-dot.active {
  background: var(--k-success);
  box-shadow: 0 0 0 0 rgba(16,185,129,0.4);
  animation: statusPulse 2.5s ease-in-out infinite;
}
.status-dot.paused  { background: var(--k-warning); }
.status-dot.error   { background: var(--k-error); }
.status-dot.warming { background: var(--k-info); }
.status-dot.inactive { background: var(--k-text-tertiary); }
@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0    rgba(16,185,129,0.4); }
  70%  { box-shadow: 0 0 0 6px  rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0    rgba(16,185,129,0); }
}

/* -- Gradient Text Utility --------------------------- */
.gradient-text {
  background: var(--k-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* -- Glass Card -------------------------------------- */
.glass-card {
  background: var(--k-surface-glass);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--k-radius-xl);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
[data-theme="dark"] .glass-card {
  border-color: rgba(255,255,255,0.08);
  background: rgba(19,25,41,0.8);
}

/* -- Scrollable Table Wrapper (mobile) -------------- */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrapper::-webkit-scrollbar { height: 4px; }
.table-wrapper::-webkit-scrollbar-thumb { background: var(--k-border); border-radius: 2px; }

/* -- Form Group Row ---------------------------------- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* -- CRM Stat Chip ----------------------------------- */
.crm-stat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--k-radius-full);
  background: var(--k-surface-sunken); border: 1px solid var(--k-border-light);
  font: var(--k-text-label); color: var(--k-text);
}
.crm-stat-value { font-weight: 700; color: var(--k-primary); }
.crm-stat-label { color: var(--k-text-secondary); }

/* -- Lead Finder filter grid ------------------------- */
.lf-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* -- Dashboard bento hero row ----------------------- */
.dash-hero-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.dash-hero-title { font: var(--k-text-display); color: var(--k-text); letter-spacing: -0.5px; line-height: 1.15; }
.dash-hero-sub { font: var(--k-text-body-lg); color: var(--k-text-secondary); margin-top: 6px; }
.dash-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* -- System status bar ------------------------------- */
.status-bar-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--k-radius-md);
  background: var(--k-success-light); color: var(--k-success);
  border: 1px solid rgba(16,185,129,0.2); font: var(--k-text-label);
}
.status-bar-strip.degraded {
  background: var(--k-warning-light); color: var(--k-warning);
  border-color: rgba(245,158,11,0.2);
}
.status-bar-strip.error {
  background: var(--k-error-light); color: var(--k-error);
  border-color: rgba(239,68,68,0.2);
}
.status-bar-strip .material-symbols-outlined { font-size: 16px; }

/* -- Snackbar fix — ensure it's above everything ----- */
#snackbar { z-index: 500; }

/* -- Skip Link (a11y) --------------------------------- */
.skip-link {
  position: absolute; top: -100%; left: 16px;
  padding: 8px 16px; background: var(--k-primary); color: #fff;
  border-radius: var(--k-radius-sm); font: var(--k-text-label);
  z-index: 9999; text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* -- Focus Visible (a11y) ----------------------------- */
.btn:focus-visible,
.btn-icon:focus-visible,
.sidebar-item:focus-visible,
a:focus-visible {
  outline: 2px solid var(--k-primary);
  outline-offset: 2px;
}

/* Workspace Switcher */
.ws-switcher { padding: 6px 10px; border-bottom: none; }
.ws-select { width: 100%; padding: 6px 8px; border-radius: var(--k-radius-sm); border: 1px solid transparent; background: transparent; color: var(--md-sys-color-on-surface); font-size: 0.75rem; cursor: pointer; text-align: center; appearance: none; -webkit-appearance: none; }
.ws-select:hover { background: var(--md-sys-color-surface-variant); }
.ws-select:focus { border-color: var(--md-sys-color-primary); outline: none; }

/* Team Page */
.team-page { padding: 0; }
.team-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; gap: 12px; flex-wrap: wrap; }
.team-toolbar-left { display: flex; align-items: center; gap: 8px; }
.team-table-wrap { overflow-x: auto; }
.team-invite-form { display: flex; flex-direction: column; gap: 4px; min-width: 320px; }
.team-invite-form .form-label { font-size: 0.8125rem; color: var(--md-sys-color-outline); font-weight: 500; }
.team-invite-form .input { padding: 10px 12px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--k-radius-sm); background: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface); font-size: 0.875rem; }
.md-field input:focus-visible,
.md-field select:focus-visible,
.md-field textarea:focus-visible,
.input-field input:focus-visible,
.input-field select:focus-visible,
.search-bar input:focus-visible {
  outline: 2px solid var(--k-primary);
  outline-offset: -2px;
}

/* ---- Linear Progress (UI-5) ---- */
.linear-progress { display: flex; align-items: center; gap: 8px; width: 100%; }
.linear-progress-track { flex: 1; height: 6px; background: var(--k-surface-variant); border-radius: 3px; overflow: hidden; }
.linear-progress-bar { height: 100%; background: var(--k-primary); border-radius: 3px; transition: width 0.3s ease; }
.linear-progress-label { font-size: 12px; color: var(--k-text-secondary); white-space: nowrap; min-width: 36px; text-align: right; }

/* Cookie Consent Banner */
.cookie-banner {
    position: fixed;
    bottom: -200px;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 16px 24px;
    background: var(--md-sys-color-surface-container-high, #2b2b2b);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    transition: bottom 0.3s ease;
    display: flex;
    justify-content: center;
}
.cookie-banner.visible { bottom: 0; }
.cookie-banner-content { display: flex; align-items: center; gap: 16px; max-width: 800px; }
.cookie-icon { font-size: 32px; color: var(--md-sys-color-primary); }
.cookie-text { margin: 0; font-size: 0.875rem; color: var(--md-sys-color-on-surface); }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn { white-space: nowrap; }

/* Onboarding Tour */
.tour-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000; }
.tour-tooltip { position: fixed; z-index: 10001; background: var(--md-sys-color-surface); border-radius: var(--k-radius-lg); padding: 20px; max-width: 320px; box-shadow: var(--md-sys-elevation-3); }
.tour-tooltip--centered { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tour-highlight { position: relative; z-index: 10001; }
.tour-tooltip-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tour-title { margin: 0; font-size: 1rem; font-weight: 600; }
.tour-counter { font-size: 0.75rem; color: var(--md-sys-color-outline); }
.tour-text { font-size: 0.875rem; margin: 0 0 16px; color: var(--md-sys-color-on-surface-variant); }
.tour-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Live Chat Widget */
.chat-fab { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: var(--k-radius-lg); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border: none; cursor: pointer; box-shadow: var(--md-sys-elevation-3); z-index: 9000; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.chat-fab:hover { transform: scale(1.05); }
.chat-panel { position: fixed; bottom: 90px; right: 24px; width: 360px; height: 480px; background: var(--md-sys-color-surface); border-radius: var(--k-radius-lg); box-shadow: var(--md-sys-elevation-3); z-index: 9001; display: flex; flex-direction: column; transform: scale(0.9); opacity: 0; transition: all 0.3s ease; pointer-events: none; }
.chat-panel.open { transform: scale(1); opacity: 1; pointer-events: auto; }
.chat-header { padding: 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); display: flex; justify-content: space-between; align-items: center; }
.chat-header h3 { margin: 0; font-size: 1rem; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-msg p { margin: 0; font-size: 0.875rem; }
.chat-msg-system { background: var(--md-sys-color-surface-variant); padding: 12px; border-radius: var(--k-radius-md); }
.chat-msg-user { background: var(--md-sys-color-primary-container); padding: 12px; border-radius: var(--k-radius-md); align-self: flex-end; max-width: 80%; }
.chat-hint { font-size: 0.75rem; color: var(--md-sys-color-outline); margin-top: 4px !important; }
.chat-input-area { padding: 12px 16px; border-top: 1px solid var(--md-sys-color-outline-variant); display: flex; gap: 8px; align-items: center; }
.chat-input { flex: 1; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--k-radius-2xl); padding: 8px 16px; background: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface); font-size: 0.875rem; outline: none; }
.chat-input:focus { border-color: var(--md-sys-color-primary); }