/* filters.css — Filter panel palette, drawer behavior, advanced UI, connectors
   Palette (filter panel):
     background: #12162c
     accents/borders: #0286ce
     text: #B0C4DE
     soft accent: #7c94c3
*/

/* Variables (local fallbacks if not defined in style.css) */
:root {
  --filter-bg: #12162c;
  --filter-accent: #0286ce;
  --filter-text: #B0C4DE;
  --filter-muted: #7c94c3;
  --drawer-max-width: 25%; /* relative to viewport for responsiveness */
  --drawer-min-width: fit-content;
}

/* Drawer base */
.filter-drawer {
  background: linear-gradient(180deg, rgba(10,12,20,0.95), var(--filter-bg));
  color: var(--filter-text);
  border: 4px solid var(--filter-accent);
  padding: 1rem;
  margin-top: 1.5rem;
  z-index: 10002;
  border-radius: 1.25rem;
  overflow-y: auto;
  flex: 1;
  max-width: var(--drawer-max-width) !important;
  min-width: var(--drawer-min-width);
  box-shadow: inset 1px 0 5px rgba(2,134,206,0.06);
}

/* Small utilities */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* Filter header & controls */
.filters .landmark.heading { font-size: 1.05rem; margin: 0 0 .5rem 0; color: var(--filter-muted); }
.filter-controls { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.6rem; }

/* Expander button (AO3-like) */
.filter-toggle .expander {
  display:inline-flex; align-items:center; gap:.5rem; background:none; border:none;
  color:var(--filter-text); font-weight:600; cursor:pointer; padding:.25rem .5rem;
}
.filter-toggle .expander::before { content:'▸'; display:inline-block; transform:rotate(0deg); transition:transform .18s ease; color:var(--filter-muted); }
.filter-toggle .expander[aria-expanded="true"]::before { transform:rotate(90deg); }

/* Expandable content */
.expandable { margin-top:.5rem; padding-left:.5rem; border-left:1px solid rgba(255,255,255,0.03); }
.hidden { display:none; }

/* Search box inside groups */
.filters input[type="search"] {
  width:100%; padding:.35rem .5rem; border-radius:.25rem; background: rgba(255,255,255,0.02);
  color: var(--filter-text); border:1px solid rgba(180,200,230,0.04); box-sizing:border-box;
}

/* Checkbox lists */
.filter-checkbox-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.25rem; }
.filter-checkbox-list li { display:flex; align-items:center; gap:.5rem; padding:.12rem .25rem; border-radius:.25em; }
.filter-checkbox-list input[type="checkbox"] { transform:scale(1); margin:0; }
.filter-checkbox-list label { color:var(--filter-text); cursor:pointer; }

/* Completed toggles row */
.completed-row { display:flex; gap:.5rem; align-items:center; margin-top:.5rem; flex-wrap: wrap; }

fieldset {
  max-width: 23vw;
}

/* Advanced mode container */
.advanced-mode { margin-top: 1rem; display:none; color:var(--filter-text); }
.advanced-mode.open { display:block; }

/* Group card for advanced mode */
.advanced-mode .group {
  margin:.5rem 0; padding:.6rem; border-radius:.6rem; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.02);
}
.advanced-mode .group-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-weight:600; color:var(--filter-muted); }

/* Connector pill (AND / OR) */
.group-connector { display:inline-flex; gap:.25rem; align-items:center; padding:.25rem .5rem; border-radius:999px; border:1px solid rgba(180,200,230,0.06); background:transparent; color:var(--filter-muted); font-weight:600; }
.group-connector .active { background:var(--filter-accent); color:#07202a; border-color:var(--filter-accent); padding:.25rem .6rem; border-radius:999px; }

/* Small controls inside group */
.group-controls { display:flex; gap:.5rem; align-items:center; }
.group-controls select, .group-controls button { padding:.25rem .45rem; border-radius:.25rem; border:1px solid rgba(180,200,230,0.06); background:transparent; color:var(--filter-text); }

/* Add/remove group buttons */
.btn-add-group, .btn-remove-group { background:transparent; border:1px solid rgba(180,200,230,0.06); padding:.35rem .5rem; border-radius:.35rem; color:var(--filter-text); cursor:pointer; }

/* Accessibility focus */
.filter-toggle .expander:focus, .filter-controls button:focus, .btn-add-group:focus { outline:3px solid rgba(135,206,250,0.18); outline-offset:2px; }

/* Mobile: body class controls overflow when drawer is open (ui.js toggles this) */
body.drawer-open { overflow:hidden; }