/* 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;
}

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

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

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

/* ===========================================
   Chen-notation ER entities (rectangle + ellipses)
   =========================================== */

/* Entity container */
.er-ent-cr {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: monospace;
  font-size: 0.88em;
}

/* Entity name rectangle */
.er-cr-rect {
  border: 2px solid #3949ab;
  background: var(--md-default-bg-color);
  padding: 0.38rem 1rem;
  font-weight: 700;
  font-size: 0.9em;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-radius: 2px;
  color: var(--md-default-fg-color);
  position: relative;
  z-index: 1;
}

/* Weak entity: double border via box-shadow */
.er-cr-rect.weak {
  box-shadow: 0 0 0 3px var(--md-default-bg-color), 0 0 0 5px #3949ab;
  margin: 4px;
}

/* Attribute cluster ABOVE rect: ellipses + vlines → border-bottom as horizontal bar */
.er-cr-attrs-top {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  justify-content: center;
  border-bottom: 2px solid #90a4ae;
}

/* Attribute cluster BELOW rect: border-top as horizontal bar → vlines + ellipses */
.er-cr-attrs-bot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  justify-content: center;
  border-top: 2px solid #90a4ae;
}

/* Single attribute column */
.er-cr-attr {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Vertical line connecting ellipse to horizontal bar */
.er-cr-attr-line {
  width: 2px;
  height: 10px;
  background: #90a4ae;
  flex-shrink: 0;
}

/* Attribute ellipse */
.er-attr-el {
  border: 1.5px solid #546e7a;
  border-radius: 50%;
  padding: 0.22rem 0.65rem;
  background: var(--md-default-bg-color);
  font-size: 0.8em;
  white-space: nowrap;
  text-align: center;
  color: var(--md-default-fg-color);
  line-height: 1.3;
}

.er-attr-el.pk      { text-decoration: underline; font-weight: 700; border-color: #3949ab; }
.er-attr-el.partial { text-decoration: underline; text-decoration-style: dashed; border-color: #3949ab; }
.er-attr-el.multi   { border-width: 3px; border-style: double; border-color: #5c6bc0; }
.er-attr-el.derived { border-style: dashed; color: var(--md-default-fg-color--light); }

/* ===========================================
   ER Transformation Steppers
   =========================================== */

/* Stepper container */
.er-stepper {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  overflow: hidden;
  margin: 1.5rem 0;
  background: var(--md-default-bg-color);
}

.er-stepper-header {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

/* Steps */
.er-step {
  display: none;
  padding: 1.25rem 1.5rem;
  min-height: 200px;
}

.er-step.active {
  display: block;
  animation: erStepIn 0.35s ease;
}

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

/* Step description */
.er-desc {
  background: var(--md-code-bg-color);
  border-left: 3px solid var(--md-primary-fg-color);
  padding: 0.5rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.88em;
  border-radius: 0 4px 4px 0;
  line-height: 1.5;
}

/* Controls bar */
.er-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1rem;
  background: var(--md-code-bg-color);
  border-top: 1px solid var(--md-default-fg-color--lightest);
  gap: 0.5rem;
}

.er-btn-prev,
.er-btn-next {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  border: none;
  border-radius: 4px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: opacity 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.er-btn-prev:disabled,
.er-btn-next:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.er-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.er-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--md-default-fg-color--lightest);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, transform 0.25s;
}

.er-dot.active {
  background: var(--md-primary-fg-color);
  transform: scale(1.4);
}

.er-step-label {
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}

/* Panel labels */
.er-panel-title {
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-default-fg-color--light);
  text-align: center;
  margin: 0 0 0.4rem 0;
}

/* ===========================================
   ER Diagram Elements
   =========================================== */

/* Diagram canvas */
.er-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.6rem 0;
}

/* Entity box */
.er-ent {
  display: inline-flex;
  flex-direction: column;
  border: 2px solid #3949ab;
  border-radius: 4px;
  overflow: hidden;
  min-width: 120px;
  font-family: monospace;
  font-size: 0.85em;
  background: var(--md-default-bg-color);
}

/* Weak entity (double border via box-shadow) */
.er-ent.weak {
  box-shadow: 0 0 0 3px var(--md-default-bg-color), 0 0 0 5px #3949ab;
  margin: 5px;
}

.er-ent-name {
  background: #3949ab;
  color: #fff;
  padding: 0.3rem 0.7rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
}

.er-ent.weak .er-ent-name { background: #283593; }

.er-ent-attrs {
  padding: 0.3rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--md-default-bg-color);
}

.er-ent-attr            { padding: 1px 0; color: var(--md-default-fg-color); font-size: 0.9em; }
.er-ent-attr.pk         { text-decoration: underline; font-weight: 700; }
.er-ent-attr.partial    { text-decoration: underline; text-decoration-style: dashed; }
.er-ent-attr.multi::after { content: " ⊕"; font-size: 0.7em; color: #5c6bc0; }

/* Relationship diamond */
.er-rel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 80px;
  height: 54px;
  flex-shrink: 0;
}

.er-rel-diamond {
  position: absolute;
  top: 7px; left: 11px; right: 11px; bottom: 7px;
  border: 2px solid #f9a825;
  background: #fff8e1;
  transform: rotate(45deg);
  border-radius: 2px;
}

/* Identifying relationship (double diamond) */
.er-rel-wrap.id-rel .er-rel-diamond {
  box-shadow: 0 0 0 2px var(--md-default-bg-color), 0 0 0 4px #f9a825;
}

[data-md-color-scheme="slate"] .er-rel-diamond { background: #3e2a00; border-color: #ffca28; }

.er-rel-label {
  position: relative;
  z-index: 1;
  font-size: 0.7em;
  font-weight: 600;
  text-align: center;
  color: var(--md-default-fg-color);
  line-height: 1.2;
}

/* Connection lines & cardinality labels */
.er-conn-line { width: 22px; height: 2px; background: var(--md-default-fg-color--light); flex-shrink: 0; }

.er-conn-card {
  font-size: 0.73em;
  font-weight: 700;
  color: #c62828;
  padding: 0 2px;
  min-width: 34px;
  text-align: center;
  white-space: nowrap;
  font-family: monospace;
}

/* Self-referencing loop indicator */
.er-self-ref {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.72em;
  color: var(--md-default-fg-color--light);
  gap: 2px;
}

.er-self-arrow {
  font-size: 1.2em;
  color: #c62828;
}

/* ===========================================
   Relational Schema Tables
   =========================================== */

.rel-schema {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.6rem 0;
}

.rel-tbl {
  border: 1.5px solid #607d8b;
  border-radius: 4px;
  overflow: hidden;
  min-width: 140px;
  font-family: monospace;
  font-size: 0.82em;
}

.rel-tbl-name {
  background: #37474f;
  color: #fff;
  padding: 0.3rem 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}

.rel-tbl-col {
  padding: 0.2rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid #eceff1;
  color: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .rel-tbl-col { border-bottom-color: #455a64; }
.rel-tbl-col:last-child { border-bottom: none; }

.rel-tbl-col.pk    { background: #e3f2fd; }
.rel-tbl-col.fk    { background: #fce4ec; }
.rel-tbl-col.pk-fk { background: #f3e5f5; }
.rel-tbl-col.disc  { background: #fff8e1; }

[data-md-color-scheme="slate"] .rel-tbl-col.pk    { background: #0a1929; }
[data-md-color-scheme="slate"] .rel-tbl-col.fk    { background: #200d14; }
[data-md-color-scheme="slate"] .rel-tbl-col.pk-fk { background: #150a20; }
[data-md-color-scheme="slate"] .rel-tbl-col.disc  { background: #2a2000; }

.rel-tbl-col .rel-null { font-size: 0.72em; color: var(--md-default-fg-color--light); margin-left: auto; }

.rel-tag {
  font-size: 0.68em;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.tag-pk   { background: #1565c0; color: #fff; }
.tag-fk   { background: #c62828; color: #fff; }
.tag-uk   { background: #2e7d32; color: #fff; }
.tag-nn   { background: #e65100; color: #fff; }
.tag-pkfk { background: #6a1b9a; color: #fff; }
.tag-disc { background: #f57f17; color: #fff; }

.rel-tbl-footer {
  background: #f1f8e9;
  border-top: 1px dashed #8bc34a;
  padding: 0.3rem 0.7rem;
  font-size: 0.75em;
  color: #558b2f;
  line-height: 1.5;
  font-family: monospace;
}

[data-md-color-scheme="slate"] .rel-tbl-footer { background: #0f1f04; border-top-color: #558b2f; color: #9ccc65; }

/* ===========================================
   Layout: ER → Relational two-panel
   =========================================== */

.er-transform {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 0.5rem;
  align-items: start;
  margin-top: 0.25rem;
}

.er-transform-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 1.8rem;
  color: var(--md-primary-fg-color);
  font-size: 1.6rem;
  line-height: 1;
}

.er-transform-arrow small {
  font-size: 0.56rem;
  color: var(--md-default-fg-color--light);
  text-align: center;
  margin-top: 3px;
  font-style: italic;
}

/* Highlight (pulsing border) for element being transformed */
@keyframes erPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255, 160, 0, 0); }
  50%     { box-shadow: 0 0 0 5px rgba(255, 160, 0, 0.55); }
}

.er-highlight { animation: erPulse 1.3s ease-in-out infinite; border-radius: 4px; }

/* Appear animation for new elements */
@keyframes erAppear {
  from { opacity: 0; transform: scale(0.88) translateY(5px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.er-appear { animation: erAppear 0.5s ease forwards; }

/* Notation block */
.er-notation {
  margin-top: 0.75rem;
  text-align: center;
  font-family: monospace;
  font-size: 0.85em;
  color: var(--md-default-fg-color);
  background: var(--md-code-bg-color);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

/* Responsive */
@media (max-width: 640px) {
  .er-transform {
    grid-template-columns: 1fr;
  }
  .er-transform-arrow {
    transform: rotate(90deg);
    padding-top: 0;
    padding: 0.4rem 0;
  }
  .er-step { padding: 0.9rem 1rem; }
}

/* ===========================================
   Normalization Tables (nf-*)
   =========================================== */

.nf-tbl-wrap {
  overflow-x: auto;
  margin: 0.6rem 0;
  border-radius: 4px;
}

.nf-tbl {
  border-collapse: collapse;
  font-family: monospace;
  font-size: 0.83em;
  width: max-content;
  min-width: 100%;
}

.nf-tbl th {
  background: #37474f;
  color: #fff;
  padding: 0.38rem 0.8rem;
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid #546e7a;
}

.nf-tbl td {
  padding: 0.3rem 0.8rem;
  border: 1px solid #cfd8dc;
  white-space: nowrap;
  color: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .nf-tbl td { border-color: #37474f; }

/* Cell highlight — light mode */
.nf-tbl td.nf-bad       { background: #ffcdd2 !important; color: #b71c1c; }
.nf-tbl td.nf-warn      { background: #fff9c4 !important; color: #827717; }
.nf-tbl td.nf-partial   { background: #ffe0b2 !important; color: #bf360c; }
.nf-tbl td.nf-transit   { background: #ede7f6 !important; color: #4527a0; }
.nf-tbl td.nf-ok        { background: #e8f5e9 !important; color: #1b5e20; }
.nf-tbl td.nf-key       { background: #e3f2fd !important; color: #0d47a1; font-weight: 700; text-decoration: underline; }
.nf-tbl td.nf-fk        { background: #fce4ec !important; color: #880e4f; }

/* Header highlight */
.nf-tbl th.nf-bad       { background: #c62828 !important; }
.nf-tbl th.nf-warn      { background: #827717 !important; }
.nf-tbl th.nf-partial   { background: #e65100 !important; }
.nf-tbl th.nf-transit   { background: #4527a0 !important; }
.nf-tbl th.nf-ok        { background: #2e7d32 !important; }
.nf-tbl th.nf-key       { background: #1565c0 !important; }
.nf-tbl th.nf-fk        { background: #880e4f !important; }

/* Cell highlight — dark mode */
[data-md-color-scheme="slate"] .nf-tbl td.nf-bad     { background: #4a0000 !important; color: #ef9a9a; }
[data-md-color-scheme="slate"] .nf-tbl td.nf-warn    { background: #2a2000 !important; color: #fff59d; }
[data-md-color-scheme="slate"] .nf-tbl td.nf-partial { background: #3e1a00 !important; color: #ffcc80; }
[data-md-color-scheme="slate"] .nf-tbl td.nf-transit { background: #1a0840 !important; color: #ce93d8; }
[data-md-color-scheme="slate"] .nf-tbl td.nf-ok      { background: #0a1f0a !important; color: #a5d6a7; }
[data-md-color-scheme="slate"] .nf-tbl td.nf-key     { background: #001a3a !important; color: #90caf9; }
[data-md-color-scheme="slate"] .nf-tbl td.nf-fk      { background: #200d14 !important; color: #f48fb1; }

/* New row appear animation */
@keyframes nfRowIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.nf-tbl tr.nf-new td { animation: nfRowIn 0.9s ease 0.25s both; }

/* NF badge */
.nf-badge {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 3px;
  font-size: 0.78em;
  font-weight: 700;
  font-family: monospace;
  vertical-align: middle;
  margin-right: 0.4rem;
}
.nf-badge-no   { background: #c62828; color: #fff; }
.nf-badge-warn { background: #e65100; color: #fff; }
.nf-badge-ok   { background: #2e7d32; color: #fff; }

/* Dependency annotations */
.nf-deps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  font-family: monospace;
  font-size: 0.8em;
}

.nf-dep {
  display: inline-block;
  border-radius: 3px;
  padding: 0.18rem 0.55rem;
  border: 1.5px solid currentColor;
  line-height: 1.4;
}
.nf-dep.ok      { color: #2e7d32;  background: #e8f5e9; }
.nf-dep.partial { color: #bf360c;  background: #ffe0b2; }
.nf-dep.transit { color: #4527a0;  background: #ede7f6; }
.nf-dep.bad     { color: #b71c1c;  background: #ffcdd2; }

[data-md-color-scheme="slate"] .nf-dep.ok      { background: #0a1f0a; }
[data-md-color-scheme="slate"] .nf-dep.partial { background: #3e1a00; }
[data-md-color-scheme="slate"] .nf-dep.transit { background: #1a0840; }
[data-md-color-scheme="slate"] .nf-dep.bad     { background: #4a0000; }

/* Multi-table layout */
.nf-tables {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
  align-items: flex-start;
}

.nf-table-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nf-table-label {
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--md-default-fg-color--light);
  font-family: monospace;
}

@media (max-width: 640px) {
  .nf-tables { flex-direction: column; }
}

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

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

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

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

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

/* Flowcharts: text, rects, cercles */
[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 10 — correcció específica
   Les seccions usen classes .section--1, .section-0, etc.
   dins de <g class="timeline-node section-X">.
   El CSS intern del SVG usa #id .section-X amb alta
   especificitat, però sense !important, per tant
   les regles !important externes guanyen.
   =========================================== */

/* Fons de cada bloc de secció (paths i rects) */
[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;
}

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

/* Línies horitzontals de cada secció */
[data-md-color-scheme="slate"] g[class*="section"] line {
  stroke: #7c3aed !important;
}

/* Línia de temps vertical (connectors de cada tasca) */
[data-md-color-scheme="slate"] .mermaid .lineWrapper line {
  stroke: #7c3aed !important;
}

/* Línia principal horitzontal */
[data-md-color-scheme="slate"] .mermaid svg > g > .lineWrapper line {
  stroke: #a78bfa !important;
}

/* Elimina el brightness(120%) que aclareix els colors en mode fosc */
[data-md-color-scheme="slate"] .mermaid .eventWrapper {
  filter: none !important;
}

/* ===========================================
   JOIN Type Visual Grid (Venn diagrams)
   =========================================== */

.join-types-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin: 1.5rem 0;
}

@media (max-width: 860px) { .join-types-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .join-types-grid { grid-template-columns: 1fr 1fr; } }

.join-type-card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  padding: 0.75rem 0.6rem 0.6rem;
  text-align: center;
  background: var(--md-default-bg-color);
}

.join-type-name {
  font-family: monospace;
  font-weight: 700;
  font-size: 0.78em;
  margin-bottom: 0.45rem;
  color: var(--md-default-fg-color);
}

.join-venn-svg {
  width: 110px;
  height: 62px;
  display: block;
  margin: 0 auto;
  overflow: visible;
}

.join-type-desc {
  font-size: 0.72em;
  color: var(--md-default-fg-color--light);
  margin-top: 0.35rem;
  line-height: 1.3;
}

/* SVG fill classes — light mode */
.jv-a    { fill: #bbdefb; stroke: #1565c0; }
.jv-b    { fill: #fce4ec; stroke: #880e4f; }
.jv-hit  { fill: rgba(46,125,50,0.60); }
.jv-la   { fill: #1565c0; }
.jv-lb   { fill: #880e4f; }
.jv-anti { fill: var(--md-default-bg-color); opacity: 0.72; }

/* SVG fill classes — dark mode */
[data-md-color-scheme="slate"] .jv-a   { fill: #0d2a4a; stroke: #90caf9; }
[data-md-color-scheme="slate"] .jv-b   { fill: #2d0d1f; stroke: #f48fb1; }
[data-md-color-scheme="slate"] .jv-hit { fill: rgba(76,175,80,0.55); }
[data-md-color-scheme="slate"] .jv-la  { fill: #90caf9; }
[data-md-color-scheme="slate"] .jv-lb  { fill: #f48fb1; }

/* JOIN stepper layout */
.join-step-tables {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.join-step-table { flex: 1; min-width: 145px; }

.join-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--md-primary-fg-color);
  padding-top: 1.6rem;
  flex-shrink: 0;
}

.join-null {
  color: var(--md-default-fg-color--light);
  font-style: italic;
  font-size: 0.9em;
}

/* ===========================================
   Isolation Levels Timeline
   =========================================== */

.iso-step-cols {
  display: grid;
  grid-template-columns: 2.5rem 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  overflow: hidden;
  font-family: monospace;
  font-size: 0.8em;
  margin-top: 0.5rem;
}

.iso-hdr {
  background: #37474f;
  color: #fff;
  padding: 0.35rem 0.5rem;
  font-weight: 700;
  text-align: center;
  border-right: 1px solid #546e7a;
  font-size: 0.85em;
}

.iso-hdr:last-child { border-right: none; }

.iso-cell {
  padding: 0.32rem 0.5rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  border-right: 1px solid var(--md-default-fg-color--lightest);
  vertical-align: top;
  line-height: 1.4;
  color: var(--md-default-fg-color);
}

.iso-cell:last-child { border-right: none; }
.iso-cell.iso-step-n { text-align: center; background: var(--md-code-bg-color); color: var(--md-default-fg-color--light); }
.iso-cell.iso-t1  { background: #e3f2fd; color: #0d47a1; }
.iso-cell.iso-t2  { background: #fce4ec; color: #880e4f; }
.iso-cell.iso-db  { background: var(--md-code-bg-color); color: var(--md-default-fg-color); }
.iso-cell.iso-bad { background: #ffcdd2 !important; color: #b71c1c !important; font-weight: 700; }
.iso-cell.iso-ok  { background: #e8f5e9 !important; color: #1b5e20 !important; }
.iso-cell.iso-warn { background: #fff9c4 !important; color: #827717 !important; }

[data-md-color-scheme="slate"] .iso-cell.iso-t1  { background: #001a3a; color: #90caf9; }
[data-md-color-scheme="slate"] .iso-cell.iso-t2  { background: #200d14; color: #f48fb1; }
[data-md-color-scheme="slate"] .iso-cell.iso-bad { background: #4a0000 !important; color: #ef9a9a !important; }
[data-md-color-scheme="slate"] .iso-cell.iso-ok  { background: #0a1f0a !important; color: #a5d6a7 !important; }
[data-md-color-scheme="slate"] .iso-cell.iso-warn { background: #2a2000 !important; color: #fff59d !important; }

/* ===========================================
   Window Function Spotlight Stepper
   =========================================== */

.wf-table-wrap { overflow-x: auto; margin: 0.5rem 0; }

.wf-tbl {
  border-collapse: collapse;
  font-family: monospace;
  font-size: 0.82em;
  width: max-content;
  min-width: 100%;
}

.wf-tbl th {
  background: #37474f;
  color: #fff;
  padding: 0.35rem 0.75rem;
  text-align: left;
  font-weight: 700;
  border: 1px solid #546e7a;
  white-space: nowrap;
}

.wf-tbl td {
  padding: 0.3rem 0.75rem;
  border: 1px solid #cfd8dc;
  white-space: nowrap;
  color: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .wf-tbl td { border-color: #37474f; }

.wf-tbl tr.wf-window td { background: #e3f2fd !important; color: #0d47a1 !important; }
.wf-tbl tr.wf-current td { background: #fff8e1 !important; color: #e65100 !important; font-weight: 700; outline: 2px solid #f57f17; outline-offset: -2px; }
.wf-tbl tr.wf-dim td { opacity: 0.4; }
.wf-tbl td.wf-result { background: #e8f5e9 !important; color: #1b5e20 !important; font-weight: 700; }
.wf-tbl td.wf-computed { background: #fff9c4 !important; color: #827717 !important; }

[data-md-color-scheme="slate"] .wf-tbl tr.wf-window td { background: #001a3a !important; color: #90caf9 !important; }
[data-md-color-scheme="slate"] .wf-tbl tr.wf-current td { background: #2a2000 !important; color: #ffb74d !important; }
[data-md-color-scheme="slate"] .wf-tbl tr.wf-dim td { opacity: 0.35; }
[data-md-color-scheme="slate"] .wf-tbl td.wf-result { background: #0a1f0a !important; color: #a5d6a7 !important; }
[data-md-color-scheme="slate"] .wf-tbl td.wf-computed { background: #2a2000 !important; color: #fff59d !important; }

.wf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.75em;
}

.wf-legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.wf-legend-dot {
  width: 12px; height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.wf-legend-dot.current { background: #fff8e1; border: 2px solid #f57f17; }
.wf-legend-dot.window  { background: #e3f2fd; border: 1px solid #1565c0; }
.wf-legend-dot.dim     { background: #e0e0e0; border: 1px solid #9e9e9e; }

[data-md-color-scheme="slate"] .wf-legend-dot.current { background: #2a2000; border-color: #ffb74d; }
[data-md-color-scheme="slate"] .wf-legend-dot.window  { background: #001a3a; border-color: #90caf9; }

/* ── Before/After comparison layout (UPDATE / DELETE) ── */
.ba-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin: 1rem 0;
}

.ba-side {
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  padding: 0.75rem 1rem;
}

.ba-side strong {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light);
}

.ba-arrow {
  font-size: 2rem;
  line-height: 1;
  color: var(--md-default-fg-color--light);
  padding-top: 2.2rem;
  text-align: center;
}

@media (max-width: 640px) {
  .ba-wrap {
    grid-template-columns: 1fr;
  }
  .ba-arrow {
    text-align: center;
    padding-top: 0;
    transform: rotate(90deg);
  }
}

/* ===========================================
   Page / Tuple Internals (pg-*)
   =========================================== */

/* Page section block */
.pg-section {
  border: 1.5px solid #607d8b;
  border-radius: 4px;
  overflow: hidden;
  margin: 0.35rem 0;
  font-family: monospace;
  font-size: 0.83em;
}

.pg-sec-hd {
  padding: 0.35rem 0.7rem;
  font-weight: 700;
  font-size: 0.82em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pg-sec-bd {
  padding: 0.3rem 0.7rem;
  font-size: 0.85em;
}

/* Section color variants */
.pg-header .pg-sec-hd  { background: #e65100; color: #fff; }
.pg-header .pg-sec-bd  { background: #fff3e0; color: #bf360c; }
.pg-ip .pg-sec-hd      { background: #1565c0; color: #fff; }
.pg-ip .pg-sec-bd      { background: #e3f2fd; color: #0d47a1; }
.pg-free               { background: #f5f5f5; border-style: dashed; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.pg-free span          { color: #9e9e9e; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8em; }
.pg-tuples .pg-sec-hd  { background: #2e7d32; color: #fff; }
.pg-tuples .pg-sec-bd  { background: #e8f5e9; color: #1b5e20; }
.pg-special .pg-sec-hd { background: #4527a0; color: #fff; }

/* Dark mode variants */
[data-md-color-scheme="slate"] .pg-header .pg-sec-bd  { background: #3e1a00; color: #ffcc80; }
[data-md-color-scheme="slate"] .pg-ip .pg-sec-bd      { background: #0a1929; color: #90caf9; }
[data-md-color-scheme="slate"] .pg-free               { background: #1a1a1a; border-color: #424242; }
[data-md-color-scheme="slate"] .pg-free span           { color: #616161; }
[data-md-color-scheme="slate"] .pg-tuples .pg-sec-bd  { background: #0a1f0a; color: #a5d6a7; }

/* Tuple field grid */
.pg-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.3rem 0;
}

.pg-field {
  border: 1.5px solid #607d8b;
  border-radius: 3px;
  padding: 0.25rem 0.55rem;
  text-align: center;
  flex: 1;
  min-width: 70px;
}

.pg-field-name { font-weight: 700; font-size: 0.88em; }
.pg-field-info { font-size: 0.72em; color: var(--md-default-fg-color--light); margin-top: 1px; }

.pg-field.hdr  { background: #fff3e0; border-color: #e65100; }
.pg-field.data { background: #e8f5e9; border-color: #2e7d32; }
.pg-field.null { background: #ede7f6; border-color: #4527a0; }

[data-md-color-scheme="slate"] .pg-field.hdr  { background: #3e1a00; border-color: #e65100; color: #ffcc80; }
[data-md-color-scheme="slate"] .pg-field.data { background: #0a1f0a; border-color: #2e7d32; color: #a5d6a7; }
[data-md-color-scheme="slate"] .pg-field.null { background: #1a0840; border-color: #4527a0; color: #ce93d8; }

/* Scan comparison bars */
.pg-scan-bar {
  height: 28px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  border: 1.5px solid;
  margin: 0.3rem 0;
}

.pg-scan-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  font-weight: 700;
  font-family: monospace;
}

.pg-scan-bar.seq  { border-color: #c62828; }
.pg-scan-bar.seq .pg-scan-fill { background: #ffcdd2; color: #b71c1c; width: 100%; }
.pg-scan-bar.idx  { border-color: #607d8b; }
.pg-scan-bar.idx .pg-scan-fill.read { background: #e8f5e9; color: #1b5e20; border-right: 2px solid #2e7d32; }
.pg-scan-bar.idx .pg-scan-fill.skip { background: #f5f5f5; color: #9e9e9e; flex: 1; }

[data-md-color-scheme="slate"] .pg-scan-bar.seq .pg-scan-fill { background: #4a0000; color: #ef9a9a; }
[data-md-color-scheme="slate"] .pg-scan-bar.idx .pg-scan-fill.read { background: #0a1f0a; color: #a5d6a7; }
[data-md-color-scheme="slate"] .pg-scan-bar.idx .pg-scan-fill.skip { background: #1a1a1a; color: #616161; }

/* Scan stat row */
.pg-scan-stats {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  font-family: monospace;
  font-size: 0.85em;
}

.pg-scan-stat {
  text-align: center;
  padding: 0.3rem 0.8rem;
}

.pg-scan-stat .val {
  font-size: 1.1em;
  font-weight: 700;
}

.pg-scan-stat .val.bad  { color: #c62828; }
.pg-scan-stat .val.good { color: #2e7d32; }
.pg-scan-stat .val.best { color: #e65100; font-size: 1.2em; }

.pg-scan-stat .lbl {
  font-size: 0.72em;
  color: var(--md-default-fg-color--light);
}

[data-md-color-scheme="slate"] .pg-scan-stat .val.bad  { color: #ef9a9a; }
[data-md-color-scheme="slate"] .pg-scan-stat .val.good { color: #a5d6a7; }
[data-md-color-scheme="slate"] .pg-scan-stat .val.best { color: #ffcc80; }