/* Styles for rendered forum post content (Syncfusion RTE output wrapped by ForumPostImageLightbox). */

/* Quote styling for rendered forum posts (Monday 12949187996): one affordance only, the
   left rule. The old decorative 3rem quote glyph was absolutely positioned over the padding
   box and collided with the first character (doubly so when the quote itself began with a
   typed quotation mark), and the italic + secondary colour made quotes dimmer than body copy. */
.forum-post-with-lightbox blockquote {
    border-left: 4px solid var(--mud-palette-primary);
    padding: 12px 18px;
    margin: 1em 0 1.5em 0;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
    border-radius: 0 8px 8px 0;
    color: var(--mud-palette-text-primary);
    font-size: 0.95em;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.forum-post-with-lightbox blockquote strong {
    color: var(--mud-palette-primary);
    font-style: normal;
    font-weight: 600;
}

.forum-post-with-lightbox blockquote p {
    margin: 0.5em 0;
}

.forum-post-with-lightbox blockquote p:first-child {
    margin-top: 0;
}

.forum-post-with-lightbox blockquote p:last-child {
    margin-bottom: 0;
}

/* Pasted inline presentation (Google Docs / Word) must not override the theme
   (Monday 12949126822). New pastes are cleaned in the editor and on save; this covers posts stored
   before that. Only elements that actually carry a colour, font or background declaration are
   touched, so the editor's own width styles on images and table cells, text-align and underline
   stay. Headings keep their own size, links keep link colour, bold/italic weights are untouched. */
.forum-post-with-lightbox :is(p, div, span, li, td, th, b, strong, i, em, u, s, blockquote, pre, code):is([style*="color"], [style*="font-family"], [style*="font-size"], [style*="background"]) {
    color: inherit !important;
    background-color: transparent !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

.forum-post-with-lightbox :is(h1, h2, h3, h4, h5, h6):is([style*="color"], [style*="font-family"], [style*="background"]) {
    color: inherit !important;
    background-color: transparent !important;
    font-family: inherit !important;
}

.forum-post-with-lightbox a:is([style*="color"], [style*="font-family"], [style*="font-size"], [style*="background"]) {
    color: var(--mud-palette-info) !important;
    background-color: transparent !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

/* An over-wide element (a pasted table, an oversized inline width) scrolls inside the post instead
   of pushing the page wide. */
.forum-post-with-lightbox {
    overflow-x: auto;
}

/* Images the editor inserted before the inline display class was persisted carry only
   "e-rte-image", which Syncfusion's global stylesheet renders as display:block + margin:auto
   (centered) even though the editor showed them inline. Render them the way the editor's own
   "e-imginline" does; new posts get the class itself on save (HtmlSanitizerService). Also covers the
   quoted parent excerpt above a reply, which renders outside the lightbox wrapper. */
:is(.forum-post-with-lightbox, .forum-reply-parent-excerpt) img.e-rte-image:not(.e-imginline):not(.e-imgbreak):not(.e-imgleft):not(.e-imgright):not(.e-imgcenter) {
    display: inline-block;
    float: none;
    margin: 0 5px;
    padding: 1px;
    max-width: 100%;
    vertical-align: bottom;
}

/* Table styling for rendered forum posts */
.forum-post-with-lightbox table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1em 0;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: table;
}

/* Header cells */
.forum-post-with-lightbox th {
    background: linear-gradient(
        180deg,
        var(--mud-palette-background-grey) 0%,
        rgba(var(--mud-palette-primary-rgb), 0.08) 100%
    );
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.025em;
    color: var(--mud-palette-text-primary);
    padding: 12px 12px;
    text-align: left;
    border-bottom: 2px solid rgba(var(--mud-palette-primary-rgb), 0.2);
}

/* Data cells */
.forum-post-with-lightbox td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Remove bottom border from last row */
.forum-post-with-lightbox tr:last-child td {
    border-bottom: none;
}

/* Alternating row colors */
.forum-post-with-lightbox tr:nth-child(even) {
    background-color: rgba(var(--mud-palette-background-grey-rgb), 0.3);
}

/* Hover state */
.forum-post-with-lightbox tbody tr:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
}

/* Link styling — use Info palette so links read as blue, not theme primary */
.forum-post-with-lightbox a {
    color: var(--mud-palette-info);
    text-decoration: underline;
}

.forum-post-with-lightbox a:hover {
    color: var(--mud-palette-info);
    text-decoration: underline;
    opacity: 0.85;
}

.forum-post-with-lightbox a:visited {
    color: var(--mud-palette-info);
}

/* Dark theme adjustments for blockquotes */
html.elevate-theme-dark .forum-post-with-lightbox blockquote {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Dark theme adjustments for tables */
html.elevate-theme-dark .forum-post-with-lightbox table {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

html.elevate-theme-dark .forum-post-with-lightbox th {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

html.elevate-theme-dark .forum-post-with-lightbox tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

html.elevate-theme-dark .forum-post-with-lightbox tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}