/* IntentChain Admin Portal — App Styles */

/* ── Shell Layout ─────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ──────────────────────────────────────────── */
.sidebar {
  width: 240px;
  min-height: 100vh;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transition: transform var(--transition-base);
}

[data-theme="light"] .sidebar {
  box-shadow: var(--shadow-sm);
}

.sidebar__brand {
  padding: var(--space-lg) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}

.sidebar__logo {
  width: 28px;
  height: 28px;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-text);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
}

.sidebar__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.sidebar__nav {
  flex: 1;
  padding: var(--space-md) 0;
  overflow-y: auto;
}

.sidebar__section-label {
  padding: var(--space-md) var(--space-lg) var(--space-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  margin: 1px var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
}

.sidebar__link:hover {
  color: var(--color-text);
  background: var(--color-border-subtle);
}

.sidebar__link--active {
  color: var(--color-text);
  background: var(--color-accent-subtle);
}

.sidebar__link--active:hover {
  background: var(--color-accent-subtle);
}

.sidebar__icon {
  width: 18px;
  height: 18px;
  opacity: 0.7;
  flex-shrink: 0;
}

.sidebar__link--active .sidebar__icon {
  opacity: 1;
}

.sidebar__footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.sidebar__user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sidebar__user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

.sidebar__status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

.sidebar__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  flex-shrink: 0;
}

.sidebar__dot--error {
  background: var(--color-danger);
}

/* ── Main Content ─────────────────────────────────────── */
.main {
  flex: 1;
  margin-left: 240px;
  min-height: 100vh;
  background: var(--color-bg);
  overflow-x: hidden;
}

.main__header {
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 50;
}

.main__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.main__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.main__content {
  padding: var(--space-xl);
}

/* ── Mobile hamburger ─────────────────────────────────── */
.hamburger {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.hamburger:hover {
  background: var(--color-surface);
}

.sidebar__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
}

/* ── Stats Grid ───────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-accent);
  opacity: 0.6;
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

[data-theme="light"] .stat-card {
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .stat-card:hover {
  box-shadow: var(--shadow-lg);
}

.stat-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.stat-card__value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.stat-card__sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* ── Tables ───────────────────────────────────────────── */
.data-table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
}

.data-table th {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.data-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  vertical-align: top;
}

.data-table tr:hover td {
  background: var(--color-surface);
}

.data-table tbody tr {
  transition: background var(--transition-base);
  position: relative;
}

.data-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.data-table--clickable tbody tr {
  cursor: pointer;
}

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

.data-table__row--clickable {
  cursor: pointer;
}
.data-table__row--clickable:hover td {
  background: var(--color-bg-inset);
}

/* ── App Badges ───────────────────────────────────────── */
.badge--allow, .badge--approved, .badge--active {
  background: var(--color-success-subtle);
  color: var(--color-success);
}

.badge--block, .badge--rejected, .badge--denied {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

.badge--require_approval, .badge--pending {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}

.badge--expired, .badge--inactive {
  background: var(--color-border-subtle);
  color: var(--color-text-muted);
}

.badge--info {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

/* ── Form Elements ────────────────────────────────────── */
.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.form-label--optional {
  font-weight: 400;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
  outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.form-input--error,
.form-textarea--error {
  border-color: var(--color-danger);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.checkbox-group {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: var(--color-bg);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
}

.checkbox-label:hover {
  background: var(--color-bg-hover);
}

.checkbox-label input[type="checkbox"] {
  accent-color: var(--color-accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.checkbox-section-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding: var(--space-xs) var(--space-sm);
  margin-top: var(--space-xs);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ── Settings page cards ──────────────────────────────── */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}
@media (max-width: 900px) {
  .settings-grid { grid-template-columns: 1fr; }
}
.settings-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.settings-card--readonly {
  background: var(--color-surface-raised);
}
.settings-card__header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border-subtle);
}
.settings-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-xs);
}
.settings-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Error Banner ─────────────────────────────────────── */
.error-banner {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-danger-subtle);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-lg);
}

