.filter-context-bar { position: relative; display: block; }
.filter-bar-main { display: flex; align-items: center; gap: .55rem; min-width: 0; min-height: 3rem; }
.filter-panel-trigger { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.35rem; padding: .45rem .75rem; color: #f8fafc; background: #0f172a; border: 1px solid #334155; border-radius: .55rem; cursor: pointer; }
.filter-panel-trigger[aria-expanded="true"] { border-color: #3b82f6; box-shadow: 0 0 0 2px rgb(59 130 246 / 18%); }
.filter-applied-chips { display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: .4rem; min-width: 0; }
.filter-applied-chip { display: inline-flex; flex: 0 1 auto; align-items: center; gap: .35rem; max-width: 19rem; min-width: 0; min-height: 1.9rem; padding: .25rem .35rem .25rem .65rem; color: #dbeafe; background: rgb(37 99 235 / 18%); border: 1px solid rgb(96 165 250 / 35%); border-radius: 999px; font-size: .75rem; }
.filter-applied-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-applied-chip button { width: 1.35rem; height: 1.35rem; padding: 0; color: #bfdbfe; background: transparent; border: 0; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; }
.filter-applied-chip button:hover, .filter-applied-chip button:focus-visible { color: #fff; background: rgb(96 165 250 / 25%); }
.filter-applied-chip[data-pending="true"] { border-style: dashed; opacity: .82; }
.filter-applied-chip button:disabled { cursor: default; opacity: .55; }
.filter-empty-context { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--text-muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.filter-operational-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .45rem; margin-left: auto; flex-wrap: nowrap; }
.filter-operational-actions .btn { min-height: 2.35rem; white-space: nowrap; }
.filter-modal-overlay { position: fixed; z-index: 90; inset: 0; display: flex; align-items: flex-start; padding: 1.5rem; overflow-y: auto; background: rgb(2 6 23 / 42%); }
.filter-modal-overlay[hidden] { display: none; }
.filter-unified-panel { width: min(56.25rem, calc(100vw - 3rem)); height: auto; max-height: none; margin: auto; padding: 1rem; overflow: visible; background: #111c30; border: 1px solid #334155; border-radius: .75rem; box-shadow: 0 18px 50px rgb(0 0 0 / 45%); }
.filter-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; }
.filter-panel-header h2, .filter-panel-section h3 { margin: 0; color: #f8fafc; }
.filter-panel-header h2 { font-size: 1rem; }
.filter-panel-header p { margin: .25rem 0 0; color: var(--text-muted); font-size: .72rem; }
.filter-panel-close { width: 2rem; height: 2rem; color: #cbd5e1; background: transparent; border: 0; border-radius: .4rem; cursor: pointer; font-size: 1.35rem; }
.filter-panel-section { padding: .75rem 0; border-top: 1px solid rgb(51 65 85 / 65%); }
.filter-panel-section h3 { margin-bottom: .55rem; font-size: .78rem; }
.filter-date-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.filter-date-grid label { display: grid; gap: .3rem; color: var(--text-muted); font-size: .7rem; }
.filter-unified-panel input[type="date"], .filter-option-search { width: 100%; height: 2.35rem; padding: .45rem .65rem; color: #f8fafc; background: #0f172a; border: 1px solid #334155; border-radius: .45rem; outline: none; }
.filter-unified-panel input[type="date"] { padding-right: .5rem; color-scheme: dark; }
.filter-unified-panel input[type="date"]::-webkit-calendar-picker-indicator { min-width: 1rem; min-height: 1rem; padding: .15rem; cursor: pointer; opacity: .9; filter: brightness(0) invert(1); transition: opacity .15s ease; }
.filter-unified-panel input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.filter-unified-panel input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgb(59 130 246 / 15%); }
.filter-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem .5rem; margin-top: .45rem; overflow: visible; }
.filter-option { display: flex; align-items: center; gap: .45rem; width: 100%; min-height: 2rem; padding: .35rem .45rem; overflow: hidden; color: #e2e8f0; text-align: left; background: transparent; border: 1px solid transparent; border-radius: .4rem; cursor: pointer; }
.filter-option:hover, .filter-option:focus-visible { background: rgb(51 65 85 / 45%); border-color: #475569; }
.filter-option[aria-selected="true"] { color: #dbeafe; background: rgb(37 99 235 / 18%); border-color: rgb(96 165 250 / 35%); }
.filter-option-check { flex: 0 0 1rem; width: 1rem; color: #60a5fa; font-weight: 700; text-align: center; }
.filter-option > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-options-empty, .filter-catalog-status { margin: .45rem 0 0; color: var(--text-muted); font-size: .72rem; }
.filter-catalog-status button { color: #60a5fa; background: transparent; border: 0; cursor: pointer; }
.filter-panel-actions { position: sticky; bottom: -1rem; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin: .3rem -1rem -1rem; padding: .75rem 1rem; background: #111c30; border-top: 1px solid #334155; }
.filter-draft-status { margin-right: auto; color: #fbbf24; font-size: .72rem; }
.filter-primary.has-changes { box-shadow: 0 0 0 2px rgb(59 130 246 / 28%); }

@media (max-width: 1120px) {
    .filter-bar-main { gap: .35rem; }
    .filter-panel-trigger,
    .filter-operational-actions .btn { padding-inline: .55rem; }
    .filter-operational-actions { gap: .3rem; }
}
@media (max-width: 768px) {
    .filter-bar-main { align-items: flex-start; flex-wrap: wrap; }
    .filter-applied-chips { flex-basis: calc(100% - 7rem); flex-wrap: wrap; }
    .filter-operational-actions { width: 100%; margin-left: 0; }
    .filter-modal-overlay { padding: .75rem; }
    .filter-unified-panel { width: 100%; }
}
@media (max-width: 520px) {
    .filter-options, .filter-date-grid { grid-template-columns: 1fr; }
    .filter-operational-actions { flex-wrap: wrap; }
    .filter-operational-actions .btn { flex: 1; }
    .filter-panel-actions { flex-wrap: wrap; }
    .filter-draft-status { flex: 1 0 100%; }
}