/*
 * HappeeMetronic Engine - Custom CSS Overrides
 *
 * This file contains custom styles and overrides for the Metronic theme.
 * It is loaded after metronic.css to allow overriding vendor styles.
 */

/* ============================================
   Component Overrides
   ============================================ */

/* Textareas should not use the fixed kt-input height */
textarea.kt-input {
  height: auto;
  min-height: 5rem;
  padding-block: 0.5rem;
  display: block;
}

/* Compact single-line composer textareas (channels, threads) */
textarea.kt-input.resize-none {
  min-height: 38px;
}

/* Allow account select dropdowns to escape overflow-x-auto containers (line items tables) */
.overflow-x-auto:has([data-controller="account-select"]) {
  overflow: visible;
}

/* Fix info alert color - use blue instead of violet */
.kt-alert-info {
  background-color: oklch(0.561 0.169 239.545) !important; /* blue-600 */
}

.kt-alert.kt-alert-outline.kt-alert-info .kt-alert-icon {
  color: oklch(0.561 0.169 239.545) !important; /* blue-600 */
}

.kt-alert.kt-alert-light.kt-alert-info {
  background-color: oklch(0.976 0.014 238.398) !important; /* blue-50 */
  color: oklch(0.172 0.096 241.066) !important; /* foreground */
  border-color: oklch(0.879 0.058 239.153) !important; /* blue-200 */
}

/* Semantic primitive vars — warning, info, success, danger.
   Metronic ships --primary/--secondary/--destructive/--mono but not these.
   Tailwind theme aliases for these tokens live in app/assets/tailwind/application.css
   (the build entrypoint); without that registration `bg-warning/10` etc. produce
   transparent backgrounds. */
:root {
  --warning: oklch(0.795 0.184 86.047); /* yellow-500 */
  /* Dark, not white: white on yellow-500 is ~2:1, unreadable. The amber is
     light in both themes, so a dark foreground is right for both. */
  --warning-foreground: var(--color-zinc-950);
  /* Amber as *text* on a light surface: yellow-500 on white is 1.8:1, so the
     outline/ghost/dim warning buttons use a darker step. In dark mode the
     surface flips and the light amber is the readable one. */
  --warning-emphasis: var(--color-yellow-700);
  --info: oklch(0.561 0.169 239.545); /* blue-600 */
  --info-foreground: var(--color-white);
  /* green-700, not green-500/600: this fill carries white text, and white on
     green-500 is 2.2:1 and on green-600 3.2:1 — both unreadable. green-700
     gives 4.95:1, in family with destructive (4.77:1). It doubles as the
     outline/ghost/dim *text* colour, where it reads 4.3:1 on the 10% tint. */
  --success: oklch(0.527 0.154 150.069); /* green-700 */
  --success-foreground: var(--color-white);
  --danger: var(--destructive);
  --danger-foreground: var(--destructive-foreground);
}
.dark {
  --warning: oklch(0.852 0.199 91.936); /* yellow-400 */
  --warning-emphasis: var(--warning); /* light amber reads fine on a dark surface */
  --info: oklch(0.707 0.165 254.624); /* blue-400 */
  /* The surface flips, so the bright green is the readable one as text
     (8:1 on the dark tint) — but it then needs a dark foreground when it is
     the fill, exactly as --warning does. White on it is 2.2:1. */
  --success: oklch(0.723 0.219 149.579); /* green-500 */
  --success-foreground: var(--color-zinc-950);
  --danger: var(--destructive);
}

/* Semantic button colours — warning, info, and success.
   Metronic ships .kt-btn-success (solid + outline) but no warning or info
   button at all, so `button(color: :warning)` and the hand-written
   `kt-btn-warning` anchors dotted through accounting/infra were rendering as
   plain primary. These fill the gap using the semantic vars above, following
   the same solid / outline / ghost shape the vendor uses for destructive.

   The vendor's success rules are shipped but not usable: metronic.css
   hardcodes oklch(72.3% 0.219 149.579) (green-500) for both the solid fill
   and the outline text and never reads --success, so white-on-green measured
   2.2:1 solid and 2.0:1 outline in the browser (WI-10902) even after
   WI-10823 wired the colour through. Restate both here so they consume the
   var like every other semantic colour.

   This file loads after metronic.css, so equal-specificity rules win on
   order. The ghost icon rules carry the vendor's :not() chain because
   `.kt-btn-ghost:not(.kt-btn-primary):not(.kt-btn-destructive) i` would
   otherwise paint the icon muted grey next to coloured label text. */

