/* Css/figma-dashboard-styles.css */

/* Base styles derived from the Figma/v0.dev implementation */
:root {
	--background: hsl(0, 0%, 100%);
	--foreground: hsl(222.2, 84%, 4.9%);

	--card: hsl(0, 0%, 100%);
	--card-foreground: hsl(222.2, 84%, 4.9%);

	--popover: hsl(0, 0%, 100%);
	--popover-foreground: hsl(222.2, 84%, 4.9%);

	--primary: hsl(222.2, 47.4%, 11.2%);
	--primary-foreground: hsl(210, 40%, 98%);
	--primary-raw: 222.2 47.4% 11.2%; /* Added for hover opacity */

	--secondary: hsl(210, 40%, 96.1%);
	--secondary-foreground: hsl(222.2, 47.4%, 11.2%);
	--secondary-raw: 210 40% 96.1%; /* Added for hover opacity */

	--muted: hsl(210, 40%, 96.1%);
	--muted-foreground: hsl(215.4, 16.3%, 46.9%);

	--accent: hsl(210, 40%, 96.1%);
	--accent-foreground: hsl(222.2, 47.4%, 11.2%);

	--destructive: hsl(0, 84.2%, 60.2%);
	--destructive-foreground: hsl(210, 40%, 98%);
	--destructive-raw: 0 84.2% 60.2%; /* Added for hover opacity */

	--border: hsl(214.3, 31.8%, 91.4%);
	--input: hsl(214.3, 31.8%, 91.4%); /* input border */
	--ring: hsl(222.2, 84%, 4.9%);

	--radius: 0.5rem; /* border-radius for lg */
	--radius-md: calc(var(--radius) - 2px); /* border-radius for md */
	--radius-sm: calc(var(--radius) - 4px); /* border-radius for sm */

	/* Custom font variable */
	--font-sans: "Inter", sans-serif; /* Assuming Inter, replace if different */
}

body.figma-centered-page-body {
	/* Added specificity for login page body */
	font-family: var(--font-sans);
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
	margin: 0;
	padding: 20px; /* Add padding for centered content */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	box-sizing: border-box;
}

/* Card Styles */
.figma-card {
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background-color: var(--card);
	color: var(--card-foreground);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
	width: 100%;
	max-width: 32rem; /* max-w-lg */
	margin-left: auto;
	margin-right: auto;
}

.figma-card-login {
	max-width: 26.25rem; /* 420px */
	border-radius: 25px;
}

.figma-card-header {
	display: flex;
	flex-direction: column;
	padding: 0.75rem 1.5rem 1.5rem; /* p-6, reduced top padding to 0.75rem */
}
.figma-card-header > * + * {
	margin-top: 0.375rem; /* space-y-1.5 */
}

.figma-card-title {
	font-size: 1.5rem; /* text-2xl */
	font-weight: 600; /* font-semibold */
	line-height: 1; /* leading-none */
	letter-spacing: -0.025em; /* tracking-tight */
}

.figma-card-description {
	font-size: 0.875rem; /* text-sm */
	color: var(--muted-foreground);
}

.figma-card-content {
	padding: 1.5rem; /* p-6 */
}
.figma-card-header + .figma-card-content {
	padding-top: 0;
}

/* Label Styles */
.figma-label {
	font-size: 0.875rem; /* text-sm */
	font-weight: 500; /* font-medium */
	line-height: 1; /* leading-none */
	display: block;
}

/* Input Styles */
.figma-input {
	display: flex;
	height: 2.5rem; /* h-10 */
	width: 100%;
	border-radius: var(--radius-md);
	border: 1px solid var(--input);
	background-color: var(--background);
	padding: 0.5rem 0.75rem; /* py-2 px-3 */
	font-size: 0.875rem; /* text-sm */
	box-sizing: border-box;
}

.figma-input::placeholder {
	color: var(--muted-foreground);
}

