RustProxy/src/admin/web/css/40-editors.css

/* Shared service editors: Vhosts, backends, Web Server, Streams, routing and ACL pickers */

.host-chip-editor.field-invalid,
.listener-choices.field-invalid {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 1px rgba(255, 170, 162, .38);
}

.vhost-layout {
  grid-template-columns: minmax(220px, .7fr) minmax(0, 2fr);
  gap: 12px;
  align-items: start;
  display: block;
}

.vh-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}

.php-switch-row .php-switch-label span,
.chart-footer>span,
.cache-stats .stat,
.traffic-chart-card,
#panel-overview .backend-mode-bar span,
#panel-overview .stats-grid>.stat,
#panel-overview .dashboard-overview-grid>.activity-card svg,
#panel-overview .dashboard-overview-grid>[data-dashboard-widget],
.dashboard-density-setting>.fine,
.dashboard-density-setting>select,
.vh-form,
.vhost-layout>.card,
.location-header-editor,
.location-preview-grid>div,
.vhost-card-identity,
.web-service-pages,
.vhost-backend-popup-field,
.vh-setting-section>.vh-grid>.vh-acl-profile-picker,
.certificate-card-identity,
.docker-agent-card,
.docker-agent-settings,
.docker-passive-health-editor .docker-checkbox-field,
#panel-settings .settings-pages,
#panel-tls .certificate-subheading>div,
#panel-tls .certificate-workspace-heading>div,
.docker-profile-field,
.refresh-settings-grid>label:not(.check),
.cache-operation-dialog .cache-dialog-heading>div:first-child,
#panel-traffic [data-traffic-page],
.logging-grid label,
.file-logs-filter label,
.config-history-json-columns section {
  min-width: 0;
}

.vh-group {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--rp-radius-surface, 6px);
  margin: 8px 0;
  padding: 9px;
}

.vh-group>summary {
  font-weight: 600;
  padding: 0 5px;
  color: var(--text);
  cursor: pointer;
  margin-bottom: 6px;
  font-size: 11px;
}

.vh-grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.vh-field input,
.vh-field select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 6px 7px;
  font-size: 12px;
  margin: 0;
  box-sizing: border-box;
}

.vh-field textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 6px 7px;
  font-size: 12px;
  margin: 0;
  box-sizing: border-box;
  resize: vertical;
  font-family: var(--mono);
}

.vh-check {
  font-size: 11px;
  min-height: 28px;
  margin: 0;
  align-items: center;
  gap: 6px;
}

.vh-enable-control {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 10px;
  margin-top: 5px !important;
  padding: 11px 12px;
  border: 1px solid var(--pill-live-line);
  background: var(--panel2);
  box-shadow: inset 3px 0 0 var(--green);
}

.vh-enable-control>input {
  grid-column: 1;
  grid-row: 1/3;
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.vh-enable-control>span {
  grid-column: 2;
  grid-row: 1;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.vh-enable-hint {
  grid-column: 2;
  grid-row: 2;
  color: var(--muted);
  font-size: 10px;
}

.vh-enable-state {
  grid-column: 3;
  grid-row: 1/3;
  padding: 3px 7px;
  border: 1px solid var(--pill-live-line);
  color: var(--green);
  font: 600 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.vh-enable-control.is-disabled {
  border-color: var(--danger-line-strong);
  box-shadow: inset 3px 0 0 var(--red);
}

.vh-enable-control.is-disabled .vh-enable-state,
.vhost-quick-toggle.is-disable,
.acl-picker-policy.is-deny {
  border-color: var(--danger-line);
  color: var(--red);
}

.vh-members {
  display: grid;
  gap: 12px;
}

.vh-row {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--rp-radius-surface, 5px);
  min-width: 0;
  background: var(--bg);
}

.vh-member>.quiet,
.file-log-raw-json,
.cache-maintenance-info .metric-info-popover .fine+code {
  margin-top: 6px;
}

.vh-member details>summary {
  cursor: pointer;
  color: var(--muted);
  padding: 3px 0;
}

.backend-card-heading {
  align-items: flex-start;
  gap: 10px;
}

.backend-table-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  margin-left: auto;
  --toolbar-control-height: min(var(--button-min-height), var(--ui-field-min-height));
}

.backend-sort-control {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}

.backend-sort-control select {
  width: auto;
  min-width: 120px;
}

.backend-column-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(145px, 1fr));
  gap: 1px 12px;
  min-width: 330px;
  max-height: 330px;
  overflow: auto;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 12px 28px var(--shadow-strong);
}

