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

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 
                 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
    background: #f9fafb !important;
    color: #111827 !important;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* ==========================================================================
   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: 235px !important; /* 196px * 1.2 = 235px */
    height: auto !important;
    display: block;
    margin: 0 auto;
}

.login-logo {
    text-align: center;
    margin-bottom: 1.8rem; /* 1.5rem * 1.2 */
    padding-top: 1.8rem; /* 1.5rem * 1.2 */
}

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

/* Main login container */
.login-container {
    max-width: 540px !important; /* 450px * 1.2 */
    margin: 3.6rem auto !important; /* 3rem * 1.2 */
    background: #ffffff !important;
    border-radius: 14px !important; /* 12px * 1.2 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    padding: 3.6rem 3rem !important; /* 3rem * 1.2, 2.5rem * 1.2 */
    border: 1px solid #e5e7eb !important;
}

/* Remove default MantisBT box styles */
.signup-box,
#login-box,
.login-container .widget-box {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !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;
}

/* ==========================================================================
   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 */
}

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

/* Hide icons inside input labels */
.login-container label .ace-icon,
.login-container label .fa-user {
    display: none !important;
}

/* ==========================================================================
   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;
    padding: 1.05rem !important; /* 0.875rem * 1.2 */
    border: 1px solid #d1d5db !important;
    border-radius: 7px !important; /* 6px * 1.2 */
    font-size: 1.35rem !important; /* 1.125rem * 1.2 */
    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;
}

/* 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;
    float: none !important; /* Override pull-right */
    padding: 1.05rem 1.8rem !important; /* 0.875rem * 1.2, 1.5rem * 1.2 */
    margin: 1.8rem 0 0 0 !important; /* 1.5rem * 1.2 */
    border: none !important;
    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;
}

.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;
}

/* ==========================================================================
   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 */
}

/* 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;
}

/* ==========================================================================
   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;
}

.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 */
    }
}

@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;
}

/* Remove any Bootstrap or MantisBT icons that don't match */
.login-container .icon-signin,
.login-container .ace-icon,
.login-container .fa-sign-in {
    display: none !important;
}

/* Hide spacing divs that interfere with layout */
.login-container .space-10,
.login-container .space-12,
.login-container .space-24,
.login-container .hidden-480 {
    display: none !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;
}

/* 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;
    }
}