/*
 * Forum (Kunena 7, Aurelia markup) — loaded only on com_kunena pages, after template.css.
 *
 * - Everything is in @layer forum: above Bootstrap (vendor) and Kunena (kunena) layers.
 * - Scoped under #kunena (Kunena root), so it never styles site pages.
 * - Colors ONLY from tokens: text, muted, line/surface, and the yellow accent for
 *   current/hover/focus. No blue/red/green/teal from Bootstrap or Kunena.
 * - Design: the owner's flat Kunena design (section bars, bold yellow-hover titles,
 *   big stat numbers with small labels, zebra rows, profile column in posts), in the new style.
 */
@layer forum {

/* ---------- base: calmer type, neutral Bootstrap components ---------- */
#kunena {
  --kf-size: .95rem;
  --kf-small: .82rem;
  font-size: var(--kf-size);
  line-height: 1.55;
  color: var(--yac-text);

  /* Bootstrap component variables -> tokens */
  --bs-primary: var(--yac-text);
  --bs-primary-rgb: var(--yac-text-rgb);
}
/* .pagination defines its own --bs-pagination-* on itself: override them there */
#kunena .pagination {
  --bs-pagination-color: var(--yac-text);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: var(--yac-line);
  --bs-pagination-hover-color: var(--yac-text);
  --bs-pagination-hover-bg: var(--yac-surface);
  --bs-pagination-hover-border-color: var(--yac-line);
  --bs-pagination-focus-color: var(--yac-text);
  --bs-pagination-focus-bg: var(--yac-surface);
  --bs-pagination-active-color: var(--yac-accent-ink);
  --bs-pagination-active-bg: var(--yac-accent);
  --bs-pagination-active-border-color: var(--yac-accent);
  --bs-pagination-disabled-color: var(--yac-muted);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: var(--yac-line);
  --bs-pagination-font-size: var(--kf-small);
  --bs-pagination-padding-x: .7rem;
  --bs-pagination-padding-y: .3rem;
  --bs-pagination-border-radius: 8px;
}
#kunena a { color: var(--yac-text); text-decoration: none; }
#kunena a:hover { color: var(--yac-link); text-decoration: none; }
#kunena :is(h1, h2, h3, h4, h5) { color: var(--yac-text); letter-spacing: -.02em; line-height: 1.2; }
/*
 * Bootstrap utilities (.shadow*, .bg-*, .border) use !important. In cascade layers an
 * !important declaration in a LOWER layer (vendor) beats everything above, so they cannot be
 * overridden with rules. They read CSS variables, so override the variables.
 */
#kunena { --bs-box-shadow: none; --bs-box-shadow-sm: none; --bs-box-shadow-lg: none; --bs-border-color: var(--yac-line); }
#kunena .navbar.bg-light { --bs-bg-opacity: 0; }
#kunena .badge.bg-secondary, #kunena .badge.bg-success, #kunena .badge.bg-info, #kunena .badge.bg-danger, #kunena .badge.bg-warning {
  --bs-bg-opacity: 0; --bs-badge-color: var(--yac-muted); box-shadow: inset 0 0 0 1px var(--yac-line);
}
#kunena .text-muted { color: var(--yac-muted) !important; }
#kunena .bi { width: 1em; height: 1em; vertical-align: -.125em; }

/* all user names: same color, no red/blue/italic */
/* all user names: one calm accent color (no red admins / blue users), for contrast with the text */
#kunena { --kf-name: var(--yac-link); }
#kunena [class^="kwho-"], #kunena [class*=" kwho-"] { color: var(--kf-name) !important; font-style: normal; font-weight: 650; }
#kunena a:hover [class^="kwho-"], #kunena a:hover [class*=" kwho-"] { color: var(--yac-link-hover) !important; text-decoration: underline; }

/* buttons: neutral ghost buttons, accent only for primary actions */
#kunena .btn { --bs-btn-font-size: var(--kf-small); --bs-btn-font-weight: 650; --bs-btn-border-radius: 999px; }
/* icon + text buttons: icon centered on the text line, fixed gap */
#kunena .btn:not(.btn-close) { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; line-height: 1.2; }
#kunena .btn > svg, #kunena .btn > .bi { width: 1em; height: 1em; flex: none; vertical-align: 0; }
#kunena .btn.dropdown-toggle::after { margin-left: .1rem; }
#kunena :is(.btn-outline-primary, .btn-light, .btn-default, .btn-outline-secondary, .btn-secondary) {
  --bs-btn-color: var(--yac-text);
  --bs-btn-bg: var(--yac-bg);
  --bs-btn-border-color: var(--yac-line);
  --bs-btn-hover-color: var(--yac-text);
  --bs-btn-hover-bg: var(--yac-surface);
  --bs-btn-hover-border-color: var(--yac-line);
  --bs-btn-active-color: var(--yac-text);
  --bs-btn-active-bg: var(--yac-surface-2);
  --bs-btn-active-border-color: var(--yac-line);
  --bs-btn-focus-shadow-rgb: 245, 176, 12;
}
#kunena .btn-primary, #kunena .btn-success {
  --bs-btn-color: var(--yac-accent-ink);
  --bs-btn-bg: var(--yac-accent);
  --bs-btn-border-color: var(--yac-accent);
  --bs-btn-hover-color: var(--yac-accent-ink);
  --bs-btn-hover-bg: var(--yac-accent);
  --bs-btn-hover-border-color: var(--yac-accent);
  --bs-btn-active-bg: var(--yac-accent);
}
#kunena .btn-link { color: var(--yac-link); }
#kunena .badge { font-weight: 600; font-size: .72rem; border-radius: 999px; }

/* forms */
#kunena .form-control, #kunena .form-select, #kunena select {
  background-color: var(--yac-bg); color: var(--yac-text); border-color: var(--yac-line);
  font-size: var(--kf-size); /* radius: layout.css (it also joins input groups) */
}
#kunena .form-control:focus, #kunena .form-select:focus, #kunena select:focus { border-color: var(--yac-accent); box-shadow: none; }
#kunena .input-group-text { background: var(--yac-surface); color: var(--yac-muted); border-color: var(--yac-line); }
/* input groups (search, login pop-up): only the OUTER corners are round, parts are joined */
#kunena .input-group > * { border-radius: 0; }
#kunena .input-group > :first-child { border-top-left-radius: var(--yac-radius-s); border-bottom-left-radius: var(--yac-radius-s); }
#kunena .input-group > :last-child { border-top-right-radius: var(--yac-radius-s); border-bottom-right-radius: var(--yac-radius-s); }
#kunena .input-group > :not(:first-child) { margin-left: -1px; }
#kunena .input-group > .btn { display: inline-grid; place-items: center; min-width: 42px; }
/* older Bootstrap 4 markup (mobile login): icon + field INSIDE .input-group-prepend */
#kunena .input-group > .input-group-prepend { display: flex; flex: 1 1 auto; width: 100%; }
#kunena .input-group-prepend > * { border-radius: 0; }
#kunena .input-group-prepend > :first-child { border-top-left-radius: var(--yac-radius-s); border-bottom-left-radius: var(--yac-radius-s); }
#kunena .input-group-prepend > :last-child { border-top-right-radius: var(--yac-radius-s); border-bottom-right-radius: var(--yac-radius-s); flex: 1 1 auto; }
#kunena .input-group-prepend > :not(:first-child) { margin-left: -1px; }

