/* SRD OS design-contract v1: layout+type are stable, colors come ONLY from selected THEMA BOX.
  usage: data-srd-ui="popup-1" or "popup-2" or "panel-1" ... plus data-srd-text role.
  No room-level CSS is needed when assembling a new UI component. */
html[data-srd-theme-box] :is(
  [data-srd-ui="page-1"],[data-srd-ui="panel-1"],[data-srd-ui="panel-2"],
  [data-srd-ui="popup-1"],[data-srd-ui="popup-2"],
  [data-srd-ui="form-1"],[data-srd-ui="table-1"]) {
  font-family:var(--srd-ui-font-family);
  font-size:var(--srd-ui-font-body);
  line-height:var(--srd-ui-line-body);
}
html[data-srd-theme-box] [data-srd-ui="page-1"] {
  background:var(--srd-ui-page-bg)!important;
  color:var(--srd-ui-page-ink)!important;
  min-width:0;
}
html[data-srd-theme-box] [data-srd-ui="panel-1"] {
  background:var(--srd-ui-panel-bg)!important;
  color:var(--srd-ui-panel-ink)!important;
  border:1px solid var(--srd-ui-border)!important;
  border-radius:var(--srd-ui-radius-panel);
  padding:var(--srd-ui-panel-pad);
}
html[data-srd-theme-box] [data-srd-ui="panel-2"] {
  background:var(--srd-ui-panel-2-bg)!important;
  color:var(--srd-ui-panel-2-ink)!important;
  border:1px solid var(--srd-ui-border)!important;
  border-radius:var(--srd-ui-radius-panel);
  padding:var(--srd-ui-panel-pad);
}
html[data-srd-theme-box] [data-srd-ui="popup-1"],
html[data-srd-theme-box] [data-srd-ui="popup-2"] {
  box-sizing:border-box;
  width:min(calc(100vw - 32px),var(--srd-ui-pop-1-width));
  max-width:100%;
  border-radius:var(--srd-ui-radius-popup);
  padding:var(--srd-ui-popup-pad);
  border:1px solid var(--srd-ui-border)!important;
  box-shadow:var(--srd-ui-shadow);
  color:var(--srd-ui-popup-1-ink)!important;
  background:var(--srd-ui-popup-1-bg)!important;
}
html[data-srd-theme-box] [data-srd-ui="popup-2"] {
  width:min(calc(100vw - 32px),var(--srd-ui-pop-2-width));
  color:var(--srd-ui-popup-2-ink)!important;
  background:var(--srd-ui-popup-2-bg)!important;
}
html[data-srd-theme-box] [data-srd-ui^="popup-"] :is(h1,h2,h3,h4,strong) {
  color:inherit!important;
}
html[data-srd-theme-box] [data-srd-ui="popup-1"] :is(p,small),
html[data-srd-theme-box] [data-srd-ui="popup-1"] [data-srd-text="meta"] {
  color:var(--srd-ui-popup-1-muted)!important;
}
html[data-srd-theme-box] [data-srd-ui="popup-2"] :is(p,small),
html[data-srd-theme-box] [data-srd-ui="popup-2"] [data-srd-text="meta"] {
  color:var(--srd-ui-popup-2-muted)!important;
}
html[data-srd-theme-box] [data-srd-ui="form-1"] {
  color:var(--srd-ui-panel-ink);
}
html[data-srd-theme-box] :is([data-srd-ui="form-1"],[data-srd-ui^="popup-"]) :is(input:not([type="checkbox"]),select,textarea){
  background:var(--srd-ui-input-bg)!important;
  color:var(--srd-ui-input-ink)!important;
  min-height:var(--srd-ui-input-height);
  border:1px solid var(--srd-ui-border)!important;
  border-radius:var(--srd-ui-radius-input);
}
html[data-srd-theme-box] [data-srd-ui="table-1"] {
  color:var(--srd-ui-panel-ink)!important;
  background:var(--srd-ui-panel-bg)!important;
  border-color:var(--srd-ui-border)!important;
}
html[data-srd-theme-box] [data-srd-ui="table-1"] :is(th,td) {
  color:inherit;
  border-color:var(--srd-ui-border)!important;
}
html[data-srd-theme-box] [data-srd-ui="action-1"] {
  min-height:var(--srd-ui-button-height);
  border:1px solid var(--srd-ui-accent)!important;
  border-radius:var(--srd-ui-radius-input);
  background:var(--srd-ui-action-bg)!important;
  color:var(--srd-ui-action-ink)!important;
  font-family:var(--srd-ui-font-family);
  font-weight:750;
}
html[data-srd-theme-box] [data-srd-ui="action-2"] {
  min-height:var(--srd-ui-button-height);
  border:1px solid var(--srd-ui-border)!important;
  border-radius:var(--srd-ui-radius-input);
  background:var(--srd-ui-panel-bg)!important;
  color:var(--srd-ui-panel-ink)!important;
  font-family:var(--srd-ui-font-family);
  font-weight:650;
}
html[data-srd-theme-box] [data-srd-text="page-title"] {
  color:inherit!important;
  font-family:var(--srd-ui-font-family);
  font-size:var(--srd-ui-font-page);
  font-weight:800;
  line-height:var(--srd-ui-line-heading);
}
html[data-srd-theme-box] [data-srd-text="section-title"] {
  color:inherit!important;
  font-family:var(--srd-ui-font-family);
  font-size:var(--srd-ui-font-section);
  font-weight:760;
  line-height:var(--srd-ui-line-heading);
}
html[data-srd-theme-box] [data-srd-text="body"] {
  font:450 var(--srd-ui-font-body)/var(--srd-ui-line-body) var(--srd-ui-font-family);
}
html[data-srd-theme-box] [data-srd-text="meta"] {
  font:500 var(--srd-ui-font-small)/var(--srd-ui-line-body) var(--srd-ui-font-family);
}
html[data-srd-theme-box] [data-srd-text="label"] {
  font:800 var(--srd-ui-font-label)/var(--srd-ui-line-body) var(--srd-ui-font-family);
  text-transform:uppercase;
  letter-spacing:.08em;
}


