/* ==========================================================================
   CSS Custom Properties (CSS Variables)
   ========================================================================== */
/* 
 * Centralized color scheme and design tokens for the Ayfie Keycloak theme
 * These variables ensure consistency across all components and make theming easier
 */
:root {
    /* Brand Colors */
    --color-white: #fff;
    --color-primary: #1e0d42;           /* Ayfie primary purple */
    --color-primary-hover: #c6b5fb;    /* Light purple for hover states */
    --color-dark: #495057;              /* Dark gray for text and buttons */
    --color-dark-hover: #343a40;        /* Darker gray for button hover */
    --color-dark-active: #212529;       /* Even darker for active states */
    
    /* Utility Colors */
    --color-muted: #6c757d;             /* Muted text color */
    --color-border: #dee2e6;            /* Light border color */
    --color-border-hover: #adb5bd;      /* Darker border for hover */
    --color-error: #dc3545;             /* Error/validation color */
    
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    /* Design Tokens */
    --border-radius: 6px;               /* Standard border radius */
    --transition: 0.2s ease;            /* Standard transition timing */
}

/* ==========================================================================
   Reset and Base Styles
   ========================================================================== */
/* 
 * CSS reset and base styling to ensure consistent rendering across browsers
 * and override default Keycloak styling
 */
* {
    box-sizing: border-box;  /* Include padding and border in element's total width and height */
}

/* Force white background on html element to override Keycloak defaults */
html {
    background: url(../img/keycloak-bg.png) no-repeat center center fixed;
    background-size: cover;
}

/* Base body styling with clean white background */
body, .login-pf body {
    background: url(../img/keycloak-bg.png) no-repeat center center fixed;
    background-size: cover;
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    min-height: 100vh;    
}

/* ==========================================================================
   Main Login Container
   ========================================================================== */
/* 
 * Primary container for the login page layout
 * Uses flexbox for vertical centering and responsive design
 */
.login-pf {
    background: none !important;            
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0 auto;
    margin-bottom: 80px;  /* Extra space at bottom for better visual balance */
}

/* ==========================================================================
   Custom Header Styles
   ========================================================================== */
/* 
 * Header section containing the Ayfie logo and page titles
 * Provides brand identity and context for the login page
 */
.custom-header {
    text-align: center;
    margin-bottom: 30px;
    background: transparent;
}

/* Ayfie logo with SVG background for crisp display at any size */
.ayfie-logo {
    width: 179px;
    height: 104px;
    background: url(../img/ayfie-logo.svg) transparent;
    background-size: 100% 100%;  /* Scale to fit container while maintaining aspect ratio */
    margin: auto;
}

/* Container for page title elements */
.page-title {
    margin-bottom: 15px;
}

/* Main title styling - split into two parts for visual emphasis */
.title-main,
.title-sub {
    color: var(--color-primary);
    font-size: 32px;
    font-weight: 500;
}

.title-main {
    margin-right: 5px;  /* Small gap between title parts */
}

.title-sub {
    font-style: italic;  /* Italic styling for secondary part of title */
}

/* Context information display (e.g., realm name) */
.context-text {
    margin-bottom: 20px;
}

.context-label {
    color: var(--color-muted);
    font-size: 16px;
    margin-right: 5px;
}

.context-value {
    color: var(--color-dark);
    font-size: 16px;
    font-weight: 500;
}

/* ==========================================================================
   Login Card Styles
   ========================================================================== */
/* 
 * Main card container for the login form
 * Provides visual separation and modern card-based design
 */
.custom-login-card {
    background: var(--color-white);
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* Subtle shadow for depth */
    border: none;
    width: 100%;
    min-width: 480px;
    max-width: 500px; /* Maximum width to prevent overly wide forms */
    margin: 0 auto;   /* Center the card horizontally */
}

/* ==========================================================================
   Social Login Section
   ========================================================================== */
/* 
 * Social authentication buttons (Microsoft, Google, etc.)
 * Provides alternative login methods for users
 */
.social-login-section {
    margin-bottom: 0px;
    margin-top: 10px;
}

/* Container for social login buttons with vertical stacking */
.social-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;  /* Consistent spacing between buttons */
    margin-bottom: 20px;
}

/* Individual social login button styling */
.social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-white);
    text-decoration: none;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    transition: all var(--transition);
    min-height: 48px;  /* Minimum touch target size for accessibility */
    width: 100%;
}

