/* ==========================================================================
   Enterprise Theme — PUML-style pastels, Azure blue accent, clean cards
   Custom properties, color-mix(), fluid spacing, logical properties
   ========================================================================== */

.enterprise-theme {
  /* Theme-specific overrides */
  --clr-surface:    #faf9f8;
  --clr-surface-2:  #fff;
  --clr-text:       #323130;
  --clr-text-muted: #605e5c;
  --clr-accent:     #0078d4;
  --clr-accent-2:   #106ebe;
  --clr-border:     #d2d0ce;
  --nav-bg:         #fff;

  background: var(--clr-surface);
  color: var(--clr-text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  line-height: 1.6;
}

.enterprise-theme .site-nav {
  background: var(--clr-surface-2);
  border-block-end: 2px solid var(--clr-accent);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.08);
}
.enterprise-theme .site-name {
  font-family: 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--clr-accent);
}
.enterprise-theme .nav-link {
  font-family: 'Segoe UI', sans-serif;
  color: var(--clr-text-muted);
}
.enterprise-theme .nav-link:hover {
  color: var(--clr-accent);
  background: color-mix(in oklch, var(--clr-accent) 8%, transparent);
}
.enterprise-theme .nav-link.active { color: var(--clr-accent); font-weight: 600; }
.enterprise-theme .nav-toggle { color: var(--clr-text); }

.enterprise-theme .site-footer {
  background: var(--clr-surface-2);
  border-block-start: 1px solid var(--clr-border);
  color: #a19f9d;
}

/* --- Dashboard --- */
.dashboard-container { max-inline-size: 60rem; margin-inline: auto; }

.dashboard-title {
  font-size: var(--step-2); font-weight: 700;
  color: var(--clr-accent);
  border-block-end: 3px solid var(--clr-accent);
  padding-block-end: var(--space-xs);
  margin-block-end: var(--space-xs);
}
.dashboard-subtitle { color: var(--clr-text-muted); margin-block-end: var(--space-l); }

/* --- Metric Cards — Interactive --- */
.metric-card {
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform 250ms var(--spring),
              box-shadow 250ms ease;
}
.metric-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 24px color-mix(in oklch, var(--clr-accent) 18%, transparent);
}
.metric-card:active {
  transform: translateY(-1px) scale(0.98);
  transition-duration: 80ms;
}
/* Ripple effect */
.metric-card::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
    color-mix(in oklch, var(--clr-accent) 12%, transparent) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 500ms ease;
}
.metric-card:active::after { opacity: 1; transition-duration: 0ms; }
.metric-value {
  transition: transform 300ms var(--spring);
}
.metric-card:hover .metric-value {
  transform: scale(1.12);
}

/* --- Pipeline Flow --- */
.pipeline-flow {
  display: flex; align-items: center; gap: var(--space-2xs);
  overflow-x: auto; padding-block: var(--space-m); flex-wrap: wrap;
  justify-content: center;
}
.flow-arrow {
  color: var(--clr-accent); font-size: var(--step-2); font-weight: 700;
  transition: transform var(--transition-smooth);
  animation: arrow-pulse 2s ease-in-out infinite;
}
@keyframes arrow-pulse {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(3px); }
}

.stage-card {
  background: var(--clr-surface-2); border-radius: var(--radius-m);
  padding: var(--space-s) var(--space-m);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1); min-inline-size: 120px;
  cursor: pointer; position: relative;
  transition: transform 300ms var(--spring),
              box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}
.stage-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px color-mix(in oklch, var(--clr-accent) 15%, transparent);
}
.stage-card:active {
  transform: translateY(-2px) scale(0.97);
  transition-duration: 80ms;
}
.stage-card.active {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--clr-accent) 20%, transparent);
  animation: stage-glow 1.5s ease-in-out infinite alternate;
}
@keyframes stage-glow {
  from { box-shadow: 0 4px 12px color-mix(in oklch, var(--clr-accent) 20%, transparent); }
  to   { box-shadow: 0 4px 20px color-mix(in oklch, var(--clr-accent) 35%, transparent); }
}
.stage-card .stage-detail {
  max-block-size: 0; overflow: hidden; opacity: 0;
  transition: max-block-size 400ms ease, opacity var(--transition-smooth), margin var(--transition-smooth);
  font-size: var(--step--2); color: var(--clr-text-muted); margin-block-start: 0;
}
.stage-card.expanded .stage-detail {
  max-block-size: 200px; opacity: 1; margin-block-start: var(--space-xs);
}
.stage-header { display: flex; align-items: center; gap: var(--space-2xs); }
.stage-icon {
  font-size: var(--step-1);
  transition: transform var(--transition-smooth);
}
.stage-card:hover .stage-icon { transform: scale(1.25) rotate(-5deg); }
.stage-label { font-weight: 600; font-size: var(--step--1); color: var(--clr-text); }
.stage-desc { font-size: var(--step--2); color: var(--clr-text-muted); margin-block-start: var(--space-2xs); }

