/*
 * WSU brand tokens and standard component classes -- fallback copy until the CSS
 * tokens/classes are migrated onto the WSU.AspNetCore.Branding package's own
 * css/wsu-brand.css (the package is already referenced -- see the
 * WSU.Orientation.AspNetCore.csproj comment -- and its favicon is already wired up
 * in Views/Shared/_Layout.cshtml). Source of truth: planning/wsu-app-conventions.md
 * §15 in the WSU.AspNetCore.Foundation repo.
 */

:root {
	--wsu-purple: #4F2D7F;
	--wsu-purple-dark: #3a2060;
	--wsu-purple-deep: #2c1854;
	--wsu-gold: #FFC72C;
	--wsu-grey-light: #f5f3f8;
}

body {
	font-family: 'Segoe UI', Roboto, Arial, sans-serif;
	/* Sticky-footer: body fills the viewport; main grows to consume remaining height. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex: 1 0 auto;
}

.navbar-wsu-global {
	background-color: var(--wsu-purple-deep);
}

.navbar-wsu-site {
	background-color: var(--wsu-purple);
}

.navbar-wsu-site .nav-link:hover,
.navbar-wsu-site .nav-link:focus {
	background-color: var(--wsu-purple-dark);
}

.btn-wsu {
	background-color: var(--wsu-purple);
	border-color: var(--wsu-purple);
	color: #fff;
}

.btn-wsu:hover,
.btn-wsu:focus {
	background-color: var(--wsu-purple-dark);
	border-color: var(--wsu-purple-dark);
	color: #fff;
}

.btn-outline-wsu {
	background-color: transparent;
	border-color: var(--wsu-purple);
	color: var(--wsu-purple);
}

.btn-outline-wsu:hover,
.btn-outline-wsu:focus {
	background-color: var(--wsu-purple);
	border-color: var(--wsu-purple);
	color: #fff;
}

.card-header-wsu {
	background-color: var(--wsu-purple);
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
}

.wsu-badge {
	display: inline-block;
	background-color: var(--wsu-purple);
	color: #fff;
	border-radius: 0.25rem;
	padding: 0.25em 0.55em;
	font-size: 0.8rem;
	font-weight: 600;
}

.wsu-badge.badge-sm {
	font-size: 0.7rem;
	padding: 0.15em 0.4em;
}

/*
 * Purple WSU branding for Bootstrap accordions (e.g. the schedule-day accordion in
 * Views/Shared/_Schedule.cshtml). The default Bootstrap 5 accordion-button is white-on-white
 * with a near-invisible border, which reads as very low contrast against the rest of a plain
 * page -- see planning/accessibility-audit.md's brand-color-contrast item. Overriding
 * Bootstrap's own --bs-accordion-* custom properties keeps every other accordion behavior
 * (chevron rotation, transitions, collapse animation) intact; only the colors change.
 * White-on-purple/purple-dark measures ~10.4:1 / ~13.5:1 contrast, well above WCAG AA's 4.5:1.
 */
.accordion-wsu {
	--bs-accordion-btn-color: #fff;
	--bs-accordion-btn-bg: var(--wsu-purple);
	--bs-accordion-active-color: #fff;
	--bs-accordion-active-bg: var(--wsu-purple-dark);
	--bs-accordion-border-color: var(--wsu-purple-dark);
	--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(79, 45, 127, .35);
}

.accordion-wsu .accordion-button::after {
	/* Bootstrap bakes the chevron in as a fixed dark/blue SVG data-URI
	   (--bs-accordion-btn-icon/--bs-accordion-btn-active-icon) -- inverting the rendered icon to
	   white is simpler and more version-resistant than reconstructing that data-URI. Same trick
	   already used for .modal-header .btn-close below. */
	filter: invert(1) grayscale(100%) brightness(200%);
}

/*
 * Adds a visible gap between each day's accordion item instead of Bootstrap's default flush
 * (touching, shared-border) stacking. Since each item now stands alone with its own border and
 * margin, it also needs full corner rounding on all four sides -- Bootstrap's own CSS only
 * rounds the first item's top corners and the last item's bottom corners (correct for a flush
 * list, not for a gapped one), so those rules are extended to every item here.
 */
.accordion-wsu .accordion-item {
	margin-bottom: 0.5rem;
	border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
	border-radius: var(--bs-accordion-border-radius);
}

.accordion-wsu .accordion-item:last-of-type {
	margin-bottom: 0;
}

.accordion-wsu .accordion-button {
	border-radius: calc(var(--bs-accordion-border-radius) - var(--bs-accordion-border-width)) calc(var(--bs-accordion-border-radius) - var(--bs-accordion-border-width)) 0 0;
}

.accordion-wsu .accordion-button.collapsed {
	border-radius: calc(var(--bs-accordion-border-radius) - var(--bs-accordion-border-width));
}

.accordion-wsu .accordion-collapse {
	border-bottom-right-radius: var(--bs-accordion-border-radius);
	border-bottom-left-radius: var(--bs-accordion-border-radius);
}

/*
 * CSS classes replacing one-off inline `style="..."` attributes, which the strict
 * `style-src 'self'` CSP (Program.cs/UseWSUSecurityHeaders) blocks with no nonce/hash support.
 */
.list-group-narrow {
	max-width: 24rem;
}

/*
 * Shared page-header row for "list" pages (Locations/Events/HotTopics/Sections index, etc.):
 * title on the left, primary action (e.g. "Add X") on the right, wrapping to stacked on narrow
 * viewports instead of the title and button ever overlapping/crowding each other.
 */
.page-header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.page-header-row h1 {
	margin-bottom: 0;
}

/*
 * Icon-link card grid for "hub" pages that are just a menu of links to sub-pages
 * (Admin/Index.cshtml, Reports/Index.cshtml) -- replaces a plain `.list-group` column with a
 * responsive grid of bigger, easier-to-scan targets. Each card is a single <a>, not a `<div>`
 * wrapping a smaller link plus a separate stretched-link overlay, so it's one link with one
 * visible focus ring for keyboard/screen-reader users, not two overlapping targets.
 */
.link-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1rem;
}

