/* =========================
   ESTILOS GERAIS
   ========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

.app-container {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  padding: 20px;
}

/* =========================
   HEADER
   ========================= */
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.back-button {
  color: #007bff;
  text-decoration: none;
  font-size: 18px;
  padding: 10px;
}

.back-button:hover {
  background-color: #f8f9fa;
  border-radius: 50%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-email {
  color: #6c757d;
  font-size: 14px;
}

.logout-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.logout-btn:hover {
  background: #c82333;
}

/* =========================
   STATUS CARDS
   ========================= */
.status-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.status-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.status-info {
  display: flex;
  flex-direction: column;
}

.status-value {
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
}

.status-label {
  color: #6c757d;
  font-size: 14px;
}

.status-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.status-icon.pending { background: #fff3cd; color: #856404; }
.status-icon.approved { background: #d4edda; color: #155724; }
.status-icon.suppliers { background: #d1ecf1; color: #0c5460; }
.status-icon.purchases { background: #f8d7da; color: #721c24; }

/* =========================
   FEATURE CARDS
   ========================= */
.section-title {
  margin: 30px 0 20px 0;
  color: #2c3e50;
  font-size: 24px;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.feature-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.feature-card.active { border-left: 4px solid #007bff; }

.card-icon {
  width: 60px;
  height: 60px;
  background: #007bff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  color: white;
  font-size: 24px;
}

.feature-card h3 {
  margin-bottom: 10px;
  color: #2c3e50;
}

.feature-card p {
  color: #6c757d;
  margin-bottom: 20px;
  line-height: 1.5;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #007bff;
  font-weight: 500;
}

/* =========================
   ACTIVITY SECTION (HISTÓRICO)
   ========================= */
.activity-section {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow-x: auto; /* permite scroll horizontal se necessário */
}

/* --- GRID COM 8 COLUNAS: adicionamos 1 coluna só para as ações --- */
.activity-header {
  display: grid;
  grid-template-columns: 140px 120px 1fr 1fr 140px 160px 160px 220px; /* + Ações */
  column-gap: 16px;
  align-items: center;
  padding: 10px 12px;
  background-color: #f8f9fa;
  border-bottom: 2px solid #e9ecef;
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
}

.activity-list {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
}

.activity-item,
.activity-list > div {
  display: grid;
  grid-template-columns: 140px 120px 1fr 1fr 140px 160px 160px 220px; /* mesma grade do header */
  column-gap: 16px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #e9ecef;
  white-space: nowrap;   /* impede quebra em toda a linha */
  overflow-x: auto;      /* rola caso estoure */
}

/* Células: reticências quando passar do espaço */
.activity-item > * {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pedido-col { padding: 8px 0; color: #495057; }

/* AÇÕES: nunca quebrar linha */
.pedido-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;       /* <--- impede quebra */
  white-space: nowrap;     /* <--- impede quebra */
  overflow: hidden;
}

.pedido-actions .btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.3s ease;
  white-space: nowrap;     /* garante texto do botão inline */
}

/* Botões padrões usados nas ações */
.btn-ver { background-color: #17a2b8; color: white; }
.btn-ver:hover { background-color: #138496; }

.btn-enviar { background-color: #28a745; color: white; }
.btn-enviar:hover { background-color: #218838; }

.btn-listar { background-color: #6c757d; color: white; }
.btn-listar:hover { background-color: #5a6268; }

/* =========================
   BADGES
   ========================= */
.badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
}

.badge.low    { background-color: #d4edda; color: #155724; }
.badge.medium { background-color: #fff3cd; color: #856404; }
.badge.high   { background-color: #f8d7da; color: #721c24; }
.badge.urgent { background-color: #721c24; color: #fff; }

.badge.extremamente_alta { background:#721c24; color:#fff; }
.badge.alta { background:#dc3545; color:#fff; }
.badge.media { background:#ffc107; color:#000; }
.badge.baixa { background:#28a745; color:#fff; }
.badge.pending { background-color: #ffc107; color: #000; }

/* =========================
   MODAIS
   ========================= */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}

.modal.hidden { display: none; }

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 10px;
  max-width: 90%;
  max-height: 90%;
  overflow-y: auto;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 15px; right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #6c757d;
}

.close-btn:hover { color: #495057; }

/* =========================
   MODAL: VISUALIZAR PEDIDO
   ========================= */
.pedido-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.info-item { display: flex; flex-direction: column; }

.info-item label {
  font-weight: bold;
  color: #495057;
  margin-bottom: 5px;
  font-size: 12px;
}

.info-item span { color: #212529; font-size: 14px; }

.justificativa-box {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  min-height: 80px;
  max-height: 150px;
  overflow-y: auto;
  line-height: 1.5;
}

.btn-danger {
  background-color: #dc3545; color: white; border: none;
  padding: 10px 20px; border-radius: 5px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; font-weight: 500;
}
.btn-danger:hover { background-color: #c82333; }

.btn-secondary {
  background-color: #6c757d; color: white; border: none;
  padding: 10px 20px; border-radius: 5px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; font-weight: 500;
}
.btn-secondary:hover { background-color: #5a6268; }

.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid #dee2e6;
}

/* =========================
   TABELA DE ITENS
   ========================= */
.excel-style-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.excel-style-table th {
  background-color: #f2f2f2;
  padding: 10px; text-align: left;
  border: 1px solid #ddd; font-weight: bold;
}
.excel-style-table td {
  padding: 8px 10px; border: 1px solid #ddd;
}
.excel-style-table tr:nth-child(even) { background-color: #f9f9f9; }
.excel-style-table tr:hover { background-color: #f5f5f5; }

/* =========================
   RESPONSIVIDADE (OVERRIDES)
   Mantemos as 8 colunas e só ajustamos larguras; nada de colapsar para 1 coluna.
   ========================= */
@media (max-width: 1200px) {
  .activity-header,
  .activity-item,
  .activity-list > div {
    grid-template-columns: 120px 110px 1fr 1fr 120px 150px 150px 200px !important;
  }
}

@media (max-width: 900px) {
  .activity-header,
  .activity-item,
  .activity-list > div {
    grid-template-columns: 110px 100px 180px 160px 110px 140px 140px 200px !important;
  }
}

@media (max-width: 768px) {
  .main-content { padding: 10px; }

  .content-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .status-cards,
  .feature-cards { grid-template-columns: 1fr; }

  /* Mantém a grade de 8 colunas, só reduzindo larguras e permitindo scroll */
  .activity-header,
  .activity-item,
  .activity-list > div {
    grid-template-columns: 100px 95px 160px 140px 100px 130px 130px 190px !important;
  }
}
/* ==== HISTÓRICO (8 colunas fixas + ações sem quebra) ==== */
.activity-section { overflow-x: auto; }

.activity-header {
  display: grid;
  grid-template-columns: 140px 140px 1fr 1fr 140px 160px 160px 260px; /* Nº, Data, Solicitante, Depto, Prioridade, Eng., Fin., Ações */
  column-gap: 16px;
  align-items: center;
  padding: 10px 12px;
  background:#f8f9fa;
  border-bottom:2px solid #e9ecef;
  font-weight:600;
  white-space: nowrap;
}

.activity-list { display:flex; flex-direction:column; margin-top:15px; }

.activity-item,
.activity-list > div {
  display: grid;
  grid-template-columns: 140px 140px 1fr 1fr 140px 160px 160px 260px !important; /* mesma grade do header */
  column-gap: 16px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #e9ecef;
  white-space: nowrap;   /* tudo numa linha */
  overflow-x: auto;
}

.activity-item > * { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Coluna de ações: não quebrar nunca */
.pedido-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: nowrap;      /* não quebra */
  white-space: nowrap;    /* não quebra */
}

.pedido-actions .btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;    /* não quebra texto do botão */
}

/* Cores dos botões (opcional, se já não tiver) */
.btn.btn-ver    { background:#17a2b8; color:#fff; }
.btn.btn-enviar { background:#28a745; color:#fff; }
.btn.btn-listar { background:#6c757d; color:#fff; }
.btn.btn-ver:hover    { background:#138496; }
.btn.btn-enviar:hover { background:#218838; }
.btn.btn-listar:hover { background:#5a6268; }

/* Responsivo: mantém 8 colunas e permite scroll horizontal */
@media (max-width: 1200px) {
  .activity-header,
  .activity-item,
  .activity-list > div {
    grid-template-columns: 120px 120px 1fr 1fr 120px 150px 150px 240px !important;
  }
}
@media (max-width: 900px) {
  .activity-header,
  .activity-item,
  .activity-list > div {
    grid-template-columns: 110px 110px 200px 180px 110px 150px 150px 240px !important;
  }
}
@media (max-width: 768px) {
  .activity-header,
  .activity-item,
  .activity-list > div {
    grid-template-columns: 100px 100px 180px 160px 100px 140px 140px 220px !important;
  }
}
.activity-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

.pedido-col {
  flex: 1; /* todas as colunas ocupam espaço igual */
  padding: 6px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* deixa a sessão de botões mais larga */
.pedido-actions {
  flex: 2; /* ocupa o dobro das outras colunas */
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  flex-wrap: wrap; /* se não couber, quebra linha */
}

.pedido-actions .btn {
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

.btn-ver {
  background: #007bff;
  color: #fff;
}

.btn-enviar {
  background: #28a745;
  color: #fff;
}

.btn-listar {
  background: #ffc107;
  color: #000;
}
/* Linha do motivo da recusa */
#modalMotivoRecusaRow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 4px solid #e74c3c; /* vermelho de alerta */
  background: #fdf0f0;           /* fundo claro */
  border-radius: 6px;
}

/* Label do motivo */
#modalMotivoRecusaRow .detail-label {
  font-weight: 600;
  color: #c0392b;
  min-width: 180px;
}

/* Valor do motivo */
#modalMotivoRecusaEngenharia {
  flex: 1;
  color: #333;
  line-height: 1.4;
  white-space: pre-wrap; /* permite quebrar linhas */
}
/* Bloco do motivo da recusa no final da modal */
#modalMotivoRecusaRow {
  margin-top: 20px;
  padding: 12px 14px;
  border-left: 4px solid #e74c3c; /* Vermelho */
  background: #fdf0f0;            /* Fundo claro */
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Label em destaque */
#modalMotivoRecusaRow .detail-label {
  font-weight: 600;
  color: #c0392b;
  font-size: 14px;
}

/* Texto do motivo */
#modalMotivoRecusaEngenharia {
  color: #333;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}
button.btn-disabled,
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none; /* impede clique */
}
.badge.recusado {
  background-color: #fdeaea;   /* vermelho bem claro */
  color: #c0392b;              /* vermelho escuro */
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  display: inline-block;
}
/* Modal genérico */
#modalOrcamento .modal-content { max-width: 980px; width: 96%; }
#modalOrcamento .modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
#modalOrcamento .modal-body { display:block; }
#modalOrcamento .modal-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

/* Layouts */
.field-row { margin-bottom: 12px; }
.grid-two { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field input, .field select { padding:8px; border:1px solid #ddd; border-radius:6px; }

/* Fornecedor pesquisável */
.fornecedor-search-wrap { display:grid; grid-template-columns: 1fr 240px; gap:10px; align-items:start; }
#fornecedorSelect { height: 150px; overflow:auto; }

/* Tabs */
.tabs-orcamento { margin-top: 14px; }
.tabs-header { display:flex; gap:6px; flex-wrap:wrap; }
.tab-btn-forn { padding:8px 10px; border:1px solid #ddd; border-radius:6px; background:#fff; cursor:pointer; }
.tab-btn-forn.active { background:#f0f6ff; border-color:#b7d3ff; }
.tab-panel-forn { margin-top:10px; }

/* Tabela de itens */
.table-wrap { overflow:auto; }
.tabela-itens { width:100%; border-collapse: collapse; }
.tabela-itens th, .tabela-itens td { border:1px solid #eee; padding:8px; text-align:left; }
.tabela-itens thead th { background:#fafafa; }

/* Botões */
.btn { padding:8px 12px; border-radius:6px; cursor:pointer; border:none; }
.btn-primary { background:#2563eb; color:#fff; }
.btn-secondary { background:#e5e7eb; }
.modal-close { border:none; background:transparent; font-size:22px; cursor:pointer; }

/* ================== ESTILO DAS TABS ================== */
.tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 12px;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 8px;
}

.tab-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px 8px 0 0;
  background: #f8f9fa;
  color: #6c757d;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
  position: relative;
  min-width: 120px;
  text-align: center;
}

.tab-btn:hover {
  background: #e9ecef;
  color: #495057;
  transform: translateY(-1px);
}

.tab-btn.active {
  background: #ffffff;
  color: #007bff;
  border-bottom: 3px solid #007bff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
}

.tab-btn.active:hover {
  background: #ffffff;
  color: #0056b3;
  border-bottom: 3px solid #0056b3;
}

/* Efeito de destaque quando active */
.tab-btn.active::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 10px;
  background: linear-gradient(45deg, #007bff, #0056b3);
  z-index: -1;
  opacity: 0.1;
}

/* Indicador de aba ativa */
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #007bff;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

/* Responsividade */
@media (max-width: 768px) {
  .tabs {
    gap: 2px;
  }
  
  .tab-btn {
    padding: 10px 12px;
    font-size: 12px;
    min-width: 80px;
    flex: 1;
  }
  
  .tab-btn.active::after {
    display: none; /* Esconde o indicador em mobile */
  }
}

/* Efeito de foco para acessibilidade */
.tab-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Estado disabled (se necessário no futuro) */
.tab-btn:disabled {
  background: #f8f9fa;
  color: #adb5bd;
  cursor: not-allowed;
  transform: none;
}

.tab-btn:disabled:hover {
  background: #f8f9fa;
  color: #adb5bd;
  transform: none;
}
/* ===== Toasts ===== */
#toast-root {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none; /* deixa clique passar quando não sobre o toast */
}

.toast {
  min-width: 280px;
  max-width: min(92vw, 420px);
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  padding: 12px 44px 12px 14px;
  font: 500 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
  pointer-events: auto; /* habilita clique no X */
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  animation: toast-in 220ms cubic-bezier(.2,.8,.2,1) forwards;
}

.toast.success { border-color: rgba(34,197,94,.35); box-shadow: 0 12px 30px rgba(34,197,94,.12); }
.toast.error   { border-color: rgba(239,68,68,.35);  box-shadow: 0 12px 30px rgba(239,68,68,.12); }
.toast.warn    { border-color: rgba(234,179,8,.35);  box-shadow: 0 12px 30px rgba(234,179,8,.12); }
.toast.info    { border-color: rgba(59,130,246,.35); box-shadow: 0 12px 30px rgba(59,130,246,.12); }

.toast .title {
  font-weight: 700;
  margin-bottom: 2px;
  display: block;
  letter-spacing: .2px;
}

.toast .msg {
  opacity: .9;
}

.toast .close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: #cbd5e1;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.toast .close:hover { filter: brightness(1.1); }

@keyframes toast-in {
  to { transform: translateY(0); opacity: 1; }
}
@keyframes toast-out {
  to { transform: translateY(-6px); opacity: 0; }
}
/* ====== Filtro de Obra (Histórico de pedidos) ====== */
.activity-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 14px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
}

.activity-filters label {
  font-size: 14px;
  color: #444;
  white-space: nowrap;
}

/* Select do filtro */
#filtroObraHistorico {
  min-width: 260px;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 14px;
  color: #2c2c2c;
  background: #fff;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #888 50%),
    linear-gradient(135deg, #888 50%, transparent 50%),
    linear-gradient(to right, #ddd, #ddd);
  background-position:
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 10px) calc(50% - 3px),
    calc(100% - 40px) 50%;
  background-size: 6px 6px, 6px 6px, 1px 60%;
  background-repeat: no-repeat;
}

#filtroObraHistorico:hover {
  border-color: #cfd4dc;
}

#filtroObraHistorico:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

/* Botão limpar */
#limparFiltroObra {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #374151;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .05s ease;
}

#limparFiltroObra:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

#limparFiltroObra:active {
  transform: translateY(1px);
}

/* Integração com o seu .btn/.btn-secondary (se já existir no projeto) */
.activity-filters .btn,
.activity-filters .btn-secondary {
  line-height: 1;
  height: 40px;
  display: inline-flex;
  align-items: center;
}

/* Responsivo */
@media (max-width: 768px) {
  .activity-filters {
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px;
  }

  .activity-filters label {
    width: 100%;
  }

  #filtroObraHistorico {
    min-width: 0;
    width: 100%;
  }

  #limparFiltroObra {
    width: 100%;
    justify-content: center;
  }
}

/* (Opcional) Modo escuro básico — se o body ganhar uma classe .dark */
.dark .activity-filters {
  background: #0f1115;
  border-color: #1f2430;
}

.dark #filtroObraHistorico {
  background: #0f1115;
  color: #e5e7eb;
  border-color: #2a3140;
  background-image:
    linear-gradient(45deg, transparent 50%, #9aa3b2 50%),
    linear-gradient(135deg, #9aa3b2 50%, transparent 50%),
    linear-gradient(to right, #2a3140, #2a3140);
}

.dark #filtroObraHistorico:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);
}

.dark #limparFiltroObra {
  background: #171a21;
  border-color: #2a3140;
  color: #cbd5e1;
}

.dark #limparFiltroObra:hover {
  background: #1b1f27;
  border-color: #374151;
}
/* VERSÃO PERCENTUAL */
#modalVerPedido .modal-content {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 2.5vh auto;
}
.badge.aprovado { background:#e6ffed; color:#146c43; border:1px solid #b7f0c0; }
.badge.recusado { background:#fff5f5; color:#b42318; border:1px solid #ffd1d1; }
.btn-success {
    background-color: #28a745; /* Verde padrão */
    color: #fff;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-success i {
    font-size: 16px;
}

.btn-success:hover {
    background-color: #218838; /* Verde mais escuro no hover */
}

.btn-success:active {
    transform: scale(0.97); /* Leve efeito de clique */
    background-color: #1e7e34;
}
/* 1) Deixar a modal com 95% da largura da tela */
#modal-orcamentos .mo-container {
  width: 95vw !important;
  max-width: 95vw !important;
  max-height: 92vh !important;
  overflow: hidden !important; /* scroll só no body */
}

/* 2) Transformar a área de conteúdo num carrossel horizontal */
#modal-orcamentos .mo-body {
  padding-top: 6px !important;
  display: flex !important;          /* cards lado a lado */
  flex-wrap: nowrap !important;      /* não quebrar linha */
  gap: 12px !important;              /* espaço entre orçamentos */
  overflow-x: auto !important;       /* scroll horizontal */
  overflow-y: hidden !important;
  padding-bottom: 12px !important;
}

/* 3) Cada orçamento vira um “slide” horizontal */
#modal-orcamentos .mo-card {
  margin-bottom: 0 !important;
  flex: 0 0 420px !important;        /* largura de cada card */
  box-sizing: border-box !important;
}
/* === 1) Modal mais larga === */
#modal-orcamentos .mo-container {
  width: 95vw !important;
  max-width: 95vw !important;
  overflow: hidden !important;
}

/* === 2) Transformar o corpo da modal em um carrossel horizontal === */
#modal-orcamentos .mo-body {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;       /* impedir quebra de linha */
  overflow-x: auto !important;        /* scroll horizontal */
  overflow-y: hidden !important;
  gap: 16px !important;
  padding-bottom: 16px !important;
}

/* === 3) Forçar QUALQUER WRAPPER INTERNO do JS a ficar inline === */
#modal-orcamentos .mo-body > div {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  width: auto !important;
}

/* === 4) O card do orçamento em si === */
#modal-orcamentos .mo-card {
  flex: 0 0 420px !important;       /* largura fixa dos cards */
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
}
#modal-orcamentos .mo-body {
  scroll-snap-type: x mandatory;
}

#modal-orcamentos .mo-card {
  scroll-snap-align: start;
}
/* === Ajuste da largura da modal === */
#modal-orcamentos .mo-container {
  width: 95vw !important;
  max-width: 95vw !important;
  max-height: 92vh !important;
  overflow: hidden !important;
}

/* === O scroll horizontal deve acontecer aqui === */
#modal-orcamentos .mo-body {
  display: block !important;
  overflow-x: auto !important;   /* ativa scroll horizontal */
  overflow-y: hidden !important;
  padding-bottom: 16px !important;
  padding-top: 6px !important;
}

/* === Wrapper interno que o JS cria — transforma em linha === */
#modal-orcamentos .mo-body > div {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;  /* impede que quebre linha */
  gap: 16px !important;
  width: auto !important;
}

/* === Cada card de orçamento (lado a lado) === */
#modal-orcamentos .mo-card {
  flex: 0 0 420px !important;     /* largura fixa do card */
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
}
/* Botão "Adicionar +" da modal de pedido */
#btnAdicionarItemPedido {
  background-color: #007bff;   /* azul */
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Hover / foco */
#btnAdicionarItemPedido:hover {
  background-color: #0056b3;   /* azul mais escuro */
  transform: translateY(-1px);
}

/* Se quiser um estado "desabilitado" mais claro */
#btnAdicionarItemPedido:disabled {
  background-color: #b0c4de;
  cursor: not-allowed;
  transform: none;
}
/* Versão simplificada */
#modalOrcamento .modal-content {
    width: 90% !important;
    max-width: 90% !important;
}
/* Versão com ícone mais destacado */
.pdf-orcamento {
    position: relative !important;
    border: 2px dashed #4da6ff !important;
    border-radius: 12px !important;
    padding: 25px 20px !important;
    background: 
        linear-gradient(135deg, #f8fbff 0%, #e6f2ff 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234da6ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cpolyline points='10 9 9 9 8 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center 30px !important;
    background-size: auto, 48px !important;
    cursor: pointer !important;
    text-align: center !important;
    min-height: 150px !important;
}

/* Texto instrucional */
.pdf-orcamento::before {
    content: "Clique para selecionar ou arraste seu PDF aqui" !important;
    display: block !important;
    color: #4da6ff !important;
    font-weight: 500 !important;
    margin-top: 70px !important;
    margin-bottom: 8px !important;
}

.pdf-orcamento::after {
    content: "Tamanho máximo: 10MB • Formato: PDF" !important;
    display: block !important;
    color: #666 !important;
    font-size: 0.85em !important;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
/* Status Parcial */
.mo-badge.parcial { background: #e3f2fd; color: #0d47a1; border: 1px solid #bbdefb; }

/* Ajuste para status Aprovado Com Alteração (Global) */
.mo-badge.aprovado-alteracao { background: #e0f7fa; color: #006064; border: 1px solid #b2ebf2; }
/* 1. Aumenta a altura do container principal */
.mo-container { 
    width: min(1100px, 96vw); 
    
    /* 🔥 MUDANÇAS AQUI: Altura fixa e Flexbox */
    height: 90vh;            /* Ocupa 90% da altura da tela */
    max-height: 95vh;        /* Trava o máximo */
    display: flex;           /* Habilita layout flexível */
    flex-direction: column;  /* Organiza cabeçalho e corpo em coluna */
    
    overflow: hidden;        /* Remove a rolagem externa do container */
    background: #fff; 
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,.25); 
    padding: 18px 18px 8px; 
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial; 
}

/* 2. Faz o corpo da modal crescer e ter a barra de rolagem */
.mo-body { 
    padding-top: 6px; 
    
    /* 🔥 MUDANÇAS AQUI: Preenche o espaço e rola internamente */
    flex: 1;                 /* Ocupa todo o espaço restante abaixo do Header */
    overflow-y: auto;        /* Adiciona scroll APENAS nesta área */
    min-height: 0;           /* Fix para Firefox/Flexbox */
}
/* --- Badge Base (Caso você ainda não tenha estilizado o alinhamento) --- */
.badge {
  display: inline-flex;       /* Garante que ícone e texto fiquem na mesma linha */
  align-items: center;        /* Centraliza verticalmente */
  justify-content: center;
  padding: 4px 10px;          /* Espaçamento interno */
  border-radius: 99px;        /* Formato de pílula arredondada */
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;        /* Não quebra linha */
}

/* --- Badge Específico: Orçamento Enviado --- */
.badge.orcamento-enviado {
  background-color: #e3f2fd;  /* Fundo Azul Claro Suave */
  color: #0277bd;             /* Texto Azul Escuro Forte */
  border: 1px solid #b3e5fc;  /* Borda sutil para definição */
  gap: 6px;                   /* Espaço entre o aviãozinho e o texto */
}

/* Ajuste fino do ícone do avião */
.badge.orcamento-enviado i {
  font-size: 0.9em;           /* Ícone levemente menor que o texto */
  transform: translateY(-1px); /* Ajuste ótico para centralizar perfeitamente */
}

/* Estilo Alternativo (Mais robusto com CSS Puro) */

.detail-row:has(#modalCategoria) {
    background-color: #f8f9fa; 
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 15px; /* Ajuste o padding para não ficar muito alto */
    margin: 8px 0;
    align-items: center; 
}

#modalCategoria {
    flex-grow: 1; 
    text-align: right;
    
    /* Aplica o estilo de BADGE diretamente ao div */
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px; 
    font-size: 0.85rem; 
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    
    /* Cores */
    color: #0c5460;
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
}
/* =========================================
 * 1. Estilos para o Contêiner da Categoria
 * (Destaca a linha inteira e aumenta o espaçamento vertical)
 * ========================================= */
.detail-row:has(#modalCategoria) {
    /* Destaca visualmente a linha */
    background-color: #f8f9fa; 
    border: 1px solid #dee2e6;
    border-radius: 8px; /* Borda levemente maior */
    
    /* Aumenta o espaçamento interno (vertical) */
    padding: 12px 15px; /* Aumentei o padding vertical de 10px para 12px */
    
    /* Aumenta o espaçamento externo (acima e abaixo) */
    margin: 15px 0; /* Aumentei a margem de 8px para 15px */
    
    align-items: center; 
}

/* =========================================
 * 2. Estilos do Badge (Valor da Categoria)
 * ========================================= */
#modalCategoria {
    flex-grow: 1; 
    text-align: right;
    
    /* Aplica o estilo de BADGE diretamente ao div */
    display: inline-block;
    
    /* Aumenta o espaçamento interno do próprio badge */
    padding: 8px 16px; /* Aumentei o padding do badge de 6px/12px para 8px/16px */
    
    border-radius: 25px; /* Borda mais arredondada (formato pílula) */
    font-size: 0.9rem; /* Levemente maior */
    font-weight: 800; /* Mais negrito */
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    
    /* Cores (mantidas para consistência) */
    color: #0c5460;
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adiciona sombra sutil para profundidade */
}

/* 3. Estilo do Rótulo (Label) */
.detail-row:has(#modalCategoria) .detail-label {
    font-size: 1.1em; /* Levemente maior que o padrão */
    font-weight: 700; /* Forte */
    color: #333; /* Cor mais escura para o título */
}
/* =======================================================
 * 1. Estilos Fortes para a Linha da Categoria (Container)
 * Usamos a seletor de ID + a classe para máxima prioridade
 * ======================================================= */
/* Este seletor assume que o #modalVerPedido é o contêiner principal da modal */
#modalVerPedido .detail-row:has(#modalCategoria) {
    /* Aumenta a margem externa para espaçamento */
    margin: 18px 0 !important; /* Prioridade máxima e mais espaço */
    
    /* Estilo do Container */
    background-color: #f0f8ff !important; /* Cor de fundo suave (azul claro) */
    border: 2px solid #b3d9ff !important; /* Borda visível */
    border-radius: 8px !important;
    padding: 12px 15px !important; 
    
    display: flex !important; /* Garante o layout lado a lado */
    align-items: center !important; 
}

/* ------------------------------------------------------------------ */

/* =======================================================
 * 2. Estilos Fortes para o Rótulo (Título "Categoria do Pedido")
 * ======================================================= */
#modalVerPedido .detail-row:has(#modalCategoria) .detail-label {
    font-size: 1.15em !important; /* Tamanho do texto aumentado */
    font-weight: 700 !important; 
    color: #007bff !important; /* Cor primária para o título */
    text-transform: uppercase !important;
}

/* ------------------------------------------------------------------ */

/* =======================================================
 * 3. Estilos Fortes para o BADGE (Valor da Categoria)
 * ======================================================= */
#modalCategoria {
    flex-grow: 1 !important; 
    text-align: right !important;
    
    /* Força o estilo de BADGE no texto dinâmico */
    display: inline-block !important;
    
    /* Configuração visual do badge */
    padding: 8px 16px !important; 
    border-radius: 25px !important; /* Formato pílula */
    font-size: 0.95rem !important; 
    font-weight: 900 !important; /* Extra negrito */
    line-height: 1 !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    
    /* Cores do Badge (Use tons vibrantes) */
    color: #ffffff !important; /* Texto branco */
    background-color: #28a745 !important; /* Fundo verde forte (Sucesso/Importante) */
    border: 1px solid #1e7e34 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; 
}

/* ------------------------------------------------------------------ */
/* =======================================================
 * 0. RESET E PADRÕES DA MODAL
 * ======================================================= */
#modalVerPedido {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #343a40; /* Cor de texto padrão escura */
}

/* 1. Estilização do Título e Botões de Ação */
#modalVerPedido h2 {
    color: #007bff; /* Cor primária para títulos */
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Estilo dos botões de ação (Aprovar/Recusar) no rodapé */
#modalVerPedido .modal-footer button {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

#modalVerPedido .modal-footer .btn-success {
    background-color: #28a745;
    color: white;
    border: none;
}
#modalVerPedido .modal-footer .btn-danger {
    background-color: #dc3545;
    color: white;
    border: none;
}


/* =======================================================
 * 2. ESTILIZAÇÃO DOS DETALHES DE METADADOS (detail-row)
 * ======================================================= */

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #ced4da; /* Linha divisória sutil */
    align-items: flex-start; /* Alinha o início do texto */
    gap: 15px; /* Espaço entre o rótulo e o valor */
}

/* Fundo sutil para cada linha ímpar (melhora a leitura) */
.detail-row:nth-child(odd) {
    background-color: #f8f9fa; 
}
.detail-row:nth-child(even) {
    background-color: #ffffff;
}

/* Estilo do Rótulo (o nome do campo) */
.detail-label {
    flex-basis: 35%; /* Garante que o rótulo ocupe um espaço decente */
    font-weight: 600;
    color: #6c757d; /* Cor cinza escuro para rótulos */
    text-transform: capitalize;
}

/* Estilo do Valor (o dado do campo) */
.detail-value {
    flex-basis: 65%;
    text-align: right; /* Alinha o valor à direita */
    font-weight: 500;
    color: #343a40; /* Cor de texto principal */
    word-break: break-word; /* Evita quebra de layout em textos longos */
}

/* ------------------------------------------------------
 * DESTAQUES ESPECÍFICOS PARA LEITURA
 * ------------------------------------------------------ */

/* Destaque para Requisição, Solicitante e Data */
#modalNumeroRequisicao,
#modalSolicitante,
#modalDataRequisicao {
    font-weight: 700;
    color: #007bff; /* Azul primário para IDs e Solicitante */
}

/* Destaque para Justificativa (como é um bloco de texto maior) */
#modalJustificativa {
    font-style: italic;
    color: #495057;
    text-align: left; /* Alinha a justificativa à esquerda */
    padding: 10px;
    border-left: 4px solid #ffc107; /* Borda lateral amarela */
    background-color: #fffbeb;
    margin-top: 5px;
}

/* Destaque para Motivo da Recusa */
.detail-row.motivo-recusa {
    border: 2px solid #dc3545;
    background-color: #f8d7da;
    border-radius: 6px;
    margin: 15px 0;
    padding: 10px;
}
#modalMotivoRecusaEngenharia {
    font-style: italic;
    font-weight: 700;
    color: #721c24;
}

