/* DA Leads - Custom Styles */

/* Blur effect for locked content */
.blur-locked {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

/* Upgrade badge overlay */
.upgrade-overlay {
    position: relative;
}
.upgrade-overlay::after {
    content: "PRO";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #2563eb;
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    pointer-events: none;
}

/* Table row hover */
.lead-row:hover {
    background-color: #f9fafb;
}

/* Active filter button */
.filter-active {
    background-color: #2563eb;
    color: white;
}

/* Glass nav */
.glass-nav {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid #e2e8f0;
}

/* Get Discovered section - micro UI backgrounds */
.mini-grid-bg {
    background-size: 16px 16px;
    background-image:
        linear-gradient(to right, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
}
.dash-line {
    background-image: linear-gradient(90deg, #cbd5e1 50%, transparent 50%);
    background-size: 8px 1px;
}

/* Custom select arrow with proper right padding */
select.select-styled,
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2rem !important;
}

/* Smooth page transitions */
main {
    animation: fadeIn 0.2s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

/* Multi-select tag chips (see static/js/multi-select-chips.js).
   Sizing matches sibling filter inputs (py-2 px-3 text-sm bg-slate-50
   border-slate-200 rounded-lg focus:border-brand-500) — one-line by default,
   capped at 2 lines via max-height + internal vertical scroll so the filter
   row stays aligned even when many chips are added. */
.msc { position: relative; }
.msc-inputrow {
    /* Default: single-line height that matches sibling <select>/<input> at 38px.
       Chips overflow horizontally with a scrollbar so the row stays aligned in
       the desktop filter strip. On focus we let the row grow to 2-3 lines so
       the user can see all chips while editing. */
    display: flex; flex-wrap: nowrap; gap: 4px; align-items: center;
    height: 38px;
    overflow-x: auto; overflow-y: hidden;
    padding: 3px 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: text;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease, height 150ms ease;
    scrollbar-width: thin;
}
.msc-inputrow::-webkit-scrollbar { height: 4px; }
.msc-inputrow::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.msc-inputrow:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    background: #ffffff;
    height: auto;
    min-height: 38px;
    max-height: 96px;
    overflow-y: auto;
    overflow-x: hidden;
    flex-wrap: wrap;
}
.msc-chips { display: contents; }
.msc-chip {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 1px 4px 1px 8px;
    background: #dbeafe; color: #1e3a8a;            /* blue-100 / blue-900 */
    border-radius: 6px;
    font-size: 12px; line-height: 1.4;
    font-weight: 500;
}
.msc-chip-label { white-space: nowrap; }
.msc-chip-x {
    background: transparent; border: 0; cursor: pointer;
    color: #3b82f6; font-size: 14px; line-height: 1;
    padding: 0 2px; margin-left: 1px;
    border-radius: 3px;
}
.msc-chip-x:hover { color: #1e3a8a; background: rgba(59, 130, 246, 0.15); }
.msc-input {
    flex: 1; min-width: 90px;
    border: 0; outline: none; background: transparent;
    padding: 0; line-height: 24px;
    color: #0f172a;
    /* iOS Safari auto-zooms into any input with font-size < 16px on focus.
       Force 16px on small viewports and step back down to 14px on >=sm.
       The visual size is the same as before once zoomed correctly. */
    font-size: 16px;
}
@media (min-width: 640px) {
    .msc-input { font-size: 14px; }
}

/* Same iOS-zoom guard for the dashboard mobile search input + state select.
   Only on small viewports — desktop keeps the original 14px / 12px sizing. */
@media (max-width: 639px) {
    #f-search-m, #f-state-m { font-size: 16px !important; }
}
.msc-input::placeholder { color: #94a3b8; }
.msc-dropdown {
    position: absolute; z-index: 20;
    top: calc(100% + 4px); left: 0; right: 0;
    max-height: 240px; overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.msc-option {
    padding: 8px 12px; cursor: pointer;
    font-size: 14px; color: #334155;
}
.msc-option:hover,
.msc-option.msc-option-active { background: #eff6ff; color: #1e3a8a; }
.msc-empty {
    padding: 10px 12px; color: #94a3b8;
    font-size: 13px; font-style: italic;
}