.backend-column-options .check {
  margin-top: 4px !important;
  font-size: 11px;
}

.location-summary {
  overflow-wrap: anywhere;
  cursor: pointer;
  padding: 10px 12px;
  font: 600 11px/1.45 var(--mono);
  color: var(--text);
}

.vh-health-summary {
  overflow-wrap: anywhere;
  grid-column: 1/-1;
  color: var(--muted);
  font: 10px var(--mono);
}

.vh-live-summary {
  overflow-wrap: anywhere;
  font: 10px var(--mono);
  line-height: 1.7;
  color: var(--muted);
  margin: 5px 0;
}

.app-startup-detail,
#panel-overview .stats-grid .stat>small,
.overview-inline-hidden-item>span:not(.overview-widget-type),
#panel-overview .www-method-legend,
.vhost-layout .entity-details,
.vh-backend-endpoint,
.acl-policy-condition span,
.listener-active-address,
.acl-profile-attached p,
.stream-backend-status-row>span:first-child,
.docker-agent-security .fine,
.docker-runtime .fine,
#panel-tls .certificate-operation-heading strong,
#panel-tls .renewal-entry-identity strong,
.certificate-api-credential-info code,
.certificate-api-credential-info small,
.certificate-bulk-list .check {
  overflow-wrap: anywhere;
}

.vh-form input:disabled {
  opacity: .5;
}

.edit-form input:not([type=checkbox]):not([type=radio]),
.edit-form select,
.edit-form textarea {
  padding: var(--ui-field-pad-y) var(--ui-field-pad-x);
  font-size: var(--ui-field-font-size);
  min-height: var(--ui-field-min-height);
}

.vhost-dialog::backdrop,
.audit-dialog::backdrop,
.logs-dialog::backdrop {
  background: var(--shadow-strong);
  backdrop-filter: blur(2px);
}

.vh-form>.card-heading {
  margin-bottom: 5px;
  position: sticky;
  top: -14px;
  z-index: 3;
  background: var(--panel);
  padding: 9px 0;
}

.vh-form>.card-heading h2 {
  flex: 1;
}

.vh-tabs {
  display: flex;
  flex-direction: row;
  margin-inline-start: 0;
  gap: 3px;
  position: sticky;
  top: 29px;
  z-index: 2;
  background: var(--panel);
  padding: 5px 0 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 9px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.vh-tabs button {
  width: auto;
  flex: 0 1 auto;
  font-size: 10px;
  padding: 6px 9px;
  white-space: nowrap;
}

.vh-tabs button.active {
  color: var(--text);
  background: var(--nav-selected-bg);
  border-color: var(--green);
}

.vh-pages-grid,
.vhost-detail span,
.vhost-backend-popup-field>span,
.cache-varnish-grace-field label {
  display: block;
}

.vh-form .form-actions {
  position: sticky;
  bottom: -14px;
  background: var(--panel);
  padding: 10px 0;
  border-top: 1px solid var(--line);
  z-index: 2;
}

.vh-header-row {
  display: grid;
  grid-template-columns: 88px minmax(110px, 1fr) minmax(140px, 2fr) auto;
  gap: 5px;
  align-items: end;
  margin: 6px 0;
}

.vh-header-rows+h3,
.certificate-card>.entity-actions,
.docker-agent-grid,
#panel-cache>article.card+article.card {
  margin-top: 10px;
}

.named-listener-row .vh-grid,
.transform-diagnostics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.listener-choices {
  flex-wrap: wrap;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.listener-choices>.fine {
  flex-basis: 100%;
  grid-column: 1/-1;
  margin: 0 0 2px;
}

.listener-choices>label {
  border: 1px solid var(--line);
  padding: 7px;
  border-radius: var(--rp-radius-control, 4px);
  font-size: 11px;
  display: flex;
  min-height: 44px;
  align-items: center;
  margin: 0;
}

dialog.vhost-dialog,
dialog.audit-dialog,
dialog.config-history-dialog,
dialog.config-history-json-dialog,
dialog.logs-dialog {
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 0;
  box-shadow: 0 18px 70px var(--shadow-strong);
}

.vh-location {
  border: 1px solid var(--line);
  background: var(--panel);
  min-width: 0;
}

.vh-locations {
  display: grid;
  gap: 9px;
}

.location-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
  padding-top: 4px;
}