/* SRD OS Wasstraat -- SHARED CALENDAR-1 role contract.
   This rail contains NO palette colors. Each THEMA box supplies every ink/surface.
   Workflow/person accents and actionable status semantics remain intact. */
html[data-srd-theme-box] [data-srd-ui="calendar-1"] {
  background:var(--srd-ui-panel-bg)!important;
  color:var(--srd-ui-panel-ink)!important;
  border-color:var(--srd-ui-border)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"]
:is([data-srd-part="page-head"],[data-srd-part="page-head"] h1,[data-srd-part="page-kicker"],
[data-srd-part="head-actions"],[data-srd-part="monthrail"]) {
  color:var(--srd-ui-panel-ink)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"]
:is([data-srd-part="page-lead"],[data-srd-part="createbar"] small) {
  color:var(--srd-ui-panel-muted)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"]
:is([data-srd-part="head-action"],[data-srd-part="month-nav"],[data-srd-part="createbar"],[data-srd-part="panel"]) {
  background:var(--srd-ui-panel-bg)!important;
  color:var(--srd-ui-panel-ink)!important;
  border-color:var(--srd-ui-border)!important;
  box-shadow:none;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"]
:is([data-srd-part="head-action"],[data-srd-part="month-nav"] strong,[data-srd-part="createbar"] strong,
[data-srd-part="panel"] h2,[data-srd-part="panel"] h3,[data-srd-part="panel"] strong) {
  color:var(--srd-ui-panel-ink)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"]
:is([data-srd-part="month-nav"] span,[data-srd-part="panel"] p,[data-srd-part="panel"] small) {
  color:var(--srd-ui-panel-muted)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="month-nav"]>a {
  background:var(--wash-raised)!important;
  color:var(--srd-ui-panel-ink)!important;
  border-color:var(--srd-ui-border)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="createbar"] [data-srd-part="new-action"] {
  background:var(--srd-ui-panel-bg)!important;
  color:var(--srd-ui-panel-ink)!important;
  border-color:var(--srd-ui-accent)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"]
:is([data-srd-part="head-action"],[data-srd-part="month-nav"]>a,[data-srd-part="new-action"]):hover {
  background:var(--wash-raised)!important;
}
/* Calendar grid and day headings share a single semantic surface family. */
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="calendar-grid"] {
  background:var(--srd-calendar-surface)!important;
  color:var(--srd-ui-panel-ink)!important;
  border-color:var(--srd-ui-border)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="weekday"] {
  background:var(--srd-calendar-heading)!important;
  color:var(--srd-ui-panel-ink)!important;
  border-color:var(--srd-ui-border)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="week-number"] {
  background:var(--srd-calendar-week)!important;
  color:var(--srd-ui-panel-muted)!important;
  border-color:var(--srd-ui-border)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="calendar-day"] {
  background:var(--srd-calendar-surface)!important;
  color:var(--srd-ui-panel-ink)!important;
  border-color:var(--srd-ui-border)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="calendar-day"].is-outside {
  background:var(--srd-calendar-outside)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="calendar-day"][data-agenda-day]:hover {
  background:var(--srd-calendar-week)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="calendar-day"]>header time {
  color:var(--srd-ui-panel-ink)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="calendar-day"]>header span {
  color:var(--srd-ui-panel-muted)!important;
  border-color:var(--srd-ui-border)!important;
}
/* Actual appointment cards must be paired with their OWN background,
   and the per-person left border is still controlled by --srd-person-accent. */
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="event"] {
  background:var(--srd-calendar-appointment)!important;
  border-color:var(--srd-calendar-appointment-border)!important;
  border-left:4px solid var(--srd-person-accent,var(--srd-ui-accent))!important;
  color:var(--srd-ui-panel-ink)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="event"]:hover {
  background:var(--srd-calendar-appointment-hover)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="event"] :is(strong,span){
  color:var(--srd-ui-panel-ink)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="event"] small{
  color:var(--srd-ui-panel-muted)!important;
}
/* Preserve different leave/free semantics using palette roles rather than old hex. */
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="event"][data-srd-event-kind="leave"] {
  border-color:var(--wash-danger)!important;
  border-left-color:var(--wash-danger)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="event"][data-srd-event-kind="roster-free"] {
  border-color:var(--wash-link)!important;
  border-left-color:var(--wash-link)!important;
}
/* Appointment popup family -- standard central popup role; no independent dark CSS.
   Do not overwrite backdrop layout/display (used for open/closed JS behavior). */
html[data-srd-theme-box] [data-srd-ui="popup-1"] {
  background:var(--srd-ui-popup-1-bg)!important;
  color:var(--srd-ui-popup-1-ink)!important;
  border-color:var(--srd-ui-border)!important;
}
html[data-srd-theme-box] [data-srd-ui="popup-1"] :is(h1,h2,h3,strong,dd){
  color:var(--srd-ui-popup-1-ink)!important;
}
html[data-srd-theme-box] [data-srd-ui="popup-1"] :is(label,dt,p,small,span){
  color:var(--srd-ui-popup-1-muted)!important;
}
html[data-srd-theme-box] [data-srd-ui="popup-1"] :is(input,textarea,select){
  background:var(--srd-ui-input-bg)!important;
  color:var(--srd-ui-input-ink)!important;
  border-color:var(--srd-ui-border)!important;
}
html[data-srd-theme-box] [data-srd-ui="popup-1"] [data-srd-part="popup-actions"] button{
  background:var(--srd-ui-popup-1-bg)!important;
  color:var(--srd-ui-popup-1-ink)!important;
  border-color:var(--srd-ui-accent)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="roster-form"] :is(input,select) {
  background:var(--srd-ui-input-bg)!important;
  color:var(--srd-ui-input-ink)!important;
  border-color:var(--srd-ui-border)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="roster-form"] :is(label,span) {
  color:var(--srd-ui-panel-muted)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="roster-form"] button {
  background:var(--wash-raised)!important;
  color:var(--srd-ui-panel-ink)!important;
  border-color:var(--srd-ui-border)!important;
}
/* Status badges are governed by semantic palette colors. */
html[data-srd-theme-box] [data-srd-ui="calendar-1"] [data-srd-part="state"][data-state="GREEN"] {
  color:var(--wash-positive)!important;
  border-color:var(--wash-positive)!important;
}
html[data-srd-theme-box] [data-srd-ui="calendar-1"]
:is([data-srd-part="state"][data-state="RED"],[data-srd-part="state"][data-state="DEGRADED"]) {
  color:var(--wash-danger)!important;
  border-color:var(--wash-danger)!important;
}

/* Wasstraat shared layout rails. One construction used by any workforce/stock
   person-card or editable balance form, colors ONLY from the active THEMA box. */
html[data-srd-theme-box] [data-srd-ui="card-grid-1"] {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap:12px;
  min-width:0;
}
html[data-srd-theme-box] [data-srd-ui="card-grid-1"] > [data-srd-part="grid-card"] {
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  overflow-wrap:break-word;
}
html[data-srd-theme-box] [data-srd-ui="form-row-1"] {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(82px,.82fr);
  gap:8px;
  align-items:stretch;
  min-width:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
html[data-srd-theme-box] [data-srd-ui="form-row-1"] > [data-srd-part="description"] {
  grid-column:1/-1;
  min-width:0;
  overflow-wrap:anywhere;
  line-height:var(--srd-ui-line-body);
  color:var(--srd-ui-panel-ink)!important;
}
html[data-srd-theme-box] [data-srd-ui="form-row-1"] > :is(
  [data-srd-part="value-1"],[data-srd-part="value-2"],[data-srd-part="submit"]
) {
  box-sizing:border-box;
  min-width:0;
  width:100%;
  max-width:100%;
  min-height:var(--srd-ui-input-height);
  padding:8px;
  font:inherit;
  border:1px solid var(--srd-ui-border)!important;
  border-radius:var(--srd-ui-radius-input);
}
html[data-srd-theme-box] [data-srd-ui="form-row-1"] > :is(
  [data-srd-part="value-1"],[data-srd-part="value-2"]
) {
  background:var(--srd-ui-input-bg)!important;
  color:var(--srd-ui-input-ink)!important;
}
html[data-srd-theme-box] [data-srd-ui="form-row-1"] > [data-srd-part="submit"] {
  background:var(--srd-ui-action-bg)!important;
  color:var(--srd-ui-action-ink)!important;
  font-weight:750;
  cursor:pointer;
}
@media(max-width:370px) {
  html[data-srd-theme-box] [data-srd-ui="form-row-1"] {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  html[data-srd-theme-box] [data-srd-ui="form-row-1"] > [data-srd-part="submit"] {
    grid-column:1/-1;
  }
}

/* Shared compact time editor for a staff/shift card. Uses existing form
   controls; at narrow widths native <input type=time> fields stack safely. */
html[data-srd-theme-box] [data-srd-ui="time-row-1"] {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:7px;
  min-width:0;
  max-width:100%;
}
html[data-srd-theme-box] [data-srd-ui="time-row-1"] > label {
  grid-column:1/-1;
  min-width:0;
  overflow-wrap:anywhere;
}
html[data-srd-theme-box] [data-srd-ui="time-row-1"] > input[type="time"] {
  min-width:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  background:var(--srd-ui-input-bg)!important;
  color:var(--srd-ui-input-ink)!important;
  border-color:var(--srd-ui-border)!important;
}
html[data-srd-theme-box] [data-srd-ui="time-row-1"] > span {
  display:none;
}
@media(max-width:640px) {
  html[data-srd-theme-box] [data-srd-ui="time-row-1"] {
    grid-template-columns:minmax(0,1fr);
  }
  html[data-srd-theme-box] [data-srd-ui="time-row-1"] > input[type="time"] {
    grid-column:1/-1;
  }
}


/* SRD Wasstraat: repeatable settings/choice form row (form-row-2).
   This is a generic 3-input + 2-toggle + submit editor row.
   Every surface/text color comes from ONE selected THEMA box.
   No business logic, options, check state or field values are affected. */
html[data-srd-theme-box] [data-srd-ui="form-row-2"] {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.76fr) minmax(138px,.7fr) minmax(76px,.4fr) minmax(104px,.5fr);
  gap:10px;
  align-items:center;
  box-sizing:border-box;
  min-width:0;
  width:100%;
  max-width:100%;
  padding:12px;
  background:var(--srd-ui-panel-bg)!important;
  border:1px solid var(--srd-ui-border)!important;
  border-radius:var(--srd-ui-radius-panel);
  color:var(--srd-ui-panel-ink)!important;
}
html[data-srd-theme-box] [data-srd-ui="form-row-2"] > :is(input:not([type="hidden"]):not([type="checkbox"]),select,button,label) {
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
html[data-srd-theme-box] [data-srd-ui="form-row-2"] > :is(input:not([type="hidden"]):not([type="checkbox"]),select){
  width:100%;
  min-height:var(--srd-ui-input-height);
  background:var(--srd-ui-input-bg)!important;
  color:var(--srd-ui-input-ink)!important;
  border:1px solid var(--srd-ui-border)!important;
  border-radius:var(--srd-ui-radius-input);
}
html[data-srd-theme-box] [data-srd-ui="form-row-2"] > label{
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--srd-ui-panel-ink)!important;
  font-family:var(--srd-ui-font-family);
  font-size:var(--srd-ui-font-body);
  line-height:var(--srd-ui-line-body);
  font-weight:550;
  overflow-wrap:normal;
  white-space:normal;
  cursor:pointer;
}
html[data-srd-theme-box] [data-srd-ui="form-row-2"] > label input[type="checkbox"]{
  width:17px;
  height:17px;
  min-width:17px;
  flex:0 0 17px;
  accent-color:var(--srd-ui-accent);
}
html[data-srd-theme-box] [data-srd-ui="form-row-2"] > button {
  min-height:var(--srd-ui-button-height);
  width:100%;
  border:1px solid var(--srd-ui-border)!important;
  border-radius:var(--srd-ui-radius-input);
  background:var(--srd-ui-navy-bg)!important;
  color:var(--srd-ui-navy-ink)!important;
  font-family:var(--srd-ui-font-family);
  font-size:var(--srd-ui-font-body);
  font-weight:720;
  line-height:1.2;
  white-space:normal;
  cursor:pointer;
}
html[data-srd-theme-box] [data-srd-ui="form-row-2"].type-add {
  border-color:var(--srd-ui-accent)!important;
}
html[data-srd-theme-box] [data-srd-ui="form-row-2"] :focus-visible {
  outline:2px solid var(--wash-focus)!important;
  outline-offset:2px;
}
@media(max-width:1280px) {
 html[data-srd-theme-box] [data-srd-ui="form-row-2"] {
  grid-template-columns:repeat(3,minmax(0,1fr));
 }
}
@media(max-width:700px) {
 html[data-srd-theme-box] [data-srd-ui="form-row-2"] {
  grid-template-columns:repeat(2,minmax(0,1fr));
 }
 html[data-srd-theme-box] [data-srd-ui="form-row-2"] > :is(input[name="label"],button){
  grid-column:1/-1;
 }
}
@media(max-width:390px) {
 html[data-srd-theme-box] [data-srd-ui="form-row-2"] {
  grid-template-columns:minmax(0,1fr);
 }
 html[data-srd-theme-box] [data-srd-ui="form-row-2"] > :is(input[name="label"],button){
  grid-column:auto;
 }
}

/* Shared catalog/search results rail; reusable for machines, relations and stock.
   Presentation of existing semantic tables as accessible compact inline rows.
   No room-specific colors or business decisions here. */
html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] {
  display:block;
  min-width:0;
  max-width:100%;
  overflow:visible!important;
  background:var(--srd-ui-panel-bg)!important;
  border:1px solid var(--srd-ui-border)!important;
  border-radius:var(--srd-ui-radius-panel);
  color:var(--srd-ui-panel-ink)!important;
}
html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] [data-srd-search-hint] {
  display:block;
  margin:0;
  padding:12px 16px;
  font-size:var(--srd-ui-font-body);
  font-family:var(--srd-ui-font-family);
  color:var(--srd-ui-panel-muted)!important;
  background:var(--srd-ui-panel-bg)!important;
}
html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] [data-srd-part="list"] {
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  border:0!important;
  background:var(--srd-ui-panel-bg)!important;
  color:var(--srd-ui-panel-ink)!important;
}
html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] thead {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}
html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] [data-srd-part="list-body"] {
  display:block;
  max-height:min(54vh,520px);
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  border-top:1px solid var(--srd-ui-border);
}
html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] [data-srd-part="item"] {
  display:grid;
  grid-template-columns:minmax(185px,1.7fr) minmax(110px,.85fr) minmax(100px,.75fr) minmax(160px,1.15fr) minmax(105px,.9fr) minmax(80px,.7fr) minmax(85px,.75fr);
  gap:8px 12px;
  padding:13px 16px;
  align-items:center;
  min-width:0;
  max-width:100%;
  cursor:pointer;
  border-bottom:1px solid var(--srd-ui-border)!important;
  background:var(--srd-ui-panel-bg)!important;
  color:var(--srd-ui-panel-ink)!important;
}
html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] [data-srd-part="item"]:last-child {
  border-bottom:0!important;
}
html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] [data-srd-part="item"]:hover,
html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] [data-srd-part="item"]:focus-visible {
  background:var(--wash-raised)!important;
  outline:2px solid var(--wash-focus);
  outline-offset:-2px;
}
html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] [data-srd-part="item"] > td {
  display:block;
  box-sizing:border-box;
  min-width:0;
  width:auto!important;
  max-width:100%;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--srd-ui-panel-ink)!important;
  overflow-wrap:anywhere;
  font:550 var(--srd-ui-font-body)/var(--srd-ui-line-body) var(--srd-ui-font-family);
}
html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] [data-srd-field="primary"] strong {
  display:block;
  color:var(--srd-ui-panel-ink)!important;
  font-size:var(--srd-ui-font-body);
}
html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] [data-srd-part="item"] small {
  color:var(--srd-ui-panel-muted)!important;
  font-weight:500;
}
html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] [data-dossier-status-cell] {
  color:var(--srd-ui-panel-ink)!important;
}
@media(max-width:1200px) {
  html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] [data-srd-part="item"] {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:680px) {
  html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] [data-srd-part="item"] {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  html[data-srd-theme-box] [data-srd-ui="scroll-list-1"] [data-srd-field="primary"] {
    grid-column:1/-1;
  }
}