.link-card {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem 1.15rem;
	background-color: #fff;
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: 0.5rem;
	color: inherit;
	text-decoration: none;
	transition: box-shadow .15s ease-in-out, border-color .15s ease-in-out, transform .15s ease-in-out;
}

.link-card:hover {
	color: inherit;
	border-color: var(--wsu-purple);
	box-shadow: 0 .35rem .75rem rgba(79, 45, 127, .15);
	transform: translateY(-1px);
}

/* Bootstrap resets the default browser focus outline app-wide via its own focus-visible
   handling on `.btn`/form controls, but plain `<a>` elements still get the browser default
   (typically a thin, low-contrast blue) -- replace it with the brand purple at 3px so keyboard
   focus is unmistakable (WCAG 2.4.7), same treatment as the buttons elsewhere in the app.
   Uses purple rather than gold (#FFC72C, ~1.4:1 against white) since gold fails WCAG 1.4.11's
   3:1 non-text contrast minimum for a focus indicator on this card's light background. */
.link-card:focus-visible {
	outline: 3px solid var(--wsu-purple);
	outline-offset: 2px;
}

.link-card-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.5rem;
	background-color: var(--wsu-grey-light);
	color: var(--wsu-purple);
	font-size: 1.35rem;
}

.link-card-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.link-card-title {
	font-weight: 600;
	color: var(--wsu-purple-dark);
}

