/* Acadivia admissions portal — shared styles.
   Palette: teal #0F4C5C, amber #E09F3E, off-white #F6F4EF.
   Logical properties only, so the layout flips with dir="rtl". */

:root {
	--ad-teal: #0f4c5c;
	--ad-teal-dark: #0a3540;
	--ad-amber: #e09f3e;
	--ad-offwhite: #f6f4ef;
	--ad-border: #e3ded2;
	--ad-text: #22333b;
	--ad-muted: #6b7a80;
	--ad-green: #2e7d32;
	--ad-red: #b3402e;
	--ad-blue: #2b6ca3;
	--ad-radius: 12px;
}

.admissions-page {
	font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
	color: var(--ad-text);
	background: var(--ad-offwhite);
	padding-block: 0 3rem;
	min-height: 60vh;
}

.admissions-page h1,
.admissions-page h2,
.admissions-page h3 {
	color: var(--ad-teal);
	font-weight: 700;
}

/* ---------- hero ---------- */

.hero {
	background: linear-gradient(135deg, var(--ad-teal) 0%, var(--ad-teal-dark) 100%);
	color: #fff;
	padding-block: 3rem;
	padding-inline: 1.25rem;
	margin-block-end: 2rem;
}

.hero-inner {
	max-width: 1080px;
	margin-inline: auto;
}

.hero-kicker {
	color: #f4cd85; /* lightened amber: passes contrast on teal at 700 weight */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-block-end: 0.5rem;
}

.hero-title,
/* scoped deeper than the generic .admissions-page h1 teal rule (0,1,1 beats 0,1,0) */
.admissions-page .hero .hero-title {
	color: #fff;
	font-size: clamp(1.5rem, 3.6vw, 2.35rem);
	margin-block-end: 0.5rem;
	/* when the headline wraps, fill both rows evenly instead of orphaning one word */
	text-wrap: balance;
}

.hero-subtitle {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.05rem;
	margin-block-end: 1.25rem;
}

.btn-hero {
	background: var(--ad-amber);
	border-color: var(--ad-amber);
	color: #22333b;
	font-weight: 700;
	min-block-size: 48px;
	padding-inline: 1.75rem;
}

.btn-hero:hover {
	background: #c98b30;
	border-color: #c98b30;
	color: #22333b;
}

.program-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin-block-start: 1.5rem;
}

.program-card {
	background: rgba(255, 255, 255, 0.97);
	border: 1px solid var(--ad-border);
	border-radius: var(--ad-radius);
	padding: 1.25rem;
}

.program-card h3 {
	margin-block-end: 0.25rem;
}

.program-description {
	color: var(--ad-muted);
	font-size: 0.92rem;
}

.program-meta {
	color: var(--ad-muted);
	font-size: 0.88rem;
	margin-block-end: 0.75rem;
}

/* ---------- generic cards / sections ---------- */

.admissions-page .card {
	border: 1px solid var(--ad-border);
	border-radius: var(--ad-radius);
	background: #fff;
	padding: 1.25rem;
	box-shadow: none;
}

.home-section {
	max-width: 1080px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	margin-block-end: 2.5rem;
}

.home-section h2 {
	margin-block-end: 1rem;
	font-size: 1.4rem;
}

.section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.announcement-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

