/* El grid principal sense maxim d'amplada */
.md-grid {
  max-width: initial !important;
}

.md-main__inner.md-grid {
  max-width: initial !important;
}

.md-content, .md-main__inner, .md-header, .md-footer {
  margin: 0 !important;
  padding: 0 !important;
}

/* Estil per als blocs de codi */
.highlight {
    border-radius: 4px;
}

/* Estil per a les admonicions */
.admonition.danger {
    border-color: #dc3545;
}

.admonition.warning {
    border-color: #ffc107;
}

/* Tabs de contingut */
.tabbed-content {
    border-radius: 4px;
}

/* ===========================================
   Mermaid — centrat
   =========================================== */

.mermaid {
    display: flex;
    justify-content: center;
    overflow-x: auto;
}

.mermaid svg {
    display: block;
    max-width: 100%;
}

/* ===========================================
   Mermaid — correccio mode fosc
   =========================================== */

[data-md-color-scheme="slate"] .mermaid svg {
  background: transparent !important;
}

[data-md-color-scheme="slate"] .mermaid svg text,
[data-md-color-scheme="slate"] .mermaid svg tspan {
  fill: #ffffff !important;
}

[data-md-color-scheme="slate"] .mermaid svg rect:not([fill="none"]),
[data-md-color-scheme="slate"] .mermaid svg circle:not([fill="none"]),
[data-md-color-scheme="slate"] .mermaid svg ellipse:not([fill="none"]),
[data-md-color-scheme="slate"] .mermaid svg polygon:not([fill="none"]) {
  fill: #2d1b69 !important;
  stroke: #7c3aed !important;
}

/* Timeline Mermaid — seccions */
[data-md-color-scheme="slate"] g[class*="section"] path,
[data-md-color-scheme="slate"] g[class*="section"] rect,
[data-md-color-scheme="slate"] g[class*="section"] circle {
  fill: #1a1a3e !important;
  stroke: #7c3aed !important;
}

[data-md-color-scheme="slate"] g[class*="section"] text,
[data-md-color-scheme="slate"] g[class*="section"] tspan {
  fill: #e8e8ff !important;
}

[data-md-color-scheme="slate"] g[class*="section"] line {
  stroke: #7c3aed !important;
}

[data-md-color-scheme="slate"] .mermaid .lineWrapper line {
  stroke: #7c3aed !important;
}

[data-md-color-scheme="slate"] .mermaid .eventWrapper {
  filter: none !important;
}

/* ===========================================
   Workflow node cards (n8n visual)
   =========================================== */

.n8n-flow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 1rem;
  background: var(--md-code-bg-color);
  border-radius: 8px;
  margin: 1rem 0;
  justify-content: center;
}

.n8n-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.n8n-node-box {
  border: 2px solid #ef4444;
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  background: var(--md-default-bg-color);
  font-family: monospace;
  font-size: 0.82em;
  font-weight: 700;
  text-align: center;
  min-width: 90px;
  color: var(--md-default-fg-color);
}

.n8n-node-type {
  font-size: 0.68em;
  color: var(--md-default-fg-color--light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.n8n-arrow {
  font-size: 1.2rem;
  color: var(--md-default-fg-color--light);
  padding: 0 0.25rem;
}

.n8n-node-box.trigger { border-color: #ef4444; }
.n8n-node-box.logic   { border-color: #a855f7; }
.n8n-node-box.action  { border-color: #22c55e; }
.n8n-node-box.func    { border-color: #3b82f6; }