/*
 * Markdown preview styles for the AdminTool — mirror the Mintlify-style
 * prose palette used by the mobile app's MarkdownStyleSheet (Flutter).
 *
 * Default scale is mobile (`.prose-sm`, 14px base) — that's what the
 * majority of users see in the phone app. Add the `.prose-wide` class
 * alongside `.announcement-markdown-preview` to render the desktop /
 * tablet+ scale (`.prose`, 16px base).
 *
 * Wrap the rendered HTML in a container with the
 * `announcement-markdown-preview` class so these rules apply.
 *
 * Palette is hard-coded RGB (matches the gray scale from podpora.cubee.cz)
 * so the preview stays visually consistent regardless of the surrounding
 * MudBlazor theme.
 */

/* ---- Tokens (kept as comments for reference) -----------------------------
   gray-100 #EEF2F0   – code chip / pre / hr / table-body row border
   gray-200 #DFE3E0   – blockquote border / table head border
   gray-400 #9FA3A0   – list bullets (ul ::marker)
   gray-500 #6B7280   – ol counter (matches Tailwind/Mintlify prose-counters)
   gray-700 #3F4340   – body text
   gray-900 #171B19   – headings, strong, links, inline-code foreground
   eco-green #00A86B  – link underline color (kcEcoGreenColor placeholder; tweak if uikit theme exposes a value)
   --------------------------------------------------------------------------- */

.announcement-markdown-preview {
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.7143;
    font-weight: 400;
    color: #3F4340;
    word-wrap: break-word;
}

/* Trim outer whitespace so the host MudPaper's padding controls the gap. */
.announcement-markdown-preview > *:first-child { margin-top: 0; }
.announcement-markdown-preview > *:last-child { margin-bottom: 0; }

/* ---- Paragraphs --------------------------------------------------------- */
.announcement-markdown-preview p {
    margin: 0 0 16px 0;
}

/* ---- Headings (em-multiples of base) ------------------------------------ */
.announcement-markdown-preview h1,
.announcement-markdown-preview h2,
.announcement-markdown-preview h3,
.announcement-markdown-preview h4,
.announcement-markdown-preview h5,
.announcement-markdown-preview h6 {
    color: #171B19;
    margin-top: 0;
}

.announcement-markdown-preview h1 {
    font-size: 2.1429em;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 5px;
}
.announcement-markdown-preview h2 {
    font-size: 1.4286em;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-top: 22px;
    margin-bottom: 11px;
}
.announcement-markdown-preview h3 {
    font-size: 1.2857em;
    line-height: 1.5556;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-top: 16px;
    margin-bottom: 6px;
}
.announcement-markdown-preview h4 {
    font-size: 1.125em;
    line-height: 1.4286;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 4px;
}
.announcement-markdown-preview h5 {
    font-size: 1em;
    line-height: 1.5;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 0;
}
.announcement-markdown-preview h6 {
    font-size: 0.875em;
    line-height: 1.5;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 0;
}

