/* =============================================================================
   ENCICLOPÉDIA DE PERFORMANCE HUMANA - CUSTOM CSS
   
   Estratégia: 
   - Navbar: customização universal (ambos os temas)
   - Boxes: estilos universais (funcionam em ambos)
   - Cores: usar seletores de atributo data-mode para tema claro E prefers-color-scheme dark
   ============================================================================= */

@import "css/navigation.css";
@import "css/video.css";

.prev-next-footer,
.prev-next-area {
  display: none !important;
}

/* ====== BARRA DE NAVEGAÇÃO (Universal - funciona em ambos temas) ====== */
header.bd-header, header.bd-navbar {
    padding: 0.5rem 0 !important;
    min-height: auto !important;
}

/* Site uses a single fixed dark theme */
html { color-scheme: dark; }

header.bd-header .theme-switch-button,
header.bd-navbar .theme-switch-button,
.theme-switch-button {
  display: none !important;
}

html[data-mode="dark"] header.bd-header,
html[data-mode="dark"] header.bd-navbar {
    background-color: var(--pst-color-surface) !important;
    border-bottom: 1px solid var(--pst-color-border) !important;
}

html[data-mode="dark"] header.bd-header a,
html[data-mode="dark"] header.bd-navbar a,
html[data-mode="dark"] header.bd-header .navbar-brand,
html[data-mode="dark"] header.bd-navbar .navbar-brand,
html[data-mode="dark"] header.bd-header .logo__title,
html[data-mode="dark"] header.bd-navbar .logo__title {
    color: var(--pst-color-on-surface) !important;
}

html[data-mode="dark"] header.bd-header a:hover,
html[data-mode="dark"] header.bd-navbar a:hover {
    color: var(--pst-color-on-surface) !important;
    text-decoration: underline;
    text-decoration-color: currentColor;
}

html[data-mode="dark"] header.bd-header .navbar-icon,
html[data-mode="dark"] header.bd-header .pst-navbar-icon,
html[data-mode="dark"] header.bd-navbar .navbar-icon,
html[data-mode="dark"] header.bd-navbar .pst-navbar-icon {
    color: var(--pst-color-on-surface) !important;
}

html[data-mode="dark"] header.bd-header .navbar-icon svg,
html[data-mode="dark"] header.bd-header .pst-navbar-icon svg,
html[data-mode="dark"] header.bd-navbar .navbar-icon svg,
html[data-mode="dark"] header.bd-navbar .pst-navbar-icon svg {
    color: currentColor !important;
    fill: currentColor !important;
}

html[data-mode="dark"] header.bd-header button,
html[data-mode="dark"] header.bd-navbar button {
    color: var(--pst-color-on-surface) !important;
}

html[data-mode="dark"] header.bd-header input,
html[data-mode="dark"] header.bd-navbar input {
    background: var(--pst-color-background) !important;
    color: var(--pst-color-on-background) !important;
    border-color: var(--pst-color-border) !important;
}

/* Prevent floating back-to-top UI from overlapping figures */
.back-to-top,
.pst-back-to-top,
a.back-to-top,
button.back-to-top,
a[aria-label*="Back to top"],
button[aria-label*="Back to top"],
a[title*="Back to top"],
button[title*="Back to top"] {
  display: none !important;
}

.bd-content .bd-article {
    line-height: 1.65;
    font-size: 1.02rem;
    text-rendering: optimizeLegibility;
}

/* Mermaid diagrams: readable on dark theme and responsive */
.mermaid {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--pst-color-border);
  border-radius: 10px;
  padding: 0.75rem;
  overflow: auto;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.mermaid > svg {
  max-width: 100%;
  height: auto;
}

/* Mermaid (sphinxcontrib-mermaid) injects a fixed 500px height for SVGs in some themes.
   This can clip flowcharts on wide layouts. Force auto height and allow scroll when needed. */
pre.mermaid {
  width: 100%;
  overflow: auto;
}

pre.mermaid > svg {
  height: auto !important;
  max-height: 520px !important;
  width: 100% !important;
}

/* Mermaid internal styling overrides (make boxes lighter and text/lines higher-contrast) */
.mermaid svg {
  background: transparent !important;
}

