@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* WhatsApp Business Dark Palette */
  --wa-bg-deep: #0b141a;
  --wa-surface: #111b21;
  --wa-panel: #182229;
  --wa-panel-elevated: #202c33;
  --wa-border: #222d34;
  --wa-border-subtle: rgba(134, 150, 160, 0.15);
  
  --wa-green: #25D366;
  --wa-teal: #00a884;
  --wa-teal-dark: #128c7e;
  --wa-blue-tick: #53bdeb;
  --wa-amber: #f59e0b;
  --wa-rose: #ef4444;

  --wa-text-primary: #e9edef;
  --wa-text-secondary: #8696a0;
  --wa-text-muted: #667781;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --duration-fast: 140ms;
  --duration-ui: 200ms;
}

body {
  background-color: var(--wa-bg-deep);
  color: var(--wa-text-primary);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

code, pre, .font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--wa-bg-deep);
}
::-webkit-scrollbar-thumb {
  background: #2a3942;
  border-radius: 3px;
}

/* WhatsApp Surface Card */
.wa-card {
  background: var(--wa-surface);
  border: 1px solid var(--wa-border);
  border-radius: 16px;
  transition: border-color var(--duration-ui) var(--ease-out),
              box-shadow var(--duration-ui) var(--ease-out);
}
.wa-card:hover {
  border-color: rgba(37, 211, 102, 0.35);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.6);
}

/* Snappy Action Buttons */
.btn-wa {
  transition: transform var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
  will-change: transform;
}
.btn-wa:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .btn-wa:hover {
    transform: translateY(-1px);
  }
}

/* Badges */
.badge-wa {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.badge-green { background: rgba(37, 211, 102, 0.12); color: #25D366; border: 1px solid rgba(37, 211, 102, 0.3); }
.badge-teal { background: rgba(0, 168, 132, 0.12); color: #00a884; border: 1px solid rgba(0, 168, 132, 0.3); }
.badge-blue { background: rgba(83, 189, 235, 0.12); color: #53bdeb; border: 1px solid rgba(83, 189, 235, 0.3); }
.badge-amber { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-slate { background: rgba(134, 150, 160, 0.1); color: #8696a0; border: 1px solid rgba(134, 150, 160, 0.2); }

/* ============================================================== */
/* MERMAID DIAGRAM READABILITY & ZOOM ENGINE                      */
/* ============================================================== */
.mermaid {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.mermaid svg {
  max-width: none !important;
  display: block !important;
  margin: 0 auto !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Node labels (Flowcharts & Architecture) */
.mermaid .node text,
.mermaid .node tspan,
.mermaid .label text,
.mermaid span.nodeLabel {
  font-size: 15px !important;
  font-weight: 700 !important;
  fill: #e9edef !important;
  color: #e9edef !important;
}

.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon {
  stroke: #25D366 !important;
  stroke-width: 2px !important;
  fill: #182229 !important;
  rx: 10px !important;
  ry: 10px !important;
}

/* Edge connecting lines and labels */
.mermaid .flowchart-link,
.mermaid .edgePath path {
  stroke: #25D366 !important;
  stroke-width: 2px !important;
}

.mermaid .edgeLabel,
.mermaid .edgeLabel text,
.mermaid .edgeLabel tspan {
  font-size: 13px !important;
  font-weight: 600 !important;
  fill: #25D366 !important;
  background-color: #111b21 !important;
}

/* Subgraph Clusters */
.mermaid .cluster rect {
  fill: #111b21 !important;
  stroke: #2a3942 !important;
  stroke-width: 1.5px !important;
  stroke-dasharray: 4 !important;
  rx: 14px !important;
  ry: 14px !important;
}
.mermaid .cluster-label span,
.mermaid .cluster text {
  font-size: 14px !important;
  font-weight: 800 !important;
  fill: #25D366 !important;
}

/* Sequence Diagrams */
.mermaid .actor text,
.mermaid text.actor > tspan {
  font-size: 15px !important;
  font-weight: 700 !important;
  fill: #e9edef !important;
}
.mermaid .actor {
  stroke: #25D366 !important;
  fill: #182229 !important;
  stroke-width: 2px !important;
}
.mermaid .messageLine0,
.mermaid .messageLine1 {
  stroke: #25D366 !important;
  stroke-width: 2px !important;
}
.mermaid .messageText {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  fill: #e9edef !important;
}
.mermaid .labelText {
  font-size: 13px !important;
  fill: #e9edef !important;
}

/* Entity-Relationship (ER) Diagrams */
.mermaid .entityBox {
  fill: #182229 !important;
  stroke: #25D366 !important;
  stroke-width: 2px !important;
}
.mermaid text.entityLabel {
  font-size: 16px !important;
  font-weight: 800 !important;
  fill: #25D366 !important;
}
.mermaid .attributeBoxOdd {
  fill: #182229 !important;
  stroke: #222d34 !important;
}
.mermaid .attributeBoxEven {
  fill: #111b21 !important;
  stroke: #222d34 !important;
}
.mermaid .relationshipLine {
  stroke: #25D366 !important;
  stroke-width: 2px !important;
}

/* Gantt Charts - Force crisp non-stretched aspect ratio */
.mermaid svg.gantt,
.mermaid svg[id*="gantt"],
#gantt-diagram svg {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  display: block !important;
}

.mermaid .sectionTitle {
  font-size: 14px !important;
  font-weight: bold !important;
  fill: #25D366 !important;
}
.mermaid .taskText,
.mermaid .taskTextOutsideRight {
  font-size: 13px !important;
  font-weight: 600 !important;
  fill: #e9edef !important;
}
.mermaid .grid .tick text {
  font-size: 11px !important;
  fill: #8696a0 !important;
}
.mermaid .grid .tick line {
  stroke: #222d34 !important;
}
.mermaid .task {
  stroke-width: 0 !important;
  rx: 6px !important;
  ry: 6px !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}