/* ╔════════════════════════════════════════════════════════════╗ */
/* ║ 📦 logistica.css – Estilos para Gestão de Entregas/Coletas ║ */
/* ╚════════════════════════════════════════════════════════════╝ */

/* ===== Cabeçalho ===== */
.page-header h1{
  margin: 0 0 var(--c-space-6, 24px);
  color: #0f172a;
}

/* ===== Mensagens (usa estilo “callout” parecido com outras páginas) ===== */
.callout{
  border: 1px solid var(--c-input-bd, #cfe2ff);
  border-left-width: 4px;
  border-left-color: var(--c-primary, #a6c8ee);
  background: var(--c-input-bg, #f7fbff);
  border-radius: var(--radius, 8px);
  padding: 10px 12px;
  margin-bottom: var(--c-space-4, 16px);
}

/* ===== Cards simples (container visual para blocos) ===== */
.card{
  background: #fff;
  border: 1px solid var(--c-input-bd, #cfe2ff);
  border-radius: var(--radius, 8px);
  padding: var(--c-space-4, 16px);
  margin-bottom: var(--c-space-6, 24px);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

/* ===== Formulários ===== */
.form-grid{
  display: grid;
  gap: var(--c-space-3, 12px);
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  margin-bottom: var(--c-space-6, 24px);
}
.form-grid input,
.form-grid select{
  /* inputs já herdam o estilo do tema (altura 40, borda, bg, radius) */
  width: 100%;
}
.form-actions{
  grid-column: 1 / -1;
  display: flex;
  gap: var(--c-space-3, 12px);
}

/* Responsivo do formulário */
@media (max-width: 1100px){
  .form-grid{ grid-template-columns: repeat(3, minmax(180px,1fr)); }
}
@media (max-width: 820px){
  .form-grid{ grid-template-columns: repeat(2, minmax(160px,1fr)); }
}
@media (max-width: 560px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* ===== Filtros ===== */
.filtros{
  display: grid;
  gap: var(--c-space-3, 12px);
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  align-items: end;
}
.filtros .btn{
  height: 40px;
}
@media (max-width: 1024px){
  .filtros{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .filtros{ grid-template-columns: 1fr; }
}

/* ===== Tabela (aproveita o wrapper .c-scroll--table do tema) ===== */
.tbl{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
}
.tbl thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  border-bottom: 1px solid var(--c-input-bd, #cfe2ff);
  box-shadow: 0 2px 0 rgba(0,0,0,.03);
  font-weight: 700;
  color: #111827;
}
.tbl th, .tbl td{
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tbl tbody tr:hover{ background: #f8fbff; }

/* Larguras sugestivas */
#tabelaLogistica th:nth-child(1),
#tabelaLogistica td:nth-child(1){ width: 90px; text-align: center; font-weight: 600; color:#0b5ed7; }
#tabelaLogistica th:nth-child(6),
#tabelaLogistica td:nth-child(6){ width: 70px; text-align: center; }
#tabelaLogistica th:nth-child(10),
#tabelaLogistica td:nth-child(10){ width: 180px; }

/* Ações na tabela */
#tabelaLogistica td button{
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--c-input-bd, #cfe2ff);
  background: #fff;
  cursor: pointer;
}
#tabelaLogistica td button:hover{
  background: var(--c-input-bg, #f7fbff);
}

/* ===== Botões utilitários (cores) – sobre o botão base do tema ===== */
.btn-success{
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.btn-success:hover{ background:#15803d; border-color:#15803d; }

.btn-danger{
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.btn-danger:hover{ background:#b91c1c; border-color:#b91c1c; }

/* ===== Mapa ===== */
#mapaRota{
  width: 100%;
  height: 520px;
  border: 1px solid var(--c-input-bd, #cfe2ff);
  border-radius: var(--radius, 8px);
  background: #fff;
}

/* ===== Modal ===== */
.modal{
  position: fixed; inset: 0;
  background-color: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
}
.modal-content{
  background: #fff;
  padding: var(--c-space-4, 16px);
  border-radius: var(--radius, 8px);
  width: 520px; max-width: 90%;
  border: 1px solid var(--c-input-bd, #cfe2ff);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  position: relative;
}
.modal-content h2{ margin-top: 0; }
.fechar{
  position: absolute; right: 10px; top: 8px;
  background: transparent; border: 0;
  font-size: 22px; line-height: 1; cursor: pointer;
}

/* Coluna “Ordem” destacada */
.col-ordem{
  font-weight: 700;
  color: #0b5ed7;
  text-align: center;
}