/* ── Toggle (form/JSON) ───────────────────────────────── */
.toggle-group {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.toggle-btn {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toggle-btn--active {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

/* ── Cards Container ──────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.panel__header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.panel__body {
  padding: var(--space-lg);
}

.panel__body--flush {
  padding: 0;
}

/* ── Response Panel ───────────────────────────────────── */
.response-panel {
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.response-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.response-panel__status {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.response-panel__body {
  padding: var(--space-md);
  overflow-x: auto;
}

.response-panel__body pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Pagination ───────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0;
  font-size: var(--font-size-sm);
}

.pagination__info {
  color: var(--color-text-muted);
}

.pagination__controls {
  display: flex;
  gap: var(--space-xs);
}

.pagination__btn {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-bg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pagination__btn:hover:not(:disabled) {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

.pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Filter Bar ───────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  align-items: end;
}

.filter-bar .form-group {
  margin-bottom: 0;
}

.filter-bar .form-input,
.filter-bar .form-select {
  min-width: 140px;
}

/* ── Detail Panel (sliding) ───────────────────────────── */
.detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.detail-overlay--open {
  opacity: 1;
  visibility: visible;
}

.detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 90vw;
  height: 100vh;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  z-index: 201;
  transform: translateX(100%);
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.detail-overlay--open .detail-panel {
  transform: translateX(0);
}

.detail-panel__header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 1;
}

.detail-panel__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-muted);
}

.detail-panel__close:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.detail-panel__body {
  flex: 1;
  padding: var(--space-lg);
}

.detail-panel__section {
  margin-bottom: var(--space-xl);
}

.detail-panel__section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border-subtle);
}

.detail-count {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xs);
  opacity: 0.6;
}

/* ── Credential detail card (key-value pairs in a card) ──── */
.detail-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.detail-kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) 0;
}
.detail-kv + .detail-kv {
  border-top: 1px solid var(--color-border-subtle);
}
.detail-kv__key {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: capitalize;
}
.detail-kv__val {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

/* ── ID chip badges (compact UUID badges with copy) ──────── */
.id-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.id-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-sm);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.id-chip:hover {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ── Rule conditions visual display ──────────────────────── */
.rule-visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.rule-condition {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}
.rule-condition__field {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
}
.rule-condition__op {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
}
.rule-condition__value {
  font-family: var(--font-mono);
  color: var(--color-warning);
}
.rule-effect {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}
.rule-effect--deny {
  background: var(--color-danger-subtle, rgba(239, 68, 68, 0.1));
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.rule-effect--allow {
  background: var(--color-success-subtle, rgba(34, 197, 94, 0.1));
  color: var(--color-success);
  border: 1px solid var(--color-success);
}
.rule-view-toggle {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.rule-view-toggle button {
  padding: 2px var(--space-sm);
  font-size: var(--font-size-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.rule-view-toggle button.active {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.detail-panel__actions {
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-sm);
}

/* ── Detail key-value list ────────────────────────────── */
.kv-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-lg);
  font-size: var(--font-size-sm);
}

.kv-list dt {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.kv-list dd {
  color: var(--color-text);
  word-break: break-all;
}

/* ── Empty State ──────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-4xl) var(--space-xl);
  color: var(--color-text-muted);
}

.empty-state__icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-md);
  opacity: 0.3;
}

.empty-state__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xs);
}

.empty-state__desc {
  font-size: var(--font-size-sm);
}

/* ── Loading Spinner ──────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-3xl);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ── Toast / Notification ─────────────────────────────── */
.toast-container {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.toast {
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.3s ease;
  max-width: 400px;
}

.toast--success {
  background: var(--color-success);
  color: #fff;
}

.toast--error {
  background: var(--color-danger);
  color: #fff;
}

.toast--info {
  background: var(--color-accent);
  color: #fff;
}

@keyframes toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Settings ─────────────────────────────────────────── */
.settings-section {
  max-width: 560px;
  margin-bottom: var(--space-2xl);
}

.settings-section__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-md);
}

.settings-section__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

/* ── Policy Rule Card ─────────────────────────────────── */
.rule-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}

.rule-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.rule-card__name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
}

.rule-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.rule-card__conditions {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ── Modal ────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in 0.15s ease;
}

[data-theme="light"] .modal-overlay {
  background: rgba(0, 0, 0, 0.25);
}

.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: 480px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal__header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.modal__body {
  padding: var(--space-lg);
}

.modal__footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Inline Confirm ───────────────────────────────────── */
.inline-confirm {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

/* ── Copy Field ───────────────────────────────────────── */
.copy-field {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  word-break: break-all;
}

.copy-field__value {
  flex: 1;
  user-select: all;
}

/* ── Get Started Guide ────────────────────────────────── */
.get-started {
  max-width: 560px;
  margin: 0 auto;
}

.get-started__progress {
  max-width: 560px;
  margin: 0 auto var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.get-started__progress-bar {
  flex: 1;
  height: 4px;
  background: var(--color-border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.get-started__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gradient-accent);
  border-radius: var(--radius-full);
  transition: width 0.6s ease;
}

.get-started__progress-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.get-started__step {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-sm);
  background: var(--color-surface);
  transition: all var(--transition-base);
  position: relative;
  animation: step-slide-in 0.4s ease both;
}

.get-started__step:nth-child(1) { animation-delay: 0s; }
.get-started__step:nth-child(2) { animation-delay: 0.08s; }
.get-started__step:nth-child(3) { animation-delay: 0.16s; }
.get-started__step:nth-child(4) { animation-delay: 0.24s; }

@keyframes step-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.get-started__step:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.get-started__step--done {
  border-color: var(--color-success-subtle);
}

.get-started__step--done .get-started__number {
  background: var(--color-success-subtle);
  color: var(--color-success);
  border-color: var(--color-success);
}

.get-started__step--done .get-started__number span {
  display: none;
}

.get-started__step--done .get-started__number::after {
  content: '✓';
  font-size: var(--font-size-sm);
}

.get-started__step--done .get-started__title {
  text-decoration: line-through;
  opacity: 0.6;
}

.get-started__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.get-started__number {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.get-started__text {
  flex: 1;
}

.get-started__title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: 2px;
}

.get-started__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ── Charts ───────────────────────────────────────────── */
.chart-svg {
  display: block;
}

.chart-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  border: 1px dashed var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

/* Line chart */
.chart-line {
  will-change: stroke-dashoffset;
}

.chart-area {
  opacity: 1;
}

.chart-dot {
  transition: r 0.15s ease;
}

.chart-hitbox {
  cursor: pointer;
}

/* Donut chart */
.chart-donut-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.chart-donut-svg {
  flex-shrink: 0;
}

.donut-bg {
  opacity: 0.3;
}

.donut-segment {
  cursor: pointer;
  transition: opacity 0.2s ease, stroke-width 0.2s ease;
}

/* Legend */
.chart-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 140px;
}

.chart-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.chart-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.chart-legend__label {
  flex: 1;
}

.chart-legend__value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Tooltip */
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  opacity: 0;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
  white-space: nowrap;
}