.location-header-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-start;
}

.location-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.location-toolbar-bottom {
  justify-content: flex-start;
  margin: 9px 0 0;
}

.location-body {
  border-top: 1px solid var(--line);
  padding: 12px;
}

.location-section {
  border: 1px solid var(--line);
  min-width: 0;
}

.location-section>summary {
  cursor: pointer;
  padding: 9px 10px;
  color: var(--muted);
  font: 600 10px var(--mono);
  letter-spacing: .35px;
}

.location-section>div {
  border-top: 1px solid var(--line);
  padding: 10px;
}

.location-return-box {
  padding-top: 3px;
}

.acl-rule {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(140px, 1fr) auto;
  align-items: end;
  gap: 7px;
  margin-block: 5px;
}

.location-header-editor h3 {
  font-size: 12px;
  margin: 8px 0;
}

.location-header-editor .vh-header-row {
  grid-template-columns: 100px minmax(120px, 1fr) minmax(120px, 1.3fr) auto;
  display: block;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 9px;
}

.location-header-direction {
  border: 1px solid var(--line);
  background: var(--panel2);
  padding: 10px;
  min-width: 0;
}

.location-header-direction-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

p,
.php-origin-errors .fine,
.overview-presets-content>p,
.location-header-direction-head h3,
.redirect-listeners .check,
.vh-backend-health-editor .fine,
.acl-policy-preview .fine,
.listener-protocol-settings-actions button,
.vh-setting-section>.fine,
.vh-setting-section>.vh-grid>.fine,
.vh-override-fields>.fine,
.acme-card label,
.docker-agent-listener-choices,
#panel-tls .certificate-section-intro h3,
#panel-tls .certificate-subheading h3,
#panel-tls .certificate-library-footer p,
.cache-operation-dialog .card,
.file-log-search-help-popover p,
.file-logs-table-toolbar .fine,
.cache-maintenance-help .subheading,
.path-permissions p {
  margin: 0;
}

.location-header-direction-head p {
  margin: 0;
  max-width: 56ch;
  text-align: right;
}

.vh-header-empty {
  margin: 8px 0;
  padding: 9px 10px;
  border: 1px dashed var(--line);
}

.location-header-editor .vh-header-rows,
.security-policy-card #host-policy-list {
  display: grid;
  gap: 8px;
}

.vh-header-rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.vh-header-rule-title {
  font: 600 10px var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .45px;
}

.vh-header-rule-fields {
  display: grid;
  align-items: end;
  gap: 8px;
  grid-template-columns: minmax(100px, .55fr) minmax(140px, 1fr) minmax(180px, 1.35fr);
}

.vh-header-row.is-remove .vh-header-rule-fields {
  grid-template-columns: minmax(100px, .55fr) minmax(140px, 1fr) minmax(180px, 1.35fr);
}

.edit-form>.fine,
.location-add-header,
.certificate-state-pills,
.cache-varnish-info .metric-info-popover .fine+.fine,
.cache-maintenance-info .metric-info-popover code+.fine {
  margin-top: 8px;
}

.location-preview {
  border: 1px solid var(--line);
  background: var(--panel2);
  padding: 11px 12px;
}

.location-preview h4,
.config-history-month h4 {
  margin: 0 0 8px;
  font-size: 12px;
}

.location-preview-disabled {
  margin: 0 0 8px;
  color: var(--red);
}

.location-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 14px;
  margin: 0;
}

.location-preview-grid dt {
  color: var(--muted);
  font: 10px var(--mono);
  margin-bottom: 2px;
}

.location-preview-grid dd {
  margin: 0;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.location-doc-intro {
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--panel2);
}

.location-doc-section {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.location-doc-section h3 {
  margin: 0 0 7px;
  font-size: 12px;
}

.location-doc-section p+p {
  margin-top: 7px !important;
}

.location-doc-examples p {
  font-family: var(--mono);
  font-size: 10px;
  padding: 8px 9px;
  background: var(--panel2);
  border-left: 2px solid var(--accent);
}

.vhost-list-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  --toolbar-control-height: min(var(--button-min-height), var(--ui-field-min-height));
}

.vhost-card {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 14px;
  min-width: 0;
}