/* --- Tables --- */
.log-table {
  inline-size: 100%; border-collapse: collapse; font-size: var(--step--1);
  margin-block: var(--space-xs);
}
.log-table th {
  background: var(--clr-accent); color: #fff; padding: var(--space-xs) var(--space-s);
  text-align: start; font-weight: 600;
}
.log-table td {
  padding: var(--space-xs) var(--space-s); border-block-end: 1px solid #edebe9;
  transition: background var(--transition-snappy);
}
.log-table tr:nth-child(even) { background: #f8f8f8; }
.log-table tbody tr {
  cursor: pointer;
  transition: transform var(--transition-snappy), background var(--transition-snappy);
}
.log-table tbody tr:hover {
  background: color-mix(in oklch, var(--clr-accent) 8%, transparent);
  transform: translateX(4px);
}
.log-table tbody tr:active {
  background: color-mix(in oklch, var(--clr-accent) 16%, transparent);
  transform: translateX(2px);
}
.log-table tbody tr.row-selected {
  background: color-mix(in oklch, var(--clr-accent) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--clr-accent);
}
.resource-name { font-family: 'Consolas', 'Courier New', monospace; font-size: var(--step--2); }

/* --- Effect Badges --- */
.effect-badge {
  display: inline-block; padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-pill);
  color: #fff; font-size: var(--step--2); font-weight: 600; text-transform: uppercase;
  cursor: pointer;
  transition: transform 200ms var(--spring), box-shadow var(--transition-snappy);
}
.effect-badge:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
}
.effect-badge:active { transform: scale(0.95); }

/* --- Policy Dashboard --- */
.policy-row {
  display: grid; grid-template-columns: 1fr auto auto 120px auto;
  align-items: center; gap: var(--space-s); padding: var(--space-xs) var(--space-s);
  border-block-end: 1px solid #edebe9; border-radius: var(--radius-m);
  cursor: pointer;
  transition: background var(--transition-snappy), transform var(--transition-snappy), box-shadow var(--transition-snappy);
}
.policy-row:hover {
  background: color-mix(in oklch, var(--clr-accent) 5%, var(--clr-surface));
  transform: translateX(4px);
  box-shadow: -3px 0 0 var(--clr-accent);
}
.policy-row:active {
  background: color-mix(in oklch, var(--clr-accent) 10%, var(--clr-surface));
  transform: translateX(2px);
}
.policy-row.policy-expanded {
  background: color-mix(in oklch, var(--clr-accent) 8%, transparent);
  box-shadow: -3px 0 0 var(--clr-accent);
}
.policy-name { font-weight: 500; }
.policy-scope { font-size: var(--step--2); color: var(--clr-text-muted); }
.policy-pct {
  font-size: var(--step--1); font-weight: 600;
  transition: transform 300ms var(--spring);
}
.policy-row:hover .policy-pct { transform: scale(1.15); }
.compliance-bar {
  block-size: 8px; background: #edebe9; border-radius: var(--radius-s); overflow: hidden;
  transition: block-size var(--transition-smooth);
}
.policy-row:hover .compliance-bar { block-size: 12px; }
.compliance-fill {
  block-size: 100%; border-radius: var(--radius-s);
  transition: inline-size 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: bar-shimmer 2s ease-in-out infinite;
  background-size: 200% 100%;
}
@keyframes bar-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.filter-bar { display: flex; gap: var(--space-xs); margin-block: var(--space-m); flex-wrap: wrap; }
.filter-btn {
  padding: var(--space-2xs) var(--space-s); border-radius: var(--radius-pill);
  background: #f3f2f1; color: var(--clr-text); font-size: var(--step--2);
  border: 1px solid var(--clr-border); cursor: pointer;
  transition: all 250ms var(--spring);
}
.filter-btn.active, .filter-btn:hover {
  background: var(--clr-accent); color: #fff; border-color: var(--clr-accent);
  transform: scale(1.08);
}
.filter-btn:active {
  transform: scale(0.95);
  transition-duration: 80ms;
}

