/* ============================================================================
   Donevia global styles — v4 mockup ("light + dark").

   The design tokens (--bg, --surface, --ink, --pink, --blue/-soft/-dark, ...) are
   injected at runtime by MainLayout.razor from Services/DashboardTheme.cs and flip
   between the light (default) and dark themes. Everything here is built on those
   tokens so both themes are covered by a single rule set. The :root block below is
   just a light-theme fallback for the brief moment before MainLayout hydrates.
   ============================================================================ */

:root {
    /* Neutrals / surfaces (light fallback) */
    --bg: #F8FAFC;
    --surface: #FFFFFF;
    --topbar-bg: #FFFFFF;
    --ink: #0B0E17;
    --body: #1F2937;
    --mute: #64748B;
    --faint: #94A3B8;
    --rule: #E2E8F0;
    --softrule: #EEF2F6;
    --livebg: #0B0E17;
    --card-border: #E2E8F0;
    --kbd-bg: #F1F5F9;
    --kbd-text: #475569;
    --kbd-border: #CBD5E1;
    --avatar-bg: #0B0E17;

    /* Brand + semantic palette */
    --pink: #FF2DAF;            --pink-soft: #FFE6F4;   --pink-dark: #9D174D;
    --blue: #2563EB;           --blue-soft: #DBEAFE;   --blue-dark: #1E3A8A;
    --teal: #0D9488;           --teal-soft: #CCFBF1;   --teal-dark: #134E4A;
    --amber: #D97706;          --amber-soft: #FEF3C7;  --amber-dark: #92400E;
    --red: #DC2626;            --red-soft: #FEE2E2;    --red-dark: #991B1B;
    --purple: #7C3AED;         --purple-soft: #EDE9FE; --purple-dark: #5B21B6;

    /* Legacy aliases (kept so existing markup/scoped CSS inherits the new look) */
    --text-color: var(--ink);
    --card-bg: var(--surface);
    --card-grad: none;
    --card-soft-br: none;
    --card-border-color-inactive: var(--rule);
    --card-border-color-active: var(--pink);
    --border-color-inactive: var(--rule);
    --border-color-active: var(--pink);
    --form-input-bg-color: var(--surface);
    --badge-bg-color: var(--pink);
    --avatar-bg-color: var(--avatar-bg);
}


/* ========= Base ========= */
html, body { height: 100%; }

body {
    font-family: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--body);
    min-height: 100vh;
    background-color: var(--bg);   /* flat — gradient removed per mockup */
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}


/* =======================================================
    .nav-link — used by NavMenu, TopBarTools (bell), and the
    internal filter tabs on MyTasks / LeadQueue.
==========================================================*/
.nav-link {
    position: relative;
    color: var(--nav-text) !important;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    transition: color .25s ease;
}

/* Pink underline that wipes in on hover (mockup) */
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0%;
    background-color: var(--pink);
    transition: width 0.25s ease-in-out;
}
.nav-link:hover { color: var(--ink) !important; }
.nav-link:hover::after { width: 100%; }

/* Active page: ink text + persistent pink underline */
.nav-link.active {
    color: var(--ink) !important;
    font-weight: 600;
    background-color: transparent;
    box-shadow: none;
}
.nav-link.active::after { width: 100%; }


/* ========= Buttons ========= */
.btn.btn-primary {
    color: #ffffff;
    background-color: var(--pink);
    border-color: var(--pink);
    box-shadow: none;
}
.btn.btn-primary:hover {
    background-color: var(--pink-dark);
    border-color: var(--pink-dark);
    box-shadow: 0 4px 14px rgba(255, 45, 175, 0.30);
}

/* Icon-style buttons (shared) */
.btn-icon {
    background: transparent;
    border: none;
    color: var(--mute);
    padding: 0.5rem;
    transition: all 0.2s ease;
}
.btn-icon:hover { color: var(--pink); transform: scale(1.08); }

/* Focus rings */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 45, 175, 0.25);
}

/* Primary CTA (mockup .cta-pri) — also the modern "positive action" button */
.cta-pri,
.btn-gradient {
    background: var(--pink) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cta-pri:hover,
.btn-gradient:hover {
    background: var(--pink-dark) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 45, 175, 0.30);
}

/* Secondary CTA (mockup .cta-sec) */
.cta-sec {
    background: var(--surface);
    color: var(--ink);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--rule);
    transition: all 0.2s ease;
}
.cta-sec:hover { border-color: var(--pink); color: var(--pink); }

