/* Custom CSS for Alpha Berkeley Framework Documentation - Minimal Original Theme Style */

/* Fix for project names that are parsed as links */
div.downstream-project-links a {
  text-decoration: none !important;
  color: inherit !important;
}

/* Clean table styling that matches original theme */
table.docutils {
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
}

table.docutils th,
table.docutils td {
  border: 1px solid var(--pst-color-border);
  padding: 8px 12px;
  text-align: left;
}

table.docutils th {
  background-color: var(--pst-color-surface);
  font-weight: 600;
}

/* Global Header Font Size Reduction */
/* Main page titles (h1) */
.bd-content h1 {
  font-size: 2rem !important;  /* Reduced from default ~2.5rem */
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Section headers (h2) */
.bd-content h2 {
  font-size: 1.6rem !important;  /* Reduced from default ~2rem */
  font-weight: 600;
  margin-top: 2.5rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--pst-color-border);
  padding-bottom: 0.3rem;
}

/* Subsection headers (h3) */
.bd-content h3 {
  font-size: 1.3rem !important;  /* Reduced from default ~1.6rem */
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* Sub-subsection headers (h4) */
.bd-content h4 {
  font-size: 1.1rem !important;  /* Reduced from default ~1.3rem */
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
}

/* Minor headers (h5, h6) */
.bd-content h5 {
  font-size: 1rem !important;   /* Reduced from default ~1.1rem */
  font-weight: 600;
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
}

.bd-content h6 {
  font-size: 0.9rem !important; /* Reduced from default ~1rem */
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--pst-color-text-muted);
}

/* Special styling for step headers that start with "Step" */
.bd-content h3[id*="step"] {
  color: var(--pst-color-primary);
  border-bottom: 1px solid var(--pst-color-border);
  padding-bottom: 0.5rem;
}

/* Mermaid Dark Mode Support for PyData Theme */
/* Comprehensive override for ALL Mermaid text elements in dark mode */

/* Catch-all for all text elements in Mermaid diagrams */
html[data-theme="dark"] .mermaid text,
html[data-theme="dark"] .mermaid tspan,
html[data-theme="dark"] .mermaid .label,
html[data-theme="dark"] .mermaid .nodeLabel,
html[data-theme="dark"] .mermaid .node-label,
html[data-theme="dark"] .mermaid .edgeLabel,
html[data-theme="dark"] .mermaid .labelText,
html[data-theme="dark"] .mermaid .messageText,
html[data-theme="dark"] .mermaid .noteText,
html[data-theme="dark"] .mermaid .loopText,
html[data-theme="dark"] .mermaid .actor-label,
html[data-theme="dark"] .mermaid .state-title,
html[data-theme="dark"] .mermaid .state-note,
html[data-theme="dark"] .mermaid .cluster-label,
html[data-theme="dark"] .mermaid .section,
html[data-theme="dark"] .mermaid .taskText,
html[data-theme="dark"] .mermaid .taskTextOutsideRight,
html[data-theme="dark"] .mermaid .taskTextOutsideLeft,
html[data-theme="dark"] .mermaid .titleText,
html[data-theme="dark"] .mermaid .pieTitleText,
html[data-theme="dark"] .mermaid .legendText,
html[data-theme="dark"] .mermaid .cScale0,
html[data-theme="dark"] .mermaid .cScale1,
html[data-theme="dark"] .mermaid .cScale2,
html[data-theme="dark"] .mermaid .cScale3,
html[data-theme="dark"] .mermaid .cScale4,
html[data-theme="dark"] .mermaid .cScale5,
html[data-theme="dark"] .mermaid .cScale6,
html[data-theme="dark"] .mermaid .cScale7,
html[data-theme="dark"] .mermaid .cScale8,
html[data-theme="dark"] .mermaid .cScale9 {
  fill: #fff !important;
  color: #fff !important;
}