/* notices (category description as "alert-info"): quiet box with accent line */
#kunena .alert-info, #kunena .alert {
  --bs-alert-bg: var(--yac-surface);
  --bs-alert-color: var(--yac-text);
  --bs-alert-border-color: var(--yac-line);
  border-left: 3px solid var(--yac-accent);
  border-radius: var(--yac-radius-s);
  font-size: var(--kf-size);
  padding: .8rem 3rem .8rem 1rem;
}
#kunena .btn-close { filter: none; opacity: .5; }
:root[data-bs-theme="dark"] #kunena .btn-close { filter: invert(1) grayscale(1); }

/* ---------- forum navigation bar (Index / Search / Log in) ---------- */
#kunena .navbar {
  --bs-border-radius: 999px; /* .rounded utility (!important) reads this: a pill, concentric with the pill links */
  display: flex; align-items: center; min-height: 0; margin: 0 0 1rem;
  padding: .3rem .35rem !important; border-radius: 999px !important; background: var(--yac-bg);
}
#kunena .navbar > .container-fluid { display: flex; align-items: center; justify-content: space-between; padding: 0; gap: .5rem; }
#kunena .navbar .float-end { float: none !important; margin-left: auto; }
#kunena .navbar .offcanvas-body, #kunena .navbar .navbar-nav { display: flex; flex-direction: row; gap: .15rem; margin: 0; padding: 0; }
/* one height for all controls in the bar (menu links, log in / user button, menu button), so the bar
   has the same height for guests and users, on desktop and in compact mode */
#kunena .navbar { --kf-bar-h: 32px; }
#kunena .navbar .nav-link { display: flex; align-items: center; height: var(--kf-bar-h); color: var(--yac-muted); font-weight: 600; padding: 0 .9rem; border-radius: 999px; line-height: 1.3; }
#kunena .navbar .nav-link:hover { color: var(--yac-text); background: var(--yac-surface); }
#kunena .navbar .nav-link.active { color: var(--yac-text); background: var(--yac-surface-2); }
#kunena .navbar .float-end .btn-group > .dropdown-toggle { height: var(--kf-bar-h); border-radius: 999px; padding: 0 .75rem; gap: .4rem; }
#kunena .navbar .float-end .dropdown-toggle > svg { width: 1.1em; height: 1.1em; color: var(--yac-muted); }

/* user button: round avatar (image or default icon) + caret in the pill */
#kunena .navbar .float-end .btn-group > .dropdown-toggle:has(> .rounded) { position: relative; padding: 0 .6rem 0 2px; }
#kunena .navbar .dropdown-toggle > .rounded,
#kunena .navbar .dropdown-menu .center .rounded {
  display: inline-grid; place-items: center; overflow: hidden; border-radius: 50% !important;
  width: calc(var(--kf-bar-h) - 6px); height: calc(var(--kf-bar-h) - 6px); background: var(--yac-surface-2); color: var(--yac-muted);
}
#kunena .navbar .dropdown-toggle > .rounded img,
#kunena .navbar .dropdown-menu .center .rounded img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#kunena .navbar .dropdown-toggle > .rounded svg { width: 60%; height: 60%; }
/* Kunena colors the online icon green: use fill (its rule sets only color) */
#kunena .navbar :is(.dropdown-toggle, .dropdown-menu .center) .rounded svg { fill: var(--yac-muted); }
/* online: a small dot on the avatar (a ring made the button taller than the bar) */
#kunena .navbar .dropdown-toggle:has(> .rounded.green)::before {
  content: ""; position: absolute; left: calc(var(--kf-bar-h) - 11px); bottom: 3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--yac-accent); box-shadow: 0 0 0 2px var(--yac-bg);
}

/* user menu */
#kunena .navbar .dropdown-menu { min-width: 240px; padding: .5rem; }
#kunena .navbar .dropdown-menu .center { text-align: center; padding: .6rem .5rem .2rem; }
#kunena .navbar .dropdown-menu .center p { margin: 0 0 .35rem; font-size: var(--kf-small); color: var(--yac-muted); }
#kunena .navbar .dropdown-menu .center .rounded { width: 72px; height: 72px; margin: .2rem 0 .5rem; }
#kunena .navbar .dropdown-menu .center .rounded svg { width: 55%; height: 55%; }
#kunena .navbar .dropdown-divider { border-color: var(--yac-line); margin: .4rem 0; }
#kunena .navbar #status-online { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: 0 .15rem; }
#kunena .navbar #status-online .btn { margin: 0 !important; display: flex !important; justify-content: center; white-space: nowrap; }
#kunena .navbar #status-online .btn svg { display: none; }
#kunena .navbar #status-online .btn { color: var(--yac-text); }
#kunena .navbar :is(.btn-outline-success, .btn-outline-warning, .btn-outline-danger, .btn-outline-secondary) {
  --bs-btn-color: var(--yac-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--yac-line);
  --bs-btn-hover-color: var(--yac-text); --bs-btn-hover-bg: var(--yac-surface); --bs-btn-hover-border-color: var(--yac-line);
  --bs-btn-active-color: var(--yac-accent-ink); --bs-btn-active-bg: var(--yac-accent); --bs-btn-active-border-color: var(--yac-accent);
}
#kunena .navbar .dropdown-menu .btn-link {
  display: flex; align-items: center; justify-content: flex-start; gap: .55rem; width: 100%; padding: .45rem .7rem; border-radius: var(--yac-radius-s);
  color: var(--yac-text); text-decoration: none; font-size: var(--kf-size); font-weight: 550;
}
#kunena .navbar .dropdown-menu .btn-link:hover { background: var(--yac-surface); color: var(--yac-text); }
#kunena .navbar .dropdown-menu .btn-link svg { color: var(--yac-muted); }