.announcements-full {
	max-width: 1080px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.page-hero {
	max-width: 1080px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	padding-block: 2rem 1rem;
}

.page-hero h1 {
	margin-block-end: 0.25rem;
}

.hero-subtitle,
.hero .hero-subtitle {
	color: inherit;
}

.page-hero .hero-subtitle {
	color: var(--ad-muted);
}

/* ---------- badges ---------- */

.badge {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	background: var(--ad-offwhite);
	border: 1px solid var(--ad-border);
	color: var(--ad-text);
}

.badge-type {
	background: #fdf3e3;
	border-color: var(--ad-amber);
	color: #8a5d1c;
}

.status-requested,
.status-pending {
	background: #fdf3e3;
	border-color: var(--ad-amber);
	color: #8a5d1c;
}

.status-submitted {
	background: #e7f0f2;
	border-color: var(--ad-teal);
	color: var(--ad-teal);
}

.status-under-review {
	background: #e8f0f8;
	border-color: var(--ad-blue);
	color: var(--ad-blue);
}

.status-approved,
.status-admitted {
	background: #e8f3e9;
	border-color: var(--ad-green);
	color: var(--ad-green);
}

.status-rejected {
	background: #f9e8e4;
	border-color: var(--ad-red);
	color: var(--ad-red);
}

/* ---------- shared row/lane primitives (My Applications, My Space) ----------
   Rows on surfaces, not boxes: hairline separators, fixed lanes for the status
   dot and trailing meta so vertical lines align across rows. */

.row-list {
	display: flex;
	flex-direction: column;
}

.app-row,
.space-row {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding-block: 0.85rem;
	border-block-end: 1px solid var(--ad-border);
	color: inherit;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.45;
}

.app-row:first-child,
.space-row:first-child {
	padding-block-start: 0.25rem;
}

.app-row:hover .app-row-title,
.space-row:hover .space-row-title {
	color: var(--ad-teal);
}

.status-dot {
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--ad-border);
}

.status-applied {
	background: var(--ad-amber);
}

.status-under-review {
	background: var(--ad-blue);
}

.status-waiting-list {
	background: var(--ad-amber-dark);
}

.status-approved,
.status-admitted {
	background: var(--ad-green);
}

.status-rejected {
	background: var(--ad-red);
}

.status-requested {
	background: var(--ad-amber);
}

.app-row-main,
.space-row-main {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-inline-size: 0;
	flex: 1;
}

.app-row-title,
.space-row-title {
	font-weight: 600;
	color: var(--ad-text);
}

.app-row-meta,
.space-row-meta {
	color: var(--ad-muted);
	font-size: 13px;
}

.app-row-side {
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 0.1rem;
	flex-shrink: 0;
}

.app-row-status {
	font-weight: 600;
	color: var(--ad-teal);
	font-size: 13px;
}

.app-row-date {
	color: var(--ad-muted);
	font-size: 13px;
}

.space-row-action {
	color: var(--ad-teal);
	font-weight: 600;
	font-size: 13px;
	flex-shrink: 0;
}

.note-dot.unread {
	background: var(--ad-amber);
}

.quiet-count {
	color: var(--ad-muted);
	font-weight: 400;
	font-size: 1rem;
}

.positive-note {
	color: var(--ad-green);
	font-weight: 600;
}

.empty-note {
	color: var(--ad-muted);
}

.view-all {
	color: var(--ad-teal);
	font-weight: 600;
	font-size: 0.9rem;
	display: inline-block;
	margin-block-start: 0.5rem;
}

.back-home {
	margin-block-start: 1.5rem;
}

/* ---------- my space layout ---------- */

.space-grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}

.space-group-title {
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ad-muted);
	font-weight: 700;
	margin-block-end: 0.5rem;
}

/* ---------- announcements ---------- */

.announcement-card {
	display: block;
	color: inherit;
	transition: border-color 0.15s ease;
}

.announcement-card:hover {
	border-color: var(--ad-teal);
	text-decoration: none;
}

.announcement-card h3 {
	margin-block: 0.25rem 0.4rem;
}

.announcement-date {
	color: #8a5d1c; /* amber darkened for WCAG-safe contrast on white cards */
	font-size: 0.82rem;
	font-weight: 600;
	margin-block-end: 0.15rem;
}

.announcement-excerpt {
	color: var(--ad-muted);
	font-size: 0.92rem;
	margin-block-end: 0;
}

/* ---------- requests pages ---------- */

.request-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 0.85rem;
	color: inherit;
}

