/* SmartPMS — Aurora topbar (replaces sidebar layout) */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

body.aurora { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #F4F6FA; }
body.aurora .c-body, body.aurora .c-main, body.aurora .container-fluid { background: transparent; }

/* === Band 1 (brand bar) === */
.aurora-band1 {
	position: relative;
	background: linear-gradient(135deg, #0B1230 0%, #1A1E3F 60%, #131A38 100%);
	color: #E8ECFF;
	padding: 6px max(20px, env(safe-area-inset-right)) 6px max(20px, env(safe-area-inset-left));
	display: flex; align-items: center; gap: 16px;
	min-height: 64px;
	z-index: 30;
	border-bottom: 1px solid rgba(255,255,255,0.04);
}
.aurora-band1::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(400px circle at 5% 50%, rgba(252, 60, 58, 0.18), transparent 60%),
		radial-gradient(500px circle at 50% 50%, rgba(14, 163, 216, 0.14), transparent 60%),
		radial-gradient(400px circle at 95% 50%, rgba(77, 189, 116, 0.14), transparent 60%);
	filter: blur(12px);
}
.aurora-band1 > * { position: relative; z-index: 1; }

.aurora-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
.aurora-brand img { height: 52px; width: auto; display: block; }
.aurora-brand .brand-tag { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(232,236,255,0.55); border-left: 1px solid rgba(232,236,255,0.18); padding-left: 12px; line-height: 1.4; max-width: 130px; }

.aurora-band1-spacer { flex: 1; }

.aurora-band1-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Pill buttons in band 1 */
.aurora-pill, .aurora-icon-btn {
	display: inline-flex; align-items: center; gap: 8px;
	height: 38px; padding: 0 14px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 999px;
	color: #FFFFFF; font-family: inherit;
	font-size: 13px; font-weight: 600;
	text-decoration: none; cursor: pointer;
	transition: background 200ms ease, border-color 200ms ease, transform 180ms ease;
	white-space: nowrap;
}
.aurora-pill:hover, .aurora-icon-btn:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); color: #FFFFFF; }
.aurora-pill:active, .aurora-icon-btn:active { transform: translateY(1px); }
.aurora-pill i, .aurora-icon-btn i { font-size: 14px; line-height: 1; }
.aurora-icon-btn { width: 38px; padding: 0; justify-content: center; position: relative; }

.aurora-pill .caret, .aurora-dd-toggle .caret { display: inline-block; margin-left: 2px; opacity: 0.7; font-size: 10px; }