/* Single slider/fader construction: re-used by class or data-srd-ui.
   Geometry, behavior and accessibility are independent of palette. */
html[data-srd-theme-box] :is(.srd-fader,[data-srd-ui="fader-1"]) {
  box-sizing:border-box;
  display:inline-block;
  vertical-align:middle;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:24px;
  margin:0;
  padding:0;
  accent-color:var(--srd-fader)!important;
  cursor:pointer;
}
html[data-srd-theme-box] :is(.srd-fader,[data-srd-ui="fader-1"]):focus-visible {
  outline:2px solid var(--wash-focus);
  outline-offset:3px;
}

/* WASSTRAAT | CORE RESULT RAIL 1
   One search/result table frame for Relaties and Machinekamer.
   The existing Core data, row actions and search JS remain unchanged. */
html[data-srd-theme-box] body.srd-os-workspace [data-srd-ui="core-list-1"] {
  display:block;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  height:clamp(260px, 51dvh, 640px);
  min-height:0;
  overflow-y:auto!important;
  overflow-x:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  border:1px solid var(--wash-border);
  border-radius:var(--srd-ui-radius-panel,12px);
  background:var(--wash-panel);
  color:var(--wash-text);
}
html[data-srd-theme-box] body.srd-os-workspace [data-srd-ui="core-list-1"] table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
html[data-srd-theme-box] body.srd-os-workspace [data-srd-ui="core-list-1"] thead,
html[data-srd-theme-box] body.srd-os-workspace [data-srd-ui="core-list-1"] thead th {
  position:sticky!important;
  inset-block-start:0!important;
  z-index:6;
  background:var(--wash-raised)!important;
  color:var(--wash-text)!important;
}
html[data-srd-theme-box] body.srd-os-workspace [data-srd-ui="core-list-1"][data-srd-list-state="idle"],
html[data-srd-theme-box] body.srd-os-workspace [data-srd-ui="core-list-1"][data-srd-list-state="no-results"] {
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  overflow:hidden!important;
}
html[data-srd-theme-box] body.srd-os-workspace [data-srd-ui="core-list-1"]:is([data-srd-list-state="idle"],[data-srd-list-state="no-results"]) table {
  display:none!important;
}
html[data-srd-theme-box] body.srd-os-workspace [data-srd-ui="core-list-1"] [data-srd-search-hint] {
  margin:0;
  padding:12px 16px;
  color:var(--wash-muted);
  background:var(--wash-panel);
  font-size:var(--srd-ui-font-body,12px);
}
html[data-srd-theme-box] body.srd-os-workspace [data-srd-ui="core-list-1"] [data-srd-list-state="results"] [data-srd-search-hint] {
  display:block;
}