/* =======================================================
 * 3. ESTILIZAÇÃO DA TABELA DE ITENS (Itens Solicitados)
 * ======================================================= */

.items-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); /* Sombra sutil na tabela */
}

/* Cabeçalho da Tabela */
.items-table thead th {
    background-color: #6c757d; /* Fundo escuro */
    color: white;
    padding: 12px 10px;
    text-align: left;
    border: none;
    font-size: 0.9rem;
}

/* Linhas da Tabela */
.items-table tbody tr {
    border-bottom: 1px solid #dee2e6;
    transition: background-color 0.2s;
}

.items-table tbody tr:hover {
    background-color: #f1f1f1; /* Destaque ao passar o mouse */
}

.items-table tbody td {
    padding: 10px;
    vertical-align: top;
    font-size: 0.95rem;
}

/* Colunas de Quantidade e Estoque */
.items-table tbody td:nth-child(4) { /* Qtd. */
    font-weight: 600;
}
.items-table .cell-estoque {
    font-weight: 700;
    text-align: center;
    padding: 10px 15px;
    /* As cores verde/vermelho são aplicadas via JS, mas garantimos o estilo */
}

/* =======================================================
 * 4. ESTILIZAÇÃO DO CAMPO CATEGORIA (BADGE APRIMORADO)
 * (Mantido do pedido anterior, com melhorias)
 * ======================================================= */

