/* --- RESET BÁSICO --- */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f4f7f6; color: #333; }
* { box-sizing: border-box; }

/* --- NAVBAR (Adaptada) --- */
.navbar { background-color: #007bff; padding: 15px; display: flex; justify-content: space-between; align-items: center; color: white; flex-wrap: wrap; }
.navbar a { color: white; text-decoration: none; margin-left: 15px; font-weight: 500; font-size: 16px; }
.navbar .logo { font-size: 20px; font-weight: bold; margin-left: 0; }
.nav-links { list-style: none; display: flex; margin: 0; padding: 0; }
.nav-links li { margin-left: 20px; }

/* Menu Responsivo (Mobile) */
@media (max-width: 768px) {
    .navbar { flex-direction: column; align-items: flex-start; }
    .nav-links { flex-direction: column; width: 100%; margin-top: 10px; display: none; } /* Oculto por padrão no mobile, poderia usar JS para toggle, mas vamos simplificar */
    .nav-links li { margin: 10px 0; }
    /* Para simplificar, vamos deixar os links visíveis mas empilhados se couber, ou scroll */
    .nav-links { display: flex; flex-wrap: wrap; gap: 10px; margin-left: 0; }
    .nav-links li { margin: 0; }
}

/* --- CONTAINER --- */
.container { max-width: 1100px; margin: 30px auto; background: white; padding: 25px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 95%; }

/* --- TABELAS RESPONSIVAS (O Segredo do Mobile) --- */
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { padding: 12px; border-bottom: 1px solid #ddd; text-align: left; }
th { background-color: #f8f9fa; color: #333; }

/* Envelopar tabelas para scroll no celular */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- FORMULÁRIOS --- */
input[type="text"], input[type="password"], input[type="date"], input[type="number"], input[type="file"], select, textarea {
    width: 100%; padding: 12px; margin: 8px 0; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; /* Fonte maior para não dar zoom no iPhone */
}

/* --- BOTÕES --- */
.btn-primary { background-color: #007bff; color: white; border: none; padding: 12px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; display: inline-block; }
.btn-primary:hover { background-color: #0056b3; }
.btn-sair { background-color: #dc3545; padding: 8px 15px; border-radius: 4px; }

/* --- CORES DE STATUS --- */
.abastecido { background-color: #d4edda; } /* Verde claro */
.pendente-antiga { background-color: #fff3cd; } /* Amarelo claro */
.cancelado { background-color: #f8d7da; opacity: 0.7; } /* Vermelho claro */

/* --- DICAS VISUAIS --- */
i { margin-right: 5px; }

/* --- POPUP DE INSTALAÇÃO PWA --- */
#install-popup {
    display: none; /* Começa oculto */
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 15px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 9999;
    align-items: center;
    gap: 15px;
    width: 90%;
    max-width: 400px;
}
#install-popup button {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
}