/* ==========================================================================
   EOSTRE V2 Redesign - Layout & Theme Foundation
   Loaded after Simulor (app.min.css) + style.css to override defaults.
   Themes are driven by body classes:
     body.theme-normal              -> Normal member (bright / EOSTRE blue)
     body.theme-elite.elite-light   -> Elite member, light theme (default)
     body.theme-elite.elite-dark    -> Elite member, dark theme
   ========================================================================== */

/* Invert Bootstrap table-striped: start with white (even rows shaded) */
.table-striped tbody tr:nth-of-type(odd) {
	background-color: transparent;
}
.table-striped tbody tr:nth-of-type(even) {
	background-color: rgba(0, 0, 0, 0.02);
}

/* --------------------------------------------------------------------------
   1. Fonts
   NOTE: Inter and Playfair Display are NOT bundled locally yet.
   Until the font files are added to web/fonts/, the stacks below fall back
   Inter (body/UI) and Playfair Display (elite titles) are self-hosted as
   variable woff2 fonts in web/fonts/. Falls back to Rubik / system fonts.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter/Inter-Variable.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/playfair/PlayfairDisplay-Variable.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Design tokens (defaults = Normal theme)
   -------------------------------------------------------------------------- */
:root {
	/* Brand */
	--eo-blue: #1254E8;
	--eo-blue-dark: #2C56C8;
	--eo-gold: #C8A063;
	--eo-gold-dark: #A67C3D;
	--eo-navy: #172E68;
	--eo-violet: #8C4DFF;
	--eo-cta-from: #3C6BF8;
	--eo-cta-to: #8C4DFF;

	/* Surfaces */
	--eo-bg: #F4F6FB;
	--eo-surface: #FFFFFF;
	--eo-surface-2: #F7F8FC;
	--eo-border: #E6E9F2;
	--eo-shadow: 0 4px 16px rgba(23, 46, 104, 0.06);
	--eo-shadow-lg: 0 8px 28px rgba(23, 46, 104, 0.10);

	/* Text */
	--eo-text: #0B1736;
	--eo-text-muted: #6B7280;
	--eo-text-on-accent: #FFFFFF;

	/* State */
	--eo-success: #0DBF7F;
	--eo-danger: #F53C3C;
	--eo-warning: #F5A623;

	/* Accent helpers (gold reserved for elite) */
	--eo-accent: var(--eo-blue);
	--eo-accent-soft: #EAF0FF;
	--eo-accent-dark: #2C56C8;
	--eo-accent-rgb: 60, 107, 248;

	/* Focus rings - theme-aware, so components never hard-code the accent */
	--eo-focus-ring: 0 0 0 0.2rem rgba(var(--eo-accent-rgb), 0.25);
	--eo-focus-ring-sm: 0 0 0 2px rgba(var(--eo-accent-rgb), 0.25);

	/* Shape & rhythm (8pt system) */
	--eo-radius-sm: 8px;
	--eo-radius: 12px;
	--eo-radius-lg: 16px;
	--eo-radius-pill: 999px;
	--eo-space: 8px;

	/* Typography */
	--eo-font-body: 'Inter', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--eo-font-display: 'Inter', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Layout */
	--eo-sidebar-w: 260px;
	--eo-sidebar-w-collapsed: 70px;
	--eo-topbar-h: 60px;
}

/* --------------------------------------------------------------------------
   3. Elite theme - LIGHT (default elite)
   -------------------------------------------------------------------------- */