/* ---- Inline ------------------------------------------------------------- */
.announcement-markdown-preview strong { font-weight: 600; color: #171B19; }
/* Strong inside headings carries a heavier weight than body strong — h1 hits
   the heaviest, scaling down per level. Matches Mintlify's prose CSS. */
.announcement-markdown-preview h1 strong { font-weight: 900; }
.announcement-markdown-preview h2 strong { font-weight: 800; }
.announcement-markdown-preview h3 strong,
.announcement-markdown-preview h4 strong { font-weight: 700; }
.announcement-markdown-preview em { font-style: italic; }
.announcement-markdown-preview del { text-decoration: line-through; }

.announcement-markdown-preview a {
    color: #171B19;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #00A86B;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}
.announcement-markdown-preview a:hover { text-decoration-thickness: 2px; }

/* ---- Lists -------------------------------------------------------------- */
.announcement-markdown-preview ul,
.announcement-markdown-preview ol {
    margin: 0 0 16px 0;
    padding-left: 22px;
}
.announcement-markdown-preview ul ul,
.announcement-markdown-preview ol ol,
.announcement-markdown-preview ul ol,
.announcement-markdown-preview ol ul { margin-bottom: 0; }

.announcement-markdown-preview li { margin: 0 0 4px 0; padding-left: 6px; }
.announcement-markdown-preview li > p { margin-bottom: 6px; }
/* Mintlify uses a slightly darker gray-500 for ordered-list counters than for
   unordered-list bullet glyphs (gray-400). */
.announcement-markdown-preview ul li::marker { color: #9FA3A0; }
.announcement-markdown-preview ol li::marker { color: #6B7280; }

/* GFM task lists. */
.announcement-markdown-preview li input[type="checkbox"] {
    margin: 0 6px 0 -2px;
    vertical-align: middle;
}

/* ---- Blockquote --------------------------------------------------------- */
.announcement-markdown-preview blockquote {
    border-left: 4px solid #DFE3E0;
    padding: 8px 16px;
    margin: 0 0 16px 0;
    color: #3F4340;
    font-style: normal;
}
.announcement-markdown-preview blockquote > *:first-child { margin-top: 0; }
.announcement-markdown-preview blockquote > *:last-child { margin-bottom: 0; }

/* ---- Horizontal rule ---------------------------------------------------- */
.announcement-markdown-preview hr {
    border: 0;
    border-top: 1px solid #EEF2F0;
    /* Mintlify base (.prose-sm): 2.857em ≈ 40px around the rule. Scaled to 3em
       (≈ 48px) at the wider scale via the .prose-wide override below. */
    margin: 2.857em 0;
}

/* ---- Code (inline chip + fenced block) ---------------------------------- */
.announcement-markdown-preview code {
    font-family: 'JetBrains Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.857em;
    font-weight: 500;
    color: #171B19;
    background-color: #EEF2F0;
    padding: 0.15em 0.4em;
    border-radius: 4px;
}
.announcement-markdown-preview pre {
    background-color: #EEF2F0;
    border-radius: 4px;
    padding: 9px 14px;
    margin: 0 0 16px 0;
    overflow-x: auto;
}
.announcement-markdown-preview pre > code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 1em;
    font-weight: 500;
    color: #171B19;
}

/* ---- Tables ------------------------------------------------------------- */
.announcement-markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px 0;
    font-size: 0.857em;
}
.announcement-markdown-preview thead { border-bottom: 1px solid #DFE3E0; }
.announcement-markdown-preview th {
    text-align: left;
    color: #171B19;
    font-weight: 600;
    padding: 0 14px 9px 14px;
}
.announcement-markdown-preview td {
    color: #3F4340;
    padding: 9px 14px;
    border-bottom: 1px solid #EEF2F0;
}
/* Mintlify: outer cells flush with the table edges, inner cells keep their
   horizontal padding so columns still read as separate. */
.announcement-markdown-preview th:first-child,
.announcement-markdown-preview td:first-child { padding-inline-start: 0; }
.announcement-markdown-preview th:last-child,
.announcement-markdown-preview td:last-child { padding-inline-end: 0; }
/* Mintlify also keeps the bottom border on the last row — kept by NOT
   overriding it here. */

/* ---- Images ------------------------------------------------------------- */
.announcement-markdown-preview img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 12px 0;
}

/* ---- Wide scale (.prose, 16px base) ------------------------------------ */
/* Toggled on by adding the `prose-wide` class alongside the preview class. */
.announcement-markdown-preview.prose-wide {
    font-size: 16px;
    line-height: 1.75;
}
.announcement-markdown-preview.prose-wide p { margin-bottom: 20px; }
.announcement-markdown-preview.prose-wide h1 {
    line-height: 1.1111;
    margin-bottom: 6px;
}
.announcement-markdown-preview.prose-wide h2 {
    line-height: 1.3333;
    margin-top: 32px;
    margin-bottom: 11px;
}
.announcement-markdown-preview.prose-wide h3 {
    line-height: 1.4;
    margin-top: 20px;
    margin-bottom: 8px;
}
.announcement-markdown-preview.prose-wide h4 {
    line-height: 1.5;
    margin-top: 16px;
    margin-bottom: 4px;
}
.announcement-markdown-preview.prose-wide h5,
.announcement-markdown-preview.prose-wide h6 { margin-top: 14px; }
.announcement-markdown-preview.prose-wide ul,
.announcement-markdown-preview.prose-wide ol {
    margin-bottom: 20px;
    padding-left: 26px;
}
.announcement-markdown-preview.prose-wide li { margin-bottom: 8px; }
.announcement-markdown-preview.prose-wide blockquote {
    padding: 12px 16px 12px 24px;
    margin-bottom: 20px;
}
.announcement-markdown-preview.prose-wide hr { margin: 3em 0; }
.announcement-markdown-preview.prose-wide pre {
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}
.announcement-markdown-preview.prose-wide img { margin: 16px 0; }
.announcement-markdown-preview.prose-wide table { margin-bottom: 20px; }
.announcement-markdown-preview.prose-wide th { padding: 0 9px 9px 9px; }
.announcement-markdown-preview.prose-wide td { padding: 9px; }