@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* Comprehensive Branding CSS */
:root {
	--primary-color: #a0223b;
	--background-color: #f5f5f5;
	--font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
	background-color: var(--background-color);
	font-family: var(--font-family);
}

.skycloak-page {
	background-color: var(--background-color);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

/* Override login-pf-page if still used */
.login-pf-page {
	background-color: var(--background-color) !important;
	min-height: 100vh !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
}

.skycloak-card {
	background: white;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	padding: 32px;
	max-width: 450px;
	width: 100%;
	margin: 0 auto;
}

/* Override card-pf if still used */
.card-pf {
	background: white !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
	padding: 32px !important;
	max-width: 450px !important;
	width: 100% !important;
}

/* Skycloak Custom Form Classes */
.skycloak-form {
	margin: 0;
	padding: 0;
}

.skycloak-form-group {
	margin-bottom: 16px;
}

.skycloak-form-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: #333;
	font-size: 14px;
	line-height: 1.4;
}

.skycloak-form-input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
	color: #374151;
	background-color: #fff;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.skycloak-form-input:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.skycloak-form-input::placeholder {
	color: #9ca3af;
	opacity: 1;
}

.skycloak-btn {
	display: inline-block;
	padding: 10px 20px;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.15s ease-in-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.skycloak-btn-primary {
	background-color: var(--primary-color);
	color: white;
	width: 100%;
	margin-top: 8px;
}

.skycloak-btn-primary:hover {
	background-color: var(--primary-color);
	filter: brightness(90%);
	transform: translateY(-1px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.skycloak-btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Override PatternFly classes if they're still used */
.pf-c-button.pf-m-primary {
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
	color: white !important;
	padding: 10px 20px !important;
	border-radius: 6px !important;
	font-weight: 500 !important;
	width: 100% !important;
	margin-top: 8px !important;
}

.pf-c-button.pf-m-primary:hover {
	background-color: var(--primary-color) !important;
	filter: brightness(90%) !important;
}

.pf-c-form__group {
	margin-bottom: 16px !important;
}

.pf-c-form-control {
	width: 100% !important;
	padding: 10px 14px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 6px !important;
	font-size: 14px !important;
}

.pf-c-form__label {
	display: block !important;
	margin-bottom: 6px !important;
	font-weight: 500 !important;
	color: #333 !important;
	font-size: 14px !important;
}

/* Required field asterisk styling */
.required,
.skycloak-form-label .required,
.pf-c-form__label .required {
	color: #dc2626;
	margin-left: 4px;
	font-weight: 600;
}

/* Registration form: the declarative-user-profile macro wraps the label and its
   required asterisk in a label wrapper div. The label is display:block, so keep
   the label and asterisk on one line by laying the wrapper out inline. Pin the
   wrapper's font metrics to the label's: the asterisk is a sibling of the label
   and would otherwise inherit the body font, making the wrapper taller than a
   bare label and the label-to-input gap visibly larger than on other fields. */
.skycloak-form-label-wrapper {
	display: flex;
	align-items: center;
	margin-bottom: 6px;
	font-size: 14px;
	line-height: 1.4;
}

.skycloak-form-label-wrapper .skycloak-form-label {
	/* !important: must beat .pf-c-form__label's margin-bottom: 6px !important;
	   inside the flex wrapper that margin adds to the row height instead of
	   collapsing, inflating the wrapper past a bare label. */
	margin-bottom: 0 !important;
}

/* The primary action gets more breathing room than the 16px field rhythm.
   Padding, not margin: the button's own margins collapse into the previous
   group's margin-bottom and never materialize. */
.skycloak-form-actions {
	padding-top: 8px;
}

/* Skycloak Header Elements */
.skycloak-logo {
	text-align: center;
	margin-bottom: 24px;
}

.skycloak-logo img {
	max-height: 56px;
	max-width: 200px;
	height: auto;
	width: auto;
}

.skycloak-title {
	text-align: center;
	margin: 0 0 8px 0;
	font-size: 24px;
	font-weight: 600;
	color: #111827;
	line-height: 1.3;
}

.skycloak-subtitle {
	text-align: center;
	margin: 0 0 24px 0;
	color: #6b7280;
	font-size: 14px;
	line-height: 1.5;
}

/* Override existing classes */
.login-title {
	text-align: center !important;
	margin: 0 0 8px 0 !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	color: #111827 !important;
}

.login-subtitle {
	text-align: center !important;
	margin: 0 0 24px 0 !important;
	color: #6b7280 !important;
	font-size: 14px !important;
}

.logo-container {
	text-align: center !important;
	margin-bottom: 24px !important;
}

.logo-container img {
	max-height: 56px !important;
	max-width: 200px !important;
}

.footer-links {
	text-align: center;
	margin-top: 30px;
	font-size: 14px;
}

.footer-links a {
	color: var(--primary-color);
	text-decoration: none;
	margin: 0 10px;
}

.footer-links a:hover {
	text-decoration: underline;
}

/* Skycloak Footer Elements */
.skycloak-powered-by {
	text-align: center;
	margin-top: 24px;
	font-size: 12px;
	color: #9ca3af;
	line-height: 1.5;
}

.skycloak-powered-by a {
	color: var(--primary-color);
	text-decoration: none;
	transition: color 0.15s ease-in-out;
}

.skycloak-powered-by a:hover {
	filter: brightness(80%);
}

.skycloak-registration-link {
	margin-top: 20px;
	text-align: center;
	font-size: 14px;
	color: #6b7280;
}

.skycloak-registration-link a {
	color: var(--primary-color);
	text-decoration: none;
	margin-left: 4px;
}

.skycloak-registration-link a:hover {
	text-decoration: underline;
}

/* Override existing footer styles */
.powered-by {
	text-align: center !important;
	margin-top: 24px !important;
	font-size: 12px !important;
	color: #9ca3af !important;
}

.powered-by a {
	color: var(--primary-color) !important;
	text-decoration: none !important;
}

.powered-by a:hover {
	filter: brightness(80%) !important;
}

.registration-link {
	margin-top: 20px !important;
	text-align: center !important;
	font-size: 14px !important;
}

/* Reset spacing for all Keycloak wrapper divs */
#kc-form, #kc-form-wrapper,
.login-pf-page-header,
.login-pf-page-content,
#kc-content, #kc-content-wrapper,
#kc-form-options, #kc-form-buttons {
	margin: 0 !important;
	padding: 0 !important;
}

/* Specific overrides for form button containers */
#kc-form-buttons {
	margin-top: 8px !important;
}

.form-links {
	text-align: center;
	margin-top: 20px;
}

.form-links a {
	color: var(--primary-color);
	text-decoration: none;
	font-size: 14px;
}

.form-links a:hover {
	text-decoration: underline;
}

.alert {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	margin-bottom: 20px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.5;
}

.alert-error {
	background-color: #fee;
	color: #c00;
	border: 1px solid #fcc;
}

.alert-warning {
	background-color: #fef9e7;
	color: #856404;
	border: 1px solid #fceaa1;
}

.alert-info {
	background-color: #e7f3ff;
	color: #004085;
	border: 1px solid #b8daff;
}

.alert-success {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

/* Per-field validation error text. Templates render this as
   <span class="pf-c-form__helper-text pf-m-error"> under the input. We don't
   pull in the full PatternFly v4 form helpers, so without this rule the
   message inherits body colour and reads as plain dark text — registration
   errors looked like neutral hints instead of validation failures. */
.pf-c-form__helper-text.pf-m-error,
.pf-m-error {
	color: #c00;
	font-size: 13px;
	margin-top: 4px;
	display: block;
}

/* Action-token info / error pages (info.ftl + error.ftl). The h1 is centered
   via .skycloak-title; without this rule the message body and "Back to
   Application" link below would stay left-aligned, which reads as broken
   layout against the centered title. */
#kc-info-message,
#kc-error-message,
.skycloak-info-message {
	text-align: center;
}

#kc-info-message p,
#kc-error-message p,
.skycloak-info-message p {
	margin: 0 0 12px;
}

/* Icon positioning in alerts.
   PatternFly v3 (loaded by the parent base theme before our stylesheet)
   defines  .alert > .pficon { position: absolute; left: 13px; top: 10px },
   which takes the icon out of flex flow and floats it at fixed coordinates
   on top of the next sibling (the text). Specificity ties (0,2,0) and
   source order favours us, but the position property only applies if we
   explicitly override it — which the previous flex-only rule did not.
   Force position: static so the icon rejoins the flex layout, then give
   the empty .pficon span an explicit box so the :before glyph has space
   to paint into. */
.alert .pficon {
	position: static;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25em;
	height: 1.25em;
	font-size: 18px;
	line-height: 1;
}

.kc-feedback-text {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.5;
}

/* Skycloak Form Row Elements */
.skycloak-form-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 16px 0;
}

.skycloak-checkbox-group {
	display: flex;
	align-items: center;
	font-size: 14px;
	line-height: 1;
}

.skycloak-checkbox-group label {
	line-height: 1;
	/* Nudge label down 8.5px so the visible cap-height of the text lines up
	   with the centre of the checkbox glyph (the box itself is 16x16 but
	   the rendered check sits a touch above the geometric centre). */
	margin-top: 8.5px;
}

.skycloak-checkbox {
	flex-shrink: 0;
	margin: 0 8px 0 0;
	width: 16px;
	height: 16px;
	cursor: pointer;
	/* Use the realm's primary colour for the native check fill instead of
	   the browser default (Chrome blue, Safari blue, Firefox blue) so the
	   checked state matches the rest of the theme. */
	accent-color: var(--primary-color);
}

.skycloak-link {
	color: var(--primary-color);
	text-decoration: none;
	font-size: 14px;
	transition: opacity 0.15s ease-in-out;
}

.skycloak-link:hover {
	opacity: 0.8;
	text-decoration: underline;
}

/* Override existing checkbox styles */
.checkbox-label {
	display: flex !important;
	align-items: center !important;
	font-size: 14px !important;
	margin: 0 !important;
	margin-bottom: 0 !important;
}

.checkbox-label input[type="checkbox"] {
	margin-right: 8px !important;
	width: 16px !important;
	height: 16px !important;
}

/* Keycloak Default Structure Support */
.login-pf-page {
	background-color: var(--background-color);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-family);
}

