/* El grid principal sense màxim 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;
}

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

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

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

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

/* ===========================================
   Mermaid — correcció 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: #003d33 !important;
  stroke: #00897b !important;
}

/* ===========================================
   XML/HTML Code blocks — syntax highlighting helpers
   =========================================== */

.xml-tag    { color: #00695c; font-weight: 700; }
.xml-attr   { color: #0277bd; }
.xml-value  { color: #558b2f; }
.xml-comment{ color: #78909c; font-style: italic; }

/* ===========================================
   DOM tree visualization
   =========================================== */

.dom-tree {
  font-family: monospace;
  font-size: 0.85em;
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  overflow-x: auto;
}

.dom-node {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0;
  color: var(--md-default-fg-color);
}

.dom-node-elem {
  color: #00695c;
  font-weight: 700;
}

.dom-node-text {
  color: var(--md-default-fg-color--light);
  font-style: italic;
}

.dom-node-attr {
  color: #0277bd;
  font-size: 0.9em;
}

/* ===========================================
   Timeline Mermaid — correcció mode fosc
   =========================================== */

[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: #003d33 !important;
  stroke: #00897b !important;
}

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

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

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

[data-md-color-scheme="slate"] .mermaid svg > g > .lineWrapper line {
  stroke: #4db6ac !important;
}

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

/* ===========================================
   Comparison table (XML vs JSON, DTD vs XSD, etc.)
   =========================================== */

.cmp-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.87em;
  margin: 1rem 0;
}

.cmp-table th {
  background: #00695c;
  color: #fff;
  padding: 0.45rem 0.9rem;
  text-align: left;
  font-weight: 700;
  border: 1px solid #00897b;
}

.cmp-table td {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color);
  vertical-align: top;
}

.cmp-table tr:nth-child(even) td {
  background: var(--md-code-bg-color);
}

[data-md-color-scheme="slate"] .cmp-table th {
  background: #004d40;
  border-color: #00695c;
}

/* ===========================================
   Responsive
   =========================================== */

@media (max-width: 640px) {
  .dom-tree { padding: 0.75rem 1rem; }
}