.chart-tooltip--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.chart-tooltip__val {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
}

.chart-tooltip__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Chart container needs relative positioning for tooltip */
[id*="chart"],
.dashboard-chart {
  position: relative;
  contain: content;
}

/* ── Login / Auth page ────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

.auth-page__bg {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-glow);
  pointer-events: none;
}

.auth-page__theme-toggle {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 2;
}

.auth-card {
  width: 420px;
  max-width: 90vw;
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

.auth-card__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.auth-card__logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--gradient-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  box-shadow: var(--shadow-accent);
}

.auth-card__logo svg {
  width: 24px;
  height: 24px;
}

.auth-card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
  position: relative;
}

.auth-tab {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast);
}

.auth-tab--active {
  color: var(--color-text);
  border-bottom-color: transparent;
}

.auth-tab__indicator {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--gradient-accent);
  border-radius: var(--radius-full);
  transition: left 0.3s ease, width 0.3s ease;
}

/* Form crossfade */
.auth-forms {
  position: relative;
}

.auth-form {
  display: none;
  animation: auth-fade-in 0.3s ease;
}

.auth-form--active {
  display: block;
}

@keyframes auth-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Password strength meter */
.password-strength {
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.password-strength__bar {
  flex: 1;
  height: 3px;
  background: var(--color-border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.password-strength__fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-full);
  background: var(--color-border);
  transition: width 0.3s ease, background 0.3s ease;
}

.password-strength__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Error banner animation */
.error-banner {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-danger-subtle);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.error-banner--animate {
  animation: error-slide 0.3s ease;
}

@keyframes error-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Button spinner */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: var(--space-xs);
}

/* ── Tabs (generic) ───────────────────────────────────── */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
}

.tab {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}

.tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar--open {
    transform: translateX(0);
  }
  .sidebar__overlay--open {
    display: block;
  }
  .main {
    margin-left: 0;
  }
  .hamburger {
    display: flex;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .detail-panel {
    width: 100vw;
    max-width: 100vw;
  }
}

/* ── Rule Builder ─────────────────────────────────────── */
.rule-builder {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-md);
}

.rb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.rb-header__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.rb-mode-toggle {
  display: flex;
  gap: 2px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.rb-mode-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.rb-mode-btn:hover {
  color: var(--color-text);
}

.rb-mode-btn--active {
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.rb-conditions {
  margin-bottom: var(--space-md);
}

.rb-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr auto;
  gap: var(--space-sm);
  align-items: start;
  padding: var(--space-sm) 0;
}

.rb-row--labels {
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border-subtle);
}

.rb-row--labels .rb-cell {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
}

.rb-cell {
  min-width: 0;
}

.rb-cell .form-select,
.rb-cell .form-input {
  font-size: var(--font-size-sm);
}

