/* Containers hub (desktop/containers-hub.js): role editor, sorter switches and
   the live window table on the Healer modal paint (modal-colors tokens). */

.containers-shell {
  --ch-gap: 8px;
  --ch-field-h: 26px;
  --ch-line: var(--modal-color-line, rgba(71, 89, 108, 0.55));
  --ch-muted: var(--modal-color-muted, rgba(190, 203, 216, 0.62));
  --ch-label: var(--modal-color-label, rgba(196, 207, 219, 0.72));
  --ch-title: var(--modal-color-title, #e8eef5);
  --ch-safe: rgba(127, 196, 106, 0.78);
  --ch-warn: rgba(226, 190, 108, 0.78);
  --ch-danger: rgba(214, 112, 96, 0.82);
  --ch-route: rgba(120, 170, 220, 0.78);
  min-width: 0;
  display: grid;
  gap: var(--ch-gap);
  font-size: 11px;
}

.containers-shell .ch-head-actions,
:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.containers-shell .ch-head-actions [hidden] { display: none !important; }

.containers-shell .btn.compact {
  height: var(--ch-field-h);
  min-height: var(--ch-field-h);
  padding: 0 8px;
  font-size: 11px;
  white-space: nowrap;
}

.containers-shell .ch-notice {
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--ch-line);
  border-radius: 6px;
  color: var(--ch-title);
}