/* Destaque para a linha da Categoria (Para que o JS não sobrescreva) */
.detail-row:has(#modalCategoria) {
    margin: 18px 0 !important;
    background-color: #f0f8ff !important; 
    border: 2px solid #b3d9ff !important; 
    border-radius: 8px !important;
    padding: 12px 15px !important; 
}

/* Estilo do Rótulo da Categoria */
.detail-row:has(#modalCategoria) .detail-label {
    font-size: 1.15em !important; 
    font-weight: 700 !important; 
    color: #007bff !important; 
    text-transform: uppercase !important;
}

/* Estilo do BADGE (aplicado ao div#modalCategoria) */
#modalCategoria {
    flex-grow: 1 !important; 
    text-align: right !important;
    
    display: inline-block !important;
    padding: 8px 16px !important; 
    border-radius: 25px !important; 
    font-size: 0.95rem !important; 
    font-weight: 900 !important; 
    line-height: 1 !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    
    color: #ffffff !important; 
    background-color: #28a745 !important; 
    border: 1px solid #1e7e34 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; 
}

/* =======================================================
   APENAS DESTRAVAR ROLAGEM VERTICAL (SEM MEXER EM LARGURA)
   ======================================================= */

/* 1. Trava a altura da modal na tela e organiza em coluna */
#modal-orcamentos .mo-container {
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;       /* Altura máxima de 90% da tela */
    overflow: hidden !important;       /* Evita rolagem dupla */
}