.rb-and-label {
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  letter-spacing: var(--letter-spacing-wide);
  padding: var(--space-xs) 0;
}

.rb-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: 2px;
}

.rb-remove-btn:hover {
  color: var(--color-danger);
  background: var(--color-danger-subtle);
}

.rb-add-btn {
  margin-bottom: var(--space-md);
}

.rb-add-btn svg {
  margin-right: 2px;
}

.rb-empty {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.rb-presets {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.rb-presets__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.rb-preset-btn {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.rb-preset-btn:hover {
  background: var(--color-accent);
  color: #fff;
}

.rb-json-wrap {
  margin-bottom: var(--space-sm);
}

.rb-json-wrap .form-textarea {
  min-height: 150px;
}

@media (max-width: 640px) {
  .rb-row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
  .rb-row--labels {
    display: none;
  }
  .rb-cell--actions {
    justify-self: end;
  }
}

/* ══════════════════════════════════════════════════════════
   Dashboard Charts
   ══════════════════════════════════════════════════════════ */
.dashboard-charts {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.period-toggle {
  display: flex;
  gap: 2px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.period-btn {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.period-btn:hover {
  color: var(--color-text);
}

.period-btn--active {
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .period-btn--active {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.chart-empty {
  text-align: center;
  padding: var(--space-3xl);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.chart-dot {
  transition: r var(--transition-fast);
}

.chart-hitbox {
  cursor: pointer;
}

.chart-donut-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  justify-content: center;
}

.chart-donut-svg {
  flex-shrink: 0;
}

.donut-segment {
  transition: opacity var(--transition-fast);
}

.donut-segment:hover {
  opacity: 0.8;
}

.chart-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.chart-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
}

.chart-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.chart-legend__label {
  color: var(--color-text-secondary);
}

.chart-legend__value {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin-left: auto;
}

@media (max-width: 1024px) {
  .dashboard-charts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .chart-donut-wrap {
    flex-direction: column;
  }
}

/* ══════════════════════════════════════════════════════════
   Dashboard — Setup Banner
   ══════════════════════════════════════════════════════════ */
.setup-banner {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}

.setup-banner__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.setup-banner__info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
}

.setup-banner__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.setup-banner__bar {
  flex: 1;
  max-width: 200px;
  height: 6px;
  background: var(--color-bg);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.setup-banner__fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.setup-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.setup-banner__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  padding-top: var(--space-md);
  margin-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.setup-step {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.setup-step--done {
  color: var(--color-success);
}

.setup-step__icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setup-step:not(.setup-step--done) .setup-step__icon {
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
}

/* ══════════════════════════════════════════════════════════
   Dashboard — Environment Banner
   ══════════════════════════════════════════════════════════ */
.env-banner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-sm);
}

.env-banner__org {
  font-weight: var(--font-weight-semibold);
}

.env-banner__sep {
  color: var(--color-text-muted);
}

.env-banner__status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
}

.env-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════
   Dashboard — Enhanced Stat Cards
   ══════════════════════════════════════════════════════════ */
.stat-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}

.stat-card__sparkline {
  flex-shrink: 0;
}

.stat-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-xs);
}

.stat-card__trend {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.trend--up {
  color: var(--color-success);
  background: var(--color-success-subtle, rgba(34, 197, 94, 0.1));
}

.trend--down {
  color: var(--color-danger);
  background: var(--color-danger-subtle, rgba(239, 68, 68, 0.1));
}

/* ══════════════════════════════════════════════════════════
   Dashboard — Quick Actions
   ══════════════════════════════════════════════════════════ */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.quick-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.quick-action:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-subtle, rgba(99, 102, 241, 0.08));
}

.quick-action svg {
  opacity: 0.7;
}

.quick-action:hover svg {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   Dashboard — Split Layout
   ══════════════════════════════════════════════════════════ */
.dash-split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.dash-split__main {
  min-width: 0;
}

.dash-split__side {
  min-width: 0;
}

@media (max-width: 1024px) {
  .dash-split {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════
   Dashboard — Entity Inventory Grid
   ══════════════════════════════════════════════════════════ */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.inventory-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-lg) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: all var(--transition-fast);
  cursor: pointer;
  text-align: center;
}

.inventory-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
}

[data-theme="light"] .inventory-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.inventory-card__icon {
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
  opacity: 0.8;
}

.inventory-card:hover .inventory-card__icon {
  opacity: 1;
}

.inventory-card__count {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  margin-bottom: 4px;
}

.inventory-card__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 2px;
}

.inventory-card__sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .inventory-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════
   Dashboard — Security Posture Panel
   ══════════════════════════════════════════════════════════ */
.security-panel .panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.security-panel .panel__title svg {
  color: var(--color-accent);
}

