/* Recibos (recibo.html). Reaproveita os tokens/classes globais de
   css/styles.css (.card, .auth-form, .auth-field, .excel-btn, .access-banner)
   — aqui só o que é específico desta tela: o formulário de emissão, o "papel"
   do recibo (pré-visualização branca) e a lista do histórico.

   O papel é o único bloco claro do ecossistema de propósito: ele não é um
   card do painel, é a folha que vai sair na impressora. Trocar por fundo
   escuro faria a tela mentir sobre o documento impresso. */

/* ---------- Header ------------------------------------------------------ */
/* Mesma receita de vidro 3D dos botões de header da Produção
   (.producao-header-btn em css/producao.css). O <span> em volta do texto no
   HTML NÃO é decorativo: sem ele o texto some sob o pseudo-elemento (bug já
   corrigido várias vezes neste projeto — ver nota em css/styles.css). */
.logout-powered-row .excel-btn.recibo-header-btn{
  margin-top:0;
  padding:9px 14px;
  border-radius:12px;
  font-family:'Inter', sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.01em;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 60%),
    rgba(26,31,38,0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px -16px rgba(0,0,0,0.6);
  color:var(--text);
}
.logout-powered-row .excel-btn.recibo-header-btn:hover{
  border-color:rgba(255,255,255,0.2);
  color:var(--text);
}

/* ---------- Emissão: formulário + papel lado a lado --------------------- */
.recibo-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.recibo-emissao-body{
  display:grid;
  grid-template-columns:minmax(0, 360px) minmax(0, 1fr);
  gap:24px;
  align-items:start;
}

.recibo-form{ margin:0; }
.recibo-form-linha{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* .auth-field input em styles.css reserva 44px à esquerda pro ícone do card
   de login — aqui não tem ícone nenhum, então o texto começaria longe da
   borda. Escopo só deste formulário: não mexe no login nem em outra tela. */
.recibo-form .auth-field input,
.recibo-form .auth-field select,
.recibo-form .auth-field textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-2);
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:14px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.recibo-form .auth-field textarea{ resize:vertical; }
.recibo-form .auth-field input:focus,
.recibo-form .auth-field select:focus,
.recibo-form .auth-field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,0.12);
}

/* O placeholder global (.auth-field input::placeholder em styles.css) usa
   --text-faint, pensado pro card de login sobre fundo bem escuro. Aqui, sobre
   o --panel-2 do formulário, ele quase some — reclamação do usuário
   (2026-09-08). Sobe pro --text-dim (mesmo tom do texto secundário do resto
   da tela) e cobre também select/textarea, que a regra global nem alcança. */
.recibo-form .auth-field input::placeholder,
.recibo-form .auth-field textarea::placeholder{
  color:var(--text-dim);
  opacity:1; /* Firefox baixa a opacidade do placeholder por padrão */
}

/* Mesmo motivo: o subtítulo de instrução da emissão (.card-sub =
   --text-faint) fica ilegível sobre o card. Só o desta tela. */
.recibo-emissao .card-sub{ color:var(--text-dim); }
/* O <select> nativo em tema escuro fica com a seta invisível em alguns
   navegadores — seta própria desenhada em background. */
.recibo-form .auth-field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2B705' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:15px;
  padding-right:36px;
  cursor:pointer;
}

/* ---------- O papel do recibo ------------------------------------------ */
.recibo-preview-wrap{
  min-width:0;
  display:flex;
  justify-content:center;
}

.recibo-papel{
  width:100%;
  max-width:640px;
  background:#ffffff;
  color:#111417;
  border:2px solid #111417;
  border-radius:22px;
  padding:20px 26px 22px;
  font-family:'Inter', sans-serif;
  font-size:12.5px;
  line-height:1.45;
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
}

.recibo-papel-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.recibo-papel-logos{
  display:flex;
  align-items:center;
  gap:10px;
}
.recibo-papel-logos img{ height:34px; width:auto; display:block; }

.recibo-papel-num,
.recibo-papel-valor{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.recibo-papel-num-label{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#111417;
}
.recibo-papel-num-valor,
.recibo-papel-valor-num{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:700;
  font-size:15px;
  background:#e9ecef;
  border-radius:4px;
  padding:3px 12px;
  min-width:78px;
  text-align:center;
}
.recibo-papel-valor-num{ font-size:16px; }

.recibo-papel-emissor{
  margin:14px 0 4px;
  padding-bottom:10px;
  border-bottom:1.5px solid #111417;
  display:flex;
  flex-direction:column;
  gap:1px;
  font-size:11.5px;
}
.recibo-papel-emissor strong{ font-size:12.5px; letter-spacing:0.01em; }

/* Cada campo é rótulo em negrito + a linha preenchida, igual ao talão de
   papel: a borda inferior é a "linha" onde se escreveria à mão. */
.recibo-papel-linha{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin-top:11px;
}
.recibo-papel-rot{
  flex:0 0 auto;
  font-weight:700;
  font-size:11.5px;
  white-space:nowrap;
}
.recibo-papel-preenche{
  /* Preenchido em MAIÚSCULAS, igual ao PDF (ver campo() em js/recibo.js) —
     a prévia tem que mostrar exatamente o que sai impresso. */
  text-transform:uppercase;
  flex:1 1 auto;
  min-width:0;
  border-bottom:1px solid #111417;
  padding:0 2px 2px;
  min-height:18px;
  font-size:12.5px;
  overflow-wrap:anywhere;
}

.recibo-papel-fecho{ margin-top:16px; font-size:11.5px; }
.recibo-papel-data{
  margin-top:6px;
  text-align:right;
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:0.02em;
  text-transform:uppercase;
}

.recibo-papel-assinatura{ margin-top:26px; }
.recibo-papel-assinatura-linha{
  border-bottom:1px solid #111417;
  margin:0 auto;
  width:min(340px, 80%);
}
.recibo-papel-assinatura-nome{
  margin-top:5px;
  text-align:center;
  font-size:10.5px;
  opacity:0.85;
}

/* ---------- Histórico --------------------------------------------------- */
.recibo-count-pill,
.recibo-total-pill{
  display:inline-block;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px;
  font-weight:600;
  color:var(--text-dim);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:2px 9px;
  margin-left:6px;
}
.recibo-total-pill{ color:var(--accent); margin-left:0; }

.recibo-busca-wrap{ position:relative; margin-bottom:10px; }
.recibo-busca-icone{
  position:absolute;
  left:11px;
  top:50%;
  transform:translateY(-50%);
  width:15px;
  height:15px;
  color:var(--text-faint);
  pointer-events:none;
}
/* Mesmo campo "vidro 3D" da busca da Produção (.producao-filtro-busca) —
   padrão pedido pelo usuário; não trocar por fundo chapado. */
.recibo-filtro-busca{
  width:100%;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012) 60%),
    rgba(26,31,38,0.4);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px -16px rgba(0,0,0,0.55);
  color:var(--text);
  padding:9px 11px 9px 34px;
  font-size:12.5px;
  font-family:'Inter', sans-serif;
  outline:none;
}

