/* ============================================================
   Filter Panel — shared accordion filter bar for every analysis page
   (Dashboard, Mağaza / Reyon / Ürün Cinsi / Satış Elemanı Analizi,
   Satış Analizi, Rapor Merkezi). Sticky under the page header, collapsible,
   multiselect + range + checkbox-group + scope controls, active-filter
   chips and a save/load preset menu. Namespaced entirely under
   .filter-panel so it never collides with the global component library.

   REDESIGN NOTES:
   - All class names and existing --tokens are unchanged, so no JS/markup
     touch points break. New behavior is added via additional rules only.
   - Depth comes from a two-layer shadow + 1px inset highlight instead of
     backdrop-blur alone, so the panel reads as a physical surface even on
     busy backgrounds.
   - Interactive elements get real pressed/focus states (inset shadows,
     :focus-visible rings) — the previous version only had :hover.
   - Motion is intentional and scoped: chip entrance stagger, checkbox
     check-in, chevron rotation. Everything respects
     prefers-reduced-motion.
   ============================================================ */

.filter-panel {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
  margin-bottom: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
    0 1px 2px rgba(15, 18, 26, 0.04),
    0 8px 24px -12px rgba(15, 18, 26, 0.18);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  animation: page-enter var(--dur-slow) var(--ease-out) both;
}

/* ---------- Header ---------- */
.filter-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
}

.filter-panel__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.filter-panel__toggle:hover { background: var(--bg-hover); }
.filter-panel__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--blue-400, #2e6bff);
}
.filter-panel__title { margin-right: 2px; }
.filter-panel__badge[hidden] { display: none; }
.filter-panel__chevron {
  transition: transform var(--dur-base) var(--ease-out);
  color: var(--text-muted);
}
.filter-panel.is-collapsed .filter-panel__chevron { transform: rotate(-90deg); }

.filter-panel__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* "Intrinsic height" accordion: the grid row track animates between 1fr
   and 0fr, so the collapsed/expanded height never has to be guessed (no
   fixed max-height to outgrow). Only .filter-panel__body needs
   overflow: hidden + min-height: 0 to actually shrink with its track —
   dropdown popovers are portaled to #dropdown-root (see
   components/dropdown.js), so they're never a descendant here and this
   overflow can't clip them. */
.filter-panel__collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.filter-panel.is-collapsed .filter-panel__collapse {
  grid-template-rows: 0fr;
}
.filter-panel__body {
  height: 100%;
  overflow: hidden;
  min-height: 0;
  padding: 0 var(--space-4) var(--space-4);
  transition: opacity var(--dur-base) var(--ease-out);
}
.filter-panel.is-collapsed .filter-panel__body {
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* ---------- Active filter chips ---------- */
.filter-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  min-height: 20px;
}
.filter-panel__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-active);
  color: var(--text-brand);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border: 1px solid transparent;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  animation: chip-in var(--dur-base) var(--ease-out) both;
}
.filter-panel__chip:hover {
  border-color: rgba(46, 107, 255, 0.28);
  transform: translateY(-1px);
}
/* Stagger the first several chips so a multi-filter state doesn't pop in
   as one flat block. Caps at 6 — beyond that the delay would start to feel
   laggy rather than intentional. */
.filter-panel__chip:nth-child(1) { animation-delay: 0ms; }
.filter-panel__chip:nth-child(2) { animation-delay: 30ms; }
.filter-panel__chip:nth-child(3) { animation-delay: 60ms; }
.filter-panel__chip:nth-child(4) { animation-delay: 90ms; }
.filter-panel__chip:nth-child(5) { animation-delay: 120ms; }
.filter-panel__chip:nth-child(6) { animation-delay: 150ms; }

.filter-panel__chip-field { color: var(--text-muted); font-weight: var(--weight-regular); }
.filter-panel__chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border: none;
  border-radius: 50%;
  background: rgba(46, 107, 255, 0.18);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.filter-panel__chip-remove:hover { background: rgba(46, 107, 255, 0.32); transform: scale(1.08); }
.filter-panel__chip-remove:active { transform: scale(0.92); }
.filter-panel__chip-remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--blue-400, #2e6bff);
}
.filter-panel__empty-hint { font-size: var(--text-sm); color: var(--text-muted); padding: 2px 0; }

/* ---------- Field grid ---------- */
/* auto-fill + minmax solves the column count from the *available* width,
   so the row can never become wider than its container — this is the root
   fix for fields being cropped by <main>'s overflow-x: hidden (layout.css):
   a flex-wrap row of fixed min-width items has no such guarantee. */
.filter-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  align-items: end;
}
.filter-panel__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;   /* let the grid track own the width, not a fought-over min-width */
  max-width: 100%;
}
/* Range/checkbox-group fields carry two inputs or several chips — give
   them two grid columns above the breakpoint where auto-fill is guaranteed
   to resolve at least 2 tracks for a 200px minmax. Below it every field is
   already single-column, so span:1 there is a no-op, not a fallback. */