.social-button:hover {
    border-color: var(--color-border-hover);
    background: var(--color-white);
    text-decoration: none;
    color: #000;
}

/* Icon container for social provider logos */
.social-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Microsoft logo as inline SVG for crisp display */
.microsoft-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230078d4' d='M11.4 24H0V12.6h11.4V24zM24 24H12.6V12.6H24V24zM11.4 11.4H0V0h11.4v11.4zM24 11.4H12.6V0H24v11.4z'/%3E%3C/svg%3E");
}

/* Google logo as inline SVG with brand colors */
.google-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
}

/* Text styling for social button labels */
.social-text {
    font-weight: 500;
}

/* ==========================================================================
   Separator
   ========================================================================== */
/* 
 * Visual separator between social login and traditional form
 * Creates a clean "OR" divider with horizontal line
 */
.separator {
    position: relative;
    text-align: center;
     margin: 20px 0 4px 0;
}

/* Horizontal line behind the separator text */
.separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border);
}

/* Text that sits on top of the horizontal line */
.separator-text {
    background: var(--color-white);
    padding: 0 15px;
    color: var(--color-muted);
    font-size: 14px;
    position: relative;
}

/* Reduce spacing between separator and first form field */
.separator + #kc-form .form-group:first-child,
#kc-form-login .form-group:first-child {
    margin-top: -10px;
}

/* ==========================================================================
   Form Styles
   ========================================================================== */
/* 
 * Traditional login form styling for username/password fields
 * Includes labels, inputs, validation states, and accessibility features
 */
.form-group {
    margin-bottom: 20px;
}

/* Remove top margin from first form group after separator */
.form-group:first-child {
    margin-top: 0;
}

/* Form field labels with consistent styling */
.form-label {
    display: block;
    color: var(--color-dark);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

/* Input field styling with focus states and accessibility */
.form-input {
    width: 100%;
    height: 40px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 16px;
    background: var(--color-white);
    transition: border-color var(--transition);
}

/* Focus state with primary color border and subtle shadow */
.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);  /* Subtle focus ring */
}

/* Error message styling for form validation */
.error-message {
    color: var(--color-error);
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

/* ==========================================================================
   Login Button
   ========================================================================== */
/* 
 * Primary action button for form submission
 * Includes hover and active states for better user feedback
 */
.form-actions {
    margin-top: 30px;
    margin-bottom: 0;
}

/* Primary login button with full width and consistent styling */
.login-button {
    width: 100%;
    height: 40px;    
    background: var(--color-dark);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition);
    min-height: 40px;
}

/* Hover state for better user feedback */
.login-button:hover {
    background: var(--color-dark-hover);
}

/* Active/pressed state for tactile feedback */
.login-button:active {
    background: var(--color-dark-active);
}

/* ==========================================================================
   Registration Header
   ========================================================================== */
/* 
 * Header section for registration pages
 * Includes title, subtitle, and trial information
 */
.registration-header {
    text-align: center;
    margin-bottom: 30px;
}

/* Registration page title styling */
.registration-title,
.registration-subtitle {
    color: var(--color-dark);
    margin: 0;
}

.registration-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.2;
}

.registration-subtitle {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

/* Highlighted text for trial information */
.trial-highlight {
    color: var(--color-primary);
    font-weight: 500;
}

/* Info text for registration requirements */
.info-text {
    color: var(--color-primary);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   Login Links Section
   ========================================================================== */
/* 
 * Footer links section with forgot password and registration links
 * Uses flexbox for responsive layout between desktop and mobile
 */
.login-links-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 15px;
    padding: 0;
    border: none;
    width: 100%;
    min-height: 20px;
}

/* Forgot Password Section */
.forgot-password-section {
    text-align: left;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
}

.forgot-password-link {
    color: var(--color-muted);
    /* font-size: 14px; */  /* Commented out - using default size */
    margin-right: 5px;
    line-height: 1.4;
}

/* Registration Section */
.registration-section {
    text-align: right;
    margin-top: 0;
    padding: 0;
    border: none;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.registration-text {
    color: var(--color-muted);
    font-size: 14px;
    margin-right: 5px;
}

.registration-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.registration-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* ==========================================================================
   Password Input with Toggle
   ========================================================================== */
/* 
 * Password field with show/hide toggle functionality
 * Provides better UX for password entry
 */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Toggle button positioned inside the password input */
.password-toggle-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
    z-index: 2;  /* Ensure button is above input field */
}

.password-toggle-btn:hover {
    color: var(--color-dark);
}

.password-toggle-btn:focus {
    outline: none;
    color: var(--color-primary);
}

#kc-passwd-update-form button {
    position: absolute;
    right: 24px;
    top: 6px;
    background: none !important;
    color: var(--color-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 17px;
    z-index: 200;
}

#kc-passwd-update-form .pf-c-button.pf-m-control {
    --pf-c-button--after--BorderColor: white !important;
}