.recibo-lista{ display:flex; flex-direction:column; gap:8px; }
.recibo-lista-item{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-2);
}
.recibo-item-num{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:700;
  font-size:12px;
  color:var(--accent);
  flex:0 0 auto;
}
.recibo-item-info{ flex:1 1 240px; min-width:0; }
.recibo-item-cliente{
  font-weight:600;
  font-size:13px;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.recibo-item-sub{ font-size:11.5px; color:var(--text-dim); margin-top:2px; }
.recibo-item-valor{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:700;
  font-size:14px;
  color:var(--good);
  flex:0 0 auto;
}
.recibo-item-forma{
  font-family:'Oswald', sans-serif;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-dim);
  border:1px solid var(--line);
  border-radius:20px;
  padding:2px 9px;
  flex:0 0 auto;
}
.recibo-item-acoes{ display:flex; gap:6px; flex:0 0 auto; }
.recibo-item-acoes .excel-btn{ margin-top:0; }
/* Excluir recibo emitido é só do admin — o guard de verdade está no servidor
   (/api/recibo/excluir) e de novo no clique; aqui é só não parecer clicável
   pra quem não pode. */
.recibo-item-excluir{ display:none; }
.recibo-role-admin .recibo-item-excluir{ display:inline-block; }
.recibo-item-excluir:hover{ border-color:var(--bad); color:var(--bad); }

.recibo-lista-empty{
  font-size:12.5px;
  color:var(--text-faint);
  padding:14px 2px;
}

@media (max-width: 1100px){
  .recibo-emissao-body{ grid-template-columns:minmax(0, 1fr); }
  .recibo-preview-wrap{ justify-content:flex-start; }
}

@media (max-width: 640px){
  .recibo-form-linha{ grid-template-columns:1fr; }
  .recibo-papel{ padding:14px 16px 18px; border-radius:16px; font-size:12px; }
  .recibo-papel-logos img{ height:26px; }
  .recibo-papel-topo{ gap:8px; }
  .recibo-papel-linha{ flex-wrap:wrap; gap:4px; }
  .recibo-papel-preenche{ flex-basis:100%; }
  .recibo-lista-item{ gap:8px; }
  .recibo-item-acoes{ width:100%; }
  .recibo-item-acoes .excel-btn{ flex:1 1 auto; }
}

/* Filtro de período/número do histórico + botão do PDF da lista
   (20/09/2026). Mesmo campo "vidro 3D" da busca logo acima — não trocar por
   fundo chapado. Quebra linha sozinho em tela estreita. */
.recibo-filtros{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.recibo-filtro-label{
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-faint);
  font-weight:600;
}
.recibo-filtro-campo{
  background:
    linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012) 60%),
    rgba(26,31,38,0.4);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px -16px rgba(0,0,0,0.55);
  color:var(--text);
  padding:8px 11px;
  font-size:12.5px;
  font-family:'Inter', sans-serif;
  outline:none;
}
/* Campo de data: mesmo vidro dos outros + ícone de calendário por cima. O
   popup é o de css/gulp-datepicker.css — o calendário nativo do navegador
   não entra aqui (é branco, com outra fonte, fora do padrão do painel).
   As duas camadas vão juntas de propósito: o degradê TAMBÉM é
   background-image, então declarar só o ícone apagaria o vidro. */
.recibo-filtro-campo.gulp-date-input{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C636E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012) 60%);
  background-repeat:no-repeat, no-repeat;
  background-position:right 9px center, 0 0;
  background-size:14px 14px, auto;
  background-color:rgba(26,31,38,0.4);
  padding-right:30px;
  width:140px;
}
.recibo-filtro-campo:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(242,183,5,0.12); }
.recibo-filtro-numero{ width:130px; }
.recibo-filtro-btn{
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel-2);
  color:var(--text);
  padding:8px 13px;
  font-size:12.5px;
  font-family:'Inter', sans-serif;
  font-weight:600;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.recibo-filtro-btn:hover{ border-color:var(--accent); color:var(--accent); }
/* O do PDF é o de ação: dourado discreto, sem virar botão principal (esse é
   o "Emitir e gerar PDF" lá de cima). */
.recibo-filtro-btn-pdf{
  border-color:rgba(242,183,5,0.45);
  color:var(--accent);
}
.recibo-filtro-btn-pdf:hover{ border-color:var(--accent); background:rgba(242,183,5,0.10); }
.recibo-filtro-btn[disabled]{ opacity:0.5; cursor:default; }