/* log in pop-up (two copies in Kunena: desktop and compact, with different markup) */
#kunena .navbar :is(#kdesktop-userdropdown, #kmobile-userdropdown) { width: 270px; padding: .75rem; }
#kunena .navbar :is(#kdesktop-loginform, #kmobile-loginform) .form-group { margin: 0 0 .5rem; }
#kunena .navbar :is(#kdesktop-loginform, #kmobile-loginform) .input-group-text { width: 40px; justify-content: center; padding: 0; }
/* compact copy: its labels use the Bootstrap 2 class element-invisible, which Bootstrap 5 does not hide */
#kunena .navbar .element-invisible { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* desktop copy: field first, icon last in the markup; show the icon first, as in the compact copy */
#kunena .navbar #kdesktop-loginform .input-group > .input-group-text { order: -1; margin-left: 0; border-radius: var(--yac-radius-s) 0 0 var(--yac-radius-s); }
#kunena .navbar #kdesktop-loginform .input-group > .form-control { margin-left: -1px; border-radius: 0 var(--yac-radius-s) var(--yac-radius-s) 0; }
/* remember me: checkbox before the label (Bootstrap 4 custom-control markup) */
#kunena .navbar #kform-login-remember { margin: .25rem 0 .75rem; }
#kunena .navbar #kform-login-remember .controls { padding: 0; }
#kunena .navbar #kform-login-remember .custom-checkbox { display: flex; align-items: center; gap: .5rem; padding: 0; min-height: 0; }
#kunena .navbar #kform-login-remember .custom-control-input { position: static; order: 0; opacity: 1; z-index: auto; margin: 0; width: 1rem; height: 1rem; accent-color: var(--yac-accent); }
#kunena .navbar #kform-login-remember .custom-control-label { order: 1; margin: 0; color: var(--yac-text); font-weight: 500; }
#kunena .navbar #kform-login-remember .custom-control-label::before,
#kunena .navbar #kform-login-remember .custom-control-label::after { content: none; }
#kunena .navbar :is(#kform-login-desktop-submit, #kmobile-form-login-submit) p { margin: 0; }
#kunena .navbar :is(#kform-login-desktop-submit, #kmobile-form-login-submit) .btn { width: 100%; height: 36px; margin-bottom: .6rem;
  --bs-btn-color: var(--yac-accent-ink); --bs-btn-bg: var(--yac-accent); --bs-btn-border-color: var(--yac-accent);
  --bs-btn-hover-color: var(--yac-accent-ink); --bs-btn-hover-bg: var(--yac-accent); --bs-btn-hover-border-color: var(--yac-accent); }
#kunena .navbar :is(#kform-login-desktop-submit, #kmobile-form-login-submit) a { font-size: var(--kf-small); line-height: 1.9; }

/* compact: menu button (hamburger) with the same height as the user button */
@media (max-width: 991.98px) {
  #kunena .navbar .offcanvas-body, #kunena .navbar .navbar-nav { flex-direction: column; }
  #kunena .navbar-toggler { display: inline-grid; place-items: center; }
}
#kunena .navbar-toggler {
  height: var(--kf-bar-h); width: 44px; padding: 0;
  border-color: var(--yac-line); border-radius: 999px; font-size: 1rem;
}
#kunena .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(245, 176, 12, .35); }
#kunena .navbar-toggler-icon { width: 20px; height: 20px; }
#kunena .offcanvas { background: var(--yac-bg); color: var(--yac-text); }
#kunena .dropdown-menu {
  --bs-dropdown-bg: var(--yac-bg); --bs-dropdown-color: var(--yac-text);
  --bs-dropdown-border-color: var(--yac-line); --bs-dropdown-link-color: var(--yac-text);
  --bs-dropdown-link-hover-bg: var(--yac-surface); --bs-dropdown-link-active-bg: var(--yac-surface-2);
  --bs-dropdown-link-active-color: var(--yac-text);
  border-radius: var(--yac-radius-m); box-shadow: var(--yac-shadow-lg); font-size: var(--kf-size);
}

/* breadcrumbs */
#kunena .breadcrumb { --bs-breadcrumb-divider-color: var(--yac-muted); --bs-breadcrumb-item-active-color: var(--yac-muted); font-size: var(--kf-small); margin: .4rem 0 1rem; }
#kunena .breadcrumb a { color: var(--yac-muted); }
#kunena .breadcrumb a:hover { color: var(--yac-text); }

/* ---------- index: sections of categories ---------- */
#kunena .kfrontend.section {
  border: 1px solid var(--yac-line) !important; border-radius: var(--yac-radius-m) !important;
  overflow: hidden; margin-bottom: 1.5rem; background: var(--yac-bg);
}
#kunena .kfrontend .card-header {
  margin: 0; padding: .9rem 1.2rem; font-size: 1.1rem; font-weight: 800;
  background: var(--yac-surface-2); border: 0;
}
#kunena .kfrontend .card-header small { font-size: var(--kf-small); font-weight: 600; color: var(--yac-muted); margin-left: .4rem; }
#kunena .kfrontend > h2.btn-toolbar { margin: .55rem .7rem 0 0; }
#kunena .kfrontend > h2.btn-toolbar .btn { padding: .2rem .45rem; border-color: transparent; background: transparent; color: var(--yac-muted); }
#kunena .kfrontend > h2.btn-toolbar .btn:hover { color: var(--yac-text); background: var(--yac-surface); }
#kunena .kfrontend .collapse { box-shadow: none; border-radius: 0 !important; }
#kunena .bg-faded { background: transparent; color: var(--yac-muted); font-size: var(--kf-small); padding: .6rem 1.2rem !important; }

/* tables (index categories + topic lists) */
#kunena .table {
  --bs-table-bg: transparent; --bs-table-color: var(--yac-text); --bs-table-border-color: var(--yac-line);
  --bs-table-striped-bg: var(--yac-surface); --bs-table-hover-bg: var(--yac-surface);
  margin: 0; font-size: var(--kf-size);
}
#kunena .table > :not(caption) > * > * { padding: .85rem .8rem; border-bottom-color: var(--yac-line); vertical-align: middle; }
#kunena .table thead td, #kunena .table > tr:not(.category) td, #kunena .table > tbody > tr:not(.category) > :is(td, th) {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--yac-muted);
  padding-block: .55rem;
}
#kunena .table thead .bg-faded { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--kf-small); }
#kunena tr.category:nth-of-type(even) > * { background: var(--yac-surface); }
#kunena tr.category:hover > * { background: var(--yac-surface-2); }
#kunena tr.category .p-2 { padding: 0 !important; }

/* category/topic icons */
#kunena #kcat-icon, #kunena tr.category > th:first-child { width: 3.2rem; text-align: center; }
#kunena #kcat-icon svg, #kunena tr.category > th:first-child svg { width: 1.6rem; height: 1.6rem; color: var(--yac-muted); }
#kunena .yac-ticon { width: 1.6rem; height: 1.6rem; }
#kunena #kcat-icon .knewchar, #kunena .knewchar { color: var(--yac-link) !important; font-weight: 700; }

/* index: category name + description */
#kunena tr.category h3 { font-size: 1.02rem; font-weight: 800; margin: 0 0 .15rem; }
#kunena tr.category h3 a { color: var(--yac-text); }
#kunena tr.category h3 a:hover { color: var(--yac-link); }
#kunena tr.category h3 small { font-size: var(--kf-small); font-weight: 600; color: var(--yac-muted); margin-left: .35rem; }
#kunena tr.category h3 small .bi { display: none; }
#kunena .header-desc { color: var(--yac-muted); font-size: var(--kf-small); }
/* index: the same width for the last-post column in every section (each section is its own table,
   so without a width the column follows the length of the descriptions) */
