/* CSS customizado para TIM Controle */

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Ensure content is not hidden behind browser UI */
    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    
    html {
        height: -webkit-fill-available;
    }
    
    /* Better touch targets */
    button, 
    input[type="submit"] {
        min-height: 48px;
        touch-action: manipulation;
    }
    
    /* Better input experience */
    input[type="text"],
    input[type="tel"],
    input[type="email"] {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Improve container spacing on mobile */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Better form spacing */
    .login form {
        width: 100% !important;
        max-width: 100%;
    }

    /* Remove extra spacing at bottom */
    .login {
        padding-bottom: 0;
    }

    .m2b-footer.no-footer {
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    /* Extra small screens */
    .banner h2 br {
        display: none;
    }
    
    .m2b-footer h6 {
        line-height: 1.5;
    }
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available;
    }
}

/* Additional mobile improvements */
@media (max-width: 768px) {
    /* Better header on mobile */
    header .logo {
        display: inline-block;
    }

    header .numero-login {
        float: right;
        margin-top: 0;
    }

    /* Improve banner readability */
    .banner {
        background-position: center center !important;
    }

    /* All inputs should be sized consistently */
    input {
        font-size: 16px !important;
    }
}

/* Prevent horizontal scrolling on all devices */
body, html {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    height: 100%;
}

#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    height: 100%;
}

@media (max-width: 768px) {
    body, html {
        height: 100%;
        overflow-x: hidden;
    }

    #app {
        height: 100%;
        min-height: 100vh;
    }

    .login {
        height: 100%;
        min-height: 100vh;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .m2b-footer.no-footer {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Better focus states for accessibility */
button:focus,
input:focus,
select:focus {
    outline: 2px solid #6fc713;
    outline-offset: 2px;
}

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