/*
 * "Moderna" theme: topic page (/t<id>), reported posts (/t55), posting forms (/poruka.php: new topic, reply, edit,
 * preview, quote reply) and the small AJAX fragments they use (wave 10, W36). Needs tokens.css, components.css and
 * forum.css first. Tokens only (no colors, font stacks or magic shadows here). Guide: docs/design/README.md.
 *
 * Contents: topic head, post card (author, head, body, attachments, foot), mod tools, report box, reply dock,
 * dialogs and fragments, responsive. The composer (posting forms) lives in modern/composer.css (W42 split, so a
 * classic topic body inside the modern chrome can load it without the post-card rules).
 */

/* ---- topic head ---- */
.topic-head { margin-bottom: var(--space-4); }
.topic-head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.topic-title-wrap { min-width: 0; flex: 1 1 340px; }
.topic-title-wrap h1 { font-size: var(--fs-xl); line-height: var(--lh-tight); overflow-wrap: anywhere; margin: 0; }
.topic-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.topic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.topic-actions form { margin: 0; }
.topic-meta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); color: var(--muted); font-size: var(--fs-sm); }
.topic-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.topic-stats li { display: inline-flex; align-items: center; gap: 6px; }
.topic-search { position: relative; margin: 0; }
.topic-search input[type=search] { min-height: var(--control-h-sm); padding: 3px 10px 3px 32px; width: 240px; max-width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); }
.topic-search .icon { position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--muted); pointer-events: none; }
.topic-ad { margin: 0 0 var(--space-4); }
.topic-ad:empty { display: none; }

/* ---- post card ---- */
.posts { display: grid; gap: var(--space-3); margin: var(--space-3) 0; }
.post {
  display: grid; grid-template-columns: 216px minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.post:target { border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 22%, transparent); }
.post-author { background: var(--surface-2); border-right: 1px solid var(--border); border-radius: var(--radius) 0 0 var(--radius); padding: var(--space-4); min-width: 0; }
.post-author-in { position: sticky; top: calc(var(--header-h) + var(--space-3)); display: grid; gap: var(--space-2); justify-items: start; }
.post-author-id { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.post-author-id .avatar { background: var(--accent-soft); color: var(--accent); }
.post-author-name { font-weight: 650; font-size: var(--fs-md); line-height: var(--lh-tight); color: var(--text); overflow-wrap: anywhere; }
a.post-author-name:hover { color: var(--link); }
.post-author-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.post-author-line { margin: 0; color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.post-author-stats { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.post-author-stats .plus { color: var(--ok); font-weight: 600; }
.post-author-links { display: flex; flex-wrap: wrap; gap: 6px; }
.post-author-extra { font-size: var(--fs-xs); color: var(--muted); width: 100%; }
.post-author-extra > summary { cursor: pointer; list-style: none; color: var(--link); }
.post-author-extra > summary::-webkit-details-marker { display: none; }
.post-author-extra[open] > summary { margin-bottom: 4px; }
.post-author-extra p { margin: 0 0 3px; overflow-wrap: anywhere; }
.post-userpic { max-width: 100%; border-radius: var(--radius-sm); }

.post-main { min-width: 0; display: flex; flex-direction: column; }
.post-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--space-3); padding: var(--space-3) var(--space-5) 0; font-size: var(--fs-sm); color: var(--muted); }
.post-subject { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-2); font-weight: 600; }
.post-subject:hover { color: var(--link); text-decoration: none; }
.post-icon { width: 16px; height: 16px; flex: none; }
.post-when { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.post-num { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-variant-numeric: tabular-nums; }
.post-num:hover { color: var(--link); border-color: var(--border-strong); text-decoration: none; }
.post-num .icon { width: 12px; height: 12px; vertical-align: 0; }
.post-body.post-text { padding: var(--space-3) var(--space-5) var(--space-3); max-width: none; }
.post-text > * { max-width: var(--read-w); }
.post-text .code, .post-text .term, .post-text .bsod, .post-text pre, .post-text table { max-width: 100%; }
.post-ad { margin-bottom: var(--space-3); }
.post-ad:empty { display: none; }

/* the BBCode parser's output: quotes, code, terminal, BSoD, signature */
.post-text .quote { margin: .6em 0 1em; padding: 10px 14px; background: var(--quote-bg); border-left: 3px solid var(--quote-line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-2); font-size: var(--fs-md); }
.post-text .quote .quote { background: var(--surface); }
.post-text .quote .tiny { display: block; margin-bottom: 2px; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.post-text .quote_text { overflow-wrap: anywhere; }
.post-text .code, .post-text .term, .post-text .bsod, .post-text pre {
  margin: .6em 0 1em; padding: 12px 14px; background: var(--code-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-family: var(--mono); font-size: 13px; line-height: 1.55; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
.post-text .code { white-space: normal; }
.post-text .code > b:first-child { display: block; margin-bottom: 4px; color: var(--muted); font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; }
.post-text .code div, .post-text .code span { font-family: var(--mono); }
.post-text .bsod { background: var(--info); color: var(--on-accent); border-color: var(--info); }
.post-text tt { font-family: var(--mono); color: var(--ok); }
.post-text hr { border: 0; border-top: 1px solid var(--border); margin: 1em 0; width: 100%; }
.post-text img { max-width: 100%; height: auto; }
.post-text p { margin: 0 0 .9em; }
.post-text a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); text-underline-offset: 2px; overflow-wrap: anywhere; }
.post-note { margin: var(--space-2) 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-sm); font-weight: 550; }

.post-sig-box { margin-top: var(--space-4); border-top: 1px dashed var(--border); padding-top: var(--space-2); color: var(--muted); font-size: var(--fs-sm); }
.post-sig-box > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.post-sig-box > summary::-webkit-details-marker { display: none; }
.post-sig-box > summary::before { content: "+"; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); line-height: 1; }
.post-sig-box[open] > summary::before { content: "\2212"; }
.post-sig-box .post-sig { margin: var(--space-2) 0 0; padding: 0; border: 0; color: var(--text-2); }