/* 2. O cabeçalho fica fixo no topo */
#modal-orcamentos .mo-header {
    flex-shrink: 0 !important;
}

/* 3. O corpo da modal ganha permissão para rolar verticalmente */
#modal-orcamentos .mo-body {
    flex: 1 !important;                /* Ocupa todo o espaço vertical disponível */
    overflow-y: auto !important;       /* <--- AQUI ESTÁ A CHAVE: Libera o scroll vertical */
    height: auto !important;
    padding-bottom: 20px !important;   /* Espaço extra no final para não cortar conteúdo */
}
.activity-item {
    min-height: 80px; /* Defina a altura desejada */
    align-items: center;
}
/* --- CORES DE FUNDO DAS LINHAS (Status) --- */
.row-status-pendente {
    background-color: #fffbeb !important; /* Amarelo bem claro */
    border: 1px solid #fef3c7;
}

.row-status-orcamento {
    background-color: #eff6ff !important; /* Azul bem claro */
    border: 1px solid #dbeafe;
}

.row-status-recusado {
    background-color: #fef2f2 !important; /* Vermelho bem claro */
    border: 1px solid #fee2e2;
}

.row-status-aprovado {
    background-color: #f0fdf4 !important; /* Verde bem claro */
    border: 1px solid #dcfce7;
}

