/* Owner: channel metrics, groups and routing. Extracted from global.css with original cascade order preserved. */
.channel-selected-field-index {
  align-items: center;
  background: var(--color-selected);
  border-radius: var(--radius-sm);
  color: white;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.channel-selected-field-order {
  display: flex;
  margin-left: auto;
}

.channel-selected-field-order button,
.channel-selected-field-controls > button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: var(--space-1);
}

.channel-selected-field-order button:disabled {
  cursor: default;
  opacity: 0.3;
}

.channel-selected-field-controls {
  align-items: center;
  display: flex;
  gap: var(--space-4);
}

.channel-selected-field-controls label {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: var(--space-2);
}

.channel-selected-field-controls > button {
  color: var(--color-danger);
  margin-left: auto;
}

.mms-channel-page .page-heading {
  align-items: center;
}

.mms-channel-filter {
  align-items: center;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(260px, 1fr) 180px 180px auto;
  padding: var(--space-5);
}

.mms-channel-list {
  overflow: hidden;
  padding: 0;
}

.mms-channel-list .ui-table-wrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.mms-channel-list .ui-table {
  min-width: 900px;
}

.mms-channel-list .ui-table th,
.mms-channel-list .ui-table td {
  padding: var(--space-4);
  vertical-align: middle;
}

.mms-channel-list .ui-table tbody tr:nth-child(even) {
  background: var(--color-surface-subtle);
}

.mms-channel-identity {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.mms-channel-identity span,
.mms-channel-identity small {
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mms-channel-identity small {
  font-size: var(--font-size-xs);
}

.mms-channel-carrier {
  align-items: flex-start;
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.mms-channel-quality {
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--space-3);
}

.mms-channel-metric {
  display: grid;
  gap: 3px;
}

.mms-channel-metric small {
  color: var(--color-text-muted);
}

.mms-channel-metric strong {
  color: var(--color-text-strong);
}

.mms-channel-metric--success strong {
  color: var(--color-success);
}

.mms-channel-metric--warning strong {
  color: #ea580c;
}

.mms-channel-metric--danger strong {
  color: var(--color-danger);
}

.mms-channel-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.mms-channel-modal-title h2,
.mms-channel-modal-title p {
  margin: 0;
}

.mms-channel-modal-title p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  margin-top: var(--space-2);
}

.mms-channel-form {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mms-channel-form__wide {
  grid-column: 1 / -1;
}

.sms-channel-group-page .page-heading {
  align-items: center;
}

.channel-group-filter {
  align-items: end;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
}

.channel-group-filter__actions {
  display: flex;
  gap: var(--space-3);
}

.channel-group-list {
  display: grid;
  gap: var(--space-5);
}

.channel-group-config-list {
  display: grid;
  gap: var(--space-3);
}

.channel-group-config-item {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(180px, 1.15fr) minmax(210px, 0.9fr) minmax(200px, 0.95fr) minmax(220px, 1.2fr) minmax(
      82px,
      auto
    );
  min-width: 0;
  padding: var(--space-4);
}

.channel-group-config-item__identity {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  min-width: 0;
}

.channel-group-config-item__icon {
  align-items: center;
  background: #eef5ff;
  border: 1px solid #cfe2ff;
  border-radius: var(--radius-sm);
  color: var(--color-selected);
  display: inline-flex;
  flex: 0 0 auto;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.channel-group-config-item__identity div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.channel-group-config-item__identity strong {
  color: var(--color-text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-group-config-item__identity span:last-child,
.channel-group-config-item__metrics span,
.channel-group-config-item__policy span,
.channel-group-config-item__channels span {
  color: var(--color-text-muted);
}

.channel-group-config-item__metrics {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.channel-group-config-item__metrics div {
  border-left: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-1);
  padding-left: var(--space-3);
}

.channel-group-config-item__metrics strong {
  color: var(--color-text-strong);
  font-size: var(--font-size-lg);
}

.channel-group-config-item__policy {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-width: 0;
}

.channel-group-config-item__policy span {
  align-items: center;
  display: inline-flex;
  gap: var(--space-1);
  white-space: nowrap;
}

.channel-group-config-item__channels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.channel-group-config-item__channels span {
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  max-width: 160px;
  overflow: hidden;
  padding: var(--space-1) var(--space-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-group-config-item__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
  justify-self: end;
  min-width: 82px;
}

.channel-group-config-item__actions button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--color-selected);
  cursor: pointer;
  display: inline-flex;
  font-weight: var(--font-weight-semibold);
  gap: var(--space-1);
  padding: 0;
}

.channel-group-config-item__actions button.is-danger {
  color: var(--color-danger);
}

.channel-group-form-page {
  min-width: 1040px;
}

.channel-group-form-section {
  display: grid;
  gap: var(--space-5);
}

.channel-group-form-section h2 {
  border-bottom: 1px solid var(--color-border);
  border-left: 5px solid var(--color-selected);
  margin: 0;
  padding: 0 0 var(--space-4) var(--space-3);
}

.channel-group-base-form {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 190px minmax(0, 1fr);
}

.channel-group-base-form > .ui-field,
.channel-group-retry-limit,
.channel-group-radio-row,
.channel-group-switch-row {
  grid-column: 2;
}

.channel-group-radio-row,
.channel-group-switch-row {
  align-items: center;
  display: flex;
  gap: var(--space-7);
  min-height: 42px;
}

.channel-group-radio-row > span,
.channel-group-switch-row > span {
  color: var(--color-text-strong);
  font-weight: var(--font-weight-semibold);
}

.channel-group-radio-row label {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.channel-group-switch-row button {
  background: #d1d5db;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  height: 30px;
  padding: 3px;
  transition: background 0.18s ease;
  width: 54px;
}

.channel-group-switch-row button i {
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  display: block;
  height: 24px;
  transition: transform 0.18s ease;
  width: 24px;
}

.channel-group-switch-row button.is-on {
  background: var(--color-selected);
}

.channel-group-switch-row button.is-on i {
  transform: translateX(24px);
}

.channel-group-row-actions {
  display: flex;
  gap: var(--space-4);
}

.channel-group-row-actions button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--color-selected);
  cursor: pointer;
  display: inline-flex;
  font-weight: var(--font-weight-semibold);
  gap: var(--space-1);
  padding: 0;
}

.channel-group-row-actions button.is-danger {
  color: var(--color-danger);
}

.channel-group-retry-limit {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 150px 150px minmax(220px, 1fr);
}

.channel-group-retry-limit > span {
  color: var(--color-text-strong);
  font-weight: var(--font-weight-semibold);
  grid-column: 1 / -1;
}

.channel-group-retry-limit small {
  align-self: center;
  color: var(--color-text-muted);
}

.channel-route-card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.channel-route-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  min-height: 188px;
  padding: var(--space-4);
}

.channel-route-card > div {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.channel-route-card strong {
  color: var(--color-text-strong);
  font-size: var(--font-size-lg);
}

.channel-route-card span,
.channel-route-card small {
  color: var(--color-text-muted);
}

.channel-route-card p {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  margin: 0;
  overflow-wrap: anywhere;
}