.attachments { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-5) var(--space-3); }
.attachment { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); }
.attachment:hover { border-color: var(--border-strong); text-decoration: none; }
.attachment img { width: 20px; height: 20px; flex: none; }
.attachment-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.attachment-name { font-weight: 600; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.attachment-size { color: var(--muted); font-size: var(--fs-xs); }

.post-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding: var(--space-2) var(--space-4) var(--space-3) var(--space-5); }
.post-foot-start, .post-foot-end { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.post-foot { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.post-foot:not(:has(a, button, details, .like-box)) { display: none; }
.post-foot form { margin: 0; }
.like-box { display: inline-flex; align-items: center; }
.like-btn { gap: 6px; font-variant-numeric: tabular-nums; }
.like-btn.is-liked { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.like-static { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-h-sm); padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.like-static.has-likes { color: var(--ok); font-weight: 600; background: var(--ok-soft); border-color: transparent; }
.like-static .icon, .like-btn .icon { width: 15px; height: 15px; vertical-align: 0; }

/* report box: a dropdown with the reason form; the result lands under the post */
.report-menu .dropdown-list { width: min(360px, calc(100vw - 48px)); padding: 0; }
.report-form { display: grid; gap: var(--space-2); padding: var(--space-3); }
.report-form .hint { margin: 0; }
.report-form textarea { min-height: 76px; }
.dropdown-list .report-form .btn { width: auto; justify-content: center; padding: 0 12px; }
.dropdown-list .report-form .btn-danger { color: var(--danger); background: transparent; }
.dropdown-list .report-form .btn-danger:hover { color: var(--on-accent); background: var(--danger); }
.report-result .flash { margin: 0 var(--space-5) var(--space-3); }
.report-result:empty { display: none; }

/* moderator tools */
.mod-menu .dropdown-list { min-width: 260px; }
.dropdown-list .mod-form { display: grid; gap: var(--space-2); padding: 6px 10px 8px; }
.dropdown-list .mod-form .field > span { font-size: var(--fs-xs); }
.dropdown-list .mod-form input[type=text] { min-height: var(--control-h-sm); }
.dropdown-list .mod-form .btn { width: auto; justify-content: center; padding: 0 12px; }
.dropdown-list .mod-form .btn-danger { color: var(--danger); background: transparent; }
.dropdown-list .mod-form .btn-danger:hover { color: var(--on-accent); background: var(--danger); }
.dropdown-list .danger-link { color: var(--danger); }
.inline-edit { display: grid; gap: var(--space-3); padding: var(--space-2) 0; max-width: none; }
.inline-edit textarea { min-height: 220px; font-family: var(--mono); font-size: var(--fs-base); }
.inline-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rename-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rename-form input[type=text] { flex: 1 1 280px; }
.rename-note { color: var(--muted); font-size: var(--fs-sm); }

/* pager rows around the list */
.topic-pager { margin: var(--space-3) 0; }
.topic-pager .paging { margin-top: 0; }
.topic-pager-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.topic-pager-end .paging { flex: 1 1 auto; margin: 0; }

/* related topics */
.related-card { margin-top: var(--space-6); }
.related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.related-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 7px 0; border-top: 1px solid var(--border); font-size: var(--fs-base); }
.related-list li:first-child { border-top: 0; }
.related-list a { color: var(--text); font-weight: 550; overflow-wrap: anywhere; }
.related-list a:hover { color: var(--link); }
.related-list time { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }

/* reply dock: a floating "Odgovori" while the composer is out of view */
.reply-dock { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 40; box-shadow: var(--shadow-lg); display: none; }
.js .reply-dock.is-on { display: inline-flex; }

/* quote-the-selection pop (topic.js) */
.quote-pop-btn { position: absolute; z-index: 50; box-shadow: var(--shadow-md); }

/* ---- reported posts (/t55) ---- */
.report-card { display: grid; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.report-card + .report-card { margin-top: var(--space-3); }
.report-reason { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--danger-soft); border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.report-reason-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3); color: var(--danger); font-size: var(--fs-sm); font-weight: 600; }
.report-reason-who a { color: inherit; text-decoration: underline; }
.report-reason-text { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.report-card .post { border: 0; box-shadow: none; border-radius: 0 0 var(--radius) var(--radius); }
.report-card .post-author { border-radius: 0 0 0 var(--radius); }
.report-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.report-actions form { margin: 0; }

/* dialog with a form (move topic) */
dialog.form-dialog { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
dialog.form-dialog::backdrop { background: var(--backdrop); }
.form-dialog .dlg-body { padding: var(--space-5) var(--space-5) var(--space-2); }
.form-dialog h2 { font-size: var(--fs-lg); margin: 0 0 var(--space-3); }
.form-dialog .dlg-actions { display: flex; justify-content: flex-end; gap: 8px; padding: var(--space-3) var(--space-5) var(--space-5); }
.move-form { display: grid; gap: var(--space-3); }
.move-form-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.move-form-bar .field { flex: 1 1 260px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .post { grid-template-columns: 176px minmax(0, 1fr); }
  .post-author { padding: var(--space-3); }
}
@media (max-width: 760px) {
  .topic-title-wrap h1 { font-size: var(--fs-lg); }
  .topic-actions { width: 100%; }
  .topic-search { width: 100%; }
  .topic-search input[type=search] { width: 100%; }
  .post { grid-template-columns: 1fr; }
  .post-author { border-right: 0; border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; padding: var(--space-3) var(--space-4); }
  .post-author-in { position: static; grid-template-columns: 1fr; gap: var(--space-1); }
  .post-author-stats, .post-author-line.job { display: none; }
  .post-author-links { display: none; }
  .post-userpic { display: none; }
  .post-head { padding: var(--space-3) var(--space-4) 0; }
  .post-body.post-text { padding: var(--space-3) var(--space-4); }
  .attachments { padding: 0 var(--space-4) var(--space-3); }
  .post-foot { padding: var(--space-2) var(--space-3) var(--space-3) var(--space-4); }
  .report-result .flash { margin: 0 var(--space-4) var(--space-3); }
  .report-card .post-author { border-radius: 0; }
}