/*
 * vim: ts=2 ai
 * unreg-style.css
 * $Id$
 *
 * This style is for users who still have not logged into the secureapp system.
 */

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* Light Theme Colors */
:root {
	--bs-body-bg: #f8f9fa;
	--bs-body-color: #212529;

	--bs-primary: #0d6efd;
	--bs-secondary: #6c757d;
	--bs-success: #198754;
	--bs-info: #0dcaf0;
	--bs-warning: #ffc107;
	--bs-danger: #dc3545;
	--bs-light: #f8f9fa;
	--bs-dark: #212529;

	--bs-card-bg: #ffffff;
	--bs-card-color: #212529;
}

/* Dark Theme Overrides */
[data-bs-theme="dark"] {
	--bs-body-bg: #121212;
	--bs-body-color: #e0e0e0;

	--bs-primary: #00bcd4;		/* Cyan */
	--bs-secondary: #ff9800;	/* Orange */
	--bs-success: #4caf50;		/* Green */
	--bs-info: #03a9f4;				/* Light Blue */
	--bs-warning: #ffc107;		/* Yellow */
	--bs-danger: #f44336;			/* Red */
	--bs-light: #f1f1f1;
	--bs-dark: #212121;

	--bs-card-bg: rgba(255, 255, 255, 0.05); /* Glass effect */
	--bs-card-color: #ffffff;
}

#themeToggle {
	font-size: 0.8rem;				/* Smaller text */
	padding: 0.25rem 0.5rem; 	/* Adjust top/bottom and left/right padding */
}

/*
.custom-toggle {
	padding: 0.2rem 0.4rem;
	font-size: 0.75rem;
}
*/

/* Default (light mode) card background */
.bg-transparent-card {
	background-color: rgba(255, 255, 255, 0.85);
	color: #212529;
}

/* Override in dark mode */
[data-bs-theme="dark"] .bg-transparent-card {
	background-color: rgba(0, 0, 0, 0.6);
	color: #f1f1f1;
}

/* Optional: smooth transition */
.bg-transparent-card {
	-webkit-transition: background-color 0.3s ease, color 0.3s ease;
	-o-transition: background-color 0.3s ease, color 0.3s ease;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.bg-image {
	background-image: url('../img/bg_logo.png');
	background-color: rgba(25, 25, 25, 0.1);	/* Adjust opacity to soften */
	background-blend-mode: overlay;						/* or multiply, overlay, soft-light */
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	height: 100vh;
	width: 100%;
}

/* When theme is 'light', apply a subtle color overlay on the background */
[data-bs-theme="light"] .bg-image {
	background-color: rgba(50, 50, 50, 0.4);	/* light tint */
	background-blend-mode: lighten;						/* blends with background image */
}

/* Default light card */
.bg-transparent-card {
	/* background-color: rgba(255, 255, 255, 0.9);	/* Slightly transparent white */
	background-color: rgba(230, 230, 230, 0.9);			/* Slightly transparent white */
	color: #212529;
	border: none;
	-webkit-transition: background-color 0.3s ease, color 0.3s ease;
	-o-transition: background-color 0.3s ease, color 0.3s ease;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode version */
[data-bs-theme="dark"] .bg-transparent-card {
	background-color: rgba(0, 0, 0, 0.6); /* Transparent black */
	color: #f1f1f1;
}

input,
textarea,
select {
	background-color: var(--input-bg);
	color: var(--input-color);
	border: 1px solid var(--input-border);
	-webkit-transition: background-color 0.3s, color 0.3s, border-color 0.3s;
	-o-transition: background-color 0.3s, color 0.3s, border-color 0.3s;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--bs-primary);
	-webkit-box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
	       box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.card-header {
	padding: 0.75rem 1.25rem; /* Comfortable padding */
	-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);		/* subtle shadow */
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);	/* light border to separate */
}

.card-header h5 {
	font-weight: 600;
	font-size: 1.25rem;
	margin-bottom: 0; /* override any margin */
}

.custom-toggle {
	font-size: 0.85rem;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	/* Optional: transition for hover effects */
	-webkit-transition: background-color 0.3s ease, color 0.3s ease;
	-o-transition: background-color 0.3s ease, color 0.3s ease;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Optional: button hover style */
.custom-toggle:hover {
	background-color: rgba(255, 255, 255, 0.2);
	color: #fff;
	border-color: #fff;
	cursor: pointer;
}

.btn {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	   -ms-flex-align: center;
	       align-items: center;
	-webkit-box-pack: center;
	   -ms-flex-pack: center;
	       justify-content: center;
}