/* =========================================
   1. FONTES E BASE (Identidade Oráculo)
   ========================================= */
@font-face {
  font-family: 'MicrogrammaDextended';
  src: url('/static/fonts/microgramma-d-bold-extended.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

a {
  text-decoration: none !important;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Fundo Espacial Orǭculo */
  background-image: url('/static/assets/img/sunrise-earth-s-horizon-observed-from-outer-space.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: 'MicrogrammaDextended', sans-serif;
  scrollbar-width: thin;
  scrollbar-color: #00E1FFFF rgba(0,0,0,0.5);
  color: #ffffff;
}

/* Pseudo-elemento para aplicar o filtro sem quebrar o position: fixed */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: brightness(0.6) contrast(1.2);
  pointer-events: none; /* Permite cliques através dele */
  z-index: -1; /* Fica atrás de todo o conteúdo */
}

/* Scrollbar Neon */
::-webkit-scrollbar { width: 8px; height: 8px; border-radius: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #00E1FFFF; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #00aacc; }
::-webkit-scrollbar-corner { background-color: transparent; }

/* Textos base */
h1, h2, h3, h4, h5, h6, p, tr, th, b {
  color: #ffffff;
}

/* =========================================
   2. HEADER E FOOTER (AJUSTADO PARA FICAR SLIM)
   ========================================= */
header div img { 
  width: 60px; /* Reduzido para afinar o header */
}

header, footer {
  background-image: radial-gradient(circle, #323333, #2b3031, #252d2f, #202a2f, #1b262e, #1b222b, #1a1d27, #1a1922, #18141a, #140e13, #0c070a, #000000);
  color: white;
  padding: 5px 20px; /* Reduzido o padding vertical de 10px para 5px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 225, 255, 0.2);
  z-index: 10;
  height: 60px; /* Fixa uma altura máxima para o header */
}

footer {
  border-bottom: none;
  border-top: 1px solid rgba(0, 225, 255, 0.2);
  justify-content: center;
  width: 100%;
}

div .fa { color: #00E1FFFF; }

.header__title { color: #00E1FFFF; transition: all 0.5s ease; text-shadow: 0 0 5px rgba(0, 225, 255, 0.5); font-size: 1.2rem;}
.header__title:hover { transform: scale(1.05); text-shadow: 0 0 15px rgba(0, 225, 255, 0.8); }

.center-text { text-align: center; flex-grow: 1; font-weight: bold; }
.icons { display: flex; gap: 15px; }
.icons i { color: #fff; font-size: 18px; cursor: pointer; transition: 0.3s; }
.icons i:hover { color: #00E1FFFF; transform: scale(1.1); }

/* =========================================
   3. NAVEGAÇÃO DO ORÁCULO E DROPDOWNS
   ========================================= */
.oraculo-navbar {
  background-color: rgba(10, 15, 20, 0.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 225, 255, 0.3);
  padding: 8px 20px; /* Reduzido de 15px para afinar a navbar */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  width: 100%;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.nav-brand {
  color: #00E1FFFF;
  font-weight: bold;
  font-size: 1.1rem;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 225, 255, 0.4);
}

.nav-links { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.nav-links a { color: #b9b9b9; font-size: 0.85rem; transition: all 0.3s ease; display: flex; align-items: center; gap: 6px; }
.nav-links a:hover, .nav-links a.active { color: #00E1FFFF; text-shadow: 0 0 10px rgba(0, 225, 255, 0.6); transform: translateY(-1px); }

/* Menus Antigos do main_dark */
.navbar, .dropbtn {
  background-color: rgba(10, 15, 20, 0.8); backdrop-filter: blur(5px); color: #00E1FFFF; border: 1px solid rgba(0, 225, 255, 0.3); padding: 12px; font-size: 14px; transition: 0.3s;
}

.dropdown { position: relative; display: inline-block; }
.dropdown-content, .submenu-content {
  display: none; position: absolute; background-color: rgba(15, 20, 25, 0.95); backdrop-filter: blur(10px); min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,225,255,0.2); border: 1px solid rgba(0, 225, 255, 0.3); z-index: 1;
}

.submenu-content { left: 100%; top: 0; }
.dropdown-content a, .submenu-content a { color: floralwhite; padding: 10px 14px; text-decoration: none !important; display: block; transition: 0.3s; }
.dropdown-content a:hover, .submenu-content a:hover, .dropdown:hover .dropbtn { background-color: rgba(0, 225, 255, 0.2); color: #00E1FFFF; }
.dropdown:hover .dropdown-content { display: block; }
.submenu:hover .submenu-content { display: block; }

/* =========================================
   4. LAYOUT PRINCIPAL E GLASSMORPHISM
   ========================================= */
.grid-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

.main-container {
  flex: 1;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* CARDS DE APLICAÇÃO (Para a página inicial) */
.app-item, .card {
  background-color: rgba(15, 20, 25, 0.6) !important; /* Vidro translúcido */
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 225, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  color: #ffffff;
  padding: 20px;
  transition: all 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
}

.app-item:hover, .card:hover {
  transform: scale(1.02);
  border-color: #00E1FFFF;
  box-shadow: 0 0 20px rgba(0, 225, 255, 0.4);
  background-color: rgba(0, 225, 255, 0.05) !important;
}

/* Se for usar uma lista de cards na Home */
.cards__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centraliza os cards */
  gap: 30px; /* Espaço entre eles */
  padding: 40px 0;
}

/* Card específico que vi na sua imagem */
.card_dashboard {
  background-color: rgba(15, 20, 25, 0.6) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 225, 255, 0.3);
  border-radius: 10px;
  width: 250px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00E1FFFF;
  font-size: 1.2rem;
  transition: 0.3s;
}

.card-header {
  background-color: rgba(0, 225, 255, 0.1); padding: 10px; border-radius: 10px 10px 0 0; text-align: center; border-bottom: 1px solid rgba(0, 225, 255, 0.3);
}

.cards__titulo { color: #00E1FFFF; font-size: 1.5rem; margin-bottom: 1.5rem; text-shadow: 0 0 10px rgba(0, 225, 255, 0.3); }


.login {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background-color: rgba(15, 20, 25, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 225, 255, 0.3);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  color: #ffffff;
  padding: 30px;
  width: 100%; /* Adicionado para garantir responsividade junto com o max-width */
  max-width: 400px;
  transition: all 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
}

.logo_login {
  /* Fixa o elemento na tela, tirando-o do fluxo normal para NÃO gerar scroll */
  position: fixed;
  
  /* Centraliza o logo no meio da tela (opcional, mude se quiser em outro canto) */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Coloca atrás do .login (que está com z-index: 9999) */
  z-index: 1; 

  /* Garante que a imagem nunca ultrapasse o tamanho da tela do usuário */
  max-width: 100vw; 
  max-height: 100vh; 
  
  /* Mantém a proporção da imagem sem distorcer */
  object-fit: contain; 

}

.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* O flex-grow: 1 faz com que o conteúdo principal ocupe todo o espaço restante, empurrando o footer para baixo */
.site-content {
  flex-grow: 1;
}

/* Estilização básica para o seu footer ficar bonito */
.site-footer {
  background-color: #1a1a1a; /* Cor de fundo hacker */
  color: #00ff00; /* Cor do texto hacker */
  text-align: center;
  padding: 15px 0;
  width: 100%;
}

/* =========================================
   5. FORMULÁRIOS E INPUTS
   ========================================= */
input[type="text"], input[type="email"], input[type="number"], input[type="date"], select, textarea, input.form-control, .form-input-td input, .form-input-td select, .form-input-td textarea {
  width: 100%; padding: 10px; border-radius: 8px; background-color: rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 225, 255, 0.4); color: #00E1FFFF; box-sizing: border-box; transition: 0.3s;
}

input:focus, select:focus, textarea:focus {
  outline: none; background-color: rgba(0, 0, 0, 0.8); border-color: #00E1FFFF; box-shadow: 0 0 10px rgba(0, 225, 255, 0.5);
}

input[type="file"] { background-color: rgba(0, 0, 0, 0.5); color: #fff; border: 1px solid rgba(0, 225, 255, 0.4); }

/* Checkboxes Customizados Neon */
input[type=checkbox] { position: relative; cursor: pointer; }
input[type=checkbox]:before {
  content: ""; display: block; position: absolute; width: 20px; height: 20px; top: 0; left: 0;
  background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(0, 225, 255, 0.4); border-radius: 4px;
}
input[type=checkbox]:checked:before { background-color: rgba(0, 225, 255, 0.2); border-color: #00E1FFFF; }
input[type=checkbox]:checked:after {
  content: ""; display: block; width: 5px; height: 10px; border: solid #00E1FFFF; border-width: 0 2px 2px 0;
  transform: rotate(45deg); position: absolute; top: 3px; left: 7px;
}

/* =========================================
   6. TABELAS (Com espaçamento corrigido)
   ========================================= */
.table, #table_site { width: 100%; margin-bottom: 1rem; color: #fff; border-collapse: separate; border-spacing: 0; }
.table.table-bordered td, .table.table-bordered th { border-color: rgba(255, 255, 255, 0.1); }
.table-active, .table-subheader, #table_site thead {
  background-color: rgba(0, 225, 255, 0.15) !important; color: #00E1FFFF !important; text-align: center; border-bottom: 2px solid #00E1FFFF;
}
.table tbody tr:nth-child(odd), #table_site tbody tr:nth-child(odd) { background-color: rgba(255, 255, 255, 0.03); }
.table tbody tr:hover, #table_site tbody tr:hover { background-color: rgba(0, 225, 255, 0.1); }

/* FORÇANDO O PADDING NAS CÉLULAS QUE O RESET.CSS APAGOU */
.table th, .table td { 
  padding: 15px 20px !important; 
  text-align: center; 
  vertical-align: middle; 
}

.table_body { background: transparent; font-size: 16px; margin: 0; padding: 0; }
.btn_table { background: transparent; border: 1px solid transparent; color: #fff !important; transition: ease 0.5s; padding: 5px; border-radius: 4px;}
.btn_table:hover { background: rgba(0, 225, 255, 0.2); border: 1px solid #00E1FFFF; color: #00E1FFFF !important; }

/* =========================================
   7. MODAIS E EXPANDERS
   ========================================= */
.modal { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 1000;}
.modal-content {
  background-color: rgba(15, 20, 25, 0.85); backdrop-filter: blur(15px); border: 1px solid #00E1FFFF; box-shadow: 0 0 20px rgba(0, 225, 255, 0.3); color: white; border-radius: 10px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40%; max-width: 600px; padding: 20px;
}
.close-btn { color: #00E1FFFF; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-btn:hover { color: #fff; text-shadow: 0 0 10px #00E1FFFF; }

.expander { width: 100%; margin-bottom: 15px; }
.expander-header {
  background-color: rgba(0, 225, 255, 0.1); padding: 10px 15px; cursor: pointer; border: 1px solid rgba(0, 225, 255, 0.3); border-radius: 4px; display: flex; justify-content: space-between; align-items: center;
}
.expander-header:hover { background-color: rgba(0, 225, 255, 0.2); }
.expander-content { display: none; padding: 15px; border: 1px solid rgba(0, 225, 255, 0.3); border-top: none; border-radius: 0 0 4px 4px; background: rgba(0,0,0,0.4); }
.expander-icon { transition: transform 0.3s; color: #00E1FFFF; }
.expander.active .expander-icon { transform: rotate(180deg); color: #fff; }
.expander.active .expander-content { display: block; }

/* =========================================
   8. BOTÕES UTILITÁRIOS (Refatorados para Neon)
   ========================================= */
.btn-primary, .btn-secondary, .btn-tertiary, #button_green, #button_blue, #button_black, .trad_btn, .info_btn {
  padding: 8px 16px; border-radius: 6px; font-weight: bold; transition: all 0.3s ease; letter-spacing: 1px;
  background-color: rgba(0, 225, 255, 0.1) !important; border: 1px solid #00E1FFFF !important; color: #00E1FFFF !important; cursor: pointer; text-align: center;
}
.btn-primary:hover, #button_green:hover, #button_blue:hover, .trad_btn:hover, .info_btn:hover {
  background-color: #00E1FFFF !important; color: #000 !important; box-shadow: 0 0 15px rgba(0, 225, 255, 0.6); transform: scale(1.05);
}

.btn-secondary, #button_black { border-color: #b9b9b9 !important; color: #b9b9b9 !important; background: rgba(255,255,255,0.05) !important; }
.btn-secondary:hover, #button_black:hover { background-color: #b9b9b9 !important; color: #000 !important; box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); }

#button_red, .btn-tertiary, .negar_btn, .reprovar_sub { border-color: #ff3d3d !important; color: #ff3d3d !important; background: rgba(255,61,61,0.1) !important; }
#button_red:hover, .btn-tertiary:hover, .negar_btn:hover { background-color: #ff3d3d !important; color: #fff !important; box-shadow: 0 0 15px rgba(255, 61, 61, 0.6); transform: scale(1.05); }

.aprovar_btn, .congelar_btn, .mostrar_motivo_btn { padding: 8px 15px; border-radius: 8px; color: #fff; cursor: pointer; border: 1px solid transparent; transition: 0.3s;}
.aprovar_btn { background-color: rgba(85, 185, 60, 0.3); border-color: #55B93C; color: #55B93C; }
.aprovar_btn:hover { background-color: #55B93C; color: #000; box-shadow: 0 0 10px #55B93C; }
.congelar_btn { background-color: rgba(0, 225, 255, 0.2); border-color: #00E1FFFF; color: #00E1FFFF; }
.congelar_btn:hover { background-color: #00E1FFFF; color: #000; box-shadow: 0 0 10px #00E1FFFF; }

/* =========================================
   9. UTILITÁRIOS, ALINHAMENTOS E ALERTAS
   ========================================= */
/* Classes flex para separar os botões */
.d-flex { display: flex !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1.5rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 2rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.row, .row_dashboard { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.horizontal, .horizontal-group { display: flex; gap: 10px; align-items: center; }
.form-group { margin-bottom: 1rem; }
.form-container { display: flex; flex-wrap: wrap; justify-content: space-between; }
.form-container > div { flex: 1; min-width: 200px; margin: 10px; max-height: 600px; overflow-y: auto; }

/* Badges e Alertas */
.alert { backdrop-filter: blur(5px); border-radius: 8px; padding: 15px; margin-bottom: 15px; text-align: center;}
.alert-info { background-color: rgba(0, 225, 255, 0.1) !important; border: 1px solid #00E1FFFF !important; color: #e0f7fa !important; }
.alert-warning { background-color: rgba(255, 193, 7, 0.1) !important; border: 1px solid #ffc107 !important; color: #fff3cd !important; }
.alert-success { background-color: rgba(40, 167, 69, 0.1) !important; border: 1px solid #28a745 !important; color: #d4edda !important; }
.alert-danger { background-color: rgba(220, 53, 69, 0.1) !important; border: 1px solid #dc3545 !important; color: #f8d7da !important; }

.badge { padding: 0.6em 1em; border-radius: 12px; font-weight: normal; font-size: 0.9rem;}
.bg-success { background-color: rgba(40, 167, 69, 0.2) !important; border: 1px solid #28a745; color: #4dd86b !important; }
.bg-warning { background-color: rgba(255, 193, 7, 0.2) !important; border: 1px solid #ffc107; color: #ffca2c !important; }
.bg-info { background-color: rgba(0, 225, 255, 0.2) !important; border: 1px solid #00E1FFFF; color: #00E1FFFF !important; }
.bg-danger { background-color: rgba(220, 53, 69, 0.2) !important; border: 1px solid #dc3545; color: #ff6b6b !important; }

#aviso, #aviso-frete, #aviso-sist-irriga, #aviso-cond-pagto, .w3-panel { display: none; }