@media (min-width: 768px) { #kunena tr.category > td:has(#kcat-last) { width: 30%; } }
/* Below 768px: Bootstrap's d-block (!important, in an earlier layer) makes the table a block, so the rows
   were only as wide as their content. The tbody becomes the full-width table instead. */
@media (max-width: 767.98px) { #kunena .kfrontend table.table > :is(thead, tbody) { display: table; width: 100%; } }
@media (min-width: 576px) and (max-width: 767.98px) { #kunena tr.category > td:has(#kcat-last) { width: 38%; } }

/* last post column */
#kunena .lastpostlink, #kunena .datepost { font-size: var(--kf-small); color: var(--yac-muted); }
#kunena .lastpostlink > a { color: var(--yac-text); font-weight: 600; }
#kunena .lastpostlink > a:hover { color: var(--yac-link); }
#kunena .lastpostlink [class*="kwho-"] { font-weight: 600; }

/* ---------- category page: topic rows ---------- */
#kunena .topictitle { font-weight: 750; font-size: 1rem; color: var(--yac-text); }
#kunena .topictitle:hover { color: var(--yac-link); }
#kunena .started { font-size: var(--kf-small); color: var(--yac-muted); margin-top: .15rem; }
#kunena .started .ktopic-category { display: none; } /* category is already the page title */
#kunena .started br:first-of-type { display: none; }
#kunena .started [class*="kwho-"] { font-weight: 600; }

/* replies/views: big numbers, small labels (old design) */
#kunena .replies, #kunena .views {
  display: inline-grid; justify-items: center; min-width: 4.2rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--yac-muted);
}
#kunena .repliesnum, #kunena .viewsnum { order: -1; font-size: 1.15rem; font-weight: 750; letter-spacing: 0; color: var(--yac-text); line-height: 1.2; }
#kunena .replies, #kunena .views { grid-template-areas: "n" "l"; }
#kunena .repliesnum, #kunena .viewsnum { grid-area: n; }

#kunena .page-item.active .page-link { color: var(--yac-accent-ink); background: var(--yac-accent); border-color: var(--yac-accent); font-weight: 700; }

/* phone: last post line under the topic */
#kunena #klastpostphone { font-size: var(--kf-small); color: var(--yac-muted); margin-top: .2rem; }
#kunena #klastpostphone a { color: var(--yac-muted); }
@media (max-width: 575.98px) {
  #kunena .row.message > .col-md-10 { padding: .9rem 1rem; }
  #kunena .row.message > .col-md-10 > .p-4 { padding: .2rem 0 .4rem !important; }
  #kunena .yac-post-head__meta { margin-left: 0; }
}

/* small per-topic pagination (1 2) */
#kunena .pagination-small .page-link { padding: .05rem .45rem; font-size: .75rem; }

/* category page title + description box */
#kunena .kunena-topic-item > h1, #kunena h1:not(.card-header) {
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem); font-weight: 800; letter-spacing: -.03em; margin: .5rem 0 1rem;
  line-height: 1.2; text-wrap: pretty; /* Kunena sets a fixed 24px: long titles overlapped. pretty: full-width lines, no lone last word */
}
#kunena h1 > :is(.bi, svg) { display: none; }

/* ---------- topic page: posts ---------- */
#kunena .row.message { --bs-gutter-x: 1.25rem; margin-bottom: 1.25rem; }
/* One card: profile column + message column with a flat join. The columns have Bootstrap's .rounded
   (border-radius: var(--bs-border-radius) !important, in a cascade layer, so it beats an unlayered
   !important): set the radius through the variable. */
#kunena .row.message > .col-md-2 {
  background: var(--yac-surface); --bs-border-radius: var(--yac-radius-m) 0 0 var(--yac-radius-m);
  padding: 1.2rem .6rem; border: 1px solid var(--yac-line); border-right: 0;
}
#kunena .row.message > .col-md-10 {
  background: var(--yac-bg); border: 1px solid var(--yac-line);
  --bs-border-radius: 0 var(--yac-radius-m) var(--yac-radius-m) 0; padding: 1rem 1.4rem;
}
@media (min-width: 576px) and (max-width: 767.98px) { /* columns stacked: profile on top */
  #kunena .row.message > .col-md-2 { --bs-border-radius: var(--yac-radius-m) var(--yac-radius-m) 0 0; border-right: 1px solid var(--yac-line); border-bottom: 0; }
  #kunena .row.message > .col-md-10 { --bs-border-radius: 0 0 var(--yac-radius-m) var(--yac-radius-m); }
}
@media (max-width: 575.98px) { /* no profile column */
  #kunena .row.message > .col-md-10 { --bs-border-radius: var(--yac-radius-m); }
}
#kunena .profilebox { list-style: none; padding: 0; margin: 0; font-size: var(--kf-small); color: var(--yac-muted); }
#kunena .profilebox li { margin-bottom: .35rem; }
#kunena .profilebox :is(li, span, div) { border: 0 !important; }
#kunena .profilebox li:first-child [class*="kwho-"] { font-size: .95rem; }
/* all avatars the same size: photos and the default icon */
#kunena .profilebox { --kf-avatar: 80px; }
#kunena .profilebox img[width="144"], #kunena .profilebox .rounded img { width: var(--kf-avatar); height: var(--kf-avatar); border-radius: 50%; object-fit: cover; }
#kunena .profilebox .bi-person { width: var(--kf-avatar); height: var(--kf-avatar); padding: 20px; border-radius: 50%; background: var(--yac-surface-2); color: var(--yac-muted); }
#kunena .profilebox img[height="1"] { display: none; } /* rank image spacer */
#kunena .topic-starter { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--yac-link); }
#kunena .profile-expand .btn { border: 0; background: transparent; color: var(--yac-muted); padding: .1rem .4rem; }
#kunena .profile-expand .btn:hover { color: var(--yac-text); }
#kunena .profile-expand .content ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .6rem;
  list-style: none; padding: .6rem 0 0; margin: .6rem 0 0; border-top: 1px solid var(--yac-line);
  font-size: var(--kf-small); line-height: 1.5; color: var(--yac-muted);
}
#kunena .profile-expand .content li { flex-basis: 100%; text-align: center; }
#kunena .profile-expand .content svg { width: 1rem; height: 1rem; fill: currentColor; vertical-align: -.15em; }
#kunena .profile-expand .content svg * { fill: currentColor; }
/* karma: small round −/+ buttons */
#kunena .profile-expand .yac-karma a {
  display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-left: .15rem;
  border: 1px solid var(--yac-line); border-radius: 50%; color: var(--yac-muted);
}
#kunena .profile-expand .yac-karma a:hover { color: var(--yac-text); background: var(--yac-surface-2); }
#kunena .profile-expand .yac-karma svg { width: .75rem; height: .75rem; }
/* icon-only items (birthday, send message): one row */
#kunena .profile-expand .content li.yac-profile-icon { flex-basis: auto; margin-top: .35rem; }
#kunena .profile-expand .yac-profile-icon :is(a, span) { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; color: var(--yac-muted); }
#kunena .profile-expand .yac-profile-icon a:hover { color: var(--yac-text); background: var(--yac-surface-2); }