/* --- Solid --- */
.kt-btn-success {
  background-color: var(--success);
  color: var(--success-foreground);
}
.kt-btn-success:hover,
.kt-btn-success.active {
  background-color: color-mix(in oklab, var(--success) 90%, transparent);
}
.kt-btn-success i,
.kt-btn-success svg {
  color: var(--success-foreground);
}

.kt-btn-warning {
  background-color: var(--warning);
  color: var(--warning-foreground);
}
.kt-btn-warning:hover,
.kt-btn-warning.active {
  background-color: color-mix(in oklab, var(--warning) 90%, transparent);
}

.kt-btn-info {
  background-color: var(--info);
  color: var(--info-foreground);
}
.kt-btn-info:hover,
.kt-btn-info.active {
  background-color: color-mix(in oklab, var(--info) 90%, transparent);
}

/* --- Outline --- */
.kt-btn-outline.kt-btn-success {
  border-color: color-mix(in oklab, var(--success) 10%, transparent);
  background-color: color-mix(in oklab, var(--success) 10%, transparent);
  color: var(--success);
}
.kt-btn-outline.kt-btn-success i,
.kt-btn-outline.kt-btn-success svg {
  color: var(--success);
}
.kt-btn-outline.kt-btn-success:hover,
.kt-btn-outline.kt-btn-success.active {
  border-color: var(--success);
  background-color: var(--success);
  color: var(--success-foreground);
}
.kt-btn-outline.kt-btn-success:hover i,
.kt-btn-outline.kt-btn-success:hover svg,
.kt-btn-outline.kt-btn-success.active i,
.kt-btn-outline.kt-btn-success.active svg {
  color: var(--success-foreground);
}

.kt-btn-outline.kt-btn-warning {
  border-color: color-mix(in oklab, var(--warning) 10%, transparent);
  background-color: color-mix(in oklab, var(--warning) 10%, transparent);
  color: var(--warning-emphasis);
}
.kt-btn-outline.kt-btn-warning i,
.kt-btn-outline.kt-btn-warning svg {
  color: var(--warning-emphasis);
}
.kt-btn-outline.kt-btn-warning:hover,
.kt-btn-outline.kt-btn-warning.active {
  border-color: var(--warning);
  background-color: var(--warning);
  color: var(--warning-foreground);
}
.kt-btn-outline.kt-btn-warning:hover i,
.kt-btn-outline.kt-btn-warning:hover svg,
.kt-btn-outline.kt-btn-warning.active i,
.kt-btn-outline.kt-btn-warning.active svg {
  color: var(--warning-foreground);
}

.kt-btn-outline.kt-btn-info {
  border-color: color-mix(in oklab, var(--info) 10%, transparent);
  background-color: color-mix(in oklab, var(--info) 10%, transparent);
  color: var(--info);
}
.kt-btn-outline.kt-btn-info i,
.kt-btn-outline.kt-btn-info svg {
  color: var(--info);
}
.kt-btn-outline.kt-btn-info:hover,
.kt-btn-outline.kt-btn-info.active {
  border-color: var(--info);
  background-color: var(--info);
  color: var(--info-foreground);
}
.kt-btn-outline.kt-btn-info:hover i,
.kt-btn-outline.kt-btn-info:hover svg,
.kt-btn-outline.kt-btn-info.active i,
.kt-btn-outline.kt-btn-info.active svg {
  color: var(--info-foreground);
}

/* --- Ghost and dim (vendor ships only primary + destructive modifiers) ---
   The solid rules above are single-class, and this file loads after
   metronic.css, so `.kt-btn-info` would otherwise beat `.kt-btn-ghost`'s
   transparent background and paint a ghost button solid blue. Vendor's own
   destructive rules get away with staying silent here only because
   `.kt-btn-ghost` happens to sit later in metronic.css than
   `.kt-btn-destructive`. Restate the background explicitly rather than lean
   on source order. */
