/* Project-specific overrides on top of Bootstrap 5.3. Keep this file small;
   prefer Bootstrap utility classes in templates. */

/* Make the HTML `hidden` attribute beat Bootstrap utilities like `d-flex`.
   Without this, `<div class="d-flex" hidden>` stays visible because
   `display: flex !important` outranks the unprioritized `display: none`
   that `hidden` produces. */
[hidden] {
	display: none !important;
}

html {
	font-size: 15px;
}

body,
span,
div,
p,
li,
ul,
a,
input,
select,
button,
textarea {
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
		Cantarell, "Helvetica Neue", sans-serif;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 * {
	font-family: "League Spartan", sans-serif !important;
	font-optical-sizing: auto !important;
	font-weight: 600 !important;
}

:root {
	--rp-content-max: 540px;
}

:root,
[data-bs-theme="light"] {
	--bs-primary-rgb: 26, 40, 30;
	--bs-link-color: #369c54;
	--bs-link-color-rgb: 54, 156, 85;
}

.main-navi {
	background: #000000;
}

.nav-pills {
	--bs-nav-pills-link-active-bg: #027747;
}

.btn-primary {
	--bs-btn-bg: #027747;
}

.auth-card {
	max-width: var(--rp-content-max);
	margin: 2rem auto;
}

.auth-card .card-body {
	padding: 1.75rem;
}

.field-error {
	color: var(--bs-danger);
	font-size: 0.875rem;
}

.container.py-4 > .row {
	justify-content: center;
}

img.rp-logo {
	margin-bottom: -8px;
}

.song-transpose-control .input-group {
	width: auto;
}

.song-transpose-control .btn {
	width: 2.5rem;
}

.song-transpose-display {
	flex: 0 0 4.25rem !important;
	width: 4.25rem;
	min-width: 4.25rem;
	user-select: none;
}

.song-transpose-display [data-song-transpose-prefix] {
	display: inline-block;
	width: 0.75rem;
	text-align: center;
}

.song-transpose-display [data-song-transpose-number] {
	display: inline-block;
	min-width: 0.75rem;
	text-align: left;
}

.rp-upload-picker .uppy-FileInput-container {
	margin-bottom: 0;
}

.rp-upload-picker .uppy-FileInput-btn {
	line-height: 1.5;
}

.rp-upload-file-summary {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
}

.rp-upload-file-line {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	min-width: 0;
}

.rp-upload-file-line [data-uppy-filename] {
	flex: 1 1 auto;
	min-width: 0;
}

.rp-upload-slot.is-invalid {
	border-color: var(--bs-danger) !important;
}

.ts-wrapper.is-invalid .ts-control {
	border-color: var(--bs-danger);
}

.ts-wrapper.is-invalid.focus .ts-control {
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.nav-lang-flag {
	text-decoration: none;
}

.nav-lang-active {
	opacity: 0.4;
	cursor: default;
}

.nav-lang-flag img {
	border-radius: 666px;
}

.nav-item .dropdown-item {
	color: white;
}

a.login-button-meta:hover {
	background: #00347a;
}

a.login-button-meta {
	color: #1976f2;
	border-color: #1976f2;
}

a.login-button-google:hover {
	background: #8f281f;
}

a.login-button-google {
	color: #ea4335;
	border-color: #ea4335;
}

.card {
	box-shadow: 0px 0px 20px -10px #0000006b !important;
}

.text-small {
	font-size: 0.7rem !important;
}

/* Field-editor card collapse toggle. The chevron points right when the
   card is collapsed and rotates to point down when expanded. The toggle
   button itself sits in the card header alongside action buttons, so a
   hover cue clarifies that the whole title row is clickable. */
.js-field-row-toggle {
	cursor: pointer;
}
.js-field-row-toggle:focus-visible {
	outline: 2px solid var(--bs-primary);
	outline-offset: 2px;
	border-radius: 0.25rem;
}
.field-row__chevron {
	display: inline-flex;
	transition: transform 0.2s ease;
}
.js-field-row-toggle[aria-expanded="true"] .field-row__chevron {
	transform: rotate(90deg);
}

.signup-custom-html {
	padding-left: 1em;
	padding-right: 1em;
	margin-top: 2em;
}

@media (max-width: 768px) {
	.navbar-collapse .navbar-nav {
		margin-top: 40px;
	}
}

.singer-gallery .singer-card {
	cursor: pointer;
	border: 2px solid var(--bs-border-color);
	overflow: hidden;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

/* Pointer-only hover: on touch devices :hover stays latched on the last-tapped
   element until the next tap elsewhere, which made a card we just auto-blocked
   (because the user exceeded max selections) look selected. */
@media (hover: hover) {
	.singer-gallery .singer-card:hover {
		border-color: var(--bs-dark);
	}
}

.singer-gallery .btn-check:checked + .singer-card {
	border-color: var(--bs-success);
	box-shadow: 0 0 0.5rem 0.1rem rgba(var(--bs-success-rgb), 0.55) !important;
}

.singer-gallery .btn-check:focus-visible + .singer-card {
	box-shadow: 0 0 0.5rem 0.1rem rgba(var(--bs-success-rgb), 0.55) !important;
}

.singer-card__img-wrap {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	background: var(--bs-tertiary-bg);
}

.singer-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.singer-card__badge {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: none;
}

.singer-gallery .btn-check:checked + .singer-card .singer-card__badge {
	display: inline-block;
}

.singer-card__name {
	font-weight: 500;
	font-size: 0.9rem;
}

.singer-card__country {
	font-size: 0.78rem;
	color: var(--bs-secondary-color);
	line-height: 1.2;
	margin-bottom: 0.15rem;
}

@media (max-width: 767.98px) {
	.singer-card__name {
		font-size: 0.8rem;
	}
	.singer-card__country {
		font-size: 0.7rem;
	}
}

.singer-row__thumb {
	aspect-ratio: 5 / 4;
	background: var(--bs-tertiary-bg);
	border: 1px solid var(--bs-border-color);
	border-radius: 0.375rem;
	overflow: hidden;
}

.singer-row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Chip/tag input (individual_songs composers/lyricists/publishers). The
   container is a Bootstrap .form-control whose height grows with the chips;
   the text entry is a borderless input that flexes to fill the row. */
.rp-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	height: auto;
	min-height: calc(1.5em + 0.75rem + 2px);
	cursor: text;
}
.rp-chips__list {
	display: contents;
}
.rp-chips__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 500;
}
.rp-chips__chip-label {
	cursor: pointer;
}
.rp-chips__chip-x.btn-close {
	font-size: 0.6rem;
	padding: 0;
	margin: 0;
	width: 0.6rem;
	height: 0.6rem;
}
.rp-chips__entry {
	flex: 1 1 8ch;
	min-width: 8ch;
	border: 0;
	outline: 0;
	padding: 0;
	background: transparent;
	color: inherit;
}
.rp-chips__entry:focus {
	outline: 0;
	box-shadow: none;
}
/* Genre chips add from preset options via a borderless inline <select>. */
.rp-chips__select {
	flex: 0 1 auto;
	border: 0;
	outline: 0;
	padding: 0 1.2rem 0 0;
	background: transparent;
	color: var(--bs-secondary-color, #6c757d);
	cursor: pointer;
	max-width: 14rem;
}
.rp-chips__select:focus {
	outline: 0;
	box-shadow: none;
}

/* Full-page "Submitting…" overlay shown while a slow form POST is in flight
   (individual_songs finalize, catalog allocation). Cleared by the server's
   redirect/re-render navigation. */
.rp-submit-overlay {
	position: fixed;
	inset: 0;
	z-index: 1080;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(1px);
}
.rp-submit-overlay__text {
	font-weight: 600;
	color: #333;
}