.mermaid svg .node rect,
.mermaid svg .node polygon,
.mermaid svg .node path {
  fill: #334155 !important;
  stroke: #e2e8f0 !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

.mermaid svg .label,
.mermaid svg .label text,
.mermaid svg text {
  fill: #f8fafc !important;
  font-size: 16px !important;
}

/* Mermaid sometimes renders node labels using HTML inside <foreignObject>.
   Those labels don't respect SVG 'fill' rules, so force the text color. */
.mermaid svg foreignObject,
.mermaid svg foreignObject * {
  color: #f8fafc !important;
}

.mermaid svg .edgeLabel rect {
  fill: #0f172a !important;
  stroke: #e2e8f0 !important;
  stroke-width: 1.5px !important;
}

.mermaid svg .edgeLabel,
.mermaid svg .edgeLabel text {
  fill: #f8fafc !important;
}

.mermaid svg .edgeLabel foreignObject,
.mermaid svg .edgeLabel foreignObject * {
  color: #f8fafc !important;
}

.mermaid svg .edgeLabel foreignObject > div,
.mermaid svg .edgeLabel foreignObject > div > span {
  background: #0f172a !important;
}

.mermaid svg .labelBkg,
.mermaid svg .labelBkg p,
.mermaid svg span.edgeLabel,
.mermaid svg span.edgeLabel p {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}

.mermaid svg .edgePath path,
.mermaid svg .flowchart-link {
  stroke: #cbd5e1 !important;
  stroke-width: 2.2px !important;
}

.mermaid svg .marker {
  fill: #cbd5e1 !important;
  stroke: #cbd5e1 !important;
}

/* Figures (images/SVG): match Mermaid card styling for consistent visual quality */
.bd-content figure {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--pst-color-border);
  border-radius: 10px;
  padding: 0.75rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.bd-content figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.bd-content figure figcaption {
  margin-top: 0.65rem;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--pst-color-on-background);
}

.bd-content .bd-article h1,
.bd-content .bd-article h2,
.bd-content .bd-article h3,
.bd-content .bd-article h4 {
    scroll-margin-top: calc(var(--pst-header-height) + 1rem);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid rgba(0, 102, 204, 0.45);
    outline-offset: 2px;
    border-radius: 6px;
}

html[data-mode="dark"] a:focus-visible,
html[data-mode="dark"] button:focus-visible,
html[data-mode="dark"] input:focus-visible,
html[data-mode="dark"] textarea:focus-visible,
html[data-mode="dark"] select:focus-visible,
html[data-mode="dark"] [role="button"]:focus-visible {
    outline-color: rgba(74, 163, 255, 0.55);
}

.bd-content table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--pst-color-border);
    border-radius: 8px;
    overflow: hidden;
}

.bd-content table th,
.bd-content table td {
    border-bottom: 1px solid var(--pst-color-border);
    padding: 0.6rem 0.75rem;
    vertical-align: top;
}

.bd-content table thead th {
    background: var(--pst-color-surface);
    color: var(--pst-color-on-surface);
    font-weight: 700;
}

.bd-content table tbody tr:nth-child(2n) {
    background: rgba(0, 0, 0, 0.03);
}

html[data-mode="dark"] .bd-content table tbody tr:nth-child(2n) {
    background: rgba(255, 255, 255, 0.04);
}

.bd-content .highlight pre,
.bd-content pre {
    border-radius: 10px;
    border: 1px solid var(--pst-color-border);
    background: var(--pst-color-surface);
}

.bd-content :not(pre) > code {
    border-radius: 6px;
    padding: 0.15em 0.35em;
    border: 1px solid var(--pst-color-border);
    background: var(--pst-color-surface);
    color: var(--pst-color-on-surface);
}

.bd-header__inner {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.navbar-header-items__start, .col-lg-3 {
    padding: 0.25rem !important;
    margin: 0 !important;
}

.navbar-item {
    padding: 0 !important;
    margin: 0 !important;
}

.navbar-brand.logo {
    padding: 0.3rem 0 !important;
    font-size: 1rem !important;
    margin-right: 1rem !important;
}

.logo__title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
}

/* Hide the top navigation links (only in the header) but keep them visible inside the primary sidebar */
.bd-header .bd-navbar-elements.navbar-nav {
    gap: 0 !important;
    padding: 0 !important;
    display: none !important;
}

