/* ============================================================
   Sistema Contingência - Cootracam
   Layout compacto: prioriza espaço para a listagem de acessos
   ============================================================ */
:root{
  --verde-escuro: #0b6b3a;
  --verde: #1aa260;
  --menta: #dff7e6;
  --cinza-claro: #f4f6f5;
  --texto: #1f2933;
  --accent: #0f9d58;
  --danger: #d9534f;
  --amarelo: #f6c63c;
  --sombra: rgba(11,107,58,0.12);
  --bordas: #e6efe8;
  --radius: 8px;
  --font-sans: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background: linear-gradient(180deg, #f8fbf9 0%, #ffffff 100%);
  color:var(--texto);
  -webkit-font-smoothing:antialiased;
  padding:12px;
}
body.modal-aberta{ overflow:hidden; }

.container{
  max-width:1400px;
  margin:0 auto;
  background:#fff;
  border-radius:10px;
  box-shadow: 0 6px 22px var(--sombra);
  padding:14px 16px;
  border:1px solid var(--bordas);
}

/* ============================================================
   Cabeçalho compacto (uma linha só)
   ============================================================ */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.brand{ display:flex; gap:10px; align-items:center; min-width:0; }

.logo-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:8px;
  background: linear-gradient(135deg,var(--verde-escuro),var(--verde));
  text-decoration:none;
  box-shadow: 0 4px 14px rgba(11,107,58,0.18);
  transition:transform .12s ease;
  border:1px solid rgba(255,255,255,0.06);
  padding:3px;
  flex-shrink:0;
}
.logo-link:hover{ transform:translateY(-1px); }
.logo-img{
  max-width:100%; max-height:100%;
  object-fit:contain; display:block;
  border-radius:5px; background:#fff;
  padding:2px;
}