.kt-btn-ghost.kt-btn-success,
.kt-btn-ghost.kt-btn-warning,
.kt-btn-ghost.kt-btn-info,
.kt-btn-dim.kt-btn-success,
.kt-btn-dim.kt-btn-warning,
.kt-btn-dim.kt-btn-info {
  background-color: transparent;
}
.kt-btn-dim.kt-btn-success {
  color: var(--success);
}
.kt-btn-dim.kt-btn-warning {
  color: var(--warning-emphasis);
}
.kt-btn-dim.kt-btn-info {
  color: var(--info);
}

.kt-btn-ghost.kt-btn-success {
  color: var(--success);
}
.kt-btn-ghost.kt-btn-success:hover,
.kt-btn-ghost.kt-btn-success.active {
  background-color: var(--success);
  color: var(--success-foreground);
}

.kt-btn-ghost.kt-btn-warning {
  color: var(--warning-emphasis);
}
.kt-btn-ghost.kt-btn-warning:hover,
.kt-btn-ghost.kt-btn-warning.active {
  background-color: var(--warning);
  color: var(--warning-foreground);
}

.kt-btn-ghost.kt-btn-info {
  color: var(--info);
}
.kt-btn-ghost.kt-btn-info:hover,
.kt-btn-ghost.kt-btn-info.active {
  background-color: var(--info);
  color: var(--info-foreground);
}

.kt-btn-ghost:is(.kt-btn-success, .kt-btn-warning, .kt-btn-info):not(.kt-btn-primary):not(.kt-btn-destructive) :is(i, svg) {
  color: inherit;
}

/* --- Light (WI-10903) ---
   Metronic ships .kt-badge-light / .kt-alert-light / .kt-tooltip-light but no
   light *button*, so `button(variant: :light)` fell through variant_class to
   nil and painted 35 secondary actions — pagination arrows, Back links,
   Export — as solid primary. A light button is a tinted background with a
   coloured label and no border; hover resolves to the solid colour, the same
   move .kt-btn-outline makes.

   Bare .kt-btn-light is the neutral one, for `color: :secondary` / `:mono`
   (which carry no modifier class). The colour modifiers below override it. */
.kt-btn-light {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}
.kt-btn-light i,
.kt-btn-light svg {
  color: var(--muted-foreground);
}
.kt-btn-light:hover,
.kt-btn-light.active {
  background-color: var(--accent);
  color: var(--foreground);
}

/* Per-colour values, read by the shared rules underneath. --tint is the source
   colour for the background wash, --ink the label on that wash (warning needs
   --warning-emphasis: raw amber on a pale amber tint is unreadable), and
   --on-tint the label once hover fills the button solid. */
.kt-btn-light.kt-btn-primary {
  --kt-btn-light-tint: var(--primary);
  --kt-btn-light-ink: var(--primary);
  --kt-btn-light-on-tint: var(--primary-foreground);
}
.kt-btn-light.kt-btn-destructive {
  --kt-btn-light-tint: var(--destructive);
  --kt-btn-light-ink: var(--destructive);
  --kt-btn-light-on-tint: var(--destructive-foreground);
}
.kt-btn-light.kt-btn-success {
  --kt-btn-light-tint: var(--success);
  --kt-btn-light-ink: var(--success);
  --kt-btn-light-on-tint: var(--success-foreground);
}
.kt-btn-light.kt-btn-warning {
  --kt-btn-light-tint: var(--warning);
  --kt-btn-light-ink: var(--warning-emphasis);
  --kt-btn-light-on-tint: var(--warning-foreground);
}
.kt-btn-light.kt-btn-info {
  --kt-btn-light-tint: var(--info);
  --kt-btn-light-ink: var(--info);
  --kt-btn-light-on-tint: var(--info-foreground);
}