/* --- What-If / Naming / KQL Panels --- */
.whatif-panel, .naming-panel, .kql-panel {
  background: var(--clr-surface-2); border-radius: var(--radius-m); padding: var(--space-m);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1); margin-block: var(--space-m);
  transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
}
.whatif-panel:hover, .naming-panel:hover, .kql-panel:hover {
  box-shadow: 0 4px 16px color-mix(in oklch, var(--clr-accent) 12%, transparent);
  transform: translateY(-2px);
}
.whatif-title, .naming-title, .kql-title {
  font-size: var(--step-0); font-weight: 600; color: var(--clr-accent-2);
  margin-block-end: var(--space-s);
  border-inline-start: 4px solid var(--clr-accent); padding-inline-start: var(--space-s);
  transition: padding-inline-start var(--transition-smooth);
}
.whatif-panel:hover .whatif-title,
.naming-panel:hover .naming-title,
.kql-panel:hover .kql-title { padding-inline-start: var(--space-m); }
.kql-code {
  background: #1e1e1e; color: #d4d4d4; padding: var(--space-m);
  border-radius: var(--radius-m); font-family: 'Consolas', 'Courier New', monospace;
  font-size: var(--step--2); overflow-x: auto; white-space: pre;
  cursor: pointer;
  transition: box-shadow var(--transition-smooth);
}
.kql-code:hover {
  box-shadow: inset 0 0 0 1px var(--clr-accent);
}

