@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@300;400;500;600&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
	--primary-red: #E74C3C;
	--primary-red-dark: #C0392B;
	--primary-red-light: rgba(231, 76, 60, 0.1);
	--navy: #1A2332;
	--navy-light: #2C3E50;
	--off-white: #FAFAF8;
	--warm-gray: #F5F5F3;
	--cool-gray: #EDF0F2;
	--text-dark: #2C3E50;
	--text-medium: #5D6D7E;
	--text-light: #95A5A6;
	--link-secondary: rgba(255,255,255,0.6);
	--border-light: #E8E8E6;
	--shadow-soft: 0 4px 20px rgba(26, 35, 50, 0.08);
	--shadow-medium: 0 8px 30px rgba(26, 35, 50, 0.12);
	--shadow-heavy: 0 16px 48px rgba(26, 35, 50, 0.18);
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--transition: all 0.3s ease;
	--gradient-red: #240805dc;
	--warning-yellow: #f7c85d;
	--success-green: #27ae60;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Inter', sans-serif;
	background-color: var(--off-white);
	color: var(--text-dark);
	line-height: 1.6;
	overflow-x: hidden;
}
/* ============================================================
   SCROLL REVEAL ANIMATION
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
/* ============================================================
   BOOTSTRAP CONFLICT RESOLUTION
   Override Bootstrap defaults that clash with our design system.
   We use !important sparingly — only where Bootstrap's specificity
   would otherwise win and break our visual language.
   ============================================================ */

/* --- Buttons --- */
/* Bootstrap's .btn resets our custom .btn — we reclaim it */
.btn {
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	border-radius: var(--radius-sm) !important;
	transition: var(--transition) !important;
	display: inline-flex;
	align-items: center !important;
	gap: 0.4rem !important;
	letter-spacing: 0.01em;
}

.btn-primary {
	background: var(--primary-red) !important;
	border-color: var(--primary-red) !important;
	color: white !important;
}

.btn-reset {
	background-color: white !important;
	color:	var(--navy) !important;
	cursor: pointer !important;
	border: var(--navy-light) 1px solid !important;
}
.btn-reset:hover {
	background-color: var(--navy) !important;
	border-color: var(--text-light) !important;
	color: white !important;
	transform: translateY(-1px);	
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background: var(--primary-red-dark) !important;
	border-color: var(--primary-red-dark) !important;
	box-shadow: 0 4px 15px rgba(231, 76, 60, 0.35) !important;
	transform: translateY(-1px);
}

.btn-secondary {
	background: white !important;
	border-color: var(--border-light) !important;
	color: var(--navy) !important;
}


.btn-secondary:hover,
.btn-secondary:focus {
	background: var(--warm-gray) !important;
	border-color: var(--text-light) !important;
	color: var(--navy) !important;
}

.btn-outline-secondary {
	color: var(--text-medium) !important;
	border-color: var(--border-light) !important;
}
.btn-outline-secondary:hover {
	background: var(--warm-gray) !important;
	color: var(--navy) !important;
}

/* Bootstrap success/info/danger — keep but harmonize sizing */
.btn-success  { border-radius: var(--radius-sm) !important; font-family: 'Inter', sans-serif !important; }
.btn-danger   { border-radius: var(--radius-sm) !important; font-family: 'Inter', sans-serif !important; }
.btn-info     { border-radius: var(--radius-sm) !important; font-family: 'Inter', sans-serif !important; }

/* --- Cards --- */
/* Bootstrap .card gets border-radius and font overrides */
.card {
	border-color: var(--border-light) !important;
	border-radius: var(--radius-md) !important;
	font-family: 'Inter', sans-serif !important;
	box-shadow: var(--shadow-soft) !important;
}
.card-header {
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	border-bottom-color: var(--border-light) !important;
}
.card-header.bg-light {
	background: var(--warm-gray) !important;
	color: var(--text-dark) !important;
}

/* --- Badges --- */
.badge {
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	border-radius: 12px !important;
	letter-spacing: 0.02em;
}

/* --- Form controls --- */
.form-control,
.form-select {
	font-family: 'Inter', sans-serif !important;
	border-color: var(--border-light) !important;
	border-radius: var(--radius-sm) !important;
	color: var(--text-dark) !important;
	transition: var(--transition) !important;
}
.form-control:focus,
.form-select:focus {
	border-color: var(--primary-red) !important;
	box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.12) !important;
}
.form-label {
	font-family: 'Inter', sans-serif !important;
	font-weight: 500 !important;
	color: var(--text-dark) !important;
}
.input-group-text {
	border-color: var(--border-light) !important;
	background: var(--warm-gray) !important;
	color: var(--text-medium) !important;
}

/* --- Dropdowns --- */
.dropdown-menu {
	border-color: var(--border-light) !important;
	border-radius: var(--radius-md) !important;
	box-shadow: var(--shadow-medium) !important;
	font-family: 'Inter', sans-serif !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
	background: var(--warm-gray) !important;
	color: var(--navy) !important;
}

