/*
 * Components: icons, cards, buttons, forms, tables, badges, alerts, data views, live regions, CLI hints.
 * Only var(--…) from tokens.css. A state is never colour alone: symbol + text + colour.
 */

/* ------------------------------------------------------------------ icons */

.icon {
  width: var(--pe-icon-size);
  height: var(--pe-icon-size);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-large {
  width: var(--pe-icon-size-lg);
  height: var(--pe-icon-size-lg);
}

/* ------------------------------------------------------------------ cards */

.card {
  margin-bottom: var(--spacing-3xl);
  padding: var(--spacing-3xl);
  background: var(--pe-surface-card);
  border: var(--pe-border-width) solid var(--color-border-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.card-title {
  font-size: var(--text-lg);
  line-height: var(--leading-md);
}

.subcard {
  padding-block: var(--spacing-xl);
  border-top: var(--pe-border-width) solid var(--color-border-secondary);
}

.subcard:first-child {
  border-top: 0;
  padding-top: 0;
}

/* ------------------------------------------------------------------ buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-height: var(--pe-control-height);
  padding: var(--spacing-sm) var(--spacing-xl);
  border: var(--pe-border-width) solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-sm);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--pe-duration-fast) var(--pe-easing-standard),
    border-color var(--pe-duration-fast) var(--pe-easing-standard);
}

.button:focus-visible {
  outline: var(--pe-focus-width) solid var(--color-border-brand);
  outline-offset: var(--pe-focus-offset);
  box-shadow: var(--pe-focus-shadow);
}

.button:disabled {
  cursor: not-allowed;
  background: var(--color-bg-disabled);
  color: var(--color-text-disabled);
  border-color: var(--color-border-secondary);
}

.button-small {
  min-height: var(--pe-control-height-sm);
  padding: var(--spacing-xs) var(--spacing-lg);
}

.button-primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  border-color: var(--button-primary-border);
}

.button-primary:hover {
  background: var(--button-primary-bg-hover);
  color: var(--button-primary-fg);
}

.button-secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-fg);
  border-color: var(--button-secondary-border);
  box-shadow: var(--shadow-xs);
}

.button-secondary:hover {
  background: var(--button-secondary-bg-hover);
  color: var(--button-secondary-fg);
}

.button-danger {
  background: var(--button-error-bg);
  color: var(--button-error-fg);
  border-color: var(--button-error-border);
}

.button-danger:hover {
  background: var(--button-error-bg-hover);
  color: var(--button-error-fg);
}

.button-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}

.button-ghost:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

/* ------------------------------------------------------------------ forms */

.form {
  margin: 0;
}

.inline-form {
  display: inline-flex;
  margin: 0;
}

.stack-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
}

.stack-form .field {
  width: 100%;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-width: var(--pe-field-max);
  margin-bottom: var(--spacing-xl);
}

.field label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.field-check {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
}

.field-check .field-help {
  flex-basis: 100%;
}

.field-inline {
  margin-bottom: 0;
}

.required {
  color: var(--color-text-error);
}

.input {
  width: 100%;
  min-height: var(--pe-control-height);
  padding: var(--spacing-sm) var(--spacing-lg);
  font: inherit;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--input-text);
  background: var(--input-bg);
  border: var(--pe-border-width) solid var(--input-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.input::placeholder {
  color: var(--input-placeholder);
}

.input:hover {
  border-color: var(--input-border-hover);
}

.input:focus,
.input:focus-visible {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-ring-focus);
}

.input:disabled,
.input[readonly] {
  background: var(--input-disabled-bg);
  color: var(--color-text-disabled);
}

.input.mono,
.textarea.mono {
  font-family: var(--font-family-mono);
  font-size: var(--text-sm);
}

.textarea {
  resize: vertical;
}

.check {
  width: var(--pe-icon-size);
  height: var(--pe-icon-size);
  accent-color: var(--button-primary-bg);
}

.field-invalid .input {
  border-color: var(--color-border-error);
}

.field-invalid .input:focus {
  box-shadow: var(--ring-error);
}

.field-help {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.field-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-error);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.language-switch {
  display: flex;
  gap: var(--spacing-md);
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-block: var(--spacing-xl);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-top: var(--pe-border-width) solid var(--color-border-secondary);
}

.disclosure > summary {
  cursor: pointer;
  color: var(--pe-link);
  font-size: var(--text-sm);
}

.disclosure[open] > summary {
  margin-bottom: var(--spacing-md);
}

/* ------------------------------------------------------------------ tables */

.table-wrap {
  overflow-x: auto;
  margin-bottom: var(--spacing-xl);
  border: var(--pe-border-width) solid var(--color-border-secondary);
  border-radius: var(--radius-md);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.table th,
.table td {
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: start;
  vertical-align: top;
  border-bottom: var(--pe-border-width) solid var(--color-border-secondary);
}

.table th {
  background: var(--color-bg-secondary);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover td {
  background: var(--color-bg-secondary);
}

.row-note td {
  background: var(--color-bg-secondary);
}

.actions-cell {
  white-space: nowrap;
}

.actions-cell .disclosure[open] {
  display: grid;
  justify-items: start;
  gap: var(--spacing-xs);
  min-width: var(--pe-tile-min);
  white-space: normal;
}

.actions-cell .disclosure .field {
  margin-bottom: var(--spacing-xs);
}

.pagination {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
}

/* ------------------------------------------------------------------ badges and status */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xxs) var(--spacing-md);
  border: var(--pe-border-width) solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-xs);
  white-space: nowrap;
}

.badge-gray {
  background: var(--badge-gray-bg);
  color: var(--badge-gray-fg);
  border-color: var(--badge-gray-border);
}

.badge-brand {
  background: var(--badge-brand-bg);
  color: var(--badge-brand-fg);
  border-color: var(--badge-brand-border);
}

.badge-success {
  background: var(--badge-success-bg);
  color: var(--badge-success-fg);
  border-color: var(--badge-success-border);
}

.badge-warning {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-fg);
  border-color: var(--badge-warning-border);
}

