/* ========================================================================
   Component: Filters, Toolbar, Chips
   ======================================================================== */

/* ── Toolbar ── */
.toolbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.toolbar-note { color: var(--text-secondary); font-size: var(--text-base); }

/* ── Filters grid ── */
.filters-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3);
}
@media (max-width: 1200px) { .filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .filters-grid { grid-template-columns: 1fr; } }

.filters-grid .search-bar { width: 100%; }
.form-group-search { grid-column: span 2; }
.form-group-search .search-input { width: 100%; }
@media (max-width: 1200px) { .form-group-search { grid-column: span 2; } }
@media (max-width: 720px) { .form-group-search { grid-column: span 1; } }

/* ── Quick filters ── */
.items-quick-filters { margin-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; }

.quick-filter-btn { border-radius: var(--radius-full); padding-inline: var(--space-3); }
.quick-filter-btn.active {
    background: var(--brand-soft);
    border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
    color: var(--brand); font-weight: var(--weight-bold);
}

/* ── Active filter chips ── */
.active-filters {
    margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: 6px;
}
.active-filter-chip {
    display: inline-flex; align-items: center;
    border: 1px solid var(--border-light);
    background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
}

/* ── Summary strip ── */
.items-summary-strip {
    margin-top: var(--space-3);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2);
}
@media (max-width: 900px) { .items-summary-strip { grid-template-columns: 1fr; } }

.summary-chip {
    border: 1px solid var(--border-light);
    background: color-mix(in srgb, var(--bg-secondary) 62%, transparent);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-2);
    display: flex; flex-direction: column; gap: 2px;
}
.summary-chip__label { color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.summary-chip__value { font-size: var(--text-md); font-weight: var(--weight-extrabold); color: var(--text-primary); }

/* ── Items filters grid ── */
.items-filters-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3);
}
@media (max-width: 1200px) { .items-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .items-filters-grid { grid-template-columns: 1fr; } }

.items-search-wrap { position: relative; display: flex; align-items: center; }
.items-search-wrap .form-input { padding-right: 32px; }
.items-search-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; font-size: 1.1rem; padding: 2px 4px; line-height: 1;
    border-radius: 4px; transition: color var(--duration-fast);
}
.items-search-clear:hover { color: var(--text-primary); }

/* ── Promo type chips ── */
.promo-type-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: var(--radius-full);
    padding: 2px 8px; font-size: var(--text-xs); font-weight: var(--weight-bold);
    border: 1px solid var(--border-light);
    background: var(--bg-secondary); color: var(--text-secondary);
}
.promo-type-chip__icon {
    width: 18px; height: 18px; border-radius: var(--radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-primary);
}
.promo-type-chip--success { color: var(--success); }
.promo-type-chip--primary { color: var(--brand); }
.promo-type-chip--info { color: var(--info); }

/* ── Feature chip ── */
.feature-chip {
    background: var(--brand-light);
    color: var(--brand);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-weight: var(--weight-semibold);
    text-align: center;
}

/* ── Range button group ── */
.range-btn-group { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.range-btn {
    padding: var(--space-2) 0.875rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer; transition: all var(--duration-fast);
}
.range-btn:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); color: var(--brand); }
.range-btn.active { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); color: var(--brand); }

/* ── Date presets ── */
.date-presets { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.date-presets .btn { padding: var(--space-2) 0.75rem; font-size: var(--text-sm); }

/* ── Avito status dot ── */
.avito-status-dot {
    width: 26px; height: 26px; border-radius: var(--radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: var(--weight-extrabold); padding: 0;
}

/* ── Sync status ── */
.sync-status { display: flex; align-items: center; gap: 6px; padding: var(--space-1) var(--space-2); background: var(--bg-secondary); border-radius: var(--radius-full); font-size: var(--text-sm); color: var(--text-secondary); }
.sync-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.sync-indicator.syncing { background: var(--warning); animation: pulse 1s infinite; }
.sync-indicator.error { background: var(--danger); }
.sync-time { font-size: var(--text-xs); color: var(--text-muted); }

@media (max-width: 768px) {
    .toolbar { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
    .toolbar > * { flex-shrink: 0; }
    .filters-grid { grid-template-columns: 1fr !important; }
    .form-group-search { grid-column: span 1 !important; }
    .items-quick-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
    .items-quick-filters .quick-filter-btn { flex-shrink: 0; }
}