/**
 * sc_filter.css — Universal Filter + Search bar (7 May 2026)
 * Grow24 AI · Token-only · Zero hardcoded colors (Rule 15)
 *
 * Classes:
 *   .scf-bar              — filter bar container (flex row, wraps on mobile)
 *   .scf-search-wrap      — search input + icon + clear button
 *   .scf-group            — label + controls group (chips / range / date)
 *   .scf-group--range     — number min/max variant
 *   .scf-group--date      — date from/to variant
 *   .scf-chips            — chip button group
 *   .scf-chip             — pill filter button
 *   .scf-chip--active     — selected state
 *   .scf-bar__right       — right-aligned count badge + clear button
 *   .scf-active-count     — "N filters" badge
 *   .scf-clear-btn        — "Clear all" text button
 */

/* ── Bar container ──────────────────────────────────────────────────── */
.scf-bar {
    display        : flex;
    align-items    : center;
    flex-wrap      : wrap;
    gap            : var(--space-2, 8px);
    padding        : var(--space-2, 8px) var(--space-3, 12px);
    background     : var(--color-surface-elevated, transparent);
    border         : 1px solid var(--color-border-subtle, #eee);
    border-radius  : var(--radius-lg, 8px);
    margin-bottom  : var(--space-3, 12px);
}

/* ── Search ─────────────────────────────────────────────────────────── */
.scf-search-wrap {
    position   : relative;
    display    : flex;
    align-items: center;
    min-width  : 180px;
    flex       : 1 1 180px;
    max-width  : 320px;
}

.scf-search-icon {
    position      : absolute;
    left          : 10px;
    color         : var(--color-text-muted, #888);
    font-size     : 15px;
    pointer-events: none;
    line-height   : 1;
    user-select   : none;
}

.scf-search-input {
    width      : 100%;
    padding    : 7px 32px 7px 30px;
    border     : 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-md, 6px);
    background : var(--color-surface-base, var(--color-surface-elevated, #fff));
    color      : var(--color-text-body, inherit);
    font-size  : var(--text-sm, 13px);
    line-height: 1.4;
    transition : border-color var(--transition-fast, 120ms),
                 box-shadow   var(--transition-fast, 120ms);
    /* hide Chrome's native clear button — we have our own */
    -webkit-appearance: none;
}
.scf-search-input::-webkit-search-cancel-button { display: none; }
.scf-search-input::placeholder { color: var(--color-text-placeholder, var(--color-text-muted, #aaa)); }
.scf-search-input:focus {
    outline     : none;
    border-color: var(--color-brand, #4f46e5);
    box-shadow  : 0 0 0 2px var(--color-brand-soft, rgba(79,70,229,.12));
}

.scf-search-clear {
    position     : absolute;
    right        : 6px;
    background   : none;
    border       : none;
    cursor       : pointer;
    color        : var(--color-text-muted, #999);
    font-size    : 13px;
    padding      : 4px 5px;
    line-height  : 1;
    border-radius: var(--radius-sm, 3px);
    transition   : color var(--transition-fast, 120ms);
}
.scf-search-clear:hover { color: var(--color-text-body, #111); }

/* ── Group wrapper ──────────────────────────────────────────────────── */
.scf-group {
    display    : flex;
    align-items: center;
    gap        : var(--space-1, 4px);
    flex-wrap  : wrap;
}

.scf-group-label {
    font-size     : var(--text-xs, 11px);
    font-weight   : 600;
    color         : var(--color-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space   : nowrap;
    margin-right  : 2px;
}

/* ── Chip group ─────────────────────────────────────────────────────── */
.scf-chips {
    display    : flex;
    align-items: center;
    gap        : var(--space-1, 4px);
    flex-wrap  : wrap;
}

.scf-chip {
    display      : inline-flex;
    align-items  : center;
    padding      : 4px 11px;
    border       : 1px solid var(--color-border-default, #ddd);
    border-radius: 99px;
    background   : var(--color-surface-base, var(--color-surface-elevated, #fff));
    color        : var(--color-text-body, #111);
    font-size    : var(--text-xs, 12px);
    font-weight  : 500;
    cursor       : pointer;
    user-select  : none;
    white-space  : nowrap;
    transition   : background     var(--transition-fast, 120ms),
                   border-color   var(--transition-fast, 120ms),
                   color          var(--transition-fast, 120ms);
}

.scf-chip:hover:not(.scf-chip--active) {
    background  : var(--color-surface-hover, #f5f5f5);
    border-color: var(--color-brand, #4f46e5);
    color       : var(--color-brand, #4f46e5);
}

.scf-chip--active {
    background  : var(--color-brand-soft, rgba(79,70,229,.12));
    border-color: var(--color-brand, #4f46e5);
    color       : var(--color-brand, #4f46e5);
    font-weight : 600;
}

.scf-chip--active:hover {
    background: var(--color-brand-soft, rgba(79,70,229,.2));
}

/* ── Range group ────────────────────────────────────────────────────── */
.scf-group--range { gap: var(--space-1, 4px); }

.scf-range-input {
    width        : 80px;
    padding      : 5px 8px;
    border       : 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-sm, 4px);
    background   : var(--color-surface-base, var(--color-surface-elevated, #fff));
    color        : var(--color-text-body, inherit);
    font-size    : var(--text-sm, 13px);
    text-align   : right;
    transition   : border-color var(--transition-fast, 120ms);
    /* hide number spinner arrows */
    -moz-appearance: textfield;
}
.scf-range-input::-webkit-outer-spin-button,
.scf-range-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.scf-range-input:focus {
    outline     : none;
    border-color: var(--color-brand, #4f46e5);
    box-shadow  : 0 0 0 2px var(--color-brand-soft, rgba(79,70,229,.10));
}

.scf-range-sep {
    color      : var(--color-text-muted, #888);
    font-size  : var(--text-sm, 13px);
    flex-shrink: 0;
}

/* ── Date group ─────────────────────────────────────────────────────── */
.scf-group--date { gap: var(--space-1, 4px); }

.scf-date-input {
    padding      : 5px 8px;
    border       : 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-sm, 4px);
    background   : var(--color-surface-base, var(--color-surface-elevated, #fff));
    color        : var(--color-text-body, inherit);
    font-size    : var(--text-sm, 13px);
    cursor       : pointer;
    transition   : border-color var(--transition-fast, 120ms);
}
.scf-date-input:focus {
    outline     : none;
    border-color: var(--color-brand, #4f46e5);
    box-shadow  : 0 0 0 2px var(--color-brand-soft, rgba(79,70,229,.10));
}

/* ── Right side: active count + clear ───────────────────────────────── */
.scf-bar__right {
    display    : flex;
    align-items: center;
    gap        : var(--space-2, 8px);
    margin-left: auto;
    flex-shrink: 0;
}

.scf-active-count {
    font-size    : var(--text-xs, 12px);
    font-weight  : 600;
    color        : var(--color-brand, #4f46e5);
    background   : var(--color-brand-soft, rgba(79,70,229,.10));
    padding      : 3px 10px;
    border-radius: 99px;
    white-space  : nowrap;
}

.scf-clear-btn {
    background    : none;
    border        : none;
    cursor        : pointer;
    font-size     : var(--text-xs, 12px);
    color         : var(--color-text-muted, #888);
    padding       : 4px 8px;
    border-radius : var(--radius-sm, 4px);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition    : color var(--transition-fast, 120ms);
    white-space   : nowrap;
}
.scf-clear-btn:hover { color: var(--color-text-body, #111); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .scf-bar {
        flex-direction: column;
        align-items   : stretch;
    }
    .scf-search-wrap {
        max-width: 100%;
    }
    .scf-bar__right {
        margin-left    : 0;
        justify-content: flex-end;
    }
}

/* ── Column-inline mode (.scf-ci-*) ─────────────────────────────────── */

/* th top row: label + icon + dot + search (inline when space allows, wraps when tight) */
.scf-ci-th-top {
    display    : flex;
    align-items: center;
    flex-wrap  : wrap;
    gap        : 4px;
    padding    : 6px 8px 6px 10px;
    white-space: nowrap;
}
.scf-ci-th-label {
    font-weight: 600;
    color      : var(--color-text-subtle, #374151);
    font-size  : var(--text-sm, 12px);
}

/* ▼ icon button */
.scf-ci-icon {
    background   : none;
    border       : none;
    cursor       : pointer;
    font-size    : 10px;
    color        : var(--color-text-muted, #9ca3af);
    padding      : 2px 4px;
    border-radius: var(--radius-sm, 3px);
    line-height  : 1;
    flex-shrink  : 0;
    transition   : background var(--transition-fast, 120ms),
                   color      var(--transition-fast, 120ms);
}
.scf-ci-icon:hover  { background: var(--color-brand-soft, rgba(79,70,229,.1)); color: var(--color-brand, #4f46e5); }
.scf-ci-icon--open  { background: var(--color-brand-soft, rgba(79,70,229,.1)); color: var(--color-brand, #4f46e5); }

/* Active dot */
.scf-ci-dot {
    width        : 6px;
    height       : 6px;
    background   : var(--color-brand, #4f46e5);
    border-radius: 50%;
    display      : inline-block;
    flex-shrink  : 0;
}
.scf-ci-dot[hidden] { display: none; }

/* Search wrap — child of .scf-ci-th-top; fills remaining space, wraps to next line when < 80px */
.scf-ci-input-wrap {
    flex      : 1 1 80px;
    min-width : 80px;
    max-width : 130px;
    white-space: normal;
    padding   : 0 0 2px 0;
}
.scf-ci-search {
    width        : 100%;
    padding      : 3px 7px;
    border       : 1px solid var(--color-border-default, #d1d5db);
    border-radius: var(--radius-sm, 4px);
    background   : var(--color-surface-base, #fff);
    color        : var(--color-text-body, inherit);
    font-size    : var(--text-xs, 11px);
    caret-color  : var(--color-brand, #4f46e5);
    transition   : border-color var(--transition-fast, 120ms),
                   box-shadow   var(--transition-fast, 120ms);
}
.scf-ci-search:focus {
    outline      : none;
    border-color : var(--color-brand, #4f46e5);
    box-shadow   : 0 0 0 2px var(--color-brand-soft, rgba(79,70,229,.20));
}

/* Floating dropdown */
.scf-ci-dropdown {
    position     : absolute;
    top          : 100%;
    left         : 0;
    z-index      : 300;
    background   : var(--color-surface-elevated, #fff);
    border       : 1px solid var(--color-border-subtle, #e2e8f0);
    border-radius: var(--radius-lg, 8px);
    box-shadow   : 0 6px 20px rgba(0,0,0,.11);
    min-width    : 160px;
    padding      : 8px;
}

/* Checkbox rows */
.scf-ci-cb-row {
    display    : flex;
    align-items: center;
    gap        : 6px;
    padding    : 5px 4px;
    font-size  : var(--text-sm, 12px);
    cursor     : pointer;
    border-radius: var(--radius-sm, 3px);
    color      : var(--color-text-body, #374151);
    transition : background var(--transition-fast, 120ms);
}
.scf-ci-cb-row:hover { background: var(--color-surface-hover, #f5f3ff); }
.scf-ci-cb { cursor: pointer; accent-color: var(--color-brand, #4f46e5); }

/* Label inside dropdown */
.scf-ci-dd-label {
    font-size     : var(--text-xs, 10px);
    font-weight   : 700;
    color         : var(--color-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom : 6px;
}

/* Range inputs */
.scf-ci-range-wrap { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.scf-ci-range-inp {
    padding      : 4px 7px;
    border       : 1px solid var(--color-border-default, #d1d5db);
    border-radius: var(--radius-sm, 4px);
    font-size    : var(--text-sm, 12px);
    width        : 100%;
    text-align   : right;
    background   : var(--color-surface-base, #fff);
    color        : var(--color-text-body, inherit);
    -moz-appearance: textfield;
}
.scf-ci-range-inp::-webkit-outer-spin-button,
.scf-ci-range-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.scf-ci-range-inp:focus {
    outline     : none;
    border-color: var(--color-brand, #4f46e5);
}

/* Dropdown action buttons */
.scf-ci-dd-actions { display: flex; gap: 5px; margin-top: 6px; }
.scf-ci-dd-apply {
    flex       : 1;
    padding    : 5px;
    background : var(--color-brand, #4f46e5);
    color      : #fff;
    border     : none;
    border-radius: var(--radius-sm, 4px);
    font-size  : var(--text-xs, 11px);
    font-weight: 600;
    cursor     : pointer;
}
.scf-ci-dd-apply:hover { opacity: .88; }

.scf-ci-dd-clear {
    display      : block;
    width        : 100%;
    margin-top   : 6px;
    padding      : 4px;
    background   : none;
    border       : 1px solid var(--color-border-default, #d1d5db);
    border-radius: var(--radius-sm, 4px);
    font-size    : var(--text-xs, 11px);
    color        : var(--color-text-muted, #6b7280);
    cursor       : pointer;
    transition   : border-color var(--transition-fast, 120ms),
                   color       var(--transition-fast, 120ms);
}
.scf-ci-dd-clear:hover { border-color: var(--color-brand, #4f46e5); color: var(--color-brand, #4f46e5); }

/* Optional global clear bar (in containerEl) */
.scf-ci-global-bar {
    display    : flex;
    align-items: center;
    gap        : var(--space-2, 8px);
    padding    : var(--space-1, 4px) 0;
    flex-wrap  : wrap;
}

/* Make th position:relative so dropdown positions correctly */
th[data-scf-col] { position: relative; vertical-align: top; padding: 0 !important; }

@media (prefers-reduced-motion: reduce) {
    .scf-chip,
    .scf-search-input,
    .scf-search-clear,
    .scf-range-input,
    .scf-date-input { transition: none; }
}

/* ── New-Row mode (.scf-nr-*) — horizontal filter bar ────────────────── */
/* v1.4 (12 May 2026). Uses design-system tokens only — auto dark/light. */
.scf-nr-row {
    display    : flex;
    align-items: flex-end;
    gap        : var(--space-3, 12px);
    padding    : var(--space-2, 8px) 0 var(--space-3, 12px);
    flex-wrap  : wrap;
}

.scf-nr-cell {
    display       : flex;
    flex-direction: column;
    gap           : var(--space-1, 4px);
}
.scf-nr-cell--search { flex: 1 1 200px; min-width: 180px; max-width: 360px; }
.scf-nr-cell--chips  { min-width: 130px; }
.scf-nr-cell--range  { min-width: 200px; }

.scf-nr-label {
    font-size     : var(--text-xs, 11px);
    font-weight   : 600;
    color         : var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space   : nowrap;
}

/* Shared input base */
.scf-nr-search,
.scf-nr-select,
.scf-nr-range-inp {
    border       : 1px solid var(--color-border-input);
    border-radius: var(--radius-md, 6px);
    background   : var(--color-surface-input);
    color        : var(--color-text-body);
    font-size    : var(--text-sm, 13px);
    outline      : none;
    transition   : border-color var(--transition-fast, 120ms),
                   box-shadow   var(--transition-fast, 120ms);
}
.scf-nr-search:focus,
.scf-nr-select:focus,
.scf-nr-range-inp:focus {
    border-color: var(--color-border-input-focus);
    box-shadow  : 0 0 0 2px var(--color-brand-soft, rgba(79,70,229,.10));
}

.scf-nr-search {
    width      : 100%;
    padding    : 7px 12px 7px 32px;
    box-sizing : border-box;
    background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='22' y2='22'/%3E%3C/svg%3E");
    background-repeat  : no-repeat;
    background-position: 10px center;
}
.scf-nr-search::placeholder { color: var(--color-text-muted); }

.scf-nr-select {
    padding            : 7px 28px 7px 10px;
    cursor             : pointer;
    appearance         : none;
    -webkit-appearance : none;
    background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat  : no-repeat;
    background-position: right 10px center;
}

.scf-nr-range-wrap { display: flex; gap: var(--space-1, 6px); align-items: center; }
.scf-nr-range-inp  {
    width          : 80px;
    padding        : 7px 8px;
    text-align     : right;
    -moz-appearance: textfield;
}
.scf-nr-range-inp::-webkit-outer-spin-button,
.scf-nr-range-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.scf-row-count {
    font-size    : var(--text-xs, 12px);
    color        : var(--color-text-muted);
    align-self   : flex-end;
    padding-bottom: 8px;
    white-space  : nowrap;
    margin-left  : auto;
}

@media (max-width: 640px) {
    .scf-nr-row          { flex-direction: column; align-items: stretch; }
    .scf-nr-cell--search { max-width: 100%; }
    .scf-row-count       { margin-left: 0; }
}