.vhost-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.vhost-policy-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.vhost-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.vhost-hosts {
  margin-top: 4px;
  font: 11px/1.45 var(--mono);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.vhost-detail-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: 12px;
  border: 1px solid var(--line);
}

.vhost-detail {
  min-width: 0;
  padding: 9px 10px;
  background: var(--bg);
}

.vhost-detail b {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.vhost-live-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.vhost-live-metric {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
}

.vhost-live-metric span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.vhost-live-metric strong {
  display: block;
  margin-top: 4px;
  font: 600 13px var(--mono);
  overflow-wrap: anywhere;
}

.vhost-card .vh-health-summary {
  margin: 9px 0 0;
  grid-column: auto;
}

.acl-profile-layout {
  display: grid;
  gap: 14px;
  align-items: start;
  grid-template-columns: minmax(260px, .72fr) minmax(440px, 1.28fr);
}

.host-chip-field>span:first-child {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 7px;
}

.host-chip-editor {
  min-height: 43px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--field-line);
  background: var(--field-bg);
}

.host-chip-editor input {
  flex: 1 1 210px;
  width: auto;
  min-width: 180px;
  border: 0;
  outline: 0;
  padding: 5px 6px;
  background: transparent;
}

.host-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 5px 4px 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  font: 10px var(--mono);
}

.host-chip button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0 3px;
  font-size: 15px;
  line-height: 1;
}

.vh-www-panel {
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--panel2);
  min-width: 0;
}

.vh-www-panel.is-enabled,
.vh-www-choice.is-selected {
  border-color: var(--green);
  box-shadow: inset 3px 0 0 var(--green);
}

.vh-www-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
}

.vh-www-title {
  font-size: 12px;
  color: var(--text);
}

.vh-www-host-count {
  padding: 3px 7px;
  border: 1px solid var(--line);
  color: var(--muted);
  font: 10px var(--mono);
}

.vh-www-header .vh-www-toggle {
  margin: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  color: var(--text);
  font-size: 11px;
}

.vh-www-help,
.vh-www-inactive {
  margin: 9px 0 0;
  font-size: 11px;
}

.vh-www-details,
.certificate-bulk-assign {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.vh-www-option-title {
  font-size: 11px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}

.vh-www-domain-pair {
  padding: 9px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.vh-www-domain-label {
  display: block;
  font: 11px var(--mono);
  color: var(--text);
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

.vh-www-pair-directions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vh-www-choice {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  background: var(--field-bg);
  cursor: pointer;
}

.vh-www-choice:focus-within,
.vh-www-choice:hover,
.log-column-picker[open]>summary {
  border-color: var(--green);
}

.vh-www-choice input {
  margin: 3px 0 0;
  accent-color: var(--green);
  flex: 0 0 auto;
}

.vh-www-choice-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.vh-www-choice-copy strong {
  font-size: 12px;
  overflow-wrap: anywhere;
  color: var(--text);
}

.vh-www-route {
  color: var(--muted);
  font: 11px var(--mono);
  overflow-wrap: anywhere;
}

.vh-www-no-hosts {
  margin: 6px 0;
  font-size: 11px;
}

.vh-www-other {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--muted);
}

.vh-www-alias {
  font: 11px var(--mono);
  padding: 4px 6px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.acl-profile-rule-rows:empty:before {
  content: "—";
  display: block;
  color: var(--muted);
  padding: 8px 0;
}

.acl-profile-rule {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(100px, .6fr) minmax(105px, .6fr) minmax(175px, 1.5fr) auto;
}

.acl-profile-rule label>span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-bottom: 4px;
}

.acl-profile-bulk {
  margin-top: 9px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.acl-profile-bulk>summary,
.file-log-raw-json>summary {
  cursor: pointer;
  color: var(--muted);
}

.stream-page-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 10px;
}

.stream-card .vhost-hosts {
  text-transform: none;
}

.stream-live-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.listener-address-chip-editor {
  min-height: 52px;
}

.redirect-listeners {
  display: grid;
  gap: .55rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.redirect-rules,
.stream-backend-list {
  display: grid;
  gap: 1rem;
}

.redirect-rule {
  border: 1px solid var(--line);
  border-radius: var(--rp-radius-surface, 12px);
  padding: 1rem;
  margin: 0;
  min-width: 0;
}

.redirect-card .vhost-detail-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.frontend-protocol-controls {
  margin-block-start: 16px;
  padding-block-start: 12px;
  border-top: 1px solid var(--line);
}

.frontend-protocol-controls>.small-label {
  display: block;
  margin-block-end: 10px;
}

.protocol-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  min-width: 0;
}

.protocol-toggle-row .check {
  margin: 0;
  min-width: min(280px, 100%);
  margin-top: 0 !important;
}

.protocol-toggle-row .vh-check {
  margin: 0;
  min-width: min(280px, 100%);
}

.vh-backend-card {
  padding: 0;
  overflow: hidden;
  background: var(--panel);
}

.vh-backend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.vh-backend-identity,
.docker-service-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

html[data-dashboard-density=ultra] #panel-overview .dashboard-overview-grid>.card .card-heading h2,
.vh-backend-title {
  font-size: 13px;
}

.vh-backend-main,
#panel-tls .certificate-renewal-card {
  padding: 12px;
}

.vh-backend-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-top: 2px;
}

