/* Niestandardowe style dla Rept.pl */

/* Ukryj branding Roundcube */
.productname,
.version,
.support-link {
    display: none !important;
}

/* Stylizuj body z gradientem */
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Centrowanie i stylizacja głównego kontenera */
#layout-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    min-height: 100vh !important;
    transform: translateY(-10%) !important;
}

/* Stylizuj formularz logowania */
#login-form {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
    padding: 30px !important;
    backdrop-filter: blur(10px) !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Stylizuj logo Rept.pl */
.rept-branding {
    text-align: center !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.rept-branding h1 {
    text-align: center !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 36px !important;
    margin: 0 0 8px 0 !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.rept-branding p {
    text-align: center !important;
    color: #666 !important;
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Stylizuj pola formularza */
#login-form .form-group,
#login-form .input-group {
    margin-bottom: 15px !important;
    width: 100% !important;
    text-align: left !important;
}

#login-form label {
    display: block !important;
    margin-bottom: 6px !important;
    color: #333 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

#login-form input[type="text"],
#login-form input[type="password"],
#login-form input[type="email"] {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 2px solid #e1e5e9 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #333 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

#login-form input[type="text"]:focus,
#login-form input[type="password"]:focus,
#login-form input[type="email"]:focus {
    outline: none !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* Stylizuj przycisk logowania */
#login-form input[type="submit"],
#login-form button[type="submit"],
#login-form .button {
    width: 100% !important;
    padding: 12px !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
    margin: 0 auto !important;
    display: block !important;
}

#login-form input[type="submit"]:hover,
#login-form button[type="submit"]:hover,
#login-form .button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3) !important;
}

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

/* Stylizuj stopkę */
#login-footer {
    text-align: center !important;
    margin-top: 20px !important;
    padding: 15px !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    border-top: 1px solid #e1e5e9 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#login-footer div {
    margin: 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    font-size: 12px !important;
}

#login-footer strong {
    color: #667eea !important;
    font-weight: 600 !important;
}

#login-footer a {
    color: #667eea !important;
    text-decoration: none !important;
}

#login-footer a:hover {
    text-decoration: underline !important;
}

/* Ukryj niepotrzebne elementy */
.voice {
    display: none !important;
}

/* Responsywność */
@media (max-width: 480px) {
    #layout-content {
        padding: 0 !important;
        max-width: 100% !important;
        transform: translateY(-5%) !important;
    }
    
    #login-form {
        padding: 25px 20px !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    .rept-branding h1 {
        font-size: 28px !important;
    }
    
    .rept-branding p {
        font-size: 12px !important;
    }
}

/* Ukryj oryginalny branding Neo360 */
.neo360-branding {
    display: none !important;
}

/* Dodatkowe poprawki dla lepszego wyrównania */
#login-form * {
    box-sizing: border-box !important;
}

/* Stylizacja input-group dla ikon */
#login-form .input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
}

#login-form .input-group .input-group-addon {
    flex-shrink: 0 !important;
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8f9fa !important;
    border: 2px solid #e1e5e9 !important;
    border-right: none !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    color: #666 !important;
}

#login-form .input-group input {
    flex: 1 !important;
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

#login-form .input-group input:focus {
    border-left: 2px solid #667eea !important;
    margin-left: -2px !important;
}

/* Stylizacja dla zwykłych pól bez ikon */
#login-form input:not(.input-group input) {
    border-radius: 8px !important;
}

/* Poprawki dla różnych typów formularzy */
#login-form .propform {
    width: 100% !important;
    text-align: center !important;
}

#login-form .propform > * {
    width: 100% !important;
}

/* Stylizacja dla błędów */
#login-form .error,
#login-form .message.error {
    background: #ff6b6b !important;
    color: white !important;
    padding: 10px !important;
    border-radius: 6px !important;
    margin-bottom: 15px !important;
    font-size: 12px !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Stylizacja dla sukcesu */
#login-form .message.success {
    background: #51cf66 !important;
    color: white !important;
    padding: 10px !important;
    border-radius: 6px !important;
    margin-bottom: 15px !important;
    font-size: 12px !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Dodatkowe centrowanie dla wszystkich elementów */
#login-form,
#login-form *,
.rept-branding,
.rept-branding * {
    text-align: center !important;
}

#login-form label,
#login-form input,
#login-form .form-group,
#login-form .input-group {
    text-align: left !important;
}

/* Idealne centrowanie dla całej strony */
html, body {
    height: 100% !important;
    overflow-x: hidden !important;
}

/* Centrowanie dla różnych rozmiarów ekranu */
@media (min-width: 768px) {
    #layout-content {
        max-width: 600px !important;
        transform: translateY(-8%) !important;
    }
    
    #login-form {
        max-width: 450px !important;
    }
}

@media (min-width: 1024px) {
    #layout-content {
        max-width: 700px !important;
        transform: translateY(-12%) !important;
    }
    
    #login-form {
        max-width: 500px !important;
    }
}