/* Outline / "danger" variant */
.btn-gradient-outline {
    background: transparent !important;
    border: 1px solid var(--pink) !important;
    color: var(--pink) !important;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-gradient-outline:hover {
    background: var(--pink) !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(255, 45, 175, 0.25);
    transform: translateY(-1px);
}

/* AI generation button */
.btn-ai {
    color: var(--body);
    border: 1px solid var(--blue);
    background: transparent;
    transition: all 0.2s ease;
}
.btn-ai:hover {
    background-color: var(--blue-soft) !important;
    color: var(--ink) !important;
    border-color: var(--blue) !important;
    transform: translateY(-1px);
}
.cta-row { display: flex; gap: 8px; }


/* ========= Utilities ========= */
.text-muted { color: var(--mute) !important; }
.tracking-wide { letter-spacing: 0.05em; }

/* ========= Page loader (Donevia.Client Shared/DoneviaLoader.razor) =========
   The logo "breathes" (fades in while growing, out while shrinking) while a bright band sweeps
   across it left to right, in step with the breath. It sits on the page's own var(--bg), so it
   follows light/dark mode (the pink logo reads on both). */
.dv-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60vh;
    padding: 24px 16px;
}
.dv-loader__logo {
    width: min(240px, 60vw);
    height: auto;
    /* 300%-wide mask with a soft opaque band in the middle; sliding it right-to-left in
       mask-position moves the band across the logo from left to right. */
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.25) 38%, #000 50%, rgba(0,0,0,.25) 62%, rgba(0,0,0,.25) 100%);
            mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.25) 38%, #000 50%, rgba(0,0,0,.25) 62%, rgba(0,0,0,.25) 100%);
    -webkit-mask-size: 300% 100%;
            mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    animation: dv-breathe 1.8s ease-in-out infinite, dv-sweep 1.8s ease-in-out infinite;
    will-change: transform, opacity;
}
@keyframes dv-breathe {
    0%, 100% { opacity: .45; transform: scale(.92); }
    50%      { opacity: 1;   transform: scale(1.06); }
}
@keyframes dv-sweep {
    from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}
/* MainLayout shows this before ThemeService injects the theme tokens, so only the light
   :root fallback exists yet; theme.js has already set data-bs-theme, so key the dark
   background off that (value = DashboardTheme.DarkColors --bg). */
.dv-loader--boot { position: fixed; inset: 0; min-height: 0; z-index: 2000; background: var(--bg); }
[data-bs-theme="dark"] .dv-loader--boot { background: #14171D; }
@media (prefers-reduced-motion: reduce) {
    .dv-loader__logo { animation: dv-fade 2.4s ease-in-out infinite; -webkit-mask-image: none; mask-image: none; }
}
@keyframes dv-fade {
    0%, 100% { opacity: .4; }
    50%      { opacity: 1; }
}

/* Generic page title used across the app */
.page-title {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.1;
    color: var(--ink);
    background: none;
    -webkit-text-fill-color: currentColor;
}


/* ========================================
    Shared form styles
========================================= */
.forms {
    background-color: var(--surface);
    color: var(--body);
    border: 1px solid var(--rule);
    border-radius: 12px;
}
.form-text {
    background: transparent;
    color: var(--mute);
    font-weight: 500;
}
.form-label { color: var(--ink); }
.form-control,
.form-select {
    color: var(--body);
    background-color: var(--surface);
    border: 1px solid var(--rule);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--pink);
    background-color: var(--surface);
}
.form-control::placeholder { color: var(--faint); }


