/**
 * ProPortal Responsive Styles
 * Stacks side columns on tablets/phones; softens tables; Font Awesome helpers
 */

/* Base wrap */
.pp-layout {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	gap: 0;
	align-items: flex-start;
}
.pp-col {
	box-sizing: border-box;
	min-width: 0; /* prevent flex overflow */
}
.pp-col-left,
.pp-col-right {
	flex: 0 0 auto;
}
.pp-col-center {
	flex: 1 1 0;
	min-width: 0;
}
.pp-block-wrap {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 12px;
}
.pp-footer-credit {
	text-align: center;
	width: 100%;
	margin-top: 12px;
}

/* Legacy table layout (existing installs) */
table.pp-portal-layout {
	width: 100% !important;
	max-width: 100%;
	table-layout: fixed;
}
table.pp-portal-layout td {
	box-sizing: border-box;
	vertical-align: top;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Make inner block tables fluid */
.pp-portal-layout .tborder,
.pp-col .tborder,
.pp-block-wrap .tborder {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}
.pp-portal-layout img,
.pp-col img,
.pp-block-wrap img {
	max-width: 100%;
	height: auto;
}

/* Ticker full width */
.pp-newsticker-outer,
.ticker-container {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

/* Font Awesome helpers inside blocks */
.pp-fa {
	margin-right: 6px;
}
.pp-fa-collapse {
	cursor: pointer;
	float: right;
	opacity: 0.85;
}
.pp-fa-collapse:hover {
	opacity: 1;
}

/* ========== Tablet ========== */
@media (max-width: 992px) {
	.pp-layout {
		gap: 10px 0;
	}
	.pp-col-left,
	.pp-col-right {
		flex: 0 0 180px;
		max-width: 180px;
	}
}

/* ========== Mobile: stack columns ========== */
@media (max-width: 768px) {
	/* Flex layout */
	.pp-layout {
		flex-direction: column;
	}
	.pp-col-left,
	.pp-col-center,
	.pp-col-right {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Order: center first (main content), then sidebars */
	.pp-col-center { order: 1; }
	.pp-col-left   { order: 2; }
	.pp-col-right  { order: 3; }

	/* Legacy table layout → stacked */
	table.pp-portal-layout,
	table.pp-portal-layout > tbody,
	table.pp-portal-layout > tbody > tr {
		display: block !important;
		width: 100% !important;
	}
	table.pp-portal-layout > tbody > tr > td {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box;
	}

	/* Announcement / block tables */
	.tborder {
		width: 100% !important;
	}
	.tborder td {
		word-break: break-word;
	}

	/* Ticker caption full width on small screens already handled by ticker.css */
	.ticker-container {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* ========== Small phones ========== */
@media (max-width: 480px) {
	.pp-block-wrap {
		margin-bottom: 10px;
	}
	.thead {
		font-size: 0.95em;
	}
	.smalltext {
		font-size: 0.85em;
	}
}
/* Mobile fix: remove MyBB's fixed minimum width */
@media (max-width: 768px) {
    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden;
    }

    #container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
}
/* Testforum: ProPortal-Boxen gestalten */
.pp-layout .thead {
    background-image: none !important;
    background-color: #245b7a !important;
    color: #ffffff !important;
    border: 1px solid #1b465e;
    padding: 8px 10px;
    font-weight: bold;
}

.pp-layout .tborder {
    border-radius: 6px;
    overflow: hidden;
}

.pp-block-wrap {
    margin-bottom: 14px;
}
/* Testforum: einheitliche Innenabstände */
.pp-block-wrap .tborder {
    border-spacing: 0;
}

.pp-block-wrap .tborder td {
    padding: 8px;
}

.pp-block-wrap .tborder .thead {
    padding: 8px 10px;
}