/* Ensure module links are visible inside the primary sidebar */
.bd-sidebar-primary .bd-navbar-elements.navbar-nav {
    display: block !important;
}

.bd-navbar-elements .nav-item {
    padding: 0 !important;
}

.bd-navbar-elements .nav-link {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
}

.pst-navbar-icon, .navbar-icon {
    padding: 0.25rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidebar-header {
    padding: 0.75rem !important;
}


/* ====== BOXES COLORIDAS (funcionam em ambos os temas) ====== */

/* New recommended format: MyST admonitions with semantic classes */
.admonition.eph-box {
  border-radius: 8px;
  border: 1px solid var(--pst-color-border);
  border-left-width: 6px;
  padding: 0.9rem 1rem;
  margin: 1rem 0;
  box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.08);
}

.admonition.eph-box .admonition-title {
  margin: 0 0 0.5rem 0;
  font-weight: 700;
  color: inherit;
  background: transparent !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 0.25rem 0 0.6rem 0;
  padding-left: 2.2rem; /* Added to create space for the icon */
}

html[data-mode="dark"] .admonition.eph-box .admonition-title {
  border-bottom-color: rgba(255,255,255,0.12);
}

@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) .admonition.eph-box .admonition-title {
    border-bottom-color: rgba(255,255,255,0.12);
  }
}

.admonition.eph-box p:last-child { margin-bottom: 0; }

.admonition.eph-box a {
  color: inherit;
  text-decoration-color: currentColor;
}
.admonition.eph-box a:hover,
.admonition.eph-box a:focus {
  text-decoration: underline;
}

.admonition.eph-box code,
.admonition.eph-box pre,
.admonition.eph-box kbd,
.admonition.eph-box .highlight {
  border-color: rgba(0,0,0,0.12);
}

html[data-mode="dark"] .admonition.eph-box {
  box-shadow: 0 0.8rem 1.75rem rgba(0,0,0,0.45);
}

html[data-mode="dark"] .admonition.eph-box code,
html[data-mode="dark"] .admonition.eph-box pre,
html[data-mode="dark"] .admonition.eph-box kbd,
html[data-mode="dark"] .admonition.eph-box .highlight {
  border-color: rgba(255,255,255,0.16);
}

html[data-mode="dark"] .admonition.eph-box pre,
html[data-mode="dark"] .admonition.eph-box .highlight pre {
  background: rgba(255,255,255,0.04);
}

html[data-mode="dark"] .admonition.eph-box :not(pre) > code {
  background: rgba(255,255,255,0.06);
}

/* Light theme tokens */
html[data-mode="light"] {
  --eph-box-def-bg: #e8f5ea;
  --eph-box-def-fg: #0c2b14;
  --eph-box-def-border: #1e7e34;

  --eph-box-tec-bg: #fde8eb;
  --eph-box-tec-fg: #3b0b14;
  --eph-box-tec-border: #c41c3b;

  --eph-box-pra-bg: #e7f1ff;
  --eph-box-pra-fg: #0a1f3d;
  --eph-box-pra-border: #0066cc;

  --eph-box-evi-bg: #f3ecff;
  --eph-box-evi-fg: #1f0d33;
  --eph-box-evi-border: #6b21a8;

  --eph-box-avi-bg: #fff2df;
  --eph-box-avi-fg: #2b1a00;
  --eph-box-avi-border: #cc6600;
}

/* Dark theme tokens */
html[data-mode="dark"] {
  --eph-box-def-bg: #0f2a18;
  --eph-box-def-fg: #e9fff0;
  --eph-box-def-border: #2cc55a;

  --eph-box-tec-bg: #2a0f14;
  --eph-box-tec-fg: #ffe9ee;
  --eph-box-tec-border: #ff4d6d;

  --eph-box-pra-bg: #0b1f33;
  --eph-box-pra-fg: #e8f3ff;
  --eph-box-pra-border: #4aa3ff;

  --eph-box-evi-bg: #1d1230;
  --eph-box-evi-fg: #f3ecff;
  --eph-box-evi-border: #b57bff;

  --eph-box-avi-bg: #2a1b07;
  --eph-box-avi-fg: #fff1dd;
  --eph-box-avi-border: #ffb24a;
}