/* --- Modals --- */
.modal-content {
	border-radius: var(--radius-lg) !important;
	border: none !important;
	box-shadow: var(--shadow-heavy) !important;
	font-family: 'Inter', sans-serif !important;
}
.modal-header {
	border-bottom-color: var(--border-light) !important;
}
.modal-footer {
	border-top-color: var(--border-light) !important;
}

/* --- Alerts --- */
.alert {
	border-radius: var(--radius-md) !important;
	font-family: 'Inter', sans-serif !important;
	border: none !important;
}

/* --- Nav / Tabs --- */
.nav-link {
	font-family: 'Inter', sans-serif !important;
}

/* --- List groups --- */
.list-group-item {
	font-family: 'Inter', sans-serif !important;
	border-color: var(--border-light) !important;
}
.list-group-item:hover {
	background: var(--warm-gray) !important;
}
.list-group-item.active {
	background: var(--primary-red) !important;
	border-color: var(--primary-red) !important;
}

/* --- Form switch (used in wizard) --- */
.form-check-input:checked {
	background-color: var(--primary-red) !important;
	border-color: var(--primary-red) !important;
}
.form-check-input:focus {
	box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.12) !important;
}



/* Bootstrap container max-width — keep Bootstrap's but allow our full-bleed sections */
.container { max-width: 1400px; }

/* ============================================================
   TYPOGRAPHY SCALE
   ============================================================ */
.font-display { font-family: 'Source Serif 4', serif; }
.font-body    { font-family: 'Inter', sans-serif; }

h1, h2, h3 { font-family: 'Source Serif 4', serif; color: var(--navy); }
h4, h5, h6 { font-family: 'Inter', sans-serif; font-weight: 600; color: var(--navy); }

.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg   { font-size: 1.125rem; }
.text-xl   { font-size: 1.25rem; }
.text-2xl  { font-size: 1.5rem; }
.text-3xl  { font-size: 1.875rem; }
.text-4xl  { font-size: 2.25rem; }

.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
	animation: fadeIn 0.6s ease forwards;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.grid           { display: grid; }