/* WASSTRAAT | STATUS LED 1
   Status has its own plug in each palette box, not brand/foreground colors.
   Reusable on any future screen via data-srd-ui="status-led" and state class.
   Form, business meaning and active/off states remain independent of theme. */
[data-srd-ui="status-led"] {
  display:inline-block;
  inline-size:10px;
  block-size:10px;
  flex:none;
  border-radius:50%;
  margin-inline-end:8px;
  vertical-align:middle;
  background:transparent;
}
[data-srd-ui="status-led"].green {
  background:var(--wash-led-green)!important;
  box-shadow:0 0 10px color-mix(in srgb,var(--wash-led-green) 58%,transparent)!important;
}
[data-srd-ui="status-led"].blue {
  background:var(--wash-led-blue)!important;
  box-shadow:0 0 10px color-mix(in srgb,var(--wash-led-blue) 58%,transparent)!important;
}
[data-srd-ui="status-led"].orange {
  background:var(--wash-led-orange)!important;
  box-shadow:0 0 10px color-mix(in srgb,var(--wash-led-orange) 58%,transparent)!important;
}
[data-srd-ui="status-led"].red {
  background:var(--wash-led-red)!important;
  box-shadow:0 0 10px color-mix(in srgb,var(--wash-led-red) 58%,transparent)!important;
}
[data-srd-ui="status-led"].purple {
  background:var(--wash-led-purple)!important;
  box-shadow:0 0 10px color-mix(in srgb,var(--wash-led-purple) 58%,transparent)!important;
}
[data-srd-ui="status-led"].app-off {
  background:transparent!important;
  border:1px solid var(--wash-led-blue)!important;
  box-shadow:none!important;
  box-sizing:border-box;
}