.containers-shell .ch-layout {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.containers-shell .ch-card {
  padding: 6px 8px;
  gap: 6px;
  border: 1px solid var(--ch-line);
  border-radius: 6px;
  background: var(--modal-color-panel);
  box-shadow: none;
}

.containers-shell .ch-card-head {
  min-height: var(--ch-field-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ch-gap);
}

.containers-shell .ch-card-title {
  color: var(--ch-title);
  font-size: 12px;
  font-weight: 800;
}

.containers-shell .ch-card-title small {
  margin-left: 6px;
  color: var(--ch-muted);
  font-size: 10px;
  font-weight: 600;
}

.containers-shell .ch-master {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.containers-shell.is-off .ch-roles-card [data-ch-region="roles"],
.containers-shell.is-off .ch-options {
  opacity: 0.55;
}

.containers-shell .ch-muted {
  color: var(--ch-muted);
  font-size: 10px;
  line-height: 1.35;
}

.containers-shell .ch-empty,
.containers-shell .ch-foot {
  margin: 0;
}

/* "Add role" picker: every preset in four columns above the role list. */
.containers-shell .ch-preset-picker {
  margin: 0 0 6px;
}

.containers-shell .ch-preset-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}

/* One shared height so the Custom field and its + line up with the presets. */
.containers-shell .ch-preset,
.containers-shell .ch-preset-custom input,
.containers-shell .ch-preset-custom .btn {
  box-sizing: border-box;
  height: 28px;
  min-height: 0;
  align-self: center;
}

.containers-shell .ch-preset {
  justify-content: center;
  text-align: center;
  min-width: 0;
}

/* Custom's name field fills only Custom's own grid cell. */
.containers-shell .ch-preset-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.containers-shell .ch-preset-custom input {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0 4px;
  text-align: center;
}

.containers-shell .ch-preset-custom .btn {
  min-width: 0;
  margin: 0;
  padding: 0 6px;
}

/* No status yet means no row at all. */
.containers-shell .ch-foot:empty {
  display: none;
}

/* Independent feature panels; enabled roles expose their editor. */
.containers-shell .ch-role-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-role {
  display: grid !important;
  gap: 4px !important;
  min-width: 0;
  min-height: 0 !important;
  box-sizing: border-box;
  padding: 3px 8px !important;
  border: 1px solid var(--ch-line);
  border-radius: 6px;
  background: var(--modal-color-panel);
}

.containers-shell .ch-role:nth-child(even) {
  border-color: var(--modal-color-line);
}

:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-role-head {
  min-width: 0;
  height: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.containers-shell .ch-role-summary {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ch-title);
  font-size: 11px;
  text-align: left;
}

.containers-shell .ch-role-summary-detail {
  min-width: 0;
  overflow: hidden;
  color: var(--ch-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-role-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "items" !important;
  align-items: end !important;
  gap: 4px 6px !important;
  padding: 0 0 3px !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-role-body[hidden] { display: none !important; }

:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-role-body:has(.ch-bagname) {
  grid-template-columns: 90px minmax(0, 1fr) !important;
  grid-template-areas: "bagname items" !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-role.is-raw .ch-role-body {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "raw" !important;
}

.containers-shell .ch-role.has-problem {
  border-color: var(--ch-danger);
}

.containers-shell .ch-rank {
  flex: none;
  width: 14px;
  line-height: var(--ch-field-h);
  color: var(--ch-muted);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-field {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
  display: flex;
  flex-direction: column !important;
  gap: 2px;
}

.containers-shell .ch-field > span {
  color: var(--ch-label);
  font-size: 10px;
  line-height: 1.1;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-field :is(input, select) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: var(--ch-field-h);
  min-height: var(--ch-field-h);
  padding: 0 6px;
  font-size: 11px;
}

.containers-shell .ch-name { grid-area: name; }
.containers-shell .ch-bag { grid-area: bag; }
.containers-shell .ch-bagname { grid-area: bagname; }
.containers-shell .ch-raw { grid-area: raw; }

.containers-shell .ch-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-row-actions {
  grid-area: actions;
  justify-content: flex-end;
  gap: 3px;
}

.containers-shell .btn.compact.ch-icon {
  box-sizing: border-box;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0 !important;
  gap: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-items {
  grid-area: items;
  align-self: start;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* Item tags: flat 20px tags, not pills. Items neutral, named categories tinted. */
.containers-shell .looting-chip {
  height: 20px;
  min-height: 20px;
  padding: 0 2px 0 6px;
  gap: 2px;
  border: 1px solid var(--ch-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ch-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.containers-shell .looting-chip.is-category {
  border-color: rgba(120, 170, 220, 0.4);
  background: rgba(120, 170, 220, 0.1);
  color: #cfe2f5;
}

.containers-shell .ch-chip-x {
  width: 14px;
  min-width: 14px;
  height: 14px;
  min-height: 14px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ch-muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.containers-shell .ch-chip-x:is(:hover, :focus-visible) {
  background: rgba(214, 112, 96, 0.3);
  color: var(--ch-title);
}

.containers-shell .ch-item-input {
  flex: 1 1 72px;
  min-width: 64px;
  height: 20px;
  min-height: 20px;
  padding: 0 6px;
  font-size: 10px;
}

.containers-shell .ch-suggest {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-height: 104px;
  overflow-y: auto;
  padding: 4px;
  border: 1px dotted var(--ch-line);
  border-radius: 6px;
}

.containers-shell :is(button, a[data-replica-control]).looting-chip.ch-chip-pick {
  padding: 0 6px;
  cursor: pointer;
}

.containers-shell .ch-problem {
  grid-column: 1 / -1;
  margin: 0;
  color: #f0b3a8;
  font-size: 10px;
}

.containers-shell .ch-engine-errors {
  margin: 0;
  padding: 4px 8px 4px 20px;
  border: 1px solid var(--ch-danger);
  border-radius: 6px;
  color: #f0b3a8;
  font-size: 10px;
}

.containers-shell .ch-engine-errors code {
  color: var(--ch-title);
}

.containers-shell .ch-badge {
  padding: 1px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ch-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.containers-shell .ch-badge.tone-safe { background: rgba(127, 196, 106, 0.12); color: #d8f2cc; }
.containers-shell .ch-badge.tone-warning { background: rgba(226, 190, 108, 0.12); color: #f2e3b3; }
.containers-shell .ch-badge.tone-danger { background: rgba(214, 112, 96, 0.16); color: #ffd0ca; }
.containers-shell .ch-badge.tone-route { background: rgba(120, 170, 220, 0.12); color: #cfe2f5; }

/* Live windows: one dense table row per open window. */
.containers-shell .ch-windows {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.containers-shell .ch-windows th {
  padding: 0 6px 4px;
  border-bottom: 1px solid var(--ch-line);
  color: var(--ch-label);
  font-size: 9px;
  font-weight: 600;
  text-align: left;
}

.containers-shell .ch-windows th:nth-child(1) { width: auto; }
.containers-shell .ch-windows th:nth-child(2) { width: 84px; }
.containers-shell .ch-windows th:nth-child(3) { width: 76px; }
.containers-shell .ch-windows th:nth-child(4) { width: 92px; }

.containers-shell .ch-windows :is(th, td):nth-child(n + 3) { text-align: center; }
.containers-shell .ch-windows :is(th, td):nth-child(4) { text-align: right; }

.containers-shell .ch-windows td {
  height: 24px;
  padding: 2px 6px;
  border-top: 1px solid rgba(71, 89, 108, 0.25);
  color: var(--ch-title);
  vertical-align: middle;
}

.containers-shell .ch-windows select {
  width: 100%;
  height: 22px;
  min-height: 22px;
  padding: 0 2px;
  font-size: 10px;
}

.containers-shell .ch-windows tbody tr:first-child td { border-top: 0; }

.containers-shell .ch-win-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.containers-shell .ch-win-name small {
  color: var(--ch-muted);
}

.containers-shell .ch-windows tr.tone-danger .ch-win-name {
  color: var(--ch-muted);
}

.containers-shell .ch-fill {
  white-space: nowrap;
}

.containers-shell .ch-meter {
  width: 40px;
  height: 5px;
  margin-right: 4px;
  display: inline-block;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  vertical-align: middle;
}

.containers-shell .ch-meter i {
  height: 100%;
  display: block;
  background: var(--ch-safe);
}

.containers-shell .ch-meter.tone-warning i { background: var(--ch-warn); }
.containers-shell .ch-meter.tone-danger i { background: var(--ch-danger); }
.containers-shell .ch-meter.tone-neutral i { background: var(--ch-line); }

.containers-shell .ch-fill small {
  display: inline-block;
  min-width: 34px;
  color: var(--ch-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* One compact strip: three switches and the shared timer. */
:is(#modal-layer, [data-replica-id="modal-layer"]) .containers-shell .ch-options {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1fr) max-content !important;
  align-items: center !important;
  box-sizing: border-box;
  height: 34px !important;
  padding: 3px 4px !important;
  gap: 4px !important;
  border: 1px solid var(--ch-line);
  border-radius: 6px;
  background: var(--modal-color-panel);
}

:is(#modal-layer, [data-replica-id="modal-layer"]) .containers-shell .ch-options > label {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  gap: 4px !important;
  border: 1px solid var(--ch-line) !important;
  border-radius: 4px !important;
  background: var(--modal-color-field) !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]):is(#modal-layer, [data-replica-id="modal-layer"]):is(#modal-layer, [data-replica-id="modal-layer"]) .containers-shell .ch-options > label.ch-cooldown .shared-time-input {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]):is(#modal-layer, [data-replica-id="modal-layer"]):is(#modal-layer, [data-replica-id="modal-layer"]) .containers-shell .ch-options > label.ch-cooldown .shared-time-input > input,
:is(#modal-layer, [data-replica-id="modal-layer"]):is(#modal-layer, [data-replica-id="modal-layer"]):is(#modal-layer, [data-replica-id="modal-layer"]) .containers-shell .ch-options > label.ch-cooldown .shared-time-input > input:focus,
:is(#modal-layer, [data-replica-id="modal-layer"]):is(#modal-layer, [data-replica-id="modal-layer"]):is(#modal-layer, [data-replica-id="modal-layer"]) .containers-shell .ch-options > label.ch-cooldown .shared-time-input > input:focus-visible {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 2px 4px 2px 21px !important;
  text-align: center !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]):is(#modal-layer, [data-replica-id="modal-layer"]):is(#modal-layer, [data-replica-id="modal-layer"]) .containers-shell .ch-options > label.ch-cooldown .shared-time-input-icon {
  left: 0 !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) .containers-shell .ch-options > label.ch-cooldown:focus-within {
  border-color: rgba(216, 159, 74, 0.82) !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) .containers-shell .ch-options > label.ch-toggle > span {
  color: var(--ch-label) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) .containers-shell .ch-options input[type="checkbox"] {
  flex-shrink: 0 !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) .containers-shell [hidden] {
  display: none !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) .containers-shell :is(.ch-card-title, .ch-role-title) {
  color: var(--ch-label);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.18;
  text-transform: none;
  letter-spacing: 0;
}

.containers-shell .ch-roles-card {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.containers-shell .ch-card-head {
  padding: 3px 8px;
  border-radius: 6px;
}

.containers-shell .ch-card-title,
.containers-shell .ch-role-summary {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.containers-shell .ch-card-title small {
  margin: 0;
  white-space: nowrap;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) .containers-shell .ch-card-head {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  min-height: 26px !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) .containers-shell .ch-card-head .ch-head-actions {
  gap: 4px !important;
  flex-wrap: nowrap !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) .containers-shell .ch-card-head .btn.compact {
  padding: 0 6px !important;
  font-size: 10px !important;
}

.containers-shell .ch-head-actions,
.containers-shell .healer-inline-toggle {
  flex-shrink: 0;
}

.containers-shell.is-off :is([data-ch-region="roles"], .ch-card-head [data-ch-action="add"]) {
  display: none;
}

/* The modal is as tall as its content, capped at the surface. */
:is(#modal-layer, [data-replica-id="modal-layer"]):is(#modal-layer, [data-replica-id="modal-layer"]) > :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] {
  height: fit-content !important;
  max-height: calc(calc(100 * var(--surface-vh, 1vh)) - 12px) !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-header-container {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 6px !important;
  color: var(--ch-label) !important;
  font-size: 11px !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-role-title {
  flex: 0 1 auto;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Collapsed features retain exactly the Healer utility-row geometry. */
:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-role:has(> .ch-role-body[hidden]) {
  height: 34px !important;
  min-height: 34px !important;
  grid-template-rows: 26px !important;
  gap: 0 !important;
}

/* The live table owns its intrinsic height; no inherited panel minimum. */
:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-windows-card {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 8px !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell :is([data-ch-live="windows"], .ch-windows) {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

:is(#modal-layer, [data-replica-id="modal-layer"]) :is(#modal-module, [data-replica-id="modal-module"])[data-active-module-key="containers"] .containers-shell .ch-windows :is(tbody, tr) {
  height: auto !important;
  min-height: 0 !important;
}