.deployment-screen {
  color: #e9eef5;
  font-size: 12px;
}

.deployment-toolbar,
.deployment-section-head,
.deployment-command-band,
.deployment-toolbar-actions,
.deployment-dialog-actions {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.deployment-toolbar h3,
.deployment-section-head h4 {
  font-size: 16px;
  margin: 0;
}

.deployment-toolbar-actions,
.deployment-dialog-actions {
  gap: 8px;
}

.deployment-health {
  border-left: 3px solid #718096;
  color: #aeb8c6;
  min-width: 68px;
  padding-left: 8px;
}

.deployment-health[data-state="healthy"] { border-color: #36c98f; color: #8ae5bd; }
.deployment-health[data-state="unavailable"] { border-color: #f26d6d; color: #ffaaaa; }

.deployment-info {
  height: 30px;
  padding: 0;
  width: 30px;
}

.deployment-file-button {
  align-items: center;
  background: #2b64d8;
  border: 1px solid #4a7ce2;
  cursor: pointer;
  display: inline-flex;
  height: 30px;
  padding: 0 12px;
}

.deployment-message {
  border-bottom: 1px solid #344050;
  color: #aeb8c6;
  min-height: 34px;
  padding: 10px 0 8px;
}

.deployment-message[data-kind="success"] { color: #8ae5bd; }
.deployment-message[data-kind="error"] { color: #ffaaaa; }
.deployment-message[data-kind="warning"] { color: #ffd37a; }

.deployment-summary {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 12px 0;
}

.deployment-summary-item {
  background: #19212c;
  border-top: 2px solid #3f5269;
  min-width: 0;
  padding: 10px;
}

.deployment-summary-item span { color: #8794a5; display: block; font-size: 10px; }
.deployment-summary-item strong { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.deployment-command-band {
  background: #151d27;
  border: 1px solid #344050;
  padding: 10px;
}

.deployment-command-fields { display: flex; gap: 12px; }
.deployment-command-fields label,
.deployment-dialog label { color: #aeb8c6; display: grid; gap: 5px; font-size: 10px; }
.deployment-command-fields input { width: 280px; }
.deployment-command-fields select { width: 110px; }

.deployment-layout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.75fr);
  margin-top: 12px;
  min-height: 460px;
}

.deployment-list-region,
.deployment-detail-region {
  border: 1px solid #344050;
  min-width: 0;
  padding: 12px;
}

.deployment-section-head { border-bottom: 1px solid #344050; padding-bottom: 9px; }
.deployment-section-head h4 { font-size: 14px; }
.deployment-table-wrap { max-height: 390px; overflow: auto; }
.deployment-table { border-collapse: collapse; table-layout: fixed; width: 100%; }
.deployment-table th,
.deployment-table td { border-bottom: 1px solid #2c3745; padding: 9px 7px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deployment-table th { color: #8794a5; font-size: 10px; position: sticky; top: 0; background: #111923; }
.deployment-table tr[data-approval-id] { cursor: pointer; }
.deployment-table tr[data-approval-id]:hover,
.deployment-table tr.selected { background: #21314a; }

.deployment-empty { color: #8794a5; padding: 24px 8px; text-align: center; }
.deployment-detail-grid { display: grid; gap: 0; grid-template-columns: 42% 58%; margin-top: 10px; }
.deployment-detail-grid dt,
.deployment-detail-grid dd { border-bottom: 1px solid #2c3745; margin: 0; padding: 7px 4px; overflow-wrap: anywhere; }
.deployment-detail-grid dt { color: #8794a5; }
.deployment-assets { margin-top: 12px; }
.deployment-asset { border-left: 3px solid #3f6fb5; margin-top: 7px; padding: 6px 9px; }
.deployment-asset code { color: #9cb9e7; display: block; font-size: 9px; overflow-wrap: anywhere; }

.deployment-dialog {
  background: #151d27;
  border: 1px solid #52657d;
  border-radius: 4px;
  color: #e9eef5;
  min-width: 390px;
  padding: 16px;
}
.deployment-dialog::backdrop { background: rgb(4 8 13 / 72%); }
.deployment-dialog form { display: grid; gap: 14px; }

@media (max-width: 1200px) {
  .deployment-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deployment-layout { grid-template-columns: 1fr; }
}