/*
 * "Moderna" theme, transition layer (wave 10, W42 polish): classic page bodies (pages not ported yet, and
 * fHeader()/fFooter() pages) shown inside the modern chrome. Loaded only for those pages (layout/head.twig,
 * legacy = true) and scoped to .legacy-body, so it never touches redesigned pages. It maps the classic stil*.css
 * markup (.brdr frames, .title/.cat heads, .msg1-3 cells, a.menu/.menut/.profil_menu/.tiny links ...) onto the design
 * tokens, so an old table page reads like the new cards: a td.brdr frame becomes a rounded card, header rows become
 * card heads, cells get padding and row separators, action links become pills. Delete it once every page is ported.
 * Tokens only (no hex colors here). Guide: docs/design/README.md ("Legacy bodies").
 */

.legacy-body { font-size: var(--fs-base); line-height: var(--lh); }
.legacy-body table { border-collapse: separate; max-width: 100%; }
.legacy-body td, .legacy-body th { font-size: inherit; color: inherit; }
.legacy-body center { display: block; max-width: 100%; overflow: hidden; }
.legacy-body ins.adsbygoogle { max-width: 100%; }

/* ---- boxes: td.brdr (the classic 1px grid frame) is the card; its inner table loses the grid ---- */
.legacy-body table:has(> tbody > tr > td.brdr) { margin: 0 auto var(--space-4); }
.legacy-body td.brdr {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0; overflow: hidden;
}
.legacy-body td.brdr > table { border-spacing: 0; }
.legacy-body td.brdr > table > tbody > tr > td + td,
.legacy-body td.brdr > table > tbody > tr > th + th { border-left: 1px solid var(--border); }
.legacy-body td.brdr > table > tbody > tr + tr > td,
.legacy-body td.brdr > table > tbody > tr + tr > th { border-top: 1px solid var(--border); }
.legacy-body td.brdr > table > tbody > tr:hover > td.msg1,
.legacy-body td.brdr > table > tbody > tr:hover > td.msg2 { background-color: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.legacy-body table.post > tbody > tr > td.brdr > table > tbody > tr:hover > td { background-color: inherit; }
.legacy-body > .container > br, .legacy-jump > br { display: none; }

/* header rows: card heads (quiet fill, strong text), not the old dark bar */
.legacy-body td.title, .legacy-body div.title, .legacy-body th.title {
  background: var(--surface-2); color: var(--text); font-weight: 650; padding: 10px 16px; vertical-align: middle;
}
.legacy-body td.title a:not(.menu):not(.menut), .legacy-body td.cat a:not(.menu):not(.menut) { color: var(--text); }
.legacy-body td.title td, .legacy-body td.title td.title { background: transparent; padding: 0; border: 0; font-weight: 600; }
.legacy-body td.title .normal b { font-weight: 650; }
.legacy-body td.cat, .legacy-body div.cat {
  background: var(--surface-2); color: var(--text); font-weight: 650; padding: 10px 16px;
}
.legacy-body div.cat { margin: -12px -16px 10px; border-bottom: 1px solid var(--border); }
.legacy-body div.msg1 > div.cat:first-child { border-radius: 0; }

/* body cells */
.legacy-body td.msg1, .legacy-body td.msg2, .legacy-body td.msg3,
.legacy-body div.msg1, .legacy-body div.msg2, .legacy-body div.msg3 { background: var(--surface); padding: 12px 16px; }
.legacy-body td.msg3, .legacy-body div.msg3 { background: color-mix(in srgb, var(--info-soft) 55%, var(--surface)); }
.legacy-body div.msg1 div.msg1, .legacy-body td.msg1 div.msg1, .legacy-body td.msg1 td.msg1, .legacy-body td.msg2 td.msg2,
.legacy-body td.msg1 td.msg2, .legacy-body td.msg2 td.msg1 { padding: 0; border: 0; background: transparent; }
.legacy-body td.forumline1 { background: var(--surface-2); }
.legacy-body p.tiny, .legacy-body .tiny { font-size: var(--fs-sm); }
.legacy-body p.tiny { margin: 0; }
.legacy-body p.normal { font-size: var(--fs-base); margin: 0; }
.legacy-body h1, .legacy-body h2, .legacy-body h3 { line-height: var(--lh-tight); margin: .4em 0; }
.legacy-body hr { border: 0; border-top: 1px solid var(--border); }
.legacy-body pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; white-space: pre-wrap; }
.legacy-body blockquote { margin: .6em 0; padding: 8px 12px; background: var(--quote-bg); border-left: 3px solid var(--quote-line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.legacy-body img { max-width: 100%; height: auto; }
.legacy-body fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px 10px; margin: 10px 0 0; background: var(--surface-2); }
.legacy-body legend { padding: 0 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }

/* ---- text links: blue, underline on hover; inline links in posts carry a soft underline ---- */
.legacy-body a.small, .legacy-body a.tiny, .legacy-body a.smallforum { color: var(--link); }
.legacy-body a.menupp, .legacy-body a.modspec1 { color: var(--accent); font-weight: 600; }
.legacy-body a.modspec2 { color: var(--warn); font-weight: 600; }

/* ---- action links as pills: toolbars, page links, post actions, profile/e-mail/PM under the author ---- */
.legacy-body a.menu, .legacy-body a.menut, .legacy-body a.profil_menu, .legacy-body .msgoptions a,
.legacy-body a.menupp, .legacy-body a.modspec1, .legacy-body a.modspec2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 0 12px; margin: 2px 1px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2);
  color: var(--text-2); font-size: var(--fs-sm); font-weight: 550; line-height: 1.2; white-space: nowrap; text-decoration: none;
  vertical-align: middle; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.legacy-body a.menu:hover, .legacy-body a.menut:hover, .legacy-body a.profil_menu[href]:hover, .legacy-body .msgoptions a:hover {
  background: var(--link-soft); border-color: color-mix(in srgb, var(--link) 35%, transparent); color: var(--link); text-decoration: none;
}
.legacy-body a.menupp, .legacy-body a.modspec1 { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); }
.legacy-body a.modspec2 { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); }
.legacy-body a.menupp:hover, .legacy-body a.modspec1:hover { background: var(--danger); border-color: var(--danger); color: var(--on-accent); text-decoration: none; }
.legacy-body a.modspec2:hover { background: var(--warn); border-color: var(--warn); color: var(--on-accent); text-decoration: none; }
/* a red "Email praćenje" / danger pill in the classic markup */
.legacy-body a.menu.tp-red, .legacy-body a.menut.pk-danger { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: var(--accent-soft); }
/* page links ("Strane: 1 2 3 ... Dalje >"): the current page (a.menu after "Strane:") is filled */
.legacy-body b ~ a.menu, .legacy-body b ~ a.menut { min-width: 30px; padding: 0 9px; font-variant-numeric: tabular-nums; }
.legacy-body b ~ a.menu { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 650; }
.legacy-body b ~ a.menu:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
/* the score next to the author's links is a stat chip, not a link */
.legacy-body a.profil_menu:not([href]) { background: var(--ok-soft); border-color: transparent; color: var(--ok); cursor: default; }
.legacy-body a.profil_menu img, .legacy-body .msgoptions img { width: 14px; height: auto; vertical-align: middle; }
.legacy-body a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ---- the classic topic page (pages/tema.twig) inside the modern chrome ---- */
.legacy-body #naslovteme table { margin: var(--space-2) 0 var(--space-4); }
.legacy-body #naslovteme h1 { font-size: var(--fs-xl); text-align: left; margin: 0; }
.legacy-body #tema td.msg1 { vertical-align: middle; }
.legacy-body #tema td.msg1[width="200"] { white-space: nowrap; }
.legacy-body #tema p.tiny { color: var(--muted); }
.legacy-body td.title form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 550; }
.legacy-body td.title input[type=text] { min-height: 30px; padding: 3px 10px; font-size: var(--fs-sm); }
.legacy-body table.post { margin: 0 auto var(--space-4); }
.legacy-body table.post > tbody > tr > td[colspan] { padding: 0; }
.legacy-body td#posterinfo { background: var(--surface-2); line-height: 1.55; white-space: normal; width: 240px; }
.legacy-body td#posterinfo a.profil_menu { margin: 6px 2px 0 0; }
/* breadcrumbs above the page links ("[es] :: Forum :: Tema") as chips */
.legacy-body p.tiny:has(> b ~ a.menu) > a.tiny {
  display: inline-flex; align-items: center; min-height: 26px; max-width: 36ch; padding: 0 10px; margin: 1px 0;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface);
  color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.legacy-body p.tiny:has(> b ~ a.menu) > a.tiny:hover { background: var(--link-soft); border-color: color-mix(in srgb, var(--link) 35%, transparent); color: var(--link); text-decoration: none; }