/* Variants */
.aurora-pill.is-account { background: rgba(14,163,216,0.18); border-color: rgba(14,163,216,0.45); }
.aurora-pill.is-account:hover { background: rgba(14,163,216,0.28); border-color: rgba(14,163,216,0.6); }
.aurora-pill.is-finyear { background: rgba(252,60,58,0.16); border-color: rgba(252,60,58,0.40); }
.aurora-pill.is-finyear:hover { background: rgba(252,60,58,0.24); border-color: rgba(252,60,58,0.55); }
.aurora-pill.is-admin { background: linear-gradient(135deg, #FF9432 0%, #FC3C3A 100%); border: 0; box-shadow: 0 6px 20px -6px rgba(252,60,58,0.55); }
.aurora-pill.is-admin:hover { box-shadow: 0 10px 28px -8px rgba(252,60,58,0.7); }
.aurora-pill.is-logout { background: transparent; border-color: rgba(255,255,255,0.14); }

.aurora-greeting { font-size: 13px; color: rgba(232,236,255,0.85); padding: 0 6px; white-space: nowrap; }
.aurora-greeting strong { color: #FFFFFF; font-weight: 700; }

/* Badge on notification button */
.aurora-icon-btn .badge {
	position: absolute; top: -4px; right: -4px;
	min-width: 18px; height: 18px; padding: 0 5px;
	background: #FC3C3A; color: #FFFFFF;
	border-radius: 999px;
	font-size: 10px; font-weight: 800;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 2px #0B1230;
}

/* === Dropdown panels (CSS-driven, opens on click via :focus-within or .is-open class) === */
.aurora-dd { position: relative; }
.aurora-dd-panel {
	position: absolute; top: calc(100% + 8px); right: 0;
	min-width: 240px; max-width: 360px;
	background: rgba(11,18,48,0.95);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 14px;
	padding: 8px;
	box-shadow: 0 24px 48px -16px rgba(0,0,0,0.55);
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	z-index: 40;
	display: none;
}
.aurora-dd.is-open > .aurora-dd-panel { display: block; }
.aurora-dd-item {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px; border-radius: 9px;
	color: #E8ECFF; text-decoration: none; font-size: 13px; font-weight: 500;
	transition: background 180ms ease, color 180ms ease;
}
.aurora-dd-item:hover { background: rgba(255,255,255,0.06); color: #FFFFFF; }
.aurora-dd-item i { width: 16px; font-size: 14px; color: rgba(232,236,255,0.55); flex-shrink: 0; }
.aurora-dd-item:hover i { color: #FFFFFF; }
.aurora-dd-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 6px 4px; }
.aurora-dd-header { padding: 8px 12px 4px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(232,236,255,0.45); font-weight: 700; }

/* === Admin Modal (overlay) === */
.aurora-admin-modal {
	position: fixed; inset: 0;
	background: rgba(6, 11, 35, 0.78);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	z-index: 1000;
	display: none;
	align-items: flex-start; justify-content: center;
	padding: 4vh 24px;
	overflow-y: auto;
}
.aurora-dd.is-open > .aurora-admin-modal { display: flex; }
.aurora-admin-card {
	width: 100%; max-width: 1280px;
	max-height: 92vh;
	background: linear-gradient(180deg, #131A38 0%, #0B1230 100%);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 20px;
	box-shadow: 0 40px 80px -20px rgba(0,0,0,0.75);
	display: flex; flex-direction: column;
	overflow: hidden;
	color: #E8ECFF;
}
.aurora-admin-header {
	flex-shrink: 0;
	padding: 18px 22px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	display: flex; align-items: center; gap: 14px;
}
.aurora-admin-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: #FFFFFF; white-space: nowrap; }
.aurora-admin-search { flex: 1; position: relative; }
.aurora-admin-search input {
	width: 100%; height: 42px;
	padding: 0 14px 0 42px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 12px;
	color: #FFFFFF; font-size: 14px; font-family: inherit;
	transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.aurora-admin-search input::placeholder { color: rgba(232,236,255,0.4); }
.aurora-admin-search input:focus { outline: none; border-color: #0EA3D8; background: rgba(14,163,216,0.06); box-shadow: 0 0 0 4px rgba(14,163,216,0.18); }
.aurora-admin-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: rgba(232,236,255,0.5); pointer-events: none; }
.aurora-admin-close {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 12px;
	color: #FFFFFF;
	cursor: pointer;
	font-family: inherit; font-size: 18px;
	transition: background 200ms ease, border-color 200ms ease;
}
.aurora-admin-close:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }
.aurora-admin-close svg { width: 18px; height: 18px; }

/* Mobile-first: sections stack as plain block elements. */
.aurora-admin-body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 14px;
	display: block;
}
.aurora-admin-body::-webkit-scrollbar { width: 10px; }
.aurora-admin-body::-webkit-scrollbar-track { background: transparent; }
.aurora-admin-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.aurora-admin-body::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.20); background-clip: padding-box; }

.aurora-admin-group {
	display: block;
	box-sizing: border-box;
	width: 100%;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 14px;
	padding: 12px;
	margin: 0 0 12px 0;
}
.aurora-admin-group-h {
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(232,236,255,0.6); font-weight: 700;
	padding: 2px 4px 10px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	margin-bottom: 8px;
}
.aurora-admin-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 4px;
}
.aurora-admin-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 12px 14px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 12px;
	color: #E8ECFF;
	text-decoration: none;
	font-size: 13px; font-weight: 600; text-align: left; line-height: 1.3;
	min-height: 0; min-width: 0;
	transition: transform 180ms ease, background 200ms ease, border-color 200ms ease;
}
.aurora-admin-item:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: #FFFFFF; transform: translateY(-1px); }
.aurora-admin-item i { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; color: rgba(232,236,255,0.85); }
.aurora-admin-item:hover i { color: #FFFFFF; }
.aurora-admin-item span { flex: 1; min-width: 0; display: block; word-break: break-word; }

.aurora-admin-empty {
	padding: 40px 20px;
	text-align: center;
	color: rgba(232,236,255,0.5);
	font-size: 14px;
}

/* Desktop: 12-col masonry-ish grid. Each .aurora-admin-group declares its own
   span via inline style="--aurora-span: N" (computed in theme/index.php using
   the TenderFlow row-packing algorithm: initial span by link count, then any
   leftover columns redistributed across the row so every row sums to 12). */
@media (min-width: 1201px) {
	.aurora-admin-body {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 18px;
		align-content: start;
		padding: 20px 22px;
	}
	.aurora-admin-group {
		grid-column: span var(--aurora-span, 4);
		margin: 0;
		padding: 14px;
	}
	.aurora-admin-group-h { padding: 2px 4px 12px; margin-bottom: 12px; }
	/* Tile grid inside each section: auto-fill so wider sections naturally
	   pack more tile columns (span-4 sections get ~2 tiles wide, span-8
	   ~4 wide, span-12 ~6 wide) without per-span overrides. */
	.aurora-admin-grid {
		grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
		gap: 8px;
	}
	.aurora-admin-item {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		gap: 8px;
		padding: 14px 10px;
		font-size: 11px;
		min-height: 84px;
	}
	.aurora-admin-item i { font-size: 18px; width: auto; }
	.aurora-admin-item span { text-align: center; }
}

/* Phone-only: full-screen modal */
@media (max-width: 640px) {
	.aurora-admin-modal { padding: 0; }
	.aurora-admin-card { max-height: 100vh; max-height: 100dvh; border-radius: 0; height: 100%; }
	.aurora-admin-header { padding: 14px 16px; gap: 10px; }
	.aurora-admin-title { display: none; }
}
.aurora-admin-col { display: flex; flex-direction: column; gap: 2px; }
.aurora-admin-group-title {
	font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
	color: rgba(232,236,255,0.45); font-weight: 700;
	padding: 10px 10px 6px; margin-top: 4px;
	border-top: 1px solid rgba(255,255,255,0.06);
}
.aurora-admin-col > .aurora-admin-group-title:first-child { margin-top: 0; padding-top: 4px; border-top: 0; }

/* === Band 2 (primary nav) === */
.aurora-band2 {
	position: relative;
	background: linear-gradient(180deg, rgba(11,18,48,0.96), rgba(11,18,48,0.92));
	border-bottom: 1px solid rgba(255,255,255,0.06);
	padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
	z-index: 20;
}
.aurora-nav { display: flex; align-items: center; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.aurora-nav::-webkit-scrollbar { display: none; }
.aurora-nav a {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 18px;
	color: rgba(232,236,255,0.7);
	font-size: 14px; font-weight: 600; text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
	white-space: nowrap;
}
.aurora-nav a:hover { color: #FFFFFF; background: rgba(255,255,255,0.03); }
.aurora-nav a.is-active { color: #FFFFFF; border-bottom-color: #FF9432; }
.aurora-nav a i { font-size: 14px; opacity: 0.85; }

/* === Breadcrumb (sapphire band, ties into the dark topbar) === */
.aurora-breadcrumb {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 16px max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left));
	font-size: 13px;
	background: linear-gradient(135deg, #1A2A52 0%, #2C3F7A 55%, #1F2C5C 100%);
	color: rgba(232, 236, 255, 0.65);
}
.aurora-breadcrumb a { color: #BAE6FD; text-decoration: none; font-weight: 600; }
.aurora-breadcrumb a:hover { color: #FFFFFF; }
.aurora-breadcrumb .sep { color: rgba(232, 236, 255, 0.35); font-size: 12px; }
.aurora-breadcrumb .current { color: #FFFFFF; font-weight: 600; }

/* === Content wrapper === */
body.aurora .c-wrapper { background: transparent; }
body.aurora .c-main { padding-top: 12px; padding-bottom: 32px; }
body.aurora .c-footer { background: transparent; border-top: 1px solid #E2E8F0; color: #64748B; padding: 16px 24px; }

/* === Single-scroll layout =================================================
   CoreUI ships two competing scroll contexts: the body (because of header
   bands + a 100vh .c-wrapper underneath) AND the .c-body inside the wrapper.
   That double-scroll causes the inner scroll to "stick" at its ends while
   the outer scroll still has runway, producing the rubber-band feel where
   the header has to be dragged back up. Cap the page at viewport height,
   shrink the wrapper to whatever's left after the header bands, and let
   .c-body be the only scroll container — content + footer fit in one
   continuous scroll, header bands stay put at the top. */
body.aurora.c-app {
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}
body.aurora .c-wrapper:not(.c-wrapper-fluid) {
	height: auto;
	-ms-flex: 1 1 0;
	flex: 1 1 0;
	min-height: 0;
}

/* === Mobile === */
.aurora-mobile-toggle { display: none; }
@media (max-width: 900px) {
	.aurora-band1 { gap: 10px; padding: 6px 14px; min-height: 60px; flex-wrap: wrap; }
	.aurora-brand img { height: 44px; }
	.aurora-brand .brand-tag { display: none; }
	.aurora-greeting { display: none; }
	.aurora-pill.is-account { max-width: 180px; }
	.aurora-pill.is-account span.label, .aurora-pill.is-finyear span.label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.aurora-admin-panel { min-width: 92vw; grid-template-columns: 1fr; max-height: 70vh; overflow-y: auto; }
	.aurora-dd-panel { right: 0; left: auto; }
	.aurora-band2 { padding: 0 4px; }
	.aurora-nav a { padding: 12px 14px; font-size: 13px; }
	.aurora-mobile-toggle { display: inline-flex; }
}
@media (max-width: 600px) {
	.aurora-pill.is-account, .aurora-pill.is-finyear, .aurora-pill.is-logout { display: none; }
	.aurora-icon-btn, .aurora-pill { height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}