/* ========= Modals ========= */
.modal-title { color: var(--ink); }
.modal-content,
.modal-body {
    background-color: var(--surface);
    color: var(--body);
    max-height: 90vh;
}
.modal-content {
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.modal { top: 50px; max-height: 90vh; }

/* Close button follows the theme: Bootstrap's default "✕" is dark (correct on the light
   surface); in dark mode invert it to white so it stays visible. Modals use plain
   `.btn-close` now — the old `.btn-close-white` is neutralized here so it can't force a
   white (invisible-in-light) glyph if any markup still carries it. */
.modal-header .btn-close { opacity: 0.75; }
.modal-header .btn-close-white { filter: none; }
[data-bs-theme="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Themed border on header/footer so the divider is visible on both surfaces. */
.modal-header, .modal-footer { border-color: var(--card-border); }

/* A transformed ancestor becomes the containing block for position: fixed, so a hover-lifted card
   (translateY on :hover) would box an open modal inside it and flash it as the page scrolls.
   Render modals outside such cards; as a safety net, nothing that contains an open modal transforms.
   !important beats the scoped `.card[b-xxx]:hover` rules. */
:has(.modal.show) {
    transform: none !important;
    transition: none !important;
}


/* ======================================
   Card shells — global so any page can
   reuse the dashboard card surfaces.
========================================= */
.info-card {
    position: relative;
    background-color: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.modern-kpi-card {
    border-radius: 14px;
    border: 1px solid var(--card-border);
    overflow: visible;          /* allow tooltips/sparkline to escape */
    position: relative;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    min-height: 240px;
    background-color: var(--surface);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.modern-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    border-color: var(--card-border);
}
.modern-kpi-card .chart-area {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: auto;
    height: 100px;
    overflow: hidden;
    padding-bottom: 15px;
}

/* Colored top-border accent (mockup .kpi.k-*) — add a k-* class to any card shell */
.k-blue::before, .k-teal::before, .k-amber::before, .k-pink::before,
.k-red::before, .k-purple::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}
.k-blue::before   { background: var(--blue); }
.k-teal::before   { background: var(--teal); }
.k-amber::before  { background: var(--amber); }
.k-pink::before   { background: var(--pink); }
.k-red::before    { background: var(--red); }
.k-purple::before { background: var(--purple); }

/* KPI delta text */
.kpi-delta { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.kpi-delta.up { color: var(--teal); }
.kpi-delta.down { color: var(--red); }

.detail-card,
.panel {
    background-color: var(--surface);
    background-image: none;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 16px 22px;
    height: 100%;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.panel h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel h3 .badge { font-size: 12px; color: var(--mute); font-weight: 500; margin-left: auto; background: none; }

.table-dark { --bs-table-bg: transparent; color: var(--body); }
.table-borderless th, .table-borderless td { border: none; }

/* Theme-aware table on a card surface (use INSTEAD of Bootstrap's .table-dark, which hard-codes
   white cell text and is invisible in light mode). Cells follow --body, headers --mute. */
.table-plain { --bs-table-bg: transparent; --bs-table-color: var(--body); color: var(--body); }
.table-plain thead th { color: var(--mute); }


/* ======================================
   Horizontal KPI scroll row (dashboard)
========================================= */
.kpi-scroll { position: relative; }
.scroll-wrapper { position: relative; }

.fade-left, .fade-right {
    position: absolute;
    top: 0; bottom: 0;
    width: 56px;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.2s;
}
.fade-left  { left: 0;  background: linear-gradient(to right, var(--bg) 0%, transparent 100%); }
.fade-right { right: 0; background: linear-gradient(to left,  var(--bg) 0%, transparent 100%); }
.fade-left.hidden, .fade-right.hidden { opacity: 0; }

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--rule);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 3;
    color: var(--mute);
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    transition: opacity 0.2s, background 0.15s, color 0.15s;
}
.scroll-btn:hover { background: var(--bg); color: var(--ink); }
.scroll-btn.hidden { opacity: 0; pointer-events: none; }
.scroll-btn.left  { left: 4px; }
.scroll-btn.right { right: 4px; }

.kpi-scroll-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 2px 4px;
}
.kpi-scroll-track::-webkit-scrollbar { display: none; }

/* 4 cards visible at a time on desktop; the rest scroll. */
.kpi-slide { flex: 0 0 calc((100% - 36px) / 4); display: flex; }
.kpi-slide > .modern-kpi-card { width: 100%; }

.divider-card {
    flex: 0 0 1px;
    align-self: stretch;
    border-left: 1px dashed var(--rule);
    margin: 6px 6px;
}

.dot-row { display: flex; justify-content: center; gap: 5px; margin-top: 12px; }
.dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--rule);
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
}
.dot.active { background: var(--mute); transform: scale(1.25); }

@media (max-width: 991.98px) { .kpi-slide { flex-basis: calc((100% - 12px) / 2); } }
@media (max-width: 575.98px) { .kpi-slide { flex-basis: 82%; } }


/* ======================================
   Withdrawn-contact-detail card (Lead Analytics)
   Global + context-scoped to the widget root, because these elements are rendered through
   KpiScrollRow's ChildContent slot — where the widget's own .razor.css scope doesn't reach.
========================================= */
[data-widget="withdrawn-contact-detail"] .wcd-pill {
    background: var(--red-soft);
    color: var(--red-dark);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
[data-widget="withdrawn-contact-detail"] .wcd-divider { height: 1px; background: var(--rule); margin: 12px 0; }

[data-widget="withdrawn-contact-detail"] .wcd-stat-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px;
}
[data-widget="withdrawn-contact-detail"] .wcd-stat { background: var(--softrule); border-radius: 8px; padding: 10px 12px; }
[data-widget="withdrawn-contact-detail"] .wcd-stat-lbl {
    font-size: 10px; color: var(--mute); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 3px;
}
[data-widget="withdrawn-contact-detail"] .wcd-stat-val { font-size: 1.35rem; font-weight: 600; color: var(--ink); line-height: 1; }
[data-widget="withdrawn-contact-detail"] .wcd-label {
    font-size: 10px; font-weight: 600; color: var(--faint); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px;
}