.legacy-body p.tiny:has(> b ~ a.menu) { color: var(--muted); line-height: 2; }
.legacy-body td#posterinfo p.tiny { color: var(--text-2); }
.legacy-body td#posterinfo p.tiny > span:first-child { font-size: var(--fs-md) !important; color: var(--text) !important; }
.legacy-body table.post td.brdr > table > tbody > tr + tr > td#posterinfo,
.legacy-body table.post td.brdr > table > tbody > tr + tr > td:first-child { background: var(--surface-2); }
.legacy-body .post_text { font-size: var(--fs-post); line-height: var(--lh-post); margin-top: var(--space-2); overflow-wrap: anywhere; }
.legacy-body .post_text a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); text-underline-offset: 2px; }
.legacy-body .post_text a:hover { text-decoration-color: currentColor; }
.legacy-body .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); }
.legacy-body .post_text .code, .legacy-body .post_text .term {
  margin: .6em 0 1em; padding: 12px 14px; background: var(--code-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px; overflow-x: auto;
}
.legacy-body .sig_hr { margin: var(--space-4) 0 var(--space-2); border-top: 1px dashed var(--border); width: 100%; }
.legacy-body .sig_text { color: var(--muted); font-size: var(--fs-sm); }
.legacy-body .tp-date { background: transparent; color: var(--muted); font-weight: 500; font-size: var(--fs-xs); }
.legacy-body .tp-date b { font-weight: 600; }
.legacy-body sup { vertical-align: baseline; }
.legacy-body .msgoptions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
.legacy-body .msgoptions .tp-inline[id^="likediv"] {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; margin: 2px 1px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs-sm); font-weight: 600;
}
.legacy-body .msgoptions .tp-inline[id^="likediv"] a { display: inline-flex; padding: 0; margin: 0; min-height: 0; border: 0; background: none; }
.legacy-body .tp-plus { color: var(--ok); }
.legacy-body .tp-cursor > a {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border);
  border-radius: var(--radius-pill); background: var(--surface-2);
}
.legacy-body .tp-cursor > a:hover { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-soft); }
.legacy-body .tp-cursor img { width: 14px; height: 14px; }

