/* =====================================================================
   Old Forum Responsive -- adaptive layer for the classic vBulletin 3
   table layout.  Nothing here applies above the tablet breakpoint, so a
   desktop keeps the original vBulletin rendering byte for byte.

   Class names are added by ofr.js; the markup itself is never rewritten.
   Anchors come from the real templates (see TABLE-MAP.md):
     td[id^=f]              forum row        (forumhome / forumdisplay)
     td[id^=td_threadtitle_] thread row      (forumdisplay / search / usercp)
     td[id^=td_post_]       post             (showthread / search)
     td[id^=u]              member row       (memberlist)
     td[id^=m]              private message  (private.php)
   ===================================================================== */

html.ofr { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

/* inert until a breakpoint switches them on */
.ofr-menubtn { display: none; }
.ofr-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }

/* Optional and OFF by default (setting "Constrain over-wide content on the
   desktop too"). Stock vBulletin 3 lets an oversized attachment or a long
   code line push the whole page sideways on a desktop as well; switching the
   setting on stops that at every width. It is off by default because it is
   the one rule that can differ from the original rendering above 900px. */
body[data-ofr-wide="1"] div[id^="post_message_"] img,
body[data-ofr-wide="1"] .signature img,
body[data-ofr-wide="1"] td[id^="td_post_"] img,
body[data-ofr-wide="1"] .fieldset img { max-width: 100%; height: auto; }
body[data-ofr-wide="1"] pre.alt2,
body[data-ofr-wide="1"] div.alt2[dir="ltr"] { max-width: 92vw; overflow: auto; }

/* =====================================================================
   TABLET   <= 900px
   Columns stay where they are; only the genuinely optional ones go, and
   nothing is allowed to push the page wider than the screen.
   ===================================================================== */