.request-card:hover {
	border-color: var(--ad-teal);
	text-decoration: none;
}

.request-card-main h3 {
	margin-block-end: 0.2rem;
	font-size: 1.05rem;
}

.request-card-meta {
	color: var(--ad-muted);
	font-size: 0.85rem;
	margin-block-end: 0;
}

.request-card-side {
	text-align: end;
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 0.35rem;
}

.request-date {
	color: #8a5d1c; /* matches announcement-date contrast fix */
	font-size: 0.8rem;
}

.request-detail {
	max-width: 860px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.back-link {
	display: inline-block;
	color: var(--ad-teal);
	font-weight: 600;
	margin-block-end: 0.85rem;
}

.request-header {
	margin-block-end: 1.25rem;
}

.request-header-main {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-block-end: 0.5rem;
}

.request-header-main h2 {
	margin-block-end: 0;
	font-size: 1.3rem;
}

.request-description,
.request-meta {
	color: var(--ad-muted);
}

.review-notes {
	background: var(--ad-offwhite);
	border-inline-start: 3px solid var(--ad-amber);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	margin-block-start: 0.75rem;
}

.review-notes p {
	margin-block-end: 0;
}

.answer-field {
	inline-size: 100%;
	border: 1px solid var(--ad-border);
	border-radius: 8px;
	padding: 0.75rem;
	margin-block-end: 0.85rem;
	font: inherit;
}

.upload-list h3 {
	margin-block-end: 0.85rem;
}

.upload-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-block-end: 0.75rem;
	padding: 1rem;
}

.upload-row-main strong {
	color: var(--ad-teal);
}

.row-description {
	color: var(--ad-muted);
	font-size: 0.88rem;
	margin-block: 0.15rem;
}

.upload-row-main .badge {
	margin-block-start: 0.35rem;
}

.upload-row-actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
}

.detail-actions {
	display: flex;
	gap: 0.75rem;
	margin-block-start: 1.25rem;
}

.action-status {
	color: var(--ad-teal);
	font-weight: 600;
	margin-block-start: 0.75rem;
}

.action-btn {
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.admissions-page .btn-primary {
	background: var(--ad-teal);
	border-color: var(--ad-teal);
	color: #fff;
}

.admissions-page .btn-primary:hover {
	background: var(--ad-teal-dark);
	border-color: var(--ad-teal-dark);
	color: #fff;
}

.admissions-page .btn-secondary {
	background: #fff;
	border-color: var(--ad-teal);
	color: var(--ad-teal);
}

.admissions-page .btn-secondary:hover {
	background: var(--ad-offwhite);
	color: var(--ad-teal-dark);
	border-color: var(--ad-teal-dark);
}

.admissions-page .btn-danger {
	background: #fff;
	border-color: var(--ad-red);
	color: var(--ad-red);
}

.empty-state {
	text-align: center;
	color: var(--ad-muted);
}

/* ---------- hero round groups (multiple open admissions) ---------- */

.round-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	margin-block-start: 1.5rem;
}

.round-group {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--ad-radius);
	padding: 1.25rem;
}

.round-group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-block-end: 1rem;
}

.round-chip {
	background: var(--ad-amber);
	color: #22333b;
	font-weight: 700;
	font-size: 0.9rem;
	border-radius: 999px;
	padding: 0.25rem 0.9rem;
}

.round-deadline {
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.9rem;
	font-weight: 600;
}

.round-group .hero-actions {
	margin-block-end: 0.5rem;
}

.badge-round {
	margin-block-end: 0.4rem;
	background: #e7f0f2;
	border-color: var(--ad-teal);
	color: var(--ad-teal);
}

/* ---------- desktop ---------- */

@media (min-width: 768px) {
	.round-grid {
		grid-template-columns: 1fr;
	}

	.program-grid {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	}

	.space-grid {
		grid-template-columns: 1fr 1fr;
	}

	.announcement-grid {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
}