/* --- DESTAQUE DE PRIORIDADE (Alta/Extrema) --- */
.row-prioridade-alta {
    border-left: 6px solid #ef4444 !important; /* Tarja vermelha na esquerda */
    font-weight: 500; /* Texto levemente mais grosso */
}
/* --- AJUSTE DE FONTES DA TABELA (HISTÓRICO) --- */

/* 1. Cabeçalho da tabela (Títulos) */
.activity-header span {
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* 2. Conteúdo das linhas */
.activity-item {
    font-size: 13px !important; /* Tamanho geral do texto */
    align-items: center; /* Garante alinhamento vertical centralizado */
    padding: 10px 0; /* Reduz um pouco o espaçamento vertical se estiver muito alto */
}

/* 3. Ajuste fino para a coluna Solicitante */
/* Nome do funcionário */
.pedido-col-solicitante div:first-child {
    font-size: 13px !important;
}
/* Departamento (Texto cinza embaixo) */
.pedido-col-solicitante div:last-child {
    font-size: 11px !important;
}

/* 4. Ajuste fino para a coluna Obra (Badge) */
.pedido-col-obra span {
    font-size: 11px !important;
    padding: 2px 6px !important;
}

/* 5. Ajuste dos Badges de Status (Engenharia/Financeiro/Prioridade) */
.badge {
    font-size: 11px !important;
    padding: 4px 8px !important;
}
/* Cores por status - para linha inteira */
.activity-item.status-liberado {
    background-color: rgba(59, 130, 246, 0.08) !important;
    border-left: 4px solid #3b82f6;
}

.activity-item.status-orcamento-enviado {
    background-color: rgba(59, 130, 246, 0.08) !important;
    border-left: 4px solid #3b82f6;
}

.activity-item.status-recusado {
    background-color: rgba(239, 68, 68, 0.08) !important;
    border-left: 4px solid #ef4444;
}

.activity-item.status-financeiro-aprovado {
    background-color: rgba(34, 197, 94, 0.08) !important;
    border-left: 4px solid #22c55e;
}

.activity-item.status-financeiro-recusado {
    background-color: rgba(239, 68, 68, 0.08) !important;
    border-left: 4px solid #ef4444;
}

/* Prioridade da cor: financeiro aprovado > financeiro recusado > eng recusado > eng liberado/orçamento */
.activity-item.status-financeiro-aprovado.status-recusado,
.activity-item.status-financeiro-aprovado.status-liberado,
.activity-item.status-financeiro-aprovado.status-orcamento-enviado {
    background-color: rgba(34, 197, 94, 0.08) !important;
    border-left: 4px solid #22c55e;
}

.activity-item.status-financeiro-recusado.status-liberado,
.activity-item.status-financeiro-recusado.status-orcamento-enviado {
    background-color: rgba(239, 68, 68, 0.08) !important;
    border-left: 4px solid #ef4444;
}
.status-pill {
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: #e5e7eb;
    color: #4b5563;
    text-align: center;
    display: inline-block;
}
.badge-prioridade.alta { color: #ef4444; font-weight: bold; }
.badge-prioridade.media { color: #f59e0b; }

/* Atualização da Grade para 3 Botões */
.activity-header, .activity-item {
    display: grid !important;
    /* Ajustado o último valor para 1.2fr para caber os 3 botões */
    grid-template-columns: 1fr 0.8fr 2.2fr 1.5fr 0.8fr 1fr 1fr 1.2fr;
    gap: 15px;
    align-items: center;
}

/* Estilo para os botões de ação para ficarem padronizados */
.actions button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 15px;
    padding: 5px;
    transition: transform 0.2s, opacity 0.2s;
}

.actions button:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.btn-ver-pedido { color: #3b82f6; }    /* Azul */
.btn-enviar-orc { color: #10b981; }    /* Verde */
.btn-ver-orc { color: #f59e0b; }       /* Laranja */

/* Garante que o cabeçalho e as linhas usem a mesma grade */
.activity-header, .activity-item {
    display: grid !important;
    grid-template-columns: 1fr 0.8fr 2.2fr 1.5fr 0.8fr 1fr 1fr 1.2fr;
    gap: 15px;
    align-items: center;
}

/* Alinha o título "Ações" à direita */
.activity-header span:last-child {
    text-align: right;
    padding-right: 5px; /* Pequeno ajuste para não colar na borda física */
}

/* Garante que o container de botões também empurre para a direita */
.actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end; /* Alinha os botões à direita */
}
/* ESTRUTURA DE GRADE IDENTICA PARA CABEÇALHO E LINHAS */
.activity-header, .activity-item {
    display: grid !important;
    /* REQ(1) | DATA(0.8) | SOLICITANTE(2.2) | OBRA(1.5) | PRIO(1) | ENG(1) | FIN(1) | AÇÕES(1.2) */
    grid-template-columns: 1fr 0.8fr 2.2fr 1.5fr 1fr 1fr 1fr 1.2fr;
    gap: 15px;
    align-items: center;
    padding: 12px 20px; /* Padding igual para ambos para alinhar as bordas */
}

/* ALINHAMENTO DOS TEXTOS */
.activity-header span, .activity-item span, .activity-item div {
    text-align: left; /* Garante que o dado comece onde o título começa */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* EXCEÇÃO: TÍTULO AÇÕES E BOTÕES À DIREITA */
.activity-header span:last-child {
    justify-content: flex-end;
    text-align: right;
}

.activity-item .actions {
    justify-content: flex-end !important;
}

/* BADGES E PILLS (Ajuste para não centralizar o container pai) */
.status-pill, .badge-prioridade {
    text-align: center;
    justify-content: center !important; /* O texto dentro do balão continua no centro */
}
/* ESTRUTURA DE GRADE COM LARGURAS TRAVADAS (PIXEL PERFECT) */
.activity-header, .activity-item {
    display: grid !important;
    /* REQ(130px) | DATA(100px) | SOLICITANTE(280px) | OBRA(220px) | PRIO(160px) | ENG(150px) | FIN(150px) | AÇÕES(Restante) */
    grid-template-columns: 130px 100px 280px 220px 160px 150px 150px 1fr;
    gap: 15px;
    align-items: center;
    padding: 12px 25px; /* Padding generoso e igual para ambos */
    width: 100%;
    box-sizing: border-box;
}

/* FORÇAR ALINHAMENTO À ESQUERDA EM TUDO */
.activity-header span, 
.activity-item > span, 
.activity-item > div {
    text-align: left !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    overflow: hidden;
    white-space: nowrap;
}

/* ALINHAMENTO ESPECÍFICO PARA AÇÕES (ÚLTIMA COLUNA) */
.activity-header span:last-child {
    justify-content: flex-end !important;
    text-align: right !important;
}

.activity-item .actions {
    justify-content: flex-end !important;
}

/* AJUSTE DAS PILLS (O balão é centralizado, mas o container dele alinha à esquerda) */
.status-pill {
    min-width: 110px;
    text-align: center;
    justify-content: center !important;
}
/* ESTRUTURA DE GRADE TRAVADA (PIXEL PERFECT) */
.activity-header, .activity-item {
    display: grid !important;
    /* 8 Colunas seguindo exatamente o seu desenho:
       REQ(130px) | DATA(100px) | SOLICITANTE(280px) | OBRA(240px) | PRIO(180px) | ENG(170px) | FIN(170px) | AÇÕES(Restante) */
    grid-template-columns: 130px 100px 280px 240px 180px 170px 170px 1fr;
    gap: 15px;
    align-items: center;
    padding: 15px 25px; /* Padding igual para ambos para alinhar as bordas */
    width: 100%;
    box-sizing: border-box;
}

/* FORÇAR ALINHAMENTO À ESQUERDA (ENCALHAR NA LINHA VERMELHA) */
.activity-header span, 
.activity-item > span, 
.activity-item > div {
    text-align: left !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important; /* Garante que comece no início da coluna */
    overflow: hidden;
    white-space: nowrap;
}

/* EXCEÇÃO PARA O TÍTULO "AÇÕES" E BOTÕES (COLADOS NA DIREITA) */
.activity-header span:last-child {
    justify-content: flex-end !important;
    text-align: right !important;
}

.activity-item .actions {
    justify-content: flex-end !important;
}

/* AJUSTE DAS PILLS (O balão é centralizado internamente, mas o bloco dele fica à esquerda) */
.status-pill, .badge-prioridade {
    min-width: 120px;
    text-align: center;
    justify-content: center !important;
}

/* ESTRUTURA DE GRADE TRAVADA MANUALMENTE */
.activity-header, .activity-item {
    display: grid !important;
    /* Aplicação das larguras do mapa acima */
    grid-template-columns: 120px 110px 280px 240px 180px 140px 140px 1fr;
    gap: 15px; /* Espaço entre as colunas */
    align-items: center;
    padding: 15px 30px; /* Padding lateral para alinhar com o card */
    width: 100%;
    box-sizing: border-box;
}

/* FORÇAR ALINHAMENTO À ESQUERDA (ENCALHAR NA LINHA VERMELHA) */
.activity-header span, 
.activity-item > span, 
.activity-item > div {
    text-align: left !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important; 
    overflow: hidden;
    white-space: nowrap;
}

/* ALINHAMENTO DO TÍTULO AÇÕES E BOTÕES (DIREITA) */
.activity-header span:last-child {
    justify-content: flex-end !important;
}

.activity-item .actions {
    justify-content: flex-end !important;
}

/* ESTILO DAS PILLS (BALÕES) */
.status-pill, .badge-prioridade {
    min-width: 125px; /* Tamanho fixo do balão */
    text-align: center;
    justify-content: center !important; /* Texto centralizado dentro do balão */
}

/* ESTRUTURA DE GRADE TRAVADA (PIXEL PERFECT) */
.activity-header, .activity-item {
    display: grid !important;
    /* 8 Colunas Fixas: 
       REQ(140px) | DATA(110px) | SOLICITANTE(280px) | OBRA(240px) | PRIO(180px) | ENG(170px) | FIN(170px) | AÇÕES(Restante) */
    grid-template-columns: 140px 110px 280px 240px 180px 170px 170px 1fr;
    gap: 15px;
    align-items: center;
    padding: 15px 30px;
    width: 100%;
    box-sizing: border-box;
}

.activity-header {
    background: #f8fafc;
    border-radius: 12px 12px 0 0;
    font-weight: 700;
    color: #475569;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}

.activity-item {
    background: white;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

.activity-item:hover { background: #fdfdfd; }

/* ALINHAMENTO À ESQUERDA (ENCALHAR NA GUIA VERMELHA) */
.activity-header span, 
.activity-item > span, 
.activity-item > div {
    text-align: left !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    overflow: hidden;
    white-space: nowrap;
}

/* EXCEÇÃO PARA AÇÕES (COLADOS NA DIREITA) */
.activity-header span:last-child, 
.activity-item .actions {
    justify-content: flex-end !important;
    text-align: right !important;
}

/* BADGES E STATUS PILLS */
.badge-prioridade {
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
}

.badge-prioridade.alta { color: #ef4444; background: #fee2e2; }
.badge-prioridade.media { color: #f59e0b; background: #fef3c7; }
.badge-prioridade.baixa { color: #10b981; background: #d1fae5; }

.status-pill {
    min-width: 130px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    background: #f1f5f9;
    color: #64748b;
    text-align: center;
    justify-content: center !important;
}
/* CONTAINER DA TABELA */
.activity-section-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    overflow-x: auto; /* Garante scroll se a tela for pequena */
}

/* ESTILIZAÇÃO DA TABELA */
.mekabim-table {
    width: 100%;
    border-collapse: collapse; /* Une as bordas */
    table-layout: fixed; /* TRAVA AS LARGURAS DAS COLUNAS */
    font-size: 13px;
}

/* CABEÇALHO */
.mekabim-table thead th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    text-transform: uppercase;
    text-align: left;
    padding: 15px 12px;
    border-bottom: 2px solid #e2e8f0;
    border-right: 1px solid #e2e8f0; /* Linha vertical */
}

/* CÉLULAS DE DADOS */
.mekabim-table tbody td {
    padding: 12px;
    border-bottom: 1px solid #f1f5f9;
    border-right: 1px solid #f1f5f9; /* Linha vertical suave */
    vertical-align: middle;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* REMOVE A LINHA VERTICAL DA ÚLTIMA COLUNA (AÇÕES) */
.mekabim-table thead th:last-child,
.mekabim-table tbody td:last-child {
    border-right: none;
    text-align: right;
}

/* DEFINIÇÃO MANUAL DAS LARGURAS (MAPA VERMELHO) */
.col-req   { width: 130px; }
.col-data  { width: 100px; }
.col-solic { width: 280px; }
.col-obra  { width: 230px; }
.col-prio  { width: 160px; }
.col-eng   { width: 150px; }
.col-fin   { width: 150px; }
.col-acoes { width: 120px; }

/* HOVER NA LINHA */
.mekabim-table tbody tr:hover {
    background-color: #fcfcfc;
}
/* ESTILIZAÇÃO DOS FILTROS */
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
}

.filter-group input, .filter-group select {
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    min-width: 180px;
    outline: none;
}

.filter-group input:focus, .filter-group select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-clear {
    height: 36px;
    padding: 0 15px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    transition: all 0.2s;
}

.btn-clear:hover { background: #f1f5f9; color: #1e293b; }

/* REGRAS DE TABELA (PIXEL PERFECT) */
.mekabim-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mekabim-table thead th { border-right: 1px solid #e2e8f0; text-align: left; padding: 12px; }
.mekabim-table tbody td { border-right: 1px solid #f1f5f9; padding: 12px; border-bottom: 1px solid #f1f5f9; }

.col-req { width: 130px; }
.col-data { width: 100px; }
.col-solic { width: 280px; }
.col-obra { width: 220px; }
.col-prio { width: 160px; }
.col-eng { width: 160px; }
.col-fin { width: 160px; }
.col-acoes { width: 120px; }

/* CORES SUAVES PARA AS LINHAS (BACKGROUND TOTAL) */

/* Verde suave para pedidos liberados */
.row-liberado { 
    background-color: #f0fdf4 !important; 
}

/* Vermelho suave para pedidos recusados */
.row-recusado { 
    background-color: #fef2f2 !important; 
}

/* Amarelo/Laranja suave para pedidos pendentes */
.row-pendente { 
    background-color: #fffbeb !important; 
}

/* Azul/Cinza suave para pedidos aguardando financeiro */
.row-aguardando { 
    background-color: #f8fafc !important; 
}

/* Ajuste no hover para manter a percepção da cor */
.mekabim-table tbody tr:hover {
    filter: brightness(0.98);
}

/* CORES DAS PILLS DE STATUS (BADGES) */

.status-pill.status-recusado { 
    background-color: #fee2e2 !important; color: #ef4444 !important; border: 1px solid #fecaca; 
}

.status-pill.status-liberado { 
    background-color: #dbeafe !important; color: #3b82f6 !important; border: 1px solid #bfdbfe; 
}

.status-pill.status-aprovado { 
    background-color: #d1fae5 !important; color: #10b981 !important; border: 1px solid #a7f3d0; 
}

.status-pill.status-pendente { 
    background-color: #fef3c7 !important; color: #f59e0b !important; border: 1px solid #fde68a; 
}

/* Garante que o texto fique centralizado e em negrito */
.status-pill {
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    display: inline-flex;
    justify-content: center;
    min-width: 110px;
}
.input-orc {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 6px;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    outline: none;
}
.input-orc:focus { border-color: #3b82f6; }

.input-valor-venda {
    width: 90%;
    text-align: right;
    border: 1px solid #e2e8f0;
    padding: 4px;
    font-size: 12px;
    font-weight: 600;
}
/* --- ESTILOS DO FILTRO AUTOCOMPLETE --- */

/* Wrapper para posicionamento relativo do dropdown */
.input-dropdown-wrapper {
    position: relative;
    width: 100%;
}

/* Ícone dentro do input para dar um charme visual */
.input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: 12px;
}

/* O Dropdown Flutuante */
.dropdown-sugestoes {
    display: none; /* Oculto por padrão */
    position: absolute;
    top: 105%; /* Logo abaixo do input */
    left: 0;
    width: 100%; /* Largura igual ao do input */
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 100;
    max-height: 250px;
    overflow-y: auto;
}

/* Estado visível */
.dropdown-sugestoes.show {
    display: block;
}

/* Itens da lista */
.sugestao-item {
    padding: 10px 15px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
    display: flex;
    justify-content: space-between;
}

.sugestao-item:last-child {
    border-bottom: none;
}

.sugestao-item:hover {
    background-color: #f8fafc;
    color: #0f172a;
    font-weight: 500;
}

.sugestao-item .item-code {
    font-size: 11px;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Estado de loading ou vazio */
.dropdown-loading, .dropdown-empty {
    padding: 15px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    font-style: italic;
}

/* Scrollbar fina para o dropdown */
.dropdown-sugestoes::-webkit-scrollbar {
    width: 6px;
}
.dropdown-sugestoes::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.dropdown-sugestoes::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

/* ==========================================================================
   1. FILTROS (Alinhamento Lado a Lado)
   ========================================================================== */

.filter-row {
    display: flex;
    flex-wrap: nowrap; /* Impede que os itens quebrem para a linha de baixo */
    align-items: flex-end; /* Alinha os campos pela base (alinha input com botão) */
    gap: 15px; /* Espaço entre cada filtro */
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 25px;
    overflow-x: auto; /* Cria scroll lateral se a tela for muito pequena */
}

/* Estilo padrão para cada bloco de filtro */
.filter-group {
    display: flex;
    flex-direction: column;
    flex: 1; /* Faz todos os campos tentarem ter a mesma largura */
    min-width: 130px; /* Garante que não fiquem esmagados demais */
}

/* Labels dos filtros */
.filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
    text-transform: uppercase;
}

/* Inputs e Selects */
.filter-group input, 
.filter-group select {
    width: 100%;
    height: 42px; /* Altura fixa para alinhar tudo */
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #1e293b;
    background-color: #ffffff;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box; /* Importante para o padding não estourar a largura */
}

.filter-group input:focus, 
.filter-group select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Botão de Limpar (não deve esticar igual aos inputs) */
.filter-group:last-child {
    flex: 0 0 auto; /* Não cresce nem encolhe */
}

.btn-clear {
    height: 42px;
    padding: 0 20px;
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
}

.btn-clear:hover {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

/* ==========================================================================
   2. CAMPO DE PESQUISA COM DROPDOWN (AUTOCOMPLETE)
   ========================================================================== */

/* Wrapper para posicionar o ícone e a lista absoluta */
.input-dropdown-wrapper {
    position: relative;
    width: 100%;
}

/* Ícone de lupa dentro do input */
.input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none; /* Permite clicar através do ícone */
    font-size: 14px;
}

/* O Dropdown Flutuante */
.dropdown-sugestoes {
    display: none; /* Escondido por padrão */
    position: absolute;
    top: 110%; /* Logo abaixo do input */
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Fica acima de tabelas e outros elementos */
    max-height: 280px;
    overflow-y: auto;
}

/* Classe para mostrar o dropdown via JS */
.dropdown-sugestoes.show {
    display: block;
}

/* Itens da lista */
.sugestao-item {
    padding: 12px 15px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sugestao-item:last-child {
    border-bottom: none;
}

.sugestao-item:hover {
    background-color: #f8fafc;
}

/* Estilo do Código dentro da sugestão (pequeno e cinza) */
.item-code {
    font-size: 11px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 2px;
    display: inline-block;
}

/* Mensagens de Carregando ou Vazio */
.dropdown-loading, .dropdown-empty {
    padding: 15px;
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
}

/* Scrollbar personalizada para o dropdown */
.dropdown-sugestoes::-webkit-scrollbar {
    width: 6px;
}
.dropdown-sugestoes::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.dropdown-sugestoes::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 3px;
}
/* Atualize este bloco no gestaocompras.css */

.filter-row {
    display: flex;
    flex-wrap: wrap;       /* PERMITE quebra de linha (essencial para o dropdown não ser cortado) */
    align-items: flex-end;
    gap: 15px;
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 25px;
    
    /* CORREÇÃO DO Z-INDEX */
    overflow: visible;     /* IMPORTANTE: Permite que o dropdown "vaze" para fora da caixa */
    position: relative;    /* Cria um novo contexto de posicionamento */
    z-index: 50;           /* Força a barra de filtros inteira a ficar POR CIMA da tabela */
}

/* --- BOTÃO DESATIVADO (SEM PERMISSÃO) --- */
.btn-disabled {
    color: #94a3b8 !important; /* Cinza escuro */
    background: transparent !important;
    border: none !important;
    cursor: not-allowed !important;
    opacity: 0.3; /* Deixa bem apagado */
    pointer-events: none; /* Impede o clique */
}

/* --- BADGES DE PERMISSÃO --- */
.permissions-container {
    display: flex;
    gap: 8px;
    margin-top: 5px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.perm-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    border: 1px solid;
}

/* Cores específicas para cada função */
.perm-badge.ver_pedidos { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; }
.perm-badge.lancar_orcamentos { background: #ecfdf5; color: #10b981; border-color: #a7f3d0; }
.perm-badge.analise_financeira { background: #fffbeb; color: #f59e0b; border-color: #fde68a; }

/* --- OVERLAY DE CARREGAMENTO (BLUR) --- */
.global-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.7); /* Fundo branco semi-transparente */
    backdrop-filter: blur(8px); /* O efeito de desfoque estilo vidro */
    -webkit-backdrop-filter: blur(8px); /* Suporte para Safari */
    z-index: 99999; /* Fica acima de TUDO, inclusive modais */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease; /* Transição suave ao sumir */
}

.loader-content {
    text-align: center;
    background: white;
    padding: 30px 50px;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
}

.spinner-border {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #3b82f6; /* Azul do sistema */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px auto;
}

.loader-content p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    margin: 0;
    animation: pulseText 1.5s infinite;
}

/* Classe para esconder suavemente via JS */
.global-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulseText { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* Overlay de Carregamento Bloqueante */
#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Fundo escuro transparente */
    z-index: 99999; /* Fica acima de tudo, inclusive modais */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
}

#loadingOverlay.hidden {
    display: none !important;
}

/* Animação do Spinner */
.spinner-border {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #10b981; /* Cor Verde MekaBim */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
}
/* Remove o arredondamento dos badges de status */
.status-pill {
    border-radius: 0 !important;
}
/* --- ESTILO BASE DOS BADGES (Quadrados e Sólidos) --- */
.status-pill {
    border-radius: 0 !important;        /* Totalmente quadrado */
    border: none !important;            /* Remove a borda fina antiga */
    font-weight: 800 !important;        /* Texto bem grosso para contraste */
    padding: 8px 12px !important;       /* Um pouco mais de preenchimento */
    text-transform: uppercase;          /* Garante caixa alta */
    opacity: 1 !important;              /* Remove qualquer transparência herdada */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Sombra leve para destacar do fundo branco */
}

/* --- CORES ESPECÍFICAS (Vivas e Contrastantes) --- */

/* 1. PENDENTE / AGUARDANDO -> Laranja/Âmbar Vivo */
/* Usamos um laranja forte ao invés de amarelo puro para o texto branco ler melhor */
.status-pendente {
    background-color: #f59e0b !important; 
    color: #ffffff !important;
}

/* 2. RECUSADO -> Vermelho Vivo */
.status-recusado {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

/* 3. ORÇAMENTO ENVIADO -> Azul Royal Vivo */
.status-enviado {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* 4. APROVADO / LIBERADO -> Verde Esmeralda Vivo */
/* (Caso apareça futuramente ou na coluna Engenharia) */
.status-liberado, 
.status-aprovado {
    background-color: #10b981 !important;
    color: #ffffff !important;
}