/* ---- forms and controls look like the components ---- */
.legacy-body input[type=password], .legacy-body input:not([type]), .legacy-body input[type=text]:not(.btn) {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 7px 12px; min-height: var(--control-h);
}
.legacy-body input[type=text], .legacy-body input[type=search], .legacy-body input[type=email], .legacy-body input[type=number],
.legacy-body select, .legacy-body textarea { width: auto; max-width: 100%; }
.legacy-body textarea { width: 100%; }
.legacy-body input[type=submit]:not(.btn), .legacy-body input[type=button]:not(.btn), .legacy-body input[type=reset]:not(.btn), .legacy-body button:not(.btn):not([class*="tool"]) {
  font: inherit; font-weight: 550; min-height: var(--control-h); padding: 0 16px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.legacy-body input[type=submit]:not(.btn):hover, .legacy-body input[type=button]:not(.btn):hover, .legacy-body input[type=reset]:not(.btn):hover,
.legacy-body button:not(.btn):not([class*="tool"]):hover { background: var(--surface-2); border-color: var(--muted); }
.legacy-body .hdr-popup:empty { display: none; }

/* ---- the "Srodne teme / Navigacija" block under classic bodies ---- */
.legacy-jump { margin-top: var(--space-6); }
.legacy-body #output1 > div[style] { font-size: var(--fs-sm) !important; line-height: 1.8; color: var(--muted); }
.legacy-body #output1 a.tiny { color: var(--link) !important; }
.legacy-body #soslistfooter, .legacy-body form[name="form2"], .legacy-body form[name="form-navigacija"] { margin: 6px 0; }
#overDiv { position: absolute; z-index: 1000; }

/* ---- phones: the classic boxes stack their cells (author above the post, toolbar under the search) ---- */
@media (max-width: 760px) {
  .legacy-body table[width="98%"], .legacy-body table[width="90%"], .legacy-body table[width="95%"] { width: 100%; }
  .legacy-body td[nowrap] { white-space: normal; }
  .legacy-body table:has(> tbody > tr > td.brdr), .legacy-body td.brdr > table { table-layout: fixed; width: 100%; }
  .legacy-body td.brdr select { width: 100%; }
  .legacy-body td.brdr > table > tbody > tr { display: flex; flex-direction: column; }
  .legacy-body td.brdr > table > tbody > tr > td { display: block; width: auto !important; border-left: 0 !important; text-align: left; }
  .legacy-body td.brdr > table > tbody > tr > td + td { border-top: 1px solid var(--border); }
  .legacy-body td.brdr > table > tbody > tr > td:empty,
  .legacy-body table.post td.brdr > table > tbody > tr + tr > td:first-child { display: none; }
  .legacy-body td#posterinfo { width: auto; padding: 10px 12px; font-size: var(--fs-xs); }
  .legacy-body td.title table, .legacy-body td.title tbody, .legacy-body td.title tr, .legacy-body td.title td { display: block; width: 100%; text-align: left; }
  .legacy-body td.title td + td { margin-top: 8px; }
  .legacy-body td.msg1, .legacy-body td.msg2 { padding: 10px 12px; }
  .legacy-body a.menu, .legacy-body a.menut, .legacy-body a.profil_menu, .legacy-body .msgoptions a { min-height: 36px; }
  .legacy-body select { max-width: 100%; }
  .legacy-body .msgoptions { justify-content: flex-start; }
}