/* Settings tab, and the per-field sections of the Filters menu. */

/* ── Filters menu: one section per field ── */
.filterPanel{ width:280px; max-height:min(70vh, 560px); overflow-y:auto; }
.filterSection + .filterSection{ margin-top:12px; padding-top:12px; border-top:1px solid var(--border-soft); }
.filterSection .filterOptions{ max-height:200px; }
button.filterSettingsLink{
  display:block; width:100%; margin-top:8px; padding:8px 4px 2px;
  border:0; border-top:1px solid var(--border-soft); border-radius:0;
  background:none; text-align:left; font-size:12.5px; font-weight:600; color:var(--link);
}
button.filterSettingsLink:hover{ text-decoration:underline; background:none; }

/* ── Settings tab ── */
.settingsScroll{ flex:1 1 auto; min-height:0; overflow-y:auto; }
.settingsContent{ max-width:920px; margin:0 auto; padding:28px 22px 40px; display:flex; flex-direction:column; gap:18px; }
.settingsHead h1{ margin:0 0 4px; font-size:22px; color:var(--navy); letter-spacing:-.3px; }
.settingsHead p{ margin:0; color:var(--muted); }
.settingsHead .settingsDemo{ margin-top:8px; display:inline-block; padding:4px 10px; border-radius:999px;
  background:var(--warn-wash); color:var(--warn); font-size:12.5px; font-weight:600; }
.settingsNote{ color:var(--muted); padding:40px 0; text-align:center; }

.settingsCard{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px 22px; box-shadow:var(--shadow-sm);
}
.settingsCard h2{ margin:0 0 4px; font-size:16px; color:var(--navy); }
.settingsIntro{ margin:0 0 14px; color:var(--muted); font-size:13px; line-height:1.5; max-width:70ch; }
.settingsEmpty{ margin:0 0 12px; color:var(--muted); font-style:italic; }
.settingsMuted{ color:var(--muted); font-size:12.5px; }
.settingsRow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }

/* inputs on a light card, not the header's pill style */
.settingsCard input[type=text], .settingsCard select, .settingsCard textarea{
  border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface);
  padding:7px 10px; font-size:13px; color:var(--text); font-family:inherit;
}
.settingsCard input[type=text]:focus, .settingsCard select:focus, .settingsCard textarea:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--primary-soft);
}
.settingsCard textarea{ width:100%; resize:vertical; min-width:160px; line-height:1.4; }
.settingsCard input[type=checkbox]{ width:16px; height:16px; padding:0; margin:0; accent-color:var(--teal); cursor:pointer; }

.settingsTable{ width:100%; border-collapse:collapse; }
.settingsTable th{ text-align:left; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.3px;
  color:var(--muted); padding:0 8px 8px; border-bottom:1px solid var(--border); }
.settingsTable td{ padding:8px; border-bottom:1px solid var(--border-soft); vertical-align:top; }
.settingsTable td:first-child input{ width:100%; min-width:140px; }
.settingsTable .num{ text-align:center; width:56px; }
.settingsTable td.num{ padding-top:14px; }
.settingsTable td .settingsMuted{ display:inline-block; padding-top:7px; }
.settingsTable tr.isHidden td{ background:#f8fafc; }
.settingsTable tr.isHidden input[type=text]{ color:var(--muted); }
.settingsBadge{ display:inline-block; margin-top:4px; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--teal); }

button.settingsIconBtn{ width:30px; height:30px; padding:0; border-radius:50%; font-size:15px; line-height:1;
  color:var(--muted); background:none; border-color:transparent; }
button.settingsIconBtn:hover:not(:disabled){ background:var(--bg); color:var(--text); }
button.settingsIconBtn:disabled{ opacity:.35; cursor:default; }

.settingsChecks{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:6px 16px; }
.settingsCheck{ display:flex; align-items:center; gap:9px; padding:6px 4px; font-size:13.5px; cursor:pointer; }

.settingsList + .settingsList{ margin-top:18px; padding-top:16px; border-top:1px solid var(--border-soft); }
.settingsListLabel{ font-weight:600; font-size:13px; color:var(--navy); margin-bottom:8px; }
.settingsChips{ display:flex; flex-wrap:wrap; gap:6px; }
.settingsChip{ display:inline-flex; align-items:center; gap:4px; padding:4px 6px 4px 11px; border-radius:999px;
  background:var(--primary-soft); color:var(--teal); font-size:12.5px; font-weight:600; }
.settingsChip.locked{ background:var(--bg); color:var(--text-2); font-weight:500; padding-right:11px; }
.settingsChip button{ width:20px; height:20px; padding:0; border:0; border-radius:50%; background:none;
  color:inherit; font-size:14px; line-height:1; }
.settingsChip button:hover{ background:rgba(15,118,110,.15); }
.settingsList .settingsRow input[type=text]{ width:260px; max-width:100%; }

.settingsOrder{ margin:0; padding:0; list-style:none; counter-reset:f; display:flex; flex-direction:column; gap:6px; }
.settingsOrder li{ counter-increment:f; display:flex; align-items:center; gap:10px; padding:6px 6px 6px 12px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-raised); font-weight:500; }
.settingsOrder li::before{ content:counter(f); font-family:var(--mono); font-size:12px; color:var(--muted); width:16px; }
.settingsOrder li > span:first-of-type{ flex:1; }
.settingsOrderBtns{ display:flex; gap:2px; }

.settingsBar{
  flex:none; display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:12px 22px; background:var(--surface); border-top:1px solid var(--border);
}
.settingsStatus{ margin-right:auto; font-size:13px; color:var(--muted); }
.settingsStatus.error{ color:var(--critical); font-weight:600; }
.settingsStatus.ok{ color:var(--good); font-weight:600; }
.settingsBar button:disabled{ opacity:.5; cursor:default; }

@media (max-width:700px){
  .settingsContent{ padding:18px 14px 30px; }
  .settingsCard{ padding:16px; }
  .settingsTable thead{ display:none; }
  .settingsTable tr{ display:grid; grid-template-columns:1fr auto auto; gap:6px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
  .settingsTable td{ border:0; padding:0; }
  .settingsTable td:nth-child(2), .settingsTable td:nth-child(3){ grid-column:1 / -1; }
  .settingsTable td:nth-child(1){ grid-column:1 / -1; }
}