.badge-error {
  background: var(--badge-error-bg);
  color: var(--badge-error-fg);
  border-color: var(--badge-error-border);
}

.badge-status {
  background: var(--badge-gray-bg);
  color: var(--badge-gray-fg);
  border-color: var(--badge-gray-border);
}

.badge-status.status-ok {
  background: var(--badge-success-bg);
  color: var(--badge-success-fg);
  border-color: var(--badge-success-border);
}

.badge-status.status-degraded {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-fg);
  border-color: var(--badge-warning-border);
}

.badge-status.status-critical {
  background: var(--badge-error-bg);
  color: var(--badge-error-fg);
  border-color: var(--badge-error-border);
}

.badge-status.status-paused {
  background: var(--badge-brand-bg);
  color: var(--badge-brand-fg);
  border-color: var(--badge-brand-border);
}

.badge-status .icon {
  width: var(--leading-xs);
  height: var(--leading-xs);
}

.dot {
  display: inline-block;
  flex: none;
  width: var(--pe-dot-size);
  height: var(--pe-dot-size);
  border-radius: var(--radius-full);
  background: var(--pe-status-unknown);
}

.dot.status-ok {
  background: var(--pe-status-ok);
}

.dot.status-degraded {
  background: var(--pe-status-degraded);
}

.dot.status-critical {
  background: var(--pe-status-critical);
}

.dot.status-offline {
  background: var(--pe-status-offline);
}

.dot.status-paused {
  background: var(--pe-status-paused);
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-xl);
  background: var(--pe-surface-card);
  border: var(--pe-border-width) solid var(--color-border-secondary);
  border-inline-start: var(--spacing-xs) solid var(--pe-status-unknown);
  border-radius: var(--radius-md);
}

.stat-tile.status-ok {
  border-inline-start-color: var(--pe-status-ok);
}

.stat-tile.status-degraded {
  border-inline-start-color: var(--pe-status-degraded);
}

.stat-tile.status-critical {
  border-inline-start-color: var(--pe-status-critical);
}

.stat-tile.status-offline {
  border-inline-start-color: var(--pe-status-offline);
}

.stat-tile.status-paused {
  border-inline-start-color: var(--pe-status-paused);
}

.stat-label {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.stat-value {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-lg);
  font-weight: var(--font-weight-semibold);
}