.security-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
  transition: color var(--transition-fast);
  flex-wrap: wrap;
}

.security-row:last-child {
  border-bottom: none;
}

a.security-row:hover {
  color: var(--color-accent);
}

.security-row__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.security-row__dot--success { background: var(--color-success); }
.security-row__dot--warning { background: var(--color-warning); }
.security-row__dot--danger  { background: var(--color-danger); }

.security-row__label {
  flex: 1;
}

.security-row__value {
  font-weight: var(--font-weight-semibold);
  text-align: right;
  min-width: 40px;
}

.security-bar {
  width: 100%;
  height: 4px;
  background: var(--color-bg);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 2px;
}

.security-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s ease;
}

.security-bar__fill--success { background: var(--color-success); }
.security-bar__fill--warning { background: var(--color-warning); }
.security-bar__fill--danger  { background: var(--color-danger); }

/* ══════════════════════════════════════════════════════════
   Dashboard — Activity Feed
   ══════════════════════════════════════════════════════════ */
.activity-feed {
  padding: var(--space-sm) var(--space-md);
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}

.activity-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.activity-item__desc {
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.activity-item__time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.activity-item__time svg {
  opacity: 0.5;
}

/* ══════════════════════════════════════════════════════════
   Dashboard — Approval Queue Widget
   ══════════════════════════════════════════════════════════ */
.approval-widget__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 120px;
}

.approval-count {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-warning);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.approval-ok {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-success-subtle, rgba(34, 197, 94, 0.1));
  color: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-xs);
}

.approval-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ══════════════════════════════════════════════════════════
   Dashboard — Panel Link
   ══════════════════════════════════════════════════════════ */
.panel__link {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity var(--transition-fast);
}

.panel__link:hover {
  opacity: 0.8;
}

/* ══════════════════════════════════════════════════════════
   Searchable Select
   ══════════════════════════════════════════════════════════ */
.search-select {
  position: relative;
}

.search-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.search-select__display {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-select__placeholder {
  color: var(--color-text-muted);
}

.search-select__arrow {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: var(--space-sm);
}

.search-select__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 60;
  display: none;
  max-height: 280px;
  overflow: hidden;
  flex-direction: column;
}

.search-select__dropdown--open {
  display: flex;
}

.search-select__search {
  margin: var(--space-sm);
  width: calc(100% - var(--space-lg));
  font-size: var(--font-size-sm);
}

.search-select__list {
  overflow-y: auto;
  max-height: 220px;
  padding-bottom: var(--space-xs);
}

.search-select__option {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.search-select__option:hover {
  background: var(--color-accent-subtle);
  color: var(--color-text);
}

.search-select__option--selected {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

.search-select__option--disabled {
  pointer-events: none;
  opacity: 0.55;
  cursor: default;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}

/* ══════════════════════════════════════════════════════════
   Multi-Select
   ══════════════════════════════════════════════════════════ */
.multi-select {
  position: relative;
}

.multi-select__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  min-height: 38px;
  align-items: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: text;
  transition: border-color var(--transition-fast);
}

.multi-select__tags:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.multi-select__tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px var(--space-sm);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.multi-select__tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  font-size: var(--font-size-sm);
  line-height: 1;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}

.multi-select__tag-remove:hover {
  background: var(--color-accent);
  color: #fff;
}

.multi-select__input {
  flex: 1;
  min-width: 80px;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  padding: var(--space-xs) 0;
}

.multi-select__input::placeholder {
  color: var(--color-text-muted);
}

.multi-select__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 60;
  display: none;
  max-height: 220px;
  overflow-y: auto;
}

.multi-select__dropdown--open {
  display: block;
}