/* Text inside specific containers */
html[data-theme="dark"] .mermaid .cluster-label text,
html[data-theme="dark"] .mermaid .cluster-label span,
html[data-theme="dark"] .mermaid .label text,
html[data-theme="dark"] .mermaid .label span,
html[data-theme="dark"] .mermaid .node text,
html[data-theme="dark"] .mermaid .node span,
html[data-theme="dark"] .mermaid .cluster text,
html[data-theme="dark"] .mermaid .cluster span,
html[data-theme="dark"] .mermaid .note text,
html[data-theme="dark"] .mermaid .note span,
html[data-theme="dark"] .mermaid .actor text,
html[data-theme="dark"] .mermaid .actor span {
  fill: #fff !important;
  color: #fff !important;
}

/* Foreign object content (HTML labels) */
html[data-theme="dark"] .mermaid foreignObject,
html[data-theme="dark"] .mermaid foreignObject div,
html[data-theme="dark"] .mermaid foreignObject span,
html[data-theme="dark"] .mermaid foreignObject p,
html[data-theme="dark"] .mermaid .label foreignObject,
html[data-theme="dark"] .mermaid .label foreignObject div,
html[data-theme="dark"] .mermaid .label foreignObject span {
  color: #fff !important;
}

/* Edge labels with background */
html[data-theme="dark"] .mermaid .edgeLabel {
  background-color: #333 !important;
  color: #fff !important;
}

html[data-theme="dark"] .mermaid .edgeLabel rect {
  fill: #333 !important;
  background-color: #333 !important;
}

/* Visual elements - arrows, lines, shapes */
html[data-theme="dark"] .mermaid .arrowheadPath {
  fill: #ddd !important;
  stroke: #ddd !important;
}

html[data-theme="dark"] .mermaid .edgePath .path {
  stroke: #ddd !important;
}

html[data-theme="dark"] .mermaid .flowchart-link {
  stroke: #ddd !important;
}

html[data-theme="dark"] .mermaid .cluster rect,
html[data-theme="dark"] .mermaid .node rect,
html[data-theme="dark"] .mermaid .node circle,
html[data-theme="dark"] .mermaid .node ellipse,
html[data-theme="dark"] .mermaid .node polygon,
html[data-theme="dark"] .mermaid .node path {
  fill: #444 !important;
  stroke: #aaa !important;
}

html[data-theme="dark"] .mermaid .marker {
  fill: #ddd !important;
  stroke: #ddd !important;
}

html[data-theme="dark"] .mermaid .marker.cross {
  stroke: #ddd !important;
}

/* Sequence diagram specific styling */
html[data-theme="dark"] .mermaid .actor {
  fill: #444 !important;
  stroke: #aaa !important;
}

html[data-theme="dark"] .mermaid .actor-line {
  stroke: #aaa !important;
}

html[data-theme="dark"] .mermaid .messageLine0,
html[data-theme="dark"] .mermaid .messageLine1 {
  stroke: #ddd !important;
}

/* Note styling */
html[data-theme="dark"] .mermaid .note {
  fill: #444 !important;
  stroke: #aaa !important;
}

/* State diagram styling */
html[data-theme="dark"] .mermaid .state {
  fill: #444 !important;
  stroke: #aaa !important;
}

/* Journey diagram styling */
html[data-theme="dark"] .mermaid .task,
html[data-theme="dark"] .mermaid .section0,
html[data-theme="dark"] .mermaid .section1,
html[data-theme="dark"] .mermaid .section2,
html[data-theme="dark"] .mermaid .section3 {
  fill: #444 !important;
  stroke: #aaa !important;
}

/* Gantt diagram styling */
html[data-theme="dark"] .mermaid .task0,
html[data-theme="dark"] .mermaid .task1,
html[data-theme="dark"] .mermaid .task2,
html[data-theme="dark"] .mermaid .task3,
html[data-theme="dark"] .mermaid .taskActive0,
html[data-theme="dark"] .mermaid .taskActive1,
html[data-theme="dark"] .mermaid .taskActive2,
html[data-theme="dark"] .mermaid .taskActive3,
html[data-theme="dark"] .mermaid .done0,
html[data-theme="dark"] .mermaid .done1,
html[data-theme="dark"] .mermaid .done2,
html[data-theme="dark"] .mermaid .done3 {
  fill: #444 !important;
  stroke: #aaa !important;
}

