/* css/styles.css */

/* ── MD3 Design Tokens ──────────────────────────────────── */
:root {
	--md-sys-color-primary: #99CBFF;
	--md-sys-color-on-primary: #003060;
	--md-sys-color-primary-container: #004A77;
	--md-sys-color-on-primary-container: #CDE5FF;
	--md-sys-color-secondary-container: #005230;
	--md-sys-color-on-secondary-container: #7FDB9E;
	--md-sys-color-surface: #111318;
	--md-sys-color-surface-container-low: #191C20;
	--md-sys-color-surface-container: #1D2024;
	--md-sys-color-surface-container-high: #272A2F;
	--md-sys-color-on-surface: #E2E2E9;
	--md-sys-color-on-surface-variant: #C3C6CF;
	--md-sys-color-outline: #8D9199;
	--md-sys-color-outline-variant: #43474E;
	--md-sys-color-error: #FFB4AB;
	--md-elevation-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
	--md-elevation-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
}

/* Override Bootstrap dark-theme CSS vars with MD3 tokens */
[data-bs-theme="dark"] {
	--bs-body-bg: var(--md-sys-color-surface);
	--bs-body-color: var(--md-sys-color-on-surface);
	--bs-border-color: var(--md-sys-color-outline-variant);
	--bs-secondary-bg: var(--md-sys-color-surface-container);
	--bs-tertiary-bg: var(--md-sys-color-surface-container-low);
	--bs-secondary-color: var(--md-sys-color-on-surface-variant);
	--bs-card-bg: var(--md-sys-color-surface-container);
	--bs-card-border-color: transparent;
}

/* ── MD3 Light scheme tokens + Bootstrap overrides ──────── */
[data-bs-theme="light"] {
	--md-sys-color-primary: #1F5FA6;
	--md-sys-color-on-primary: #FFFFFF;
	--md-sys-color-secondary-container: #C8EED4;
	--md-sys-color-on-secondary-container: #003920;
	--md-sys-color-surface: #F8F9FF;
	--md-sys-color-surface-container-low: #F2F3FA;
	--md-sys-color-surface-container: #ECEEF4;
	--md-sys-color-surface-container-high: #E6E8EE;
	--md-sys-color-on-surface: #191C20;
	--md-sys-color-on-surface-variant: #43474E;
	--md-sys-color-outline: #74777F;
	--md-sys-color-outline-variant: #C3C6CF;
	--md-sys-color-error: #BA1A1A;
	/* Bootstrap overrides */
	--bs-body-bg: var(--md-sys-color-surface);
	--bs-body-color: var(--md-sys-color-on-surface);
	--bs-border-color: var(--md-sys-color-outline-variant);
	--bs-secondary-bg: var(--md-sys-color-surface-container);
	--bs-tertiary-bg: var(--md-sys-color-surface-container-low);
	--bs-secondary-color: var(--md-sys-color-on-surface-variant);
	--bs-card-bg: var(--md-sys-color-surface-container);
	--bs-card-border-color: transparent;
}

/* Light mode button hover corrections */
[data-bs-theme="light"] .btn-primary:hover,
[data-bs-theme="light"] .btn-primary:focus,
[data-bs-theme="light"] .btn-primary:active {
	background-color: #1A5499;
	color: #FFFFFF;
	box-shadow: var(--md-elevation-2);
}

[data-bs-theme="light"] .btn-success:hover,
[data-bs-theme="light"] .btn-success:focus,
[data-bs-theme="light"] .btn-success:active {
	background-color: #AADEC0;
	color: var(--md-sys-color-on-secondary-container);
	border: none;
}

[data-bs-theme="light"] .btn-outline-secondary:hover,
[data-bs-theme="light"] .btn-outline-secondary:focus {
	background-color: rgba(25, 28, 32, 0.08);
}

/* ── Base ───────────────────────────────────────────────── */
body {
	font-family: 'Roboto', Arial, sans-serif;
	background-color: var(--md-sys-color-surface);
	color: var(--md-sys-color-on-surface);
}

/* ── MD3 Top App Bar ────────────────────────────────────── */
.navbar {
	background-color: var(--md-sys-color-surface-container) !important;
	border-bottom: 1px solid var(--md-sys-color-outline-variant);
	box-shadow: none;
}

.navbar-brand {
	font-size: 1.375rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--md-sys-color-on-surface) !important;
}