.skycloak-card {
	background: white;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	padding: 32px;
	max-width: 450px;
	width: 100%;
	margin: 0 auto;
}

/* Override card-pf if still used */
.card-pf {
	background: white !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
	padding: 32px !important;
	max-width: 450px !important;
	width: 100% !important;
}

.login-pf-header h1 {
	text-align: center;
	margin-bottom: 10px;
	font-size: 24px;
	font-weight: 600;
	color: #333;
}

.card-pf-body {
	color: #666;
}

/* Style default Keycloak form elements */
.form-group {
	margin-bottom: 20px;
}

.form-control {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
}

.form-label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
	color: #333;
}

.btn.btn-primary {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: white;
	padding: 10px 20px;
	border-radius: 4px;
	font-weight: 500;
	width: 100%;
	margin-top: 20px;
}

.btn.btn-primary:hover {
	background-color: var(--primary-color);
	opacity: 0.9;
}

/* Footer styling */
.login-pf-footer {
	text-align: center;
	margin-top: 20px;
	font-size: 12px;
	color: #999;
}

/* Registration links */
#kc-registration a, #kc-info a {
	color: #0066CC;
	text-decoration: none;
}

#kc-registration a:hover, #kc-info a:hover {
	color: #0052A3;
	text-decoration: underline;
}