@media (prefers-color-scheme: dark) {
  html:not([data-mode="light"]) {
    --eph-box-def-bg: #0f2a18;
    --eph-box-def-fg: #e9fff0;
    --eph-box-def-border: #2cc55a;

    --eph-box-tec-bg: #2a0f14;
    --eph-box-tec-fg: #ffe9ee;
    --eph-box-tec-border: #ff4d6d;

    --eph-box-pra-bg: #0b1f33;
    --eph-box-pra-fg: #e8f3ff;
    --eph-box-pra-border: #4aa3ff;

    --eph-box-evi-bg: #1d1230;
    --eph-box-evi-fg: #f3ecff;
    --eph-box-evi-border: #b57bff;

    --eph-box-avi-bg: #2a1b07;
    --eph-box-avi-fg: #fff1dd;
    --eph-box-avi-border: #ffb24a;
  }
}

@media (prefers-color-scheme: light) {
  html:not([data-mode="dark"]) {
    --eph-box-def-bg: #e8f5ea;
    --eph-box-def-fg: #0c2b14;
    --eph-box-def-border: #1e7e34;

    --eph-box-tec-bg: #fde8eb;
    --eph-box-tec-fg: #3b0b14;
    --eph-box-tec-border: #c41c3b;

    --eph-box-pra-bg: #e7f1ff;
    --eph-box-pra-fg: #0a1f3d;
    --eph-box-pra-border: #0066cc;

    --eph-box-evi-bg: #f3ecff;
    --eph-box-evi-fg: #1f0d33;
    --eph-box-evi-border: #6b21a8;

    --eph-box-avi-bg: #fff2df;
    --eph-box-avi-fg: #2b1a00;
    --eph-box-avi-border: #cc6600;
  }
}

/* Apply tokens per variant */
.admonition.eph-box--definicao,
.admonition.eph-box-definicao,
.admonition.eph-box--premissa,
.admonition.eph-box-premissa { background: var(--eph-box-def-bg) !important; color: var(--eph-box-def-fg) !important; border-left-color: var(--eph-box-def-border) !important; }
.admonition.eph-box--tecnico,
.admonition.eph-box-tecnico   { background: var(--eph-box-tec-bg); color: var(--eph-box-tec-fg); border-left-color: var(--eph-box-tec-border); }
.admonition.eph-box--pratico,
.admonition.eph-box-pratico   { background: var(--eph-box-pra-bg); color: var(--eph-box-pra-fg); border-left-color: var(--eph-box-pra-border); }
.admonition.eph-box--evidencia,
.admonition.eph-box-evidencia { background: var(--eph-box-evi-bg); color: var(--eph-box-evi-fg); border-left-color: var(--eph-box-evi-border); }
.admonition.eph-box--aviso,
.admonition.eph-box-aviso     { background: var(--eph-box-avi-bg); color: var(--eph-box-avi-fg); border-left-color: var(--eph-box-avi-border); }

.admonition.eph-box--definicao .admonition-title,
.admonition.eph-box-definicao .admonition-title,
.admonition.eph-box--premissa .admonition-title,
.admonition.eph-box-premissa .admonition-title { background: var(--eph-box-def-bg) !important; color: var(--eph-box-def-fg) !important; }
.admonition.eph-box--tecnico   .admonition-title,
.admonition.eph-box-tecnico   .admonition-title { background: var(--eph-box-tec-bg) !important; color: var(--eph-box-tec-fg) !important; }
.admonition.eph-box--pratico   .admonition-title,
.admonition.eph-box-pratico   .admonition-title { background: var(--eph-box-pra-bg) !important; color: var(--eph-box-pra-fg) !important; }
.admonition.eph-box--evidencia .admonition-title,
.admonition.eph-box-evidencia .admonition-title { background: var(--eph-box-evi-bg) !important; color: var(--eph-box-evi-fg) !important; }
.admonition.eph-box--aviso     .admonition-title,
.admonition.eph-box-aviso     .admonition-title { background: var(--eph-box-avi-bg) !important; color: var(--eph-box-avi-fg) !important; }

/* ====== DROPDOWNS (sphinx-design) estilizados como boxes ====== */
.sd-dropdown,
.sd-dropdown.sd-card,
.sd-sphinx-override.sd-dropdown {
  border-radius: 8px;
  border: 1px solid var(--pst-color-border);
  border-left: 6px solid var(--eph-box-tec-border);
  margin: 1rem 0;
  box-shadow: 0 1rem 1.75rem rgba(0, 0, 0, 0.45);
  overflow: hidden;
  background: var(--eph-box-tec-bg);
  color: var(--eph-box-tec-fg);
}

