/*!
 * IRCdForum theme stylesheet
 * Sections 1-2 are the original EXTRA / EXTRA2 css templates, moved here
 * unchanged (only url() paths rebased for this file's location).
 * Section 3 is the responsive layer added in 2026-08.
 * Edit this file, not the EXTRA/EXTRA2 templates.
 */
/* ============ 1) EXTRA (moved verbatim from the EXTRA css template) ============ */
:root {
 --color1: #0e497c;
}
.idf-info {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid #000;
}

body{--color:color-mix(in srgb, var(--color1), #000 30%) !important}.dark body{--color:color-mix(in srgb, var(--color1), #000 20%) !important}
.tborders { background: var(--color) !important; }
a { color: var(--color) !important; }
.dark a { color: color-mix(in srgb, var(--color1), #fff 50%) !important; }

.post-area { width: 225px; max-width: 225px;}

/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }

/* ***** small padding on 'thead' elements ***** */
td.thead, th.thead, div.thead { padding: 4px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** de-emphasized text */
.shade, a.shade:link, a.shade:visited { color: #777777; text-decoration: none; }
a.shade:active, a.shade:hover { color: #FF4400; text-decoration: underline; }
.tcat .shade, .thead .shade, .tfoot .shade { color: #DDDDDD; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

.dark .alt1, .dark .alt1Active, .dark .panelsurround { background: #000 !important; color:#fff !important; }
.dark .alt2, .dark .alt2Active, .dark .panel { background: #000 !important; color:#fff !important; }

.dark legend { color: #3399CC; }
.dark table { color: #fff; } 
.dark body { background: #000; } 
.dark .page { background: #000; color: #fff; } 
.dark .tborder { background: #334155; } 
.dark .alt1 a, .dark .alt2 a,
.dark .alt1Active a, .dark .alt2Active a { color: #1da5e9; }
.dark .panel, .dark fieldset, .dark textarea, .dark select, .dark input { background: #000; color: #fff; border-color: #334155; border-color: #334155; }

.thead { background: color-mix(in srgb, var(--color1), #000 20%) !important;}
.tcat { background: color-mix(in srgb, var(--color1), #000 5%) !important;}

.tfoot { background: color-mix(in srgb, var(--color1), #000 25%) !important;}
.vbmenu_control { background: color-mix(in srgb, var(--color1), #000 25%) !important;}
.tborder { border-color: color-mix(in srgb, var(--color1), #000 40%) !important;}

.thead a, .vbmenu_control a, .tcat a, .tfoot a { color: color-mix(in srgb, var(--color1), #fff 75%) !important; }
/* ============ 2) EXTRA2 (moved verbatim from the EXTRA2 css template) ============ */
.tfoot i, .vbmenu_control i { color: color-mix(in srgb, var(--color1), #fff 50%) } 

/* vbmenu_register() appends the little down-arrow gif directly into the
   .vbmenu_control cell, as a sibling of the <a>. The toolbar's first cell is
   <td class="tcat" width="100%">, which claims all the slack, so the table
   sizes the menu columns from the link text alone and the arrow ends up a few
   pixels past the cell's right edge. A trailing margin reserves that space in
   the column's measured width, so the arrow stays inside. Applies wherever vB
   uses these menus (thread toolbar, forumdisplay, memberlist, usercp...). */
td.vbmenu_control > img { margin-right: 5px; margin-left: 10px; vertical-align: middle; }

.idf-duyuru a {
 display: block;
 padding-bottom: 5px;
}

.idf-duyuru a::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url("../../images/next.gif") no-repeat center;
  background-size: contain;
  margin: -2px 3px 0 0;
  vertical-align: middle;
}
.vbmenu_option a { color: color-mix(in srgb, var(--color1), #000 50%) !important; }
.sub{ display:block;width: 100%; }
@media (max-width: 768px) {
td.vbmenu_control > img { display: none; }
selects { max-width: 200px; }
.idf-info {
border: 0 !important;
}
.idf-box {
width: 100%;
box-sizing: border-box;
border-right: 0;
border-bottom: 1px solid #ddd;
flex: auto !important;
}
.idf-search { width: 140px; }
.theme-btn span { display: none; }
.ncode_imageresizer_warning { display: none; }
.ncode_imageresizer_resized { cursor: auto !important; }
table .td {
  display: table;
  width: 100% !important;
}
body { margin: 0 !important; }
.page2 { padding: 0 5px; }
.p-0 { padding: 0 !important; }
.m-0 { margin: 0 !important; }
.tdfix { display: table; width:100%; }
.tablefix { display: block; width:100% !important; }
.hidemobile { display: none; }
.showmobile { display: block; }
.user-block { display: table; }
.rank img { margin: -5px -15px !important; }
.avatars img { height: 107px !important; max-width:unset !important; }

#usercss #content { margin: 0 !important; }
}
@media (min-width: 769px) {
.page2 { padding: 15px 25px; }
.showmobile { display: none; }
}

.postbit-box {
  border: 1px solid color-mix(in srgb, var(--color1), #000 40%);
  border-radius: 15px;
  margin-bottom: 5px;
  padding: 3px;
}

.postbit-box i { color: color-mix(in srgb, var(--color1), #000 25%); }

.rgxrank {
  border: 1px solid color-mix(in srgb, var(--color1), #000 40%);
  border-radius: 3px;
  margin-bottom: 3px;
  padding: 3px;
}

.rgxrank i { color: color-mix(in srgb, var(--color1), #000 25%); }

.dugme {
display:inline-block;
}

.dugme a {
display: block;
font-size:12px;
font-weight:bold;
padding:5px 21px;
background: color-mix(in srgb, var(--color1), #000 25%);
color: color-mix(in srgb, var(--color1), #fff 50%) !important;
text-align:center;
border:2px solid color-mix(in srgb, var(--color1), #fff 50%) !important;
border-radius: 20px;
white-space: nowrap;
}
.dugme a:hover {
background: color-mix(in srgb, var(--color1), #fff 50%);
color: color-mix(in srgb, var(--color1), #000 25%) !important;
border:2px solid color-mix(in srgb, var(--color1), #000 25%) !important;
}

.ircdstatus {
    border-radius: 15px;
    text-align: center;
    font-family: Helvetica;
    color: #fff;
    font-size: 11px;
    padding: 8px 16px 8px 16px;
    text-decoration: none;
    width: auto;
    margin-bottom: 5px;
}

.ircdcevrimici {
    background: #65aa20;
}
.ircdcevrimdisi {
    background: #bb2222;
}
.ircdgorunmez {
    background: #bb2222;
}

.ofix .ircdstatus {
width: 85px;
border-radius: 15px;
}

.icon {
padding: 8px 10px;
border-radius: 100%;
color: color-mix(in srgb, var(--color1), #fff 50%) !important;
background: color-mix(in srgb, var(--color1), #000 25%) !important;
border: 2px solid color-mix(in srgb, var(--color1), #fff 25%) !important;
}

.icon2 {
padding: 7px 6px;
border-radius: 5px;
color: color-mix(in srgb, var(--color1), #000 25%) !important;
background: color-mix(in srgb, var(--color1), #fff 50%) !important;
border: 2px solid color-mix(in srgb, var(--color1), #fff 25%) !important;
}

.icon.new:before {
    font-family: "Font Awesome 7 Free";
    font-weight: 600;
    content: "\f075";
}

.icon.old:before {
    font-family: "Font Awesome 7 Free";
    font-weight: 400;
    content: "\f075";
}
.img, .signature img, .msg img, iframe { max-width: 100% !important; }
.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 25px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 14px;
}

.theme-btn i {
  font-size: 18px;
}

.mode { background: #fff !important; }
.dark .mode { background: #000 !important; }

body {
    background-image: url("../../images/bg.jpg");
    background-repeat: repeat;
}

.dark body {
    background-image: url("../../images/bg2.jpg");
    background-repeat: repeat;
}

.idf-block{
display:flex;
flex-wrap:wrap;
width:100%;
border:1px solid #ccc;
}

.idf-box{
flex:1;
width:300px;
border-right:1px solid #ddd;
}

.idf-box:last-child{
border-right:none;
}

.idf-title{
background: color-mix(in srgb, var(--color1), #000 10%);
color: color-mix(in srgb, var(--color1), #fff 75%);
padding:8px;
font-weight:bold;
}

.idf-content{
padding:10px;
font-size:12px;
line-height:1.6;
}

.idf-content a{
font-weight:bold;
}

.hide { display: none; }

@media (min-width: 1200px) {
.sub{ display:table-cell;width: 50%; }
.hide { display: table-cell !important; }
}

.alt1, .alt1Active { background: color-mix(in srgb, var(--color1), #fff 95%); }
.alt2, .alt2Active { background: color-mix(in srgb, var(--color1), #fff 90%); }

.idf-blur {
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
}

.banner {
 width: 400px;
 max-width: 100%;
 height: 50px;
}

.idf-scroll {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

.scroll {
  display: inline-block;
  padding-left: 100%;
  animation: idf-scroll 10s linear infinite;
}

.user-title { width: 190px; }

@keyframes idf-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.markread { margin: 10px 0; font-weight: bold; display: block; font-size: 15px; background: var(--color1); color: #fff !important; text-align: center; border-radius: 15px; padding: 5px; }
.similar { border:1px solid #e5e5e5;padding:7px;margin:0 5px;}
.similar ul { padding-left: 25px; }
.similar li { color: #0d5f89; }
.similar span { color: #0d5f89; font-weight:700; padding-left: 10px; }
.icon.icons { border:0 !important;padding:0; color: color-mix(in srgb, var(--color1), #000 25%) !important; font-size: 10px; background: unset !important; }
.badge {
  font-size: 9px;
  padding: 1px 2px;
  border: 1px solid;
  border-radius: 5px;
}

.red {
  color: #7a1414;
  background-color: #ffd6d6;
  border-color: #ff9b9b;
}

.green {
  color: #0f6b2a;
  background-color: #d7ffe3;
  border-color: #7de3a0;
}

.blue {
  color: #143a7a;
  background-color: #d6e6ff;
  border-color: #86b4ff;
}

.orange {
  color: #8a4b00;
  background-color: #ffe2bf;
  border-color: #ffb869;
}

.purple {
  color: #4b1a7a;
  background-color: #ead6ff;
  border-color: #c79cff;
}

.pink {
  color: #7a1a4f;
  background-color: #ffd6ea;
  border-color: #ff9ccf;
}

.indigo {
  color: #312e81;
  background-color: #e0e7ff;
  border-color: #a5b4fc;
}

.teal {
  color: #0b5f5a;
  background-color: #d6fffb;
  border-color: #7ce9e2;
}

.sky {
  color: #075985;
  background-color: #e0f2fe;
  border-color: #7dd3fc;
}

.lime {
  color: #3f6212;
  background-color: #ecfccb;
  border-color: #a3e635;
}

.rose {
  color: #881337;
  background-color: #ffe4e6;
  border-color: #fda4af;
}

.cyan {
  color: #006b73;
  background-color: #c9f7fb;
  border-color: #6fe7f2;
}

@media (max-width: 1199px) {
.sub {
  width: 175px;
  font-size: 11px;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}
}

.user-block {
    width: 100% !important;
}

.user-block tr {
    display: flex !important;
}

.user-block td[align="left"] {
    flex: 1 !important;
    margin-right: auto !important; 
}

.avatar-td {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 80px !important;
    flex-shrink: 0 !important; 
}

.avatar-td > div,
.avatar-td .avatar {
    display: flex;
    height: 100%;
    align-items: stretch;
}

.avatar-td img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important; 
}
/* ============ 3) IRCdForum responsive layer ============
   Added 2026-08. Everything above this point is the original theme CSS,
   moved out of the EXTRA / EXTRA2 templates unchanged.

   Breakpoints:  <=480 phone   <=768 large phone   <=1024 tablet   >1024 desktop (untouched)
   ------------------------------------------------------------------ */

/* --- 3.1 Tokens ------------------------------------------------------ */
:root {
	--idf-sidebar-w: 190px;     /* postbit user column; replaces the conflicting 165/190/225px values */
	--idf-radius: 10px;
	--idf-gap: 8px;
	--idf-pad: 10px;
	--idf-font-mobile: 15px;    /* readable body size on phones (was 10pt/13.3px) */
	--idf-font-small-mobile: 13px;

	/* Plain fallbacks for browsers without color-mix() (old Android WebView, iOS < 16.2).
	   Derived from the default --color1 #0e497c; the color-mix() rules below override
	   them wherever they are supported. */
	--idf-fb-dark20: #0b3a63;
	--idf-fb-dark25: #0a376d;
	--idf-fb-dark40: #082c4a;
	--idf-fb-light50: #87a4be;
	--idf-fb-light75: #c3d1de;
}

/* --- 3.2 color-mix() fallbacks --------------------------------------
   Each rule states a static hex first, then the color-mix() version.
   A browser that cannot parse color-mix() keeps the hex; one that can
   uses the mixed value, exactly as before. */
.thead { background: var(--idf-fb-dark20); }
.tcat { background: #0d4574; }
.tfoot, .vbmenu_control { background: var(--idf-fb-dark25); }
.tborder { border-color: var(--idf-fb-dark40); }
.thead a, .vbmenu_control a, .tcat a, .tfoot a { color: var(--idf-fb-light75); }
.postbit-box, .rgxrank { border-color: var(--idf-fb-dark40); }
.dugme a { background: var(--idf-fb-dark25); color: var(--idf-fb-light50); border-color: var(--idf-fb-light50); }

@supports (background: color-mix(in srgb, red, blue)) {
	.thead { background: color-mix(in srgb, var(--color1), #000 20%) !important; }
	.tcat { background: color-mix(in srgb, var(--color1), #000 5%) !important; }
	.tfoot, .vbmenu_control { background: color-mix(in srgb, var(--color1), #000 25%) !important; }
	.tborder { border-color: color-mix(in srgb, var(--color1), #000 40%) !important; }
	.thead a, .vbmenu_control a, .tcat a, .tfoot a { color: color-mix(in srgb, var(--color1), #fff 75%) !important; }
}

/* --- 3.3 Universal guards ------------------------------------------- */
/* Nothing may push the page wider than the screen. */
img, video, iframe, embed, object { max-width: 100%; }
img, video { height: auto; }
/* Post content: long URLs and unbroken strings are the usual culprits. */
.msg, .signature, .postcontent, blockquote { overflow-wrap: break-word; word-wrap: break-word; }
/* Code / quote boxes scroll internally instead of stretching the page. */
.bbcode_container, .alt2 pre, .msg pre { max-width: 100%; overflow-x: auto; }

/* --- 3.4 Tablet and below ------------------------------------------- */
@media (max-width: 1024px) {
	/* Fixed pixel widths baked into master templates. */
	.panel > div[style*="width"],
	div[style*="max-width"][style*="formwidth"] { max-width: 100% !important; width: auto !important; }
	textarea, input[type="text"], input[type="password"], select { max-width: 100%; }
}

/* --- 3.5 Phones ------------------------------------------------------ */
@media (max-width: 768px) {
.ircdstatus {
    max-width: 75px;
}
	body { font-size: var(--idf-font-mobile); }
	td, th, p, li { font-size: var(--idf-font-mobile); }
	.smallfont, .smallfont td, .smallfont div { font-size: var(--idf-font-small-mobile); }
	.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: var(--idf-font-small-mobile); }

	/* Touch targets: vB's nav cells and control links are ~16px tall by default. */
	.vbmenu_control a, .vbmenu_option a, .tfoot a, .thead a {
		display: inline-block;
		padding: 0 10px;
	}
	.dugme a { line-height: 1.2; }

	/* nowrap is what forces the 980px layouts to overflow. */
	td[nowrap], th[nowrap], .vbmenu_control, span[style*="nowrap"], div[style*="nowrap"] {
		white-space: normal !important;
	}

	/* Popup menus become bottom sheets. vB writes left/top inline, so !important. */
	.vbmenu_popup {
		position: fixed !important;
		left: 8px !important;
		right: 8px !important;
		top: auto !important;
		bottom: 80px !important;
		width: auto !important;
		max-height: 70vh;
		overflow-y: auto;
		border-radius: var(--idf-radius);
		box-shadow: 0 6px 28px rgba(0,0,0,.35);
		z-index: 3000;
	}
	.vbmenu_popup table { width: 100%; }
	.vbmenu_popup td { white-space: normal; }

	/* Pagination stays reachable rather than overflowing. */
	.pagenav { max-width: 100%; }
	.pagenav td { padding: 6px 8px; }

	/* Editor and forms fill the width. */
	.sceditor-container, .vBulletin_editor, #vB_Editor_QR_editor { width: 100% !important; max-width: 100% !important; }
	.panel, .panelsurround { padding: var(--idf-pad) !important; }
	.panel > div { max-width: 100% !important; width: auto !important; }
}

/* --- 3.6 Small phones ------------------------------------------------ */
@media (max-width: 480px) {
	:root { --idf-pad: 8px; }
	.page2 { padding: 0 4px; }
}

/* --- 3.7 Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- 3.8 Back-to-top button (moved out of the footer template) ------- */
#backToTopBtn {
	display: flex;
	visibility: hidden;
	opacity: 0;
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: var(--color1);
	color: #fff !important;
	border: none;
	border-radius: 50%;
	width: 45px;
	height: 45px;
	font-size: 20px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	z-index: 9999;
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
	text-decoration: none !important;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
#backToTopBtn i { color: #fff !important; }
#backToTopBtn.show { visibility: visible; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
	#backToTopBtn:hover {
		background-color: color-mix(in srgb, var(--color1), #000 20%);
		transform: translateY(-3px);
	}
}

/* --- 3.9 Rank images (was duplicated inline in 4 templates) ---------- */
.rank img, #rank img {
	width: var(--idf-sidebar-w) !important;
	height: 60px !important;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

/* --- 3.10 Editor toolbar (was an inline <style> in editor_toolbar_on) - */
.sceditor-container { width: 100% !important; }
#vB_Editor_QR_smiliebox table,
#vB_Editor_QR_smiliebox tbody,
#vB_Editor_QR_smiliebox tr { display: block !important; width: 100% !important; }
#vB_Editor_QR_smiliebox tr { white-space: normal !important; }
#vB_Editor_QR_smiliebox td { display: inline-block !important; vertical-align: bottom; }
@media (max-width: 576px) {
	#vB_Editor_QR_smiliebox { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
	/* NB: this used to be `.panelsurround .panel div`, which matched every
	   descendant div - including SCEditor's toolbar groups - and forced them
	   to 100% width. Only the panel's own layout wrapper needs this. */
	.panelsurround > .panel > div { max-width: 100% !important; box-sizing: border-box; }
}

/* --- 3.11 Keyboard focus -------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--color1);
	outline-offset: 2px;
}

/* ============ 4) Shell: header, nav, breadcrumb, tab bar ============
   Added in phase 2. The shell templates (header / navbar) are flex now;
   vB's popup menus still attach to the same element ids as before.
   ------------------------------------------------------------------ */

/* --- 4.1 Header / logo ---------------------------------------------- */
.idf-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--idf-gap);
	padding: 10px 0;
}
.idf-logo { display: block; line-height: 0; }
.idf-logo img { max-width: 100%; height: auto; border: 0; }
.idf-header-ad { margin-left: auto; }

/* --- 4.2 Top bar: burger, home, theme tools, search ------------------ */
.idf-bar {
	display: flex;
	align-items: center;
	gap: var(--idf-gap);
	flex-wrap: wrap;
	padding: 6px 10px;
	border: 0;
	background: var(--idf-fb-dark20);
}
@supports (background: color-mix(in srgb, red, blue)) {
	.idf-bar { background: color-mix(in srgb, var(--color1), #000 20%); }
}
.idf-bar a, .idf-bar .theme-btn { text-decoration: none; }
.idf-bar-home {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	color: var(--idf-fb-light75) !important;
	font-weight: bold;
}
@supports (color: color-mix(in srgb, red, blue)) {
	.idf-bar-home { color: color-mix(in srgb, var(--color1), #fff 75%) !important; }
}
.idf-bar-tools { display: flex; align-items: center; gap: 6px; }
.idf-search-form { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.idf-search-form .idf-search { min-width: 0; }

/* The burger only exists on small screens. */
.idf-burger {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 25px;
	border: 1px solid #ccc;
	background: #f5f5f5;
	cursor: pointer;
	font-size: 14px;
}
.idf-burger i { font-size: 18px; }

/* --- 4.3 Quick nav row ---------------------------------------------- */
.idf-quicknav {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1px;
	padding: 1px;
	background: var(--idf-fb-dark40);
}
@supports (background: color-mix(in srgb, red, blue)) {
	.idf-quicknav { background: color-mix(in srgb, var(--color1), #000 40%); }
}
.idf-navlink {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 12px;
	text-align: center;
	white-space: nowrap;
	font: bold 11px tahoma, verdana, geneva, lucida, arial, helvetica, sans-serif;
	background: var(--idf-fb-dark25);
	color: var(--idf-fb-light75) !important;
	text-decoration: none;
}
@supports (background: color-mix(in srgb, red, blue)) {
	.idf-navlink {
		background: color-mix(in srgb, var(--color1), #000 25%);
		color: color-mix(in srgb, var(--color1), #fff 75%) !important;
	}
}
.idf-navlink:hover { text-decoration: underline; }

/* --- 4.4 Breadcrumb + account --------------------------------------- */
.idf-crumbbar {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1px;
	margin-bottom: 15px;
	padding: 1px;
}
.idf-crumbs { flex: 1 1 60%; min-width: 0; padding: 8px 10px; }
.idf-crumb-trail { font-size: 11px; }
.idf-crumb-current { font-size: 13px; margin-top: 2px; }
.idf-account, .idf-login { flex: 1 1 240px; padding: 8px 10px; }
.idf-login-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.idf-login-row label { flex: 0 0 auto; }
.idf-login-row input[type="text"], .idf-login-row input[type="password"] { flex: 1 1 auto; min-width: 0; }
.idf-login-actions { justify-content: space-between; flex-wrap: wrap; }

/* --- 4.5 Bottom tab bar (members, small screens only) ---------------- */
.idf-tabbar { display: none; }

/* --- 4.6 Small screens ---------------------------------------------- */
@media (max-width: 768px) {
.page2 { padding: 15px 0; }
	.idf-header { padding: 8px 4px; }
	.idf-logo img { max-height: 64px; width: auto; }

	.idf-bar { gap: 6px; padding: 6px; }
	.idf-burger { display: inline-flex; }
	/* The search box would wrap the bar onto three lines; give it its own row. */
	.idf-search-form { flex: 1 1 100%; margin-left: 0; order: 5; }
	.idf-search-form .idf-search { flex: 1 1 auto; }
	.theme-btn .text, .idf-bar-home .text, .idf-burger .text { display: none; }
	.theme-btn { padding: 8px 12px; }

	/* Nav collapses behind the burger. */
	.idf-quicknav {
		display: none;
		flex-direction: column;
		gap: 1px;
		margin-top: 6px;
	}
	.idf-quicknav.is-open { display: flex; }
	.idf-navlink {
		flex: 1 1 auto;
		justify-content: flex-start;
		padding: 12px 14px;
		font-size: 14px;
		white-space: normal;
	}
	.idf-navlink i { width: 20px; text-align: center; }

	/* Breadcrumb and account stack. */
	.idf-crumbs, .idf-account, .idf-login { flex: 1 1 100%; }
	.idf-crumb-trail { font-size: 12px; }

	/* Bottom tab bar, with padding so it never covers the last of the page. */
	.idf-tabbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2500;
		background: var(--idf-fb-dark25);
		border-top: 1px solid var(--idf-fb-dark40);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}
	@supports (background: color-mix(in srgb, red, blue)) {
		.idf-tabbar { background: color-mix(in srgb, var(--color1), #000 25%); }
	}
	.idf-tabbar a {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 8px 2px;
		min-height: 52px;
		color: var(--idf-fb-light75) !important;
		text-decoration: none;
		font-size: 10px;
		text-align: center;
	}
	@supports (color: color-mix(in srgb, red, blue)) {
		.idf-tabbar a { color: color-mix(in srgb, var(--color1), #fff 75%) !important; }
	}
	.idf-tabbar a i { font-size: 17px; }
	/* Keep the back-to-top button clear of the tab bar. */
	body { padding-bottom: 56px; }
	#backToTopBtn { bottom: 68px; }
}

/* ============ 5) Lists: forum home, forum display, search results ============
   Added in phase 3. The tables stay tables - vB's ajax thread editing, inline
   moderation (which walks up to the TR element) and collapse/expand all depend
   on that DOM. Below 768px the rows are laid out as blocks instead, and the
   columns that were previously just hidden come back as a meta line.
   ------------------------------------------------------------------------- */

/* The meta lines are mobile-only; .showmobile already handles that, but be
   explicit so they never leak into the desktop layout. */
.idf-thread-meta, .idf-forum-meta { display: none; }

@media (max-width: 768px) {
	/* Section 5.1 used to blanket-block every cell in #threadslist. The card
	   layout (tr.idf-thread, section 5b) replaced it; the blanket rule also
	   caught spanning cells elsewhere in the table - search.php's results
	   footer among them - dropping their colspan so the bar painted short.
	   Only the .hidemobile guard is still needed. */
	#threadslist > tbody > tr > td.hidemobile,
	#threadslist > thead > tr > td.hidemobile,
	#threadslist > tbody > tr > th.hidemobile { display: none !important; }

	/* --- 5.2 Meta lines ------------------------------------------------
	   One quiet line under the title: counts on the left, last post on the
	   right. The counts carry a label via ::after so a bare "21" is not left
	   to be guessed at, and the last-post block (which vB renders as three
	   stacked divs) is folded back onto a single line. */
	.idf-thread-meta,
	.idf-forum-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 2px 14px;
		margin-top: 7px;
		padding-top: 0px;
		font-size: 12px;
		line-height: 1.5;
	}

	/* --- counts ---------------------------------------------------- */
	.idf-thread-meta .idf-meta-counts,
	.idf-forum-meta .idf-meta-counts {
		display: inline-flex;
		align-items: baseline;
		gap: 14px;
		white-space: nowrap;
		opacity: .8;
		font-variant-numeric: tabular-nums;
	}
	.idf-thread-meta .idf-meta-counts i,
	.idf-forum-meta .idf-meta-counts i {
		margin-right: 5px;
		font-size: 11px;
		opacity: .75;
	}

	/* --- last post: fold vB's stacked divs into one line ------------ */
	.idf-meta-last {
		min-width: 0;
		display: inline-flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 0 5px;
		opacity: .9;
	}
	.idf-forum-meta .idf-meta-last > div,
	.idf-forum-meta .idf-meta-last .smallfont > div {
		display: inline;
		text-align: left !important;
		white-space: normal !important;
	}
	.idf-forum-meta .idf-meta-last .smallfont {
		display: inline-flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 0 5px;
		font-size: 12px;
	}
	/* the thread title inside the last-post block should not shout */
	.idf-forum-meta .idf-meta-last strong { font-weight: 600; }
	/* vB puts a status icon in front of the last post; keep it out of the way */
	.idf-forum-meta .idf-meta-last img.inlineimg { display: none; }
	/* the "go to last post" arrow */
	.idf-meta-last i.fa-forward { font-size: 11px; opacity: .7; }

	/* On very narrow screens let the two halves sit on their own lines. */
	@media (max-width: 420px) {
		.idf-thread-meta,
		.idf-forum-meta { gap: 3px 10px; }
		.idf-thread-meta .idf-meta-counts,
		.idf-forum-meta .idf-meta-counts { order: 2; }
		.idf-meta-last { order: 1; flex: 1 1 100%; }
	}
	/* --- 5.3 Forum home rows ----------------------------------------- */
	/* NB: do not set `display:block` on a spanning heading cell - that drops it
	   out of the table model, its colspan stops applying and the background
	   only paints one column's width (showgroups.php showed this clearly). */
	/* The forum title cell holds an inner table (icon + text); let it wrap. */
	td.alt1Active > table, td.alt1Active > table > tbody,
	td.alt1Active > table > tbody > tr { display: block; width: 100%; }
	td.alt1Active > table > tbody > tr > td { display: block; width: auto; }
	td.alt1Active[colspan] { padding: 10px !important; }

	/* --- 5.4 Thread title readability -------------------------------- */
	td[id^="td_threadtitle_"] a[id^="thread_title_"] {
		display: inline;
		font-size: 15px;
		line-height: 1.35;
	}
	/* Badges wrap rather than pushing the title out of the row. */
	td[id^="td_threadtitle_"] .badge { display: inline-block; margin: 1px 0; }

	/* --- 5.5 Display-options / who's-online panels ------------------- */
	/* These are two- and three-column tables of controls; stack them. */
	form select, form input[type="text"] { max-width: 100%; }
}

/* --- 5.6 Thread card ordering (phase 3) ------------------------------
   In source order the thread starter comes after the meta line; on a phone it
   reads better directly under the title. Flex ordering fixes that without
   moving anything in the template (vB's ajax editing keeps its DOM). */

/* ============ 6) Post bit (phase 4) ============
   One DOM for the user details, laid out two ways:
   desktop  - a fixed left column beside the message (as before)
   phone    - a horizontal strip above the message: avatar, name, title, status
   The table element and every id vB's JS binds to are unchanged.
   -------------------------------------------------------------- */

/* Desktop: the user cell keeps the column width that used to be width="165". */
.idf-userinfo { width: var(--idf-sidebar-w); vertical-align: top; }

@media (max-width: 768px) {
	/* --- 6.1 Turn the post table into a stack ------------------------ */
	table[id^="post"] { display: block; width: 100%; box-sizing: border-box; }
	table[id^="post"] > tbody { display: block; width: 100%; }
	table[id^="post"] > tbody > tr { display: block; width: 100%; }
	table[id^="post"] > tbody > tr > td {
		display: block;
		width: auto !important;
		box-sizing: border-box;
	}
	/* .hidemobile still wins (post number cell, desktop-only controls). */
	table[id^="post"] > tbody > tr > td.hidemobile { display: none !important; }

	/* --- 6.2 User details become a horizontal strip ------------------- */
	.idf-userinfo {
		width: auto !important;
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		padding: 8px !important;
		border-bottom: 1px solid var(--idf-fb-dark40) !important;
	}
	/* The menu wrapper holds the name; keep it inline in the strip. */
	.idf-userinfo > div[id^="postmenu_"] {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.idf-userinfo .idf-user-name { margin: 0; padding: 0; border: 0; text-align: left; }
	.idf-userinfo .idf-user-name .bigusername { font-size: 16px; }
	/* Online status pill sits under the name. */
	.idf-userinfo .ircdstatus { width: auto; display: inline-block; margin: 2px 0 0; padding: 3px 10px; }

	/* Avatar leads the strip. */
	.idf-userinfo .idf-user-avatar {
		order: 0;
		flex: 0 0 auto;
		margin: 0;
		padding: 0;
		border: 0;
		width: 56px;
	}
	.idf-userinfo .idf-user-avatar img {
		width: 56px !important;
		height: 100% !important;
		object-fit: cover;
		border-radius: 8px;
		display: block;
	}

	.idf-userinfo .idf-user-title {
		order: 2;
		flex: 1 1 100%;
		width: auto;
		margin: 0;
		padding: 0;
		border: 0;
		text-align: left;
		font-size: 12px;
		opacity: .85;
	}
	.idf-userinfo .idf-user-rank { order: 3; flex: 0 0 auto; margin: 0; padding: 0; border: 0; }

	/* --- 6.3 Secondary stats collapse behind a summary ---------------- */
	/* Join date, post counts, reputation and so on are reference detail; on a
	   phone they would push the message far down the screen. */
	.idf-userinfo .idf-userstats {
		order: 4;
		flex: 1 1 100%;
		display: none;
		margin-top: 6px;
		padding-top: 6px;
		border-top: 1px dotted var(--idf-fb-dark40);
	}
	.idf-userinfo.is-open .idf-userstats { display: block; }
	.idf-userstats-toggle {
		order: 5;
		flex: 0 0 auto;
		margin-left: auto;
		background: none;
		border: 1px solid var(--idf-fb-dark40);
		border-radius: 14px;
		padding: 5px 12px;
		font: inherit;
		font-size: 12px;
		color: inherit;
		cursor: pointer;
		min-height: 32px;
	}
	.idf-userstats .postbit-box { margin-bottom: 4px; }

	/* --- 6.4 Message and controls ------------------------------------ */
	td[id^="td_post_"] { padding: 10px !important; }
	td[id^="td_post_"] .msg { font-size: 15px; line-height: 1.55; }
	/* Control buttons wrap into a comfortable row. */
	table[id^="post"] .dugme { margin: 2px; }
	table[id^="post"] .dugme a { font-size: 12px; }
}

/* The toggle button only exists on phones; hide it everywhere else. */
.idf-userstats-toggle { display: none; }
@media (max-width: 768px) { .idf-userstats-toggle { display: inline-block; } }

/* --- 6.5 Quick edit / quick reply editor on phones -------------------
   vB sizes the WYSIWYG iframe in pixels (it comes back from ajax with a
   fixed width), which overflows a phone. Constrain the editor chrome. */
@media (max-width: 768px) {
	.vBulletin_editor,
	.vBulletin_editor table,
	div[id^="vB_Editor_"] { max-width: 100% !important; width: auto !important; }
	div[id^="vB_Editor_"] iframe,
	div[id^="vB_Editor_"] textarea {
		max-width: 100% !important;
		box-sizing: border-box;
	}
	/* The toolbar is a table of buttons; let it wrap instead of scrolling away. */
	div[id^="vB_Editor_"] .controlbar table,
	div[id^="vB_Editor_"] .controlbar tbody,
	div[id^="vB_Editor_"] .controlbar tr { display: block; width: 100%; }
	div[id^="vB_Editor_"] .controlbar td { display: inline-block; vertical-align: middle; }
}

/* --- 6.6 Thread controls row (buttons + pagination) ------------------
   SHOWTHREAD puts "new thread / reply" and the page navigation in one
   two-cell row. Together they are wider than a phone, so stack them. */
@media (max-width: 768px) {
	/* Scoped to the thread-page control row (buttons + pagination), whose
	   cells carry .smallfont. An unscoped rule here also hits the member
	   list, the moderation lists and who's-online, stacking their data
	   columns and leaving the headers pointing at nothing. */
	.page2 > table > tbody > tr > td.smallfont,
	.page2 > form > table > tbody > tr > td.smallfont {
		display: block;
		width: auto !important;
		max-width: 100%;
	}
	/* Pagination gets its own line and scrolls sideways if it is very long. */
	.pagenav {
		max-width: 100%;
		display: inline-table;
	}
	/* let a long pagination strip scroll instead of stretching the page */
	.page2 .pagenav { max-width: 100%; }
}

/* ============ 7) Forms, editor and the user area (phase 5) ============
   Most of these pages are master templates this style does not override
   (register, profile, private messages, subscriptions, calendar...). They all
   share the same vB building blocks, so a single set of rules covers them.
   ------------------------------------------------------------------- */

/* --- 7.1 The standard vB form table ------------------------------- */
@media (max-width: 768px) {
	/* vB lays forms out as label/field table rows. Stack them. */
	.panel table.fieldset,
	.panel table.fieldset > tbody,
	.panel table.fieldset > tbody > tr { display: block; width: 100%; }
	.panel table.fieldset > tbody > tr > td { display: block; width: auto !important; }

	/* Inputs fill the available width instead of using their size attribute. */
	.panel input[type="text"],
	.panel input[type="password"],
	.panel input[type="email"],
	.panel textarea,
	.panel select,
	fieldset input[type="text"],
	fieldset input[type="password"],
	fieldset textarea,
	fieldset select {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
		min-height: 38px;
		font-size: 15px;
	}
	/* ...but not the small ones that sit inline (day/month/year, page jump). */
	.panel input[size="2"], .panel input[size="3"], .panel input[size="4"],
	fieldset input[size="2"], fieldset input[size="3"], fieldset input[size="4"] {
		width: auto !important;
		min-width: 4em;
	}
	input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
	input[type="submit"], input[type="button"], input[type="reset"], .button {
		font-size: 14px;
	}

	/* Legends and fieldsets get room to breathe. */
	fieldset { padding: 8px; margin-bottom: 10px; }
	legend { font-size: 13px; }

	/* --- 7.2 User CP: sidebar above content ----------------------- */
	/* USERCP_SHELL is a two-column table (nav | content). */
	#usercp_nav, .usercp_nav { width: 100% !important; }
	body[class] .table, table.table, table.table > tbody, table.table > tbody > tr {
		display: block;
		width: 100% !important;
	}
	table.table > tbody > tr > td, td.td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}
	/* The nav table inside that cell keeps its own rows, just full width. */
	table.tborder.td { width: 100% !important; }

	/* --- 7.3 Member profile --------------------------------------- */
	/* memberinfo_css already stacks these at 976px; make sure nothing
	   inside forces a wider box. */
	#usercss, #content_container, #content, #sidebar_container {
		width: 100% !important;
		max-width: 100%;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}
	#main_userinfo h1 { font-size: 20px; }
	#profilepic_cell img, .profilepic img { max-width: 96px; height: auto; }
	/* The profile tab strip scrolls rather than wrapping into a tall block. */
	#profile_tabs .tab_header, ul.tab_header {
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		gap: 2px;
	}
	#profile_tabs .tab_header li, ul.tab_header li { flex: 0 0 auto; }

	/* --- 7.4 Private messages ------------------------------------- */
	/* The folder controls and message list share the generic rules above;
	   the message view has its own two-column head. */
	.pm_head, .pm_head > tbody, .pm_head > tbody > tr { display: block; width: 100%; }
	.pm_head > tbody > tr > td { display: block; width: auto !important; }

	/* --- 7.5 Forum rules box -------------------------------------- */
	/* forumrules is a fixed 210px box floated beside the forum jump. */
	table.tborder[width="210"] { width: 100% !important; }
	table.tborder[width="210"] td[nowrap] { white-space: normal !important; }
}

/* --- 7.6 Editor toolbar (all widths) ------------------------------ */
/* The toolbar is a table of icon buttons. Let it wrap on narrow screens
   instead of running off the side. */
@media (max-width: 768px) {
	.imagebutton { margin: 1px; }
	.controlbar { width: 100% !important; box-sizing: border-box; }
	.controlbar > table,
	.controlbar > table > tbody { display: block; width: 100% !important; }
	.controlbar > table > tbody > tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
	}
	.controlbar > table > tbody > tr > td {
		display: inline-flex;
		align-items: center;
		width: auto !important;
	}
	/* the font / size / colour pickers keep their own inner tables */
	.controlbar .imagebutton table,
	.controlbar .imagebutton tbody,
	.controlbar .imagebutton tr { display: table; }
	.controlbar .imagebutton td { display: table-cell !important; }
	/* Smilie box: a grid rather than a fixed-width table. */
	#vB_Editor_QR_smiliebox td, #vB_Editor_001_smiliebox td { padding: 2px; }
}

/* ============ 8) Partner banner strip (phase 6) ============
   FORUMHOME on the live site carries a row of ~12 partner banner GIFs
   (this block is not present in the local database copy). Each is 400x50,
   so on a phone they stack into a dozen full-width rows. Lay them out as a
   wrapping grid instead, two per line on small screens.
   The markup is a plain <div align="center"> of <a><img class="img banner">,
   so target the images' own container rather than adding a class. */
@media (max-width: 768px) {
	/* Two banners per line instead of a dozen stacked rows. The base rule in
	   section 2 pins height:50px, so release it here to keep the aspect. */
	img.banner {
		width: 46vw;
		max-width: 200px;
		height: auto;
		margin: 4px 2px;
	}
}

/* ============ 5b) Thread list on phones ============
   The row becomes a card. Every part is named in the template, so this needs
   no absolute positioning and no !important: the icon cell and the moderation
   cell shrink to their content, the main cell takes the rest. The stripe stays
   on the cells, which is where vB puts .alt1 / .alt2, so the colours follow
   the theme with nothing hard-coded here. */
@media (max-width: 768px) {
	/* Satirlar display:flex olunca tablo satiri olmaktan cikar; tbody de
	   anonim bir tablo kutusuna donusup icerigi kadar daralir (620px'lik
	   tabloda 529px). Aradaki fark saginda bos bir sutun olarak gorunur.
	   Tablo ve tbody'yi de blok yapinca kartlar tam genisligi kaplar. */
	#threadslist,
	#threadslist > tbody { display: block; width: 100%; }

	#threadslist > tbody > tr.idf-thread {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		border-bottom: 1px solid rgba(128, 128, 128, .18);
		width: 100%;
		box-sizing: border-box;
	}

	/* status icon: narrow leading column */
	#threadslist > tbody > tr.idf-thread > .idf-thread-icon {
		flex: 0 0 auto;
		display: block;
		width: auto;
		line-height: 0;
		width: 15px;
	}
	#threadslist > tbody > tr.idf-thread > .idf-thread-icon img {
		width: 15px;
		height: 15px;
		object-fit: contain;
	}

	/* the card body */
	#threadslist > tbody > tr.idf-thread > .idf-thread-main {
		flex: 1 1 0;
		min-width: 0;
		display: block;
		width: auto;
		padding: 9px 10px;
	}

	/* moderation checkbox: narrow trailing column */
	#threadslist > tbody > tr.idf-thread > .idf-thread-mod {
		flex: 0 0 auto;
		display: block;
		width: auto;
		padding: 11px 10px 11px 0;
	}
	#threadslist > tbody > tr.idf-thread > .idf-thread-mod input {
		width: 18px;
		height: 18px;
		margin: 0;
	}

	/* --- inside the card --- */
	.idf-thread-head { display: block; line-height: 1.4; }
	.idf-thread-badges { white-space: nowrap; }
	.idf-thread-head .badge {
		font-size: 9px;
		padding: 2px 4px;
		vertical-align: middle;
	}
	.idf-thread-title { font-size: 15px; font-weight: 600; }
	.idf-thread-pages, .idf-thread-flags { white-space: nowrap; }
	.idf-thread-starter {
		display: block;
		margin-top: 2px;
		font-size: 12px;
		opacity: .75;
	}

	/* the figures the desktop columns carry */
	.idf-thread-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 2px 14px;
		margin-top: 7px;
		padding-top: 0px;
		font-size: 12px;
	}
	.idf-thread-meta .idf-meta-last { min-width: 0; opacity: .9; }
	.idf-thread-meta .idf-meta-counts {
		display: inline-flex;
		gap: 14px;
		white-space: nowrap;
		opacity: .8;
		font-variant-numeric: tabular-nums;
	}
	.idf-count { display: inline-flex; align-items: baseline; gap: 4px; }
	.idf-count i { font-size: 11px; opacity: .75; }
	.idf-count-label { font-size: 11px; opacity: .62; }

	/* the forum name now rides inside the meta line (see threadbit), so the
	   original cell is just another desktop column and needs nothing here */
	.idf-meta-forum {
		display: inline-flex;
		align-items: baseline;
		gap: 5px;
		white-space: nowrap;
		opacity: .75;
	}
	.idf-meta-forum i { font-size: 11px; opacity: .8; }

	/* The sort header row means nothing once the columns are gone. This used
	   to key off tr:first-child, but $announcebits renders INSIDE the same
	   <tbody> above the header, so on a forum with an announcement the header
	   was no longer :first-child and came back - as a stray "Forum Araclari"
	   bar plus an empty column beside the cards. Key off the cells instead:
	   only the header row is built from .thead / .vbmenu_control cells, and
	   the announcement/thread rows carry .idf-thread. */
	#threadslist > tbody > tr:not(.idf-thread) > td.thead,
	#threadslist > tbody > tr:not(.idf-thread) > td.vbmenu_control { display: none; }
}

@media (max-width: 420px) {
	.idf-thread-meta { gap: 3px 10px; }
	.idf-thread-meta .idf-meta-last { flex: 1 1 100%; }
}

/* the meta line exists only on phones. NB: scope this to the desktop
   breakpoint - an unscoped rule here sits after the media query above and
   would hide the line on phones as well. */
@media (min-width: 769px) {
	.idf-thread-meta { display: none; }
}

/* ============ 8a) konu ikonu sutunu (masaustu) ============
   Responsive threadbit, master surumdeki iki bas hucreden durum-ikonu
   hucresini kaldirdi (rozetlere tasindi) ve geriye sadece .idf-thread-icon
   kaldi. Ona ait tek kural seti max-width:768px icindeydi, yani masaustunde
   hucre stilsiz kaliyor: genisligi yok, icerigine gore eziliyor ve ikon
   gorunmez oluyordu. Mobil kart duzeni ayni sinifi zaten stilliyor ve bu blok
   dosyada ondan SONRA geliyor, bu yuzden masaustu breakpointine kapatilmali -
   aksi halde width/padding mobildeki flex hucresini de ezerdi. */
@media (min-width: 769px) {
	#threadslist > tbody > tr.idf-thread > .idf-thread-icon {
		text-align: center;
		vertical-align: middle;
		padding: 0 5px;
	}
	#threadslist > tbody > tr.idf-thread > .idf-thread-icon img {
		max-width: 16px;
		max-height: 16px;
		vertical-align: middle;
	}
}
/* ============ 8b) silinmis konu satiri (threadbit_deleted) ============
   Silinen konu master threadbit_deleted ile basiliyordu: basta fazladan bir
   durum-ikonu hucresi vardi, hucrelerde .hidemobile yoktu ve satir
   .idf-thread tasimadigi icin mobil kart duzenine hic girmiyordu - liste
   kayiyordu. styleid 2 icin override edilen sablon artik normal threadbit
   ile ayni hucre dizilimini kullaniyor; burasi sadece gorsel ayirt icin. */
tr.idf-thread-deleted > td { opacity: .72; }
tr.idf-thread-deleted .idf-thread-title,
tr.idf-thread-deleted .idf-thread-title em { text-decoration: line-through; }
tr.idf-thread-deleted .idf-thread-flags a { margin-left: 6px; }
.idf-thread-delinfo { white-space: normal; }
/* ============ 9) .hidemobile guard (must stay last) ============
   Several rules in sections 5-7 convert table cells to blocks so the lists
   can stack. They share `.hidemobile`'s specificity and are declared later,
   which silently un-hides the desktop-only columns - the figures then show
   twice on a phone: once in the meta line, once in the columns it replaced.
   This guard restores the intent. Keep it at the end of the file. */
@media (max-width: 768px) {
	.hidemobile,
	td.hidemobile,
	th.hidemobile,
	tr.hidemobile,
	div.hidemobile,
	span.hidemobile,
	table.hidemobile { display: none !important; }
}
@media (min-width: 769px) {
	.showmobile { display: none !important; }
}

/* ============ 12) Data tables on phones (phase 6) ============
   Member list, moderation queues, who's-online and similar pages are genuine
   data tables: their columns mean something, so they stay tables and scroll
   sideways inside their own box rather than being stacked into loose blocks. */
@media (max-width: 768px) {
	/* the A-Z jump strip on the member list */
	.memberlist_alpha, table.tborder td[colspan] > .smallfont { overflow-x: auto; }

	/* let a wide data table scroll within the page instead of stretching it */
	#memberlist_table, .memberlist_table { display: block; overflow-x: auto; }

	/* A data table wider than the phone has to scroll, but it must stay a
	   real table: `display:block` stops the cells stretching, so .thead and
	   .alt1 / .alt2 only paint behind their text and the header row looks
	   colourless. Scroll the containing block instead and leave the table
	   alone. */
	.page2 {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.page2 > table.tborder,
	.page2 > form > table.tborder {
		max-width: 100%;
	}
	/* ...but the forum and thread lists are handled by their own card
	   rules above and must not be turned into scroll boxes */
	#threadslist,
	#threadslist > tbody { display: table !important; overflow: visible !important; }
}

/* ============ 13) Footer bar (phase 6) ============
   Style / language pickers on one side, the link row on the other. The
   separators are drawn by CSS rather than typed into the template, so a line
   that wraps never begins or ends with a dangling dash. */
.idf-footbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 8px 12px;
	box-sizing: border-box;
}
.idf-footbar-pickers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}
.idf-footbar-pickers select { max-width: 100%; min-height: 32px; }

.idf-footbar-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 2px 0;
	min-width: 0;
	font-weight: bold;
}
.idf-footbar-links > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	white-space: nowrap;
}
/* The separator is a border on the item, not a flex child. A separator that
   participates in the flow can always be orphaned at a line edge -
   ::before strands it at the start of a wrapped line, ::after at the end.
   A border belongs to the box, so it can never be left on its own. */

@media (max-width: 768px) {
	.idf-footbar {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 10px;
	}
	.idf-footbar-pickers { justify-content: center; }
	.idf-footbar-pickers select { flex: 1 1 auto; min-width: 0; }
	.idf-footbar-links {
		justify-content: center;
		gap: 2px 0;
	}
	.idf-footbar-links > a { padding: 8px 10px; }
}

/* ============ 14) Button text alignment ============
   .dugme wraps a link styled as a button. Its text was sitting low because
   the box had padding but no vertical centring, so a two-line label pushed
   the first line up and left the second hanging. */
.dugme a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.25;
}

/* ============ 15) Thread action buttons ============
   "Yeni Konu" / "Yanitla" sit in an unwidthed table cell next to the pagenav
   cell. The browser squeezes that cell to its minimum content width, and the
   two buttons then break onto separate lines.

   nowrap alone is not enough: the cell can still be sized below the pair's
   width, so the buttons overflow or get crushed. width:1% + white-space:nowrap
   on the cell is the classic table idiom for "size this column to exactly its
   content", which gives the flex row the width it needs. */
.idf-threadbuttons {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
}
.idf-threadbuttons .dugme { display: block; flex: 0 0 auto; }
.idf-threadbuttons .dugme a { white-space: nowrap; }
/* The cell holding them must not be squeezed below the pair's natural width.
   The class is put on the <td> itself by the template, so no :has() needed. */
td.idf-threadbuttons-cell { width: 1%; white-space: nowrap; }
/* On a phone the pagenav moves below anyway, so the pair gets the full width;
   allow the buttons to share it evenly rather than hugging the left edge. */
@media (max-width: 480px) {
	.idf-threadbuttons { display: flex; }
	.idf-threadbuttons .dugme { flex: 1 1 0; min-width: 0; }
	.idf-threadbuttons .dugme a { padding-left: 8px; padding-right: 8px; }
}

/* ============ 16) Forum rules / forum jump footer ============
   vB lays these two blocks out as one <tr> with two <td>s: the rules box on
   the left, the "Foruma Git" jump form on the right. Two problems:

   1. The jump form's <select> and its Git button are plain inline elements,
      so as soon as the right-hand cell is narrower than select+button the
      button drops onto its own line under the select.
   2. Side-by-side cells waste space once the viewport narrows, and the pair
      reads better stacked and centred.

   Fix: make the footer table a flex column so each cell becomes a full-width
   centred row (rules on top, jump below), and make the jump form's own
   controls a centred flex row that keeps the button beside the select. */
.idf-formfooter,
.idf-formfooter > tbody,
.idf-formfooter > tbody > tr {
	display: block;
	width: 100%;
}
.idf-formfooter > tbody > tr > td {
	display: block;
	width: auto !important;
	text-align: center;
	padding: 0 0 10px 0;
}
/* the rules box is a fixed-width table; centre it inside its now-full-width cell */
.idf-formfooter > tbody > tr > td > table {
	margin-left: auto;
	margin-right: auto;
}
/* vB puts a spacer div holding a bare &nbsp; above the rules box; it only
   existed to bottom-align the old side-by-side cells, so hide it when stacked.
   :empty will not match it (it has a text node), hence the structural rule. */
.idf-formfooter > tbody > tr > td > .smallfont:first-child { display: none; }

/* Forum jump wrapper: vB hardcodes text-align:left and white-space:nowrap
   inline on this div. Centre it and let the generic .idf-selectgo rule below
   do the actual one-row layout of label + select + button. */
.idf-forumjump { text-align: center !important; white-space: normal !important; }

/* ---- Generic: any "<select> then submit" control pair stays on one row ----
   vB uses this shape in ~33 templates (forum jump, inline moderation, search,
   calendar jump, subscriptions...). They are all a <select> immediately
   followed by a submit button inside a form, with the label and a <br> in
   front. Rather than tagging each template, target the shape itself.

   .idf-selectgo is applied by JS to the select's parent, so only real
   select+submit pairs are affected and unrelated forms are left alone. */
.idf-selectgo {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	max-width: 100%;
	white-space: nowrap;
}
.idf-selectgo > br { display: none; }
/* A flex container makes EVERY child a flex item, which resurrects things the
   browser normally does not render: hidden inputs (vB puts 4-5 of them after
   the submit) and inline <script> tags. Each then contributes a gap, widening
   the row past its cell and producing a horizontal scrollbar. Keep them out
   of the layout without affecting what they do. */
.idf-selectgo > input[type="hidden"],
.idf-selectgo > script,
.idf-selectgo > style { display: none !important; }
.idf-selectgo > select {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
}
.idf-selectgo > input[type="submit"],
.idf-selectgo > input.button { flex: 0 0 auto; }
/* The label ('Foruma Git', 'Denetim', ...) shares the row on desktop. On a
   phone the row is too tight for label + select + button, so let the label
   take its own line there and keep select + button together underneath. */
.idf-selectgo > strong,
.idf-selectgo > label { flex: 0 0 auto; }
@media (max-width: 480px) {
	.idf-selectgo { flex-wrap: wrap; }
	.idf-selectgo > strong,
	.idf-selectgo > label { flex-basis: 100%; text-align: center; }
}

/* ---- Thread controls below the posts (buttons | pagenav | moderation) ----
   The moderation form used to float right inside the pagenav cell, where its
   nowrap content overflowed and produced a horizontal scrollbar. It now lives
   in its own <tr>, which fixes the overflow but stacks it under the buttons.

   On desktop we want all three on ONE line, so flatten the table into a flex
   row: both <tr>s become flex items on the same line, buttons pushed left and
   the moderation form right. On mobile the flex direction turns to column, so
   the moderation form drops below the buttons as its own full-width block. */
@media (min-width: 769px) {
	table.idf-threadcontrols,
	table.idf-threadcontrols > tbody {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		width: 100%;
		gap: 10px;
	}
	table.idf-threadcontrols > tbody { flex: 1 1 auto; min-width: 0; }
	table.idf-threadcontrols > tbody > tr {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
		min-width: 0;
	}
	/* first row (buttons + pagenav) takes the slack, moderation hugs the right */
	table.idf-threadcontrols > tbody > tr:first-child { flex: 1 1 auto; }
	table.idf-threadcontrols > tbody > tr:last-child  { flex: 0 1 auto; min-width: 0; }
	table.idf-threadcontrols > tbody > tr > td {
		display: block;
		min-width: 0;
	}
	/* the pagenav cell absorbs the leftover space between the two groups */
	table.idf-threadcontrols > tbody > tr:first-child > td:last-child { flex: 1 1 auto; }
	table.idf-threadcontrols td.idf-inlinemod-cell { padding-top: 0; }
}

td.idf-inlinemod-cell {
	padding-top: 6px;
	text-align: right;
}
.idf-inlinemod {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	max-width: 100%;
}
.idf-inlinemod > br { display: none; }
.idf-inlinemod > strong { flex: 0 0 auto; }
.idf-inlinemod > select {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
}
.idf-inlinemod > input[type="submit"] { flex: 0 0 auto; }
.idf-inlinemod > input[type="hidden"],
.idf-inlinemod > script { display: none !important; }