/* Support both .pf-c-* classes and traditional classes for full compatibility */
.col-xs-12 {
	width: 100%;
}

input[type="text"], input[type="password"], input[type="email"] {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	box-sizing: border-box;
}

.pf-c-form__label-text, .form-label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
	color: #333;
}

.pf-c-button.pf-m-primary.pf-m-block {
	width: 100%;
}

/* Ensure proper spacing for form groups */
.form-group, .pf-c-form__group {
	margin-bottom: 15px;
}

/* Checkbox styling */
.checkbox label {
	font-size: 14px;
	font-weight: normal;
}

input[type="checkbox"] {
	margin-right: 8px;
}

/* SSO Provider Styles */
.sso-section {
	margin-top: 30px;
}

.sso-divider {
	position: relative;
	text-align: center;
	margin: 25px 0;
}

.sso-divider hr {
	border: none;
	border-top: 1px solid #e5e7eb;
	margin: 0;
}

.sso-divider span {
	background: white;
	padding: 0 15px;
	position: relative;
	top: -12px;
	color: #6b7280;
	font-size: 14px;
}

/* OR section styling for theme */
.or-section {
	display: flex;
	align-items: center;
	margin: 20px 0;
}

.around-or-idp {
	border-bottom: 1px solid #c2c8d0;
	flex: 1 0 auto;
	height: 0.5em;
	margin: 0;
}