.vh-backend-switches .vh-check {
  margin: 0;
  min-height: 26px;
}

.vh-backend-connection {
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.vh-backend-advanced {
  margin: 0 12px 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.vh-backend-health-editor {
  border: 1px solid var(--line);
  border-radius: var(--rp-radius-surface, 8px);
  padding: 15px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
  background: var(--surface, transparent);
}

.vh-backend-health-editor h3 {
  margin: 0;
  font-size: 14px;
}

.vh-backend-health-editor>.vh-field {
  max-width: 620px;
}

#redirect-listeners>.listener-choices,
.vh-backend-health-editor select,
.appearance-scale-control input[type=range],
.logging-builder-action button {
  width: 100%;
}

.vh-backend-health-panel {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.vh-backend-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 0 12px 12px;
}

.vh-backend-actions .fine {
  flex: 1 1 320px;
  margin: 0;
}

.vh-local-risk-gate {
  border: 1px solid var(--line);
  border-radius: var(--rp-radius-surface, 5px);
  padding: 8px;
}

.vh-local-risk-gate .fine,
#panel-tls .certificate-section-intro p,
#panel-tls .certificate-subheading p,
#panel-tls .certificate-workspace-heading p {
  margin: 5px 0 0;
}

#web-service-dialog .web-service-page,
#panel-tls .renewal-message {
  padding-top: 2px;
}

.backend-sort-direction {
  min-width: 36px;
  font-size: 16px;
  line-height: 1;
}

.backend-table-tools input,
.backend-table-tools select,
.vhost-list-tools input[type=search] {
  box-sizing: border-box;
  height: var(--toolbar-control-height);
  min-height: var(--toolbar-control-height);
  padding-block: 0;
}

.acl-policy-builder {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.acl-policy-preview {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  display: grid;
  gap: 9px;
}

.acl-policy-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.acl-policy-step-head,
.certificate-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.acl-policy-step-head>div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: flex-start;
}

.acl-policy-preview-head>span,
.acl-policy-step-head strong {
  display: block;
  font-size: 12px;
  color: var(--text);
}

.acl-policy-step-head p,
.config-history-detail-head h3 {
  margin: 3px 0 0;
}

.acl-policy-step {
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font: 11px var(--mono);
}

.acl-policy-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.acl-policy-mode-card {
  position: relative;
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  margin: 0 !important;
  padding: 10px;
  border: 1px solid var(--field-line);
  background: var(--field-bg);
  cursor: pointer;
}

.acl-policy-mode-card span {
  display: grid;
  gap: 3px;
}

.acl-policy-mode-card b {
  color: var(--text);
  font-size: 12px;
}

.acl-policy-mode-card small {
  color: var(--muted);
  line-height: 1.45;
}

.acl-policy-custom-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 10px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.acl-policy-switch {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
  white-space: nowrap;
}

.acl-policy-country-list.is-disabled {
  opacity: .55;
}

.acl-profile-rule-action-badge {
  display: flex;
  align-items: center;
  min-height: var(--ui-field-min-height);
  padding: 7px 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 11px;
  font-weight: 700;
}

.acl-policy-preview-head b {
  padding: 4px 7px;
  border: 1px solid var(--line);
  background: var(--panel);
  font: 700 10px var(--mono);
}

.acl-policy-preview-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.acl-policy-condition {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  max-width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 11px;
}

.acl-policy-condition.allow {
  border-left: 3px solid var(--green);
}

.acl-policy-condition.deny,
#panel-tls .renewal-entry[data-state=failed] {
  border-left: 3px solid var(--red);
}