.filter-panel__field--wide { grid-column: span 1; }
@media (min-width: 720px) {
  .filter-panel__field--wide { grid-column: span 2; }
}
.filter-panel__field-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

/* ---------- Multiselect trigger + popover content ---------- */
/* Every control fills its grid cell exactly — that, not a hand-picked
   min-width, is what makes every field the same width. */
.filter-panel__select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.filter-panel__select-trigger:hover { background: var(--bg-hover); }
.filter-panel__select-trigger.is-active {
  border-color: var(--blue-400);
  color: var(--text-brand);
  box-shadow: 0 0 0 3px rgba(46, 107, 255, 0.12);
}
.filter-panel__select-trigger:focus-visible {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(46, 107, 255, 0.22);
}
.filter-panel__select-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.filter-panel__select-trigger svg {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-out);
}
.filter-panel__select-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Content built for the portaled .menu (components.css owns the popover's
   own position/shadow/backdrop-blur — this only styles its inner layout). */
.filter-panel__menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(320px, 82vw);
}
.filter-panel__text-input {
  width: 100%;
  height: 34px;
  padding: 0 var(--space-3);
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.filter-panel__text-input:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(46, 107, 255, 0.18);
}

/* Fade the top/bottom edges of the scroll list instead of a hard clip, so
   a long option list signals "more below" without extra chrome. Achieved
   with a mask so it works over any background, not just a flat color. */
.filter-panel__checkbox-list {
  display: flex;
  flex-direction: column;
  max-height: min(320px, 45vh);
  overflow-y: auto;
  mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
.filter-panel__checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.filter-panel__checkbox-row:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Custom checkbox: same 15x15 footprint as before, but with a drawn check
   mark that animates in on toggle rather than the flat browser default. */
.filter-panel__checkbox-row input {
  appearance: none;
  -webkit-appearance: none;
  width: 15px; height: 15px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1.5px solid var(--border-input);
  background: var(--bg-input);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.filter-panel__checkbox-row input::before {
  content: "";
  width: 9px; height: 9px;
  transform: scale(0);
  transition: transform 120ms var(--ease-out);
  clip-path: polygon(14% 44%, 0 63%, 39% 100%, 100% 21%, 82% 6%, 37% 68%);
  background: #fff;
}
.filter-panel__checkbox-row input:checked {
  background: var(--blue-500, #2e6bff);
  border-color: var(--blue-500, #2e6bff);
}
.filter-panel__checkbox-row input:checked::before { transform: scale(1); }
.filter-panel__checkbox-row input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 107, 255, 0.24);
}

.filter-panel__menu-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

/* ---------- Range inputs ---------- */
.filter-panel__range {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.filter-panel__range:focus-within {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(46, 107, 255, 0.18);
}
.filter-panel__range-input {
  width: 0;       /* flex-basis 0 + flex:1 = both inputs always share the row evenly */
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  text-align: center;
}
.filter-panel__range-input:focus { outline: none; }
.filter-panel__range-input::placeholder { color: var(--text-muted); }
.filter-panel__range-sep { color: var(--text-muted); flex-shrink: 0; }

/* ---------- Checkbox-group chips (Durum) ---------- */
.filter-panel__toggle-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; min-height: 36px; }
.filter-panel__toggle-chip {
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform 80ms var(--ease-out);
}
.filter-panel__toggle-chip:hover { background: var(--bg-hover); color: var(--text-primary); }
.filter-panel__toggle-chip:active { transform: scale(0.97); }
.filter-panel__toggle-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--blue-400, #2e6bff);
}
/* Pressed look reads as a toggle rather than a color swap: a soft inset
   shadow plus the brand gradient gives it real depth in the "on" state. */
.filter-panel__toggle-chip.is-active {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Scope segmented control (Sonuç: Tümü/En Çok/En Az) sits inside a field
   cell like everything else — stretch it and its options to match. */
.filter-panel__field .segmented { display: flex; width: 100%; }
.filter-panel__field .segmented__option { flex: 1; justify-content: center; }

/* ---------- Preset menu rows ---------- */
.filter-panel__preset-row { display: flex; align-items: center; gap: 4px; }
.filter-panel__preset-name { flex: 1; text-align: left; }

/* ---------- Motion ---------- */
@keyframes chip-in {
  from { opacity: 0; transform: translateY(-3px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .filter-panel,
  .filter-panel__chip,
  .filter-panel__chevron,
  .filter-panel__collapse,
  .filter-panel__body,
  .filter-panel__select-trigger svg,
  .filter-panel__checkbox-row input::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Responsive ---------- */
/* Below this, auto-fill's 200px minmax already resolves to a single
   column on its own; the explicit 1fr here is only to make that guaranteed
   (rather than relying on the exact viewport arithmetic) at the same
   breakpoint where .filter-panel__field--wide gives up its column span. */
@media (max-width: 720px) {
  .filter-panel__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .filter-panel__header { flex-direction: column; align-items: stretch; }
  .filter-panel__actions { justify-content: flex-end; }
}