.grid-cols-1    { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2    { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3    { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4    { grid-template-columns: repeat(4, 1fr); }
.gap-4          { gap: 1rem; }
.gap-6          { gap: 1.5rem; }
.gap-8          { gap: 2rem; }

@media (max-width: 768px) {
	.grid-cols-2, .grid-cols-3, .grid-cols-4 {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   NAVBAR
   ============================================================ */
header {
	margin-bottom: 70px;
}
.register-link {
	padding-top: .2rem;
}
.login-options{
	height: fit-content;
}
.site-navbar {
	background: var(--navy);
	padding: 0 5%;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1000;
	box-shadow: var(--shadow-soft);
}

.nav-container {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: fit-content;
	padding: .6rem 0 1rem 0;
}

.logo {
	font-family: 'Source Serif 4', serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: white;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.logo-icon {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-navbar-links {
	display: flex;
	gap: 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
    align-items: center;
}

.site-navbar-links a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	transition: var(--transition);
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.site-navbar-links span{
	color: var(--link-secondary);
}
.site-navbar-links a::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--primary-red);
	transition: width 0.3s ease;
}

.site-navbar-links a:hover { color: white; }
.site-navbar-links a:hover::after,
.site-navbar-links a.text-secondary::after { width: 100%; }
.site-navbar-links a.text-secondary { color: var(--link-secondary) !important; }

/* ============================================================
   SIDEBAR NAV (smaller-header fragment)
   ============================================================ */
nav.sidebar {
	width: 11.25rem;
	flex-shrink: 0;
}

/* The smaller-header nav rendered by Thymeleaf */
.d-flex > nav,
aside.sidebar-nav {
	/* width: 11.25rem; */
	flex-shrink: 0;
}

nav .nav-link,
.sidebar-nav .nav-link {
	color: var(--text-medium) !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	padding: 0.5rem 0.75rem !important;
	border-radius: var(--radius-sm) !important;
	transition: var(--transition) !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	text-decoration: none !important;
	justify-content: flex-end;
}

nav .nav-link:hover,
.sidebar-nav .nav-link:hover {
	color: var(--navy) !important;
	background: var(--warm-gray) !important;
}

nav .nav-link.text-secondary,
.sidebar-nav .nav-link.text-secondary {
	color: var(--primary-red) !important;
	background: var(--primary-red-light) !important;
	font-weight: 600 !important;
}

/* ============================================================
   MAIN CONTENT LAYOUT
   ============================================================ */
.main-content {
	margin-bottom: 70px;
	padding-top: .5rem;
}

/* ============================================================
   STUDY SUB-HEADER BANNER
   Shown at the top of inner pages (data, graphs, wizard, files)
   below the main navbar.
   ============================================================ */
.study-sub-header {
	/* background: white; */
	border-bottom: 1px solid var(--border-light);
	padding: 1rem 0;
	margin-bottom: 0;
	/* sits below fixed navbar */
}

.study-sub-header-inner {
	max-width: 1400px;
	margin: 0;
	padding-top: .5rem;
	/* padding: 0 10%; */
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.study-sub-header .study-id-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--primary-red);
}

.study-sub-header .study-name {
	font-family: 'Source Serif 4', serif;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--navy);
	line-height: 1.2;
	margin: 0;
}

.study-sub-header .study-investigator {
	font-size: 0.85rem;
	color: var(--text-medium);
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.data-explorer-header {
    /* background: white; */
    /* border: 1px solid var(--border-light); */
    border-radius: var(--radius-md);
    /* padding: 1rem 3rem; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    /* box-shadow: var(--shadow-soft); */
	width: fit-content;
	margin-top: 1rem;
}

.dataset-stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.stat-box {
    text-align: center;
}

.stat-number {
    display: block;
    font-family: 'Source Serif 4', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-divider {
    width: 1px;
    height: 30px;
    background: var(--border-light);
}

/* ============================================================
   INNER PAGE PANELS & SECTION STYLES
   ============================================================ */

/* Page section title (h3 inside main) */
main h3 {
	font-family: 'Source Serif 4', serif;
	font-size: 1.5rem;
	color: var(--navy);
	margin-bottom: 0.25rem;
}

main h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--navy);
	margin-bottom: 0.75rem;
}

/* Info panel / description box in wizard */
.info-panel {
	background: var(--warm-gray);
	border: 1px solid var(--border-light);
	border-left: 4px solid var(--primary-red);
	border-radius: var(--radius-md);
	padding: 1rem 1.25rem;
	font-size: 0.9rem;
	color: var(--text-medium);
	line-height: 1.7;
}

.info-panel strong {
	color: var(--navy);
}

/* Table wrapper */
.table-panel {
	background: white;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

.table {
	font-family: 'Inter', sans-serif !important;
	font-size: 0.88rem !important;
	color: var(--text-dark) !important;
	margin-bottom: 0 !important;
}

.table thead th {
	background: var(--navy-light) !important;
	color: rgba(255,255,255,0.9) !important;
	font-weight: 600 !important;
	font-size: 0.78rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	border: none !important;
	padding: 0.85rem 1rem !important;
}

.table tbody tr {
	border-bottom: 1px solid var(--border-light) !important;
	transition: background 0.15s ease !important;
}

.table tbody tr:hover {
	background: var(--warm-gray) !important;
}

.table tbody td {
	padding: 0.75rem 1rem !important;
	vertical-align: middle !important;
	border: none !important;
}

/* ============================================================
   CHART TYPE CARDS (wizard)
   ============================================================ */
.chart-type-card {
	background: white;
	border: 2px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: 1rem;
	cursor: pointer;
	transition: var(--transition);
	text-align: center;
	min-width: 120px;
}

.chart-type-card:hover {
	border-color: var(--primary-red);
	box-shadow: var(--shadow-soft);
	transform: translateY(-2px);
}

.chart-type-card.selected,
.chart-type-card.active {
	border-color: var(--primary-red);
	background: var(--primary-red-light);
}

/* ============================================================
   RADIO WITH IMAGE (wizard layout options)
   ============================================================ */
.radio-with-image {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	border: 2px solid var(--border-light);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: var(--transition);
	margin-right: 0.75rem;
}

.radio-with-image:hover {
	border-color: var(--primary-red);
}

.radio-with-image input[type="radio"]:checked + label,
.radio-with-image:has(input:checked) {
	/* parent highlight when checked */
}
.form-check-input:focus{
	outline: none !important;
}

/* ============================================================
   EDIT FORM (editStudyDetails)
   ============================================================ */
.edit-form-container {
	background: white;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: 2rem 2.5rem;
	box-shadow: var(--shadow-soft);
	max-width: 900px;
	margin: 0 auto;
}

.edit-form-container h3 {
	font-family: 'Source Serif 4', serif;
	color: var(--navy);
	margin-bottom: 0.25rem;
}

.edit-form-container .form-section-divider {
	border: none;
	border-top: 1px solid var(--border-light);
	margin: 1.5rem 0;
}

/* ============================================================
   FILE LIST (files.html)
   ============================================================ */
.files-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--border-light);
}

.files-header h3 {
	margin: 0;
}

.alert-warning{
	background-color: var(--cool-gray);
}

.alert-warning p{
	color: var(--text-dark);
}
/* ============================================================
   GRAPH GRID (graphs.html)
   ============================================================ */

/* Individual graph container */


/* ============================================================
   FOOTER
   ============================================================ */
footer {
	background: var(--navy);
	color: rgba(255, 255, 255, 0.7);
	padding: 3rem 5%;
}

.footer-content {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 2rem;
}

.footer-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.footer-links {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

footer a,
.footer-links a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.3s ease;
}

.footer-links a:hover { color: white; }

/* ============================================================
   SCROLLBAR HIDE UTILITY
   ============================================================ */
/* .scrollbar-hidden::-webkit-scrollbar { display: none; }
.scrollbar-hidden { -ms-overflow-style: none; scrollbar-width: none; } */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
	.study-sub-header .study-name { font-size: 1.1rem; }
	.graphs { grid-template-columns: 1fr; }

	.site-navbar-links {
		gap: 1rem;
	}
}

@media screen and (max-width: 750px) {
	.header {
		flex-direction: column;
		padding: unset;
		gap: 12px;
	}
}