[data-widget="withdrawn-contact-detail"] .breakdown-card,
[data-widget="withdrawn-contact-detail"] .count-card {
    width: 100%; background: var(--softrule); border-radius: 8px; padding: 11px 13px;
}
[data-widget="withdrawn-contact-detail"] .breakdown-card { display: flex; flex-direction: column; gap: 5px; }
[data-widget="withdrawn-contact-detail"] .breakdown-type { font-size: 12px; font-weight: 600; color: var(--ink); }
[data-widget="withdrawn-contact-detail"] .breakdown-bar-track { height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
[data-widget="withdrawn-contact-detail"] .breakdown-bar-fill { height: 100%; border-radius: 2px; }
[data-widget="withdrawn-contact-detail"] .breakdown-count { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1; }
[data-widget="withdrawn-contact-detail"] .breakdown-pct { font-size: 10px; color: var(--faint); }

[data-widget="withdrawn-contact-detail"] .group-label {
    font-size: 10px; font-weight: 600; color: var(--faint); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px;
}
[data-widget="withdrawn-contact-detail"] .count-row {
    display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--rule);
}
[data-widget="withdrawn-contact-detail"] .count-row:last-child { border-bottom: none; }
[data-widget="withdrawn-contact-detail"] .count-label { font-size: 11px; color: var(--mute); }
[data-widget="withdrawn-contact-detail"] .count-val-red     { font-size: 12px; font-weight: 600; color: var(--red); }
[data-widget="withdrawn-contact-detail"] .count-val-neutral { font-size: 12px; font-weight: 600; color: var(--ink); }
[data-widget="withdrawn-contact-detail"] .count-val-dim     { font-size: 12px; font-weight: 600; color: var(--faint); }


/* ======================================
   Lead Types by Agent — highlight cells that actually have a value
========================================= */
[data-widget="agent-breakdown"] .agent-count {
    display: inline-block;
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--blue-soft);
    color: var(--blue-dark);
    font-weight: 700;
    font-size: 0.8rem;
}
[data-widget="agent-breakdown"] .agent-empty { color: var(--faint); }
[data-bs-theme="dark"] [data-widget="agent-breakdown"] .agent-count { color: var(--blue); }


/* ======================================
   LIVE strip (dashboard)
========================================= */
.live-strip {
    background: var(--livebg);
    border-radius: 14px;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}
.live-pill {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,45,175,0.16); color: var(--pink);
    padding: 7px 13px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: 2px;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); display: inline-block; box-shadow: 0 0 0 4px rgba(255,45,175,0.2); animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 4px rgba(255,45,175,0.20); }
    50%      { opacity: 0.35; box-shadow: 0 0 0 7px rgba(255,45,175,0.05); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.live-dot-sm { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); display: inline-block; box-shadow: 0 0 0 3px rgba(13,148,136,0.22); }