body.theme-elite,
body.theme-elite.elite-light {
	--eo-gold-soft: #E7E1D6;
	--eo-charcoal: #1B1B1B;

	--eo-bg: #FAF8F4;
	--eo-surface: #FFFFFF;
	--eo-surface-2: #F7F4ED;
	--eo-border: #ECE7DC;
	--eo-shadow: 0 4px 18px rgba(27, 27, 27, 0.06);
	--eo-shadow-lg: 0 10px 30px rgba(27, 27, 27, 0.10);

	--eo-text: #1B1B1B;
	--eo-text-muted: #8B8579;
	--eo-text-on-accent: #FFFFFF;

	--eo-accent: var(--eo-gold);
	--eo-accent-soft: #F3EEE3;
	--eo-accent-dark: #A67C3D;
	--eo-accent-rgb: 200, 160, 99;
	--eo-cta-from: #C8A063;
	--eo-cta-to: #A67C3D;

	/* Gold needs more opacity than blue to read as a focus ring */
	--eo-focus-ring: 0 0 0 0.2rem rgba(var(--eo-accent-rgb), 0.4);

	--eo-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* --------------------------------------------------------------------------
   4. Elite theme - DARK
   -------------------------------------------------------------------------- */
body.theme-elite.elite-dark {
	--eo-bg: #FAF8F4;            /* content area stays warm ivory in mockup */
	--eo-surface: #FFFFFF;
	--eo-surface-2: #F7F4ED;
	--eo-border: #ECE7DC;
	--eo-text: #1B1B1B;
	--eo-text-muted: #8B8579;

	/* Dark navigation shell */
	--eo-nav-bg: #161311;
	--eo-nav-surface: #211C18;
	--eo-nav-border: #3A322A;
	--eo-nav-text: #E9E2D4;
	--eo-nav-text-muted: #9C9486;
}

/* Elite light nav defaults (used when not dark) */
body.theme-elite {
	--eo-nav-bg: #FFFFFF;
	--eo-nav-surface: #FFFFFF;
	--eo-nav-border: #ECE7DC;
	--eo-nav-text: #1B1B1B;
	--eo-nav-text-muted: #8B8579;
}

/* Normal nav defaults */
body.theme-normal {
	--eo-nav-bg: #FFFFFF;
	--eo-nav-surface: #FFFFFF;
	--eo-nav-border: #E6E9F2;
	--eo-nav-text: #0B1736;
	--eo-nav-text-muted: #6B7280;
}

/* --------------------------------------------------------------------------
   5. Override enlarged / collapsed sidebar behavior
      The Simulor "enlarged" class collapses sidebar to icons-only; we always
      want the full sidebar visible regardless of any JS toggling.
   -------------------------------------------------------------------------- */
.left-side-menu {
	width: var(--eo-sidebar-w) !important;
	z-index: 10 !important;
	background-color: var(--eo-nav-bg) !important;
	display: flex;
	flex-direction: column;
	padding-top: 16px !important;
	overflow: visible !important;
}

@media (max-width: 767.98px) {
	.left-side-menu {
		display: none;
	}
	body.sidebar-enable .left-side-menu {
		display: flex;
	}
}

.left-side-menu > div:not(.eo-sidebar-footer) {
	flex: 1 1 auto;
	overflow-y: auto;
	min-height: 0;
}

/* Sidebar logo: EOSTRE + Elite Member */
.left-side-menu .logo.eo-sidebar-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1rem 0.5rem 0.5rem;
	text-decoration: none;
}

.left-side-menu .logo.eo-sidebar-logo .eo-logo-text,
.left-side-menu .logo.eo-sidebar-logo .eo-logo-subtext {
	display: block;
}

.eo-sidebar-logo .eo-logo-text {
	font-family: var(--eo-font-display);
	color: var(--eo-text);
	font-weight: 400;
	letter-spacing: 0.4em;
	font-size: 1.4rem;
	padding-left: 0.4em;
	line-height: 1;
}

.eo-sidebar-logo .eo-logo-subtext {
	font-family: var(--eo-font-display);
	color: #C8A063;
	font-weight: 500;
	letter-spacing: 0.08em;
	font-size: 0.85rem;
	margin-top: 0.25rem;
	line-height: 1;
}

body.theme-elite.elite-dark .eo-sidebar-logo .eo-logo-text {
	color: var(--eo-text-on-accent);
}

@media (max-width: 1024px) {
	.left-side-menu .logo.eo-sidebar-logo {
		display: none !important;
	}
}

.eo-sidebar-footer {
	flex-shrink: 0;
	padding: 10px 8px;
	background-color: var(--eo-nav-bg);
	font-size: 0.75rem;
	line-height: 1.3;
}

body.enlarged .left-side-menu {
	width: var(--eo-sidebar-w-collapsed) !important;
}

body.enlarged .eo-sidebar-footer {
	display: none;
}

body.enlarged .left-side-menu #sidebar-menu > ul > li > a span {
	display: inline !important;
}

body.enlarged .left-side-menu #sidebar-menu .menu-arrow,
body.enlarged .left-side-menu #sidebar-menu .badge,
body.enlarged .left-side-menu #sidebar-menu .menu-title {
	display: none !important;
}

body.enlarged .left-side-menu #sidebar-menu > ul > li:hover > a {
	width: auto !important;
}

body.enlarged .content-page {
	margin-left: var(--eo-sidebar-w-collapsed) !important;
}

body.enlarged .navbar-custom {
	left: 0 !important;
}

body.enlarged .footer {
	left: var(--eo-sidebar-w-collapsed) !important;
}

/* Ensure content page always respects the sidebar width */
.content-page {
	margin-left: var(--eo-sidebar-w);
}

