#seafix-demo .sf-task-filters{display:flex;align-items:center;gap:12px;max-width:100%;min-width:0;margin:0 0 4px;padding:0;overflow-x:auto;scrollbar-width:thin;background:linear-gradient(var(--sf-line),var(--sf-line)) left bottom/100% 1px no-repeat}
#seafix-demo .sf-task-filters button{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;padding:8px 10px;border:0;border-radius:0;background:transparent;color:var(--sf-muted);font:inherit;font-size:13px;line-height:1.25;white-space:nowrap;cursor:pointer}
#seafix-demo .sf-task-filters button[aria-pressed="true"]{background:transparent;color:var(--sf-heading,var(--sf-text));font-weight:600;box-shadow:none}
#seafix-demo .sf-task-filters button[aria-pressed="true"]::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:currentColor;pointer-events:none}
#seafix-demo .sf-task-filters button:focus-visible{outline:2px solid var(--sf-primary);outline-offset:-3px}
#seafix-demo .sf-task-filters svg{flex:0 0 auto;width:18px;height:18px;color:inherit}
#seafix-demo .sf-task-filters .sf-department-icon--engine{transform:scale(1.12);transform-origin:center}
/* Let the department empty view fill the same remaining column as My jobs. */
#seafix-demo:not(.sf-split-view):has([data-screen="home"]:not([hidden]) .sf-department-empty) .sf-main{display:flex;flex-direction:column;gap:0}
#seafix-demo [data-screen="home"]:not([hidden]):has(.sf-department-empty){display:flex;flex-direction:column;flex:1 0 auto;min-height:0}
#seafix-demo [data-screen="home"]:has(.sf-department-empty)>:is(.sf-screen-title,.sf-task-filters,.sf-mobile-work-links){flex:0 0 auto}
#seafix-demo #sf-home-work-card:has(.sf-department-empty),#seafix-demo #sf-active-list:has(>.sf-department-empty){display:flex;flex-direction:column;flex:1 0 auto;min-height:0}
#seafix-demo #sf-active-list>.sf-department-empty{flex:1 0 auto;min-height:0;box-sizing:border-box}
#seafix-demo .sf-task-filters .sf-task-filter-count{display:inline-block;min-width:1ch;padding:0;background:transparent;color:var(--sf-muted);font-size:12px;font-variant-numeric:tabular-nums;font-weight:500}
#seafix-demo .sf-task-filter-count[hidden]{display:none!important}
/* This native position picker intentionally remains light in both themes. */
#seafix-demo .sf-input-wrap:has(> #sf-assignee){background:#f4f4f5;color:#111111;color-scheme:light}
#seafix-demo #sf-report-form #sf-assignee,#seafix-demo #sf-report-form #sf-assignee:invalid{background:#f4f4f5;color:#111111;color-scheme:light}
#seafix-demo #sf-report-form #sf-assignee :is(option,optgroup){background:#f4f4f5;color:#111111}
#seafix-demo .sf-input-wrap:has(> #sf-assignee)>:is(svg,i){color:#111111}
@media(max-width:479px){#seafix-demo .sf-task-filters{gap:6px}#seafix-demo .sf-task-filters button{min-height:44px;padding:8px 10px;gap:6px;font-size:12px}#seafix-demo .sf-task-filters svg{width:18px;height:18px}}

#seafix-demo #sf-report-form #sf-assignee option:checked{background:#e4e4e7;color:#111111}

#seafix-demo .sf-task-filter-label-mobile{display:none}
@media(max-width:999px){#seafix-demo .sf-task-filter-label-wide{display:none}#seafix-demo .sf-task-filter-label-mobile{display:inline}}