.brand-text{ display:flex; flex-direction:column; min-width:0; }
.title{
  font-size:18px;
  font-weight:700;
  color:var(--verde-escuro);
  letter-spacing:-0.2px;
  line-height:1.1;
}
.subtitle{
  font-size:12px;
  color:#6b7280;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.menu-topo{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}

/* ============================================================
   Bloco do formulário de registro (compacto)
   ============================================================ */
.card-registro{
  background: linear-gradient(180deg, var(--menta) 0%, #fff 100%);
  border:1px solid rgba(26,162,96,0.18);
  border-radius:8px;
  padding:8px 10px;
  margin-bottom:10px;
}

/* Grid de formulário */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
  gap:8px;
  align-items:end;
}
.form-grid-registro{
  grid-template-columns: 0.85fr 2fr 0.85fr 1.1fr 0.95fr auto;
}
.form-grid .campo{ display:flex; flex-direction:column; gap:2px; min-width:0; position:relative; }
.form-grid label{
  font-size:10px;
  color:var(--verde-escuro);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.4px;
}

.input, select, textarea{
  padding:7px 10px;
  border-radius:6px;
  border:1px solid var(--bordas);
  background:#fff;
  color:var(--texto);
  font-size:13px;
  outline:none;
  width:100%;
  font-family:inherit;
}
.input:focus, select:focus, textarea:focus{
  box-shadow:0 0 0 2px rgba(26,162,96,0.18);
  border-color:var(--accent);
}

.btn{
  background:var(--verde-escuro);
  color:#fff;
  padding:7px 14px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  font-weight:600;
  font-size:13px;
  transition:transform .08s ease, box-shadow .12s ease, background .12s;
  white-space:nowrap;
  text-decoration:none;
  display:inline-block;
  line-height:1.4;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(11,107,58,0.18); background:var(--verde); }
.btn.secondary{
  background:transparent;
  color:var(--verde-escuro);
  border:1px solid var(--bordas);
}
.btn.secondary:hover{ background:var(--menta); }
.btn.danger{ background:var(--danger); }
.btn.danger:hover{ background:#b52a2a; }
.btn.sm{ padding:6px 10px; font-size:12px; }

/* ============================================================
   Filtros — barra compacta + painel avançado
   ============================================================ */
.filtros{ display:none; }  /* legado, não usado mais */

.barra-filtros{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin-bottom:6px;
}
.barra-filtros .busca-livre{
  flex:1 1 280px;
  min-width:200px;
  padding:7px 10px;
  font-size:13px;
}
.btn-toggle-filtros{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.btn-toggle-filtros.ativo{
  background:var(--menta);
  border-color:var(--verde);
  color:var(--verde-escuro);
}
.btn-toggle-filtros .contador{
  background:var(--verde-escuro);
  color:#fff;
  border-radius:999px;
  padding:1px 7px;
  font-size:11px;
  font-weight:700;
  min-width:18px;
  text-align:center;
}
.filtros-avancados{
  display:none;
  width:100%;
  margin-top:6px;
  padding:8px;
  background:var(--cinza-claro);
  border:1px solid var(--bordas);
  border-radius:6px;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap:6px;
  align-items:end;
}
.filtros-avancados.aberto{ display:grid !important; }
.filtros-avancados .campo{
  display:flex; flex-direction:column;
  gap:2px; min-width:0; width:auto;
}
.filtros-avancados label{
  font-size:10px; color:#6b7280;
  font-weight:600; text-transform:uppercase;
  letter-spacing:0.3px;
}
.filtros-avancados .input{ padding:5px 7px; font-size:12px; width:100%; }

.totais{
  font-size:12px;
  color:var(--verde-escuro);
  font-weight:600;
  margin:4px 0 6px;
}
.totais strong{ color:var(--texto); }

/* Mensagens */
.msg{
  padding:8px 10px;
  border-radius:6px;
  background:var(--menta);
  color:var(--verde-escuro);
  border:1px solid rgba(26,162,96,0.2);
  margin-bottom:8px;
  font-size:13px;
}
.msg.erro{ background:#fdecea; color:#b02a37; border-color:#f5c2c7; }

/* ============================================================
   Tabela com scroll interno (desktop)
   ============================================================ */
.table-wrap{
  overflow:auto;
  border-radius:8px;
  border:1px solid var(--bordas);
  background:#fff;
  /* Em desktop, define altura máxima e scroll interno */
  max-height: calc(100vh - 290px);
  min-height: 200px;
}
table{ width:100%; border-collapse:collapse; min-width:800px; }
th, td{
  padding:6px 10px;
  text-align:left;
  border-bottom:1px solid #f1f5f3;
  font-size:13px;
  vertical-align:middle;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
th{
  background:linear-gradient(90deg, rgba(26,162,96,0.08), rgba(11,107,58,0.03));
  color:var(--verde-escuro);
  font-weight:700;
  position:sticky; top:0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.4px;
  z-index:5;
}
tr:hover td{ background:#fbfdfb; }

/* Larguras das colunas da listagem de acessos */
.tabela-acessos { table-layout: fixed; }
.tabela-acessos col.col-data     { width: 150px; }
.tabela-acessos col.col-tipo     { width:  90px; }
.tabela-acessos col.col-nome     { width: auto;  }
.tabela-acessos col.col-doc      { width: 175px; }
.tabela-acessos col.col-placa    { width:  90px; }
.tabela-acessos col.col-portaria { width: 110px; }
.tabela-acessos col.col-usuario  { width: 110px; }

.tabela-acessos td.col-nome{
  white-space:normal;            /* Nome pode quebrar em duas linhas */
  word-wrap:break-word;
}
.tabela-acessos td.col-placa,
.tabela-acessos th.col-placa,
.tabela-acessos td.col-tipo,
.tabela-acessos th.col-tipo{
  text-align:center;
}
/* Fonte tabular para data, documento e placa (alinha melhor verticalmente) */
.tabela-acessos td.num{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Badges */
.badge{
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:0.4px;
}
.badge.entrada{ background:var(--accent); }
.badge.saida{ background:#6b7280; }
.badge.origem-kgs{ background:#0b6b3a; }
.badge.origem-manual{ background:var(--amarelo); color:#5a4a00; }

a.link{
  color:var(--verde-escuro);
  text-decoration:none;
  font-weight:600;
  font-size:13px;
}
a.link:hover{ text-decoration:underline; }

/* Paginação */
.paginacao{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
}
.paginacao a, .paginacao span{
  padding:5px 9px;
  border-radius:5px;
  border:1px solid var(--bordas);
  text-decoration:none;
  color:var(--verde-escuro);
  font-weight:600;
  font-size:12px;
  background:#fff;
}
.paginacao a:hover{ background:var(--menta); }
.paginacao .atual{ background:var(--verde-escuro); color:#fff; border-color:var(--verde-escuro); }

/* ============================================================
   Autocomplete (sugestões)
   ============================================================ */
.autocomplete{ position:relative; }
.autocomplete-list{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:#fff;
  border:1px solid var(--bordas);
  border-top:none;
  border-radius:0 0 6px 6px;
  max-height:240px;
  overflow-y:auto;
  z-index:50;
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
  display:none;
}
.autocomplete-list.ativo{ display:block; }
.autocomplete-item{
  padding:6px 10px;
  cursor:pointer;
  font-size:12px;
  border-bottom:1px solid #f1f5f3;
}
.autocomplete-item:last-child{ border-bottom:none; }
.autocomplete-item:hover, .autocomplete-item.selecionado{ background:var(--menta); }
.autocomplete-item .principal{ font-weight:600; color:var(--texto); }
.autocomplete-item .secundario{ font-size:11px; color:#6b7280; margin-top:1px; }
.autocomplete-vazio{ padding:8px 10px; color:#6b7280; font-size:12px; font-style:italic; }

/* Indicador de pessoa vinculada */
.pessoa-vinculada{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  color:var(--verde-escuro);
  font-weight:600;
  padding:2px 7px;
  background:var(--menta);
  border-radius:999px;
  margin-left:5px;
}
.pessoa-vinculada.nova{ background:#fff3cd; color:#946400; }

/* ============================================================
   Modal
   ============================================================ */
.modal-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(11,40,28,0.55);
  z-index:1000;
  align-items:flex-start;
  justify-content:center;
  padding:40px 16px;
  overflow-y:auto;
  backdrop-filter: blur(3px);
}
.modal-backdrop.ativo{ display:flex; }
.modal{
  background:#fff;
  border-radius:10px;
  max-width:440px;
  width:100%;
  box-shadow:0 20px 50px rgba(0,0,0,0.25);
  overflow:hidden;
  animation: modal-in .18s ease-out;
}
@keyframes modal-in{
  from{ transform:translateY(-10px); opacity:0; }
  to  { transform:translateY(0);    opacity:1; }
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background: linear-gradient(135deg, var(--verde-escuro), var(--verde));
  color:#fff;
}
.modal-header h3{ margin:0; font-size:15px; font-weight:700; }
.modal-fechar{
  background:none;
  border:none;
  color:#fff;
  font-size:22px;
  cursor:pointer;
  line-height:1;
  padding:0 4px;
  opacity:0.8;
}
.modal-fechar:hover{ opacity:1; }
.modal-body{ padding:16px; }
.modal-body .campo{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.modal-body label{
  font-size:11px;
  color:var(--verde-escuro);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.4px;
}
.modal-aviso{
  background:#fff8e1;
  border:1px solid #ffe082;
  color:#7a5b00;
  padding:8px 10px;
  border-radius:6px;
  font-size:12px;
  margin-bottom:10px;
  line-height:1.4;
}

/* Login / Instalar */
.login-wrap{ max-width:420px; margin:30px auto; }
.login-wrap .form-grid{ grid-template-columns: 1fr; gap:10px; }
.login-wrap .logo-link{ width:80px; height:80px; }
.login-wrap .title{ font-size:22px; }

/* ============================================================
   Mobile (celular dos vigias)
   - desliga o scroll interno da tabela (rola página inteira)
   ============================================================ */
@media (max-width:900px){
  .form-grid, .form-grid-registro{ grid-template-columns: 1fr 1fr; }
  .form-grid .campo.wide, .form-grid .btn-campo{ grid-column: 1 / -1; }
  .filtros-avancados.aberto{ grid-template-columns: 1fr 1fr 1fr !important; }
  .table-wrap{ max-height:none; }
}
@media (max-width:600px){
  body{ padding:8px; }
  .container{ padding:10px; border-radius:8px; }
  .form-grid, .form-grid-registro{ grid-template-columns: 1fr; }
  .filtros-avancados.aberto{ grid-template-columns: 1fr 1fr !important; }
  .barra-filtros{ gap:6px; }
  .barra-filtros .busca-livre{ flex:1 1 100%; }
  .logo-link{ width:44px; height:44px; }
  .title{ font-size:16px; }
  .subtitle{ font-size:11px; white-space:normal; }
  .header{ gap:8px; }
  .menu-topo{ gap:10px; }
  .form-grid .btn-campo .btn{ width:100%; }
  th, td{ padding:6px; font-size:12px; }
  .modal{ max-width:100%; }
}