/* --- Log Stream --- */
.log-stream { margin-block: var(--space-m); }
.log-title { font-size: var(--step-0); font-weight: 600; color: var(--clr-accent-2); margin-block-end: var(--space-xs); }
.stream-body {
  background: #1e1e1e; border-radius: var(--radius-m); padding: var(--space-s);
  max-block-size: 300px; overflow-y: auto; font-family: 'Consolas', monospace;
  font-size: var(--step--2);
}
.log-line {
  display: flex; gap: var(--space-s); padding: var(--space-3xs) var(--space-2xs); color: #d4d4d4;
  border-radius: 3px; cursor: pointer;
  transition: background var(--transition-snappy), transform var(--transition-snappy);
}
.log-line:hover {
  background: rgb(255 255 255 / 0.06);
  transform: translateX(4px);
}
.log-line:active { background: color-mix(in oklch, var(--clr-accent) 15%, transparent); }
.log-line.log-selected {
  background: color-mix(in oklch, var(--clr-accent) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--clr-accent);
}
.log-line.log-new { animation: log-fade-in 500ms ease-out; }
.log-ts { color: #6a9955; min-inline-size: 90px; }
.log-level { min-inline-size: 45px; font-weight: 700; }
.log-info .log-level { color: #569cd6; }
.log-warn .log-level { color: #ce9178; }
.log-error .log-level { color: #f44747; }
.log-error:hover { background: rgb(244 71 71 / 0.1); }
.log-warn:hover { background: rgb(206 145 120 / 0.1); }
.log-app { color: #9cdcfe; min-inline-size: 110px; }
.log-msg { color: #d4d4d4; }

@keyframes log-fade-in {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --- Agent Cards --- */
.agent-card {
  display: flex; gap: var(--space-s); padding: var(--space-s); margin-block-end: var(--space-xs);
  background: #f8f8f8; border-radius: var(--radius-m); align-items: flex-start;
  cursor: pointer; border: 1px solid transparent;
  transition: transform 250ms var(--spring),
              box-shadow 250ms ease, border-color 250ms ease, background 250ms ease;
}
.agent-card:hover {
  transform: translateY(-3px) translateX(4px);
  box-shadow: 0 6px 16px color-mix(in oklch, var(--clr-accent) 12%, transparent);
  border-color: var(--clr-accent); background: var(--clr-surface-2);
}
.agent-card:active {
  transform: translateY(-1px) scale(0.98);
  transition-duration: 80ms;
}
.agent-icon {
  font-size: var(--step-2);
  transition: transform 300ms var(--spring);
}
.agent-card:hover .agent-icon { transform: scale(1.3) rotate(-8deg); }
.agent-name { font-weight: 600; color: var(--clr-text); }
.agent-desc { font-size: var(--step--1); color: var(--clr-text-muted); }

/* --- Tab bar delight --- */
.tab-btn {
  transition: all 200ms var(--spring);
}
.tab-btn:hover { transform: translateY(-2px); }
.tab-btn:active {
  transform: translateY(0) scale(0.96);
  transition-duration: 60ms;
}
.tab-btn.active { box-shadow: 0 3px 0 var(--clr-accent); }
.tab-body { animation: tab-slide-in var(--transition-smooth); }
@keyframes tab-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Toast notification --- */
.click-toast {
  position: fixed; inset-block-end: var(--space-xl); inset-inline-start: 50%;
  translate: -50% 0;
  background: var(--clr-accent); color: #fff;
  padding: var(--space-xs) var(--space-l);
  border-radius: var(--radius-pill);
  font-size: var(--step--1); font-weight: 500;
  box-shadow: 0 4px 16px color-mix(in oklch, var(--clr-accent) 30%, transparent);
  animation: toast-in 300ms var(--spring),
             toast-out 300ms ease 2s forwards;
  z-index: 1000; pointer-events: none;
}
@keyframes toast-in {
  from { opacity: 0; translate: -50% 20px; scale: 0.8; }
  to   { opacity: 1; translate: -50% 0; scale: 1; }
}
@keyframes toast-out {
  to { opacity: 0; translate: -50% -10px; }
}

/* --- Action btn enterprise override --- */
.enterprise-theme .action-btn {
  background: var(--clr-surface-2); border-color: var(--clr-border); color: var(--clr-text);
  transition: all 250ms var(--spring);
}
.enterprise-theme .action-btn:hover {
  background: color-mix(in oklch, var(--clr-accent) 8%, white);
  border-color: var(--clr-accent); color: var(--clr-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--clr-accent) 15%, transparent);
}
.enterprise-theme .action-btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 60ms;
}

/* --- Responsive — logical properties --- */
@media (max-width: 768px) {
  .policy-row { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .pipeline-flow { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); }
  .stage-card { inline-size: 100%; }
  .adr-browser { flex-direction: column; }
  .adr-list { max-inline-size: 100%; }
  .c4-systems-row { grid-template-columns: 1fr; }
  .c4-containers-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   C4 Model — Interactive architecture diagrams
   ========================================================================== */
.c4-panel { margin-block: var(--space-m); }

.c4-level-title {
  font-size: var(--step-1); font-weight: 700; color: var(--clr-accent);
  margin-block-end: var(--space-2xs);
}
.c4-level-desc {
  font-size: var(--step--1); color: var(--clr-text-muted); font-style: italic;
  margin-block-end: var(--space-l);
}

.c4-actors-row {
  display: flex; gap: var(--space-m); justify-content: center;
  margin-block-end: var(--space-xl); flex-wrap: wrap;
}
.c4-actor {
  text-align: center; padding: var(--space-s) var(--space-m); min-inline-size: 140px;
  background: color-mix(in oklch, var(--clr-accent) 8%, transparent);
  border: 2px dashed var(--clr-accent); border-radius: var(--radius-m);
}
.c4-actor-icon { font-size: var(--step-2); margin-block-end: var(--space-2xs); }
.c4-actor-label { font-weight: 600; font-size: var(--step--1); color: var(--clr-accent); }
.c4-actor-desc { font-size: var(--step--2); color: var(--clr-text-muted); margin-block-start: var(--space-3xs); }

.c4-systems-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--space-m);
}
.c4-system {
  background: var(--clr-surface-2); border-radius: var(--radius-m); padding: var(--space-m);
  border-inline-start: 4px solid var(--clr-accent); cursor: pointer;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
  transition: transform var(--transition-snappy), box-shadow var(--transition-snappy);
}
.c4-system:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--clr-accent) 20%, transparent);
}
.c4-system-label { font-weight: 700; font-size: var(--step-0); margin-block-end: var(--space-2xs); }
.c4-system-desc { font-size: var(--step--2); color: var(--clr-text-muted); margin-block-end: var(--space-xs); }
.c4-drill-hint { font-size: var(--step--2); color: var(--clr-accent); font-weight: 500; }

.c4-back-btn {
  background: #f3f2f1; border: 1px solid var(--clr-border); border-radius: var(--radius-m);
  padding: var(--space-2xs) var(--space-s); font-size: var(--step--1); color: var(--clr-accent);
  cursor: pointer; margin-block-end: var(--space-m);
  transition: background var(--transition-snappy);
}
.c4-back-btn:hover { background: color-mix(in oklch, var(--clr-accent) 8%, transparent); }

.c4-containers-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--space-s);
}
.c4-container {
  background: var(--clr-surface-2); border-radius: var(--radius-m); padding: var(--space-s);
  border: 1px solid #edebe9; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}
.c4-container-label { font-weight: 600; font-size: var(--step--1); color: var(--clr-text); }
.c4-container-tech {
  font-size: var(--step--2); color: var(--clr-accent); font-family: 'Consolas', monospace;
  margin-block: var(--space-3xs);
}
.c4-container-desc { font-size: var(--step--2); color: var(--clr-text-muted); }

/* ==========================================================================
   ADR Browser — Architecture Decision Records
   ========================================================================== */
.adr-browser {
  display: flex; gap: var(--space-m); min-block-size: 400px;
}
.adr-list {
  flex: 0 0 320px; max-inline-size: 320px; overflow-y: auto;
}
.adr-list-heading {
  font-size: var(--step-0); font-weight: 700; color: var(--clr-accent);
  margin-block-end: var(--space-2xs);
}
.adr-fowler-quote {
  font-size: var(--step--2); color: var(--clr-text-muted); font-style: italic;
  margin-block-end: var(--space-m); padding-inline-start: var(--space-xs);
  border-inline-start: 3px solid var(--clr-accent);
}

.adr-list-item {
  padding: var(--space-xs) var(--space-s); border-radius: var(--radius-m); cursor: pointer;
  border: 1px solid transparent; margin-block-end: var(--space-2xs);
  transition: background var(--transition-snappy), border-color var(--transition-snappy);
}
.adr-list-item:hover { background: #f3f2f1; }
.adr-list-item.selected {
  background: color-mix(in oklch, var(--clr-accent) 8%, transparent);
  border-color: var(--clr-accent);
}
.adr-item-header { display: flex; align-items: center; gap: var(--space-xs); margin-block-end: var(--space-3xs); }
.adr-id { font-family: 'Consolas', monospace; font-size: var(--step--2); color: var(--clr-text-muted); font-weight: 600; }
.adr-item-title { font-size: var(--step--1); font-weight: 500; color: var(--clr-text); }

.adr-status {
  display: inline-block; padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-pill);
  font-size: var(--step--2); font-weight: 600; text-transform: uppercase;
}
.adr-status-accepted { background: #dff6dd; color: #107c10; }
.adr-status-proposed { background: #fff4ce; color: #797600; }
.adr-status-deprecated { background: #fed9cc; color: #d13438; }
.adr-status-default { background: #f3f2f1; color: var(--clr-text-muted); }

.adr-detail-panel { flex: 1; min-inline-size: 0; }

.adr-detail {
  background: var(--clr-surface-2); border-radius: var(--radius-m); padding: var(--space-l);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}
.adr-detail-header {
  display: flex; align-items: center; gap: var(--space-s);
  margin-block-end: var(--space-s); flex-wrap: wrap;
}
.adr-id-large { font-family: 'Consolas', monospace; font-size: var(--step-0); font-weight: 700; color: var(--clr-accent); }
.adr-date { font-size: var(--step--2); color: #a19f9d; }

.adr-detail-title {
  font-size: var(--step-1); font-weight: 700; color: var(--clr-text);
  margin-block-end: var(--space-m); padding-block-end: var(--space-xs);
  border-block-end: 2px solid #edebe9;
}
.adr-section-heading {
  font-size: var(--step-0); font-weight: 700; color: var(--clr-accent);
  margin-block: var(--space-s) var(--space-2xs);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.adr-section-body { font-size: var(--step--1); color: var(--clr-text); line-height: 1.6; }

.adr-consequences {
  list-style: none; padding: 0; margin-block: var(--space-2xs);
}
.adr-consequences li {
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-l); font-size: var(--step--1);
  position: relative; color: var(--clr-text);
}
.adr-consequences li::before {
  content: '→'; position: absolute; inset-inline-start: 0;
  color: var(--clr-accent); font-weight: 700;
}

.adr-placeholder {
  display: grid; place-content: center;
  block-size: 100%; min-block-size: 300px; text-align: center;
  color: #a19f9d;
}
.adr-placeholder-text { font-size: var(--step-0); margin-block-end: var(--space-m); }
.adr-placeholder-quote {
  font-size: var(--step--1); font-style: italic; max-inline-size: 400px;
  color: var(--clr-text-muted); padding: var(--space-s);
  border-inline-start: 3px solid var(--clr-accent);
}