.option {
	color: #6b7280;
	font-size: 14px;
	padding: 0 15px;
	background: white;
}

/* IDP Button styles for theme compatibility */
.idp-button {
	border-radius: 5px;
	background: #fff;
	color: #333;
	font-size: 14px;
	font-weight: 500;
	padding: 12px 20px;
	letter-spacing: 0;
	transition: transform 80ms ease-in;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid #ddd;
	width: 100%;
	margin-bottom: 10px;
	cursor: pointer;
}

.idp-button:hover {
	cursor: pointer;
	background-color: #f8f8f8;
	border-color: #a0a0a0;
}

.idp-button > img {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	flex-shrink: 0;
}

.idp-button > span {
	color: #333;
	font-size: 14px;
	font-weight: 500;
}

.idp-button:disabled {
	background-color: #f0f1f0;
	color: #a9a9a9;
	cursor: not-allowed;
}

.idp-button:disabled > img {
	opacity: 0.5;
}

/* IDP Button Horizontal styles (circular icon buttons) */
.idp-button-horizontal {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e0e0e0;
	background: white;
	cursor: pointer;
	transition: all 0.15s ease-in-out;
}

.idp-button-horizontal:hover {
	background-color: #f8f8f8;
	border-color: #a0a0a0;
	transform: scale(1.05);
}

.idp-button-horizontal > img {
	width: 20px;
	height: 20px;
}

.idp-button-horizontal > i {
	font-size: 20px;
}

/* Vertical Layout Styles */
.sso-providers-vertical {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sso-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: white;
	color: #374151;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.sso-button:hover {
	background: #f9fafb;
	border-color: #d1d5db;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sso-button:active {
	transform: translateY(0);
}

.sso-button img,
.sso-button i {
	flex-shrink: 0;
}

/* Horizontal Layout Styles */
.sso-providers-horizontal {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 25px 0;
}

.sso-icon-button {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid #e5e7eb;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

.sso-icon-button:hover {
	background: #f9fafb;
	border-color: var(--primary-color);
	transform: scale(1.05);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.sso-icon-button:active {
	transform: scale(0.98);
}

.sso-icon-button img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.sso-icon-button i {
	font-size: 20px;
	color: #4b5563;
}

/* Button Size Variations */
.sso-button.small {
	padding: 8px 12px;
	font-size: 13px;
}

.sso-button.small img,
.sso-button.small i {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.sso-button.large {
	padding: 14px 20px;
	font-size: 16px;
}

.sso-button.large img,
.sso-button.large i {
	width: 24px;
	height: 24px;
	font-size: 22px;
}

.sso-icon-button.small {
	width: 40px;
	height: 40px;
}

.sso-icon-button.small img {
	width: 18px;
	height: 18px;
}

.sso-icon-button.small i {
	font-size: 16px;
}

.sso-icon-button.large {
	width: 64px;
	height: 64px;
}

.sso-icon-button.large img {
	width: 32px;
	height: 32px;
}

.sso-icon-button.large i {
	font-size: 28px;
}

/* Dark mode support for SSO */
.dark .sso-divider span {
	background: #1f2937;
	color: #9ca3af;
}

.dark .sso-button {
	background: #374151;
	border-color: #4b5563;
	color: #f3f4f6;
}

.dark .sso-button:hover {
	background: #4b5563;
	border-color: #6b7280;
}

.dark .sso-icon-button {
	background: #374151;
	border-color: #4b5563;
}

.dark .sso-icon-button:hover {
	background: #4b5563;
}

.dark .sso-icon-button i {
	color: #d1d5db;
}