/* ==========================================================================
   Safety Solutions for Industry
   Employee Training Portal

   Global Styles
   ========================================================================== */

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
	/* ==========================================================
       Brand Colors
       ========================================================== */

	--primary-color: #005EB8;
	--primary-hover: #004A91;
	/* ==========================================================
       Status Colors
       ========================================================== */

	--success-color: #2E7D32;
	--warning-color: #F9A825;
	--danger-color: #D32F2F;
	--info-color: #0288D1;
	/* ==========================================================
       Background
       ========================================================== */

	--background-color: #F4F7FB;
	--card-color: #FFFFFF;
	/* ==========================================================
       Text
       ========================================================== */

	--text-primary: #263238;
	--text-secondary: #607D8B;
	--text-light: #90A4AE;
	/* ==========================================================
       Borders
       ========================================================== */

	--border-color: #E5EAF0;
	/* ==========================================================
       Border Radius
       ========================================================== */

	--radius-xs: .25rem;
	--radius-sm: .50rem;
	--radius-md: .75rem;
	--radius-lg: 1rem;
	--radius-xl: 1.50rem;
	/* ==========================================================
       Spacing
       ========================================================== */

	--space-xs: .25rem;
	--space-sm: .50rem;
	--space-md: 1rem;
	--space-lg: 1.50rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	/* ==========================================================
       Shadows
       ========================================================== */

	--shadow-sm: 0 2px 8px rgba(0,0,0,.05);
	--shadow-md: 0 8px 24px rgba(0,0,0,.08);
	--shadow-lg: 0 15px 40px rgba(0,0,0,.12);
	/* ==========================================================
       Animation
       ========================================================== */

	--transition-fast: .15s ease;
	--transition: .25s ease;
	--transition-slow: .40s ease;
	/* ==========================================================
       Layout
       ========================================================== */

	--container-width: 1200px;
	--login-width: 420px;
	/* ==========================================================
       Controls
       ========================================================== */

	--control-height: 48px;
	/* ==========================================================
       Typography
       ========================================================== */

	--line-height: 1.5;
	/* ==========================================================
       Layers
       ========================================================== */

	--z-dropdown: 5000;
	--z-modal: 9000;
	--z-loading: 9999;
}


/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


/* ==========================================================================
   Html
   ========================================================================== */

html {
	font-size: 16px;
	scroll-behavior: smooth;
}


/* ==========================================================================
   Body
   ========================================================================== */

body {
	font-family: 'Inter', sans-serif;
	background: var(--background-color);
	color: var(--text-primary);
	line-height: var(--line-height);
	min-height: 100vh;
	overflow-x: hidden;
	color-scheme: light;
	text-rendering: optimizeLegibility;
}

.language-selector {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	background: var(--card-color);
	border: 1px solid var(--border-color);
	border-radius: 999px;
	font-size: .82rem;
}

.language-selector select {
	border: 0;
	background: transparent;
	color: var(--text-primary);
	cursor: pointer;
	font-weight: 600;
}

@media (max-width: 600px) {
	.language-selector label { display: none; }
}

[data-language-selector] {
	display: flex;
	justify-content: flex-end;
}

.header-identity {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

@media (max-width: 650px) {
	.header-identity { align-items: flex-start; }
}


	body * {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}


/* ==========================================================================
   Images
   ========================================================================== */

img,
svg {
	display: block;
	max-width: 100%;
}


/* ==========================================================================
   Form Elements
   ========================================================================== */

input,
button,
select,
textarea {
	font: inherit;
}


button {
	cursor: pointer;
}


/* ==========================================================================
   Links
   ========================================================================== */

a {
	color: inherit;
	text-decoration: none;
}


/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-center {
	text-align: center;
}

.w-100 {
	width: 100%;
}


/* ==========================================================================
   Display Helpers
   ========================================================================== */

.d-none {
	display: none !important;
}

.d-flex {
	display: flex;
}

.d-grid {
	display: grid;
}

.d-block {
	display: block;
}


/* ==========================================================================
   Layout Helpers
   ========================================================================== */

.container-sm {
	width: min(720px, 95%);
	margin-inline: auto;
}

.container {
	width: min(var(--container-width), 95%);
	margin-inline: auto;
}

.container-lg {
	width: min(1440px, 95%);
	margin-inline: auto;
}


/* ==========================================================================
   Loading Overlay
   ========================================================================== */

.loading-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.85);
	backdrop-filter: blur(3px);
	z-index: var(--z-loading);
}


.loading-content {
	text-align: center;
}


.spinner {
	width: 52px;
	height: 52px;
	margin-inline: auto;
	margin-bottom: var(--space-lg);
	border: 4px solid #DDD;
	border-top-color: var(--primary-color);
	border-radius: 50%;
	animation: spin .8s linear infinite;
}


@keyframes spin {

	to {
		transform: rotate(360deg);
	}
}