#kunena .row.message > .col-md-10 > small { font-size: var(--kf-small); color: var(--yac-muted); }
#kunena .row.message > .col-md-10 > small a[id] { color: var(--yac-muted); font-weight: 650; }
#kunena .row.message > .col-md-10 > .p-4 { padding: .2rem 0 .8rem !important; margin-bottom: .5rem !important; }
#kunena .mykmsg-header {
  background: none !important; padding: 0 0 .7rem !important; margin: 0 0 .9rem; border-bottom: 1px solid var(--yac-line);
  font-size: var(--kf-small); color: var(--yac-muted);
}
#kunena .mykmsg-header em { font-style: normal; }
#kunena .mykmsg-header .topictitle { font-size: var(--kf-small); font-weight: 650; color: var(--yac-text); }
#kunena .kmsg { font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
#kunena .kmsg img { max-width: 100%; height: auto; border-radius: var(--yac-radius-s); }
#kunena .kmsg a { color: var(--yac-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--yac-link) 40%, transparent); }

/* quotes and code (old design: yellow left border) */
/* BBCode [quote] is <blockquote><p class="kmsgtext-quote">; in <p class="kmsg"> (topic history) the
   browser moves the <blockquote> out of the paragraph, so match it in .kmessage too. */
#kunena :is(.kmsg, .kmessage) blockquote, #kunena .kmsg :not(blockquote) > .kmsgtext-quote {
  margin: .8rem 0; padding: .6rem 1rem; border-left: 3px solid var(--yac-accent);
  background: var(--yac-surface); border-radius: 0 var(--yac-radius-s) var(--yac-radius-s) 0; color: var(--yac-muted);
}
#kunena blockquote > .kmsgtext-quote { margin: 0; padding: 0; border: 0; background: none; font-size: inherit; }
#kunena :is(blockquote, .bbcode_code) + br { display: none; }
/* [code]: a plain box, no "Code:" header. Kunena's CSS has #kunena.layout .bbcode_code_head {font-size:1.75rem !important}
   and .bbcode_code_body {color:pink}, so these selectors are stronger (white-space: see the end of the file). */
#kunena .bbcode_code { margin: .8rem 0; border: 1px solid var(--yac-line); border-radius: var(--yac-radius-s); overflow: hidden; }
#kunena.layout .bbcode_code > .bbcode_code_head { display: none; }
#kunena.layout .bbcode_code > .bbcode_code_body, #kunena .kmsg pre { margin: 0; padding: .6rem .85rem; background: var(--yac-surface); color: var(--yac-text); font: .85rem/1.55 var(--yac-font-mono); overflow-x: auto; white-space: pre; word-wrap: normal; }

/* signature */
#kunena .ksig { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--yac-line); font-size: var(--kf-small); color: var(--yac-muted); }
#kunena .ksig > hr { display: none; } /* Kunena adds its own line: keep only one */
#kunena .ksig a { color: var(--yac-muted); text-decoration: underline; }

/* "Please log in to join the conversation" */
#kunena .row.message > .col-md-10 > p { font-size: var(--kf-small); color: var(--yac-muted); margin: 0; }
#kunena .row.message > .col-md-10 > p .btn-link { color: var(--yac-link); padding: 0; vertical-align: baseline; }

/* ---------- reply / new topic form + SCEditor ---------- */
/* Kunena makes .tab-content a flex row: the active pane (editor) must fill it */
#kunena .tab-content > .tab-pane.active { flex: 1 1 100%; min-width: 0; }
#kunena .sceditor-container {
  width: 100% !important; border: 1px solid var(--yac-line) !important; border-radius: var(--yac-radius-m);
  background: var(--yac-bg); overflow: hidden;
}
#kunena .sceditor-container:focus-within { border-color: var(--yac-accent) !important; box-shadow: none; }
#kunena .sceditor-toolbar { background: var(--yac-surface); border-bottom: 1px solid var(--yac-line); padding: .35rem .4rem; }
#kunena .sceditor-group { background: transparent; border: 0; margin: 0 .35rem 0 0; padding: 0; }
#kunena .sceditor-group + .sceditor-group { border-left: 1px solid var(--yac-line); padding-left: .35rem; border-radius: 0; }
#kunena .sceditor-button { border-radius: 8px; }
#kunena .sceditor-button:hover, #kunena .sceditor-button.active { background: var(--yac-surface-2); box-shadow: none; }
:root[data-bs-theme="dark"] #kunena .sceditor-button div { filter: invert(.85); }
#kunena .sceditor-container textarea, #kunena .sceditor-container iframe {
  background: var(--yac-bg) !important; color: var(--yac-text) !important; font: 1rem/1.6 var(--yac-font) !important;
}
#kunena .sceditor-dropdown, #kunena ~ .sceditor-dropdown, .sceditor-dropdown {
  background: var(--yac-bg); color: var(--yac-text); border: 1px solid var(--yac-line); border-radius: var(--yac-radius-m); box-shadow: var(--yac-shadow-lg);
}
.sceditor-emoticons img, .sceditor-dropdown img { padding: 3px; border-radius: 6px; }
.sceditor-dropdown img:hover { background: var(--yac-surface-2); }
#kunena .nav-tabs { --bs-nav-tabs-border-color: var(--yac-line); --bs-nav-tabs-link-active-bg: var(--yac-bg); --bs-nav-tabs-link-active-color: var(--yac-text); --bs-nav-tabs-link-active-border-color: var(--yac-line) var(--yac-line) var(--yac-bg); --bs-nav-link-color: var(--yac-muted); --bs-nav-link-hover-color: var(--yac-text); }
#kunena form .control-label, #kunena form label { font-weight: 650; font-size: var(--kf-small); color: var(--yac-muted); }
/* accent buttons: dark text on yellow. Not the status buttons in the user menu (neutral outline buttons). */
#kunena :is(.btn-primary, .btn-success, .btn-outline-success, .kbutton-create):not(#status-online .btn) { color: var(--yac-accent-ink); }
#kunena :is(.btn-primary, .btn-success, .btn-outline-success, .kbutton-create) svg { fill: currentColor; }
#kunena .btn-outline-success, #kunena .btn-success {
  --bs-btn-color: var(--yac-accent-ink); --bs-btn-bg: var(--yac-accent); --bs-btn-border-color: var(--yac-accent);
  --bs-btn-hover-color: var(--yac-accent-ink); --bs-btn-hover-bg: var(--yac-accent); --bs-btn-hover-border-color: var(--yac-accent);
}
/* visible emoticon row (added by forum.js), like the old reply form */
#kunena .yac-emoticons { display: flex; flex-wrap: wrap; gap: 2px; padding: .35rem .5rem; background: var(--yac-surface); border-bottom: 1px solid var(--yac-line); }
#kunena .yac-emoticons button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
#kunena .yac-emoticons button:hover, #kunena .yac-emoticons button:focus-visible { background: var(--yac-surface-2); }
#kunena .yac-emoticons img { width: 18px; height: 18px; }

