/**
 * MantisBT Custom CSS - SimplePortal Modern Design
 * Clean, modern login page matching the SimplePortal user interface
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Color Palette */
    --color-primary: #3b82f6;
    --color-primary-hover: #2563eb;
    --color-text-primary: #111827;
    --color-text-secondary: #374151;
    --color-text-tertiary: #6b7280;
    --color-border: #d1d5db;
    --color-border-light: #e5e7eb;
    --color-background: #ffffff;
    --color-background-page: #f9fafb;
    --color-background-disabled: #f3f4f6;
    --color-background-hover: #f9fafb;
    --color-border-hover: #9ca3af;
    
    /* Alert Colors */
    --color-error-bg: #fef2f2;
    --color-error-text: #991b1b;
    --color-error-border: #fecaca;
    --color-info-bg: #eff6ff;
    --color-info-text: #1e40af;
    --color-info-border: #bfdbfe;
    --color-success-bg: #f0fdf4;
    --color-success-text: #166534;
    --color-success-border: #bbf7d0;
    
    /* Spacing Scale (1.2x multiplier applied) */
    --spacing-xs: 0.3rem;   /* 0.25rem * 1.2 */
    --spacing-sm: 0.6rem;   /* 0.5rem * 1.2 */
    --spacing-base: 1.2rem; /* 1rem * 1.2 */
    --spacing-md: 1.8rem;   /* 1.5rem * 1.2 */
    --spacing-lg: 2.4rem;   /* 2rem * 1.2 */
    --spacing-xl: 3rem;     /* 2.5rem * 1.2 */
    --spacing-2xl: 3.6rem;  /* 3rem * 1.2 */
    
    /* Sizing */
    --input-height: 40px;
    --input-height-mobile: 48px; /* Touch-friendly minimum */
    --border-radius: 7px;        /* 6px * 1.2 */
    --border-radius-lg: 14px;    /* 12px * 1.2 */
    --container-max-width: 540px; /* 450px * 1.2 */
    --logo-width: 235px;          /* 196px * 1.2 */
    --logo-width-mobile: 185px;   /* 154px * 1.2 */
    --logo-width-small: 151px;    /* 126px * 1.2 */
    
    /* Typography */
    --font-size-sm: 1.05rem;      /* 0.875rem * 1.2 */
    --font-size-base: 1.3rem;
    --font-size-md: 1.35rem;      /* 1.125rem * 1.2 */
    --font-size-lg: 1.8rem;       /* 1.5rem * 1.2 */
    --font-size-icon: 1.2rem;
    --font-size-icon-lg: 2rem;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.6;
    
    /* Transitions */
    --transition-base: 0.2s ease;
    
    /* Shadows */
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.1);
    
    /* Specific adjustments */
    --icon-vertical-offset: 3px; /* Visual centering adjustment for 40px inputs */
    --icon-padding: 2.8rem;      /* Space for icons in input fields */
}

/* ==========================================================================
   Global Styles - Apply Modern Font and Background
   ========================================================================== */

/* Force override inline font style with high specificity - exclude icon fonts */
body,
body *:not(.fa):not(.ace-icon):not([class*="fa-"]):not(.glyphicon):not([class*="icon-"]) {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 
                 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
}

/* Ensure FontAwesome icons use correct font */
.fa,
.ace-icon,
[class*="fa-"],
.glyphicon,
[class*="icon-"] {
    font-family: FontAwesome !important;
}

/* Remove all text shadows from login page */
.login-container,
.login-container * {
    text-shadow: none !important;
}

