/* Shared filter surface. Action buttons retain the global UI primitive. */
.cf-panel { display:grid; gap:16px; min-width:0; margin:0 0 20px; padding:18px; border:1px solid var(--line,#e8dce3); border-radius:16px; background:linear-gradient(110deg,#fffdfe,#fcf3f8); }
.cf-period { display:flex; align-items:end; justify-content:space-between; gap:20px; flex-wrap:wrap; min-width:0; }
.cf-title { display:block; margin-bottom:10px; font-size:14px; color:var(--ink,#30242b); }
.cf-presets { display:flex; flex-wrap:wrap; gap:8px; }
.cf-panel .cf-preset { display:inline-flex; align-items:center; justify-content:center; width:auto; min-height:44px; margin:0; padding:8px 13px; border:1px solid var(--line,#e8dce3); border-radius:999px; background:#fff; color:var(--muted,#6b5c67); box-shadow:none; font-size:13px; line-height:1.4; font-weight:650; }
.cf-panel .cf-preset:hover { background:#f9eaf2; color:var(--blue-dark,#762447); }
.cf-panel .cf-preset[aria-pressed=true] { background:#f8e5ef; color:var(--blue-dark,#762447); border-color:#e9a9c5; }
.cf-dates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.cf-panel label { display:grid; gap:6px; margin:0; min-width:0; color:var(--muted,#6b5c67); font-size:13px; font-weight:650; }
.cf-panel input,.cf-panel select { width:100%; min-width:0; margin:0; min-height:44px; background:#fff; }
.cf-dates input { min-width:150px; }
.cf-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); align-items:end; gap:12px; }
.cf-ranking-options { grid-template-columns:minmax(220px,1fr) minmax(220px,1fr); }
.cf-panel .cf-checkbox { display:flex; align-items:center; gap:10px; min-height:44px; color:var(--ink,#30242b); cursor:pointer; }
.cf-panel .cf-checkbox input { position:absolute; width:1px; height:1px; min-width:0; min-height:0; padding:0; opacity:0; }
.cf-checkbox .number-switch-track { flex:0 0 46px; }
.cf-checkbox input:checked + .number-switch-track { background:#2fad72; }
.cf-checkbox input:checked + .number-switch-track > span { transform:translateX(20px); }
.cf-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; border-top:1px solid var(--line,#e8dce3); padding-top:14px; }
.cf-actions .ui-button,.cf-actions .button-link { width:auto; margin:0; }
.cf-range-hint { margin:0; color:var(--muted,#6b5c67); font-size:12px; }
/* Automatic GET filters opt in; the native Apply remains available without JS. */
:is(.cf-panel[data-filter-auto], [data-filter-auto] .cf-panel) { gap:12px; padding:14px; }
:is(.cf-panel[data-filter-auto], [data-filter-auto] .cf-panel) .cf-period { justify-content:flex-start; align-items:center; gap:14px; }
:is(.cf-panel[data-filter-auto], [data-filter-auto] .cf-panel) .cf-presets-group { flex:1 1 390px; min-width:0; }
:is(.cf-panel[data-filter-auto], [data-filter-auto] .cf-panel) .cf-title { margin-bottom:6px; }
:is(.cf-panel[data-filter-auto], [data-filter-auto] .cf-panel) .cf-presets { gap:6px; }
:is(.cf-panel[data-filter-auto], [data-filter-auto] .cf-panel) .cf-dates { flex:0 1 340px; min-width:0; }
:is(.cf-panel[data-filter-auto], [data-filter-auto] .cf-panel) .cf-options { display:flex; flex-wrap:wrap; gap:12px; }
:is(.cf-panel[data-filter-auto], [data-filter-auto] .cf-panel) .cf-options > label:not(.cf-checkbox) { flex:1 1 220px; max-width:340px; }
:is(.cf-panel[data-filter-auto], [data-filter-auto] .cf-panel) .cf-actions { border-top:0; padding-top:0; }
:is(.cf-panel[data-filter-auto], [data-filter-auto] .cf-panel) .cf-range-hint { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
[data-filter-auto][aria-busy=true] .cf-range-hint,
[data-filter-auto].cf-filter-invalid .cf-range-hint { position:static; width:auto; height:auto; clip-path:none; white-space:normal; }
[data-filter-auto].cf-filter-invalid .cf-range-hint { color:var(--red,#a11d32); }
[data-filter-auto].cf-auto-ready .cf-actions > button[type=submit] { display:none; }
[data-filter-auto].cf-auto-ready .cf-actions { display:contents; }
/* Months have only the heading switch; keep native Apply when JS is unavailable. */
[data-filter-auto].cf-auto-ready .cf-months-panel { display:none; }
@media(max-width:700px) {
 .cf-panel { padding:14px; gap:14px; }
 .cf-period { display:grid; gap:14px; }
 .cf-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
 .cf-panel .cf-preset { width:100%; padding:8px 5px; }
 .cf-dates input { min-width:0; max-width:100%; }
 .cf-options,.cf-ranking-options { grid-template-columns:minmax(0,1fr); }
 .cf-actions .ui-button,.cf-actions .button-link { width:100%; text-align:center; }
 :is(.cf-panel[data-filter-auto], [data-filter-auto] .cf-panel) .cf-period { display:grid; gap:10px; }
 :is(.cf-panel[data-filter-auto], [data-filter-auto] .cf-panel) .cf-options > label:not(.cf-checkbox) { max-width:none; }
}

/* Compact period strip: shared calendar semantics, one flat filter surface. */
.app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-period {
 display:flex; align-items:center; justify-content:space-between; gap:10px 18px;
}
.app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-presets-group { flex:1 1 auto; min-width:0; }
.app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-presets { display:flex; flex-wrap:wrap; gap:4px; }
.app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-presets .cf-preset {
 width:auto; min-height:44px; padding:8px 12px; border:1px solid transparent;
 border-radius:8px; background:transparent; color:var(--blue-dark,#762447);
 font-weight:500; box-shadow:none;
}
.app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-presets .cf-preset:hover {
 background:rgba(118,36,71,.06);
}
.app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-presets .cf-preset[aria-pressed=true] {
 background:rgba(118,36,71,.10); border-color:transparent;
}
.app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-dates {
 flex:0 1 390px; min-width:0; gap:12px;
}
.app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-dates label {
 display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
 gap:8px; color:var(--ink,#30242b); font-weight:500;
}
.app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-dates input { min-width:0; border-radius:12px; }
.app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-range-hint {
 position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
 clip-path:inset(50%); white-space:nowrap;
}
.app-shell [data-filter-panel][aria-busy=true] .cf-range-hint,
.app-shell [data-filter-panel].cf-filter-invalid .cf-range-hint {
 position:static; width:auto; height:auto; clip-path:none; white-space:normal;
}
@media(max-width:700px) {
 .app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-period { display:grid; gap:8px; }
 .app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-presets {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px;
 }
 .app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-presets .cf-preset { width:100%; padding:8px 4px; }
 .app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-dates { gap:8px; }
 .app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-dates label { gap:5px; }
 .app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-dates input { padding-inline:8px; }
}
@media(max-width:360px) {
 .app-shell :is(.cf-panel[data-filter-panel], [data-filter-panel] .cf-panel) .cf-dates { grid-template-columns:minmax(0,1fr); }
}