/* =========================================================
   ADMIN V2
   FILTER MANAGEMENT
   ========================================================= */

.admin-filter-intro {
  margin-bottom: 18px;
  padding: 18px 20px;

  border:
    1px solid
    #ead7df;

  border-radius:
    var(--admin-radius);

  background:
    #fff8fb;
}

.admin-filter-intro strong {
  display: block;

  margin-bottom: 5px;

  color:
    var(--admin-accent-dark);
}

.admin-filter-intro p {
  margin: 0;

  color:
    var(--admin-text-soft);
}


.admin-filter-notice {
  min-height: 20px;

  margin:
    0 0 12px;

  color:
    var(--admin-text-soft);

  font-size: 12px;
}


.admin-filter-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  align-items: start;

  gap: 16px;
}


.admin-filter-panel {
  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    var(--admin-border);

  border-radius:
    var(--admin-radius);

  background:
    var(--admin-surface);

  box-shadow:
    var(--admin-shadow);
}


.admin-filter-panel-heading {
  display: flex;
  align-items: center;

  gap: 10px;

  padding: 18px 20px;

  border-bottom:
    1px solid
    var(--admin-border);

  background:
    var(--admin-surface-soft);
}

.admin-filter-panel-heading h2 {
  margin: 0;

  font-size: 17px;
}


.admin-filter-step {
  flex: 0 0 27px;

  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    var(--admin-accent);

  color: #ffffff;

  font-size: 11px;
  font-weight: 800;
}


.admin-filter-panel-body {
  padding: 18px;
}


.admin-filter-selection-state {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 14px;
}


.admin-filter-badge {
  display: inline-flex;

  width: fit-content;

  padding: 4px 8px;

  border-radius: 999px;

  background:
    #f2edf1;

  color:
    #675b67;

  font-size: 9px;
  font-weight: 800;

  white-space: nowrap;
}

.admin-filter-badge--success {
  background:
    var(--admin-success-bg);

  color:
    var(--admin-success);
}

.admin-filter-badge--muted {
  background:
    #f0edef;

  color:
    var(--admin-text-faint);
}

.admin-filter-badge--locked {
  background:
    #fff4df;

  color:
    var(--admin-warning);
}


.admin-filter-form {
  display: grid;

  gap: 13px;

  margin-top: 16px;
  padding-top: 16px;

  border-top:
    1px solid
    var(--admin-border);
}

.admin-filter-form h3 {
  margin: 0;

  font-size: 14px;
}


.admin-filter-toggle {
  display: flex;
  align-items: center;

  gap: 9px;

  color:
    var(--admin-text);

  font-size: 12px;
  font-weight: 700;
}

.admin-filter-toggle input {
  width: 18px;
  height: 18px;

  accent-color:
    var(--admin-accent);
}

.admin-filter-link-platforms {
  margin-bottom: 18px;
}

.admin-filter-link-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.admin-filter-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  background: var(--admin-surface);
}

.admin-filter-link-row .admin-input {
  min-width: 0;
}

@media (max-width: 700px) {
  .admin-filter-link-row {
    grid-template-columns: minmax(0, 1fr) 72px;
  }

  .admin-filter-link-row .admin-button {
    grid-column: 1 / -1;
  }
}

.admin-filter-category-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0;
  padding: 12px;
  border: 1px solid var(--admin-border);
  border-radius: 11px;
}

.admin-filter-category-links legend { padding: 0 6px; color: var(--admin-text); font-size: 12px; font-weight: 800; }
.admin-filter-category-link { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 8px; background: var(--admin-surface-soft); color: var(--admin-text); font-size: 11px; font-weight: 700; }
.admin-filter-category-link input { width: 17px; height: 17px; flex: 0 0 17px; margin: 0; accent-color: var(--admin-accent); }
.admin-filter-category-links p { grid-column: 1 / -1; margin: 2px 0 0; color: var(--admin-text-soft); font-size: 10px; line-height: 1.5; }


.admin-filter-feedback {
  min-height: 16px;

  margin: 0;

  color:
    var(--admin-text-soft);

  font-size: 11px;
}


.admin-filter-locked-note {
  margin: 0;

  padding: 10px 12px;

  border-radius: 9px;

  background:
    var(--admin-warning-bg);

  color:
    var(--admin-warning);

  font-size: 11px;
}


.admin-filter-add,
.admin-filter-option {
  margin-top: 14px;

  overflow: hidden;

  border:
    1px solid
    var(--admin-border);

  border-radius: 11px;

  background:
    var(--admin-surface-soft);
}


.admin-filter-add > summary,
.admin-filter-option > summary {
  min-height: 42px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding: 10px 12px;

  cursor: pointer;

  color:
    var(--admin-text);

  font-size: 12px;
  font-weight: 700;
}


.admin-filter-add[open] > summary,
.admin-filter-option[open] > summary {
  border-bottom:
    1px solid
    var(--admin-border);
}


.admin-filter-add
.admin-filter-form,
.admin-filter-option
.admin-filter-form {
  margin: 0;
  padding: 14px;

  border-top: 0;

  background:
    var(--admin-surface);
}


.admin-filter-count {
  display: flex;
  align-items: baseline;

  gap: 7px;

  margin-bottom: 8px;
}

.admin-filter-count strong {
  font-size: 24px;
}

.admin-filter-count span {
  color:
    var(--admin-text-soft);

  font-size: 11px;
}


.admin-filter-empty,
.admin-filter-loading {
  margin: 12px 0 0;

  color:
    var(--admin-text-soft);

  font-size: 12px;
}


@media (max-width: 1100px) {
  .admin-filter-grid {
    grid-template-columns:
      1fr;
  }
}


@media (max-width: 700px) {
  .admin-filter-panel-body {
    padding: 14px;
  }

  .admin-filter-category-links {
    grid-template-columns: 1fr;
  }
}