/* ==========================================================================
   Recaptcha Wrapper
   ========================================================================== */
/* 
 * Container for Google reCAPTCHA widget
 * Centers the captcha and provides proper spacing
 */
.recaptcha-wrapper {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

/* ==========================================================================
   Registration Form Styles
   ========================================================================== */
/* 
 * Additional styling for registration forms
 * Ensures proper width and layout
 */
.registration-form {
    width: 100%;
}

/* ==========================================================================
   Responsive Design - Small Screens
   ========================================================================== */
/* 
 * Media queries for smaller screen heights and mobile devices
 * Ensures proper scrolling and layout on constrained screens
 */

/* Ensure registration form is scrollable on smaller screens */
@media (max-height: 600px) {
    #kc-container,
    #kc-container-wrapper,
    .kc-container {
        align-items: flex-start !important;
        padding-top: 20px !important;
    }
    
    .login-pf {
        margin-top: 0;
    }
}

/* Ensure proper scrolling behavior */
html {
    scroll-behavior: smooth;
}

/* Fix for registration form scrolling */
#registration-step2 {
    max-height: none;
    overflow: visible;
}

/* Ensure the form container allows scrolling */
.custom-login-card {
    max-height: none;
    overflow: visible;
}

/* ==========================================================================
   Back Button
   ========================================================================== */
/* 
 * Navigation button for returning to previous steps
 * Used in multi-step forms like registration
 */
.back-button-section {
    margin-top: 5px;
    margin-bottom: 20px;
}

.back-button {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 14px;
    cursor: pointer;
    padding: 8px 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color var(--transition);
}

.back-button:hover {
    color: var(--color-primary-hover);
    text-decoration: none;
}

/* ==========================================================================
   Keycloak Overrides
   ========================================================================== */
/* 
 * Override default Keycloak styling to implement custom design
 * Hides default elements and ensures proper layout
 */

/* Hide default Keycloak elements that conflict with custom design */
#kc-header,
#kc-page-title,
#kc-form-header {
    display: none;
}

#kc-form-login {
    width: 100% !important;
}

/* Ensure proper centering for all Keycloak containers */
#kc-container,
#kc-container-wrapper,
.kc-container {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 20px !important;
    background-color: white !important;
    overflow-y: auto;
}

/* Additional centering for form containers */
#kc-form,
#kc-form-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
}


/* ==========================================================================
   Responsive Design - Breakpoints
   ========================================================================== */
/* 
 * Media queries for different screen sizes
 * Ensures optimal layout and usability across devices
 */

/* Large screens (desktop) */
@media (max-width: 1200px) {
    .login-pf {
        width: 50%;
        min-width: 400px;
    }
    
    .custom-login-card {
        min-width: 40vw;
    }
}

/* Medium screens (tablet) */
@media (max-width: 768px) {
    .login-pf {
        width: 90%;
        min-width: 350px;
        max-width: 500px;
    }
    
    .custom-login-card {
        min-width: 40vw;
    }
}