body {
    background: var(--color-background-page) !important;
    color: var(--color-text-primary) !important;
    margin: 0;
    padding: 0;
    line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   Logo Replacement - Montessori Branding
   ========================================================================== */

/* Replace default logo with Montessori logo */
.login-logo img,
.navbar-brand img {
    content: url('../plugin_file.php?file=SimplePortal/images/montessori_logo_2021.png') !important;
    max-width: var(--logo-width) !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
}

.login-logo {
    text-align: center;
    margin-bottom: var(--spacing-md);
    padding-top: var(--spacing-md);
}

/* ==========================================================================
   Login Container - Modern Card Design
   ========================================================================== */

/* Flatten nested container structure - remove all styling from inner containers */
.login-container,
.login-container .position-relative,
.login-container .signup-box,
.login-container #login-box,
.login-container .widget-box,
.login-container .widget-body,
.login-container .widget-main,
.login-container .header  {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100% !important;
    max-width: none !important;
    line-height: 0 !important;
}

/* Only the outermost login container gets styling */
.login-container {
    max-width: var(--container-max-width) !important;
    margin: var(--spacing-2xl) auto !important;
    background: var(--color-background) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
    padding: var(--spacing-2xl) var(--spacing-xl) !important;
    border: 1px solid var(--color-border-light) !important;
}

/* Hide default widget headers */
.login-container .widget-header,
.login-container .widget-title {
    display: none !important;
}

/* Clean widget body */
.login-container .widget-body,
.login-container .widget-main {
    padding: 0 !important;
    margin: 0 !important;
    background-color: none !important;
}

/* ==========================================================================
   Form Labels - Modern Typography
   ========================================================================== */

.login-container label,
.login-container .control-label {
    display: block !important;
    font-weight: 500 !important;
    margin-bottom: 0.6rem !important; /* 0.5rem * 1.2 */
    color: #374151 !important;
    font-size: 1.05rem !important; /* 0.875rem * 1.2 */
}

/* Input icon containers */
.login-container label span.input-icon {
    display: block !important;
    position: relative !important;
}

/* Icons inside input fields - properly positioned and visible */
.login-container .input-icon > .ace-icon {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(calc(-50% + 3px)) !important; /* Move 3px down for better centering */
    z-index: 2 !important;
    font-size: 1.2rem !important; /* 16px base, slightly larger */
    line-height: 1 !important;
    color: #6b7280 !important; /* Gray color for visibility */
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none !important;
}

/* Right-aligned icons (default for login inputs) */
.login-container .input-icon-right > .ace-icon {
    right: 1rem !important;
    left: auto !important;
}

/* Left-aligned icons */
.login-container .input-icon:not(.input-icon-right) > .ace-icon {
    left: 1rem !important;
    right: auto !important;
}

/* Input with right icon - add padding on right */
.login-container .input-icon-right > input {
    padding-right: 2.8rem !important; /* Make room for icon */
}

/* Input with left icon - add padding on left */
.login-container .input-icon:not(.input-icon-right) > input {
    padding-left: 2.8rem !important; /* Make room for icon */
}

/* Icon focus state */
.login-container .input-icon > input:focus + .ace-icon {
    color: #3b82f6 !important; /* Blue when focused */
}

/* ==========================================================================
   Form Inputs - Clean Modern Style
   ========================================================================== */

.login-container input[type="text"],
.login-container input[type="password"],
.login-container input[type="email"],
.login-container select {
    width: 100% !important;
    height: 40px !important; /* Explicit height for consistent sizing */
    padding: 0 1.05rem !important; /* Horizontal padding only, vertical handled by height */
    border: 1px solid #d1d5db !important;
    border-radius: 7px !important; /* 6px * 1.2 */
    font-size: 1.35rem !important; /* 1.125rem * 1.2 */
    font-weight: 500 !important; /* Match button font-weight for consistent appearance */
    transition: all 0.2s ease !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    text-shadow: none !important; /* Remove text shadows */
}

/* Focus states */
.login-container input[type="text"]:focus,
.login-container input[type="password"]:focus,
.login-container input[type="email"]:focus,
.login-container select:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Disabled inputs */
.login-container input:disabled,
.login-container select:disabled {
    background: #f3f4f6 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

/* ==========================================================================
   Buttons - Primary & Secondary Styles
   ========================================================================== */

/* Primary button (Login button) */
.login-container button[type="submit"],
.login-container input[type="submit"],
.login-container .btn-primary,
.login-container .btn-success,
.login-container .button-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 40px !important; /* Explicit height to match inputs */
    float: none !important; /* Override pull-right */
    padding: 0 1.8rem !important; /* Horizontal padding only, vertical handled by height */
    margin: 1.8rem 0 0 0 !important; /* 1.5rem * 1.2 */
    border: 1px solid transparent !important; /* Match input border width */
    border-radius: 7px !important; /* 6px * 1.2 */
    font-size: 1.35rem !important; /* 1.125rem * 1.2 */
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    background: #3b82f6 !important;
    color: #ffffff !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    text-shadow: none !important; /* Remove text shadows */
}

/* Override pull-right and width-40 specifically for submit buttons */
.login-container input[type="submit"].pull-right,
.login-container button[type="submit"].pull-right,
.login-container .btn-success.pull-right {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.login-container button[type="submit"]:hover,
.login-container input[type="submit"]:hover,
.login-container .btn-primary:hover,
.login-container .btn-success:hover,
.login-container .button-primary:hover {
    background: #2563eb !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.login-container button[type="submit"]:active,
.login-container input[type="submit"]:active {
    transform: translateY(0);
}

/* Secondary button (Signup/other actions) */
.login-container .btn-secondary,
.login-container .button-secondary,
.login-container a.btn,
.login-container a.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0.75rem 1.5rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    background: #ffffff !important;
    color: #374151 !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}

.login-container .btn-secondary:hover,
.login-container .button-secondary:hover,
.login-container a.btn:hover,
.login-container a.button:hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   Links - Clean Style
   ========================================================================== */

.login-container a {
    color: #3b82f6 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    font-weight: 500;
}

.login-container a:hover {
    color: #2563eb !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   Form Groups & Spacing
   ========================================================================== */

.login-container .form-group,
.login-container .control-group,
.login-container .widget-toolbox {
    margin-bottom: 1.8rem !important; /* 1.5rem * 1.2 */
    border: none !important;
    padding: 0 !important;
}

.login-container .form-group:last-child,
.login-container .control-group:last-child {
    margin-bottom: 0 !important;
}

/* Checkbox container */
.login-container .checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important; /* 0.5rem * 1.2 */
}

.login-container input[type="checkbox"] {
    width: auto !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.login-container .checkbox label {
    margin: 0 !important;
    cursor: pointer !important;
    user-select: none;
}

/* Inline labels (used for checkboxes on password page) */
.login-container label.inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    margin-bottom: 0.6rem !important;
    cursor: pointer !important;
}

.login-container label.inline input[type="checkbox"] {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.login-container label.inline .lbl {
    display: inline !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-size: var(--font-size-sm) !important;
    color: var(--color-text-secondary) !important;
    user-select: none;
}

/* ==========================================================================
   Login Checkboxes - Hide and Set Defaults
   ========================================================================== */

/* Hide the "Remember Login" checkbox and its label */
.login-container #remember-login,
.login-container label[for="remember-login"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
}

/* Hide the "Secure Session" checkbox and its label */
.login-container #secure-session,
.login-container label[for="secure-session"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
}

/* Form text/instructions - Merged fieldset rules for DRY principles */
.login-container form > fieldset,
.login-container form fieldset,
.login-container fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    font-size: var(--font-size-base) !important;
    color: var(--color-text-tertiary) !important;
    line-height: var(--line-height-relaxed) !important;
    white-space: normal !important; /* Ensure text wraps properly */
}

/* Style text nodes and direct children elements in fieldsets */
/* Utility class .form-text can also be used manually if needed */
.login-container fieldset > div:not(.input):not(.space-10):not(#captcha-input):not(.clearfix),
.login-container fieldset > p,
.login-container fieldset > span:not(.input-icon):not(.block),
.login-container .form-text {
    display: block !important;
    clear: both !important;
    font-size: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
    margin: var(--spacing-base) 0 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Ensure proper spacing between form elements */
.login-container label + .space-10,
.login-container .space-10 {
    height: 1.2rem !important;
    display: block !important;
    clear: both !important;
}

/* ==========================================================================
   Alerts & Messages - Modern Style
   ========================================================================== */

.alert,
.alert-box {
    padding: 1.2rem !important; /* 1rem * 1.2 */
    border-radius: 7px !important; /* 6px * 1.2 */
    margin-bottom: 1.8rem !important; /* 1.5rem * 1.2 */
    border: 1px solid transparent !important;
    font-size: 1.05rem !important; /* 0.875rem * 1.2 */
    line-height: var(--line-height-relaxed) !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Error/Danger messages */
.alert-danger,
.alert-error,
.alert-warning {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
}

/* Info messages */
.alert-info {
    background: #eff6ff !important;
    color: #1e40af !important;
    border-color: #bfdbfe !important;
}

/* Success messages */
.alert-success {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border-color: #bbf7d0 !important;
}

/* Alert paragraphs - ensure proper spacing and wrapping */
.login-container .alert p,
.login-container .alert-box p {
    margin: 0 0 0.6rem 0 !important;
    line-height: inherit !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.login-container .alert p:last-child,
.login-container .alert-box p:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   Captcha Section - Signup Page (Hybrid Layout - Modern + Original Structure)
   ========================================================================== */

/* Captcha container - grid layout for better control */
.login-container #captcha-input {
    display: grid !important;
    grid-template-columns: auto auto auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin: 1.8rem 0 !important;
    clear: both !important; /* Prevent overlap with elements above */
}

/* Captcha text input field - first column, spans both rows */
.login-container #captcha-field {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    height: 40px !important; /* Keep 40px height */
    max-width: 300px !important; /* Don't take full width */
    padding: 0 1.05rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 7px !important;
    font-size: 1.35rem !important;
    font-weight: 500 !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    text-shadow: none !important;
}

/* Captcha image wrapper - second column, spans both rows, aligned right */
.login-container #captcha-image {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: end !important; /* Align to the right of column 2 */
    text-align: right !important;
}

.login-container #captcha-image img {
    display: inline-block !important;
    margin: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    vertical-align: middle !important;
}

/* Audio controls - third column, first row */
.login-container #captcha_image_audio_controls {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Refresh button - third column, second row */
.login-container #captcha-refresh {
    grid-column: 3 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Audio and refresh buttons */
.login-container .captcha_play_button,
.login-container #captcha-refresh {
    color: #6b7280 !important; /* Grey color to match other icons */
    text-decoration: none !important;
    padding: 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s ease !important;
}

.login-container .captcha_play_button:hover,
.login-container #captcha-refresh:hover {
    color: #374151 !important; /* Darker grey on hover */
    text-decoration: none !important; /* Remove underline on hover */
}

/* Play icon (volume) - visible by default */
.login-container .captcha_play_button .captcha_play_image,
.login-container #captcha-refresh .ace-icon {
    font-size: 2rem !important;
    display: inline-block !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    color: inherit !important;
}

