/**
 * Estilos personalizados para o Recibo Smart
 */

/* Estilos gerais */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f3efe7; /* Bege suave da nova identidade */
    color: #333;
}

h1, h2, h3, h4, h5, h6 {
    color: #2c3e50; /* Azul escuro/Cinza */
}

/* Cabeçalho */
.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    background-color: #ffffff !important; /* Fundo branco */
}

.navbar-brand {
    font-weight: 700;
    color: #2c3e50 !important; /* Azul escuro */
    font-size: 1.5rem;
}

.navbar-brand i {
    color: #ff6b00; /* Lcone Laranja */
}

.navbar-dark .navbar-nav .nav-link {
    color: #555;
    font-weight: 500;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: #ff6b00;
}

.navbar-toggler {
    border-color: #ddd;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Dropdown */
.dropdown-menu {
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.dropdown-item:active {
    background-color: #ff6b00;
}

/* Cards */
.card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    background-color: #ffffff;
    margin-bottom: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.card-header {
    border-radius: 8px 8px 0 0 !important;
    font-weight: 600;
}

/* Estilos para cards de estatística */
.card-estatistica {
    text-align: center;
    padding: 30px 20px;
}

.card-estatistica .valor {
    font-size: 2.8rem;
    font-weight: 800;
    color: #2c3e50;
    margin: 10px 0;
}

.card-estatistica .texto {
    font-size: 1.1rem;
    color: #7f8c8d;
    font-weight: 500;
}

.card-estatistica .icon i {
    color: #ff6b00 !important; /* Ícones laranjas por padrão */
}

/* Form Styles - Focus State */
.form-control:focus, .form-select:focus {
    border-color: #ff6b00;
    box-shadow: 0 0 0 0.25rem rgba(255, 107, 0, 0.25);
}

/* Form Styles - Required Empty State (Attention) */
/* Targets inputs that are required but empty (placeholder-shown or invalid depending on browser) */
.form-control:required:invalid, .form-select:required:invalid {
    background-color: #f0f4f8 !important; /* Leve cinza/azul suave - Use !important to override readonly default */
    border-color: #aab2bd; /* Borda mais forte/atenção */
}

/* Helper text for required fields */
.form-text-required {
    font-size: 0.8rem;
    color: #7f8c8d;
    margin-top: 0.25rem;
    display: none; /* Hidden by default */
}

/* Show helper text only when input is invalid (empty) */
.form-control:required:invalid ~ .form-text-required,
.input-group:has(.form-control:required:invalid) ~ .form-text-required {
    display: block;
    color: #aab2bd; /* Match border color */
}

/* Fallback for browsers without :has support (always show helper text for required fields or manage via JS) 
   Currently :has is widely supported in modern browsers. 
   If not supported, we can just show it always or rely on browser default tooltip.
   For now, let's just make it always visible if we want to be safe, or use JS.
   Actually, let's make it always visible as per "Helper text: 'Obrigatório'" which sounds static.
*/
.form-text-required {
    display: block;
}

/* Ensure filled fields are neutral (overriding previous rule if they become valid) */
.form-control:required:valid, .form-select:required:valid {
    background-color: #ffffff !important; /* Use !important to override readonly default */
    border-color: #ced4da; /* Default Bootstrap border */
}

/* Fix for readonly/disabled inputs that might be required (e.g. automatic fields if they were required) */
/* We will remove required from automatic fields in PHP, but just in case: */
.form-control[readonly]:not([required]) {
    background-color: #e9ecef !important; /* Keep automatic fields gray */
}

/* Login Page Layout */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eef2f5; /* Light blue-ish gray */
    padding: 20px;
}

.login-card-container {
    display: flex;
    width: 100%;
    max-width: 1000px;
    height: 600px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.login-visual {
    flex: 1;
    background-color: #e3f2fd; /* Light Blue 50 */
    background-image: url('../img/login-background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    min-width: 300px; /* Minimum width for image */
}

/* Overlay removed to keep the image bright */
/* .login-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, rgba(255, 107, 0, 0.1), rgba(0, 0, 0, 0.3));
} */

.login-form-section {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .login-card-container {
        flex-direction: column;
        height: auto;
        max-width: 500px;
    }
    
    .login-visual {
        height: 200px; /* Shorter image on mobile */
        flex: none;
    }
    
    .login-form-section {
        padding: 30px;
    }
}

/* Modern Form Styles */
.form-control-modern {
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.form-control-modern:focus {
    background-color: #fff;
    border-color: #ff6b00;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}

.btn-primary-modern {
    background-color: #ff6b00;
    border: none;
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-primary-modern:hover {
    background-color: #e65c00;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(230, 92, 0, 0.3);
    color: white;
}

.text-orange {
    color: #ff6b00 !important;
}