/* Small screens (mobile) */
@media (max-width: 480px) {
    .login-pf {
        width: 95%;
        min-width: 300px;
        padding: 15px;
    }
    
    .custom-login-card {
        padding: 30px 20px;
        min-width: 60vw;
    }
    
    .ayfie-logo {
        font-size: 24px;
    }
    
    .title-main,
    .title-sub {
        font-size: 20px;
    }
    
    /* Stack login links vertically on mobile for better touch interaction */
    .login-links-section {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    
    .forgot-password-section,
    .registration-section {
        text-align: center;
    }
}

/* ==========================================================================
   Legacy Keycloak Compatibility
   ========================================================================== */
/* 
 * CSS variables for PatternFly (Keycloak's design system) compatibility
 * Ensures custom colors are applied to Keycloak's default components
 */
:root {
    --pf-global--primary-color--100: var(--color-primary);
    --pf-global--primary-color--200: var(--color-primary-hover);
    --pf-global--active-color--100: var(--color-primary);
    --pf-global--primary-color--dark-100: var(--color-primary);
    --pf-c-button--m-control--after--BorderBottomColor: var(--color-primary);
    --pf-c-button--m-control--hover--after--BorderBottomColor: var(--color-primary);
    --pf-c-button--m-primary--BackgroundColor: var(--color-dark);
    --pf-c-button--m-primary--hover--BackgroundColor: var(--color-dark-hover);
}

/* Override default Keycloak styling with custom design tokens */
.pf-c-button {
    border-radius: var(--border-radius);
}

.pf-c-form-control {
    border-radius: var(--border-radius);
}

/* Remove default focus outline in favor of custom focus styles */
input:focus-visible {
    outline: none;
}

/* ==========================================================================
   Keycloak Info and Registration Overrides
   ========================================================================== */
/* 
 * Additional overrides for Keycloak-specific elements
 * Ensures consistent styling across all Keycloak pages
 */

#kc-info {
    margin: 0;
}

#kc-info-wrapper {
    font-size: 13px;    
    background-color: var(--color-white);
}

#registration-step1 {
    width: 100% !important;
}

#registration-step2 {
    width: 100% !important;
}

.login-pf-page .card-pf {
    margin-bottom: 20px;
}

/* ==========================================================================
   Background Color Enforcement
   ========================================================================== */
/* 
 * Force white background on all elements to override Keycloak defaults
 * Then selectively override specific elements that need different backgrounds
 */

/* Override for specific elements that should have different backgrounds */
.custom-login-card,
.social-button,
.form-input,
.separator-text,
#kc-info-wrapper {
    background-color: var(--color-white) !important;
}

/* Button background overrides to maintain custom styling */
.login-button {
    background: var(--color-dark) !important;
}

.login-button:hover {
    background: var(--color-dark-hover) !important;
}

.login-button:active {
    background: var(--color-dark-active) !important;
}

.social-button:hover {
    background: var(--color-white) !important;
}

.pf-c-button {
    background: var(--color-dark) !important;
}

.pf-c-button:hover {
    background: var(--color-dark-hover) !important;
}

.registration-text-have-account {
    color: var(--color-dark) !important;
    text-align: center;
    margin-top: 5px;
}

/* ==========================================================================
   Form Labels and Terms & Conditions
   ========================================================================== */
/* 
 * Additional form styling and terms & conditions display
 * Ensures proper spacing and readability for legal content
 */

/* Password reset button label spacing */
.pf-c-form__label {
    margin-top: 10px;
    margin-bottom: 5px;
}

/* Terms and Conditions Styling */
.terms-content {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
    max-height: 400px;  /* Limit height with scroll for long terms */
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-dark);
    width: 100%;
    display: block;
}

.terms-content p {
    margin-bottom: 12px;
    color: var(--color-dark);
}

.terms-content strong {
    color: var(--color-dark);
    font-weight: 600;
}

.terms-content h1,
.terms-content h2,
.terms-content h3 {
    color: var(--color-dark);
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* ==========================================================================
   Terms & Conditions Form Actions
   ========================================================================== */
/* 
 * Button layout for terms acceptance forms
 * Includes accept/decline buttons with proper spacing
 */

/* Terms form actions with flexbox layout */
.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
    clear: both;
    flex-direction: row;
}

/* Ensure terms content and buttons are in separate blocks */
.terms-content {
    float: none;
    display: block;
    width: 100%;
}

#kc-form-wrapper {
    display: block;
    width: 100%;
}

#kc-form {
    display: block;
    width: 100%;
    margin-top: -20px;
}

.form-actions .login-button {
    flex: 1;
    min-height: 40px;
}

/* Decline button styling for terms rejection */
.decline-button {
    background: var(--color-muted) !important;
    color: var(--color-white) !important;
}

.decline-button:hover {
    background: #5a6268 !important;
}

.decline-button:active {
    background: #495057 !important;
}

/* Force proper layout for terms page */
#kc-content-wrapper {
    display: block !important;
    width: 100% !important;
}

#kc-content {
    display: block !important;
    width: 100% !important;
}

/* Ensure form actions are below terms content */
.terms-content + .form-actions,
#kc-form + .form-actions {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    margin-top: 20px !important;
    clear: both !important;
}