@media only screen and (max-width: 900px) {

	html body { margin-left: 0; margin-right: 0; }
	div.page { width: auto !important; }
	div.page > div { padding-left: 10px !important; padding-right: 10px !important; }
	table.page { width: 100% !important; }

	/* nothing may exceed the viewport */
	table { max-width: 100%; }
	.ofr-scroll > table { max-width: none; }
	td, th, div, p, li, dd, dt { word-wrap: break-word; }
	.ofr-relax { width: auto !important; max-width: 100% !important; }
	img.ofr-relax { height: auto !important; }

	/* Post content. A table cell cannot be squeezed below the widest thing in
	   it, so a 640px code block holding one very long line, or an oversized
	   attachment, drags the whole postbit past the screen. Percentages are
	   circular inside an auto-layout table; a viewport cap is not. */
	div[id^="post_message_"] img, .signature img, td[id^="td_post_"] img, .fieldset img {
		max-width: 100%; height: auto;
	}
	/* the author column still sits beside the message at this size, so the cap
	   has to leave room for it */
	div[id^="post_message_"] img, .signature img, td[id^="td_post_"] img, .fieldset img {
		max-width: min(100%, calc(100vw - 175px));
	}
	div[id^="post_message_"] iframe, div[id^="post_message_"] embed,
	div[id^="post_message_"] object, div[id^="post_message_"] video {
		max-width: calc(100vw - 175px);
	}
	pre.alt2, div.alt2[dir="ltr"] {
		width: auto !important; max-width: calc(100vw - 175px); overflow: auto;
	}
	div[id^="post_message_"] > div[style*="margin:20px"] { margin-left: 0 !important; margin-right: 0 !important; }

	/* author column: 175px is a lot of a tablet's width */
	.ofr-post-user { width: 125px !important; }
	.ofr-post-user img { max-width: 110px; height: auto; }

	/* optional columns that carry the least information */
	.ofr-t-forums .ofr-c-moderator { display: none !important; }
	.ofr-t-threads .ofr-c-icon2 { display: none !important; }

	/* forms */
	input, textarea, select { max-width: 100%; }
	textarea { width: 100% !important; }
	.vBulletin_editor, [id^="vB_Editor_"] { max-width: 100% !important; }

	/* two-column page shells (user cp, profile) */
	.ofr-shell > tbody > tr > td { display: block; width: auto !important; }
	.ofr-shell > tbody > tr > td.ofr-drop { display: none !important; }
	.ofr-shell > tbody > tr > td > table.tborder { width: 100% !important; }
	/* the nav column is a stack of one-cell rows: give it room to breathe */
	.ofr-shell > tbody > tr > td > table.tborder td { white-space: normal !important; }
	#content_container, #content {
		width: auto !important; float: none !important;
		margin-left: 0 !important; margin-right: 0 !important;
	}
	#sidebar_container { width: auto !important; float: none !important; margin: 10px 0 0 0 !important; }

	/* social groups use the same "reserve a gutter for a floated column"
	   trick: #sg_catcloud & co. carry padding-right:320px and min-width:382px
	   while #sg_newgroups floats into that gutter on a -304px margin */
	#sg_catcloud, #sg_owngroups, #sg_mygroups, #sg_randomgroup {
		padding-left: 0 !important; padding-right: 0 !important; min-width: 0 !important;
	}
	#sg_newgroups {
		float: none !important; width: auto !important;
		margin-left: 0 !important; margin-right: 0 !important;
	}
	.floatwrapper { width: auto !important; float: none !important; }
	.discussion_bit_preview, .action_links { width: auto !important; float: none !important; }

	/* ---------- vB Blog -------------------------------------------- */
	/* The blog adds a 200px floated sidebar by means of a negative-margin
	   content container. At tablet widths it must become an ordinary flow so
	   entries, sidebar blocks, lists and the full editor remain reachable. */
	body[data-ofr-blog="1"] #content_container,
	body[data-ofr-blog="1"] #content,
	body[data-ofr-blog="1"] #sidebar_container {
		float: none !important; width: auto !important; min-width: 0 !important;
		margin-left: 0 !important; margin-right: 0 !important;
	}
	body[data-ofr-blog="1"] #sidebar_container { margin-top: 10px !important; }
	body[data-ofr-blog="1"] .block_category_list,
	body[data-ofr-blog="1"] .sidebar_custom_block { white-space: normal !important; }
	body[data-ofr-blog="1"] .blog_home_list_item,
	body[data-ofr-blog="1"] .ofr-blog-entry,
	body[data-ofr-blog="1"] .ofr-blog-comment,
	body[data-ofr-blog="1"] .ofr-blog-trackback { overflow-wrap: anywhere; word-break: break-word; }
	body[data-ofr-blog="1"] .ofr-blog-entry img,
	body[data-ofr-blog="1"] .ofr-blog-comment img,
	body[data-ofr-blog="1"] .ofr-blog-trackback img,
	body[data-ofr-blog="1"] .attach,
	body[data-ofr-blog="1"] .thumbnail { max-width: 100%; height: auto; }
	body[data-ofr-blog="1"] #inlinemod_comment_controls,
	body[data-ofr-blog="1"] #inlinemod_trackback_controls { float: none !important; margin-top: 8px; }
	body[data-ofr-blog="1"] #tag_edit_list li { float: none !important; width: auto !important; }
	body[data-ofr-blog="1"] .vBulletin_editor,
	body[data-ofr-blog="1"] .panelsurround,
	body[data-ofr-blog="1"] .panel { max-width: 100% !important; }

	/* ---------- vBadvanced CMPS ------------------------------------ */
	body[data-ofr-vba="1"] .draglist { margin-left: 0; padding-left: 0; list-style: none; }
	body[data-ofr-vba="1"] .draglist > li { max-width: 100%; }
	body[data-ofr-vba="1"] table.ofr-portal-columns img,
	body[data-ofr-vba="1"] table.ofr-portal-columns iframe,
	body[data-ofr-vba="1"] table.ofr-portal-columns object,
	body[data-ofr-vba="1"] table.ofr-portal-columns embed { max-width: 100%; height: auto; }
}

/* =====================================================================
   MOBILE   <= 600px
   Table rows become compact cards. The table keeps its tags; only the
   display model changes, so plugins that walk rows/cells still work.
   ===================================================================== */