.multi-select__option {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.multi-select__option:hover {
  background: var(--color-accent-subtle);
  color: var(--color-text);
}

.multi-select__option--selected {
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

.multi-select__option--selected::before {
  content: "✓ ";
}

/* ══════════════════════════════════════════════════════════
   Form Validation
   ══════════════════════════════════════════════════════════ */
.form-field-error {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  margin-top: 2px;
}

.form-label--required::after {
  content: " *";
  color: var(--color-danger);
}

/* ══════════════════════════════════════════════════════════
   Tooltip (CSS-only via data-tooltip attribute)
   ══════════════════════════════════════════════════════════ */
[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
  max-width: 280px;
  white-space: normal;
  box-shadow: var(--shadow-md);
  z-index: 70;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  pointer-events: none;
  text-transform: none;
  letter-spacing: normal;
  line-height: var(--line-height-normal);
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* ══════════════════════════════════════════════════════════
   Request Timeline
   ══════════════════════════════════════════════════════════ */
.timeline {
  position: relative;
  padding-left: 32px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}

.timeline__step {
  position: relative;
  padding-bottom: var(--space-xl);
}

.timeline__step:last-child {
  padding-bottom: 0;
}

.timeline__dot {
  position: absolute;
  left: -32px;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  z-index: 1;
  border: 2px solid var(--color-bg);
}

.timeline__dot--success {
  background: var(--color-success);
  color: #fff;
}

.timeline__dot--danger {
  background: var(--color-danger);
  color: #fff;
}

.timeline__dot--skipped {
  background: var(--color-border);
  color: var(--color-text-muted);
}

.timeline__dot--pending {
  background: var(--color-accent);
  color: #fff;
}

.timeline__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.timeline__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.timeline__time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.timeline__body {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.timeline__detail {
  margin-top: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
}

.timeline__detail summary {
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

/* ══════════════════════════════════════════════════════════
   Wizard (Multi-Step)
   ══════════════════════════════════════════════════════════ */
.wizard-steps {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
  padding: var(--space-md) 0;
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.wizard-step--active {
  color: var(--color-accent);
}

.wizard-step--done {
  color: var(--color-success);
}

.wizard-step__number {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.wizard-step--active .wizard-step__number {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.wizard-step--done .wizard-step__number {
  border-color: var(--color-success);
  background: var(--color-success-subtle);
  color: var(--color-success);
}

.wizard-connector {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  min-width: 20px;
}

.wizard-connector--done {
  background: var(--color-success);
}

.wizard-body {
  min-height: 300px;
}

.wizard-actions {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-xl);
}

/* ══════════════════════════════════════════════════════════
   File Drop Zone
   ══════════════════════════════════════════════════════════ */
.file-drop {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-base);
}

.file-drop:hover,
.file-drop--active {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.file-drop__icon {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-sm);
  opacity: 0.5;
}

.file-drop__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xs);
}

.file-drop__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.file-drop__input {
  display: none;
}

/* ══════════════════════════════════════════════════════════
   Operation Card (Mirror Review)
   ══════════════════════════════════════════════════════════ */
.operation-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  transition: border-color var(--transition-fast);
}

.operation-card:hover {
  border-color: var(--color-text-muted);
}

.operation-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.operation-card__method {
  display: inline-flex;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.operation-card__method--get { background: var(--color-success-subtle); color: var(--color-success); }
.operation-card__method--post { background: var(--color-accent-subtle); color: var(--color-accent); }
.operation-card__method--put { background: var(--color-warning-subtle); color: var(--color-warning); }
.operation-card__method--patch { background: var(--color-warning-subtle); color: var(--color-warning); }
.operation-card__method--delete { background: var(--color-danger-subtle); color: var(--color-danger); }

.operation-card__path {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.operation-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .operation-card__body {
    grid-template-columns: 1fr;
  }
}

/* AI badge for LLM suggestions */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-sm);
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

[data-theme="light"] .ai-badge {
  background: rgba(147, 51, 234, 0.08);
  color: #7c3aed;
}

.ai-badge__icon {
  width: 12px;
  height: 12px;
}

.ai-badge__accept {
  padding: 0 4px;
  margin-left: 2px;
  font-size: 10px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  color: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-badge__accept:hover {
  background: #a855f7;
  color: #fff;
  border-color: #a855f7;
}

/* ══════════════════════════════════════════════════════════
   Governance Toggle
   ══════════════════════════════════════════════════════════ */
.governance-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.governance-toggle__btn {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.governance-toggle__btn--active {
  background: var(--color-accent);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════
   Filter Tabs (mirrors, etc.)
   ══════════════════════════════════════════════════════════ */
.filter-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}
.filter-tab {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter-tab:hover {
  background: var(--color-bg-inset);
  color: var(--color-text);
}
.filter-tab--active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.filter-tab__count {
  font-size: var(--font-size-xs);
  opacity: 0.7;
  margin-left: 2px;
}

/* ══════════════════════════════════════════════════════════
   Simulation
   ══════════════════════════════════════════════════════════ */
.simulation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  min-height: 400px;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .simulation-layout {
    grid-template-columns: 1fr;
  }
}

.simulation-config {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.simulation-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
}

.result-badge--allow {
  background: var(--color-success-subtle);
  color: var(--color-success);
  border: 2px solid var(--color-success);
}

.result-badge--deny {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
  border: 2px solid var(--color-danger);
}

.rule-match-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.rule-match-table th {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.rule-match-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
}

.payload-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-md);
}

.payload-tab {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.payload-tab--active {
  color: var(--color-text);
  background: var(--color-bg);
  border-color: var(--color-accent);
  border-bottom: 2px solid var(--color-bg);
}

/* ══════════════════════════════════════════════════════════
   Beta Badge
   ══════════════════════════════════════════════════════════ */
.sidebar-badge {
  display: inline-flex;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  margin-left: auto;
}

/* ══════════════════════════════════════════════════════════
   Mirror Status Badges
   ══════════════════════════════════════════════════════════ */
.badge--draft {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.badge--pending_confirmation {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}

.badge--auth_only {
  background: var(--color-success-subtle);
  color: var(--color-success);
}

.badge--policy_required {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}

.badge--muted {
  background: var(--color-bg-inset);
  color: var(--color-text-muted);
}

.badge--danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

/* ══════════════════════════════════════════════════════════
   Version History
   ══════════════════════════════════════════════════════════ */
.version-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.version-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.version-item--active {
  border-color: var(--color-success);
  background: var(--color-success-subtle);
}

/* ══════════════════════════════════════════════════════════
   Progress Bar
   ══════════════════════════════════════════════════════════ */
.progress-bar-wrap {
  margin-bottom: var(--space-md);
}

.progress-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.progress-bar {
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

/* ══════════════════════════════════════════════════════
   Pipeline Visualization
   ══════════════════════════════════════════════════════ */

.pipeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: hidden;
  padding: var(--space-lg) var(--space-sm);
  justify-content: center;
  background: var(--color-bg-inset);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
  flex-wrap: nowrap;
}

.pipeline__segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  padding: 0 2px;
}

.pipeline__node {
  width: clamp(24px, 4.5vw, 36px);
  height: clamp(24px, 4.5vw, 36px);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border);
  background: var(--color-bg-surface);
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
  position: relative;
  z-index: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  flex-shrink: 0;
}

.pipeline__node--success {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 14%, var(--color-bg-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 15%, transparent), 0 1px 3px rgba(0,0,0,.08);
}
.pipeline__node--failure {
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 14%, var(--color-bg-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 15%, transparent), 0 1px 3px rgba(0,0,0,.08);
}
.pipeline__node--skipped { border-color: var(--color-text-muted); border-style: dashed; opacity: 0.45; }
.pipeline__node--pending { border-color: var(--color-border); opacity: 0.3; }

.pipeline__icon { font-size: clamp(10px, 1.8vw, 14px); }
.pipeline__label {
  font-size: clamp(8px, 1.2vw, 10px);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
  text-align: center;
  max-width: 100%;
  line-height: 1.25;
  word-wrap: break-word;
  white-space: normal;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pipeline__connector {
  flex: 0 1 28px;
  min-width: 8px;
  height: 2.5px;
  background: var(--color-border);
  align-self: flex-start;
  margin-top: calc(clamp(24px, 4.5vw, 36px) / 2 - 1px);
  z-index: 0;
  transition: background 0.35s cubic-bezier(.4,0,.2,1);
  border-radius: 2px;
}

.pipeline__connector--success { background: var(--color-success); }
.pipeline__connector--failure { background: var(--color-danger); }
.pipeline__connector--skipped { background: var(--color-text-muted); border-top: 1px dashed var(--color-text-muted); height: 0; }

/* ══════════════════════════════════════════════════════
   Enhanced Timeline
   ══════════════════════════════════════════════════════ */

.timeline__connector {
  width: 2px;
  height: 32px;
  margin-left: -21px;
  transition: background 0.3s ease;
}

.timeline__connector--success { background: var(--color-success); }
.timeline__connector--danger { background: var(--color-danger); }
.timeline__connector--skipped { background: var(--color-text-muted); border-left: 1px dashed var(--color-text-muted); width: 0; margin-left: -21px; }

.timeline__elapsed {
  display: inline-block;
  font-size: 10px;
  color: var(--color-text-muted);
  margin-left: 42px;
  padding: 0 var(--space-xs);
  background: var(--color-bg-inset);
  border-radius: var(--radius-sm);
  line-height: 1.6;
}

.timeline__dot--skipped {
  border-style: dashed;
  opacity: 0.5;
}

.timeline__detail-body {
  padding: var(--space-sm);
  background: var(--color-bg-inset);
  border-radius: var(--radius-sm);
  margin-top: var(--space-xs);
  font-size: var(--font-size-xs);
}

.timeline__kv {
  display: flex;
  gap: var(--space-sm);
  padding: 2px 0;
}

.timeline__kv-key {
  font-weight: 500;
  color: var(--color-text-muted);
  min-width: 100px;
  flex-shrink: 0;
}

.timeline__kv-val {
  word-break: break-all;
  font-family: var(--font-mono);
}

.timeline__step--animated {
  animation: timelineSlideIn 0.4s ease both;
}

@keyframes timelineSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════
   Lifecycle Page
   ══════════════════════════════════════════════════════ */

.lifecycle { max-width: 1100px; }

.lifecycle__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
}

.lifecycle__header-left { display: flex; align-items: center; gap: var(--space-sm); }
.lifecycle__header-right { display: flex; align-items: center; gap: var(--space-md); }

.lifecycle__request-id {
  font-size: var(--font-size-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg-inset);
  border-radius: var(--radius-sm);
}

.lifecycle__pipeline {
  padding: var(--space-md) 0;
  overflow-x: auto;
}

.lifecycle__decision {
  text-align: center;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--font-size-lg);
  margin: var(--space-lg) 0;
}

.lifecycle__decision--allow {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent);
}

.lifecycle__decision--deny {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
  border: 1px solid color-mix(in srgb, var(--color-danger) 25%, transparent);
}

.lifecycle__decision--error {
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 10%, transparent);
  color: var(--color-warning, #f59e0b);
  border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 25%, transparent);
}