.sd-dropdown summary,
.sd-dropdown .sd-summary-title,
.sd-dropdown .sd-card-header {
  background: var(--eph-box-tec-bg);
  color: var(--eph-box-tec-fg);
  font-weight: 700;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.sd-dropdown summary::-webkit-details-marker,
.sd-dropdown summary::marker {
  display: none;
}

.sd-dropdown .sd-summary-text,
.sd-dropdown .sd-summary-icon,
.sd-dropdown .sd-summary-state-marker svg {
  color: inherit !important;
  fill: currentColor !important;
}

.sd-dropdown .sd-summary-icon,
.sd-dropdown .sd-summary-state-marker {
  width: 1.15rem;
  height: 1.15rem;
}

.sd-dropdown .sd-summary-content,
.sd-dropdown .sd-dropdown-content,
.sd-dropdown .sd-card-body,
.sd-dropdown .sd-card-body.docutils {
  background: var(--eph-box-tec-bg) !important;
  color: var(--eph-box-tec-fg) !important;
  padding: 0.5rem 1rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sd-dropdown .sd-card-text,
.sd-dropdown p,
.sd-dropdown code,
.sd-dropdown pre,
.sd-dropdown .docutils,
.sd-dropdown .docutils * {
  background: transparent !important;
  color: inherit !important;
}

.sd-dropdown[open] summary,
.sd-dropdown[open] .sd-summary-title {
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

/* Caixas coloridas - Definições (Verde) */
div[style*="background:#1e7e34"],
div[style*="background:#d4edda"] {
    background: #1e7e34 !important;
    color: #ffffff !important; /* increased contrast in dark mode */
    border-left: 6px solid #0d3c22 !important;
    padding: 16px !important;
    margin: 16px 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ensure inline elements inside colored boxes don't carry their own backgrounds or conflicting colors */
div[style*="background:#"] code,
div[style*="background:#"] pre,
div[style*="background:#"] kbd,
div[style*="background:#"] .highlight,
div[style*="background:#"] span,
div[style*="background:#"] p {
  background: transparent !important;
  color: inherit !important;
} 

/* Caixas coloridas - Técnico/Fórmulas (Vermelho) */
div[style*="background:#c41c3b"],
div[style*="background:#f8d7da"] {
    background: #c41c3b !important;
    color: #ffffff !important;
    border-left: 6px solid #8b0000 !important;
    padding: 16px !important;
    margin: 16px 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
} 

/* Caixas coloridas - Prático (Azul) */
div[style*="background:#0066cc"],
div[style*="background:#d1ecf1"] {
    background: #0066cc !important;
    color: #ffffff !important;
    border-left: 6px solid #003366 !important;
    padding: 16px !important;
    margin: 16px 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
} 

/* Caixas coloridas - Avisos (Laranja) */
div[style*="background:#ff9500"],
div[style*="background:#fff3cd"] {
    background: #ff9500 !important;
    color: #000000 !important; /* black text for high contrast on bright orange */
    border-left: 6px solid #cc6600 !important;
    padding: 16px !important;
    margin: 16px 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
} 

/* Caixas coloridas - Evidência/Referências (Roxo) */
div[style*="background:#6b21a8"],
div[style*="background:#f3e6ff"] {
    background: #6b21a8 !important;
    color: #ffffff !important;
    border-left: 6px solid #3f0f5c !important;
    padding: 16px !important;
    margin: 16px 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
} 

/* Strong dentro das caixas */
div[style*="background:#1e7e34"] strong { color: #ffffff !important; font-weight: 700 !important; }
div[style*="background:#ff9500"] strong { color: #000000 !important; font-weight: 700 !important; }

/* generic fallback: inherit for other boxes */
div[style*="background:#c41c3b"] strong,
div[style*="background:#0066cc"] strong,
div[style*="background:#6b21a8"] strong,
div[style*="background:#d4edda"] strong,
div[style*="background:#f8d7da"] strong,
div[style*="background:#d1ecf1"] strong,
div[style*="background:#fff3cd"] strong,
div[style*="background:#f3e6ff"] strong {
    color: inherit !important;
    font-weight: 700 !important;
} 

/* Ensure links inside colored boxes are readable and consistent */
div[style*="background:#"] a {
  color: inherit !important;
  text-decoration-color: currentColor !important;
}
div[style*="background:#"] a:hover,
div[style*="background:#"] a:focus {
  text-decoration: underline !important;
}

/* ====== SOBRESCREVER VARIÁVEIS CSS DO PYDATA THEME PARA MODO ESCURO ====== */

/* Quando data-mode="dark" */
html[data-mode="dark"] {
    --pst-color-background: #0d0d0d;
    --pst-color-surface: #0f1112;
    --pst-color-on-background: #e6eef6; /* luz para textos */
    --pst-color-on-surface: #e6eef6;
    --pst-color-text-base: #e6eef6;
    --pst-color-text-muted: #9aa4ad;
    --pst-color-border: #222627;
    --pst-color-shadow: rgba(0,0,0,0.7);
    --bs-body-bg: #0d0d0d;
}

/* Fallback para prefers-color-scheme dark */
@media (prefers-color-scheme: dark) {
    html:not([data-mode="light"]) {
        --pst-color-background: #0d0d0d;
        --pst-color-surface: #0f1112;
        --pst-color-on-background: #e6eef6;
        --pst-color-on-surface: #e6eef6;
        --pst-color-text-base: #e6eef6;
        --pst-color-text-muted: #9aa4ad;
        --pst-color-border: #222627;
        --pst-color-shadow: rgba(0,0,0,0.7);
        --bs-body-bg: #0d0d0d;
    }
}

/* ====== PRIMARY SIDEBAR: hide by default on wide screens and show as overlay when toggled ====== */
@media (min-width: 960px) {
  /* show the primary toggle button in header on wide screens */
  .bd-header button.primary-toggle { display: inline-flex !important; }

  /* keep sidebar in the DOM so transitions work; hidden via transform */
  .bd-sidebar-primary {
    display: flex !important;
    position: fixed !important;
    left: 0;
    top: var(--pst-header-height);
    height: calc(100vh - var(--pst-header-height));
    width: 340px;
    max-width: 80%;
    transform: translateX(-110%);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility .28s;
    visibility: hidden;
    z-index: 1060;
    box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.6);
    background-color: var(--pst-color-background);
    border-right: 1px solid var(--pst-color-border);
  }

  /* open state: slide in gently */
  body.primary-sidebar-open .bd-sidebar-primary {
    transform: translateX(0);
    visibility: visible;
  }

  /* backdrop with fade and pointer capture */
  body::before {
    content: "";
    position: fixed;
    inset: var(--pst-header-height) 0 0 0;
    background: rgba(6,8,10,0);
    z-index: 1055;
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
  }
  body.primary-sidebar-open::before,
  body.secondary-sidebar-open::before {
    background: rgba(6,8,10,0.45);
    opacity: 1;
    pointer-events: auto;
  }

  /* hide any small close button inside sidebar (we removed it) */
  .bd-sidebar-primary .primary-close { display: none !important; }

  /* hide the duplicate theme switch in the primary sidebar (we keep topbar control) */
  .bd-sidebar-primary .theme-switch-button { display: none !important; }

  /* ensure sidebar header items are visible when open */
  body.primary-sidebar-open .bd-sidebar-primary .sidebar-header-items { display: flex !important; }

  /* ====== SECONDARY SIDEBAR: hide by default on wide screens and show as overlay when toggled ====== */
  body #pst-secondary-sidebar.bd-sidebar-secondary {
    display: flex !important;
    position: fixed !important;
    right: 0 !important;
    top: var(--pst-header-height) !important;
    height: calc(100vh - var(--pst-header-height)) !important;
    width: 340px !important;
    max-width: 80% !important;
    transform: translateX(110%) !important;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility .28s !important;
    visibility: hidden !important;
    z-index: 1060 !important;
    box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.6) !important;
    background-color: var(--pst-color-background) !important;
    border-left: 1px solid var(--pst-color-border) !important;
    pointer-events: none !important;
  }

  body.secondary-sidebar-open #pst-secondary-sidebar.bd-sidebar-secondary {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Force override any theme-specific rules that might hide the sidebar */
  #pst-secondary-sidebar.bd-sidebar-secondary:not(.show) {
    transform: translateX(110%) !important;
    visibility: hidden !important;
  }

  body.secondary-sidebar-open #pst-secondary-sidebar.bd-sidebar-secondary:not(.show) {
    transform: translateX(0) !important;
    visibility: visible !important;
  }
}

/* larger width on very wide screens */
@media (min-width: 1400px) {
  .bd-sidebar-primary { width: 420px; }
}

html:not([data-mode="light"]) #trilhas-sugeridas .sd-card {
  background: var(--pst-color-surface) !important;
  border: 1px solid var(--pst-color-border) !important;
  color: var(--pst-color-on-surface) !important;
}