.figma-input:focus-visible,
.figma-input:focus {
	outline: none;
	border-color: var(--ring);
	box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.figma-input:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.figma-input-icon-container {
	position: relative;
	display: flex;
	align-items: center;
}

.input-icon-right {
	position: absolute;
	right: 0.75rem;
	color: var(--muted-foreground);
	pointer-events: none;
}

.input-icon-left {
	position: absolute;
	left: 0.75rem;
	color: var(--muted-foreground);
	pointer-events: none;
}

/* Default padding for all inputs in an icon container */
.figma-input-icon-container .figma-input {
	padding-left: 0.75rem; /* Default, for inputs with no left icon */
	padding-right: 0.75rem; /* Default, for inputs with no right icon */
}

/* Override padding-left if a left icon is present */
.figma-input-icon-container .input-icon-left + .figma-input {
	padding-left: 2.5rem;
}

/* Override padding-right if a right icon is present (or expected, like password toggle) */
/* Also apply to all inputs to ensure consistent right padding for potential icons or just spacing */
.figma-input-icon-container .figma-input {
	padding-right: 2.5rem;
}

.figma-input-icon-container .figma-input + .input-icon-right,
.figma-input-icon-container .figma-input.has-right-icon {
	/* .has-right-icon for explicit cases if needed */
	/* This rule might be redundant if the above general rule for .figma-input is used,
	   but kept for specificity if only certain inputs with icons need it.
	   If all inputs need the right padding, the general rule is cleaner. */
	padding-right: 2.5rem;
}

/* Allow pointer events for clickable icons (e.g., password toggle) */
#togglePassword.input-icon-right {
	pointer-events: auto;
	cursor: pointer;
}

/* Button Styles */
.figma-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	border-radius: var(--radius-md);
	font-size: 0.875rem; /* text-sm */
	font-weight: 500; /* font-medium */
	transition-property: color, background-color, border-color, box-shadow;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
	height: 2.5rem; /* h-10 */
	padding: 0.5rem 1rem; /* py-2 px-4 */
	border: 1px solid transparent;
	box-sizing: border-box;
	background-color: var(--primary);
	color: var(--primary-foreground);
	cursor: pointer;
}

.figma-button:hover {
	background-color: hsl(var(--primary-raw) / 0.9);
}

.figma-button:focus-visible,
.figma-button:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.figma-button:disabled {
	pointer-events: none;
	opacity: 0.5;
}

/* Form Grouping and Spacing */
.figma-form-group {
	margin-bottom: 1rem;
}

.figma-form-group .figma-label {
	margin-bottom: 0.5rem;
}

/* Login Page Specific Styles */
.login-header-container {
	text-align: center;
	margin-bottom: 1rem; /* Reduced from 2rem */
}

.login-logo {
	display: block !important;
	width: 15.6vw; /* Increased from 12vw (12 * 1.3) */
	min-width: 156px; /* Increased from 120px (120 * 1.3) */
	max-width: 100%;
	height: auto;
	margin-bottom: 0.5rem;
	margin-left: auto;
	margin-right: auto;
	border-radius: 8px;
}

.login-company-name {
	font-size: 1.25rem; /* text-xl */
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 0.25rem;
}

.login-tagline {
	font-size: 0.875rem; /* text-sm */
	color: var(--muted-foreground);
}

.hidden-by-default {
	display: none;
}

.login-card-header {
	text-align: center;
	padding-bottom: 0.5rem;
}

.login-card-title {
	font-size: 1.875rem; /* text-3xl */
	font-weight: normal; /* Changed from bold */
	color: #021979;
}

.login-submit-button {
	background-color: #021979;
	width: 100%; /* Ensure it takes full width of its container */
	margin-top: 1rem; /* Added to balance spacing */
}

.login-submit-button:hover {
	background-color: #0c36cb; /* Darker shade for hover */
}

.login-captcha-label {
	display: none;
}

.login-captcha-group .captcha-input-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.login-captcha-group .captcha-input-wrapper {
	flex-grow: 1;
	max-width: calc(
		100% - 120px - 0.5rem - 2.5rem
	); /* input width - image width - gap - refresh button width */
}

.login-captcha-group .captcha-image {
	height: 2.5rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	width: 120px;
	object-fit: cover;
}

.login-captcha-group .captcha-refresh-button {
	padding: 0.5rem;
	height: 2.5rem;
	width: 2.5rem;
	border: 1px solid var(--border);
	background-color: var(--background);
	color: var(--muted-foreground);
	display: inline-flex; /* Align icon inside */
	align-items: center;
	justify-content: center;
}

.login-captcha-group .captcha-refresh-button:hover {
	background-color: var(--accent);
}

.login-captcha-group .captcha-refresh-button i {
	font-size: 1rem;
}

/* Grid utilities (simple version) */
.grid {
	display: grid;
}
.gap-2 {
	gap: 0.5rem; /* 8px */
}
.gap-4 {
	gap: 1rem; /* 16px */
}
.w-full {
	width: 100%;
}