@media (max-width: 576px) {
	.navbar-brand {
		font-size: 0.875rem;
		white-space: normal;
		word-break: break-word;
	}
}

/* ── MD3 Cards ──────────────────────────────────────────── */
.card {
	background-color: var(--md-sys-color-surface-container);
	border: none;
	border-radius: 0;
	box-shadow: var(--md-elevation-1);
	overflow: hidden;
}

.card-title {
	font-size: 1rem;
	font-weight: 500;
	color: var(--md-sys-color-on-surface);
}

.card-img-top {
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
}

/* Square only in grid mode */
#galleryPhotos.grid-mode .card-img-top {
	aspect-ratio: 1 / 1;
}

/* List mode: natural height, capped so portrait photos don't fill the screen */
#galleryPhotos:not(.grid-mode) .card-img-top {
	max-height: 70vh;
}

/* ── MD3 Buttons ────────────────────────────────────────── */
.btn-primary {
	background-color: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);
	border: none;
	border-radius: 20px;
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.00625em;
	padding: 10px 24px;
	box-shadow: var(--md-elevation-1);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: #B3D8FF;
	color: var(--md-sys-color-on-primary);
	border: none;
	box-shadow: var(--md-elevation-2);
}

.btn-success {
	background-color: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
	border: none;
	border-radius: 20px;
	font-weight: 500;
	font-size: 0.875rem;
	padding: 10px 24px;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
	background-color: #006B3E;
	color: var(--md-sys-color-on-secondary-container);
	border: none;
}

.btn-outline-secondary {
	border-color: var(--md-sys-color-outline);
	color: var(--md-sys-color-on-surface);
	border-radius: 20px;
	background: transparent;
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.00625em;
	padding: 10px 24px;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
	background-color: rgba(226, 226, 233, 0.08);
	border-color: var(--md-sys-color-outline);
	color: var(--md-sys-color-on-surface);
}

.btn-secondary,
.btn-danger,
.btn-outline-danger,
.btn-outline-success {
	border-radius: 20px;
	font-weight: 500;
	font-size: 0.875rem;
	padding: 10px 24px;
}

/* ── MD3 Text Field ─────────────────────────────────────── */
.form-control {
	background-color: var(--md-sys-color-surface-container-high);
	border: none;
	border-bottom: 1px solid var(--md-sys-color-outline);
	border-radius: 4px 4px 0 0;
	color: var(--md-sys-color-on-surface);
	padding: 16px 12px 8px;
}

.form-control:focus {
	background-color: var(--md-sys-color-surface-container-high);
	border-bottom-color: var(--md-sys-color-primary);
	box-shadow: none;
	color: var(--md-sys-color-on-surface);
}

.form-label {
	color: var(--md-sys-color-on-surface-variant);
}

/* ── MD3 Bottom Navigation Bar ──────────────────────────── */
.mobile-bottom-bar {
	background-color: var(--md-sys-color-surface-container) !important;
	border-top: 1px solid var(--md-sys-color-outline-variant) !important;
	min-height: 80px;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	z-index: 1030;
}

.mobile-bottom-bar .btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.007em;
	color: var(--md-sys-color-on-surface-variant);
	border: none;
	border-radius: 0;
	background: transparent;
}

.mobile-bottom-bar .btn:hover,
.mobile-bottom-bar .btn:focus {
	color: var(--md-sys-color-on-surface);
	background: transparent;
}

.mobile-bottom-bar .btn-success {
	background-color: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
}

.mobile-bottom-bar .btn-success:hover,
.mobile-bottom-bar .btn-success:focus {
	background-color: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
	opacity: 0.9;
}

/* ── Mobile spacer + layout ─────────────────────────────── */
@media (max-width: 575px) {
	.mobile-bottom-spacer {
		height: calc(80px + env(safe-area-inset-bottom, 0px));
	}

	.toast-container {
		left: 0.75rem !important;
		right: 0.75rem !important;
		width: auto !important;
	}

	.toast {
		width: 100%;
	}

	/* Pull gallery grid flush to screen edges */
	#galleryPhotos {
		margin-left: -0.75rem;
		margin-right: -0.75rem;
	}

	/* Grid mode — clean edge-to-edge tiles on mobile */
	#galleryPhotos.grid-mode .card {
		border: none;
		box-shadow: none;
	}

	#galleryPhotos.grid-mode .like-btn,
	#galleryPhotos.grid-mode .btn-outline-primary {
		display: none;
	}
}