/* Loading spinner icon - hidden by default, shown by JS during audio playback */
.login-container .captcha_play_button .captcha_loading_image {
    font-size: 2rem !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    color: inherit !important;
    display: none !important; /* Hidden by default, JS will toggle */
}

/* Hide audio element (not needed visually) */
.login-container #captcha_image_audio_div {
    display: none !important;
}

/* Captcha instruction label */
.login-container label[for="captcha-field"] {
    margin-bottom: 1.2rem !important;
    display: block !important;
    clear: both !important; /* Prevent overlap */
}

.login-container label[for="captcha-field"] strong {
    font-size: 1.05rem !important; /* 0.875rem * 1.2 */
    font-weight: 500 !important;
    color: #374151 !important;
    display: block !important;
    line-height: 1.6 !important;
}

/* Responsive behavior - stack on mobile */
@media (max-width: 768px) {
    .login-container #captcha-input {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto !important;
        gap: 1rem !important;
    }
    
    .login-container #captcha-field {
        grid-column: 1 !important;
        grid-row: 1 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .login-container #captcha-image {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: center !important;
    }
    
    .login-container #captcha_image_audio_controls {
        grid-column: 1 !important;
        grid-row: 3 !important;
        justify-self: center !important;
    }
    
    .login-container #captcha-refresh {
        grid-column: 1 !important;
        grid-row: 4 !important;
        justify-self: center !important;
    }
}