.acl-policy-or {
  color: var(--muted);
  font: 700 10px var(--mono);
}

.acl-profile-card .entity-details {
  white-space: pre-line;
}

.listener-active-summary {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--panel2);
  display: grid;
  gap: 8px;
}

.listener-active-title {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .45px;
}

.listener-active-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.listener-active-protocol {
  font: 600 10px var(--mono);
  color: var(--accent);
}

.listener-active-feature {
  padding: 2px 5px;
  border: 1px solid var(--line);
  font: 600 9px var(--mono);
  color: var(--muted);
}

.location-header-editor .vh-header-rule-head>button {
  margin-left: auto;
  flex: 0 0 auto;
}

.listener-protocol-settings-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-block: 10px;
}

.acl-profile-attached {
  margin-block: 6px;
}

.acl-profile-attached summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}

.stream-backend-pool {
  display: grid;
  gap: .8rem;
  min-width: 0;
}

.stream-backend-row {
  min-width: 0;
  border: 1px solid var(--line, #454d59);
  border-radius: var(--rp-radius-surface, .65rem);
  padding: .85rem;
}

.stream-backend-row>.quiet {
  margin-top: .6rem;
}

.stream-backend-status {
  display: grid;
  gap: .4rem;
  padding: .75rem 0;
}

.stream-backend-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .85em;
}

.vh-enable-control.vh-enable-no-hint {
  grid-template-rows: auto;
}

.vh-enable-control.vh-enable-no-hint>:is(input, .vh-enable-state) {
  grid-row: 1;
}

.vhost-backend-protocol-badge {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--pill-line);
  border-radius: var(--rp-radius-control, 4px);
  background: var(--panel2);
  color: var(--muted);
  padding: 3px 7px;
  font: 10px var(--mono);
  overflow-wrap: anywhere;
  text-align: left;
}

html.app-loading,
.vhost-backend-protocol-badge:is(:hover, [aria-expanded=true]) {
  background: var(--bg);
}

.vhost-backend-protocol-badge[data-observed=true] {
  color: var(--green);
  border-color: var(--pill-live-line);
}

.vhost-detail.vhost-backend-trigger {
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  border-radius: 0;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 0;
  background: var(--bg);
}

.vhost-live-metric.vhost-backend-trigger {
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  border-radius: 0;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  background: transparent;
}

.dashboard-widget-toggle:hover,
.vhost-backend-trigger:is(:hover, [aria-expanded=true]),
.vhost-backend-popup-close:hover {
  background: var(--panel2);
}

.vhost-backend-popup {
  position: fixed;
  z-index: 1600;
  max-height: calc(min(360px, 100dvh - 24px));
  overflow: auto;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--rp-radius-surface, 0);
  box-shadow: 0 12px 35px var(--shadow-strong);
  color: var(--text);
  font-size: 11px;
}

.vhost-backend-popup-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}

.vhost-backend-popup h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.vhost-backend-popup-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font: 18px/1 var(--sans);
  border-radius: var(--rp-radius-control, 0);
}

.vhost-backend-popup-list {
  display: grid;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.vhost-backend-popup-row {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--rp-radius-surface, 0);
  background: var(--bg);
  min-width: 0;
}

.vhost-backend-popup-name {
  display: block;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
  font: 650 11px var(--mono);
}

.vhost-backend-popup-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 6px 10px;
}

.vhost-backend-popup-field>span:first-child {
  font-size: 9px;
  color: var(--muted);
}

.vhost-backend-popup-field>span:last-child {
  font: 10px/1.35 var(--mono);
  overflow-wrap: anywhere;
}

.vhost-backend-popup-hint {
  margin: 10px 0 0;
  line-height: 1.4;
}

.vh-acl-profile-picker>strong {
  display: block;
  margin-bottom: 8px;
}

.acl-picker-details {
  border: 1px solid var(--field-line);
  background: var(--field-bg);
  border-radius: var(--rp-radius-control, 8px);
  min-width: 0;
}

.acl-picker-details[open],
.acl-picker-option:has(input:focus-visible),
.acl-picker-option:hover {
  border-color: var(--border-hover);
}

.acl-picker-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  min-height: 21px;
}

.acl-picker-heading {
  flex: 1 1 auto;
  font-weight: 600;
  min-width: 0;
}