.navbar-custom {
	left: var(--eo-sidebar-w);
}

@media (max-width: 1024px) {
	.navbar-custom {
		left: 0;
		padding: 0 10px;
	}
	.content-page {
		margin-left: 0;
		padding: 0 10px;
	}
	.button-menu-mobile {
		display: inline-block !important;
	}
}

@media (min-width: 1025px) {
	.button-menu-mobile {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   6. Base
   -------------------------------------------------------------------------- */
body {
	background-color: var(--eo-surface) !important;
	color: var(--eo-text);
	padding-bottom: 0 !important;
	font-family: var(--eo-font-body);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--eo-text);
}

a {
	color: var(--eo-accent);
}

/* --------------------------------------------------------------------------
   7. Layout shell - sidebar
   -------------------------------------------------------------------------- */
.left-side-menu {
	width: var(--eo-sidebar-w);
	background-color: var(--eo-nav-bg);
	border-right: 1px solid var(--eo-nav-border);
	box-shadow: none;
}

.left-side-menu .logo {
	display: block;
	padding: 18px 16px 8px;
}

#sidebar-menu .menu-title {
	color: var(--eo-nav-text-muted);
	letter-spacing: 0.08em;
	font-size: 11px;
	text-transform: uppercase;
	padding: 12px 20px 8px;
}

#sidebar-menu > ul > li > a {
	color: var(--eo-nav-text);
	font-size: 14px;
	border-radius: var(--eo-radius-sm);
	margin: 2px 12px;
	padding: 10px 14px;
	transition: background-color .2s ease, color .2s ease;
}

#sidebar-menu > ul > li > a > i {
	font-size: 16px;
}

#sidebar-menu > ul > li > a:hover {
	background-color: var(--eo-accent-soft);
	color: var(--eo-accent);
}

#sidebar-menu > ul > li.mm-active > a,
#sidebar-menu > ul > li > a.active,
.metismenu #sidebar-menu > ul > li > a[aria-expanded="true"] {
	color: var(--eo-text-on-accent) !important;
	background-image: linear-gradient(90deg, var(--eo-accent), #7EB5FF);
	box-shadow: var(--eo-shadow);
}

body.theme-elite #sidebar-menu > ul > li.mm-active > a,
body.theme-elite #sidebar-menu > ul > li > a.active,
body.theme-elite .metismenu #sidebar-menu > ul > li > a[aria-expanded="true"] {
	color: var(--eo-text-on-accent) !important;
	background-image: linear-gradient(90deg, var(--eo-cta-from), var(--eo-cta-to)) !important;
	box-shadow: var(--eo-shadow) !important;
}

body.theme-elite.elite-dark #sidebar-menu > ul > li.mm-active > a,
body.theme-elite.elite-dark #sidebar-menu > ul > li > a.active,
body.theme-elite.elite-dark .metismenu #sidebar-menu > ul > li > a[aria-expanded="true"] {
	color: #161311 !important;
}

.nav-second-level li a,
.nav-third-level li a {
	color: var(--eo-nav-text-muted);
	font-size: 13px;
}

.nav-second-level li a:hover,
.nav-third-level li a:hover {
	color: var(--eo-accent);
}

/* Elite dark sidebar text/icons */
body.theme-elite.elite-dark #sidebar-menu > ul > li > a:hover {
	background-color: var(--eo-nav-surface);
	color: var(--eo-gold);
}

body.theme-elite .nav-second-level li > a.active,
body.theme-elite .nav-third-level li > a.active {
	color: var(--eo-accent) !important;
}
body.theme-elite.elite-dark #sidebar-menu > ul > li.mm-active > a,
body.theme-elite.elite-dark #sidebar-menu > ul > li > a.active {
	background-image: linear-gradient(90deg, var(--eo-cta-from), var(--eo-cta-to));
	color: #161311;
}

/* --------------------------------------------------------------------------
   8. Layout shell - topbar
   -------------------------------------------------------------------------- */
/* Color variations for elite dark theme are further below */

body.theme-elite.elite-dark .navbar-custom .topnav-menu .nav-link {
	color: var(--eo-text);
}
body.theme-elite.elite-dark .navbar-custom .noti-icon {
	color: var(--eo-text);
}
body.theme-elite.elite-dark .navbar-custom .pro-user-name {
	color: var(--eo-text);
}

/* Theme toggle button (added in topbar for elite) */
.eo-theme-toggle {
	color: var(--eo-nav-text-muted);
	cursor: pointer;
}

.eo-theme-toggle:hover {
	color: var(--eo-accent);
}

