/*
 * Portal layout deliberately relies on the active phpBB style for its base
 * typography, links, page background and navigation.  These rules only add
 * structure to portal-specific widgets, so the extension remains usable with
 * any compatible phpBB 3.3 style.
 */
.itportal-page {
	max-width: 1160px;
	margin: 12px auto 28px;
	color: inherit;
}
.itportal-local-qr { width: 256px; height: 256px; margin: 12px 0; background: #fff; }

.itportal-page *,
.itportal-page *::before,
.itportal-page *::after { box-sizing: border-box; }

.itportal-category-header { margin: 0 0 18px; padding: 16px 18px; border-left: 3px solid #159b91; background: rgba(21, 155, 145, .05); }
.itportal-category-header h1 { margin: 0; font-size: 1.5em; }
.itportal-category-header p { margin: 7px 0 0; }

.itportal-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 285px);
	gap: 24px;
}

.itportal-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 18px; }
.itportal-tools-grid .itportal-tools-card { margin: 0; }
.itportal-tools-card h2 .icon { margin-right: 8px; color: #159b91; }

.itportal-feed,
.itportal-sidebar { min-width: 0; }

.itportal-news-grid { display: grid; gap: 12px; }
/* Cards already sit in a grid. Their generic bottom margin would otherwise
   be added to the grid gap and make the publication feed unnecessarily tall. */
.itportal-news-grid .itportal-news-card { margin-bottom: 0; }

.itportal-news-card,
.itportal-custom-widget,
.itportal-tools-card,
.itportal-empty {
	margin: 0 0 18px;
	padding: 20px;
	border: 1px solid rgba(127, 127, 127, .28);
	border-radius: 6px;
	background: transparent;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.itportal-news-card h3,
.itportal-custom-widget h2,
.itportal-tools-card h2 {
	margin: 0 0 10px;
	font-size: 1.18em;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.3;
}

.itportal-news-card h3 a,
.itportal-widget-list a,
.itportal-tool-link { font-weight: 700; }

.itportal-widget-title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #0c3e67;
	font-size: 1.15em !important;
	font-weight: 800 !important;
	letter-spacing: .01em !important;
}
.itportal-widget-title > .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	border-radius: 6px;
	background: rgba(21, 155, 145, .12);
	color: #087d74;
	font-size: .82em;
}

