/*
 * qrz.if.ua — forum (DLE Forum module) in the site's own block style.
 * Same language as the sidebar menu (styles.css .block / .btl / .bluemenu):
 * border #cbdfe8, 8px corners, #f0f5f8 title strip, #dbe8ed dividers.
 * Rewritten 2026-11-03 (replaces the ATHF/IPB skin and its gif sprites).
 */

.forum { color: #3f4b51; font-size: 14px; line-height: 1.45; }
.forum a { color: #398dd8; }
.forum a:hover { color: #2b7cc4; }

/* group colours come inline from dle_forum_groups (red / blue) — toned like the members list */
.forum span[style*="color:red"] { color: #c0504d !important; }
.forum span[style*="color:blue"] { color: #2b7cc4 !important; }

/* --- the block: the sidebar menu's frame --- */
.f-block {
	margin: 0 0 16px;
	background: #fff;
	border: 1px solid #cbdfe8;
	border-radius: 8px;
	overflow: hidden;
}
.f-title {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	font-weight: bold;
	color: #3f4b51;
	background: #f0f5f8;
	border-bottom: 1px solid #cbdfe8;
}
.f-title h1, .f-title h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.07em; line-height: 1.35; color: #3f4b51; }
.f-title h1 a, .f-title h2 a { color: #3f4b51; }
.f-title h1 a:hover, .f-title h2 a:hover { color: #2b7cc4; }
.f-subtitle { padding: 8px 16px; color: #6c838e; border-bottom: 1px solid #dbe8ed; }
.f-pad { padding: 12px 16px; }
.f-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 10px 16px;
	background: #f0f5f8;
	border-top: 1px solid #cbdfe8;
}
.f-foot > .f-right { margin-left: auto; }
.f-foot:not(:has(a, input, select)) { display: none; }       /* search results, new posts: nothing to put there */
.f-table:not(:has(td)) { display: none; }
.f-muted, .f-meta { color: #6c838e; }
.f-meta { font-size: 13px; }

/* options menu in a title strip (opens DLE's dropdown menu) */
.f-opts a {
	display: inline-block;
	padding: 3px 10px;
	font-size: 13px;
	font-weight: normal;
	color: #516168;
	white-space: nowrap;
	background: #fff;
	border: 1px solid #cbdfe8;
	border-radius: 4px;
}
.f-opts a:after { content: ""; display: inline-block; margin: 0 0 3px 7px; width: 5px; height: 5px; border: solid #6c838e; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.f-opts a:hover { color: #2b7cc4; text-decoration: none; border-color: #398dd8; }

/* --- buttons and fields --- */
.f-btn, .forum .button, .f-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 14px;
	font: bold 14px/1 Arial, Helvetica, sans-serif;
	color: #3f4b51;
	white-space: nowrap;
	background: #f0f5f8;
	border: 1px solid #cbdfe8;
	border-radius: 6px;
	box-sizing: border-box;
	cursor: pointer;
}
.f-btn:hover, .forum .button:hover, .f-actions a:hover { color: #3f4b51; text-decoration: none; background: #e3eef4; }
.f-btn.is-main, .f-actions .is-main a {
	color: #fff;
	background: #398dd8;
	border-color: #2b7cc4;
}
.f-btn.is-main:hover, .f-actions .is-main a:hover { color: #fff; background: #2b7cc4; }
.f-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.f-input, .f-textarea, .forum select {
	max-width: 100%;
	padding: 5px 8px;
	font: 14px Arial, Helvetica, sans-serif;
	color: #3f4b51;
	background: #fff;
	border: 1px solid #cbdfe8;
	border-radius: 4px;
	box-sizing: border-box;
}
.f-input { width: 360px; height: 32px; }
.f-input.is-short { width: 140px; }
.forum select { height: 32px; }
.forum select[multiple], .forum select[size] { height: auto; }
.f-textarea { display: block; width: 100%; min-height: 200px; line-height: 1.45; resize: vertical; }
.f-input:focus, .f-textarea:focus, .forum select:focus { border-color: #398dd8; outline: none; }
.forum input[type="radio"], .forum input[type="checkbox"] { accent-color: #398dd8; vertical-align: -2px; }

/* --- forum menu under the speedbar: links like the sidebar menu items --- */
.f-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin: 0 0 16px;
	padding: 6px 10px;
	background: #fff;
	border: 1px solid #cbdfe8;
	border-radius: 8px;
}
.f-menu a { padding: 4px 8px; border-radius: 4px; }
.f-menu a:hover { text-decoration: none; background: #f0f5f8; }
.f-menu .f-visit { margin-left: auto; padding: 4px 6px; font-size: 13px; color: #6c838e; }
.f-menu .f-visit:empty { display: none; }
.forum .f-actions > span:empty { display: none !important; }
.forum .speedbar { margin-bottom: 12px; }

/* --- status markers (were folder gifs) --- */
.f-st {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid #a9c5d4;
	border-radius: 50%;
	box-sizing: border-box;
	vertical-align: -1px;
}
.f-st.is-new { background: #398dd8; border-color: #398dd8; }
.f-st.is-hot { border-color: #e0893a; }
.f-st.is-hot.is-new { background: #e0893a; }
.f-st.is-poll { border-radius: 3px; }
.f-st.is-closed { border-color: #b4c3ca; border-radius: 3px; background: linear-gradient(45deg, transparent 42%, #b4c3ca 42%, #b4c3ca 58%, transparent 58%); }
.f-st.is-lock { border-color: #b4c3ca; border-radius: 3px; }
.f-st.is-redir { border-color: #6c838e; border-style: dashed; }

/* --- lists: forums in a category, topics in a forum --- */
.f-row, .f-cols {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) 70px 90px 230px;
	align-items: center;
}
.f-topics .f-row, .f-topics .f-cols { grid-template-columns: 28px minmax(0, 1fr) 90px 120px 90px 210px auto; }
.f-row > div, .f-cols > div { padding: 9px 8px; }
.f-row > div:first-child, .f-cols > div:first-child { padding-left: 16px; padding-right: 0; }
.f-row > div:last-child, .f-cols > div:last-child { padding-right: 16px; }
.f-cols { font-size: 12px; color: #6c838e; background: #f8fbfc; border-bottom: 1px solid #dbe8ed; }
.f-cols > div { padding-top: 5px; padding-bottom: 5px; }
.f-row + .f-row { border-top: 1px solid #dbe8ed; }
.f-row:hover { background: #f8fbfc; }
.f-n { text-align: center; font-variant-numeric: tabular-nums; }
.f-n .f-lbl { display: none; }
.f-name { font-weight: bold; }
.f-name a { color: #3f4b51; }
.f-name a:hover { color: #2b7cc4; }
.f-desc { margin-top: 2px; font-size: 13px; color: #6c838e; }
.f-desc:empty { display: none; }
.f-sub, .f-mods { margin-top: 3px; font-size: 13px; color: #6c838e; }
.f-last { font-size: 13px; line-height: 1.35; min-width: 0; }
.f-last a.f-last-t { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.f-last .f-meta { display: block; font-size: 12px; }
.f-ticon { margin-right: 4px; vertical-align: -3px; }
.f-tag { font-size: 12px; font-weight: normal; color: #6c838e; }
.f-row .f-sel { padding-left: 0; }
.f-empty { padding: 14px 16px; color: #6c838e; }
.f-empty:empty { display: none; }
.f-empty center { text-align: left; }

/* legend under a topic list */
.f-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: -6px 0 16px; padding: 0 4px; font-size: 12px; color: #6c838e; }
.f-legend .f-st { margin-right: 5px; }

/* online line, forum statistics */
.f-online { margin: 0 0 16px; padding: 8px 16px; font-size: 13px; color: #516168; background: #f0f5f8; border: 1px solid #cbdfe8; border-radius: 8px; }
.f-online b { color: #3f4b51; }
.f-stats dl { margin: 0; }
.f-stats .f-srow { display: grid; grid-template-columns: 190px minmax(0, 1fr); border-top: 1px solid #dbe8ed; }
.f-stats .f-srow:first-child { border-top: 0; }
.f-stats dt, .f-stats dd { margin: 0; padding: 7px 16px; }
.f-stats dt { color: #6c838e; }
.f-stats dd b { font-variant-numeric: tabular-nums; }

/* --- top/bottom bar of a topic or forum: pager left, actions right --- */
.f-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.f-bar > .f-actions { margin-left: auto; }
.f-bar .pager { margin: 0; }
.f-bar .f-closed { color: #6c838e; }
.forum .pager .pg-top { display: none; }      /* «Нагору» stays with the site's own lists */

/* --- a post --- */
.f-post + .f-post, .f-poll + .f-post { border-top: 1px solid #cbdfe8; }
.f-post-head {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 6px 16px;
	font-size: 13px;
	color: #6c838e;
	background: #f8fbfc;
	border-bottom: 1px solid #dbe8ed;
}
.f-post-head .f-post-no { margin-left: auto; }
.f-post-head .f-post-no a { color: #6c838e; }
.f-post-head .f-post-no a:hover { color: #2b7cc4; }
.f-post-head input[type="checkbox"] { margin-left: 6px; }
.f-post-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); }
.f-author { padding: 14px 12px 14px 16px; font-size: 13px; line-height: 1.4; color: #516168; border-right: 1px solid #dbe8ed; }
#midside .f-ava { height: 80px; }        /* mobile.css has #midside img { height: auto } */
.f-ava { display: block; width: 80px; height: 80px; margin: 0 0 8px; object-fit: cover; border: 1px solid #cbdfe8; border-radius: 8px; }
.f-author-name { font-size: 14px; font-weight: bold; overflow-wrap: anywhere; }
.f-author-name a { color: #3f4b51; }
.f-author-name a:hover { color: #2b7cc4; }
.f-rank { color: #6c838e; }
.f-pips { color: #e0a33a; letter-spacing: 1px; white-space: nowrap; }
.f-author ul { margin: 6px 0 0; padding: 6px 0 0; list-style: none; border-top: 1px solid #dbe8ed; }
.f-author li { margin: 0; padding: 1px 0; }
.f-rep { display: inline-block; min-width: 16px; padding: 0 3px; font-weight: bold; text-align: center; color: #516168 !important; background: #f0f5f8; border: 1px solid #cbdfe8; border-radius: 3px; cursor: pointer; }
.f-rep:hover { text-decoration: none; background: #e3eef4; }

.f-post-main { display: flex; flex-direction: column; min-width: 0; }
.f-post-text { flex: 1 0 auto; padding: 14px 16px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.f-post-text img { max-width: 100%; height: auto; }
.f-post-text p { margin: 0 0 0.6em; }
.f-post-text ul, .f-post-text ol { margin: 0.4em 0 0.6em 1.6em; }
.f-post-text .edit-info { display: block; margin-top: 12px; font-size: 12px; color: #6c838e; }
.f-post-text .edit-info b { font-weight: normal; color: #516168; }
.f-sign { margin: 14px 16px 0; padding: 8px 0 0; font-size: 13px; color: #6c838e; border-top: 1px dashed #dbe8ed; }
.f-post-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 8px 16px 12px; }
.f-post-act:not(:has(a)) { display: none; }
.f-post-act a { padding: 3px 10px; font-size: 13px; color: #516168; background: #f0f5f8; border: 1px solid #cbdfe8; border-radius: 4px; }
.f-post-act a:hover { color: #2b7cc4; text-decoration: none; border-color: #398dd8; }
.f-post-act .f-report { margin-right: auto; }
.f-post-act .f-report a { color: #6c838e; background: none; border-color: transparent; }

/* text furniture inside posts (forum BB parser classes) */
.forum .title_quote { margin: 8px 0 0; padding: 5px 12px; font-size: 13px; font-weight: bold; color: #516168; background: #f0f5f8; border: 1px solid #cbdfe8; border-bottom: 0; border-radius: 6px 6px 0 0; }
.forum .quote { margin: 0 0 10px; padding: 8px 12px; font-size: 14px; color: #516168; background: #f8fbfc; border: 1px solid #cbdfe8; border-left: 3px solid #a9c5d4; border-radius: 0 0 6px 6px; }
.forum .title_quote + .quote { border-top: 1px solid #dbe8ed; }
.forum .quote:not(.title_quote + .quote) { margin-top: 8px; border-radius: 6px; }
.forum .scriptcode { margin: 8px 0; padding: 8px 12px; font: 13px/1.5 Consolas, "Courier New", monospace; color: #3f4b51; white-space: pre-wrap; background: #f8fbfc; border: 1px solid #cbdfe8; border-radius: 6px; }
.forum .hidden_post { padding: 8px 12px; color: #6c838e; background: #fbf4f3; border: 1px dashed #e2b8b4; border-radius: 6px; }
.forum .f-hl { padding: 0 2px; color: inherit; background: #fff2b3; border-radius: 2px; }

/* inline post editing (ajax/editpost.php) */
.f-edit .f-textarea { min-height: 160px; margin: 6px 0 8px; }
.f-edit .f-actions { justify-content: flex-end; }

/* --- poll in a topic --- */
.f-poll { padding: 12px 16px; border-bottom: 1px solid #cbdfe8; background: #fbfdfe; }
.f-poll-title { margin: 0 0 4px; font-weight: bold; }
.f-poll-q { margin: 0 0 10px; color: #516168; }
.f-poll #dle-poll-list > div { padding: 3px 0; }
.f-poll #dle-poll-list label { margin-left: 6px; }
.f-poll-row { margin: 0 0 8px; }
.f-poll-row b { font-weight: normal; color: #6c838e; }
.f-poll-bar { height: 8px; margin-top: 3px; background: #f0f5f8; border: 1px solid #dbe8ed; border-radius: 4px; overflow: hidden; }
.f-poll-bar i { display: block; height: 100%; background: #398dd8; }
.f-poll-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.f-poll-foot .f-muted { margin-right: auto; }

/* --- forms: labelled rows in a block --- */
.f-form .f-fields { padding: 6px 16px 14px; }
.f-field { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 8px 0; }
.f-field + .f-field { border-top: 1px solid #f0f5f8; }
.f-field > label, .f-field > .f-label { color: #516168; }
.f-field.is-top { align-items: start; }
.f-field.is-top > label, .f-field.is-top > .f-label { padding-top: 6px; }
.f-field .f-hint { display: block; margin-top: 3px; font-size: 12px; color: #6c838e; }
.f-field.is-wide { grid-template-columns: minmax(0, 1fr); }
.f-section { margin: 10px -16px 0; padding: 7px 16px; font-weight: bold; color: #516168; background: #f8fbfc; border-top: 1px solid #dbe8ed; border-bottom: 1px solid #dbe8ed; }
.f-section:first-child { margin-top: -6px; border-top: 0; }
.f-captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.f-captcha img { display: block; border: 1px solid #cbdfe8; border-radius: 4px; }
.f-icons { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.f-icons label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.f-icons br { display: none; }
.f-check { display: inline-flex; align-items: center; gap: 6px; }
.f-toggle { font-size: 13px; }
.f-bb { margin: 4px 0 6px; }
.f-bbbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1px; padding: 3px 6px; background: #f0f5f8; border: 1px solid #cbdfe8; border-radius: 6px 6px 0 0; }
.f-bbbar + iframe + #dle_emos, .f-bb + .f-textarea { border-top-left-radius: 0; border-top-right-radius: 0; }
.f-bb { margin-bottom: 0; }
.f-bb + .f-textarea { border-top: 0; }
.f-bbbar .editor_button { float: none; display: flex; align-items: center; height: 27px; margin: 0; padding: 0; border-radius: 3px; cursor: pointer; }
.f-bbbar .editor_button:hover { background: #e3eef4; }
.f-bbbar .editor_button img[src*="brkspace"] { opacity: 0.35; }
.f-bbbar .editor_button select { width: auto; height: 24px; padding: 0 4px; font-size: 12px; }
.f-bbbar .editor_button[style] { width: auto !important; padding: 0 2px !important; }
.forum .bb-editor, .forum .bbeditor { max-width: 100%; }
#post-preview .f-block { margin-top: 0; }

/* --- tables: reputation and warnings logs --- */
.f-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.f-table th { padding: 6px 12px; font-weight: normal; text-align: left; color: #6c838e; background: #f8fbfc; border-bottom: 1px solid #dbe8ed; }
.f-table td { padding: 7px 12px; border-top: 1px solid #dbe8ed; vertical-align: top; }
.f-table tr:first-child td { border-top: 0; }
.f-table th:first-child, .f-table td:first-child { padding-left: 16px; }

/* --- moderation forms under a list / topic --- */
.f-mod { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; padding: 8px 16px; font-size: 13px; background: #fbf9f2; border: 1px dashed #e3d7b0; border-radius: 8px; }
.f-mod form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.f-mod .f-right { margin-left: auto; }
.f-mod .button { height: 32px; }
.f-search-in { display: flex; gap: 6px; margin: 0; }
.f-search-in .f-input { width: 220px; }
.f-near { margin-left: auto; font-size: 13px; color: #6c838e; }
.f-near a { white-space: nowrap; }

/* rules / message panel */
.f-msg .f-pad > :last-child { margin-bottom: 0; }

/* ================= narrow screens ================= */
@media screen and (max-width: 800px) {
	.f-title, .f-subtitle, .f-pad, .f-foot, .f-online, .f-mod { padding-left: 12px; padding-right: 12px; }
	.f-row > div:first-child { padding-left: 12px; }
	.f-row > div:last-child { padding-right: 12px; }
	.f-row, .f-cols { grid-template-columns: 24px minmax(0, 1fr) 60px 70px 190px; }
	.f-topics .f-row, .f-topics .f-cols { grid-template-columns: 24px minmax(0, 1fr) 70px 100px 70px 170px auto; }
	.f-input, .f-textarea, .forum select, .f-btn, .forum .button, .f-actions a { font-size: 16px; }
	.f-input, .forum select, .f-btn, .forum .button, .f-actions a { height: 38px; }
	.f-form .f-fields { padding: 6px 12px 12px; }
	.f-section { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
}

@media screen and (max-width: 620px) {
	.f-menu { gap: 0; padding: 4px 4px; }
	.f-menu a { padding: 5px 7px; }
	.f-menu .f-visit { margin-left: 0; flex-basis: 100%; }

	/* list rows stack: marker + name, then one meta line, then the last post */
	.f-cols { display: none; }
	.f-row, .f-topics .f-row {
		grid-template-columns: 22px repeat(3, auto) minmax(0, 1fr);
		grid-template-areas: "st main main main main" ". n1 n2 n3 ." ". last last last last";
		align-items: start;
		padding: 9px 12px;
		row-gap: 2px;
	}
	.f-row > div, .f-row > div:first-child, .f-row > div:last-child { padding: 0; }
	.f-row > .f-stc { grid-area: st; padding-top: 2px; }
	.f-row > .f-main { grid-area: main; }
	.f-row > .f-n, .f-row > .f-au { font-size: 13px; color: #6c838e; text-align: left; margin-right: 12px; }
	.f-row > .f-n1 { grid-area: n1; }
	.f-row > .f-n2 { grid-area: n2; }
	.f-row > .f-n3 { grid-area: n3; }
	.f-n .f-lbl { display: inline; }
	.f-au:before { content: "автор "; }
	.f-row > .f-last { grid-area: last; padding-top: 2px; }
	.f-last a.f-last-t { display: inline; white-space: normal; }
	.f-last .f-meta { display: inline; }
	.f-last .f-last-t + .f-meta:before { content: " · "; }
	.f-foot > .f-right { order: -1; width: 100%; }
	.f-foot > .f-right > span, .f-bar > .f-actions > span { display: flex; flex: 1 1 0; }
	.f-foot > .f-right a { flex: 1 1 auto; }

	/* pager in one row: arrows without words */
	.forum .pager { display: flex; flex-wrap: nowrap; gap: 4px; width: 100%; }
	.forum .pg-pages { flex: 1 1 auto; flex-wrap: wrap; }
	.forum .pg-prev > a, .forum .pg-prev > span, .forum .pg-next > a, .forum .pg-next > span { width: 38px; padding: 0; }
	.forum .pg-lbl { font-size: 0; }
	.forum .pg-prev .pg-lbl:before, .forum .pg-next .pg-lbl:after { margin: 0; }
	.f-topics .f-last .f-lpu:before { content: "Остання відповідь: "; }
	.f-topics .f-last .f-meta:before { content: ", "; }
	.f-row > .f-sel { grid-area: st; margin-top: 22px; }
	.f-legend { margin-top: -8px; gap: 2px 12px; }

	.f-bar > .f-actions { margin-left: 0; width: 100%; }
	.f-bar > .f-actions a { flex: 1 1 0; }

	/* posts: the author becomes one line above the text */
	.f-post-head { padding: 6px 12px; }
	.f-post-body { grid-template-columns: minmax(0, 1fr); }
	.f-author {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 10px;
		align-items: center;
		padding: 10px 12px 0;
		border-right: 0;
	}
	.f-ava, #midside .f-ava { grid-row: span 2; width: 40px; height: 40px; margin: 0; border-radius: 50%; }
	.f-author-name { font-size: 15px; }
	.f-author-sub { font-size: 12px; color: #6c838e; }
	.f-author .f-rank { display: inline; }
	.f-author ul { display: none; }
	.f-post-text { padding: 10px 12px; font-size: 16px; }
	.f-sign { margin: 10px 12px 0; }
	.f-post-act { padding: 6px 12px 10px; }
	.f-post-act a { padding: 6px 12px; font-size: 14px; }

	.f-field { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.f-field.is-top > label, .f-field.is-top > .f-label { padding-top: 0; }
	.f-input, .f-input.is-short, .f-search-in .f-input { width: 100%; }
	.f-captcha .f-input { width: 140px; }
	.f-foot .f-btn, .f-foot .button { flex: 1 1 auto; }
	.f-search-in { flex: 1 1 100%; }
	.f-near { margin-left: 0; }
	.f-stats .f-srow { grid-template-columns: minmax(0, 1fr); }
	.f-stats dt { padding-bottom: 0; font-size: 13px; }
	.f-stats dd { padding-top: 2px; }
	.f-table-wrap { overflow-x: auto; }
	.f-mod form { flex-wrap: wrap; }
	.f-mod .f-right { margin-left: 0; }
}