#eoThemeToggle .eo-icon-dark,
body.theme-elite.elite-light #eoThemeToggle .eo-icon-light,
body.theme-elite.elite-dark #eoThemeToggle .eo-icon-dark {
	display: none;
}

body.theme-elite.elite-light #eoThemeToggle .eo-icon-dark,
body.theme-elite.elite-dark #eoThemeToggle .eo-icon-light {
	display: inline-block;
}

/* --------------------------------------------------------------------------
   9. Content & footer
   -------------------------------------------------------------------------- */
.main-content,
#wrapper {
	min-height: 100vh;
}

#wrapper {
	display: flex;
	flex-direction: column;
}

.content-page {
	background-color: var(--eo-bg);
	flex: 1;
}

.content-footer {
	border-top: 1px solid var(--eo-border);
	background-color: var(--eo-surface);
	padding-top: 14px;
	padding-bottom: 14px;
}

.content-footer .footer-container a {
	color: var(--eo-text-muted);
	margin-left: 14px;
}

.content-footer .footer-container a:hover {
	color: var(--eo-accent);
}

/* Display headings (elite uses serif) */
.eo-page-title,
.content-page h1.page-title,
.content-page > .content h4.page-title {
	font-family: var(--eo-font-display);
	font-size: 1.6rem;
	font-weight: 700;
}