/* Fix any text/elements below captcha that might overlap */
.login-container #captcha-input ~ *:not(input[type="submit"]):not(button[type="submit"]) {
    clear: both !important;
    margin-top: 0 !important; /* Reset to prevent double spacing */
}

.login-container #captcha-input ~ .clearfix {
    display: block !important;
    clear: both !important;
    height: 0 !important;
}

.login-container #captcha-input ~ .space-10 {
    display: block !important;
    height: 1.2rem !important;
    clear: both !important;
}

/* Ensure help text below captcha has proper spacing and wrapping */
.login-container .help-text,
.login-container .small-text {
    display: block !important;
    clear: both !important;
    margin-top: 1.2rem !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* ==========================================================================
   Additional Elements
   ========================================================================== */

/* Help text */
.login-container .help-block,
.login-container .help-inline {
    font-size: 1.05rem !important; /* 0.875rem * 1.2 */
    color: #6b7280 !important;
    margin-top: 0.3rem !important; /* 0.25rem * 1.2 */
}

/* Dividers */
.login-container hr {
    border: none !important;
    border-top: 1px solid #e5e7eb !important;
    margin: 1.8rem 0 !important; /* 1.5rem * 1.2 */
}

/* Action footer */
.login-container .form-actions,
.login-container .widget-toolbox,
.login-container .toolbar {
    text-align: center !important;
    padding-top: 2.4rem !important; /* 2rem * 1.2 */
    border-top: none !important;
    margin-top: 2.4rem !important; /* 2rem * 1.2 */
    background: transparent !important;
}

/* Remove pull-left to allow centering */
.login-container .toolbar .pull-left {
    float: none !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Signup link - Simple bold link style (no button) - Centered and larger */
.login-container .toolbar a,
.login-container .back-to-login-link {
    display: block !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1.35rem !important; /* 1.125rem * 1.2 */
    padding: 0 !important;
    margin: 0 auto !important;
    border: none !important;
    background: transparent !important;
    transition: color 0.2s ease !important;
    text-align: center !important;
    text-shadow: none !important; /* Remove text shadows */
}

.login-container .toolbar a:hover,
.login-container .back-to-login-link:hover {
    color: #3b82f6 !important;
    text-decoration: none !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    .login-container {
        margin: 1.8rem 1.2rem !important; /* 1.5rem * 1.2, 1rem * 1.2 */
        padding: 2.4rem 1.8rem !important; /* 2rem * 1.2, 1.5rem * 1.2 */
    }
    
    .login-logo img,
    .navbar-brand img {
        max-width: 185px !important; /* 154px * 1.2 */
    }
    
    .login-logo {
        padding-top: 1.2rem; /* 1rem * 1.2 */
        margin-bottom: 1.8rem; /* 1.5rem * 1.2 */
    }
    
    /* Touch-friendly spacing - ensure minimum tap target size */
    .login-container input[type="text"],
    .login-container input[type="password"],
    .login-container input[type="email"],
    .login-container button[type="submit"],
    .login-container input[type="submit"] {
        min-height: 48px !important; /* Touch-friendly minimum */
    }
}

@media (max-width: 480px) {
    .login-container {
        margin: 1.2rem 0.6rem !important; /* 1rem * 1.2, 0.5rem * 1.2 */
        padding: 1.8rem 1.2rem !important; /* 1.5rem * 1.2, 1rem * 1.2 */
    }
    
    .login-logo img,
    .navbar-brand img {
        max-width: 151px !important; /* 126px * 1.2 */
    }
}

/* ==========================================================================
   Override MantisBT Default Styles
   ========================================================================== */

/* Remove default padding/margins that conflict */
.login-container .widget-box {
    margin-bottom: 0 !important;
}

.login-container .widget-body {
    border: none !important;
}

.login-container .form-title {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 1.5rem !important;
    text-align: center;
}

/* Icons are now visible on login and signup pages for better UX */

/* Hide spacing divs - except those needed for proper spacing */
/* Exception: .space-10 elements after #captcha-input and after labels are kept visible (see earlier rules) */
.login-container .space-10:not(#captcha-input ~ .space-10):not(label + .space-10),
.login-container .space-12,
.login-container .space-24,
.login-container .hidden-480 {
    display: none !important;
    position: absolute !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Hide clearfix in toolbar to prevent layout issues */
.login-container .toolbar .clearfix {
    display: none !important;
}

/* Login page headline - Replace "Login" with "Monte IT Helpdesk" */
.login-container h4.header {
    font-size: 1.8rem !important; /* 1.5rem * 1.2 */
    font-weight: 600 !important;
    color: #111827 !important;
    text-align: center !important;
    margin-bottom: 2.4rem !important; /* 2rem * 1.2 */
    margin-top: 0 !important;
    line-height: 20px !important;
}

/* Use CSS to replace text content */
.login-container h4.header::before {
    content: "Monte IT Helpdesk" !important;
    display: block;
}

/* Hide original "Login" text and "Anmeldung" */
.login-container h4.header {
    font-size: 0 !important; /* Hide all original text */
}

.login-container h4.header::before {
    font-size: 1.8rem !important; /* 1.5rem * 1.2 - Restore size for new text */
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .login-container {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
}