/*
 * Kunena-specific overrides for the Maison Vessel template.
 *
 * Loaded only on `option=com_kunena` pages by `index.php` (cf. the
 * conditional `useStyle('template.vessel.kunena')` call). Keep this
 * file scoped to selectors that start with `#kunena.layout …` or are
 * otherwise specific to Kunena's markup — anything more general
 * belongs in template.css.
 *
 * Kunena's CSS loads AFTER vessel's in the Joomla 6 asset pipeline
 * (vessel is registered as a template asset early; Kunena's sheet
 * ships as a component asset later). Equal-specificity rules would
 * lose by order. The `html` prefix bumps these rules to specificity
 * (1,2,1) so they win against Kunena's (1,2,0); selectors that
 * already trump Kunena's via !important don't strictly need the
 * prefix but keep it for consistency.
 */

/* ── Recolour bbcode `[code]` blocks ────────────────────────────────
   Kunena's bundled Aurelia stylesheet paints `.bbcode_code_body` in a
   loud magenta (#e93f8e) regardless of the host template. Recolour to
   the editorial palette so code samples in posts look like a quiet
   inline block rather than a marketing alert. */
html #kunena.layout .bbcode_code,
html #kunena.layout .bbcode_code_head,
html #kunena.layout .bbcode_code_body {
	color: var(--ink);
	background: var(--bone);
}
html #kunena.layout .bbcode_code {
	border: 1px solid var(--line);
	border-radius: 6px;
	margin: 12px 0;
	overflow: hidden;
}
html #kunena.layout .bbcode_code_head {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	color: var(--mute);
	font-size: 11px !important; /* Kunena uses !important here too */
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 12px;
}
html #kunena.layout .bbcode_code_body {
	padding: 12px;
	font-family: var(--mono, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace);
	font-size: 13px;
	line-height: 1.5;
	white-space: pre-wrap !important; /* Kunena forces pre-line; we want spaces preserved */
}

/* ── Category-page topic icon column ────────────────────────────────
   The first cell of every topic row is `<th class="d-none d-md-table-
   cell center">` — meant to carry a small status icon via
   getTopicIcon(). On our install the helper returns an empty string
   (Kunena config defaults aren't wired up post-migration), so
   getTopicLink() falls back to rendering the topic subject as link
   content — duplicating the title cell next to it. Hide the column
   so the layout reads cleanly; re-enable in Kunena config + restore
   here if/when the icon helper is producing real icons. */
html #kunena.layout table.table tr > th.d-md-table-cell.center {
	display: none !important; /* beats Bootstrap's .d-md-table-cell !important */
	/* matches both thead's empty header cell and tbody's icon cell,
	   keeping the column count aligned (otherwise the "Last Post"
	   header floats off to the right with no body content under it). */
}

/* ── Structural placeholder rows ────────────────────────────────────
   Kunena's tables have several cells that look like stray boxes once
   vessel's editorial th border is applied:
   - `<tr class="kcontenttablespacer"><th>&nbsp;</th></tr>` between
     topic rows (visual gap between items)
   - `<tfoot>` row with empty form-group cells (would hold batch-
     action buttons but they aren't rendered on read-only views)
   Zero out borders + background on both so the cells become true
   empty space; if Kunena ever renders something inside the tfoot
   cells, the content still shows — only the cell chrome is hidden. */
html #kunena.layout table.table tr.kcontenttablespacer,
html #kunena.layout table.table tr.kcontenttablespacer > th,
html #kunena.layout table.table > tfoot > tr,
html #kunena.layout table.table > tfoot > tr > th,
html #kunena.layout table.table > tfoot > tr > td {
	border: 0 !important;
	background: transparent !important;
}

/* ── Dropdown caret ─────────────────────────────────────────────────
   Kunena emits BS3-era markup on topic-row action menus:
     <a class="btn border dropdown-toggle"><span class="caret"/></a>
   Two compounding problems on BS5 + vessel:
     1. BS5 auto-draws `.dropdown-toggle::after`, so rendering the
        BS3 span as well produces a doubled triangle.
     2. Kunena's own stylesheet sets `.dropdown-toggle { color: #0e2a40 }`
        (its dark navy), which beats vessel's `.btn { color: --bone }`
        cascade-wise. Computed color on the toggle then matches its
        background pixel-for-pixel and any `currentColor` triangle
        vanishes.
   Fix: kill the BS5 `::after`, force the toggle's text colour back
   to vessel's `.btn` foreground, and draw the triangle on `.caret`
   in an explicit colour (not `currentColor`, since Kunena overrode
   that). 9 px tall on the 11 px button text — visible but not loud. */
html #kunena.layout .dropdown-toggle::after {
	display: none !important;
}
html #kunena.layout a.btn.dropdown-toggle,
html #kunena.layout a.btn.dropdown-toggle:hover,
html #kunena.layout a.btn.dropdown-toggle:focus {
	color: var(--bone);
}
html #kunena.layout .btn.dropdown-toggle > .caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.3em;
	vertical-align: 0.15em;
	border-top: 9px solid var(--bone);
	border-right: 7px solid transparent;
	border-left: 7px solid transparent;
	border-bottom: 0;
}
html #kunena.layout .btn.dropdown-toggle:hover > .caret {
	border-top-color: var(--on-gold, var(--ink));
}

/* ── Monochrome `<img>` icons inside `.btn` ─────────────────────────
   Kunena ships avatar/status glyphs as standalone SVG files (e.g.
   `media/kunena/core/svg/person.svg`) and embeds them via plain
   `<img src=…>`. The SVGs are authored with `fill="currentColor"`,
   but `<img>`-loaded SVGs are sandboxed — they can't see the host
   document's CSS, so `currentColor` resolves to the SVG root's
   default (black). On vessel's navy `.btn` background the result
   is a black silhouette on dark navy, which the user reads as
   "same colour as the background".
   Re-tint to `--bone` via filter: `brightness(0)` normalises any
   baked colour to pure black, `invert(1)` flips to pure white.
   Close enough to the cream `--bone` foreground that the icon
   reads as part of the button label rather than a separate layer.
   Scoped to Kunena and to `.btn`-housed imgs so we don't recolour
   user-uploaded avatars on the rest of the forum. */
html #kunena.layout .btn > img[src$=".svg"] {
	filter: brightness(0) invert(1);
}

/* Quick-reply modal — use the full available width. Kunena renders
   each as a Bootstrap modal with id `kreply<postid>_form` (the
   Quick Reply button's data-bs-target). Scoped to those so the
   report / status-text modals keep their default size. */
.modal[id^="kreply"][id$="_form"] .modal-dialog {
	--bs-modal-width: 100%;
}