#filter-dialog::backdrop{background-color:var(--color-overlay-medium)}
#filter-dialog .dialog-overlay__panel{background-color:var(--color-surface)}
@media (min-width: 768px){
#filter-dialog .dialog-overlay__panel{max-width:min(36rem, 100%)}
}

#filter-dialog header{align-items:center;border-bottom:1px solid var(--color-border);display:grid;flex:0 0 auto;gap:0.5rem;grid-template-columns:2.5rem minmax(0, 1fr) 2.5rem;padding:0.75rem 1rem}
@media (min-width: 768px){
#filter-dialog header{padding:1rem 1.25rem}
}

#filter-dialog header h2{font-family:var(--font-display);font-size:1.125rem;font-weight:var(--font-weight-display);grid-column:2;text-align:center}
#filter-dialog header button{align-items:center;background-color:var(--color-background);border-radius:50%;color:var(--color-text-main);display:flex;grid-column:3;height:2.5rem;justify-content:center;transition:background-color 0.15s, border-color 0.15s, color 0.15s;width:2.5rem}
#filter-dialog header button:hover{background-color:var(--color-surface-alt);color:var(--color-link)}
#filter-dialog header .material-symbols-outlined{font-size:20px}

#filter-dialog section{border-bottom:1px solid var(--color-border);padding:1.125rem 1rem}
@media (min-width: 768px){
#filter-dialog section{padding:1.25rem}
}

#filter-dialog section h3{font-family:var(--font-display);font-size:1.125rem;font-weight:var(--font-weight-display);margin-bottom:0.75rem}
#filter-dialog section ul{display:flex;flex-wrap:wrap;gap:0.5rem}
#filter-dialog section button{align-items:center;background-color:var(--color-warning-bg);border:1px solid var(--color-primary-border-strong);border-radius:var(--radius-full);color:var(--color-primary-text);display:inline-flex;font-size:0.875rem;font-weight:var(--font-weight-ui);gap:0.375rem;min-height:2.5rem;padding:0.5rem 0.75rem 0.5rem 1rem;transition:background-color 0.15s, border-color 0.15s, color 0.15s;white-space:nowrap}
#filter-dialog section button:hover{background-color:var(--color-surface);border-color:var(--color-primary);color:var(--color-primary-dark)}
#filter-dialog section .material-symbols-outlined{font-size:18px}

#filter-dialog form{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
#filter-dialog details + details{border-top:1px solid var(--color-border)}
#filter-dialog summary{align-items:center;cursor:pointer;display:flex;font-family:var(--font-display);font-size:1.125rem;font-weight:var(--font-weight-display);gap:0.5rem;justify-content:space-between;list-style:none;padding:1.125rem 1rem;transition:background-color 0.15s}
#filter-dialog summary::-webkit-details-marker{display:none}
#filter-dialog summary:hover{background-color:var(--color-surface-warm)}
#filter-dialog summary .material-symbols-outlined{color:var(--color-text-muted);font-size:20px;transition:transform 0.2s}
#filter-dialog details[open] summary .material-symbols-outlined{transform:rotate(180deg)}
@media (min-width: 768px){
#filter-dialog summary{padding:1.25rem}
}

#filter-dialog details[open]{padding-bottom:1rem}
#filter-dialog fieldset{border:0;padding:0 1rem}
#filter-dialog fieldset:has(legend){margin-top:1rem}
#filter-dialog legend{color:var(--color-text-main);display:block;font-family:var(--font-display);font-size:0.9375rem;font-weight:var(--font-weight-display);padding-bottom:0.5rem}
@media (min-width: 768px){
#filter-dialog fieldset{padding:0 1.25rem}
}

#vacationtype ul{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr))}

#filter-dialog li ul{border-left:1px solid var(--color-border);margin-left:calc(1.125rem - 0.5px);padding-left:0.75rem}
#filter-dialog label{align-items:center;border-radius:var(--radius);color:var(--color-text-main);cursor:pointer;display:flex;font-size:var(--font-size-reading);gap:0.75rem;line-height:1.3;padding:0.625rem 0.5rem;transition:background-color 0.15s, color 0.15s}
#filter-dialog label:hover{background-color:var(--color-link-bg-soft);color:var(--color-link)}
#filter-dialog label:has(:checked){color:var(--color-primary-dark);font-weight:var(--font-weight-ui)}
#filter-dialog input{accent-color:var(--color-primary);flex-shrink:0;height:1.25rem;width:1.25rem}

#filter-dialog footer{align-items:center;background-color:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:var(--shadow-sticky);display:flex;flex:0 0 auto;gap:1rem;justify-content:space-between;padding:0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom, 0px))}
@media (min-width: 768px){
#filter-dialog footer{box-shadow:none;padding:1rem 1.25rem}
}

#filter-dialog [type="reset"]{color:var(--color-link);font-size:0.875rem;font-weight:var(--font-weight-ui);text-decoration:underline}
#filter-dialog [type="reset"]:hover{color:var(--color-primary-dark)}
#filter-dialog .btn-primary{padding:0.75rem 1.5rem}