.kt-btn-light:is(.kt-btn-primary, .kt-btn-destructive, .kt-btn-success, .kt-btn-warning, .kt-btn-info) {
  background-color: color-mix(in oklab, var(--kt-btn-light-tint) 12%, transparent);
  color: var(--kt-btn-light-ink);
}
.kt-btn-light:is(.kt-btn-primary, .kt-btn-destructive, .kt-btn-success, .kt-btn-warning, .kt-btn-info) :is(i, svg) {
  color: inherit;
}
.kt-btn-light:is(.kt-btn-primary, .kt-btn-destructive, .kt-btn-success, .kt-btn-warning, .kt-btn-info):hover,
.kt-btn-light:is(.kt-btn-primary, .kt-btn-destructive, .kt-btn-success, .kt-btn-warning, .kt-btn-info).active {
  background-color: var(--kt-btn-light-tint);
  color: var(--kt-btn-light-on-tint);
}

/* ============================================
   Layout Utilities
   ============================================ */

/* Header height using CSS variable */
.h-header-height {
  height: var(--header-height);
}

/* This two .max- classes are deprecated Tailwind v4 utility needed for the kanban view */
.max-w-50vw {
  max-width: 50vw;
}

.max-h-80vh {
  max-height: 80vh;
}

/* ============================================
   Theme Utilities
   ============================================ */

/* Show/hide elements based on theme */
.theme-light-show {
  display: inline-block;
}

.theme-dark-show {
  display: none;
}

.dark .theme-light-show {
  display: none;
}

.dark .theme-dark-show {
  display: inline-block;
}

/* ============================================
   Missing Tailwind Utilities
   These fill gaps from Tailwind CSS purging
   ============================================ */

.pt-6 {
  padding-top: 1.5rem;
}

.gap-y-5 {
  row-gap: 1.25rem;
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }
  .md\:block {
    display: block;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .lg\:gap-7\.5 {
    gap: 1.875rem;
  }
  .lg\:mb-10 {
    margin-bottom: 2.5rem;
  }
}

/* ============================================
   Flash Highlight Animation
   Used to highlight newly uploaded/created items
   ============================================ */

@keyframes flash-highlight {
  0%   { background-color: rgb(34 197 94 / 0.15); }
  100% { background-color: transparent; }
}

.flash-highlight {
  animation: flash-highlight 3s ease-out forwards;
}

/* ============================================
   Message Highlight Animation
   Used to highlight a specific chat message when
   navigating via timestamp anchor links
   ============================================ */

@keyframes message-highlight {
  0% {
    box-shadow: inset 3px 0 0 0 oklch(62.8% 0.176 231.6); /* blue-500 left border */
    background-color: oklch(93.2% 0.032 254.1); /* blue-100 */
  }
  50% {
    box-shadow: inset 3px 0 0 0 oklch(62.8% 0.176 231.6);
    background-color: oklch(93.2% 0.032 254.1);
  }
  100% {
    box-shadow: inset 3px 0 0 0 oklch(62.8% 0.176 231.6 / 0%);
    background-color: transparent;
  }
}

.message-highlight {
  animation: message-highlight 4s ease-out forwards;
  border-radius: 4px;
}

.dark .message-highlight {
  animation: message-highlight-dark 4s ease-out forwards;
  border-radius: 4px;
}

@keyframes message-highlight-dark {
  0% {
    box-shadow: inset 3px 0 0 0 oklch(54.6% 0.245 262.881); /* blue-600 left border */
    background-color: oklch(28.2% 0.091 267.935 / 50%); /* blue-950 */
  }
  50% {
    box-shadow: inset 3px 0 0 0 oklch(54.6% 0.245 262.881);
    background-color: oklch(28.2% 0.091 267.935 / 50%);
  }
  100% {
    box-shadow: inset 3px 0 0 0 oklch(54.6% 0.245 262.881 / 0%);
    background-color: transparent;
  }
}

/* ============================================
   Accounting Table Styles
   Used by Income Statement, Balance Sheet, Chart of Accounts
   ============================================ */

