/* Styles for login marquee, role buttons, and page alerts */

/* Role buttons: keep on single line and appearance */
.role-btn { flex: 0 0 auto; white-space: nowrap; }

#roleButtonsWrap {
	display: block;
	width: 100%;
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap; /* ensure inner doesn't collapse to multiple lines */
}
#roleButtons {
	display: flex !important;
 	gap: .35rem;
 	flex-wrap: nowrap !important; /* default to single-line */
 	min-width: 0 !important;
 	white-space: nowrap !important;
 	align-items: center;
}

/* Strong overrides to prevent buttons from being forced to full width by other CSS */
.role-btn {
	display: inline-flex !important;
	align-items: center;
 	justify-content: center;
 	width: auto !important;
 	white-space: nowrap !important;
 	flex: 0 1 auto !important; /* allow slight shrinking if needed */
 	padding: .35rem .6rem !important; /* smaller buttons */
 	font-size: .86rem !important; /* smaller labels */
 	border-radius: .35rem !important;
}
.role-btn.active { background: #fff; color: #212529; border-color: #fff; }

/* Per-role color variants */
.role-btn[data-role="admin"] { background: #0d6efd; color: #fff; border-color: #0d6efd; }
.role-btn[data-role="admin"]:hover, .role-btn[data-role="admin"]:focus { background: #0b5ed7; border-color: #0b5ed7; }

.role-btn[data-role="teacher"] { background: #198754; color: #fff; border-color: #198754; }
.role-btn[data-role="teacher"]:hover, .role-btn[data-role="teacher"]:focus { background: #157347; border-color: #157347; }

.role-btn[data-role="student"] { background: #ffc107; color: #1f2937; border-color: #ffc107; }
.role-btn[data-role="student"]:hover, .role-btn[data-role="student"]:focus { background: #e0a800; border-color: #e0a800; }

.role-btn[data-role="parent"] { background: #0dcaf0; color: #04233b; border-color: #0dcaf0; }
.role-btn[data-role="parent"]:hover, .role-btn[data-role="parent"]:focus { background: #0bb8da; border-color: #0bb8da; }

.role-btn[data-role="headteacher"] { background: #6610f2; color: #fff; border-color: #6610f2; }
.role-btn[data-role="headteacher"]:hover, .role-btn[data-role="headteacher"]:focus { background: #520dcf; border-color: #520dcf; }

.role-btn[data-role="director"] { background: #dc3545; color: #fff; border-color: #dc3545; }
.role-btn[data-role="director"]:hover, .role-btn[data-role="director"]:focus { background: #c82333; border-color: #c82333; }

.role-btn[data-role="librarian"] { background: #6c757d; color: #fff; border-color: #6c757d; }
.role-btn[data-role="librarian"]:hover, .role-btn[data-role="librarian"]:focus { background: #5a6268; border-color: #5a6268; }

.role-btn[data-role="nurse"] { background: #20c997; color: #04233b; border-color: #20c997; }
.role-btn[data-role="nurse"]:hover, .role-btn[data-role="nurse"]:focus { background: #1aa47f; border-color: #1aa47f; }

.role-btn[data-role="deputy"] { background: #fd7e14; color: #04233b; border-color: #fd7e14; }
.role-btn[data-role="deputy"]:hover, .role-btn[data-role="deputy"]:focus { background: #e06b0f; border-color: #e06b0f; }

.role-btn[data-role="bursar"] { background: #0f5132; color: #fff; border-color: #0f5132; }
.role-btn[data-role="bursar"]:hover, .role-btn[data-role="bursar"]:focus { background: #0b4227; border-color: #0b4227; }

.role-btn[data-role="developer"] { background: #6f42c1; color: #fff; border-color: #6f42c1; }
.role-btn[data-role="developer"]:hover, .role-btn[data-role="developer"]:focus { background: #5a339f; border-color: #5a339f; }

/* Page alert uniform style */
.page-alert { font-size: 1rem; padding: .65rem 1rem; border-radius: 6px; }

/* Marquee styles */
.marquee { position: relative; background: linear-gradient(90deg, rgba(13,110,253,0.08), rgba(108,117,125,0.02)); border: 1px solid rgba(0,0,0,0.04); padding: .5rem .5rem; border-radius: 8px; overflow: hidden; }
.marquee__viewport { overflow: hidden; }
.marquee { --marquee-duration: 60s; }
.marquee__inner { display: inline-block; white-space: nowrap; will-change: transform; animation: marquee-left var(--marquee-duration) linear infinite; }
.marquee__text { font-weight: 700; color: #0b5ed7; font-size: 1.05rem; margin-right: 2.5rem; }
/* Pin the marquee to the very top of the viewport and push page content down
	 so it never overlaps the site header or form inputs. We use a CSS variable
	 --marquee-offset which is set via JS to the marquee's rendered height. */
#welcomeMarquee {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1050; /* above most site content but below any modal/backdrop if needed */
	padding: .5rem 1rem;
	box-shadow: 0 2px 6px rgba(0,0,0,0.06);
	background: linear-gradient(90deg, rgba(13,110,253,0.06), rgba(255,255,255,0.75));
}
/* Default fallback offset in case JS doesn't run */
:root { --marquee-offset: 56px; }
body.has-marquee { padding-top: var(--marquee-offset); }

@media (max-width:576px) {
	:root { --marquee-offset: 64px; }
}
.marquee:focus { outline: 3px solid rgba(11,94,215,0.16); outline-offset: 2px; }
.marquee__inner:hover, .marquee:focus-within { animation-play-state: paused; }

@keyframes marquee-left { 0% { transform: translateX(100%);} 100% { transform: translateX(-100%);} }
@media (prefers-reduced-motion: reduce) { .marquee__inner { animation: none; display:block; text-align:center; } }

/* Dismiss button */
.marquee__dismiss { position: absolute; right: .45rem; top: .35rem; background: transparent; border: none; color: rgba(0,0,0,0.45); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.marquee__dismiss:focus { outline: 2px solid rgba(11,94,215,0.16); }

/* Chevron indicators for overflow */
.marquee__chev { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.85); border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #0b5ed7; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.12); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.marquee__chev--left { left: 6px; }
.marquee__chev--right { right: 6px; }
.marquee.is-overflowing .marquee__chev { opacity: 1; pointer-events: auto; }

/* Responsive tweaks */
@media (max-width:576px) { .page-alert { font-size: .98rem; } .marquee__text { font-size: .98rem; } .marquee { --marquee-duration: 20s; } }

/* Ensure login inputs expand on small screens but are visually limited on large screens */
#loginForm input[type="text"], #loginForm input[type="password"], #loginForm input[type="email"] {
	width: 100%;
	max-width: 460px; /* prevents inputs from stretching too wide on desktop */
	box-sizing: border-box;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 767px) {
	/* On mobile keep full width inside the form padding */
	#loginForm input[type="text"], #loginForm input[type="password"], #loginForm input[type="email"] {
		max-width: none;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

@media (min-width: 992px) {
	/* On desktop allow buttons to stay on a single row without horizontal scroll */
	#roleButtons { flex-wrap: nowrap !important; }
	#roleButtonsWrap { overflow-x: hidden; }
}

@media (max-width: 575px) {
	/* On very small devices keep horizontal scroll for role buttons */
	#roleButtonsWrap { overflow-x: auto; }
	#roleButtons { flex-wrap: nowrap !important; }
	.role-btn { padding: .5rem .8rem !important; font-size: .92rem !important; }
}

/* Use horizontal scroll for tablet/phone sizes under 768px */
@media (max-width: 767px) {
	#roleButtonsWrap { overflow-x: auto; }
	#roleButtons { white-space: nowrap; }
}

/* Desktop: show all buttons and compact labels */
@media (min-width: 768px) {
	#roleButtonsWrap { overflow-x: hidden; }
	.role-btn { padding: .33rem .55rem !important; font-size: .85rem !important; }
}