@font-face {
	font-family: 'TradeGothic-BoldCondTwenty';
	src: url('../fonts/TradeGothic-BoldCondTwenty.eot');
	src: url('../fonts/TradeGothic-BoldCondTwenty.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/TradeGothic-BoldCondTwenty.woff2') format('woff2'),
	     url('../fonts/TradeGothic-BoldCondTwenty.woff') format('woff'),
	     url('../fonts/TradeGothic-BoldCondTwenty.ttf') format('truetype'),
	     url('../fonts/TradeGothic-BoldCondTwenty.svg#TradeGothic-BoldCondTwenty') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

html, body { overflow-x: hidden; max-width: 100%; }
body {font-family:'Source Sans Pro',sans-serif; padding-top:65px;}
.page-body { margin-bottom: 25vh; }

/* Global typography hierarchy */
h1, h2, h3, h4, h5, h6 {font-family:'TradeGothic-BoldCondTwenty', 'Arial Narrow', Arial, sans-serif;}
#nav-holder a {font-family:'TradeGothic-BoldCondTwenty', 'Arial Narrow', Arial, sans-serif;}
@media(hover:none) {
	.btn-outline-success:hover {
		background-color:inherit !important;
		color:var(--bs-btn-color) !important;
	}
}
.form-loader {position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(255,255,255,0.8);display:flex;justify-content:center;align-items:center;z-index:9999;}
.form-loader .loader-icon {width:25vw;max-width:100px;}
.form-loader .loader-icon path {fill:#ccc;}

img {max-width: 100%; height: auto; }

.siteHeader {position:fixed;left:0;right:0;top:0;height:60px;overflow:hidden;border:none;z-index:999;}
.siteHeader .container-fluid {padding-left:0;padding-right:0;}
.logo {width:128px;background: #000;position:absolute;left:0;padding-bottom:1px;}
.logo img {max-height:59px;}

.icon-24x24 {width:24px;height:24px;margin-bottom:3px;}

#nav-holder {padding-left: 148px; background: rgba(0, 0, 0, 0.95); width: 100%; display: table; }
.nav {display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none;text-transform: uppercase;}
#nav-holder .nav {float: left; font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: 1.5px; }
#nav-holder .nav ul {margin: 0; padding: 0; list-style: none; }
ul li, ol li {list-style-position: inside; }
#nav-holder .nav ul li {float: left; margin-bottom: 0; }

#nav-holder .nav ul li a {color: #fff; text-decoration: none; padding: 16px 10px; display: block; position: relative; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }

.header-login, .header-search, .mobileNav-close, .header-hamburger {float:left;position:relative;min-width:56px;max-width:56px;}
.header-login .button {position: relative; padding: 14px 0 2px; text-align: center; cursor: pointer; min-height: 60px; display: block; color: #fff; font-size: 1.125rem; }
.header-login a {text-decoration: none;}

.header-right {float:right;height:60px;}
.header-login {border:0;background-color:transparent;}

header a .svg-icon use, header .button .svg-icon use {fill:none;stroke:#FFFFFF;stroke-width:1;stroke-miterlimit:10;}
header a:hover .svg-icon use, header .button:hover .svg-icon use {stroke:#F9D222;stroke-width:1.5;}
/* Settings icon is fill-based — override the stroke rules */
header a .svg-icon use[href="#menu-settings"],
header .button .svg-icon use[href="#menu-settings"] {fill:#FFFFFF;stroke:none;}
header a:hover .svg-icon use[href="#menu-settings"],
header .button:hover .svg-icon use[href="#menu-settings"] {fill:#F9D222;stroke:none;}
.header-login.active .button .svg-icon use[href="#menu-settings"] {fill:#F9D222;stroke:none;}

/* Menu Styles */
#desktopNav ul li {display: inline-block;}
#desktopNav ul li a {display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; padding: 18px 16px;}
#desktopNav ul li a .svg-icon {flex-shrink: 0;}
#desktopNav ul li a:hover {color: #F9D222;}
#desktopNav ul li.active > a {color: #F9D222;}
#desktopNav ul li.active > a .svg-icon use {stroke: #F9D222; stroke-width: 1.5;}
#desktopNav ul li.active > a .svg-icon use[href="#menu-settings"] {fill: #F9D222; stroke: none;}

.user-name { font-size: 0.875rem; color: #fff; }
.user-role { font-size: 0.7em; color: #F9D222;}

/* Mobile: Hide menu text, show icons only */
@media (max-width: 768px) {
	#desktopNav ul li a {padding: 18px 12px;}
	#desktopNav ul li a .menu-text {display:none;}
}

/* Desktop: Show both icons and text */
@media (min-width: 769px) {
	#desktopNav ul li a .menu-text {display:inline;margin-left:3px;}
}

.lfa-yellow {color: #FFD028;}
.btn {border-radius:0 !important;transition: all 0.3s ease;font-family:'TradeGothic-BoldCondTwenty', 'Arial Narrow', Arial, sans-serif;}
.form-control {border-radius:0 !important;}

@keyframes rotating {
	from {-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}
	to {-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}
}
.rotating {-webkit-animation:rotating 2s linear infinite;-moz-animation:rotating 2s linear infinite;-ms-animation:rotating 2s linear infinite;-o-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite;}

/* ── Alerts ──────────────────────────────────────────────────────────── */
.l-alert {
	padding: 12px 16px; margin-bottom: 16px; border-left: 3px solid; font-size: 0.8125rem;
	position: relative; overflow: hidden;
	transition: opacity .4s ease, max-height .4s ease, margin .4s ease, padding .4s ease;
}
.l-alert.l-alert-hiding {
	opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;
}
.l-alert-success { background: rgba(94,191,58,.08); border-color: #5EBF3A; color: #5EBF3A; }
.l-alert-error   { background: rgba(191,58,58,.08); border-color: #BF3A3A; color: #BF3A3A; }

/* progress bar */
.l-alert-bar {
	position: absolute; bottom: 0; left: 0; height: 2px; width: 100%;
	transform-origin: left center;
	transition: transform linear;
}
.l-alert-success .l-alert-bar { background: #5EBF3A; }
.l-alert-error   .l-alert-bar { background: #BF3A3A; }

@media (prefers-color-scheme: light) {
	.l-alert-success { color: #3A9E1A; border-color: #3A9E1A; }
	.l-alert-success .l-alert-bar { background: #3A9E1A; }
}

/* ═══ SHARED ERROR BLOCK ══════════════════════════════════════════════ */
.err-block {
	border: 1px solid var(--c-border, #1E1E1E);
	background: var(--c-surface, #0F0F0F);
	padding: 32px 24px; text-align: left;
}
.err-eyebrow {
	position: relative; z-index: 1;
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 0.625rem; letter-spacing: 1px; text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: 10px;
}
.err-title {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 2.25rem; letter-spacing: 2px; color: #BF3A3A;
	line-height: 1; margin-bottom: 16px;
}
.err-msg {
	font-size: 0.875rem; color: var(--c-text, #C8BFB0);
	line-height: 1.6; margin-bottom: 24px;
}
.err-msg p { margin-bottom: 6px; }
.err-back-btn {
	display: inline-block;
	font-family: 'Source Code Pro', monospace; font-size: 0.6875rem;
	letter-spacing: 1.5px; text-transform: uppercase;
	padding: 10px 20px; border: 1px solid var(--c-border-md, #2E2E2E);
	color: var(--c-text, #C8BFB0); background: transparent;
	text-decoration: none; transition: border-color .2s, color .2s;
}
.err-back-btn:hover { border-color: #C19909; color: #C19909; }

/* ═══ SHARED PAGE VARIABLES ════════════════════════════════════════════
   All body.page-* classes inherit these tokens.
   ════════════════════════════════════════════════════════════════════ */

body[class*="page-"] {
	background: #080808;
	color: #C8BFB0;
	font-family: 'Source Sans Pro', Georgia, serif;
	--c-surface:   #0F0F0F;
	--c-border:    #1E1E1E;
	--c-border-md: #2E2E2E;
	--c-muted:     #888888;
	--c-text:      #C8BFB0;
	--c-text-str:  #EDE5D5;
	--c-yd:        rgba(255,208,40,.08);
	--c-green:     #5EBF3A;
	--c-gd:        rgba(94,191,58,.12);
	--c-chd:       #0C0B09; /* card header bg — always dark regardless of theme */
}

@media (prefers-color-scheme: light) {
	:root { color-scheme: light; }
	body[class*="page-"] {
		background: #F5F0E6;
		color: #3A3028;
		--c-surface:   #FDFAF4;
		--c-border:    #D8CFBA;
		--c-border-md: #C4B89E;
		--c-muted:     #6a6050;
		--c-text:      #3A3028;
		--c-text-str:  #1A1410;
		--c-yd:        rgba(255,208,40,.12);
		--c-green:     #3A9E1A;
		--c-gd:        rgba(58,158,26,.10);
		--c-chd:       #0C0B09;
	}
	/* ── Yellow accent text → readable on light backgrounds ── */
	.settings-title, .home-title, .dash-title,
	.home-hero { color: #FFD028; text-shadow: 0 0 1px black; }
	.lfa-yellow { color: #7A5500; }
}

/* ── Shared page wrappers ────────────────────────────────────────────── */
.settings-wrap, .home-wrap, .dash-wrap { text-align: left; padding: 0 2px; }

/* ── Shared page title ───────────────────────────────────────────────── */
.settings-title, .home-title, .dash-title {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 2.5rem; letter-spacing: 2px; color: #FFD028; text-shadow: 0 0 var(--c-text-str);
	line-height: 1; margin-bottom: 4px;
}
@media (min-width: 576px) {
	.settings-title, .home-title, .dash-title { font-size: 3.25rem; }
}

/* ── Shared page subtitle ────────────────────────────────────────────── */
.settings-sub, .home-sub, .dash-sub {
	font-size: 0.625rem; color: var(--c-muted);
	letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px;
}
.dash-sub { font-size: 1rem; font-weight: bold; color: var(--c-text-str);}

/* ═══ SETTINGS PAGE ═════════════════════════════════════════════════════ */

/* ── Setting blocks ──────────────────────────────────────────────────── */
.set-block {
	border: 1px solid var(--c-border); margin-bottom: 16px;
}

/* Block header — dark clapperboard stripe */
.set-hd {
	position: relative; overflow: hidden;
	background: var(--c-chd); padding: 6px 16px;
}
.set-hd::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(
		-55deg,
		transparent 0, transparent 6px,
		rgba(255,208,40,.07) 6px, rgba(255,208,40,.07) 12px
	);
}
.set-hd-label {
	position: relative; z-index: 1;
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 1.25rem; letter-spacing: 2px; color: #EDE5D5;
}

/* Info rows */
.set-rows { list-style: none; margin: 0; padding: 0; }
.set-row {
	display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
	padding: 11px 16px; border-bottom: 1px solid var(--c-border);
	background: var(--c-surface);
}
.set-row:last-child { border-bottom: none; }
.set-key {
	font-family: 'Source Code Pro', monospace; font-size: 0.625rem; letter-spacing: 1.5px;
	text-transform: uppercase; color: var(--c-muted); flex-shrink: 0; min-width: 120px;
}
.set-val {
	font-size: 0.875rem; color: var(--c-text-str); flex: 1;
}
.set-val a { color: var(--c-text-str); text-decoration: none; transition: color .2s; }
.set-val a:hover { color: #FFD028; }

/* Body area */
.set-body { padding: 16px; background: var(--c-surface); }
.set-desc {
	font-size: 0.8125rem; color: var(--c-text); margin-bottom: 16px; line-height: 1.6;
}

/* Action button */
.set-btn {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.875rem; letter-spacing: 1.5px;
	text-transform: uppercase; padding: 10px 20px;
	background: #FFD028; color: #0A0A0A; border: none; outline: none;
	cursor: pointer; transition: background .2s;
}
.set-btn:hover { background: #FFE060; }

/* ═══ HOME PAGE ═════════════════════════════════════════════════════════ */

/* ── Unauthenticated welcome ─────────────────────────────────────────── */
.home-welcome {
	border: 1px solid var(--c-border); background: var(--c-surface);
	padding: 40px 28px; text-align: left; position: relative; overflow: hidden;
}
.home-welcome::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(
		-55deg,
		transparent 0, transparent 8px,
		rgba(255,208,40,.04) 8px, rgba(255,208,40,.04) 16px
	);
}
.home-eyebrow {
	position: relative; z-index: 1;
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 0.625rem; letter-spacing: 1px; text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: 10px;
}
.home-hero {
	position: relative; z-index: 1;
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 4rem; letter-spacing: 4px; color: #FFD028;
	line-height: 1; margin-bottom: 20px;
}
@media (min-width: 480px) { .home-hero { font-size: 5rem; } }

.home-tagline {
	position: relative; z-index: 1;
	font-size: 0.875rem; color: var(--c-text); line-height: 1.6;
	max-width: 420px; margin-bottom: 28px;
	padding-top: 20px; border-top: 1px solid var(--c-border);
}

/* ── Access denied ───────────────────────────────────────────────────── */
.home-denied {
	border: 1px solid var(--c-border); background: var(--c-surface); padding: 32px 24px;
}
.home-denied-title {
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif;
	font-size: 2.25rem; letter-spacing: 2px; color: #BF3A3A;
	line-height: 1; margin-bottom: 16px;
}
.home-denied-msg { font-size: 0.875rem; color: var(--c-text); line-height: 1.6; margin-bottom: 24px; }
.home-denied-msg p { margin-bottom: 6px; }
.home-denied-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Shared buttons ──────────────────────────────────────────────────── */
.home-login-btn, .home-dashboard-btn {
	display: inline-block;
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.9375rem; letter-spacing: 1.5px;
	text-transform: uppercase; padding: 12px 24px;
	background: #FFD028; color: #0A0A0A; border: 1px solid #FFD028;
	text-decoration: none; transition: background .2s, border-color .2s;
}
.home-login-btn:hover, .home-dashboard-btn:hover { background: #FFE060; border-color: #FFE060; color: #0A0A0A; }

.home-logout-btn {
	display: inline-block;
	font-family: 'TradeGothic-BoldCondTwenty', sans-serif; font-size: 0.9375rem; letter-spacing: 1.5px;
	text-transform: uppercase; padding: 12px 24px;
	background: transparent; color: var(--c-muted);
	border: 1px solid var(--c-border-md); text-decoration: none;
	transition: border-color .2s, color .2s;
}
.home-logout-btn:hover { border-color: var(--c-muted); color: var(--c-text-str); }

/* ── Actions row ─────────────────────────────────────────────────────── */
.home-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* ═══ DASHBOARD PAGE ════════════════════════════════════════════════════ */

/* ═══ GLOBAL: THEME + FONT SIZE OVERRIDES ════════════════════════════════
   Applied via html[data-theme] and html[data-fsize] set from cookies.
   These rules have higher specificity than the per-page @media blocks.
   ════════════════════════════════════════════════════════════════════════ */

/* Dark theme — overrides light media query */
html[data-theme="dark"] body { background: #080808 !important; color: #C8BFB0 !important; }
html[data-theme="dark"] body[class*="page-"] {
	--c-surface:   #0F0F0F;
	--c-border:    #1E1E1E;
	--c-border-md: #2E2E2E;
	--c-muted:     #888888;
	--c-text:      #C8BFB0;
	--c-text-str:  #EDE5D5;
	--c-yd:        rgba(255,208,40,.08);
	--c-green:     #5EBF3A;
	--c-gd:        rgba(94,191,58,.12);
	--c-chd:       #0C0B09;
}

/* Light theme — overrides dark default */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] body { background: #F5F0E6 !important; color: #3A3028 !important; }
html[data-theme="light"] body[class*="page-"] {
	--c-surface:   #FDFAF4;
	--c-border:    #D8CFBA;
	--c-border-md: #C4B89E;
	--c-muted:     #6a6050;
	--c-text:      #3A3028;
	--c-text-str:  #1A1410;
	--c-yd:        rgba(255,208,40,.12);
	--c-green:     #3A9E1A;
	--c-gd:        rgba(58,158,26,.10);
	--c-chd:       #0C0B09;
}
html[data-theme="light"] body[class*="page-"] .form-check-input:not(:checked) {
	--bs-form-check-bg: transparent;
	background: transparent !important;
}
/* ── Yellow accent text ── */
html[data-theme="light"] .settings-title,
html[data-theme="light"] .home-title,
html[data-theme="light"] .dash-title,
html[data-theme="light"] .home-hero { color: #FFD028; text-shadow: 0 0 1px black; }
html[data-theme="light"] .lfa-yellow { color: #FFD028; text-shadow: 0 0 1px black; }

/* ── Font size: scale html root so all rem values cascade ────────────
   Default browser = 16px (100%). Never use the 62.5% trick — it
   breaks user accessibility preferences. Modes stored in cookie and
   applied via html[data-fsize] before first paint (see layout.php).
   ─────────────────────────────────────────────────────────────────── */
:root { --base-font-size: 1rem; }

html[data-fsize="sm"] { font-size: 87.5%;  } /* ~14px */
html[data-fsize="md"] { font-size: 100%;   } /* 16px — same as browser default */
html[data-fsize="lg"] { font-size: 112.5%; } /* ~18px */
html[data-fsize="xl"] { font-size: 125%;   } /* 20px */
html[data-fsize="hg"] { font-size: 150%;   } /* 24px */

/* ── Settings: appearance option buttons ─────────────────────────────── */
.set-opts { display: flex; gap: 4px; flex-wrap: wrap; align-items: baseline; }
.set-opt-btn {
	background: var(--c-surface); border: 1px solid var(--c-border-md);
	color: var(--c-muted); padding: 5px 14px;
	font-family: 'Source Code Pro', monospace; font-size: 0.6875rem; letter-spacing: 1px;
	cursor: pointer; line-height: 1.5; transition: background .15s, color .15s, border-color .15s;
}
.set-opt-btn:hover { border-color: var(--c-muted); color: var(--c-text); }
.set-opt-btn.active { background: #FFD028; border-color: #FFD028; color: #0A0A0A; }
/* Font-size preview: each button renders at its resulting size */
.set-fsize-btn[data-val="sm"] { font-size: calc(0.6875rem * 0.875); }
.set-fsize-btn[data-val="lg"] { font-size: calc(0.6875rem * 1.125); }
.set-fsize-btn[data-val="xl"] { font-size: calc(0.6875rem * 1.25); }
.set-fsize-btn[data-val="hg"] { font-size: calc(0.6875rem * 1.5); }
.set-opt-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
.set-opt-row:last-child { border-bottom: none; }
.set-opt-label { font-family: 'Source Code Pro', monospace; font-size: 0.625rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-muted); min-width: 80px; flex-shrink: 0; }