.lifecycle__decision-reason {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 400;
  margin-top: var(--space-xs);
  opacity: 0.8;
}

.lifecycle__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.lifecycle__card { min-width: 0; }

.lifecycle__section-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.lifecycle__timeline {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-xl);
  margin-top: var(--space-md);
}

/* ── Timing Bars ──────────────────────────────────────── */

.timing-bar__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.timing-bar__label {
  font-size: 10px;
  color: var(--color-text-muted);
  min-width: 100px;
  text-align: right;
  flex-shrink: 0;
}

.timing-bar__track {
  flex: 1;
  height: 6px;
  background: var(--color-bg-inset);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.timing-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s ease;
}

.timing-bar__ms {
  font-size: 10px;
  color: var(--color-text-muted);
  min-width: 48px;
  font-family: var(--font-mono);
}

/* ══════════════════════════════════════════════════════
   Simulation Page
   ══════════════════════════════════════════════════════ */

.sim-mode-toggle {
  display: flex;
  gap: 2px;
  background: var(--color-bg-inset);
  border-radius: var(--radius-md);
  padding: 2px;
}

.sim-mode-btn {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.2s ease;
}

.sim-mode-btn--active {
  background: var(--color-bg-surface);
  color: var(--color-text);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}

.sim-live-warning {
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-md);
  color: var(--color-warning);
}