.live-num { font-size: 46px; font-weight: 900; color: #FFFFFF; line-height: 1; letter-spacing: -1px; }
.live-sub { color: #B0B0BE; font-size: 14px; font-weight: 500; }
.live-spark { margin-left: auto; display: flex; align-items: flex-end; gap: 4px; height: 50px; }
.live-spark span { width: 6px; background: var(--pink); border-radius: 2px; opacity: 0.9; }

.period {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 14px;
    color: var(--ink);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* ======================================
   Stat cards (Lead Analytics — info / warn / neg)
========================================= */
.stat-card {
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 24px 26px;
    position: relative;
    overflow: hidden;
}
.stat-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; }
.stat-label { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--mute); }
.stat-num { font-size: 50px; font-weight: 900; color: var(--ink); margin-top: 12px; letter-spacing: -1.5px; line-height: 1; }
.stat-sub { font-size: 13px; color: var(--mute); margin-top: 8px; }
.stat-card.info::before { background: var(--blue); }
.stat-card.warn { background: var(--amber-soft); border-color: #FDE68A; }
.stat-card.warn::before { background: var(--amber); }
.stat-card.warn .stat-num, .stat-card.warn .stat-label { color: var(--amber-dark); }
.stat-card.neg { background: var(--red-soft); border-color: #FECACA; }
.stat-card.neg::before { background: var(--red); }
.stat-card.neg .stat-num { color: var(--red); }
.stat-card.neg .stat-label { color: var(--red-dark); }


/* ======================================
   Funnel (Lead Analytics drop-off)
========================================= */
.funnel-row {
    display: grid;
    grid-template-columns: 220px 1fr 120px;
    gap: 18px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--softrule);
}
.funnel-row:first-of-type { border-top: none; }
.funnel-label { font-size: 15px; font-weight: 600; color: var(--ink); }
.funnel-label .lite { color: var(--mute); font-weight: 500; font-size: 12px; display: block; margin-top: 2px; }
.funnel-bar { height: 20px; background: var(--softrule); border-radius: 6px; overflow: hidden; }
.funnel-bar i { display: block; height: 100%; background: var(--pink); }
.funnel-bar i.blue { background: var(--blue); }
.funnel-bar i.teal { background: var(--teal); }
.funnel-bar i.warn { background: var(--amber); }
.funnel-bar i.neg  { background: var(--red); }
.funnel-val { font-size: 17px; font-weight: 700; color: var(--ink); text-align: right; }
.funnel-val .lite { color: var(--mute); font-weight: 500; font-size: 12px; display: block; }


/* ======================================
   Coaching cards
========================================= */
.coach-card {
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 10px;
}
.coach-tag {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    padding: 4px 10px; border-radius: 999px; display: inline-block; margin-bottom: 10px;
}
.coach-tag.warn { background: var(--amber-soft); color: var(--amber-dark); }
.coach-tag.opp  { background: var(--purple-soft); color: var(--purple-dark); }
.coach-tag.good { background: var(--teal-soft); color: var(--teal-dark); }
.coach-title { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.coach-sub { font-size: 13px; color: var(--mute); margin-top: 5px; line-height: 1.45; }


/* ======================================
   Officer / leaderboard table rows
========================================= */
.officer-row {
    display: grid;
    grid-template-columns: 32px 1.4fr 1fr 1fr 60px;
    gap: 14px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--softrule);
}
.officer-row.head {
    color: var(--mute); font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; border-top: none; padding-top: 0; padding-bottom: 6px;
}
.av-sm {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg); border: 1px solid var(--rule); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.officer-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.officer-sub { font-size: 12px; color: var(--mute); margin-top: 2px; }
.officer-stat { font-size: 17px; font-weight: 700; color: var(--ink); }
.barlight { width: 60px; height: 7px; background: var(--softrule); border-radius: 4px; position: relative; }
.barlight i { display: block; height: 100%; border-radius: 4px; }


/* ======================================
   Lead profile — pills, data rows, opportunities
========================================= */
.profile-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700; margin-top: 12px; margin-right: 6px;
}
.pill-funded { background: var(--teal-soft); color: var(--teal-dark); }
.pill-active { background: var(--pink-soft); color: var(--pink-dark); }

.data-row {
    display: grid; grid-template-columns: 130px 1fr; gap: 12px;
    padding: 12px 0; border-top: 1px solid var(--softrule); align-items: center;
}
.data-key { font-size: 13px; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: 0.3px; }
.data-val { font-size: 16px; font-weight: 600; color: var(--ink); }
.data-val.big { font-size: 26px; font-weight: 800; }
.data-val .muted { color: var(--mute); font-size: 13px; font-weight: 500; margin-left: 8px; }

.panel-eyebrow {
    margin: 0 0 4px 0; font-size: 14px; font-weight: 700; color: var(--ink);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.panel-eyebrow .meta { font-size: 12px; color: var(--mute); font-weight: 500; margin-left: 8px; text-transform: none; letter-spacing: 0; }

.opp-card {
    border: 1px solid var(--rule); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px;
    display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
}
.opp-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.opp-sub { font-size: 13px; color: var(--mute); margin-top: 5px; }
.opp-prob { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.opp-prob.high { background: var(--teal-soft); color: var(--teal-dark); }
.opp-prob.mid  { background: var(--amber-soft); color: var(--amber-dark); }
.opp-btn { background: var(--ink); color: var(--surface); padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; }


/* ======================================
   Transcript turns + extracted-lead rows
========================================= */
.tp-turn { padding: 12px 0; border-top: 1px solid var(--softrule); }
.tp-turn:first-of-type { border-top: none; }
.tp-speaker { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--pink); margin-bottom: 4px; }
.tp-speaker.agent { color: var(--blue); }
.tp-line { font-size: 15px; line-height: 1.5; color: var(--body); }

.ai-tag {
    background: var(--purple-soft); color: var(--purple-dark);
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    letter-spacing: 1px; vertical-align: 2px; margin-left: 8px;
}

.extract-row { padding: 12px 0; border-top: 1px solid var(--softrule); }
.extract-row:first-of-type { border-top: none; padding-top: 0; }
.extract-key { font-size: 12px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: 0.5px; }
.extract-val { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.extract-val .light { color: var(--mute); font-weight: 500; font-size: 13px; margin-left: 6px; }


/* === Right-side filter panel === */
.filter-panel {
    position: fixed;
    top: 0; right: 0;
    width: 320px;
    max-width: 100%;
    height: 100vh;
    background-color: var(--surface);
    border-left: 1px solid var(--rule);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
    padding: 1.5rem;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1050;
}
.filter-panel.open { transform: translateX(0); }
.filters-open { margin-right: 320px; transition: margin-right 0.3s ease; }

.filter-header {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.5rem;
}
.filter-header h5 {
    color: var(--ink);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
}
.filter-body {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding-right: 5px;
}
.filter-panel .form-control,
.filter-panel .form-select {
    background-color: var(--bg);
    border: 1px solid var(--rule);
    color: var(--body);
    font-size: 0.9rem;
}
.filter-panel .form-control:focus,
.filter-panel .form-select:focus {
    background-color: var(--surface);
    border-color: var(--pink);
    box-shadow: 0 0 0 4px rgba(255, 45, 175, 0.12);
}
.filter-panel .form-control::placeholder { color: var(--faint); }
.filter-panel label { color: var(--mute); font-size: 0.85rem; margin-bottom: 0.25rem; }

@media (max-width: 768px) {
    .filters-open { margin-right: 0; }
    .filter-panel { width: 100%; }
}


/*
=============================================
 Table "view rows" — MyTasks + LeadQueue
=============================================*/
.view-row {
    background: transparent;
    transition: transform .25s ease;
}
.view-row:hover { cursor: pointer; transform: translateX(4px); }

.view-row td {
    position: relative;
    z-index: 0;
    padding: 1rem 1.25rem;
    vertical-align: middle;
    border-top: 1px solid var(--rule) !important;
    border-bottom: 1px solid var(--rule) !important;
    border-left: none;
    border-right: none;
    background-color: var(--surface);
    background-image: none;
}
.view-row td:first-child {
    border-left: 1px solid var(--rule) !important;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.view-row td:last-child {
    border-right: 1px solid var(--rule) !important;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Hover: brand-pink border wrap */
.view-row:hover td {
    border-top-color: var(--pink) !important;
    border-bottom-color: var(--pink) !important;
}
.view-row:hover td:first-child { border-left-color: var(--pink) !important; }
.view-row:hover td:last-child  { border-right-color: var(--pink) !important; }

/* ====== Avatars ====== */
.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #ffffff;
    flex-shrink: 0;
    background: var(--avatar-bg);
}
.avatar-pink { background: var(--pink); }

/* Assign button revealed on row hover */
.view-row .btn-gradient,
.lq-row .btn-gradient {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: all 0.2s ease;
}
.view-row:hover .btn-gradient,
.lq-row:hover .btn-gradient {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* ====== Badges ====== */
.badge-status {
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-block;
    /* Neutral default so a bare .badge-status doesn't fall back to Bootstrap's white badge text. */
    background: var(--softrule);
    color: var(--body);
}
/* Status variants (soft bg + readable text in both themes) */
.badge-funded    { background: var(--teal-soft);   color: var(--teal-dark); }
.badge-active    { background: var(--blue-soft);   color: var(--blue-dark); }
.badge-approved  { background: var(--purple-soft); color: var(--purple-dark); }
.badge-declined  { background: var(--red-soft);    color: var(--red-dark); }
.badge-withdrawn { background: var(--amber-soft);  color: var(--amber-dark); }

@media (max-width: 768px) {
    .view-row {
        display: block;
        margin-bottom: 1rem;
        border-radius: 12px;
        border: 1px solid var(--rule);
        overflow: hidden;
        transition: border-color .3s ease;
    }
    .view-row:hover { border-color: var(--pink); transform: none; }
    .view-row td {
        display: block;
        text-align: left;
        padding: 0.75rem 1rem;
        border: none !important;
    }
    .view-row td:first-child,
    .view-row td:last-child { border: none !important; border-radius: 0 !important; }
}


/*
=============================================
 Tab filter drawer (LeadQueue / MyTasks)
=============================================*/
.tab-filters {
    position: fixed;
    top: 0; right: -320px;
    width: 320px;
    height: 100%;
    background-color: var(--surface);
    border-left: 1px solid var(--rule);
    box-shadow: -8px 0 30px rgba(0,0,0,0.12);
    transition: right 0.3s ease-in-out;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    padding-top: 60px;
}
.tab-filters.open { right: 0; }
.tab-filters-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--rule);
    margin-top: 1rem;
}
.tab-filters-body { padding: 1.5rem; overflow-y: auto; flex: 1; }


/* ====== Avatar / agent tooltip ====== */
.agent-wrapper { position: relative; display: inline-block; cursor: default; }
.agent-tooltip {
    visibility: hidden;
    opacity: 0;
    width: max-content;
    background-color: var(--livebg);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 6px 10px;
    position: absolute;
    z-index: 10;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.2s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
    font-weight: 500;
}
.agent-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--livebg) transparent transparent transparent;
}
.agent-wrapper:hover .agent-tooltip { visibility: visible; opacity: 1; }


/* ============================================================================
   Dark-theme refinements for the soft "tag" colors. In dark mode the -soft
   backgrounds are low-alpha, so the text should use the base (brighter) color
   rather than the very dark -dark variant (mirrors the mockup).
   ============================================================================ */
[data-bs-theme="dark"] .coach-tag.warn,
[data-bs-theme="dark"] .stat-card.warn .stat-num,
[data-bs-theme="dark"] .stat-card.warn .stat-label { color: var(--amber); }
[data-bs-theme="dark"] .coach-tag.opp { color: var(--purple); }
[data-bs-theme="dark"] .coach-tag.good,
[data-bs-theme="dark"] .pill-funded,
[data-bs-theme="dark"] .opp-prob.high { color: var(--teal); }
[data-bs-theme="dark"] .pill-active { color: var(--pink); }
[data-bs-theme="dark"] .opp-prob.mid { color: var(--amber); }
[data-bs-theme="dark"] .badge-funded    { color: var(--teal); }
[data-bs-theme="dark"] .badge-active    { color: var(--blue); }
[data-bs-theme="dark"] .badge-approved  { color: var(--purple); }
[data-bs-theme="dark"] .badge-declined  { color: var(--red); }
[data-bs-theme="dark"] .badge-withdrawn { color: var(--amber); }
[data-bs-theme="dark"] .stat-card.warn { border-color: rgba(217,119,6,0.35); }
[data-bs-theme="dark"] .stat-card.neg { border-color: rgba(220,38,38,0.35); }
[data-bs-theme="dark"] .stat-card.neg .stat-num,
[data-bs-theme="dark"] .stat-card.neg .stat-label { color: var(--red); }
[data-bs-theme="dark"] .opp-btn { background: #FFFFFF; color: var(--bg); }
[data-bs-theme="dark"] .live-strip { border: 1px solid rgba(255, 255, 255, 0.06); }


/* ============================================================================
   Lead Details page — modern reskin
   Page-scoped (via .lead-details-page on the root) and global, so the styles reach
   the child widgets too. Reskins existing markup; no functionality changes.
   ============================================================================ */

/* Small uppercase card title (mockup .card-title) — opt-in via .card-eyebrow, and applied to
   the existing .info-label card titles so every widget's heading matches without per-file edits. */
.lead-details-page .card-eyebrow,
.lead-details-page .info-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--mute); margin-bottom: 14px;
}