.link-card-desc {
	font-size: 0.85rem;
	color: var(--bs-secondary-color, #6c757d);
}

/*
 * Breadcrumb trail (Views/Shared/_Breadcrumbs.cshtml), shown above the <h1> on pages that are
 * functionally nested under a hub page (Admin/Reports/My Sections). Bootstrap's default
 * breadcrumb-item link color is `--bs-link-color` (Bootstrap blue) which clashes with the
 * WSU-purple palette used everywhere else; re-themed to match, with underline-on-hover/focus
 * only (not by default) so the trail reads as a compact, low-emphasis wayfinding aid rather than
 * competing with the page's primary content/actions.
 */
.wsu-breadcrumb-nav {
	margin-bottom: 0.75rem;
}

.wsu-breadcrumb-nav .breadcrumb {
	margin-bottom: 0;
	font-size: 0.9rem;
}

.wsu-breadcrumb-nav .breadcrumb-item a {
	color: var(--wsu-purple-dark);
	text-decoration: none;
}

.wsu-breadcrumb-nav .breadcrumb-item a:hover,
.wsu-breadcrumb-nav .breadcrumb-item a:focus-visible {
	text-decoration: underline;
}

.wsu-breadcrumb-nav .breadcrumb-item.active {
	color: var(--bs-secondary-color, #6c757d);
}

/*
 * Re-themed dropdown group headers (e.g. "Content"/"Tools"/"Diagnostics" in the Admin nav
 * dropdown, "Term" in the user menu dropdown). Bootstrap's default `.dropdown-header` is small
 * and muted (`--bs-dropdown-header-color: #6c757d` at 0.875rem), which reads as de-emphasized
 * text rather than a group label -- bumped to bold, uppercase, letter-spaced, and colored with
 * the WSU purple so each group heading has enough visual weight/contrast to stand apart from the
 * menu items it groups.
 */
.dropdown-header {
	padding-top: 0.5rem;
	padding-bottom: 0.35rem;
	color: var(--wsu-purple);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/*
 * Purple-branded table header for the Locations/Events/HotTopics/Sections admin list tables --
 * makes the column headers stand out from the striped body rows instead of blending into
 * Bootstrap's default light-grey `<thead>`, and ties the tables into the same purple used by the
 * nav/modal header/accordion. White-on-purple measures ~10.4:1 contrast (WCAG AA requires 4.5:1).
 */
.table-wsu > thead {
	background-color: var(--wsu-purple);
}

.table-wsu > thead > tr > th {
	color: #fff;
	border-color: var(--wsu-purple-dark);
	font-weight: 600;
	vertical-align: middle;
}

/*
 * Chart.js (Views/Dashboard/Index.cshtml, wwwroot/js/dashboard.js) needs a sized parent element
 * to fill when `maintainAspectRatio: false` is set -- without a fixed height the canvas has no
 * intrinsic size to resize against and renders collapsed to 0px tall.
 */
.dashboard-chart-canvas-wrapper {
	position: relative;
	height: 220px;
}

.select-auto-width {
	width: auto;
}

/*
 * Schedule table (Views/Shared/_Schedule.cshtml) column sizing. Plain `max-width` on a single
 * `<td>` doesn't reliably control column width under the browser's default auto table layout --
 * the layout algorithm balances *all* rows/columns together, so a narrow-looking Description
 * column (as in the reported rendering bug) can still end up far narrower than its max-width,
 * producing tall, awkwardly-wrapped cells while other columns sit mostly empty. `table-layout:
 * fixed` with explicit percentage widths (taken from the first row's <th> cells) makes column
 * widths predictable regardless of content. `min-width` + the .table-responsive wrapper in the
 * view keeps the table horizontally scrollable instead of squishing unreadably on mobile.
 */
.schedule-table {
	table-layout: fixed;
	width: 100%;
	min-width: 45rem;
}

.schedule-col-time {
	white-space: nowrap;
	width: 11rem;
}

.schedule-col-location {
	width: 14%;
}

.schedule-col-event {
	width: 20%;
}

.schedule-col-section {
	width: 8%;
}

.schedule-col-description {
	width: auto;
	white-space: normal;
	word-break: break-word;
}

/* `.table-sm` tightens cell padding to 0.25rem on all sides -- bump the horizontal padding back
   up so adjacent columns have some breathing room between them, without affecting row height. */
.schedule-table > :not(caption) > * > * {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

/*
 * Below 1000px, the fixed-layout table's columns no longer have enough room to lay out legibly
 * (Time/Location/Event/Section/Description all fighting for a shrinking budget) -- CSS table
 * layout has no algorithm that reflows a row into a stacked list, so instead each <tr> is
 * switched to a card-like block and each <td> is switched to its own labeled line (label
 * supplied by the `data-label` attribute set in the view), matching the legacy app's mobile
 * rendering. The <thead> is visually hidden (not `display: none`) rather than removed so its
 * column-header text stays in the accessibility tree for screen readers, since the visual
 * table/row/cell semantics no longer apply once `display: block` is set below. Scoped to
 * `screen` only -- a printed page is often narrower than 1000px too, but print should always
 * get the clean tabular layout below, never the stacked-card one.
 */
@media screen and (max-width: 1000px) {
	.schedule-table {
		min-width: 0;
	}

	.schedule-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.schedule-table,
	.schedule-table tbody,
	.schedule-table tr,
	.schedule-table td {
		display: block;
	}

	.schedule-table td {
		width: 100%;
	}

	.schedule-table tr {
		margin-bottom: 0.75rem;
		border: var(--bs-border-width) solid var(--bs-border-color);
		border-radius: 0.375rem;
	}

	.schedule-table tr:last-child {
		margin-bottom: 0;
	}

	.schedule-table td {
		position: relative;
		padding-left: 40%;
		border: 0;
		border-bottom: var(--bs-border-width) solid var(--bs-border-color);
	}

	.schedule-table td:last-child {
		border-bottom: 0;
	}

	.schedule-table td::before {
		content: attr(data-label) ": ";
		position: absolute;
		left: 0.5rem;
		width: 35%;
		font-weight: 600;
		white-space: normal;
	}
}

/*
 * Purple WSU branding for the shared htmx CRUD modal (Views/Shared/_Modal.cshtml) --
 * every swapped-in _Form-style partial's .modal-header/.btn-close picks this up
 * automatically without needing per-partial changes.
 */
.modal-header {
	background-color: var(--wsu-purple);
	color: #fff;
}

.modal-header .btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
}

/*
 * Shrinks the browser's default printed page margin (commonly ~1in/side) so the Schedule table
 * gets more usable width -- deliberately a bare `@page` rule rather than nested in `@media
 * print`, since `@page` is itself only ever in effect during pagination/print.
 */
@page {
	margin: 0.5in;
}

/*
 * Clean print layout for the Schedule page (Views/Shared/_Schedule.cshtml). Goals: no wasted
 * ink on the dark purple site header/accordion headers, every day expanded and visible
 * (regardless of on-screen collapsed state), and a plain table instead of interactive
 * accordion/button chrome. `.d-print-none` (Bootstrap utility) already hides the Show
 * All/Hide All buttons and the "not enrolled" alert box in print.
 */
@media print {
	/* Bootstrap's `.container` (used by <main> in _Layout.cshtml) caps its width at a fixed
	   breakpoint (e.g. 960px/1140px) based on viewport width -- during print that still applies
	   and evaluates against a narrower printable page, leaving large empty margins on both sides
	   of the centered container instead of using the full page width. */
	.container {
		max-width: none;
		width: 100%;
		/* Bootstrap's own container gutter (0.75rem/side); dropping it reclaims a bit more width
		   for the table alongside the @page margin reduction below. */
		padding-left: 0;
		padding-right: 0;
	}

	/* The global purple nav bars add ink/visual noise and aren't useful on a printed page. */
	header {
		display: none;
	}

	/* Force every day's panel open on paper -- `.collapse:not(.show)` is `display: none` by
	   default, which would otherwise silently drop any day the user hadn't expanded on screen. */
	.accordion-wsu .accordion-collapse {
		display: block !important;
		height: auto !important;
	}

	/* Flatten each day's purple accordion button down to a plain black heading -- no background,
	   no border, no focus ring, no chevron icon (the icon is purely a screen affordance and is
	   meaningless once every panel is force-expanded above). */
	.accordion-wsu .accordion-button {
		display: block;
		background: none !important;
		color: #000 !important;
		box-shadow: none;
		border: 0;
		padding: 0.5rem 0;
		font-weight: 700;
	}

	.accordion-wsu .accordion-button::after {
		display: none;
	}

	/* Replace the gapped/bordered/rounded on-screen item styling with a simple divider between
	   days. Deliberately NOT `break-inside: avoid` here -- a day with many events is often taller
	   than a full page, and "avoid" only ever pushes a too-tall block onto the next page rather
	   than shrinking it, which left an almost-blank page behind it in testing. Row-level avoidance
	   below is enough to stop a single event's cells from splitting across the page break. */
	.accordion-wsu .accordion-item {
		margin-bottom: 0;
		border: 0;
		border-bottom: 1px solid #000;
		border-radius: 0;
	}

	.accordion-wsu .accordion-item:last-of-type {
		border-bottom: 0;
	}

	.accordion-wsu .accordion-body {
		padding: 0.25rem 0 0.75rem;
	}

	/* `.table-responsive` scrolls overflow on screen; on paper there's no scrollbar, so let the
	   table render at its natural width instead of silently clipping columns. */
	.table-responsive {
		overflow-x: visible;
	}

	/* The screen layout's `min-width` and wide fixed Time column assume a full browser viewport.
	   A printed page is narrower than that, so those screen-only sizes forced the table past the
	   page's printable width -- text got silently clipped at the margin instead of wrapping (see
	   the print preview screenshot). Shrinking the table back down to the page width, letting the
	   Time column wrap onto two lines, and tightening the column padding keeps everything within
	   the printable area. */
	.schedule-table {
		min-width: 0;
	}

	.schedule-col-time {
		white-space: normal;
		width: 14%;
	}

	/* 8% (the screen width) was too narrow for the single word "Section" to fit, overflowing
	   straight into the Description header with no visible gap ("SectionDescription"). Now that
	   the container fix above gives the table the full page width to work with, 11% is enough
	   room for it to stay on one line without an ugly mid-word break. */
	.schedule-col-section {
		width: 11%;
	}

	.schedule-table > :not(caption) > * > * {
		padding-left: 0.2rem;
		padding-right: 0.2rem;
		/* `.align-middle` on the table (screen-oriented, for the narrow rows Bootstrap's hover/
		   striping expects) vertically centers every cell -- on paper each row's height is driven by
		   the long Description text, which reads much better top-aligned than centered. Needs
		   `!important` to outrank Bootstrap's own `.align-middle` utility (also !important). */
		vertical-align: top !important;
	}

	/* Avoid splitting a single event's row across a page break -- unlike the whole-day
	   `break-inside: avoid` removed above, a single row is never taller than a page, so this can't
	   backfire into a blank page. */
	.schedule-table tr {
		break-inside: avoid;
	}
}

/*
 * ID photos served via PhotoProxy are scaled to a requested max-width by the remote source but
 * aren't guaranteed to be square -- `<img width height>` alone would stretch/squish a non-square
 * photo to fit. `object-fit: cover` keeps the fixed box size (needed for consistent avatar
 * layout) while preserving the photo's own aspect ratio, cropping any overflow instead of
 * distorting it.
 */
.person-photo {
	object-fit: cover;
}

/*
 * ARIA combobox result dropdown (wwwroot/js/person-search.js, Views/Sections/_LeaderForm.cshtml).
 * Positioned absolutely (relative to the .person-search wrapper) so it overlays following form
 * content instead of pushing it down, and capped/scrollable since PersonLookup can return up to
 * MaxResults (20) matches.
 */
.person-search-option {
	cursor: pointer;
}

[data-person-search-results] {
	max-height: 12rem;
	overflow-y: auto;
}