/* Simulation stages */

.sim-stages {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

.sim-stage {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
  animation: simStageIn 0.4s cubic-bezier(.4,0,.2,1) both;
  background: var(--color-bg-surface);
}
.sim-stage:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

.sim-stage--success { border-left: 3px solid var(--color-success); }
.sim-stage--failure { border-left: 3px solid var(--color-danger); background: color-mix(in srgb, var(--color-danger) 3%, var(--color-bg-surface)); }
.sim-stage--skipped { border-left: 3px dashed var(--color-text-muted); opacity: 0.5; }

@keyframes simStageIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.sim-stage__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sim-stage__icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--dot-color, var(--color-accent)) 14%, transparent);
  flex-shrink: 0;
  font-size: 13px;
}

.sim-stage__label { font-weight: 500; font-size: var(--font-size-sm); }
.sim-stage__status { margin-left: auto; }
.sim-stage__ms { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-mono); }

.sim-stage__detail {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}

.sim-stage__kv {
  font-size: var(--font-size-xs);
  display: flex;
  gap: var(--space-xs);
}

.sim-stage__kv-key {
  color: var(--color-text-muted);
}

.sim-result { padding: var(--space-sm) 0; }

.sim-stages-heading {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.sim-extra {
  margin-top: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
}

.sim-extra summary {
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

.sim-extra__body {
  padding-top: var(--space-sm);
  font-size: var(--font-size-xs);
}

/* ══════════════════════════════════════════════════════
   Rule Builder Enhancements
   ══════════════════════════════════════════════════════ */

.rb-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  margin-left: var(--space-xs);
  vertical-align: middle;
}

.rb-cell--drag {
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rb-drag-handle {
  cursor: grab;
  color: var(--color-text-muted);
  font-size: 16px;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.rb-drag-handle:hover { opacity: 1; }
.rb-row--dragging { opacity: 0.4; }
.rb-row--dragover { border-top: 2px solid var(--color-accent); }

.rb-json-preview {
  margin-top: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.rb-json-preview__toggle {
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.rb-json-preview__code {
  font-size: var(--font-size-xs);
  padding: var(--space-sm);
  background: var(--color-bg-inset);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  max-height: 150px;
  overflow: auto;
  margin: 0;
}