@media only screen and (max-width: 600px) {

	div.page > div { padding-left: 5px !important; padding-right: 5px !important; }
	td[nowrap], th[nowrap], .vbmenu_control, .thead, .tcat, .tfoot { white-space: normal !important; }
	.vbmenu_popup { max-width: 94%; }
	.vbmenu_popup td { white-space: normal !important; }
	/* 16px stops iOS zooming the page when a field takes focus */
	textarea, select, input.bginput, input:not([type]),
	input[type="text"], input[type="password"], input[type="email"], input[type="url"] {
		font-size: 16px !important; -webkit-box-sizing: border-box; box-sizing: border-box;
	}
	textarea, input.bginput, input:not([type]),
	input[type="text"], input[type="password"], input[type="email"], input[type="url"] { width: 100%; }
	input[size="1"], input[size="2"], input[size="3"], input[size="4"], input[size="5"],
	input[type="checkbox"], input[type="radio"], input[type="submit"],
	input[type="button"], input[type="reset"], input[type="image"], input.button {
		width: auto; font-size: inherit !important;
	}

	/* ---------- list tables -> cards ------------------------------- */
	table.ofr-table {
		display: block; width: auto !important; padding: 1px;
		-webkit-box-sizing: border-box; box-sizing: border-box;
	}
	table.ofr-table > thead, table.ofr-table > tbody, table.ofr-table > tfoot { display: block; }
	table.ofr-table > * > tr { display: block; }
	table.ofr-table > * > tr > td, table.ofr-table > * > tr > th { display: block; width: auto !important; }
	table.ofr-table script { display: none !important; }

	/* header row keeps only the label of the main column */
	table.ofr-table > * > tr.ofr-hrow > td { display: none !important; }
	table.ofr-table > * > tr.ofr-hrow > td.ofr-main {
		display: block !important; text-align: left !important;
	}

	/* one data row = one card; the 1px gap shows the table border colour */
	table.ofr-table > * > tr.ofr-row {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		-ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: start; align-items: flex-start;
		padding: 5px 6px; margin-bottom: 1px; text-align: left;
	}
	table.ofr-table > * > tr.ofr-row > td {
		border: 0 !important; background: transparent !important;
		padding: 0 !important; text-align: left !important; vertical-align: top;
	}
	/* 1 leading icons | 2 main column | 3 counters | 4 long values | 5 controls */
	tr.ofr-row > td.ofr-pre  { -ms-flex: 0 0 auto; flex: 0 0 auto; -ms-flex-order: 1; order: 1; margin: 1px 5px 0 0; }
	/* a leading cell that holds text, not an icon: its own line above the title */
	tr.ofr-row > td.ofr-lead {
		-ms-flex: 1 1 100%; flex: 1 1 100%; -ms-flex-order: 2; order: 2;
		min-width: 0; font-size: 11px;
	}
	tr.ofr-row > td.ofr-main { -ms-flex: 1 1 100%; flex: 1 1 100%; -ms-flex-order: 2; order: 2; min-width: 0; }
	tr.ofr-row > td.ofr-meta {
		-ms-flex: 0 0 auto; flex: 0 0 auto; -ms-flex-order: 3; order: 3;
		margin: 3px 12px 0 0; font-size: 11px;
	}
	tr.ofr-row > td.ofr-meta.ofr-wide {
		-ms-flex: 1 1 100%; flex: 1 1 100%; -ms-flex-order: 4; order: 4; margin-right: 0;
	}
	tr.ofr-row > td.ofr-ctrl {
		-ms-flex: 0 0 auto; flex: 0 0 auto; -ms-flex-order: 5; order: 5;
		margin: 3px 0 0 auto;
	}
	tr.ofr-row > td.ofr-meta[data-ofr-l]::before { content: attr(data-ofr-l) ": "; opacity: .7; }
	tr.ofr-row > td.ofr-drop { display: none !important; }
	/* inner blocks of a counter cell must stay on the chip's line */
	tr.ofr-row > td.ofr-meta div, tr.ofr-row > td.ofr-meta span { display: inline; white-space: normal !important; }
	/* short counters read better on one line; a long value (last post) keeps
	   its own line breaks, otherwise words run together */
	tr.ofr-row > td.ofr-meta br { display: none; }
	tr.ofr-row > td.ofr-meta.ofr-wide br { display: inline; }
	tr.ofr-row > td.ofr-main table { width: auto; }

	/* per-table trimming, keyed on the column roles ofr.js assigned */
	.ofr-t-threads .ofr-c-icon2 { display: none !important; }
	.ofr-t-forums  .ofr-c-moderator { display: none !important; }
	.ofr-t-members .ofr-c-avatar, .ofr-t-members .ofr-c-profilepic { display: none !important; }

	/* ---------- posts ---------------------------------------------- */
	table.ofr-post, table.ofr-post > thead, table.ofr-post > tbody,
	table.ofr-post > tfoot, table.ofr-post > * > tr {
		display: block; width: auto !important;
	}
	table.ofr-post > * > tr { overflow: hidden; }
	table.ofr-post > * > tr > td { display: block; width: auto !important; }
	table.ofr-post script { display: none !important; }
	/* date on the left, post number on the right, as on the desktop */
	table.ofr-post > * > tr > td.ofr-post-l { float: left; max-width: 68%; }
	table.ofr-post > * > tr > td.ofr-post-r { text-align: right !important; }
	/* author strip above the message */
	td.ofr-post-user {
		overflow: hidden; padding: 5px 6px !important;
		border-left-width: 0 !important; border-right-width: 0 !important;
	}
	td.ofr-post-user a img { float: left; max-width: 56px; height: auto; margin: 0 6px 3px 0; }
	td.ofr-post-user div.smallfont > div { display: inline-block; margin-right: 10px; vertical-align: top; }
	td.ofr-post-user br { display: none; }
	td.ofr-post-msg {
		padding: 6px !important;
		border-left-width: 0 !important; border-right-width: 0 !important;
	}
	/* controls must stay reachable */
	td.ofr-post-r img, td.ofr-post-r input { vertical-align: middle; }
	/* the post is stacked now, so the full width is available again */
	div[id^="post_message_"] img, .signature img, td[id^="td_post_"] img, .fieldset img {
		max-width: min(100%, calc(100vw - 24px));
	}
	div[id^="post_message_"] iframe, div[id^="post_message_"] embed,
	div[id^="post_message_"] object, div[id^="post_message_"] video { max-width: calc(100vw - 24px); }
	pre.alt2, div.alt2[dir="ltr"] { max-width: calc(100vw - 24px); }

	/* ---------- tool bars ------------------------------------------ */
	table.ofr-toolbar, table.ofr-toolbar > thead, table.ofr-toolbar > tbody,
	table.ofr-toolbar > tfoot, table.ofr-toolbar > * > tr {
		display: block; width: auto !important;
	}
	table.ofr-toolbar > * > tr > td {
		display: block; width: auto !important; margin-bottom: 1px;
		text-align: left !important; white-space: normal !important;
	}
	table.ofr-toolbar > * > tr > td.vbmenu_control a { display: block; padding: 8px 4px; }
	table.ofr-toolbar script { display: none !important; }

	/* ---------- navbar --------------------------------------------- */
	.ofr-menubtn {
		display: block; margin: 0; padding: 7px 10px; cursor: pointer;
		text-align: center; -webkit-user-select: none; user-select: none;
	}
	.ofr-menubtn i { display: block; height: 3px; margin: 3px auto; width: 22px; background: currentColor; }
	html.ofr-js .ofr-navbuttons { display: none; }
	html.ofr-js .ofr-navbuttons.ofr-open { display: block; }
	.ofr-navbuttons > table, .ofr-navbuttons > table > thead,
	.ofr-navbuttons > table > tbody, .ofr-navbuttons > table > tfoot,
	.ofr-navbuttons > table > * > tr { display: block; width: auto !important; }
	.ofr-navbuttons td.vbmenu_control {
		display: block; width: auto !important; text-align: left !important;
		white-space: normal !important; padding: 0 !important; margin-bottom: 1px;
	}
	.ofr-navbuttons td.vbmenu_control a { display: block; padding: 10px 12px; }

	.ofr-navtop, .ofr-navtop > thead, .ofr-navtop > tbody,
	.ofr-navtop > tfoot, .ofr-navtop > * > tr { display: block; width: auto !important; }
	.ofr-navtop > * > tr > td { display: block; width: auto !important; white-space: normal !important; }
	.ofr-navtop form table, .ofr-navtop form table > tbody,
	.ofr-navtop form table > tbody > tr, .ofr-navtop form table > tbody > tr > td {
		display: block; width: auto !important;
	}
	.ofr-navtop form input.bginput { width: 100%; }
	.ofr-navtop form input.button { width: 100%; margin-top: 3px; }

	/* ---------- logo / footer -------------------------------------- */
	.ofr-logo, .ofr-logo > tbody, .ofr-logo > tbody > tr, .ofr-logo > tbody > tr > td {
		display: block; width: auto !important; text-align: center !important;
	}
	.ofr-logo img { max-width: 100%; height: auto; }
	.ofr-foot > tbody > tr > td.tfoot { display: block; width: auto !important; text-align: center !important; }

	/* ---------- generic fallbacks ---------------------------------- */
	table.ofr-stack, table.ofr-stack > thead, table.ofr-stack > tbody,
	table.ofr-stack > tfoot, table.ofr-stack > * > tr { display: block; width: auto !important; }
	table.ofr-stack > * > tr > td {
		display: block; width: auto !important;
		text-align: left !important; white-space: normal !important;
	}

	/* the month grid stays a grid -- carding it would destroy its meaning */
	body[data-ofr="calendar"] .ofr-cal { font-size: 10px; }
	body[data-ofr="calendar"] .ofr-cal td { padding: 1px !important; height: auto !important; }
	body[data-ofr-blog="1"] .ofr-cal { font-size: 10px; }
	body[data-ofr-blog="1"] .ofr-cal td { padding: 1px !important; height: auto !important; }

	/* vB Blog headers and moderation controls often float beside their content.
	   On a narrow screen they become one clear vertical sequence. */
	body[data-ofr-blog="1"] #blogentries,
	body[data-ofr-blog="1"] #message_list,
	body[data-ofr-blog="1"] #trackbacklist,
	body[data-ofr-blog="1"] #userlist { min-width: 0; max-width: 100%; }
	body[data-ofr-blog="1"] .ofr-blog-entry,
	body[data-ofr-blog="1"] .ofr-blog-comment,
	body[data-ofr-blog="1"] .ofr-blog-trackback { clear: both; }
	body[data-ofr-blog="1"] #inlinemod_comment_controls,
	body[data-ofr-blog="1"] #inlinemod_trackback_controls {
		float: none !important; display: block !important; max-width: 100%;
	}
	body[data-ofr-blog="1"] #inlinemod_comment_controls td { display: block; width: auto !important; }
	body[data-ofr-blog="1"] #blograting_menu,
	body[data-ofr-blog="1"] #blogusermenu_menu { max-width: calc(100vw - 12px); }

	/* CMPS does not impose a fixed number or names of portal columns. The JS
	   marks only its outer module row, so collapsing that row below 600px keeps
	   each configured module, custom block and control in document order. */
	table.ofr-portal-columns,
	table.ofr-portal-columns > thead,
	table.ofr-portal-columns > tbody,
	table.ofr-portal-columns > tfoot,
	table.ofr-portal-columns > * > tr { display: block; width: auto !important; }
	table.ofr-portal-columns > * > tr > td.ofr-portal-column {
		display: block; width: auto !important; min-width: 0; padding-left: 0 !important;
		padding-right: 0 !important; vertical-align: top;
	}
	table.ofr-portal-columns > * > tr > td.ofr-portal-column + td.ofr-portal-column {
		padding-top: 8px !important;
	}
	body[data-ofr-vba="1"] table.ofr-portal-columns .tborder { width: 100% !important; }

	/* pagination: wrap onto a second line, never into a column of rows */
	div.pagenav { text-align: center; }
	table.ofr-pagenav, table.ofr-pagenav > thead, table.ofr-pagenav > tbody,
	table.ofr-pagenav > tfoot, table.ofr-pagenav > * > tr {
		display: block; width: auto !important;
	}
	table.ofr-pagenav > * > tr > td {
		display: inline-block; width: auto !important; margin: 0 1px 1px 0;
		padding: 0 !important; vertical-align: middle;
	}
	table.ofr-pagenav > * > tr > td a,
	table.ofr-pagenav > * > tr > td span { display: inline-block; padding: 6px 9px; }
}

/* =====================================================================
   SMALL PHONES   <= 380px
   ===================================================================== */
@media only screen and (max-width: 380px) {
	div.page > div { padding-left: 3px !important; padding-right: 3px !important; }
	table.ofr-table > * > tr.ofr-row { padding: 4px 5px; }
	tr.ofr-row > td.ofr-meta { margin-right: 9px; font-size: 10px; }
	td.ofr-post-user a img { max-width: 44px; }
	.bigusername { font-size: 12pt; }
}