/* ===========================================
   Custom color palette — muted, professional
   =========================================== */

/* Light mode */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #37474f;         /* blue-grey 800 — header bg */
  --md-primary-fg-color--light: #546e7a;  /* blue-grey 600 */
  --md-primary-fg-color--dark: #263238;   /* blue-grey 900 */
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #f5f5f5;
  --md-accent-fg-color: #5c6bc0;          /* indigo 400 — muted accent for links */
  --md-accent-fg-color--transparent: rgba(92, 107, 192, 0.1);
}

/* Dark mode */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #263238;         /* blue-grey 900 */
  --md-primary-fg-color--light: #37474f;
  --md-primary-fg-color--dark: #1a2327;
  --md-primary-bg-color: #e0e0e0;
  --md-primary-bg-color--light: #bdbdbd;
  --md-accent-fg-color: #7986cb;          /* indigo 300 — softer in dark */
  --md-accent-fg-color--transparent: rgba(121, 134, 203, 0.1);
}

/* ===========================================
   Header / Footer
   =========================================== */

/* Header — subtle, not shouting */
.md-header {
  background-color: var(--md-primary-fg-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Footer — blends with content */
.md-footer {
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color--light);
}

.md-footer-meta {
  background-color: var(--md-primary-fg-color--dark);
}

/* Copyright text */
.md-copyright {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.7rem;
}

/* ===========================================
   Navigation
   =========================================== */

/* Active nav item — subtle highlight */
.md-nav__link--active {
  color: var(--md-accent-fg-color) !important;
  font-weight: 600;
}

/* ===========================================
   Content
   =========================================== */

/* Table — compact, full-width with last column stretching */
.md-typeset table:not([class]) {
  font-size: 0.75rem;
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

.md-typeset table:not([class]) th {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35em 0.6em;
  white-space: nowrap;                  /* headers don't wrap */
  background-color: var(--md-default-bg-color--lighter, #f5f5f5);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: rgba(255, 255, 255, 0.05);
}

.md-typeset table:not([class]) td {
  font-size: 0.75rem;
  padding: 0.35em 0.6em;
}

/* Numeric columns — right-align, no wrap */
.md-typeset table:not([class]) td:nth-child(n) {
  vertical-align: top;
}

/* First column with links — no wrap */
.md-typeset table:not([class]) td:first-child a {
  white-space: nowrap;
}

/* Description columns (last in most tables) — allow wrapping */
.md-typeset table:not([class]) td:last-child {
  white-space: normal;
  min-width: 12em;
}

/* Schema table — icon column (PK/FK) fixed narrow width */
.md-typeset table:not([class]) th:first-child[style*="text-align: center"],
.md-typeset table:not([class]) td:first-child[style*="text-align: center"] {
  width: 1.2em !important;
  min-width: 1.2em !important;
  max-width: 2em !important;
  padding: 0.35em 0 !important;
}

/* Code in table cells — tighter */
.md-typeset table:not([class]) code {
  font-size: 0.7rem;
  padding: 0.1em 0.3em;
  white-space: nowrap;
}

.md-typeset table:not([class]) code {
  font-size: 0.7rem;
}

/* Data size table — fixed layout, equal size columns */
.md-typeset .table-data-size table {
  table-layout: fixed;
  width: 100%;
}
.md-typeset .table-data-size th:first-child,
.md-typeset .table-data-size td:first-child {
  width: 22%;
}
.md-typeset .table-data-size th:nth-child(2),
.md-typeset .table-data-size td:nth-child(2),
.md-typeset .table-data-size th:nth-child(3),
.md-typeset .table-data-size td:nth-child(3),
.md-typeset .table-data-size th:nth-child(4),
.md-typeset .table-data-size td:nth-child(4) {
  width: 26%;
  text-align: right;
}

/* Version badge in title */
.md-typeset h1 small {
  font-size: 0.5em;
  font-weight: 400;
  vertical-align: middle;
  background: var(--md-primary-fg-color--light);
  color: #ffffff;
  padding: 0.1em 0.5em;
  border-radius: 0.25em;
}

/* Admonition colors — softer */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: #66bb6a;
}

.md-typeset .admonition.info,
.md-typeset details.info {
  border-color: #42a5f5;
}

/* Code blocks — subtle background */
.md-typeset pre > code {
  border-radius: 6px;
}

/* Tabbed content — active tab highlight */
.md-typeset .tabbed-labels > label.tabbed-alternate:checked,
.md-typeset .tabbed-set > input:checked + label {
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}

/* ===========================================
   Mermaid diagrams — dark mode fix
   =========================================== */

/* Light mode — keep defaults, ensure readability */
[data-md-color-scheme="default"] .mermaid {
  --md-mermaid-font-family: var(--md-text-font-family);
}

/* Dark mode — brighten all elements */
[data-md-color-scheme="slate"] .mermaid {
  --md-mermaid-font-family: var(--md-text-font-family);
}

/* Node backgrounds in dark mode */
[data-md-color-scheme="slate"] .mermaid .node rect,
[data-md-color-scheme="slate"] .mermaid .node circle,
[data-md-color-scheme="slate"] .mermaid .node polygon {
  fill: #37474f !important;
  stroke: #90a4ae !important;
  stroke-width: 1.5px;
}

/* Node text in dark mode */
[data-md-color-scheme="slate"] .mermaid .nodeLabel,
[data-md-color-scheme="slate"] .mermaid .label {
  color: #eceff1 !important;
  fill: #eceff1 !important;
}

/* Edges/arrows in dark mode */
[data-md-color-scheme="slate"] .mermaid .edgePath .path,
[data-md-color-scheme="slate"] .mermaid .flowchart-link {
  stroke: #90a4ae !important;
  stroke-width: 1.5px;
}

[data-md-color-scheme="slate"] .mermaid .arrowheadPath {
  fill: #90a4ae !important;
}

/* Edge labels in dark mode */
[data-md-color-scheme="slate"] .mermaid .edgeLabel {
  background-color: #263238 !important;
  color: #b0bec5 !important;
}

[data-md-color-scheme="slate"] .mermaid .edgeLabel rect {
  fill: #263238 !important;
  opacity: 0.8;
}

/* Subgraph backgrounds in dark mode */
[data-md-color-scheme="slate"] .mermaid .cluster rect {
  fill: #1e2a30 !important;
  stroke: #546e7a !important;
}

[data-md-color-scheme="slate"] .mermaid .cluster span {
  color: #b0bec5 !important;
}

/* Styled nodes (fill colors from lessons) — lighten in dark mode */
[data-md-color-scheme="slate"] .mermaid [style*="fill:#e3f2fd"] { fill: #1a3a4a !important; }
[data-md-color-scheme="slate"] .mermaid [style*="fill:#fff3e0"] { fill: #3e2a10 !important; }
[data-md-color-scheme="slate"] .mermaid [style*="fill:#e8f5e9"] { fill: #1a3a1e !important; }
[data-md-color-scheme="slate"] .mermaid [style*="fill:#ffcdd2"] { fill: #4a1a1a !important; }
[data-md-color-scheme="slate"] .mermaid [style*="fill:#fff9c4"] { fill: #3a3510 !important; }
[data-md-color-scheme="slate"] .mermaid [style*="fill:#f3e5f5"] { fill: #2a1a3a !important; }
[data-md-color-scheme="slate"] .mermaid [style*="fill:#fce4ec"] { fill: #3a1520 !important; }

/* ===========================================
   Timeline
   =========================================== */

.md-typeset .timeline {
  list-style: none;
  padding: 0;
  margin: 1.5em 0;
}

.md-typeset .timeline li {
  position: relative;
  padding: 0 0 2em 2.5em;
}

/* Vertical line */
.md-typeset .timeline li::before {
  content: '';
  position: absolute;
  left: 0.55em;
  top: 1.2em;
  bottom: 0;
  width: 2px;
  background: var(--md-default-fg-color--lighter, #ccc);
}

.md-typeset .timeline li:last-child::before {
  display: none;
}

/* Circle marker */
.md-typeset .timeline li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  border: 2.5px solid var(--md-accent-fg-color);
  background: var(--md-default-bg-color);
}

.md-typeset .timeline li.done::after {
  background: var(--md-accent-fg-color);
}

.md-typeset .timeline .tl-title {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.2em;
}

.md-typeset .timeline .tl-title a {
  text-decoration: none;
}

.md-typeset .timeline .tl-desc {
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
  margin: 0;
}

.md-typeset .timeline .tl-time {
  font-size: 0.7rem;
  color: var(--md-default-fg-color--lighter);
  margin: 0;
}

/* ===========================================
   Persona avatars
   =========================================== */

.md-typeset .persona {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  margin: 1em 0;
}

.md-typeset .persona-avatar {
  flex-shrink: 0;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.md-typeset .persona-info {
  flex: 1;
}

.md-typeset .persona-info strong {
  font-size: 1.05em;
}

.md-typeset .persona-info p {
  margin: 0.2em 0 0;
  font-size: 0.85em;
  color: var(--md-default-fg-color--light);
}

.persona-ceo    { background: #37474f; }
.persona-mkt    { background: #e91e63; }
.persona-md     { background: #ff9800; }
.persona-cs     { background: #4caf50; }
.persona-log    { background: #2196f3; }
.persona-fin    { background: #9c27b0; }
.persona-analyst { background: #607d8b; }

/* Matrix table — contained within content area */
.md-typeset .table-matrix {
  overflow: hidden !important;
}
.table-matrix .md-typeset__scrollwrap {
  overflow: hidden !important;
}
.table-matrix .md-typeset__table {
  overflow: hidden !important;
  width: 100% !important;
}
.md-typeset .table-matrix table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
  font-size: 0.7rem;
  border-collapse: collapse;
}
.md-typeset .table-matrix th,
.md-typeset .table-matrix td {
  padding: 0.2em 0.05em;
  overflow: hidden;
}
.md-typeset .table-matrix th:first-child,
.md-typeset .table-matrix td:first-child {
  width: 18%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 0.3em;
}
.md-typeset .table-matrix th:nth-child(n+2),
.md-typeset .table-matrix td:nth-child(n+2) {
  text-align: center;
}
.md-typeset .table-matrix th:nth-child(n+2) {
  white-space: normal;
  line-height: 1.1;
  font-size: 0.6rem;
}

/* Language selector — subtle */
.md-header__option .md-select__link {
  font-size: 0.7rem;
  opacity: 0.8;
}

.md-header__option .md-select__link:hover {
  opacity: 1;
}

/* ===========================================
   Print / PDF — table overflow prevention
   =========================================== */

@media print {
  /* Shrink all tables to fit A4 width */
  .md-typeset table {
    font-size: 0.7rem !important;
    word-break: break-word;
  }

  .md-typeset table th,
  .md-typeset table td {
    padding: 2px 4px !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }

  /* Force tables to fit page width */
  .md-typeset__scrollwrap {
    overflow: visible !important;
  }

  .md-typeset__table {
    overflow: visible !important;
    max-width: 100% !important;
  }

  .md-typeset table {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Code blocks inside tables — smaller */
  .md-typeset table code {
    font-size: 0.65rem !important;
    padding: 0 2px !important;
  }

  /* Avoid page break inside tables */
  .md-typeset table {
    page-break-inside: avoid;
  }

  /* Avoid page break inside code blocks */
  .md-typeset pre {
    page-break-inside: avoid;
  }

  /* Avoid page break inside admonitions */
  .md-typeset .admonition,
  .md-typeset details {
    page-break-inside: avoid;
  }
}

/* ===========================================
   Wide table helper — apply to specific tables
   =========================================== */

/* Use: <div class="table-wide" markdown> ... table ... </div> */
.md-typeset .table-wide table {
  font-size: 0.75rem;
}
.md-typeset .table-wide th,
.md-typeset .table-wide td {
  padding: 4px 6px;
  white-space: normal;
}