/* topic icon choice (new topic): the YACReader icons as selectable tiles */
#kunena input[name="topic_emoticon"] { position: absolute; opacity: 0; pointer-events: none; }
#kunena input[name="topic_emoticon"] + label, #kunena label:has(> input[name="topic_emoticon"]) {
  display: inline-grid; place-items: center; width: 46px; height: 46px; margin: 0 4px 4px 0; padding: 0;
  border: 1px solid var(--yac-line); border-radius: var(--yac-radius-s); cursor: pointer; background: var(--yac-bg);
}
#kunena input[name="topic_emoticon"]:checked + label, #kunena label:has(> input[name="topic_emoticon"]:checked) {
  border-color: var(--yac-accent); background: color-mix(in srgb, var(--yac-accent) 10%, var(--yac-bg));
}
#kunena input[name="topic_emoticon"]:focus-visible + label { outline: 2px solid var(--yac-accent); outline-offset: 2px; }
#kunena input[name="topic_emoticon"] + label :is(img, svg), #kunena label:has(> input[name="topic_emoticon"]) :is(img, svg) { width: 28px; height: 28px; color: var(--yac-text); }
:root[data-bs-theme="dark"] #kunena img[src*="/topic_icons/yacreader/"] { filter: invert(.88) hue-rotate(180deg); }

/* topic icons in lists: display size for the @2x images */
#kunena tr.category > th:first-child img[src*="/topic_icons/"] { width: 30px; height: 30px; }

#kunena .form-check-input:checked { background-color: var(--yac-accent); border-color: var(--yac-accent); }

/* ---------- post footer (built by forum.js): thank you | actions · report ---------- */
/* one grid for the post card: header, text, signature and actions share the same left/right edges */
#kunena .row.message > .col-md-10 > .shadow-none { padding: 0; margin: 0; }
#kunena .yac-post-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem;
  padding: 0 0 .75rem; margin: 0 0 1rem; border-bottom: 1px solid var(--yac-line);
  font-size: var(--kf-small); color: var(--yac-muted);
}
#kunena .yac-post-head__title { min-width: 0; }
#kunena .yac-post-head__title em { font-style: normal; }
#kunena .yac-post-head__title .topictitle { font-size: var(--kf-small); font-weight: 650; color: var(--yac-text); }
#kunena .yac-post-head__meta { display: inline-flex; align-items: baseline; gap: .6rem; margin-left: auto; white-space: nowrap; font-size: var(--kf-small); color: var(--yac-muted); }
#kunena .yac-post-head__meta .ip { padding: 0 !important; }
#kunena .yac-post-head__meta a[id] { color: var(--yac-muted); font-weight: 650; }
#kunena .yac-post-head__meta svg { align-self: center; }
#kunena .row.message > .col-md-10 .kmsg { margin: 0; }
#kunena .row.message > .col-md-10 .ksig { margin: 1rem 0 0; padding: .8rem 0 0; }
#kunena .row.message > .col-md-10 .ksignature { display: block; margin: 0; }
#kunena .yac-post-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem;
  margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--yac-line);
}
#kunena .yac-post-actions__left, #kunena .yac-post-actions__right { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
#kunena .yac-post-actions__right { margin-left: auto; }
/* align the button TEXT with the card edges (buttons keep their padding for the hover background) */
#kunena .yac-post-actions__left { margin-left: -.6rem; }
#kunena .yac-post-actions__right { margin-right: -.6rem; }
#kunena .yac-post-actions .btn {
  --bs-btn-padding-x: .6rem; --bs-btn-padding-y: .3rem; --bs-btn-font-size: var(--kf-small); --bs-btn-font-weight: 600;
  display: inline-flex; align-items: center; gap: .35rem;
  --bs-border-color: transparent; /* the .border utility (!important) reads it */
  background: transparent; color: var(--yac-muted); box-shadow: none;
}
#kunena .yac-post-actions .btn:hover, #kunena .yac-post-actions .btn:focus-visible { background: var(--yac-surface); color: var(--yac-text); }
#kunena .yac-post-actions .btn svg { width: 1em; height: 1em; }
#kunena .yac-post-actions .kbutton-thankyou:hover { color: var(--yac-link); }
#kunena .yac-post-actions .kbutton-delete:hover { color: var(--yac-text); }
#kunena .yac-post-actions .yac-report { --bs-btn-font-size: .75rem; color: var(--yac-muted); opacity: .75; }
#kunena .yac-post-actions .yac-report:hover { opacity: 1; }
#kunena .row.message > .col-md-10 [class*="thankyou"]:not(.btn) { font-size: var(--kf-small); color: var(--yac-muted); margin-top: .6rem; }
/* hearts: colored; Kunena puts no space between the heart and the text */
#kunena .kmessage-thankyou > svg:first-child { margin-right: .4rem; color: var(--yac-heart); }
#kunena .yac-post-actions .kbutton-thankyou svg { color: var(--yac-heart); }

/* ---------- reply / new topic form: action bar under the editor (built by forum.js) ---------- */
#kunena .yac-form-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem;
  margin-top: .9rem;
}
#kunena .yac-form-actions .form-check { margin: 0; font-size: var(--kf-small); color: var(--yac-muted); }
#kunena .yac-form-actions .form-check-label { font-weight: 500; }
#kunena .yac-form-actions__buttons { display: flex; gap: .5rem; margin-left: auto; }
#kunena .yac-form-actions__buttons .btn { --bs-btn-padding-x: 1.1rem; --bs-btn-padding-y: .5rem; --bs-btn-font-size: var(--kf-size); font-weight: 700; }
#kunena #form_submit_button { background: var(--yac-accent); border-color: var(--yac-accent); color: var(--yac-accent-ink); }
#kunena #form_submit_button:hover { filter: brightness(1.05); }
#kunena #form_submit_button svg { fill: currentColor; }

/* attachments: compact block below the form */
#kunena form#postform > h2 { font-size: 1rem; font-weight: 800; margin: 1.8rem 0 .6rem; }
#kunena .yac-attachments { border: 1px solid var(--yac-line); border-radius: var(--yac-radius-m); padding: .8rem 1rem; }
#kunena .yac-attachments #kpost-attachments { padding: 0 !important; margin: 0; }
#kunena .yac-attachments br { display: none; }
#kunena .yac-attachments #kattach_form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
#kunena .yac-attachments #dropzone .dropzone { min-height: 0; height: auto; padding: 0; margin: 0; border: 0; background: none; }
#kunena .yac-attachments #dropzone { flex-basis: 100%; min-height: 0; height: auto; padding: .9rem; border: 1px dashed var(--yac-line); border-radius: var(--yac-radius-s); color: var(--yac-muted); font-size: var(--kf-small); text-align: center; }

