/* Shared Layout & Utility Styles */

html {
	min-height: 100%;
}

body {
	min-height: 100vh;
}

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

.dropzone-area {
	--dropzone-border-width: 2px;
	--dropzone-border-radius: 0.75rem;
	--dropzone-border-color: rgba(15, 23, 42, 0.15);
	--dropzone-border-color-active: rgba(13, 110, 253, 0.65);
	--dropzone-border-dark: rgba(148, 163, 184, 0.32);
	--dropzone-border-dark-active: rgba(96, 165, 250, 0.6);
	--dropzone-bg: rgba(15, 23, 42, 0.02);
	--dropzone-bg-active: rgba(13, 110, 253, 0.08);
	--dropzone-bg-dark: rgba(148, 163, 184, 0.08);
	--dropzone-bg-dark-active: rgba(96, 165, 250, 0.18);
	--dropzone-shadow-active: none;
	--dropzone-min-height: 5rem;
	--dropzone-padding: 1rem;
	--dropzone-gap: 0.6rem;
	--dropzone-icon-size: 3rem;
	--dropzone-icon-font-size: 1.5rem;
	--dropzone-icon-bg: rgba(37, 99, 235, 0.12);
	--dropzone-icon-bg-dark: rgba(96, 165, 250, 0.2);
	--dropzone-icon-color: rgba(37, 99, 235, 0.95);
	--dropzone-icon-color-dark: rgba(191, 219, 254, 0.95);
	--dropzone-title-font-size: 1rem;
	--dropzone-title-font-weight: 600;
	--dropzone-subtitle-font-size: 0.85rem;
	--dropzone-subtitle-color: var(--bs-secondary-color, #6c757d);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	border: var(--dropzone-border-width) dashed var(--dropzone-border-color);
	border-radius: var(--dropzone-border-radius);
	padding: var(--dropzone-padding);
	min-height: var(--dropzone-min-height);
	gap: var(--dropzone-gap);
	background: var(--dropzone-bg);
}

.dropzone-area:hover,
.dropzone-area.is-dragover {
	border-color: var(--dropzone-border-color-active);
	background: var(--dropzone-bg-active);
	box-shadow: var(--dropzone-shadow-active);
}

[data-bs-theme="dark"] .dropzone-area {
	border-color: var(--dropzone-border-dark);
	background: var(--dropzone-bg-dark);
}

[data-bs-theme="dark"] .dropzone-area:hover,
[data-bs-theme="dark"] .dropzone-area.is-dragover {
	border-color: var(--dropzone-border-dark-active);
	background: var(--dropzone-bg-dark-active);
}

.dropzone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--dropzone-icon-size);
	height: var(--dropzone-icon-size);
	border-radius: calc(var(--dropzone-icon-size) / 3);
	background: var(--dropzone-icon-bg);
	color: var(--dropzone-icon-color);
	font-size: var(--dropzone-icon-font-size);
	transition: background 0.2s ease, color 0.2s ease;
}

[data-bs-theme="dark"] .dropzone-area .dropzone-icon {
	background: var(--dropzone-icon-bg-dark);
	color: var(--dropzone-icon-color-dark);
}

.dropzone-title {
	font-size: var(--dropzone-title-font-size);
	font-weight: var(--dropzone-title-font-weight);
}

.dropzone-subtitle {
	font-size: var(--dropzone-subtitle-font-size);
	color: var(--dropzone-subtitle-color);
}

.dropzone-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}

/* Panel card shell ----------------------------------------------------- */
.panel-card {
	--panel-card-border-width: 1px;
	--panel-card-radius: 0.75rem;
	--panel-card-border-color: rgba(15, 23, 42, 0.08);
	--panel-card-border-color-dark: var(--panel-card-border-color);
	--panel-card-bg: var(--bs-body-bg, #ffffff);
	--panel-card-bg-dark: var(--panel-card-bg);
	--panel-card-shadow: none;
	--panel-card-shadow-dark: var(--panel-card-shadow);
	--panel-card-padding-x: 0;
	--panel-card-padding-y: 0;
	--panel-card-gap: 0.75rem;
	--panel-card-header-padding: 0.75rem 1rem 0.5rem;
	--panel-card-header-border-color: rgba(15, 23, 42, 0.08);
	--panel-card-header-border-color-dark: rgba(148, 163, 184, 0.28);
	--panel-card-title-size: 0.95rem;
	--panel-card-title-weight: 600;
	--panel-card-subtitle-size: 0.82rem;
	--panel-card-subtitle-color: var(--bs-secondary-color, #6c757d);
	--panel-card-content-padding: 0.75rem 1rem;
	--panel-card-content-gap: 0.75rem;
	display: flex;
	flex-direction: column;
	border: var(--panel-card-border-width) solid var(--panel-card-border-color);
	border-radius: var(--panel-card-radius);
	background: var(--panel-card-bg);
	box-shadow: var(--panel-card-shadow);
	padding: var(--panel-card-padding-y) var(--panel-card-padding-x);
	gap: var(--panel-card-gap);
	overflow: visible;
}

[data-bs-theme="dark"] .panel-card {
	border-color: var(--panel-card-border-color-dark);
	background: var(--panel-card-bg-dark);
	box-shadow: var(--panel-card-shadow-dark);
}

.panel-card__header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: var(--panel-card-header-padding);
	border-bottom: 1px solid var(--panel-card-header-border-color);
}

[data-bs-theme="dark"] .panel-card__header {
	border-bottom-color: var(--panel-card-header-border-color-dark);
}

.panel-card__title {
	margin: 0;
	font-size: var(--panel-card-title-size);
	font-weight: var(--panel-card-title-weight);
}

.panel-card__subtitle {
	margin: 0.15rem 0 0;
	font-size: var(--panel-card-subtitle-size);
	color: var(--panel-card-subtitle-color);
}

.panel-card__content {
	padding: var(--panel-card-content-padding);
	display: flex;
	flex-direction: column;
	gap: var(--panel-card-content-gap);
}

/* Masthead navigation -------------------------------------------------- */
.nav-masthead {
	--nav-link-spacing: 1rem;
	--nav-link-border-width: 0.25rem;
	--nav-link-border-color: transparent;
	--nav-link-active-color: var(--bs-body-color);
}

.nav-masthead .nav-link {
	color: var(--bs-body-color);
	border-bottom: var(--nav-link-border-width) solid var(--nav-link-border-color);
}

.nav-masthead .nav-item + .nav-item {
	margin-left: var(--nav-link-spacing);
}

.nav-masthead .nav-link + .nav-link {
	margin-left: var(--nav-link-spacing);
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus,
.nav-masthead .nav-link.active,
.nav-masthead .active {
	color: var(--nav-link-active-color);
	border-bottom-color: var(--nav-link-active-color);
}