/* Ensure mermaid diagrams don't get inverted by any dark mode filters */
html[data-theme="dark"] .mermaid {
  filter: none !important;
}

/* Also handle light mode to ensure consistency */
html[data-theme="light"] .mermaid text,
html[data-theme="light"] .mermaid tspan,
html[data-theme="light"] .mermaid .label,
html[data-theme="light"] .mermaid .nodeLabel,
html[data-theme="light"] .mermaid .node-label,
html[data-theme="light"] .mermaid .edgeLabel,
html[data-theme="light"] .mermaid .labelText,
html[data-theme="light"] .mermaid .messageText,
html[data-theme="light"] .mermaid .noteText,
html[data-theme="light"] .mermaid .loopText,
html[data-theme="light"] .mermaid .actor-label,
html[data-theme="light"] .mermaid .state-title,
html[data-theme="light"] .mermaid .state-note,
html[data-theme="light"] .mermaid .cluster-label,
html[data-theme="light"] .mermaid foreignObject,
html[data-theme="light"] .mermaid foreignObject div,
html[data-theme="light"] .mermaid foreignObject span {
  fill: #333 !important;
  color: #333 !important;
}

html[data-theme="light"] .mermaid foreignObject,
html[data-theme="light"] .mermaid foreignObject div,
html[data-theme="light"] .mermaid foreignObject span {
  fill: #333 !important;
  color: #333 !important;
}

/* Learning Path Component Styling */
.learning-path {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 2rem;
  background: var(--pst-color-surface);
  border-radius: 8px;
  border: 1px solid var(--pst-color-border);
}

.path-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--pst-color-background);
  border-radius: 6px;
  border: 1px solid var(--pst-color-border);
  transition: all 0.2s ease;
  position: relative;
}

.path-step:hover {
  border-color: var(--pst-color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--pst-color-primary);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.step-content {
  flex: 1;
}

.step-content h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--pst-color-text-base);
}

.step-content p {
  margin: 0 0 1rem 0;
  color: var(--pst-color-text-muted);
  line-height: 1.5;
}

.step-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--pst-color-primary);
  color: white !important;
  text-decoration: none !important;
  border-radius: 4px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.step-link:hover {
  background: var(--pst-color-primary-dark);
  color: white !important;
}

/* Add connecting lines between steps */
.path-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 40px;
  bottom: -1.5rem;
  width: 2px;
  height: 1.5rem;
  background: var(--pst-color-border);
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
  .learning-path {
    padding: 1rem;
  }
  
  .path-step {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }
  
  .path-step::after {
    display: none;
  }
  
  .step-number {
    margin: 0 auto 1rem auto;
  }
}

/* Equal-width tabs for learning paths navigation - works with any number of tabs */
.sd-tab-set {
  width: 100%;
}

/* Force equal width distribution for all tab labels */
.sd-tab-set > label,
.sd-tab-set label[for*="sd-tab-item"] {
  flex: 1 1 0% !important;
  text-align: center !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
}

/* Target sphinx-design tab structure more specifically */
.sd-tab-set > input[type="radio"] + label {
  flex: 1 1 0% !important;
  text-align: center !important;
  justify-content: center !important;
}

/* Adaptive equal distribution - no hardcoded percentages */
.sd-tab-set > .sd-tab-label {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  text-align: center !important;
}

/* Natural-width tabs for multi-tab navigation - allows wrapping */
.sd-tab-set.natural-width > label,
.sd-tab-set.natural-width label[for*="sd-tab-item"] {
  flex: 0 1 auto !important;
  min-width: fit-content !important;
  max-width: none !important;
  text-align: center !important;
  justify-content: center !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
}

.sd-tab-set.natural-width > input[type="radio"] + label {
  flex: 0 1 auto !important;
  min-width: fit-content !important;
}

.sd-tab-set.natural-width > .sd-tab-label {
  flex: 0 1 auto !important;
  min-width: fit-content !important;
}

/* Allow tab wrapping for natural-width variant */
.sd-tab-set.natural-width {
  flex-wrap: wrap !important;
}

.sd-tab-set.natural-width > label {
  margin-bottom: 0.25rem !important;
}