/* Bootstrap .btn-outline-light is invisible on a white card — give the page's "View all / Upload /
   Retry" buttons a token-based subtle outline that works in both themes. */
.lead-details-page .btn-outline-light {
    color: var(--ink); background: var(--surface); border: 1px solid var(--rule);
}
.lead-details-page .btn-outline-light:hover {
    color: var(--pink); border-color: var(--pink); background: var(--surface);
}

/* Clean field rows (label + value with subtle separators) */
.lead-details-page .field-row {
    display: flex; align-items: baseline; gap: 16px;
    padding: 11px 0; border-bottom: 1px solid var(--softrule);
}
.lead-details-page .field-row:last-child { border-bottom: none; }
.lead-details-page .field-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--mute); width: 96px; flex-shrink: 0;
}
.lead-details-page .field-value { font-size: 15px; font-weight: 600; color: var(--ink); }
.lead-details-page .field-sub { font-size: 13px; font-weight: 400; color: var(--mute); margin-left: 6px; }

/* (BL-85: the cross-sell .offer-* / .match-* / .btn-send rules moved to LeadOpportunitiesCard.razor.css as tiles; the
   unused .display-4, .lead-combined-section and .dot-pill rules and the invalid "::deep .info-card" rule are gone.) */

/* Clean accordion ("More details") */
.lead-details-page .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-active-bg: var(--surface);
    --bs-accordion-active-color: var(--ink);
    --bs-accordion-border-color: var(--card-border);
    --bs-accordion-btn-focus-box-shadow: none;
}
.lead-details-page .accordion-item {
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 12px !important;
    margin-bottom: 10px;
    overflow: hidden;
}
.lead-details-page .accordion-button {
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    box-shadow: none;
}
.lead-details-page .accordion-button:not(.collapsed) { background: var(--surface); color: var(--ink); box-shadow: none; }
.lead-details-page .accordion-button:focus { box-shadow: none; border-color: var(--card-border); }
.lead-details-page .accordion-body { background: var(--surface); color: var(--body); }