/* Parent/top-level account rows get a subtle background */
.account-name-row > td {
  background-color: var(--kt-table-active-bg, #f1f5f9) !important;
  font-weight: 600;
}

.sub-account-row > td {
  padding-left: 1rem;
}

.sub-sub-account-row > td {
  padding-left: 1.5rem;
}

/* Dark mode support for account-name-row */
.dark .account-name-row > td,
[data-kt-theme-mode="dark"] .account-name-row > td {
  background-color: oklch(0.269 0.015 252.723 / 0.3) !important;
}

/* Total rows - thick border with medium gray */
.kt-table tr.accounting-total-row,
table tr.accounting-total-row,
tr.accounting-total-row {
  border-top: 2px solid #6b7280 !important; /* gray-500 */
}

/* Subtotal rows - medium border with lighter gray */
.kt-table tr.accounting-subtotal-row,
table tr.accounting-subtotal-row,
tr.accounting-subtotal-row {
  border-top: 1px solid #9ca3af !important; /* gray-400 */
}

/* ============================================
   Print Styles
   Layout resets for printing - use Tailwind print:hidden for specific elements
   ============================================ */


/* Remove browser-injected headers/footers (URL, title, date, page number) */
@page {
  margin: 0.5in;
}

@media print {
  /* Hide header, sidebar, navbar, footer */
  header,
  #header,
  .sidebar-nav,
  [id="sidebar-nav"],
  .sidebar-toc,
  .kt-navbar,
  footer,
  .kt-subheader,
  .kt-drawer,
  nav {
    display: none !important;
  }

  /* Generic print visibility */
  .no-print {
    display: none !important;
  }

  .gl-account-entries.hidden {
    display: block !important;
  }

  .gl-report-print table {
    font-size: 9px !important;
  }

  .gl-report-print th,
  .gl-report-print td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .gl-report-print .gl-account-header {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Hide chat bubble in print */
  #chat-bubble-container {
    display: none !important;
  }

  /* Hide workspace chat pane and its peek/hide tabs in print */
  #workspace-chat-pane,
  .workspace-chat-tab,
  [data-side-panel-target="peekTab"],
  [data-side-panel-target="hideTab"] {
    display: none !important;
  }

  /* Hide checkbox column in print */
  .form-check-input,
  th:has(.form-check-input),
  td:has(.form-check-input) {
    display: none !important;
  }

  /* Reset sidebar offset — sidebar is hidden in print, so remove the left margin.
     sidebar-main-wrapper uses CSS var(--sidebar-width) for its left margin;
     the old lg:ms-[280px] selector is kept for backward compatibility. */
  .sidebar-main-wrapper,
  .lg\:ms-\[280px\] {
    margin-inline-start: 0 !important;
  }

  /* Shrink fixed header spacer in print (header is hidden, full 64px gap not needed) */
  .h-16.shrink-0 {
    height: 0.5rem !important;
  }

  /* Reduce top padding in print */
  .pt-6, .pb-4, .py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Compact table rows in print */
  table th, table td {
    padding: 0.15rem 0.5rem !important;
  }

  /* Keep wide report tables inside the printable page width */
  .overflow-x-auto,
  .overflow-auto,
  .overflow-hidden {
    overflow: visible !important;
  }

  table {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 9pt !important;
  }

  table th, table td {
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Account name takes the slack; the totals stay grouped on the right */
  .gl-account-header {
    flex-wrap: nowrap !important;
  }

  .gl-account-header > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .gl-account-header > div:last-child {
    flex: 0 0 auto !important;
  }

  .gl-account-header .w-40 {
    width: 7rem !important;
  }

  /* Center the page header in print (scoped to the header row with pt-6) */
  .pt-6.border-b.border-border {
    text-align: center !important;
    border-bottom: none !important;
  }

  .pt-6.border-b.border-border > .flex.justify-between {
    display: block !important;
  }

  /* All text black in print */
  body {
    color: #000 !important;
  }

  * {
    color: inherit !important;
  }

  /* Print font sizes */
  body {
    font-size: 15px !important;
  }

  h1 {
    font-size: 18px !important;
  }


  /* Reduce indentation per level for print */
  td[data-indent-depth="1"] { padding-left: 32px !important; }
  td[data-indent-depth="2"] { padding-left: 48px !important; }
  td[data-indent-depth="3"] { padding-left: 64px !important; }
  td[data-indent-depth="4"] { padding-left: 80px !important; }
  td[data-indent-depth="5"] { padding-left: 96px !important; }
  td[data-indent-depth="6"] { padding-left: 112px !important; }

  /* Reset layout margins for full-width printing */
  .app-wrapper,
  .app-content,
  .kt-container-fixed,
  main {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Remove card border/shadow in print */
  .kt-card {
    box-shadow: none !important;
    border: none !important;
  }

  /* Allow flex/overflow containers to expand to natural height for print.
     Without this, flex wrappers with overflow-hidden clip long document content. */
  .sidebar-content-wrapper,
  .flex.grow,
  .flex-1,
  article {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Horizontal scroll containers cannot scroll on paper, so a table wider than
     the page silently loses its rightmost columns (a running balance prints as
     "$15,07"). Release the scroll container and fit the table to the page. */
  .kt-table-wrapper,
  .overflow-x-auto,
  .overflow-auto {
    overflow-x: visible !important;
    overflow: visible !important;
    max-width: 100% !important;
  }

  .kt-table-wrapper table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  /* Reset full-height layout's sidebar offset (left: var(--sidebar-width)) in print */
  .sidebar-content-wrapper {
    left: 0 !important;
    position: relative !important;
  }

  /* Suppress audit status badges on printed financial statements (WI-9100) */
  .audit-status-indicator {
    display: none !important;
  }

  /* Hide interactive collapse/expand controls in print (WI-9676) */
  [data-action*="collapsible-section#toggleSection"],
  [data-action*="collapsible-row#toggleRow"],
  [data-gl-report-target="expandIcon"] {
    display: none !important;
  }

}

/* ============================================
   Slide Markdown Styles
   Scoped to .slide-markdown inside deck slide components.
   Inherits font-family, color, and font-size from the
   parent div (set by each slide's template via AppliedStyle).
   ============================================ */

.slide-markdown {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: 1.5;
}

/* Paragraphs: minimal margin, no extra wrapping for plain text */
.slide-markdown .md-p {
  margin: 0 0 0.4em 0;
  font-size: inherit;
  color: inherit;
}

.slide-markdown .md-p:last-child {
  margin-bottom: 0;
}

/* Lists: inherit font and color, add deliberate bullet styling */
.slide-markdown .md-list {
  margin: 0.3em 0;
  padding-left: 1.2em;
  font-size: inherit;
  color: inherit;
}

.slide-markdown .md-list-item {
  margin-bottom: 0.25em;
  font-size: inherit;
  color: inherit;
}

.slide-markdown .md-list-item:last-child {
  margin-bottom: 0;
}

.slide-markdown .md-list-unordered {
  list-style-type: disc;
}

.slide-markdown .md-list-ordered {
  list-style-type: decimal;
}

/* Emphasis: inherit color from parent */
.slide-markdown .md-strong {
  font-weight: 700;
  color: inherit;
}

.slide-markdown .md-em {
  font-style: italic;
  color: inherit;
}

/* Inline code: subtle styling at slide scale */
.slide-markdown .md-code {
  font-size: 0.85em;
  padding: 0.1em 0.3em;
  border-radius: 0.2em;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
}

/* Block quotes */
.slide-markdown .md-blockquote {
  margin: 0.4em 0;
  padding-left: 0.8em;
  border-left: 3px solid currentColor;
  opacity: 0.8;
  font-size: inherit;
  color: inherit;
}

/* Headings: scale down to fit slide context */
.slide-markdown .md-h1,
.slide-markdown .md-h2,
.slide-markdown .md-h3,
.slide-markdown .md-h4,
.slide-markdown .md-h5,
.slide-markdown .md-h6 {
  font-weight: 700;
  margin: 0.4em 0 0.2em 0;
  border: none;
  padding: 0;
  color: inherit;
}

/* Links */
.slide-markdown .md-link {
  color: inherit;
  text-decoration: underline;
}

/* Code blocks: hide elaborate code block UI in slides */
.slide-markdown .md-code-block {
  margin: 0.4em 0;
  font-size: 0.75em;
}

.slide-markdown .md-code-block .md-code-header {
  display: none;
}

/* Horizontal rules */
.slide-markdown .md-hr {
  margin: 0.5em 0;
  border: none;
  border-top: 1px solid currentColor;
  opacity: 0.3;
}

/* Tables */
.slide-markdown .md-table-wrapper {
  margin: 0.4em 0;
  font-size: 0.8em;
}

/* Suppress the data-controller attribute from md-content that leaks through */
.slide-markdown [data-controller="code-copy"] {
  display: contents;
}