.itportal-news-card__category { display: inline-block; margin-bottom: 5px; color: #087d74; font-size: .82em; font-weight: 700; text-decoration: none; text-transform: uppercase; }

.itportal-news-card--with-cover { display: flex; gap: 18px; }
.itportal-news-card__cover { display: block; flex: 0 0 180px; align-self: flex-start; overflow: hidden; border-radius: 4px; }
.itportal-news-card__cover img { display: block; width: 180px; height: 132px; object-fit: cover; }
.itportal-news-card__cover--fallback { position: relative; background: #071d35; }
.itportal-news-card__cover--fallback img { opacity: .22; }
.itportal-news-card__cover--fallback::after { position: absolute; inset: 15%; display: block; background: url("images/lammeronline-logo.png") center / contain no-repeat; content: ""; pointer-events: none; }
.itportal-news-card__body { flex: 1 1 auto; min-width: 0; }

.itportal-news-card__preview,
.itportal-custom-widget__content,
.itportal-tools-card p {
	line-height: 1.6;
}

.itportal-news-card__preview {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.itportal-news-card footer {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(127, 127, 127, .22);
	font-size: .9em;
}

.itportal-news-card__meta {
	display: flex;
	gap: 8px;
	min-width: 0;
}

.itportal-news-card__author,
.itportal-news-card__time { display: inline-flex; align-items: center; gap: 5px; }
.itportal-news-card__author { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itportal-news-card__meta .icon { color: #159b91; }
.itportal-news-card__stats { flex: 0 0 auto; white-space: nowrap; }
.itportal-news-card__stats .icon { margin-left: 7px; }

/* Widgets in the sidebar remain in the normal document flow.  A sticky tools
   card can overlap the following widgets when the feed is shorter. */
.itportal-tools-card { position: static; }
.itportal-tools-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: rgba(127, 127, 127, .12);
}

.itportal-section-heading__overline {
	display: block;
	margin-bottom: 6px;
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.itportal-tools-card p { margin: 8px 0 14px; }
.itportal-tool-link { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(127, 127, 127, .22); }
.itportal-tool-link .icon:first-child { margin-right: 8px; }
.itportal-tools-widget .itportal-widget-title .icon { color: #159b91; }
.itportal-tools-widget p { margin: 7px 0 10px; }
.itportal-tools-widget .itportal-tool-link {
	padding: 5px 0;
	border-top: 0;
	font-weight: 600;
}

/* HTML widgets use the same visual heading and compact link rhythm as the
 * built-in portal cards. */
.itportal-custom-widget--welcome .itportal-widget-title > .icon { color: #e06f7a; }
.itportal-custom-widget--quick_links .itportal-widget-title > .icon { color: #278cb7; }
.itportal-custom-widget--quick_links ul { margin: 0; padding: 0; list-style: none; }
.itportal-custom-widget--quick_links li + li { margin-top: 5px; }
.itportal-custom-widget--quick_links li::before { content: '\f0c1'; display: inline-block; width: 17px; font-family: FontAwesome; color: #149d92; }
.itportal-custom-widget--quick_links a { font-weight: 700; }
.itportal-tools-widget .itportal-tool-link:hover { text-decoration: none; color: #067c91; }
.itportal-data-size-result { min-height: 1.5em; margin: 14px 0 0; font-weight: 700; font-size: 1.15em; }
.itportal-mikrotik-generator .inner > h2 > .icon { margin-right: 7px; color: #159b91; }
.itportal-mikrotik-generator fieldset { border: 0; margin: 0; padding: 0; }
.itportal-mikrotik-generator dl dd label { display: inline-flex; align-items: center; margin: 0 14px 6px 0; gap: 5px; }
.itportal-field-note { display: block; margin-top: 4px; color: #6c7786; font-size: .9em; }
.itportal-mikrotik-generator h3 { margin: 24px 0 10px; font-size: 1.1em; }
.itportal-mikrotik-rule { position: relative; margin: 0 0 10px !important; padding: 12px 38px 12px 12px !important; border: 1px solid rgba(127, 127, 127, .28) !important; border-radius: 5px; }
.itportal-mikrotik-rule legend { padding: 0 5px; font-weight: 700; }
.itportal-mikrotik-rule-grid { display: grid; grid-template-columns: repeat(5, minmax(115px, 1fr)); gap: 10px; }
.itportal-mikrotik-rule-grid label { display: grid; gap: 4px; font-size: .9em; font-weight: 700; }
.itportal-mikrotik-rule-grid input, .itportal-mikrotik-rule-grid select { width: 100%; min-width: 0; }
.itportal-mikrotik-remove { position: absolute; top: 9px; right: 8px; min-width: 28px; padding: 3px 6px; }
.itportal-output-label { display: block; margin: 20px 0 6px; font-weight: 700; }
#mt-output { width: 100%; min-height: 260px; font-family: Consolas, Monaco, monospace; font-size: .9em; line-height: 1.45; resize: vertical; }
.itportal-generator-message { min-height: 1.4em; margin: 8px 0 0; white-space: pre-line; color: #087d74; font-weight: 700; }

.itportal-widget-list { margin: 0; padding: 0; list-style: none; }
.itportal-widget-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(127, 127, 127, .18); }
.itportal-widget-list li:first-child { padding-top: 0; border-top: 0; }
.itportal-widget-list small { flex: 0 0 auto; font-size: .85em; text-align: right; }
.itportal-top-topics li { padding: 7px 0; border-top: 0; }
.itportal-top-topics li:first-child { padding-top: 0; }
.itportal-top-topics > li > .icon { flex: 0 0 auto; margin-top: 2px; color: #159b91; font-size: .82em; }
.itportal-top-topics > li > a { flex: 1 1 auto; min-width: 0; }
.itportal-top-topics small { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.itportal-top-topics small span { display: inline-flex; align-items: center; gap: 3px; }
.itportal-top-topics small .icon { color: #159b91; font-size: .95em; }

.itportal-statistics__list { display: grid; gap: 7px; }
.itportal-statistics__item { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 7px; }
.itportal-statistics__item > .icon { color: #159b91; text-align: center; }
.itportal-statistics__label { font-size: .9em; }
.itportal-statistics__item strong { color: inherit; font-size: 1.1em; }
.itportal-top-authors li > span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.itportal-top-authors .icon { color: #159b91; }
.itportal-empty { border-style: dashed; text-align: center; }
.itportal-empty .icon { display: block; margin-bottom: 8px; font-size: 1.8em; }
.itportal-empty p { margin: 0; }
.itportal-pagination { margin: 6px 0 18px; }

@media (max-width: 800px) {
	.itportal-layout { display: block; }
	.itportal-sidebar { margin-top: 18px; }
	.itportal-mikrotik-rule-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}

@media (max-width: 500px) {
	.itportal-page { margin-top: 6px; }
	.itportal-news-card,
	.itportal-custom-widget,
	.itportal-tools-card,
	.itportal-empty { padding: 15px; }
	.itportal-news-card footer { display: block; }
	.itportal-news-card__stats { display: block; margin-top: 6px; }
	.itportal-news-card--with-cover { display: block; }
	.itportal-news-card__cover { margin: 0 0 13px; }
	.itportal-news-card__cover img { width: 100%; height: 180px; }
	.itportal-mikrotik-rule-grid { grid-template-columns: 1fr; }
}

.itportal-status-ok { color: #07856f; }
.itportal-status-error { color: #b63131; }