/* ---------- topic history under the reply form ---------- */
/* heading + Hide/Show button (override: com_kunena/layouts/topic/edit/history/default.php) */
#kunena .yac-history-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 .3rem; }
#kunena .yac-history-head h3 { font-size: 1rem; font-weight: 800; margin: 0; }
#kunena .yac-history-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--yac-line); border-radius: 999px; background: transparent; color: var(--yac-muted); font: 650 var(--kf-small)/1.4 var(--yac-font); cursor: pointer; }
#kunena .yac-history-toggle:hover { color: var(--yac-text); border-color: var(--yac-accent); }
#kunena .yac-history-toggle .yac-icon { width: 14px; height: 14px; transition: transform .15s; }
#kunena .yac-history-toggle[aria-expanded="true"] .yac-icon { transform: rotate(180deg); }
#kunena .yac-history-toggle[aria-expanded="true"] .yac-when-closed, #kunena .yac-history-toggle[aria-expanded="false"] .yac-when-open { display: none; }
#kunena #history > p { font-size: var(--kf-small); color: var(--yac-muted); }
#kunena #history > .row { margin: 0; padding: .9rem 0; border-top: 1px solid var(--yac-line); }
#kunena #history .col-md-2 { font-size: var(--kf-small); }
#kunena #history .profilebox img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
#kunena #history :is(.khistory, .kmessage) { border: 0; padding: 0; margin: 0; background: none; min-height: 0; }
/* Kunena sets [class*="badger-left"] { padding: 0 19px 0 14px !important } in @layer kunena; an !important
   in an earlier layer wins over this layer, so cancel it with the margin (the text lines up with the date) */
#kunena #history .khistory { margin-inline: -14px -19px; }
#kunena #history .kmsg { margin: 0; }
#kunena #history .kmessage > :last-child { margin-bottom: 0; }
#kunena #history .profilebox .bi-person { width: 40px; height: 40px; padding: 10px; }
#kunena #history .khistory::before, #kunena #history .khistory::after { display: none; content: none; }
#kunena #history :is(.kmsg, .kmessage) { font-size: var(--kf-size); line-height: 1.7; }
/* the date on its own line (its float overlapped quotes). Bootstrap's .float-end is a layered !important,
   so use a flex column: flex items ignore float. */
#kunena #history .col-md-10 { display: flex; flex-direction: column; }
#kunena #history small.text-muted { margin: 0 0 .4rem !important; font-size: .75rem; }

/* post states: unapproved (yellow tint) / deleted (red tint) — the only difference from a normal post */
#kunena .row.message > .message-unapproved { background: color-mix(in srgb, var(--yac-accent) 9%, var(--yac-bg)); }
#kunena .row.message:has(> .message-unapproved) > .col-md-2 { background: color-mix(in srgb, var(--yac-accent) 12%, var(--yac-surface)); }
#kunena .row.message > .message-deleted { background: color-mix(in srgb, #e5484d 7%, var(--yac-bg)); }
#kunena .row.message:has(> .message-deleted) > .col-md-2 { background: color-mix(in srgb, #e5484d 9%, var(--yac-surface)); }
/* the same states in topic lists (only moderators see them): row tint + a label after the title */
#kunena tr.unapproved > *, #kunena tr.unapproved:hover > * { background: color-mix(in srgb, var(--yac-accent) 10%, var(--yac-bg)); }
#kunena tr.deleted > *, #kunena tr.deleted:hover > * { background: color-mix(in srgb, #e5484d 8%, var(--yac-bg)); }
#kunena tr:is(.unapproved, .deleted) .topictitle::after {
  display: inline-block; margin-left: .5rem; padding: .05rem .5rem; border-radius: 999px; vertical-align: .1em;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5; text-transform: uppercase;
}
#kunena tr.unapproved .topictitle::after { content: "Unapproved"; color: var(--yac-accent-ink); background: var(--yac-accent); }
#kunena tr.deleted .topictitle::after { content: "Deleted"; color: #fff; background: #d9434b; }

/* buttons + their line at the bottom of the card (short post in a tall card) */
#kunena .row.message > .col-md-10 { display: flex; flex-direction: column; }
#kunena .row.message > .col-md-10 > .shadow-none { margin-bottom: .8rem; }

/* "Last edit: ... Reason: ..." = a small muted line, not a message box */
#kunena .row.message .alert-info:not([id*="headerdesc"]) {
  margin: .9rem 0 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: var(--kf-small); color: var(--yac-muted);
}

/* unread topics: accent marker instead of Kunena green */
#kunena .topic-item-unread, #kunena tr.category.topic-item-unread > :first-child { border-left-color: var(--yac-accent) !important; }
#kunena .knewchar { color: var(--yac-link) !important; }

/* ---------- toolbars (pagination | search), built by forum.js: same space above and below lists ---------- */
#kunena .yac-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 1rem 0; }
#kunena .yac-toolbar > div:last-child:not(:first-child) { margin-left: auto; }
#kunena .yac-toolbar .pagination { margin: 0; }
#kunena .yac-toolbar form, #kunena .yac-toolbar .kunena-search { margin: 0; }
#kunena .yac-toolbar__search { margin: 0; font-size: inherit; font-weight: inherit; }
#kunena .kunena-topic-item > .topic-item-messages { margin: 0; }
#kunena > .kfrontend:not(.section), #kunena .kunena-topic-item > .kfrontend:not(.section) { margin: 0 !important; }

/* list page titles: "No Replies  2 topics" on one line, like the index section headers */
#kunena h1:not(.card-header) small {
  display: inline-block; margin-left: .6rem; font-size: var(--kf-small); font-weight: 600; letter-spacing: 0; color: var(--yac-muted);
}
#kunena .row > .col-md-12 > h1:not(.card-header) { margin-bottom: .4rem; }

/* ---------- forms: even rows, quiet focus ---------- */
/* label + field rows (category, subject, name/email for guests): a grid on the editor's edges,
   not Bootstrap columns (their padding moved the fields in from the editor) */
