/**
 * 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;
	}
}
/* =========================================
   GSF PORTAL – BRAUNES DESIGN
   Wirkt ausschließlich auf portal.php
   ========================================= */

/* Portal-Boxen: Rahmen und Grundfläche */
.proportal-page .pp-block-wrap > table.tborder {
    border: 1px solid #d8c3a0 !important;
    border-radius: 9px !important;
    border-spacing: 0 !important;
    overflow: hidden;
    background: #f7eedc !important;
    box-shadow: 0 2px 5px rgba(74, 46, 29, 0.10);
}

/* Box-Überschriften: dunkles Braun */
.proportal-page .pp-block-wrap .thead {
    background: linear-gradient(
        to bottom,
        #68472e 0%,
        #3e281a 100%
    ) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 12px !important;
    font-weight: bold;
}

/* Überschriftentext und Icons */
.proportal-page .pp-block-wrap .thead,
.proportal-page .pp-block-wrap .thead strong,
.proportal-page .pp-block-wrap .thead i {
    color: #ffffff !important;
}

/* Inhaltsflächen: warmes Creme */
.proportal-page .pp-block-wrap .trow1 {
    background-color: #f7eedc !important;
    color: #30251c;
    border-color: #eadbc2 !important;
}

/* Innenabstand der Box-Inhalte */
.proportal-page .pp-block-wrap > table.tborder
> tbody > tr > td.trow1 {
    padding: 10px 12px !important;
}

/* Abstände zwischen den Portal-Boxen */
.proportal-page .pp-block-wrap {
    margin-bottom: 12px;
}

/* Portal-Links: warmes Dunkelblau wie im Entwurf */
.proportal-page .pp-block-wrap .trow1 a {
    text-decoration: none;
}

.proportal-page .pp-block-wrap .trow1 a:hover {
    text-decoration: underline;
}

/* Portal: warme Inhaltsflächen und dezente Trennlinien */
.proportal-page .pp-block-wrap .trow1,
.proportal-page .pp-block-wrap .trow2 {
    background-color: #f7eedc !important;
    color: #30251c;
}

.proportal-page .pp-block-wrap .tborder td {
    border-color: #eadbc2 !important;
}

.proportal-page .pp-block-wrap .trow1 a,
.proportal-page .pp-block-wrap .trow2 a {
    color: #24578a;
}

/* Portal-Boxen etwas weicher abrunden */
.proportal-page .pp-block-wrap > table.tborder {
    border-radius: 9px !important;
    overflow: hidden;
}

/* GSF Portal: warme Cremefarben für Tabelleninhalte */

/* Portal-Tabellenzeilen */
.proportal-page .pp-block-wrap .tborder .trow1,
.proportal-page .pp-block-wrap .tborder .trow2,
.proportal-page .pp-block-wrap .tborder tr:nth-child(even),
.proportal-page .pp-block-wrap .tborder tr:nth-child(odd) {
    background-color: #f7eedc !important;
}

/* Auch einzelne Tabellenzellen der Themenlisten */
.proportal-page .pp-block-wrap .tborder td {
    background-color: #f7eedc;
    border-color: #eadbc2 !important;
}

/* Tabellenköpfe der Themenlisten bleiben dunkel */
.proportal-page .pp-block-wrap .tborder .thead,
.proportal-page .pp-block-wrap .tborder th {
    background: linear-gradient(to bottom, #68472e, #3e281a) !important;
    color: #fff !important;
}

/* Feine Trennlinien zwischen Einträgen */
.proportal-page .pp-block-wrap .tborder tr + tr td {
    border-top-color: #eadbc2 !important;
}

/* Nur ProPortal: MyBB-Standardfarben gezielt überschreiben */
body.proportal-page .pp-block-wrap table.tborder td.trow1,
body.proportal-page .pp-block-wrap table.tborder td.trow2,
body.proportal-page .pp-block-wrap table.tborder td {
    background: #f7eedc !important;
    background-color: #f7eedc !important;
    border-color: #eadbc2 !important;
}

/* Überschriften der Portal-Boxen dunkelbraun halten */
body.proportal-page .pp-block-wrap table.tborder td.thead {
    background: linear-gradient(to bottom, #68472e, #3e281a) !important;
    color: #ffffff !important;
}

/* Nur Portal: Tabellenköpfe in den Inhaltsblöcken */
body.proportal-page .pp-col-center .tborder .tcat {
    background: #68472e !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #d8c3a0 !important;
}

/* Nur Portal: Tabellenzeilen der Themenlisten */
body.proportal-page .pp-col-center .tborder .trow1,
body.proportal-page .pp-col-center .tborder .trow2 {
    background: #f7eedc !important;
    background-image: none !important;
    color: #30251c !important;
    border-color: #eadbc2 !important;
}

/* GSF Portal: linke und rechte Boxen angleichen */
body.proportal-page .pp-col-left .pp-block-wrap .trow1,
body.proportal-page .pp-col-left .pp-block-wrap .trow2,
body.proportal-page .pp-col-right .pp-block-wrap .trow1,
body.proportal-page .pp-col-right .pp-block-wrap .trow2 {
    background-color: #f7eedc !important;
    border-color: #eadbc2 !important;
}

/* Dezente Rahmen für die seitlichen Portal-Boxen */
body.proportal-page .pp-col-left .pp-block-wrap > table.tborder,
body.proportal-page .pp-col-right .pp-block-wrap > table.tborder {
    border-color: #d8c3a0 !important;
    border-radius: 9px !important;
    overflow: hidden;
}