/* ── MD3 Toast / Snackbar ───────────────────────────────── */
#uploadToast {
	background-color: var(--md-sys-color-surface-container-high);
	color: var(--md-sys-color-on-surface);
	border: none;
	border-radius: 4px;
	box-shadow: var(--md-elevation-2);
}

.toast-header {
	background-color: transparent;
	border-bottom: 1px solid var(--md-sys-color-outline-variant);
	color: var(--md-sys-color-on-surface);
}

[data-bs-theme="dark"] .toast-header .btn-close {
	filter: invert(1);
}

.progress {
	width: 100%;
	margin-top: 0.5rem;
	background-color: var(--md-sys-color-surface-container);
}

.toast-progress {
	width: 100%;
	transition: width 0.1s linear;
}

/* ── Gallery Overlay Buttons (like / download) ──────────── */
.card .like-btn,
.card .btn-outline-primary {
	position: absolute;
	top: 0;
	padding: 5px 10px;
	background: rgba(0, 0, 0, 0.55);
	border: none;
	color: white;
	border-radius: 0;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.card .like-btn {
	left: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.card .btn-outline-primary {
	right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.card .like-btn:hover,
.card .btn-outline-primary:hover {
	background: rgba(0, 0, 0, 0.75);
}

.card .like-btn i {
	color: white;
}

.card .like-btn i.bi-heart-fill {
	color: #FFB4AB;
}

.card .like-btn span {
	color: white;
}

.card .like-btn:hover i,
.card .like-btn:hover span {
	color: white;
}

/* Gallery name label on most-liked cards */
.card .gallery-name {
	color: white;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	padding: 3px 8px;
	border-top-right-radius: 5px;
	font-size: 0.9rem;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}

/* ── Lightbox ───────────────────────────────────────────── */
#lightboxModal .modal-dialog {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	max-width: 100%;
}

#lightboxModal .modal-content {
	background: rgba(0, 0, 0, 0.92);
	border: none;
	border-radius: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;
}

#lightboxMedia {
	max-height: 100vh;
	max-width: 100vw;
	height: auto;
	width: auto;
	object-fit: contain;
	display: block;
}

/* Visual style only — no positioning here so icons inside flex containers behave */
.lightbox-control {
	color: white;
	cursor: pointer;
	padding: 8px;
	background: rgba(29, 32, 36, 0.7);
	border: none;
	font-size: 1.5rem;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	line-height: 1;
	display: block;
}

.lightbox-control:hover {
	background: rgba(39, 42, 47, 0.9);
}

/* Close button — absolutely positioned top-left, below status bar */
#lightboxClose {
	position: absolute;
	top: calc(10px + env(safe-area-inset-top, 0px));
	left: 10px;
	z-index: 10;
}

/* Like + download group — absolutely positioned top-right */
.lightbox-controls-right {
	position: absolute;
	top: calc(10px + env(safe-area-inset-top, 0px));
	right: 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	z-index: 10;
}

/* Make the download <a> wrap tightly around its icon */
#lightboxDownloadLink {
	display: flex;
}

/* Prev/next — full-height tap zones covering the outer thirds */
.lightbox-nav {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 33%;
	background: transparent;
	border: none;
	z-index: 5;
	display: flex;
	align-items: center;
	padding: 0;
	cursor: pointer;
}

#prevMedia {
	left: 0;
	justify-content: flex-start;
}

#nextMedia {
	right: 0;
	justify-content: flex-end;
}

.lightbox-nav i {
	color: white;
	font-size: 2rem;
	background: rgba(29, 32, 36, 0.6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	padding: 16px 10px;
	line-height: 1;
}

/* Half-pill: flat edge against screen, rounded inward */
#prevMedia i {
	border-radius: 0 8px 8px 0;
}

#nextMedia i {
	border-radius: 8px 0 0 8px;
}

.lightbox-nav:hover i,
.lightbox-nav:active i {
	background: rgba(39, 42, 47, 0.85);
}

/* ── Theme toggle button ────────────────────────────────── */
#themeToggleBtn {
	color: var(--md-sys-color-on-surface-variant);
	background: transparent;
	border: none;
	line-height: 1;
}

#themeToggleBtn:hover,
#themeToggleBtn:focus {
	color: var(--md-sys-color-on-surface);
	background: transparent;
	box-shadow: none;
}

/* ── Misc ───────────────────────────────────────────────── */
.qr-container {
	max-width: 200px;
	margin: 10px auto;
}