/* Login-specific overrides for Tabler client theme */
 .tabler-login-page .card {
	border: 0;
}

 .tabler-login-page .card-body {
	padding: 2rem;
}

 .tabler-login-page .input-group-text {
	background: transparent;
	border-right: 0;
}

 .tabler-login-page .input-group .form-control {
	border-left: 0;
}

 .tabler-login-page .display-4 { margin-bottom: .5rem; }

 .tabler-login-page .card-footer a { color: #6c757d; }

 /* Slight shadow and rounded corners on desktop */
 @media (min-width: 768px) {
	 .tabler-login-page .card {
		 border-radius: 0.75rem;
		 box-shadow: 0 8px 24px rgba(12, 38, 63, 0.08);
	 }
 }

 /* Page background and branding */

 /* Gradient for login pages is controlled by the marker-driven rules below
	 (html.login-page / body.login-page). Remove direct/background rules
	 on .tabler-login-page here to avoid duplicate/overriding gradients. */

 .tabler-login-page .brand-logo {
	 max-height: 72px;
	 max-width: 220px;
	 object-fit: contain;
 }

 .tabler-login-page .brand-logo-text {
	 font-weight: 700;
	 font-size: 1.125rem;
	 color: #0c263f;
 }

 /* Show password button */
 .tabler-login-page .btn-show-password {
	 border-left: 0;
 }

 @media (max-width: 767.98px) {
	 .tabler-login-page .container-md { padding-top: 2rem; padding-bottom: 2rem; }
 }

 /* NOTE: removed duplicated .tabler-login-page background rules here so the
	`html.login-page` / `body.login-page` selectors later in this file are
	the single source of truth for full-viewport login gradients. */

 .tabler-login-page .hero-logo {
	 max-height: 96px;
	 width: auto;
	 display: inline-block;
 }

 /* Round the hero logo */
 .tabler-login-page .hero-logo { border-radius: 8px; }

 /* Remove hero logo rounding in explicit dark mode */
 body.theme-dark .tabler-login-page .hero-logo { border-radius: 0 !important; }

 /* Ensure the login container can position absolute children like the switcher */
 .tabler-login-page { position: relative; }

 /* Adjust the login row spacing specifically */
 .row.login {
	 /* remove percentage paddings that can push the footer beyond viewport */
	 padding-top: 0 !important;
	 padding-bottom: 0 !important;
 }

 /* Ensure any container-fluid used for footer doesn't add unexpected background or height in dark mode */
 body.theme-dark .container-fluid,
 body.theme-auto .container-fluid {
	 background: transparent !important;
	 padding-top: 0 !important;
	 padding-bottom: 0 !important;
	 margin-top: 0 !important;
 }

 /* Theme (light/dark/auto) backgrounds and variables */
 :root {
	 --login-bg-light: linear-gradient(180deg, #2162A3 0%, #ffffff 40%);
	 --login-bg-dark: linear-gradient(180deg, #2162A3 0%, #000000 30%);
	 --login-bg-overlay: rgba(6, 12, 23, 0.40);
 }

 /* Ensure html and body fill the viewport and don't show default margins which
	can reveal a different background color at the bottom of the page. Also
	ensure the login page container covers the full viewport so the background
	image/overlay isn't cut off. */
 html, body {
	 height: 100%;
	 margin: 0;
 }
 /* Scope the layout flex behavior to only the login page container.
	Previously body was made a flex container globally which caused
	layout regressions (tables/tbody/td widths) on inner pages. Moving
	the flex layout to the `.tabler-login-page` element confines the
	behavior to the login screens and leaves general pages untouched. */
 .tabler-login-page {
	 /* Make the login page a column flex container so footer
		(.container-fluid) can sit after the main login content without
		being pushed off-screen. */
	 display: flex;
	 flex-direction: column;
	 /* Allow the login container to grow and take available space while
		letting the footer remain visible at the bottom. Use a 90vh minimum
		to push content lower on the page so the footer is closer to the bottom. */
	 flex: 1 0 auto;
	 min-height: 90vh; /* lowered from full height to bring content down */
 }

 /* Light mode: default inner pages to solid white. The login page then
	overrides this with the gradient by targeting `.tabler-login-page`. */
 body.theme-light,
 html.theme-light {
	 background: #ffffff !important;
	 color-scheme: light;
 }
 /* Login page gradient (light) - more specific so it overrides the solid white */
 /* NOTE: login gradient for light mode is applied via the marker-driven
	selectors (`html.login-page` / `body.login-page`) below. Removing the
	per-`.tabler-login-page` rule to avoid duplication/conflicts. */

 /* Dark mode: default inner pages to solid black; login page overrides to use gradient+overlay */
 body.theme-dark,
 html.theme-dark {
	 background: #000000 !important;
	 color-scheme: dark;
 }
 /* Login page gradient (dark) - more specific so it overrides the solid black */
 /* NOTE: login gradient for dark mode is applied via the marker-driven
	selectors (`html.login-page` / `body.login-page`) below. Removing the
	per-`.tabler-login-page` rule to avoid duplication/conflicts. */
 /* Ensure the login container displays correctly on dark login pages */
 body.theme-dark .tabler-login-page { background: transparent !important; color: #e6eef8; }

 /* Full-viewport gradient for login pages when the runtime marker class is set
	(added by theme-login-marker.js). This ensures the gradient covers the
	entire viewport instead of being limited to the inner container. */
 html.login-page, body.login-page {
	 background-position: center center !important;
	 background-repeat: no-repeat !important;
	 background-attachment: fixed !important;
	 background-size: cover !important;
 }

 /* Light-mode: when login page is present, apply the login gradient to html/body
	so it covers the viewport (keeps previous gradient colors/overlay). */
 html.login-page.theme-light, body.login-page.theme-light,
 html.theme-light.login-page, body.theme-light.login-page {
	 /* Match provided computed light-mode properties so the gradient is full-viewport
		and uses scroll attachment (prevents a fixed overlay behavior). */
	 background-image: linear-gradient(rgb(33, 98, 163) 0%, rgb(255, 255, 255) 40%) !important;
	 background-color: rgba(0, 0, 0, 0) !important;
	 background-position: 50% 50% !important;
	 background-repeat: no-repeat !important;
	 background-size: cover !important;
	 background-attachment: scroll !important;
	 color-scheme: light;
 }

 /* Dark-mode: when login page is present, apply the dark gradient+overlay to html/body */
 /* Dark-mode login gradient: explicit gradient + overlay with high specificity
	to ensure it replaces the solid-black background on login pages. */
 html.login-page.theme-dark, body.login-page.theme-dark,
 html.theme-dark.login-page, body.theme-dark.login-page {
	 background-image: linear-gradient(180deg, #2162A3 0%, #000000 30%), linear-gradient(rgba(6,12,23,0.40), rgba(6,12,23,0.40)) !important;
	 background-position: center center !important;
	 background-size: cover !important;
	 background-repeat: no-repeat !important;
	 background-attachment: fixed !important;
	 background-blend-mode: multiply !important;
	 background-color: #000000 !important;
 }

 /* Make sure inner login container doesn't draw its own background over the body gradient */
 .tabler-login-page, .tabler-login-page .container, .tabler-login-page .container-md, .tabler-login-page .card {
	 background: transparent !important;
 }

 /* Prevent container elements from having their own background-image which
	would create a double/offset gradient inside the centered login card. */
 .tabler-login-page .container,
 .tabler-login-page .container-md,
 .tabler-login-page .container-fluid {
	 background-image: none !important;
	 background: transparent !important;
 }

 /* Remove the content-start padding on login pages so the body/html gradient
	aligns with the visible content and avoids a shifted/overlapping gradient
	inside the container. */
 .tabler-login-page .container-md.content-start {
	 padding-top: 0 !important;
 }

 /* Force opaque card on light-mode login pages. This override comes after
	the generic `.tabler-login-page` transparency rules so it wins the cascade
	and ensures the login form card is readable. */
 html.login-page.theme-light .tabler-login-page .card,
 body.login-page.theme-light .tabler-login-page .card,
 html.theme-light.login-page .tabler-login-page .card,
 body.theme-light.login-page .tabler-login-page .card {
	 background-color: #ffffff !important;
 }

 /* Auto respects OS preference */
 @media (prefers-color-scheme: dark) {
	 /* Auto mode: default inner pages to solid black when OS prefers dark;
		login page uses dark gradient+overlay. */
	 body.theme-auto,
	 html.theme-auto {
		 background: #000000 !important;
		 color-scheme: dark;
	 }
	 /* NOTE: auto-mode login gradients are applied via the marker-driven
		`html.login-page` / `body.login-page` selectors below. Removed
		per-`.tabler-login-page` rules to avoid conflicts. */
	 body.theme-auto .tabler-login-page .hero-logo { border-radius: 0 !important; }
 }
 @media (prefers-color-scheme: light) {
	 /* Auto mode when OS prefers light: default inner pages to white; login keeps gradient. */
	 body.theme-auto,
	 html.theme-auto {
		 background: #ffffff !important;
		 color-scheme: light;
	 }
	  /* NOTE: when auto prefers light, the login gradient is applied using
		  the marker-driven selectors later in the file. */
 }

 /* Mode switch UI */
 .theme-switcher {
	 position: absolute;
	 right: 16px;
	 top: 16px;
	 z-index: 60;
 }
 .theme-switcher .btn { margin-left: 6px; }
 .theme-switcher .btn.active { background-color: rgba(0,0,0,0.08); }

 /* Header placement: when the switcher is used inside the site header make it
	participate in normal flow (float right) rather than absolute positioned
	as on the standalone login page. */
 .header .theme-switcher,
 .header .theme-switcher.top-nav {
	 position: static !important;
	 right: auto !important;
	 top: auto !important;
	 z-index: auto !important;
	 margin-top: 4px;
	 float: none;
	 margin-left: auto; /* push to the right in flex container */
 }

 /* Make the header container a horizontal flex row and vertically center its children */
 .header .container-md {
	 display: flex;
	 align-items: center;
	 gap: 1rem; /* small spacing between logo and other controls */
 }

 /* Ensure top-nav items still align correctly in the flex row */
 .header .top-nav { display: flex; align-items: center; }

 /* Reduce the top margin on the switcher now that header is vertically centered */
 .header .theme-switcher { margin-top: 0; }

 /* Ensure the login card content is readable in dark mode */
 body.theme-dark .tabler-login-page .card,
 body.theme-auto .tabler-login-page .card {
	 background-color: rgba(12,18,28,0.72); /* semi-transparent dark card */
	 color: #e6eef8;
 }

 /* Light-mode login pages: make the login card opaque white so the login form card is readable
	and the body gradient remains visible behind the transparent edges. Use the
	marker `html.login-page` so this only affects the true login pages. */
 html.login-page.theme-light .tabler-login-page .card,
 body.login-page.theme-light .tabler-login-page .card,
 html.theme-light.login-page .tabler-login-page .card,
 body.theme-light.login-page .tabler-login-page .card {
	 background-color: #ffffff !important;
 }

 /* Ensure elevated cards keep a subtle border in dark/auto so edges are clear */
 body.theme-dark .tabler-login-page .card.shadow-sm,
 body.theme-auto .tabler-login-page .card.shadow-sm {
	 border: 1px solid #e6eef8;
 }

 /* Light mode: subtle 1px light-gray border for elevated cards so edges are
	defined on bright backgrounds. This should not affect dark/auto. */
 body.theme-light .tabler-login-page .card.shadow-sm {
	 /* Darkened slightly from #e9ecef to improve contrast on bright backgrounds */
	 border: 1px solid #d1d5d9;
 }

 /* Ensure focus on inputs inside cards in dark/auto uses the preferred color and
	overrides any other rules that might set a white border. Apply to both
	.form-control and .input-group .form-control for completeness. */
 body.theme-dark .tabler-login-page .card .form-control:focus,
 body.theme-auto .tabler-login-page .card .form-control:focus,
 body.theme-dark .tabler-login-page .card .input-group .form-control:focus,
 body.theme-auto .tabler-login-page .card .input-group .form-control:focus {
	 border-color: #e6eef8 !important;
	 box-shadow: 0 0 0 0.35rem rgba(230,238,248,0.18) !important;
 }

 body.theme-dark .tabler-login-page .card .form-control,
 body.theme-auto .tabler-login-page .card .form-control {
	 background-color: rgba(255,255,255,0.05);
	 color: #e6eef8;
	 border-color: rgba(255,255,255,0.08);
 }

 /* Ensure input group border matches form control in dark mode */
 body.theme-dark .tabler-login-page .input-group .form-control,
 body.theme-auto .tabler-login-page .input-group .form-control {
	 border-color: #e6eef8;
 }

 /* Focus state for inputs in dark mode */
 body.theme-dark .tabler-login-page .input-group .form-control:focus,
 body.theme-auto .tabler-login-page .input-group .form-control:focus {
	 border-color: #e6eef8;
	 /* stronger glow using the requested color */
	 box-shadow: 0 0 0 0.35rem rgba(230,238,248,0.18);
 }

 /* Input icon (prepend) color and border match input in dark/auto */
 body.theme-dark .tabler-login-page .input-group-text,
 body.theme-auto .tabler-login-page .input-group-text {
	 color: #e6eef8;
	 border-color: #e6eef8;
	 background: transparent;
 }

 body.theme-dark .tabler-login-page .card .form-check-label,
 body.theme-auto .tabler-login-page .card .form-check-label {
	 color: #d7e6f8;
 }

 /* Checkbox fix: ensure checkbox and label are visible */
 body.theme-dark .tabler-login-page .form-check-input,
 body.theme-auto .tabler-login-page .form-check-input {
	 filter: none;
 }

 /* Checkbox visuals in dark mode: ensure visible border and background when checked */
 body.theme-dark .tabler-login-page .form-check-input[type="checkbox"],
 body.theme-auto .tabler-login-page .form-check-input[type="checkbox"] {
	 background-color: transparent;
	 border: 1px solid rgba(230,238,248,0.28);
 }
 body.theme-dark .tabler-login-page .form-check-input[type="checkbox"]:checked,
 body.theme-auto .tabler-login-page .form-check-input[type="checkbox"]:checked {
	 background-color: #e6eef8;
	 border-color: #e6eef8;
 }

 /* Use accent-color for browsers that support it to ensure the checkmark is the right color */
 body.theme-dark .tabler-login-page input[type="checkbox"],
 body.theme-auto .tabler-login-page input[type="checkbox"] {
	 accent-color: #e6eef8;
 }

 /* Footer links and small descriptive text in dark/auto */
 body.theme-dark .tabler-login-page .card-footer a,
 body.theme-auto .tabler-login-page .card-footer a {
	 color: rgba(230,238,248,0.92);
 }
 /* Card footer border color in dark/auto to match input borders */
 body.theme-dark .tabler-login-page .card-footer,
 body.theme-auto .tabler-login-page .card-footer {
	 border-top: 1px solid rgba(230,238,248,0.08);
 }
 body.theme-dark .tabler-login-page .lead,
 body.theme-auto .tabler-login-page .lead {
	 color: rgba(230,238,248,0.9);
 }

 /* Ensure left-hero descriptive text and list items use the exact requested color in dark/auto */
 body.theme-dark .tabler-login-page .px-5,
 body.theme-auto .tabler-login-page .px-5 {
	 color: #E6EEF8; /* explicit requested color */
 }

 /* Override .text-muted inside the hero so it doesn't force a different color in dark mode */
 body.theme-dark .tabler-login-page .px-5 .text-muted,
 body.theme-auto .tabler-login-page .px-5 .text-muted {
	 color: #E6EEF8 !important;
 }

 /* Individual list items (icons + text) in the hero should inherit the hero color */
 body.theme-dark .tabler-login-page .px-5 .list-unstyled li,
 body.theme-auto .tabler-login-page .px-5 .list-unstyled li {
	 color: #E6EEF8;
 }

 /* Ensure check icons in the list keep their green color while text uses hero color */
 body.theme-dark .tabler-login-page .px-5 .list-unstyled li .fa-check-circle,
 body.theme-auto .tabler-login-page .px-5 .list-unstyled li .fa-check-circle {
	 color: #28a745; /* keep success green */
 }

 /* Left-align the list in the hero while keeping the overall hero content centered */
 .tabler-login-page .px-5 .list-unstyled {
	 text-align: left;
	 display: inline-block;
	 margin: 0 auto;
 }

 /* Compact icon button styles (Tabler-like) */
 .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 6px; }
 .btn-icon i { font-size: 14px; }

 /* Override global helper that sets .min-vh-75 to 75vh — inside our login
	page we want the card area to be larger so the card sits lower. Make it
	90vh on large screens instead so the visual centering matches your goal. */
 @media (min-width: 992px) {
	 .tabler-login-page .min-vh-75 { min-height: 90vh !important; }
 }

 /* Keep descriptive lines from breaking awkwardly by constraining width */
 .tabler-login-page .lead.narrow {
	 max-width: 520px;
	 margin: 0 auto;
	 text-align: left;
 }

 /* Ensure the left hero column is visible and the login card is vertically
	centered on large screens. Some global helpers may change display at
	lg breakpoint; force the intended layout scoped to the login page. */
 @media (min-width: 992px) {
	 .tabler-login-page .d-none.d-lg-block { display: block !important; }
	 .tabler-login-page .row.align-items-center { align-items: center !important; min-height: 90vh !important; }
	 /* Ensure the right column (login card) centers vertically */
	 .tabler-login-page .col-12.col-md-8.col-lg-5 { display: flex; align-items: center; }
	 .tabler-login-page .col-12.col-md-8.col-lg-5 > .card { width: 100%; }
 }

 /* Small screens: keep the row centered vertically as well for better UX */
 @media (max-width: 767.98px) {
	 .tabler-login-page .row.align-items-center { align-items: center !important; min-height: 75vh; }
 }

 /* Medium breakpoint (tablet) fix: ensure vertical centering when the layout
	switches to a single column between 768px and 991.98px */
 @media (min-width: 768px) and (max-width: 991.98px) {
	 .tabler-login-page .row.align-items-center { align-items: center !important; min-height: 85vh !important; }
	 .tabler-login-page .col-12.col-md-8.col-lg-5 { display: flex; align-items: center; }
	 .tabler-login-page .col-12.col-md-8.col-lg-5 > .card { width: 100%; }
 }

 /* Main content start padding: applied only to the primary content container
	to provide consistent spacing below the header. This targets the
	`container-md` that we mark with the `content-start` class in
	`structure.pdt`. */
 .container-md.content-start {
	 padding-top: 20px !important;
 }

 /* Dark/Auto theme: Ensure section titles and descriptive text on
	inner pages are readable (white-ish) when the site uses dark mode. */
 body.theme-dark .section-title h1,
 body.theme-dark .section-title h2,
 body.theme-dark .section-title h3,
 body.theme-auto .section-title h1,
 body.theme-auto .section-title h2,
 body.theme-auto .section-title h3 {
	 color: #FFFFFF !important;
 }
 body.theme-dark .section-title p,
 body.theme-auto .section-title p {
	 color: rgba(230,238,248,0.95) !important;
 }