html:not([data-mode="light"]) #trilhas-sugeridas {
  --sd-color-card-background: var(--pst-color-surface);
  --sd-color-card-border: var(--pst-color-border);
  --sd-color-card-text: var(--pst-color-on-surface);
}

html:not([data-mode="light"]) #trilhas-sugeridas .sd-card,
html:not([data-mode="light"]) #trilhas-sugeridas .sd-card-body {
  background-color: var(--pst-color-surface) !important;
}

html:not([data-mode="light"]) #trilhas-sugeridas .sd-card-body,
html:not([data-mode="light"]) #trilhas-sugeridas .sd-card-title,
html:not([data-mode="light"]) #trilhas-sugeridas .sd-card-text {
  color: inherit !important;
}

html:not([data-mode="light"]) #trilhas-sugeridas .sd-card a {
  color: var(--pst-color-primary) !important;
  text-decoration-color: currentColor !important;
}

/* ====== TRILHAS GRID CARDS (DEBUGGING) ====== */
.eph-trilha-card.sd-card {
  background-color: #0f1112 !important; /* Hardcoded dark surface color */
  border: 1px solid #222627 !important; /* Hardcoded dark border color */
  color: #e6eef6 !important; /* Hardcoded light text color */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.eph-trilha-card.sd-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}
.eph-trilha-card.sd-card .sd-card-body {
  background-color: transparent !important;
}
.eph-trilha-card.sd-card .sd-card-title,
.eph-trilha-card.sd-card .sd-card-text,
.eph-trilha-card.sd-card .sd-card-text * {
  color: #e6eef6 !important; /* Hardcoded light text color */
}
.eph-trilha-card.sd-card .sd-card-text a {
  color: #4aa3ff !important; /* Hardcoded primary blue link color */
  font-weight: 600;
}
/* ====== DROPDOWNS ESPECÍFICOS: Evidências (Roxo) ====== */
/* Overrides for specific dropdown types to apply correct theme colors */
.sd-dropdown.eph-box--evidencia,
.sd-dropdown.eph-box--evidencia.sd-card {
  border-left: 6px solid var(--eph-box-evi-border);
  background: var(--eph-box-evi-bg);
  color: var(--eph-box-evi-fg);
}

.sd-dropdown.eph-box--evidencia summary,
.sd-dropdown.eph-box--evidencia .sd-summary-title,
.sd-dropdown.eph-box--evidencia .sd-card-header {
  background: var(--eph-box-evi-bg);
  color: var(--eph-box-evi-fg);
  border-bottom-color: rgba(255, 255, 255, 0.25); /* Inherit from generic or set explicitly */
}

.sd-dropdown.eph-box--evidencia .sd-summary-content,
.sd-dropdown.eph-box--evidencia .sd-dropdown-content,
.sd-dropdown.eph-box--evidencia .sd-card-body,
.sd-dropdown.eph-box--evidencia .sd-card-body.docutils {
  background: var(--eph-box-evi-bg) !important;
  color: var(--eph-box-evi-fg) !important;
  padding: 0.5rem 1rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15); /* Inherit from generic or set explicitly */
}

.sd-dropdown.eph-box--evidencia[open] summary,
.sd-dropdown.eph-box--evidencia[open] .sd-summary-title {
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

.sd-dropdown.eph-box--evidencia .sd-card-text,
.sd-dropdown.eph-box--evidencia p,
.sd-dropdown.eph-box--evidencia code,
.sd-dropdown.eph-box--evidencia pre,
.sd-dropdown.eph-box--evidencia .docutils,
.sd-dropdown.eph-box--evidencia .docutils * {
  background: transparent !important;
  color: inherit !important;
}