/* Portlets Tabs -> Buttons (wrapping) */
/* This stylesheet keeps the original colours and HTML markup intact, but
   visually renders the tab links as wrap-friendly buttons that sit separate
   from the portlets grid. The original styles remain in styles/v4/portlets.css. */

:root {
	--color-red-bg: #ffebee;    /* pale red */
	--color-yellow-bg: #fff9e6; /* pale yellow */
	--color-green-bg: #e8f5e9;  /* pale green */
	--color-blue-bg: #e7f0f7;   /* pale blue */
	--color-purple-bg: #f3e8ff; /* pale purple */
	--color-gold-bg: rgb(238, 229, 199);   /* pale gold */
	--color-aqua-bg: #e0f7f7;   /* pale aqua */
	--dark-primary: #180724;
	--dark-blue: #0b5fb6;
	--dark-red: #b00020;
	--dark-yellow: #b88600;
	--dark-green: #0b6b4f;
	--dark-purple: #6b21a8;
	--dark-gold: #8a6d1d;
	--dark-aqua: #008b8b;
}

/* Container spacing so buttons do not appear stuck to the portlets section */
#portlet-tabs {
	box-sizing: border-box;
	font-size: 0.9rem;
	font-weight: 600;
	margin-inline: auto;
	max-width: 1000px;
	margin-top: 2rem;
	padding: 0 1rem;
	/* add breathing room below to separate from portlets */
	margin-bottom: 1rem;
}

#portlet-tabs ul {
	/* Make tabs wrap as needed */
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.5rem; /* row gap, column gap */
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

#portlet-tabs li { margin: 0; padding: 0; }

/* Button-like links */
#portlet-tabs a {
	display: inline-block;
	text-decoration: none;
	padding: 0.55rem 0.9rem;
	border-radius: 999px; /* pill */
	border: 1px solid #dadada;
	background: #fff;
	color: #111;
	line-height: 1;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

#portlet-tabs a:hover {
	background: #f4f4f4;
	border-color: #cfcfcf;
}

#portlet-tabs a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(26,115,232,0.25);
}

/* Active states per colour — keep existing colour mapping via class names */
#portlet-tabs a.active { border-color: transparent; }

#portlet-tabs a.white.active {
	background-color: #f2f2f2;
	color: #111;
}
#portlet-tabs a.blue.active {
	background-color: var(--color-blue-bg);
	color: var(--dark-blue);
	border-color: rgba(11,95,182,0.15);
}
#portlet-tabs a.red.active {
	background-color: var(--color-red-bg);
	color: var(--dark-red);
	border-color: rgba(176,0,32,0.12);
}
#portlet-tabs a.yellow.active {
	background-color: var(--color-yellow-bg);
	color: var(--dark-yellow);
	border-color: rgba(184,134,0,0.20);
}
#portlet-tabs a.green.active {
	background-color: var(--color-green-bg);
	color: var(--dark-green);
	border-color: rgba(11,107,79,0.18);
}
#portlet-tabs a.purple.active {
	background-color: var(--color-purple-bg);
	color: var(--dark-purple);
	border-color: rgba(107,33,168,0.18);
}
#portlet-tabs a.gold.active {
	background-color: var(--color-gold-bg);
	color: var(--dark-gold);
	border-color: rgba(138,109,29,0.18);
}
#portlet-tabs a.aqua.active {
	background-color: var(--color-aqua-bg);
	color: var(--dark-aqua);
	border-color: rgba(0,139,139,0.18);
}

/* Make sure the portlets section doesn't clash tightly with the buttons */
#portlets { margin-top: 0.25rem; }

/* Optional: allow horizontal scrolling on extremely small screens if there are too many buttons
   (they still wrap first, this is just a safety net) */
@media (max-width: 380px) {
	#portlet-tabs ul {
		gap: 0.5rem 0.4rem;
	}
	#portlet-tabs a {
		padding: 0.5rem 0.75rem;
		font-size: 0.95em;
	}
}