.stat-detail,
.stat-facts {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.stat-facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.stat-facts dt {
  color: var(--color-text-tertiary);
}

.stat-facts dd {
  color: var(--color-text-secondary);
}

.sparkline {
  width: var(--pe-sparkline-width);
  height: var(--pe-sparkline-height);
}

.sparkline-line {
  fill: none;
  stroke: var(--color-fg-brand-primary);
  stroke-width: var(--pe-sparkline-stroke);
  vector-effect: non-scaling-stroke;
}

.meter {
  width: var(--pe-sparkline-width);
}

/* ------------------------------------------------------------------ alerts, banners, empty states */

.flash-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.alert,
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg) var(--spacing-xl);
  border: var(--pe-border-width) solid var(--badge-brand-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-brand-subtle);
  color: var(--color-text-primary);
}

.flash-list .alert {
  margin-bottom: 0;
}

.alert .icon,
.banner .icon {
  margin-top: var(--spacing-xxs);
  color: var(--color-fg-brand-primary);
}

.alert p,
.banner p {
  margin: 0;
}

.alert ul {
  margin: var(--spacing-xs) 0 0;
}

.alert-title {
  font-weight: var(--font-weight-semibold);
}

.alert-success {
  background: var(--color-bg-success-subtle);
  border-color: var(--badge-success-border);
}

.alert-success .icon {
  color: var(--color-fg-success-primary);
}

.alert-warning,
.banner-warning {
  background: var(--color-bg-warning-subtle);
  border-color: var(--badge-warning-border);
}

.alert-warning .icon,
.banner-warning .icon {
  color: var(--color-fg-warning-primary);
}

.alert-error {
  background: var(--color-bg-error-subtle);
  border-color: var(--badge-error-border);
}

.alert-error .icon {
  color: var(--color-fg-error-primary);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-4xl) var(--spacing-xl);
  color: var(--color-text-tertiary);
  text-align: center;
}

/* ------------------------------------------------------------------ data views */

.key-value {
  display: grid;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xl);
}

.key-value-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--spacing-lg);
  padding-block: var(--spacing-xs);
  border-bottom: var(--pe-border-width) solid var(--color-border-secondary);
}

.key-value dt {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

.code-block {
  max-height: var(--pe-scroll-max);
  overflow: auto;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  background: var(--pe-surface-code);
  border: var(--pe-border-width) solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
}

.secret-value code {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--text-lg);
  letter-spacing: var(--pe-letter-spacing-code);
  background: var(--pe-surface-code);
  border: var(--pe-border-width) dashed var(--color-border-brand);
  border-radius: var(--radius-md);
  user-select: all;
}

.diff {
  margin-bottom: var(--spacing-xl);
  border: var(--pe-border-width) solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.diff-line {
  display: flex;
  gap: var(--spacing-md);
  padding-inline: var(--spacing-md);
}

.diff-op {
  flex: none;
  width: var(--pe-icon-size);
  font-family: var(--font-family-mono);
  color: var(--color-text-tertiary);
}

.diff-add {
  background: var(--pe-diff-add-bg);
}

.diff-remove {
  background: var(--pe-diff-remove-bg);
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline-item {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-md);
  padding-block: var(--spacing-sm);
}

.timeline-title,
.timeline-meta {
  margin: 0;
}

.timeline-meta {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0 0 var(--spacing-md);
  padding: 0;
  font-size: var(--text-sm);
}

.tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0 0 var(--spacing-xl);
  padding: 0;
  border-bottom: var(--pe-border-width) solid var(--color-border-secondary);
}

.tab {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: var(--pe-focus-width) solid transparent;
}

.tab.active {
  color: var(--color-text-brand-primary);
  border-bottom-color: var(--color-border-brand);
  font-weight: var(--font-weight-semibold);
}

/* ------------------------------------------------------------------ live regions and CLI hints */

.live-region[aria-busy="true"] {
  opacity: 0.6;
  transition: opacity var(--pe-duration-normal) var(--pe-easing-standard);
}

.cli-hint {
  margin-bottom: var(--spacing-xl);
}

.cli-hint-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.cli-hint .code-block {
  margin-bottom: 0;
}

.error-page {
  max-width: var(--pe-measure);
}