/* ========================================= */ /* Variáveis CSS (Definições Globais de Cores) */ /* ========================================= */ :root { --primary-color: #007bff; /* Azul padrão do Bootstrap */ --secondary-color: #6c757d; /* Cinza padrão do Bootstrap */ --success-color: #28a745; /* Verde padrão do Bootstrap */ --info-color: #17a2b8; /* Ciano padrão do Bootstrap */ --warning-color: #ffc107; /* Amarelo padrão do Bootstrap */ --danger-color: #dc3545; /* Vermelho padrão do Bootstrap */ --light-color: #f8f9fa; /* Cinza claro padrão do Bootstrap */ --dark-color: #343a40; /* Cinza escuro padrão do Bootstrap */ --white-color: #ffffff; --text-color-dark: #333; --text-color-light: #555; } /* ========================================= */ /* Reset Básico e Estilos Essenciais */ /* ========================================= */ html { height: 100%; /* Garante que o elemento raiz HTML ocupe 100% da altura da viewport */ box-sizing: border-box; /* Garante que padding e borda não aumentem o tamanho total */ } *, *::before, *::after { box-sizing: inherit; /* Faz com que todos os elementos herdem o box-sizing do html */ } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background-color: #eef1f5; /* Um cinza claro suave */ color: var(--text-color-dark); line-height: 1.6; min-height: 100vh; /* Garante que o body tenha no mínimo 100% da altura da viewport */ overflow-x: hidden; /* Evita rolagem horizontal indesejada */ } /* ========================================= */ /* Estilos Específicos da Página de Login */ /* Para usar esta classe, seu body na página de login deve ser */ /* Se sua página de login não tem essa classe e os estilos estão no body padrão, você pode ignorar este bloco */ body.login-page { display: flex; /* ESSENCIAL: Transforma o body em um contêiner flexível */ justify-content: center; /* ESSENCIAL: Centraliza o conteúdo horizontalmente */ align-items: center; /* ESSENCIAL: Centraliza o conteúdo verticalmente */ /* background-color: #eef2f6; */ /* Já definida no body geral */ /* min-height: 100vh; */ /* Já definida no body geral */ box-sizing: border-box; } .login-container { background-color: var(--white-color); padding: 40px 30px; border-radius: 10px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); width: 100%; max-width: 450px; text-align: center; box-sizing: border-box; } .login-container h2 { color: var(--text-color-dark); margin-bottom: 30px; font-size: 2em; font-weight: 600; } .login-container form { max-width: 350px; margin: 0 auto; text-align: left; } .login-container form label { display: block; text-align: left; margin-bottom: 8px; color: var(--text-color-light); font-weight: 600; font-size: 0.95em; } .login-container form input[type="email"], .login-container form input[type="password"] { width: 100%; padding: 12px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; font-size: 1.05em; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .login-container form input[type="email"]:focus, .login-container form input[type="password"]:focus { border-color: var(--primary-color); box-shadow: 0 0 8px rgba(0, 123, 255, 0.4); outline: none; } .login-container form button { background-color: var(--success-color); color: var(--white-color); padding: 14px 25px; border: none; border-radius: 8px; cursor: pointer; font-size: 1.1em; font-weight: bold; width: 100%; transition: background-color 0.3s ease, transform 0.2s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .login-container form button:hover { background-color: #218838; /* Darker green */ transform: translateY(-3px); } .login-container p { margin-top: -10px; margin-bottom: 25px; font-size: 0.9em; } /* ========================================= */ /* Estilos Gerais (Aplicáveis a todo o site) */ /* ========================================= */ .container { padding: 20px; max-width: 1300px; /* Aumentado para mais espaço */ margin: 20px auto; /* Centraliza com margem superior/inferior */ background-color: var(--white-color); border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } h1, h2, h3 { color: var(--primary-color); margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; } /* Navbar */ .navbar { background-color: var(--primary-color); padding: 15px 25px; color: var(--white-color); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .navbar .logo { font-size: 26px; font-weight: bold; color: var(--white-color); text-decoration: none; display: flex; /* Adicionado para alinhar logo e texto */ align-items: center; /* Alinha verticalmente */ gap: 10px; /* Espaço entre logo e texto */ } /* Estilo para o logotipo dentro da navbar */ .navbar .logo img { height: 40px; /* Altura do seu logotipo na navbar */ width: auto; vertical-align: middle; /* Ajuda no alinhamento vertical */ } .navbar .nav-links a { color: var(--white-color); text-decoration: none; padding: 10px 18px; border-radius: 5px; transition: background-color 0.3s ease, transform 0.2s ease; font-weight: 500; } .navbar .nav-links a:hover { background-color: #0056b3; /* Darker primary */ transform: translateY(-2px); } .navbar .nav-links a.active { background-color: #0056b3; /* Darker primary */ box-shadow: inset 0 0 8px rgba(0,0,0,0.2); } /* Mensagens de Feedback */ .message, .error { padding: 12px 20px; margin-bottom: 20px; border-radius: 8px; font-weight: bold; display: flex; align-items: center; gap: 10px; } .message { background-color: #d4edda; /* Light green */ color: #155724; /* Dark green */ border: 1px solid #c3e6cb; } .error { background-color: #f8d7da; /* Light red */ color: #721c24; /* Dark red */ border: 1px solid #f5c6cb; } /* Formulário */ form { background-color: #f9f9f9; padding: 25px; border-radius: 8px; border: 1px solid #e0e0e0; margin-bottom: 30px; } .form-row { display: flex; flex-wrap: wrap; /* Permite quebrar linha em telas menores */ gap: 20px; /* Espaço entre os grupos de formulário */ margin-bottom: 15px; } .form-group { flex: 1; /* Permite que os grupos cresçam e ocupem o espaço disponível */ min-width: 280px; /* Garante um tamanho mínimo para evitar colapso */ display: flex; flex-direction: column; } .form-group.full-width { flex: 1 1 100%; /* Ocupa 100% da largura disponível */ } .form-group label { margin-bottom: 8px; font-weight: bold; color: var(--text-color-light); display: block; /* Garante que o label ocupe sua própria linha */ } .form-group input[type="text"], .form-group input[type="number"], .form-group input[type="date"], .form-group input[type="time"], .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; box-sizing: border-box; /* Inclui padding e borda na largura total */ transition: border-color 0.3s ease, box-shadow 0.3s ease; background-color: var(--white-color); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); outline: none; } .form-group textarea { resize: vertical; /* Permite redimensionar verticalmente */ min-height: 80px; } form button { padding: 12px 25px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; font-weight: 600; transition: background-color 0.3s ease, transform 0.2s ease; margin-right: 15px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } form button:hover { transform: translateY(-2px); } form button[type="submit"] { background-color: var(--success-color); color: var(--white-color); } form button[type="submit"]:hover { background-color: #218838; /* Darker green */ } form button.cancel { background-color: var(--secondary-color); /* Cinza para cancelar */ color: var(--white-color); } form button.cancel:hover { background-color: #5a6268; /* Darker gray */ } button#consultarGemini { background-color: #673ab7; /* Deep Purple */ color: white; padding: 12px 25px; margin-bottom: 15px; width: auto; /* Ajuste para o conteúdo */ display: block; /* Para que a margin-bottom funcione bem */ } button#consultarGemini:hover { background-color: #5e35b1; /* Darker Deep Purple */ } #geminiResponseContainer button { background-color: var(--primary-color); color: var(--white-color); padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-top: 15px; transition: background-color 0.3s ease; } #geminiResponseContainer button:hover { background-color: #0056b3; /* Darker primary color */ } /* ========================================= */ /* Tabela */ /* ========================================= */ table { width: 100%; border-collapse: collapse; margin-top: 20px; background-color: var(--white-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); border-radius: 8px; overflow: hidden; /* Garante que bordas arredondadas funcionem com overflow */ } table thead { background-color: var(--primary-color); color: var(--white-color); } table th, table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; box-sizing: border-box; /* Garante que padding não cause overflow */ } table th { font-weight: bold; white-space: normal; /* Evita que o texto do cabeçalho quebre */ } table tbody tr:nth-child(even) { background-color: #f8f8f8; /* Linhas zebradas */ } table tbody tr:hover { background-color: #f1f1f1; } .actions a { display: inline-block; padding: 6px 12px; margin-right: 8px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: background-color 0.3s ease; } .actions .edit { background-color: var(--warning-color); color: var(--text-color-dark); /* Texto escuro para contraste no amarelo */ } .actions .edit:hover { background-color: #e0a800; /* Darker yellow */ } .actions .delete { background-color: var(--danger-color); color: var(--white-color); } .actions .delete:hover { background-color: #c82333; /* Darker red */ } /* ========================================= */ /* Estilos para Postit-Cards (Painel) */ /* ========================================= */ .postit-card { border: 1px solid #ccc; border-radius: 8px; padding: 15px; margin-bottom: 20px; min-height: 150px; /* Ajuste conforme necessário */ display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.2s ease-in-out; } .postit-card:hover { transform: translateY(-5px); } .postit-drone { background-color: #e6f7ff; /* Azul claro */ border-color: #b3e0ff; } .postit-bateria { background-color: #e6ffe6; /* Verde claro */ border-color: #b3ffb3; } .postit-bateria-proxima { /* NOVO ESTILO */ background-color: #fff0e6; /* Laranja/Pêssego claro - Usando cor próxima a 'info' ou 'warning' */ border-color: #ffcc99; } .postit-operador { background-color: #fffae6; /* Amarelo claro */ border-color: #ffe0b3; } .postit-data-local { background-color: #f2e6ff; /* Roxo claro */ border-color: #d9b3ff; } /* ========================================= */ /* Rodapé */ /* ========================================= */ /* Se o footer.php for usado, remova este estilo daqui e deixe-o lá */ footer { text-align: center; padding: 20px; margin-top: 40px; color: #777; font-size: 14px; background-color: #f0f0f0; border-top: 1px solid #e0e0e0; } /* ========================================= */ /* Responsividade para Tabelas (Card-like em Mobile) - Aplicado para todas as tabelas */ /* ========================================= */ @media (max-width: 767.98px) { .table-responsive { border: 0; /* Remove a borda da div responsive em mobile */ margin-top: 20px; /* Adiciona um pouco de espaço acima da tabela em mobile */ } .table-responsive > table { /* Alterado para > table para ser mais específico */ border-collapse: separate; /* Permite bordas arredondadas e margin-bottom */ border-spacing: 0 10px; /* Espaçamento entre os "cards" das linhas */ width: 100%; /* Garante que a tabela ocupe 100% da largura disponível */ box-shadow: none; /* Remove a sombra da tabela principal, a sombra fica nas linhas */ } .table-responsive > table thead { /* Oculta o cabeçalho da tabela em telas pequenas */ border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; /* Apenas para leitores de tela */ } .table-responsive > table tr { /* Alterado para > table tr */ display: block; /* Cada linha da tabela se torna um bloco */ margin-bottom: 0.625em; /* Espaçamento entre os blocos */ border: 1px solid #dee2e6; border-radius: 8px; /* Cantos arredondados para o "card" da linha */ background-color: var(--white-color); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); padding: 10px; /* Adiciona padding interno ao card da linha */ } .table-responsive > table td { /* Alterado para > table td */ display: block; /* Cada célula se torna um bloco dentro da linha */ text-align: right; /* Alinha o valor à direita */ font-size: 0.9em; /* Reduz um pouco o tamanho da fonte */ padding-left: 45%; /* Espaço para o "label" - ligeiramente reduzido */ position: relative; /* Para posicionar o "label" */ border: none; /* Remove bordas internas das células */ padding-top: 0.5em; /* Ajusta padding vertical */ padding-bottom: 0.5em; overflow-wrap: break-word; /* Força a quebra de palavras longas */ word-break: break-word; /* Força quebra de palavras em qualquer lugar */ hyphens: auto; /* Permite hifenização para melhor ajuste */ box-sizing: border-box; /* Garante que padding não cause overflow */ } .table-responsive > table td::before { /* Alterado para > table td::before */ /* Adiciona o "label" (cabeçalho da coluna) antes de cada célula de dado */ content: attr(data-label); /* Pega o valor do atributo data-label */ position: absolute; left: 10px; /* Posição do label */ width: 40%; /* Largura do label - ligeiramente reduzida */ padding-right: 10px; white-space: normal; /* Permite que o label quebre linha se for muito longo */ overflow: hidden; text-overflow: ellipsis; /* Adiciona "..." se o label for muito longo */ font-weight: bold; /* O label é negrito */ text-align: left; /* O label alinha à esquerda */ color: var(--primary-color); /* Usa a cor primária para os labels */ box-sizing: border-box; /* Garante que padding não cause overflow */ } /* Garante que links dentro da tabela também quebrem */ .table-responsive > table a { /* Alterado para > table a */ word-break: break-all; display: inline-block; /* Permite que os links se adaptem melhor */ } /* Ajuste para o status badge dentro da célula da tabela em mobile */ .status-badge { /* Removido > table td[data-label="Estado"] para ser mais genérico, se o badge for usado em outros lugares */ font-size: 0.8em; /* Um pouco maior para ser legível */ padding: 4px 8px; /* Ajusta o padding */ height: auto; /* Permite que a altura se ajuste ao conteúdo */ display: inline-block; /* Garante que ele se comporte como um bloco inline */ vertical-align: middle; /* Alinha verticalmente */ } /* Ajuste para os links de ação na célula de "Ações" */ .table-responsive > table td.actions { display: flex; /* Transforma em flexbox para alinhar botões */ flex-wrap: wrap; /* Permite que os botões quebrem */ justify-content: flex-end; /* Alinha os botões à direita */ gap: 8px; /* Espaço entre os botões */ text-align: right; /* Alinha o texto do label à direita */ /* Garantir que esta célula não tenha um min-width que impeça o layout flex */ min-width: unset; align-items: center; /* Centraliza verticalmente os botões */ } .table-responsive > table td.actions a { font-size: 0.8em; /* Menor fonte para os links de ação */ padding: 5px 10px; /* Padding menor */ border-radius: 5px; /* Arredonda as bordas */ text-decoration: none; /* Remove sublinhado */ display: inline-block; /* Permite padding e margem */ flex-grow: 1; /* Permite que os botões cresçam para ocupar espaço */ text-align: center; /* Centraliza o texto dentro do botão */ } .table-responsive > table td.actions a.edit { background-color: var(--warning-color); /* Amarelo */ color: var(--text-color-dark); } .table-responsive > table td.actions a.delete { background-color: var(--danger-color); /* Vermelho */ color: var(--white-color); } } /* Adicionar um pequeno ajuste para telas muito pequenas, se necessário */ @media (max-width: 480px) { .table-responsive > table td { padding-left: 45%; /* Reduz um pouco o padding para o label */ font-size: 0.8em; /* Reduz a fonte do conteúdo da célula */ } .table-responsive > table td::before { width: 40%; /* Reduz a largura do label */ font-size: 0.85em; /* Reduz a fonte do label */ white-space: normal; /* Certifica-se de que o label possa quebrar */ } .table-responsive > table td.actions { flex-direction: column; /* Empilha os botões de ação */ align-items: stretch; /* Estica os botões para a largura total da célula */ } .table-responsive > table td.actions a { width: 100%; /* Botões de ação ocupam a largura total */ text-align: center; margin-bottom: 5px; /* Espaçamento entre botões empilhados */ } /* Ajustes para layout de formulário em mobile */ .form-row { flex-direction: column; /* Empilha os grupos de formulário */ gap: 0; /* Remove o gap entre os grupos empilhados */ margin-bottom: 0; /* A margem estará no .form-group */ } .form-group { width: 100%; /* Ocupa largura total */ min-width: unset; /* Remove min-width */ margin-bottom: 15px; /* Adiciona margem inferior a cada grupo quando empilhado */ } /* Ajuste para botões de submit/cancelar em mobile */ form button[type="submit"], form button.cancel { width: 100%; /* Botões ocupam a largura total */ margin-left: 0; /* Remove a margem esquerda */ margin-top: 10px; /* Adiciona margem superior para espaçamento entre eles */ } } /* --- Estilo Base da Tabela (Aplicar universalmente) --- */ table { width: 100%; /* Por padrão: ocupa toda a largura disponível */ border-collapse: collapse; /* Remove bordas duplas entre as células */ margin-bottom: 20px; /* Espaço abaixo da tabela */ /* opcional: word-break para strings longas dentro das células se não usar nowrap abaixo */ /* word-break: break-word; */ } table th, table td { padding: 8px 12px; /* Espaçamento interno das células */ border: 1px solid #ddd; /* Borda leve para as células */ text-align: left; /* Alinhamento do texto à esquerda */ vertical-align: top; /* Alinha o conteúdo ao topo das células */ } table thead { background-color: #007bff; /* Cor de fundo para o cabeçalho da tabela */ } /* Estilo para os botões de ação (Editar/Excluir) */ .actions a { display: inline-block; /* Permite definir padding e margin */ padding: 5px 10px; margin-right: 5px; border-radius: 4px; /* Cantos arredondados */ text-decoration: none; /* Remove sublinhado do link */ font-size: 0.9em; /* Tamanho da fonte um pouco menor */ white-space: nowrap; /* Impede que o texto dos botões quebre linha */ } .actions .edit { background-color: #007bff; /* Azul */ color: white; } .actions .delete { background-color: #dc3545; /* Vermelho */ color: white; } /* --- Container Responsivo para Rolagem Horizontal (Método 1) --- */ /* Este é o comportamento padrão para telas maiores */ .table-responsive { overflow-x: auto; /* Habilita a rolagem horizontal se o conteúdo for muito largo */ -webkit-overflow-scrolling: touch; /* Melhora a rolagem em dispositivos iOS */ } /* --- Media Queries para Vista de Cartões (Método 2 em telas pequenas) --- */ /* Quando a largura da tela for menor ou igual a 768px (tablets e celulares) */ @media screen and (max-width: 768px) { /* Ajuste este valor se necessário para seu design */ .table-responsive { /* Em telas pequenas, não precisamos mais da rolagem horizontal se transformarmos a tabela */ overflow-x: visible; } table { border: 0; /* Remove a borda externa da tabela */ display: block; /* Faz a tabela se comportar como um bloco */ } table thead { display: none; /* Oculta os cabeçalhos da tabela em telas pequenas */ } table tbody { display: block; /* Faz o corpo da tabela se comportar como um bloco */ width: 100%; } table tr { display: block; /* Faz as linhas da tabela se comportarem como blocos (cartões) */ margin-bottom: 15px; /* Espaçamento entre os cartões */ border: 1px solid #ddd; /* Borda para cada cartão */ border-radius: 8px; /* Cantos arredondados para os cartões */ background-color: #fff; /* Fundo branco para os cartões */ box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Sombra suave para os cartões */ padding: 10px; /* Preenchimento interno para o cartão */ } table td { display: block; /* Faz as células da tabela se comportarem como blocos */ text-align: right; /* Alinha o conteúdo à direita */ border: none; /* Remove as bordas das células */ border-bottom: 1px dotted #e0e0e0; /* Adiciona um separador pontilhado entre as linhas de dados */ padding: 8px 10px; /* Preenchimento para as linhas de dados individuais */ padding-left: 50%; /* Cria espaço para o rótulo do pseudo-elemento */ position: relative; /* Necessário para posicionar o pseudo-elemento */ word-wrap: break-word; /* Permite que palavras longas quebrem linha */ white-space: normal; /* Permite que o texto quebre linha naturalmente */ } table td:last-child { border-bottom: none; /* A última célula do cartão não precisa de borda inferior */ } table td::before { /* Cria pseudo-elementos para os rótulos (baseado no atributo data-label) */ content: attr(data-label); /* Pega o texto do atributo data-label */ position: absolute; /* Posição absoluta dentro da célula */ left: 10px; /* Distância da esquerda */ width: 45%; /* Largura do rótulo */ padding-right: 10px; white-space: nowrap; /* Impede que o rótulo quebre linha */ text-align: left; /* Alinha o rótulo à esquerda */ font-weight: bold; /* Rótulo em negrito */ color: #555; /* Cor para o rótulo */ } /* Ajustes específicos para os botões de ação dentro da vista de cartão */ table td.actions { text-align: center; /* Centraliza os botões */ padding-left: 10px; /* Remove o padding extra para as ações */ display: flex; /* Usa flexbox para organizar os botões */ justify-content: center; /* Centraliza horizontalmente */ flex-wrap: wrap; /* Permite que os botões quebrem linha se necessário */ gap: 8px; /* Espaço entre os botões */ } } /* Estilos para o menu mobile e overlay (se você não usa Bootstrap's offcanvas) */ /* Se você estiver usando o menu mobile do Bootstrap (navbar-toggler), ignore este bloco */ /* .mobile-menu-overlay { ... } */ /* .mobile-menu { ... } */ /* .hamburger { ... } */ /* e outros estilos relacionados ao menu hamburger */