/* ========================
   BASE
======================== */
body {
  font-family: Arial, sans-serif;
  background: #f4f6f9;
  margin: 0;
  padding: 0;
  color: #333;
}

.container {
  max-width: 1100px;
  margin: auto;
  padding: 20px;
  text-align: center;
}

h1, h2 {
  margin: 10px 0 5px;
}

hr {
  border: none;
  border-top: 2px solid #e0e0e0;
  width: 80%;
  margin: 10px auto 20px;
}

/* ========================
   GRID DE CARDS
======================== */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
}

/* ========================
   CARDS
======================== */
.card {
  background: #fff;
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  text-align: left;
  border-left: 6px solid #007BFF;
}

#card-receber { border-left-color: #28a745; }
#card-menu { border-left-color: #007BFF; }
#card-prazo { border-left-color: #ffc107; }
#card-status { border-left-color: #6f42c1; }
#card-porcliente { border-left-color: #17a2b8; }

/* ========================
   TÍTULOS DETALHES
======================== */
.titulo-detalhes {
  margin: 10px 0;
  font-size: 1.6em;
  font-weight: bold;
}
.titulo-detalhes.receber { color: #28a745; }
.titulo-detalhes.prazo { color: #ffc107; }
.titulo-detalhes.status { color: #6f42c1; }
.titulo-detalhes.porcliente { color: #17a2b8; }

/* ========================
   LISTAS GERAIS
======================== */
.list {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Ajusta as linhas das listas para alinhar texto + botão */
.list li {
  padding: 10px 0;
  border-bottom: 1px dashed #e3e3e3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}
.list li:last-child { border-bottom: none; }

/* Garante que o texto ocupe o espaço disponível */
.list li div {
  flex: 1;
  text-align: left;
}

/* Botões sempre do mesmo tamanho e alinhados à direita */
.list li a.btn-small {
  flex-shrink: 0;        /* botão não encolhe */
  min-width: 50px;       /* largura mínima fixa */
  text-align: center;
}


/* ========================
   LISTA DE CLIENTES DEVEDORES
======================== */
.list li.cliente-row {
  display: grid;
  grid-template-columns: 70% 30%;
  align-items: center;
  font-size: 0.8em;
}
.list li.cliente-row .cliente-info {
  text-align: left;
  font-weight: 500;
  
}
.list li.cliente-row .valor-info {
  text-align: right;
  font-weight: bold;

}

/* Última linha (Total dos clientes + botão) */
.list li.total-row {
  display: grid;
  grid-template-columns: 30% 70%;
  align-items: center;
  font-weight: bold;
}
.list li.total-row a.btn-small {
  justify-self: start;
}
.list li.total-row span {
  justify-self: end;
}

/* ========================
   BOTÕES
======================== */
.btn, .btn-small {
  display: inline-block;
  background: #007BFF;
  color: #fff;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.9em;
  transition: background .2s;
}
.btn:hover, .btn-small:hover { background: #0056b3; }
.btn-small { font-size: 0.8em; padding: 6px 10px; }

/* ========================
   DESTAQUES
======================== */
.numero { font-weight: 700; font-size: 1.4em; }
.valor { font-weight: 700; color: #28a745; }

/* ========================
   MENU DO CARD
======================== */
.menu-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.menu-btns .btn { width: 90%; text-align: center; }

/* ========================
   DRAG & DROP
======================== */
.dragging {
  opacity: .6;
  background: #f1f1f1;
  border: 2px dashed #007BFF;
}

/* ========================
   DETALHES POR CLIENTE
======================== */
.cliente { margin: 20px 0; }
.cliente h3 {
  background: #007BFF;
  color: #fff;
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px 8px 0 0;
}
.cliente table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
}
.cliente th, .cliente td {
  padding: 7px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: .95em;
}
.cliente th { background: #f7f7f7; font-weight: 600; }
.cliente tr:hover { background: #fafafa; }

/* Coluna de botões (accordion, status, etc.) */
.cliente td.col-btn,
.cliente th.col-btn {
  width: 1%;         /* força ocupar o mínimo possível */
  white-space: nowrap; /* evita quebrar linha */
  text-align: center; /* centraliza o botão */
  padding: 4px 6px;   /* padding menor */
}




/* ========================
   TOPO (LOGO + USUÁRIO)
======================== */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  background: #fff;
  border-bottom: 2px solid #eaeaea;
}
.top-bar .logo img {
  max-height: 40px;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9em;
  font-weight: 500;
  color: #333;
}
.user-info .btn-small {
  background: #dc3545;
  padding: 6px 12px;
  font-size: 0.8em;
}
.user-info .btn-small:hover { background: #b02a37; }

/* ========================
   SWITCH (toggle)
======================== */
.switch-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 15px 0;
}
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
}
.switch input { display: none; }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider { background-color: #17a2b8; }
input:checked + .slider:before { transform: translateX(22px); }

.switch-label {
  font-size: 0.95em;
  color: #444;
}

/* ========================
   LOGIN
======================== */
.login-box {
  max-width: 350px;
  margin: 60px auto;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  text-align: center;
}
.login-box .logo img {
  max-width: 120px;
  margin-bottom: 15px;
}
.login-form .form-group { margin: 12px 0; text-align: left; }
.login-form label { font-weight: bold; display: block; margin-bottom: 4px; }
.login-form input {
  width: 90%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.login-box .btn { width: 100%; margin-top: 15px; }
.erro { color: red; margin-top: 10px; font-size: 0.9em; }

/* ========================
   TABELA DETALHES
======================== */
.table-wrapper {
  width: 100%;
  overflow-x: auto;   /* permite rolagem horizontal no mobile */
  margin-top: 5px;
}

.tabela-detalhes {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.8em;
  min-width: 600px; /* garante largura mínima */
}

.tabela-detalhes th,
.tabela-detalhes td {
  padding: 3px 8px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.tabela-detalhes th {
  background: #f8f9fa;
  font-weight: bold;
  color: #444;
}

.tabela-detalhes tr:hover {
  background: #fdfdfd;
}

/* ========================
   ACCORDION
======================== */
.accordion-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}
.accordion-btn:hover {
  background: #2980b9;
}

.accordion-content {
  display: none;
  background: #fafafa;
}

.accordion-box {
  padding: 10px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  font-size: 0.9em;
}

/* ========================
   TOPO PÁGINA STATUS
======================== */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  background: #fff;
  border-bottom: 2px solid #eaeaea;
}

.top-bar .logo img {
  max-height: 40px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9em;
  font-weight: 500;
  color: #333;
}

.user-info .btn-small {
  background: #dc3545;
  padding: 6px 12px;
  font-size: 0.8em;
  border-radius: 6px;
}

.user-info .btn-small:hover {
  background: #b02a37;
}

/* Botão voltar */
.back-btn {
  background: #6c757d;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.85em;
}

.back-btn:hover {
  background: #565e64;
}

/* Labels do formulário com largura mínima para não "espremer" */
.status-form .form-row label {
  min-width: 120px;
}



/* ====== STATUS PAGE ====== */
.status-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px;
}

.status-header {
  font-size: 20px;
  margin-bottom: 15px;
  text-align: center;
}

/* ====== TABELA HISTÓRICO (STATUS) ====== */
.table-wrapper {
  width: 100%;
  overflow-x: auto;   /* rolagem horizontal no mobile */
  margin-bottom: 10px;
}

.status-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 1em;     /* um pouco maior que itens */
  min-width: 600px;
  border: 2px solid #ccc;   /* destaque extra */
}

/* Células */
.status-table th,
.status-table td {
  border: 1px solid #ccc;
  padding: 7px 10px;
  text-align: left;
  white-space: nowrap;
}

.status-table th {
  background: #e9ecef;   /* cinza mais forte */
  font-weight: bold;
  color: #333;
  text-transform: uppercase; /* dá mais destaque */
  font-size: 0.9em;     /* cabeçalho levemente maior */
}

.status-table td {
  font-size: 1em;
}

/* 🔥 Apenas estas colunas ficam em negrito */
.status-table td:nth-child(2),   /* Status */
.status-table td:nth-child(3){   /* Data/Hora Início */
 font-weight: bold;
}

.status-table tr:hover {
  background: #f5faff;   /* leve azul no hover */
}


/* Cabeçalho */
.status-table th {
  background: #f5f5f5;
  font-weight: bold;
  color: #444;
}

.status-table tr:hover {
  background: #fdfdfd;
}

/* Coluna do botão editar */
.status-table td.edit-cell {
  text-align: center;
  width: 40px;
  white-space: nowrap;
}

.edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

/* ====== FORMULÁRIO DE STATUS ====== */
.status-form {
  background: #fafafa;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-top: 10px;
}

.status-form h3 {
  margin-top: 0;
  margin-bottom: 10px;
  text-align: left;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.form-row label {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.form-row input,
.form-row select,
.form-row textarea {
  padding: 6px;
  font-size: 14px;
}

.form-row small {
  font-size: 15px;
  color: #666;
}

/* ====== TABELA DE ITENS DO PEDIDO (STATUS) ====== */
.itens-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.60em;   /* letras menores que a tabela de status */
  min-width: 500px;
}

.itens-table th,
.itens-table td {
  border: 1px solid #ddd;
  padding: 5px 6px;
  text-align: left;
}

.itens-table th {
  background: #f9f9f9;
  font-weight: 600;
  color: #555;
}

.itens-table tr:hover {
  background: #fdfdfd;
}


/* Botões */
.status-form button[type="submit"] {
  padding: 8px 14px;
  background: #007bff;
  border: none;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.status-form button[type="submit"]:hover {
  background: #0056b3;
}

.status-form .cancel-btn {
  background: #ccc;
  color: #333;
  margin-left: 8px;
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.status-form .delete-btn {
  background: #dc3545;   /* vermelho padrão */
  color: white;
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
}

.status-form .delete-btn:hover {
  background: #b02a37;   /* vermelho mais escuro no hover */
}

/* ====== RESPONSIVIDADE ====== */
@media (max-width: 767px) {
  .status-header { font-size: 18px; }
  .status-table { font-size: 0.75em; min-width: 500px; }
  .status-form { font-size: 0.9em; }
  .status-form input,
  .status-form select,
  .status-form textarea {
    font-size: 13px;
  }
}
/* ========================
   BOTÃO VOLTAR
======================== */
.back-btn {
  display: inline-block;
  background: #6c757d;     /* cinza neutro */
  color: #fff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9em;
  transition: background .2s;
}

.back-btn:hover {
  background: #5a6268;     /* tom mais escuro no hover */
}

/* ====== Ajuste específico da linha Data/Hora Início + Prazo ====== */
.status-form .form-row.prazo-row label:first-child {
  flex: 1;                 /* Data/Hora Início ocupa o espaço restante */
}

.status-form .form-row.prazo-row label:last-child {
  flex: 0 0 60px;           /* Prazo (dias) fica com largura fixa */
  max-width: 60px;          /* garante que não aumente além disso */
}
.flash-messages {
  margin: 10px 0;
}

.flash {
  padding: 10px 15px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 0.9em;
}

.flash.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.flash.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.flash.warning {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

/* Linha que mantém campos lado a lado até no mobile */
.same-line {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}
.same-line label {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Botões menores (+) */
.add-btn {
  padding: 4px 8px !important;
  font-size: 0.85em !important;
  height: fit-content;
  align-self: flex-end;
}

/* Fonte maior nas tabelas de itens e custos */
.big-table {
  font-size: 0.9em;
}
.big-table th, 
.big-table td {
  padding: 6px 8px;
}

/* Linha de campos compactos (Cor, Qtd, Valor) */
.form-row.same-line {
  display: flex;
  flex-wrap: wrap;        /* permite quebrar se não couber */
  gap: 8px;
}

.form-row.same-line label {
  flex: 1;                /* divide espaço igualmente */
  min-width: 50px;        /* Cor e Qtd não ficam menores que 50px */
}

.form-row.same-line label:last-child {
  min-width: 80px;        /* Valor não fica menor que 80px */
  font-weight: bold;      /* destaque no campo de valor */
}

/* Somente inputs numéricos alinhados à direita */
.form-row.same-line input[type="number"],
.form-row.same-line input.num {
  text-align: right;
  font-weight: bold;
}

/* Inputs de texto (como Cor e Observações) alinhados à esquerda */
.form-row.same-line input[type="text"]:not(.num) {
  text-align: left;
  font-weight: normal;
}

/* ========================
   PÁGINA DE PAGAMENTO
======================== */
.pagamento-container {
  max-width: 600px;
  margin: 40px auto;
  background: #fff;
  padding: 20px 30px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  text-align: center;
}

.pagamento-container h2 {
  color: #007bff;
  font-size: 1.4em;
  margin-bottom: 20px;
}

.pagamento-container p {
  font-size: 1em;
  margin-bottom: 20px;
  color: #333;
}

.pagamento-container form {
  margin-top: 10px;
}

.pagamento-container label {
  display: block;
  font-size: 0.9em;
  font-weight: 500;
  color: #444;
  margin-bottom: 8px;
  text-align: left;
}

.pagamento-container input[type="datetime-local"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95em;
  box-sizing: border-box;
}

.pagamento-container .btn {
  margin-top: 15px;
  width: 100%;
  background: #28a745;
  font-weight: bold;
  font-size: 0.95em;
}

.pagamento-container .btn:hover {
  background: #218838;
}

.pagamento-container .cancel-btn {
  margin-top: 15px;
  width: 100%;
  background: #dc3545;
  color: #fff;
  font-weight: bold;
  font-size: 0.95em;
}

.pagamento-container .cancel-btn:hover {
  background: #b02a37;
}

/* Rodapé */
.pagamento-container .back-btn {
  display: inline-block;
  margin-top: 25px;
  background: #6c757d;
  color: #fff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9em;
  transition: background .2s;
}

.pagamento-container .back-btn:hover {
  background: #5a6268;
}

/* Mensagens de status (se desejar usar flash messages coloridas futuramente) */
.flash-success {
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.flash-error {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
 
/* === Efeito de entrada suave === */
body {
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* === CARD "Por Status" === */
.card-status {
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  margin-bottom: 20px;
}

.status-grupo-titulo {
  font-size: 1.05em;
  font-weight: 600;
  color: #007bff;
  margin: 10px 0;
}

.status-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
  font-size: 0.95em;
}

.status-table th, .status-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.status-table th {
  background: #f4f6f8;
  font-weight: 600;
  color: #555;
}

.status-table td:nth-child(2), 
.status-table td:nth-child(3) {
  text-align: left  1. Base
  2. Grid de Cards
  3. Cards
  4. Títulos Detalhes
  5. Listas Gerais
  6. Lista de Clientes Devedores
  7. Botões
  8. Destaques
  9. Menu do Card
  10. Drag & Drop
  11. Detalhes por Cliente
  12. Topo
  13. Switch/Toggle
  14. Login
  15. Tabela Detalhes  1. Base
  2. Grid de Cards
  3. Cards
  4. Títulos Detalhes
  5. Listas Gerais
  6. Lista de Clientes Devedores
  7. Botões
  8. Destaques
  9. Menu do Card
  10. Drag & Drop
  11. Detalhes por Cliente
  12. Topo
  13. Switch/Toggle
  14. Login
  15. Tabela Detalhes  1. Base
  2. Grid de Cards
  3. Cards
  4. Títulos Detalhes
  5. Listas Gerais
  6. Lista de Clientes Devedores
  7. Botões
  8. Destaques
  9. Menu do Card
  10. Drag & Drop
  11. Detalhes por Cliente
  12. Topo
  13. Switch/Toggle
  14. Login
  15. Tabela Detalhes  1. Base
  2. Grid de Cards
  3. Cards
  4. Títulos Detalhes
  5. Listas Gerais
  6. Lista de Clientes Devedores
  7. Botões
  8. Destaques
  9. Menu do Card
  10. Drag & Drop
  11. Detalhes por Cliente
  12. Topo
  13. Switch/Toggle
  14. Login
  15. Tabela Detalhes;
  white-space: nowrap;
}

.btn-detalhes {
  background: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.9em;
  transition: background 0.2s ease;
}

.btn-detalhes:hover {
  background: #0056b3;
}

.status-vazio td {
  color: #999;
  font-style: italic;
}


/* ====== Ajustes visuais do Card "Por Status" ====== */
#card-status h2 {
  margin-bottom: 8px;
}

#card-status .grupo-titulo {
  font-size: 0.8em;
  font-weight: 300;
  margin: 20px 0px 0px 0px;
  border-radius: 8px;
  display: inline-block;
  letter-spacing: 0.3px;
}


/* ajusta o espaçamento da lista abaixo do título */
#card-status ul.list {
  margin-top: 5px;
}

/* =========================================
   VISÃO DE CARDS (DETALHES)
   ========================================= */

/* Cabeçalho do Cliente (Estilo Print) */
.client-header-card {
    background-color: #4a90e2; /* Azul bonito */
    color: white;
    padding: 15px;
    font-size: 1.3em;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 8px 8px 0 0;
    margin-top: 30px;
}

/* Container cinza que segura os cards */
.client-body-card {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-top: none;
    padding: 20px;
    border-radius: 0 0 8px 8px;
    display: grid;
    /* Grid responsivo: cria colunas automaticamente */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

/* O Card do Pedido individual */
/* =========================================
   NOVO ESTILO DO CARD (Mais Limpo e Compacto)
   ========================================= */

.order-card {
    background: #fff;
    border: 1px solid #e0e0e0; /* Borda cinza suave em vez de azul forte */
    border-radius: 12px;       /* Cantos bem arredondados */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Sombra leve e elegante */
    transition: transform 0.2s, box-shadow 0.2s;
}

.order-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.order-card-header {
    background-color: #f1f8ff; /* Azul muito suave */
    color: #0056b3;
    padding: 10px 15px;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e1e4e8;
}

.order-card-body {
    padding: 12px 15px;
    font-size: 0.9rem;
    color: #444;
    display: flex;
    flex-direction: column;
    gap: 6px; /* Espaço menor entre linhas para diminuir altura */
}

/* Utilitário para colocar coisas na mesma linha */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Garante que não quebre em telas muito pequenas */
}

/* Estilo dos Links de Ação */
.action-row {
    display: flex;
    justify-content: space-between; /* Espalha os botões */
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #eee;
    gap: 10px;
}

.action-link {
    cursor: pointer;
    color: #0066cc;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s;
}
.action-link:hover { color: #004499; text-decoration: underline; }

.link-edit { color: #28a745; }
.link-edit:hover { color: #1e7e34; }

.link-hist { color: #e67e22; }
.link-hist:hover { color: #d35400; }

/* Ajuste fino nos labels */
.oc-label { color: #888; font-weight: 500; font-size: 0.8rem; margin-right: 4px; }
.oc-val { font-weight: 600; color: #333; }
/* =========================================
   ESTILO PROFISSIONAL PARA ITENS NO CARD
   ========================================= */

/* O Container que permite o scroll lateral */
.scroll-wrapper {
    width: 100%;
    overflow-x: auto;      /* Permite rolar para o lado */
    -webkit-overflow-scrolling: touch; /* Rolagem suave no celular */
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-top: 10px;
    background: #fff;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05); /* Sombra interna sutil */
}

/* A Tabela em si */
.mini-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px; /* <--- O SEGREDO: Força a tabela a ter largura mínima, ativando o scroll */
}

/* Cabeçalho elegante */
.mini-table th {
    background-color: #f8f9fa;
    color: #666;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px;
    text-align: left;
    border-bottom: 2px solid #eee;
    white-space: nowrap; /* Não deixa o título quebrar linha */
}

/* Células */
.mini-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.85rem;
    color: #333;
    vertical-align: middle;
}

/* Destaques e Alinhamentos */
.mini-table td.num { text-align: right; font-family: 'Consolas', monospace; font-weight: 600; }
.mini-table th.num { text-align: right; }
.mini-table tr:last-child td { border-bottom: none; }

/* Destaque visual na linha ao passar o mouse */
.mini-table tbody tr:hover {
    background-color: #fafafa;
}

/* Subtítulo dentro do popover (Produtos / Custos) */
.mini-section-title {
    font-size: 0.8rem;
    color: #4a90e2;
    font-weight: bold;
    margin: 15px 0 5px 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================================
   ATUALIZAÇÃO DO CARD (Layout Vertical)
   ========================================= */

.order-card-body {
    padding: 15px;
    font-size: 0.9rem;
    color: #444;
    display: flex;
    flex-direction: column;
    gap: 8px;          /* Espaçamento entre linhas */
    text-align: left;  /* Alinhamento à esquerda */
}

/* Status com mais destaque */
.status-highlight {
    display: inline-block;
    font-size: 1rem;
    font-weight: 800;
    color: #0056b3;
    background: #e3f2fd;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #bbdefb;
    margin-top: 2px;
}
.status-highlight.atrasado {
    background: #ffebee;
    color: #c62828;
    border-color: #ffcdd2;
}

/* Badges de Prazo */
.badge-prazo {
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}
.bg-late { background-color: #ffebee; color: #d32f2f; border: 1px solid #ffcdd2; }
.bg-today { background-color: #fff3e0; color: #ef6c00; border: 1px solid #ffe0b2; }
.bg-ok { background-color: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }

/* Link Consolidado */
.link-expand {
    display: block;
    background-color: #f8f9fa;
    color: #333;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-weight: 600;
    margin-top: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.link-expand:hover { background-color: #e2e6ea; }

/* Ajuste das linhas de ação inferiores */
.action-row-bottom {
    display: flex;
    gap: 15px;
    margin-top: 8px;
    font-size: 0.85em;
}

/* =========================================
   LOADING OVERLAY (PROCESSANDO...)
   ========================================= */

.loading-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.9); /* Fundo branco semi-transparente */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999; /* Fica acima de tudo */
    visibility: hidden; /* Escondido por padrão */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.loading-overlay.active {
    visibility: visible;
    opacity: 1;
}

.loading-content {
    text-align: center;
}

.loading-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

/* Barra de Progresso Indeterminada */
.progress-container {
    width: 250px;
    height: 6px;
    background-color: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.progress-bar-animated {
    width: 50%;
    height: 100%;
    background-color: #007bff; /* Azul do sistema */
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3px;
    animation: loading-bar 1.5s infinite ease-in-out;
}

@keyframes loading-bar {
    0% { left: -50%; width: 50%; }
    50% { left: 25%; width: 50%; }
    100% { left: 100%; width: 50%; }
}

/* === ESTILOS DA TABELA DE DETALHES (LISTA) === */

.client-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    margin-bottom: 25px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.client-card-header {
    background-color: #007bff;
    color: white;
    padding: 12px 15px;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
}

/* Wrapper da Rolagem Horizontal */
.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: white;
}

.table-pedidos {
    width: 100%;
    border-collapse: collapse;
    /* Removemos o min-width fixo para deixar o conteúdo ditar a largura, 
       mas garantimos que ele expanda */
}

.table-pedidos th, 
.table-pedidos td {
    padding: 12px 10px; /* Padding confortável */
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    
    /* O SEGREDO: Não quebra linha nunca, força a rolagem */
    white-space: nowrap; 
}

.table-pedidos th {
    background-color: #f8f9fa;
    color: #555;
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid #eee;
}

/* Colunas Específicas (Ajuste fino de largura) */
.col-btn { width: 40px; text-align: center; padding-right: 2px !important; }
.col-id  { width: 60px; padding-left: 2px !important; font-weight: bold; }

/* Botão Expandir (+) */
.btn-expand {
    background-color: #0d6efd;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Status e Ícones */
.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}
.status-green { background-color: #28a745; }
.status-blue { background-color: #007bff; }
.status-yellow { background-color: #ffc107; }
.status-red { background-color: #dc3545; }
.status-gray { background-color: #6c757d; }

.link-finance {
    text-decoration: none;
    font-size: 1.1rem;
    margin-left: 5px;
    vertical-align: middle;
}

/* Área de Detalhes Expandida */
.details-row { display: none; background-color: #f8faff; }
.details-content { padding: 15px; border-left: 4px solid #007bff; white-space: normal; /* Aqui pode quebrar linha */ }

/* === TOGGLE SWITCH (O slider arredondado) === */
.switch-box {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 5px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    margin-right: 10px;
}
.switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider { background-color: #007bff; }
input:checked + .slider:before { transform: translateX(22px); }

.switch-label {
    font-size: 0.95rem;
    color: #555;
    font-weight: 500;
}