.acl-picker-counter {
  color: var(--accent);
  border: 1px solid var(--pill-line);
  border-radius: var(--rp-radius-control, 12px);
  padding: 2px 7px;
  font: 11px var(--mono);
  margin-left: auto;
}

.acl-picker-dropdown {
  padding: 10px;
  border-top: 1px solid var(--line);
}

.acl-picker-search,
.docker-agent-grid .acl-picker-search {
  width: 100%;
  box-sizing: border-box;
  min-height: 34px;
  height: 34px;
  margin: 0 0 9px;
}

.acl-picker-options {
  display: grid;
  max-height: 270px;
  overflow-y: auto;
  gap: 5px;
}

.acl-picker-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--rp-radius-control, 6px);
  background: var(--panel);
  padding: 9px 10px;
  cursor: pointer;
  min-width: 0;
}

.acl-picker-option:has(input:checked) {
  border-color: var(--pill-live-line);
  background: var(--nav-selected-bg);
}

.acl-picker-option input[type=checkbox] {
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  margin: 2px 0 0;
}

.acl-picker-option input:disabled {
  opacity: .35;
}

.acl-picker-option:has(input:disabled) {
  cursor: not-allowed;
  opacity: .6;
}

.acl-picker-option-content {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 5px;
}

.acl-picker-option-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  align-items: center;
}

.acl-picker-option-heading strong {
  font-size: 12px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.acl-picker-id {
  font: 10px var(--mono);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.acl-picker-policy {
  font: 10px var(--mono);
  line-height: 1.4;
  border-radius: var(--rp-radius-control, 12px);
  padding: 2px 7px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

.acl-picker-rule-preview {
  display: block;
  line-height: 1.45;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
}

.acl-picker-selected {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 0;
  min-width: 0;
}

.acl-picker-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 7px;
  padding: 2px 4px 2px 9px;
  border-radius: var(--rp-radius-control, 15px);
  border: 1px solid var(--pill-live-line);
  background: var(--nav-selected-bg);
  font-size: 11px;
}

.acl-picker-tag>span {
  overflow-wrap: anywhere;
  min-width: 0;
}

.acl-picker-tag .acl-picker-remove {
  border: none;
  border-radius: var(--rp-radius-control, 50%);
  background: transparent;
  color: var(--muted);
  min-width: 20px;
  height: 20px;
  font-size: 16px;
  padding: 0;
  cursor: pointer;
}

.acl-picker-tag .acl-picker-remove:hover {
  background: var(--panel2);
  color: var(--text);
}

.acl-picker-limit {
  display: block;
  padding-top: 7px;
}

.acl-stack-warning {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--notice-text);
}

.vh-setting-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  box-sizing: border-box;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--rp-radius-surface, 6px);
  background: var(--panel2);
}

.vh-setting-section>h3 {
  font-size: 12px;
  color: var(--text);
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.vh-setting-section>.vh-grid,
.stream-backend-section>.vh-grid,
.web-service-setting-section>.vh-grid {
  gap: 10px;
  min-width: 0;
}

.vh-setting-section>.vh-grid>.vh-wide {
  min-width: 0;
  margin-top: 0;
}

.vh-certificate-select-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.vh-certificate-select-row>.vh-field {
  flex: 1 1 240px;
}

.vh-certificate-select-row>button {
  flex: 0 0 auto;
  min-height: 32px;
}

.vh-setting-section>.vh-grid>.vh-check {
  align-self: center;
}

.vh-country-rates .vh-row>button,
.vh-ua-rates .vh-row>button {
  align-self: end;
  justify-self: start;
}

.editor-identity-section .check,
.web-service-setting-section .check {
  margin-top: 0 !important;
  align-self: center;
}

.editor-frontend-certificate {
  min-width: 0;
  gap: 10px;
  margin-bottom: 12px;
}

.editor-identity-section>.vh-grid {
  min-width: 0;
  gap: 10px;
}

.stream-backend-row>.vh-grid {
  gap: 12px;
}

.vh-form :is(input, select, textarea):disabled {
  opacity: .55;
  cursor: not-allowed;
}

.vh-override-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  min-width: 0;
}

.vh-override-fields>.vh-check,
.vh-override-fields>.vh-field {
  min-width: 0;
  width: 100%;
  margin: 0 !important;
}

.web-service-preset-toggles {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.web-service-preset-toggles>.check {
  margin: 0 !important;
  min-width: 0;
}