/* Tighten spacing between page title and welcome text */
.page-title-box {
	padding-top: 0.5rem;
	padding-bottom: 0.25rem;
	margin: 0.5rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.page-title-box .page-title {
	line-height: 1.3 !important;
}

.page-title-box .eo-welcome-sub {
	margin-top: 2px;
	margin-bottom: 0;
	font-size: 0.88rem;
	flex-basis: 100%;
}

/* Elite greeting */
body.theme-elite .eo-elite-greeting,
body.theme-elite.elite-dark .eo-elite-greeting {
	font-family: var(--eo-font-display);
	color: #1B1B1B;
	font-size: 2.1rem;
	font-weight: 400;
	margin: 0;
	letter-spacing: 0.01em;
}

body.theme-elite .eo-elite-greeting-name,
body.theme-elite.elite-dark .eo-elite-greeting-name {
	color: var(--eo-accent);
}

body.theme-elite .eo-elite-secure-login,
body.theme-elite.elite-dark .eo-elite-secure-login {
	margin-top: 8px;
	margin-bottom: 0;
	font-size: 0.82rem;
	color: #6B7280;
}

body.theme-elite .eo-elite-secure-divider,
body.theme-elite.elite-dark .eo-elite-secure-divider {
	margin: 0 6px;
	color: var(--eo-gold);
}

body.theme-elite .eo-elite-last-login,
body.theme-elite.elite-dark .eo-elite-last-login {
	color: #1B1B1B;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   9.5 Loading spinners - blue for normal, gold for elite
   -------------------------------------------------------------------------- */
body.theme-normal .text-cyan {
	color: var(--eo-accent) !important;
}

body.theme-elite .text-cyan {
	color: var(--eo-accent) !important;
}

body.theme-elite.elite-dark .text-cyan {
	color: var(--eo-accent) !important;
}

body.theme-elite .spinner-border.text-cyan {
	border-right-color: var(--eo-accent) !important;
}

body.theme-normal .text-primary {
	color: var(--eo-accent) !important;
}

body.theme-elite .text-primary {
	color: var(--eo-accent) !important;
}

/* --------------------------------------------------------------------------
   10. Topbar with lower part of login_bg.jpeg as background
   -------------------------------------------------------------------------- */
.navbar-custom {
	background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url('../img/login_bg_normal.png') center -600px / max(100%, 1600px) auto no-repeat #F4F6FB;
	border-bottom: none;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	min-height: var(--eo-topbar-h);
}

body.theme-elite .navbar-custom {
	background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('../img/login_bg_elite.png') center -600px / max(100%, 1600px) auto no-repeat #FAF8F2 !important;
}

body.theme-elite.elite-dark .navbar-custom {
	background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('../img/login_bg_elite.png') center -600px / max(100%, 1600px) auto no-repeat #161311 !important;
}

.navbar-custom .topnav-menu .nav-link,
.navbar-custom .noti-icon,
.navbar-custom .pro-user-name {
	color: var(--eo-text);
}

.navbar-custom .button-menu-mobile,
.navbar-custom .button-menu-mobile.disable-btn {
	color: var(--eo-text);
	display: inline-block;
}

.navbar-custom .dropdown-menu {
	background-color: var(--eo-surface);
}

.navbar-custom .dropdown-menu .dropdown-item {
	color: var(--eo-text);
}

/* Elite light: white footer */
body.theme-elite:not(.elite-dark) .footer-area {
	background-color: var(--eo-surface);
	border-top: 1px solid #E6E9F2;
}

body.theme-elite:not(.elite-dark) .footer-area p,
body.theme-elite:not(.elite-dark) .footer-area h4 {
	color: #0B1736;
}

body.theme-elite:not(.elite-dark) .footer-area a,
body.theme-elite:not(.elite-dark) .content-footer a {
	color: #6B7280;
}

body.theme-elite:not(.elite-dark) .footer-area a:hover,
body.theme-elite:not(.elite-dark) .content-footer a:hover {
	color: var(--eo-accent);
}

/* Elite dark: charcoal footer (matches sidebar) */
body.theme-elite.elite-dark .footer-area,
body.theme-elite.elite-dark body .footer-area,
body.theme-elite.elite-dark .content-footer {
	background-color: #161311 !important;
	color: var(--eo-text-on-accent) !important;
}

body.theme-elite.elite-dark .footer-area p,
body.theme-elite.elite-dark .footer-area h4 {
	color: var(--eo-text-on-accent);
}

body.theme-elite.elite-dark .footer-area a,
body.theme-elite.elite-dark .content-footer a {
	color: var(--eo-text-on-accent);
}

body.theme-elite.elite-dark .footer-area a:hover,
body.theme-elite.elite-dark .content-footer a:hover {
	color: var(--eo-accent);
}

/* --------------------------------------------------------------------------
   11. Login layout
   -------------------------------------------------------------------------- */
.eo-login-body {
	background-color: var(--eo-bg);
	min-height: 100vh;
}

.eo-login-card {
	background: var(--eo-surface);
	border: 1px solid var(--eo-border);
	border-radius: var(--eo-radius-lg);
	box-shadow: var(--eo-shadow-lg);
}

.eo-login-brand {
	font-family: var(--eo-font-display);
	color: var(--eo-text);
}

.eo-login-logo {
	font-family: var(--eo-font-display);
	color: var(--eo-text);
	font-weight: 400;
	letter-spacing: 0.4em;
	font-size: 1.6rem;
	text-align: center;
	display: block;
	width: 100%;
	padding-left: 0.4em;
}

body.theme-elite .eo-login-brand {
	color: var(--eo-accent) !important;
	font-weight: 500;
	letter-spacing: 0.08em;
	font-size: 1.4rem;
	text-align: center;
	display: block;
	width: 100%;
}

/* Login footer: light surface instead of the default black */
.eo-login-body .footer-area {
	background-color: var(--eo-surface);
	border-top: 1px solid var(--eo-border);
}

.eo-login-body .footer-area p,
.eo-login-body .footer-area h4 {
	color: var(--eo-text);
}

.eo-login-body .footer-area a {
	color: var(--eo-text-muted);
}

.eo-login-body .footer-area a:hover {
	color: var(--eo-accent);
}

.eo-login-body .footer-area .line {
	border-color: var(--eo-border) !important;
}

/* Login body in dark mode: black footer + dark card surface */
body.theme-elite.elite-dark.eo-login-body .footer-area,
body.theme-elite.elite-dark.eo-login-body .footer-area p,
body.theme-elite.elite-dark.eo-login-body .footer-area h4 {
	color: var(--eo-text-on-accent);
	border-top-color: #2A2520;
}

body.theme-elite.elite-dark.eo-login-body .footer-area a {
	color: var(--eo-accent);
}

body.theme-elite.elite-dark.eo-login-body .footer-area a:hover {
	color: var(--eo-text-on-accent);
}

body.theme-elite.elite-dark.eo-login-body .footer-area .line {
	border-color: #2A2520 !important;
}

/* Login body dark mode: welcome text becomes light grey */
body.theme-elite.elite-dark.eo-login-body .text-muted {
	color: #9C9486 !important;
}

/* Login body dark mode: login button uses the gold gradient */
body.theme-elite.elite-dark.eo-login-body .btn-cta {
	background-image: linear-gradient(90deg, var(--eo-cta-from), var(--eo-cta-to));
	color: var(--eo-text-on-accent);
}

body.theme-elite.elite-dark.eo-login-body .btn-cta:hover,
body.theme-elite.elite-dark.eo-login-body .btn-cta:focus {
	background-image: linear-gradient(90deg, var(--eo-cta-from), var(--eo-cta-to));
	color: var(--eo-text-on-accent);
}