#kunena form#postform .form-group.row { align-items: center; margin: 0 0 .9rem; }
#kunena form#postform .form-group.row:has(> .col-form-label) { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .4rem 1rem; }
#kunena form#postform .form-group.row:has(> .col-form-label) > * { width: auto; max-width: none; padding: 0; margin: 0; }
#kunena form#postform .form-group.row > .col-form-label { padding-block: 0; }
@media (max-width: 575.98px) { #kunena form#postform .form-group.row:has(> .col-form-label) { grid-template-columns: minmax(0, 1fr); } }
#kunena form#postform #postcatid { max-width: 420px; }
#kunena .form-control:focus, #kunena .form-select:focus, #kunena select:focus { border-color: var(--yac-accent); box-shadow: none; }
#kunena select option, #kunena select optgroup { background-color: var(--yac-bg); color: var(--yac-text); }
#kunena select option:disabled { color: var(--yac-muted); }

/* ---------- search page (Bootstrap accordion + fieldsets) ---------- */
#kunena .accordion {
  --bs-accordion-bg: var(--yac-bg); --bs-accordion-color: var(--yac-text); --bs-accordion-border-color: var(--yac-line);
  --bs-accordion-border-radius: var(--yac-radius-m); --bs-accordion-inner-border-radius: calc(var(--yac-radius-m) - 1px);
  --bs-accordion-btn-color: var(--yac-text); --bs-accordion-btn-bg: var(--yac-surface-2);
  --bs-accordion-active-color: var(--yac-text); --bs-accordion-active-bg: var(--yac-surface-2);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--yac-accent) 16%, transparent);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa1b0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa1b0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  --bs-accordion-btn-padding-y: .8rem; --bs-accordion-body-padding-y: 1.1rem;
}
#kunena .accordion-button { font-size: 1rem; font-weight: 800; }
#kunena .accordion-body { margin: 0; }
#kunena .accordion-body legend { font-size: var(--kf-size); font-weight: 700; margin: 0 0 .5rem; color: var(--yac-text); float: none; }
#kunena .accordion-body .form-select, #kunena .accordion-body .form-control { margin-bottom: .6rem; }
#kunena .accordion-body .input-group { flex-wrap: nowrap; }
#kunena .accordion-body .input-group > .form-control { margin-bottom: 0; }
#kunena .accordion-body .input-group > .btn { --bs-btn-padding-y: 0; display: grid; place-items: center; min-width: 42px; }
#kunena .accordion-body .checkbox { display: flex; align-items: center; gap: .45rem; min-height: 38px; }
#kunena .accordion-body .checkbox input { margin: 0; }
#kunena .accordion-body .checkbox, #kunena .accordion-body .radio, #kunena .accordion-body label { font-size: var(--kf-small); color: var(--yac-muted); }
#kunena input[type="checkbox"], #kunena input[type="radio"] { accent-color: var(--yac-accent); }
#kunena select[multiple] { padding: .3rem; border-radius: var(--yac-radius-s); background-image: none; }
#kunena select[multiple] option { padding: .25rem .5rem; border-radius: 6px; }
#kunena select[multiple] option:checked { background: var(--yac-surface-2); color: var(--yac-text); }
#kunena form[action$="/search"] .btn { --bs-btn-padding-x: 1.1rem; --bs-btn-padding-y: .5rem; --bs-btn-font-size: var(--kf-size); }
#kunena form[action$="/search"] button[type="submit"], #kunena form[action$="/search"] input[type="submit"] { background: var(--yac-accent); border-color: var(--yac-accent); color: var(--yac-accent-ink); }

/* ---------- less noise ---------- */
/* category description box: repeats the text of the category header */
#kunena .alert[id*="headerdesc"] { display: none; }
/* "Category / Last Post" label row in every index section */
#kunena .kfrontend .table tr:not(.category):not(:has(.bg-faded)) { display: none; }
/* guests: login hint in the post footer (forum.js), on every post — never hide it */
#kunena .row.message > .col-md-10 > .yac-login-hint {
  margin: .8rem 0 0; padding-top: .6rem; border-top: 1px solid var(--yac-line);
  font-size: var(--kf-small); color: var(--yac-muted); text-align: right;
}
#kunena .kmsg { font-family: var(--yac-font); }

/* footer credit */
#kunena + div, #kunena .kcredits { font-size: .75rem; color: var(--yac-muted); text-align: center; margin-top: 1.5rem; }
#kunena + div a { color: var(--yac-muted); }

/* category jump menu */
#kunena select[name="catid"] { max-width: 280px; font-size: var(--kf-small); }

/* ---------- bottom of the post card (last in the file: these must win) ----------
   [text ... ] [signature] [button bar | guest login line], signature + bar pinned to the bottom. */
#kunena .row.message > .col-md-10 > :is(.yac-post-actions, .yac-login-hint) { margin-top: auto; }
#kunena .row.message > .col-md-10 > .ksig { margin: auto 0 0; padding: .8rem 0 0; }
#kunena .row.message > .col-md-10 > .ksig + :is(.yac-post-actions, .yac-login-hint) { margin-top: .8rem; }
}

/* post editor: with private messages off (sql/41-kunena-config.sql) the tab bar has only "Message" */
#kunena #myTab:not(:has(#profile-tab)) { display: none; }

/* quick reply pop-up (Kunena message/edit/quickreply.php; two variants: .card-body > form + .k-footer,
   or form > .card-body + .card-footer). Line 1..n: fields; then [notify checkbox ... Go to editor];
   footer: [BBcode note ... Cancel Submit] */
#kunena [id^="kreply"][id$="_form"] :is(.card-body:has(> .gotoeditor), form:has(> .gotoeditor)) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center;
}
#kunena [id^="kreply"][id$="_form"] :is(.card-body, form):has(> .gotoeditor) > * { grid-column: 1 / -1; }
#kunena [id^="kreply"][id$="_form"] :is(.card-body, form):has(> .gotoeditor) > :is(br, .clearfix) { display: none; }
#kunena [id^="kreply"][id$="_form"] .control-group:has(#mesubscribe) { grid-column: 1; }
#kunena [id^="kreply"][id$="_form"] .form-group { margin-bottom: .9rem; }
#kunena [id^="kreply"][id$="_form"] .form-group > :is(label, .control-label) {
  display: block; margin-bottom: .3rem; font-size: var(--kf-small); font-weight: 600; color: var(--yac-muted);
}
#kunena [id^="kreply"][id$="_form"] #mesubscribe { display: flex; align-items: flex-start; gap: .5rem; }
#kunena [id^="kreply"][id$="_form"] #mesubscribe > input { float: none !important; flex: none; margin: .2em 0 0 !important; }
#kunena [id^="kreply"][id$="_form"] #mesubscribe > label { width: auto; margin: 0; font-size: var(--kf-small); font-weight: 500; color: var(--yac-text); }
#kunena [id^="kreply"][id$="_form"] :is(.card-body, form) > .gotoeditor {
  grid-column: 2; justify-self: end; float: none; padding: 0; --bs-border-color: transparent; background: none;
  font-size: var(--kf-small); font-weight: 600; color: var(--yac-link); white-space: nowrap;
}
#kunena [id^="kreply"][id$="_form"] .gotoeditor:hover { color: var(--yac-link-hover); text-decoration: underline; }
#kunena [id^="kreply"][id$="_form"] :is(.k-footer, .card-footer) {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: 1rem; padding: 1rem 0 0; border-top: 1px solid var(--yac-line); background: none;
}
#kunena [id^="kreply"][id$="_form"] :is(.k-footer, .card-footer) > small { flex: 1 1 12rem; font-size: .8rem; color: var(--yac-muted); }
#kunena [id^="kreply"][id$="_form"] .kreply-cancel { order: 1; margin-left: auto; }
#kunena [id^="kreply"][id$="_form"] .kreply-submit {
  order: 2;
  --bs-btn-color: var(--yac-accent-ink); --bs-btn-bg: var(--yac-accent); --bs-border-color: var(--yac-accent);
  --bs-btn-hover-color: var(--yac-accent-ink); --bs-btn-hover-bg: var(--yac-accent);
  --bs-btn-active-color: var(--yac-accent-ink); --bs-btn-active-bg: var(--yac-accent);
  font-weight: 700;
}

/* [code] keeps its spaces and does not wrap (it scrolls). Kunena sets .bbcode_code_body {white-space:pre-line !important}
   in @layer kunena; only an !important in an EARLIER layer wins over it, so this one rule is in @layer vendor. */
@layer vendor {
#kunena .bbcode_code > .bbcode_code_body { white-space: pre !important; }
}