/* BL-85: keyboard focus is always visible on the lead page and its drawer (global, so it reaches every child widget and
   overrides the focus resets above, e.g. the accordion's). Mouse clicks don't show it (:focus-visible). */
.lead-details-page :is(a, button, select, input, textarea, summary, [tabindex], [role="tab"]):focus-visible,
.lead-drawer :is(a, button, select, input, textarea, summary, [tabindex], [role="tab"]):focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: 2px;
}



/* ────────────────────────────────────────────────────────────────────────────
   Lead Queue card-list (temperature-scale rows + filter bar)
   Lives global (not scoped) so the rules reach the LeadQueueRow child component.
   All colors come from the shared design tokens, so light/dark follow the swap.
   ──────────────────────────────────────────────────────────────────────────── */

/* Cold→Hot legend in the page header */
.lq-legend { display: flex; align-items: center; gap: .5rem; }
.lq-legend-label { font-size: .72rem; font-weight: 600; color: var(--mute);
    text-transform: uppercase; letter-spacing: .04em; }
.lq-legend-bar { width: 150px; height: 8px; border-radius: 6px;
    background: linear-gradient(90deg, #85B7EB, #1D9E75, #EF9F27, #D85A30, #E24B4A); }

/* Filter bar — fields flex proportionally and all controls share one height,
   so the bar stays aligned as it wraps across breakpoints. */
.lq-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem;
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: 14px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.lq-field { display: flex; flex-direction: column; gap: .3rem;
    flex: 1 1 140px; min-width: 120px; }
.lq-field.lq-field-sm { flex: 1 1 100px; min-width: 92px; }   /* amounts + dates */
.lq-field label { font-size: .7rem; font-weight: 600; color: var(--mute);
    text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lq-field input, .lq-field select {
    width: 100%; box-sizing: border-box; height: 38px;
    background: var(--bg); border: 1px solid var(--card-border); color: var(--ink);
    border-radius: 8px; padding: .42rem .6rem; font-size: .85rem; }
.lq-field input:focus, .lq-field select:focus {
    outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(59,130,246,.18); }
.lq-filter-actions { display: flex; align-items: flex-end; gap: .5rem;
    flex: 0 0 auto; margin-left: auto; }
.lq-filter-actions .btn { height: 38px; display: inline-flex; align-items: center; }

/* Card list */
.lq-list { display: flex; flex-direction: column; gap: 10px; }
.lq-row { display: grid;
    grid-template-columns: minmax(220px, 1.6fr) minmax(150px, 1fr) auto minmax(120px, auto);
    align-items: center; gap: 1.25rem;
    background: var(--surface); border: 1px solid var(--card-border);
    border-left: 4px solid var(--seg-color, var(--rule));
    border-radius: 14px; padding: .9rem 1.25rem; cursor: pointer;
    transition: box-shadow .15s, transform .15s; }
.lq-row:hover { box-shadow: 0 4px 18px rgba(0,0,0,.08); transform: translateY(-1px); }

.lq-main { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.lq-identity { min-width: 0; }
.lq-name-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lq-name { font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.lq-meta { display: flex; align-items: center; gap: .4rem; color: var(--mute);
    font-size: .85rem; margin-top: 2px; flex-wrap: wrap; }
.lq-dot { color: var(--faint); }

/* Temperature scale */
.lq-temp { min-width: 150px; }
.lq-scale-bar { position: relative; height: 14px; display: flex; align-items: center; }
.lq-scale-track { position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%); display: flex; height: 8px;
    border-radius: 6px; overflow: hidden; }
.lq-seg { flex: 1; }
.lq-pointer { position: absolute; top: 50%; width: 14px; height: 14px;
    border-radius: 50%; background: #fff; border: 3px solid var(--ink);
    transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.lq-scale-label { font-size: .78rem; font-weight: 700; margin-top: 6px; text-align: center; }

/* Idle / contacts */
.lq-idle { text-align: center; min-width: 78px; }
.lq-idle-hrs { font-weight: 700; color: var(--ink); font-size: .95rem; }
.lq-idle-sub { font-size: .72rem; color: var(--mute); }
.lq-reached { color: var(--teal-dark); font-weight: 700; }

/* Agent control */
.lq-agent { display: flex; justify-content: flex-end; min-width: 120px; }

/* Outbound / campaign detail card (was an expandable table row) */
.lq-detail { margin: -2px 0 4px 2.5rem; background: var(--bg);
    border: 1px solid var(--card-border); border-radius: 12px; padding: .85rem 1.1rem; }
.lq-detail-fields { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: space-between; }
.lq-detail-field { display: flex; flex-direction: column; }

@media (max-width: 900px) {
    .lq-row { grid-template-columns: 1fr; gap: .75rem; }
    .lq-agent { justify-content: flex-start; }
}

/* ── Task-queue variant of the card row (My Tasks) — no temperature scale ──
   Reuses .lq-row / .lq-main / .lq-identity / .lq-meta; just swaps the columns. */
.lq-row-task { grid-template-columns: minmax(240px, 2fr) minmax(120px, auto) auto; }
.lq-task-desc { font-size: .82rem; color: var(--mute); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 560px; }
.lq-due { text-align: center; min-width: 110px; }
.lq-due-label { font-size: .7rem; font-weight: 600; color: var(--mute);
    text-transform: uppercase; letter-spacing: .04em; }
.lq-due-val { font-weight: 700; color: var(--ink); font-size: .95rem; }
.lq-due-val.overdue { color: var(--red); }
.lq-task-actions { display: flex; justify-content: flex-end; min-width: 120px; }

@media (max-width: 900px) {
    .lq-row-task { grid-template-columns: 1fr; }
    .lq-due { text-align: left; }
    .lq-task-actions { justify-content: flex-start; }
}

/* ── Member-profile variant of the card row (a member's past leads) ──
   Reuses .lq-row / .lq-main / .lq-identity / .lq-meta; identity + notes columns. */
.lq-row-member { grid-template-columns: minmax(240px, 2fr) minmax(160px, 1.4fr); }
@media (max-width: 900px) {
    .lq-row-member { grid-template-columns: 1fr; }
}

/* Queue selection for "Fix this" (managers/admins) */
.lq-selectbar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 12px;
    border: 1px solid var(--pink, #FF2DAF); border-radius: 12px;
    background: color-mix(in srgb, var(--pink, #FF2DAF) 6%, transparent);
    font-size: 14px;
}
.lq-row .lq-select { flex-shrink: 0; width: 18px; height: 18px; margin: 0 4px 0 0; accent-color: var(--pink, #FF2DAF); cursor: pointer; }
.lq-row.is-selected { box-shadow: inset 3px 0 0 var(--pink, #FF2DAF); background: color-mix(in srgb, var(--pink, #FF2DAF) 5%, transparent); }
.btn-search-circle.is-on { background: var(--pink, #FF2DAF); color: #fff; }