/* Shared look for all JSWS apps. Each app picks its palette through <html data-app="...">, set from app.js. */

:root,
[data-app="jlu"] {
	--app-bar: #2ec8ea;
	--app-bar-text: #ffffff;
	--app-footer-from: #2ec8ea;
	--app-footer-to: #0e748b;
	--app-footer-text: #1d2b30;
	--app-footer-link: #ffffff;
	--app-accent: #0e748b;
	--app-accent-hover: #0b5d70;
	--app-accent-rgb: 14, 116, 139;
	--app-page-bg: #eeeeee;
}

/* DPS office (JSWS Control Panel): the JLU bar and footer, with the old app's slightly lighter teal buttons. */
[data-app="dps"] {
	--app-bar: #2ec8ea;
	--app-bar-text: #ffffff;
	--app-footer-from: #2ec8ea;
	--app-footer-to: #0e748b;
	--app-footer-text: #1d2b30;
	--app-footer-link: #ffffff;
	--app-accent: #0f819a;
	--app-accent-hover: #0d6f85;
	--app-accent-rgb: 15, 129, 154;
	--app-page-bg: #eeeeee;
}

/* Classic Accommodation (hostel payments): white top bar, navy buttons, blue footer. */
[data-app="classicaccommodation"] {
	--app-bar: #ffffff;
	--app-bar-text: #1a3965;
	--app-footer-from: #2f67b6;
	--app-footer-to: #1a3965;
	--app-footer-text: #e6ecf5;
	--app-footer-link: #ffffff;
	--app-accent: #1a3965;
	--app-accent-hover: #1d4174;
	--app-accent-rgb: 26, 57, 101;
	--app-page-bg: #eeeeee;
}

/* Yummy Food (mess payments): red top bar, buttons and footer. */
[data-app="yummyfood"] {
	--app-bar: #bd2026;
	--app-bar-text: #ffffff;
	--app-footer-from: #de3b40;
	--app-footer-to: #bd2026;
	--app-footer-text: #fbe3e4;
	--app-footer-link: #ffffff;
	--app-accent: #bd2026;
	--app-accent-hover: #d9242b;
	--app-accent-rgb: 189, 32, 38;
	--app-page-bg: #eeeeee;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--app-page-bg);
	font-size: 0.9375rem;
}

/* Bootstrap's primary colour follows the app accent. */
[data-app] {
	--bs-primary: var(--app-accent);
	--bs-primary-rgb: var(--app-accent-rgb);
	--bs-link-color: var(--app-accent);
	--bs-link-color-rgb: var(--app-accent-rgb);
	--bs-link-hover-color: var(--app-accent-hover);
}

[data-app] .btn-primary {
	--bs-btn-bg: var(--app-accent);
	--bs-btn-border-color: var(--app-accent);
	--bs-btn-hover-bg: var(--app-accent-hover);
	--bs-btn-hover-border-color: var(--app-accent-hover);
	--bs-btn-active-bg: var(--app-accent-hover);
	--bs-btn-active-border-color: var(--app-accent-hover);
	--bs-btn-disabled-bg: var(--app-accent);
	--bs-btn-disabled-border-color: var(--app-accent);
}

[data-app] .btn-outline-primary {
	--bs-btn-color: var(--app-accent);
	--bs-btn-border-color: var(--app-accent);
	--bs-btn-hover-bg: var(--app-accent);
	--bs-btn-hover-border-color: var(--app-accent);
	--bs-btn-active-bg: var(--app-accent);
	--bs-btn-active-border-color: var(--app-accent);
}

[data-app] .list-group-item.active {
	background-color: var(--app-accent);
	border-color: var(--app-accent);
}

[data-app] .form-control:focus,
[data-app] .form-select:focus,
[data-app] .form-check-input:focus {
	border-color: rgba(var(--app-accent-rgb), 0.6);
	box-shadow: 0 0 0 0.2rem rgba(var(--app-accent-rgb), 0.2);
}

[data-app] .form-check-input:checked {
	background-color: var(--app-accent);
	border-color: var(--app-accent);
}

/* ----- Header ----- */

.app-header {
	background-color: var(--app-bar);
	color: var(--app-bar-text);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.app-header .navbar {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.app-logo {
	max-height: 56px;
	max-width: 40vw;
}

.app-page-title {
	font-size: 1.25rem;
	font-weight: 600;
}

@media (max-width: 575.98px) {
	.app-logo {
		max-height: 40px;
	}
	.app-page-title {
		font-size: 1rem;
	}
}

.app-menu .offcanvas-header {
	background-color: var(--app-bar);
}

/* ----- Footer ----- */

.app-footer {
	background: linear-gradient(to bottom, var(--app-footer-from) 0%, var(--app-footer-to) 100%);
	color: var(--app-footer-text);
	font-size: 0.875rem;
}

.app-footer a {
	color: var(--app-footer-link);
	text-decoration: none;
}

/* ----- Page body ----- */

.app-main {
	flex: 1 0 auto;
}

.app-card {
	background-color: #ffffff;
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ----- Row editors (lists of editable rows, such as meal packages) -----
   Column headings show on wide screens; on phones each field carries its own small label instead. */

.row-editor-head {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--bs-secondary-color);
}

.row-editor-row {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--bs-border-color-translucent);
}

.row-editor-row .field-label {
	font-size: 0.75rem;
	color: var(--bs-secondary-color);
	margin-bottom: 0.125rem;
}

@media (min-width: 768px) {
	.row-editor-row .field-label {
		display: none;
	}
}

/* ----- Multi-select dropdowns (core/multiselect.js) ----- */

.multi-select-menu {
	max-height: 18rem;
	overflow-y: auto;
}

.multi-select-menu .dropdown-item {
	white-space: normal;
	cursor: pointer;
}

select.is-invalid ~ .multi-select > .form-select {
	border-color: var(--bs-form-invalid-border-color);
}

/* ----- Upload drop zone (core/upload.js) ----- */

.upload-drop-zone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-height: 10rem;
	padding: 1rem;
	text-align: center;
	border: 2px dashed var(--bs-border-color);
	border-radius: 0.5rem;
	background-color: var(--bs-tertiary-bg);
	cursor: pointer;
}

.upload-drop-zone.drag-over {
	border-color: var(--app-accent);
	background-color: rgba(var(--app-accent-rgb), 0.08);
}

.toast-container {
	z-index: 1090;
}

/* ----- Sign-in page ----- */

.login-panel {
	max-width: 960px;
}

.login-logo {
	width: 256px;
	max-width: 80%;
}

.captcha-image {
	height: 44px;
	border-radius: 0.375rem;
	background-color: #ffffff;
}