:root {
    --primary-color: #002B5B; /* Azul Escuro */
    --secondary-color: #FF8C00; /* Laranja */
    --bg-color: #F4F7F6;
    --white: #FFFFFF;
    --text-color: #2D3436;
    --text-light: #636E72;
    --border-color: #DFE6E9;
    --success-color: #27AE60;
    --danger-color: #D63031;
    --sidebar-width: 260px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    min-height: 100vh;
}

/* Sidebar Fixa */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--primary-color);
    color: var(--white);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.sidebar-header {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 3rem;
    text-align: center;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 1rem;
}

.sidebar-nav {
    list-style: none;
    flex-grow: 1;
}

.sidebar-nav li {
    margin-bottom: 0.8rem;
}

.sidebar-nav a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 0.8rem 1.2rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.sidebar-nav a:hover, .sidebar-nav a.active {
    background-color: rgba(255,255,255,0.1);
    color: var(--white);
}

.sidebar-nav a.active {
    border-left: 4px solid var(--secondary-color);
}

/* Conteúdo Principal */
.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    padding: 2.5rem;
    width: calc(100% - var(--sidebar-width));
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}

.page-title h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Componentes Premium */
.card {
    background: var(--white);
    border-radius: 15px;
    padding: 1.8rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    border: 1px solid var(--border-color);
}

.btn {
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--secondary-color);
    color: var(--white);
}

.btn-danger {
    background-color: var(--danger-color);
    color: var(--white);
}
.btn-danger:hover {
    filter: brightness(0.95);
}

.btn-primary:hover {
    background-color: #E67E00;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-light);
}

.btn-outline:hover {
    background: var(--bg-color);
}

/* Tabelas */
.table-wrapper {
    background: var(--white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    border: 1px solid var(--border-color);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background-color: #F8FAFB;
    text-align: left;
    padding: 1.2rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-color);
}

td {
    padding: 1.2rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}

tr:last-child td {
    border-bottom: none;
}

/* Formulários */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    margin-bottom: 0.6rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-color);
    display: flex;
    flex-direction: column;
}

.form-control {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: var(--secondary-color);
}

/* Dashboard Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.stat-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 15px;
    border-left: 5px solid var(--secondary-color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
}

.stat-card h3 {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.stat-card .value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-color);
}

.modal-produto {
max-height: 90vh;
overflow-y: auto;
}


.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}


@media (max-width: 768px) {
.form-grid {
grid-template-columns: 1fr;
}
}

/* Responsividade */
@media (max-width: 992px) {
    .sidebar {
        width: 80px;
        padding: 2rem 0.5rem;
    }
    .sidebar-header, .sidebar-nav span {
        display: none;
    }
    .main-content {
        margin-left: 80px;
        width: calc(100% - 80px);
    }
}

@media (max-width: 600px) {
    .main-content {
        padding: 1.5rem;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
}



.toggle-btn.is-active{
  background:#0b2a4a; /* azul escuro do tema */
  color:#fff;
  border-color:#0b2a4a;
}

.help-text{
  display:block;
  margin-top:.35rem;
  opacity:.75;
}

.toggle-wrap{
  display:flex;
  gap:.5rem;
  align-items:center;
}

.toggle-btn{
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  padding:.55rem .9rem;
  border-radius:.75rem;
  cursor:pointer;
  font-weight:600;
}


/* 👉 Para alterar o tamanho da tela de cadastro de Produto */
#modalProduto .modal-content.modal-produto{
  width: 90vw;
  max-width: 1100px;
  max-height: 90vh;      /* não passa da tela */
  overflow-y: hidden;      /* scroll interno */
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  display: flex;
  flex-direction: column;
}

/* Adiciona scroll dentro do conteúdo, com padding pra não colar na borda */
#modalProduto .modal-content.modal-produto form {
  overflow-y: auto;
  padding-right: 1rem;
  max-height: 100%;
}

/* Grid do formulário */
#modalProduto .form-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Itens que precisam ocupar a largura toda */
#modalProduto .span-2{
  grid-column: 1 / -1;
}

/* Mobile: vira 1 coluna */
@media (max-width: 768px){
  #modalProduto .form-grid{
    grid-template-columns: 1fr;
  }
}

/* 🎨 Estilo do seletor de categorias */

.categoria-select {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.5rem;
  background: var(--white);
  min-height: 52px;
  cursor: text;
}

.categoria-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.categoria-tag {
  background: var(--primary-color);
  color: #fff;
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.categoria-tag button {
  background: transparent;
  border: none;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.categoria-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 180px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border-color);
  border-top: none;
  z-index: 10;
}

.categoria-dropdown div {
  padding: 0.6rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.categoria-dropdown div:hover {
  background-color: var(--bg-color);
}

/* ============================
   🧩 Abas premium (Produtos)
   ============================ */
.tabs{
  display:flex;
  gap:.6rem;
  margin: .5rem 0 1rem;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--border-color);
  padding: .45rem;
  border-radius: 14px;
  width: fit-content;
}

.tab-btn{
  border: none;
  background: transparent;
  padding: .65rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  color: var(--text-light);
  display:flex;
  align-items:center;
  gap:.55rem;
  transition: all .2s ease;
}

.tab-btn:hover{
  background: rgba(0,0,0,.04);
  color: var(--text-color);
}

.tab-btn.is-active{
  background: var(--primary-color);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.tab-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 28px;
  height: 22px;
  padding: 0 .45rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 900;
  background: rgba(255,255,255,.2);
  color: #fff;
}

.tab-badge-muted{
  background: rgba(0,0,0,0.08);
  color: var(--text-light);
}

.tab-badge-warn{
  background: rgba(255,140,0,.18);
  color: #b45309;
}
.tab-btn.is-active .tab-badge-warn{
  background: rgba(255,255,255,.25);
  color: #fff;
}

/* ================================
   ✅ Tabela Produtos - mais “premium”
   ================================ */

.table-wrapper table tbody tr{
  transition: background .15s ease;
}

.table-wrapper table tbody tr:hover{
  background: #FAFBFC;
}

td{
  vertical-align: middle;
}

/* deixa as ações mais alinhadas */
td[style*="text-align:right"] .btn{
  padding: .55rem .85rem;
}

/* ✅ Badge visível quando a aba NÃO está ativa (especialmente "Disponíveis") */
.tab-btn:not(.is-active) .tab-badge{
  background: #E9EEF3;              /* cinza claro */
  color: var(--primary-color);       /* azul escuro */
  border: 1px solid var(--border-color);
}

/* mantém o badge “branco/transparente” quando a aba está ativa */
.tab-btn.is-active .tab-badge{
  background: rgba(255,255,255,.20);
  color: #fff;
  border: 1px solid rgba(255,255,255,.20);
}

/* 🔥 Destaque do Reestoque quando houver pendências (total > 0) */
.tab-btn.is-alert:not(.is-active) .tab-badge-warn{
  background: rgba(255,140,0,.22);   /* laranja suave */
  color: #a64b00;                    /* texto laranja escuro */
  border: 1px solid rgba(255,140,0,.35);
}

.tab-btn.is-alert.is-active .tab-badge-warn{
  background: rgba(255,255,255,.25); /* quando a aba está ativa */
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
}

.toolbar-produtos{
  display:flex;
  gap: .8rem;
  align-items:center;
  justify-content: space-between;
  margin: .25rem 0 1rem;
  flex-wrap: wrap;
}

/* 🔎 Busca */
.search-wrap{
  position: relative;
  display:flex;
  align-items:center;
  gap:.5rem;

  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: .55rem .75rem;

  flex: 1 1 900px;     /* permite crescer bastante */
  min-width: 520px;    /* mínimo maior (ajuste se quiser) */
  max-width: 1100px;   /* limite máximo (aumente se quiser) */

  box-shadow: 0 10px 25px rgba(0,0,0,0.03);
}

.search-ico{
  opacity:.65;
}

.search-input{
  border: none;
  outline: none;
  width: 100%;
  font-size: .95rem;
  background: transparent;
  color: var(--text-color);
}


.tabs-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  margin: .5rem 0 1rem;
  width: 100%;
}

/* garante que as abas não “empurrem” o botão pra baixo */
.tabs-row .tabs{
  margin: 0;            /* tira margens antigas da .tabs se tiver */
}

/* em telas menores, deixa quebrar bonitinho */
@media (max-width: 768px){
  .tabs-row{
    flex-wrap: wrap;
  }
  .tabs-row .btn{
    margin-left: auto;  /* mantém o botão à direita quando quebrar */
  }
}

/* Barra acima da tabela: abas à esquerda e filtro à direita */
.tabs-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .5rem 0 1rem;
}

/* mantém seu .tabs como está, só garantindo que não estoure */
.tabs-bar .tabs{
  width: fit-content;
}

/* botão filtro alinhado à direita */
.btn-filtro{
  white-space: nowrap;
}

/* Responsivo: em telas pequenas, joga o filtro pra baixo */
@media (max-width: 680px){
  .tabs-bar{
    flex-direction: column;
    align-items: stretch;
  }
  .btn-filtro{
    width: 100%;
  }
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

input[type="file"] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.modal-title {
  color: var(--primary-color);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
}

.btn-importar {
  background-color: #f0f2f5; /* tom mais claro */
  border: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-importar:hover {
  background-color: #e6e8eb;
}

.btn-outline-primary {
  background-color: rgba(52, 152, 219, 0.07); /* azul clarinho */
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}


/* =========================
   🔝 PRIORIDADE DE CAMADAS
   ========================= */

/* Sidebar */
.sidebar {
  z-index: 900;
}

/* Modal crítico (exclusão, alertas importantes) */
.modal-top,
#modalExcluirProduto {
  z-index: 4000;
}

/* Conteúdo do modal */
.modal-content {
  background: var(--white);
  border-radius: 14px;
  padding: 2rem;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  animation: slideUp 0.25s ease-out;
}

/* Animação */
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 📤 Modal Exportação */
.export-section {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  padding: 1.2rem;
  border-radius: 14px;
  margin-bottom: 1.2rem;
}

.export-section h4{
  margin-bottom: .6rem;
  color: var(--primary-color);
  font-weight: 800;
}

.export-fields label {
  background: #fff;
  padding: .6rem .8rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}

.export-fields label:hover {
  background: #f9fafb;
}

/* 🔘 Ações da barra de produtos */
.acoes-produtos{
  display: flex;
  gap: .6rem;
  align-items: center;
}

.tab-action{
  border: none;
  background: rgba(255,255,255,.6);
  padding: .85rem 1.3rem; 
  border-radius: 16px;
  cursor: pointer;
  font-weight: 800;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: .55rem;
  transition: all .2s ease;
  border: 1px solid var(--border-color);
  font-size: .85rem;
}

.tab-action:hover{
  background: rgba(0,0,0,.04);
  color: var(--text-color);
}

.tab-action.primary{
  background: var(--primary-color);
  color: #fff;
}

.tab-action.primary:hover{
  background: #001f42;
}

/* ================================
   🔘 Botão padrão cinza (sistema)
   ================================ */

.btn-neutral {
  background-color: #f0f2f5;
  border: 1px solid var(--border-color);
  padding: 0.75rem 1.3rem;   /* ⬅ maior */
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: all 0.2s ease;
}

.btn-neutral:hover {
  background-color: #e6e8eb;
}

.btn-neutral:active {
  transform: translateY(1px);
}

/* ===========================
   📦 MODAL DETALHES PRODUTO
   =========================== */

.detalhe-header{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 1.5rem;
}

.detalhe-header h2{
  color: var(--primary-color);
  font-weight: 800;
  font-size: 1.6rem;
}

.detalhe-status{
  padding: .45rem .9rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.detalhe-status.ativo{
  background: rgba(39,174,96,.15);
  color: var(--success-color);
}

.detalhe-status.inativo{
  background: rgba(214,48,49,.15);
  color: var(--danger-color);
}

.detalhe-body{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
}

.detalhe-foto img{
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--border-color);
}

.detalhe-descricao{
  margin-bottom: 1.5rem;
  color: var(--text-light);
  line-height: 1.6;
}

.detalhe-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.detalhe-item{
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  padding: .9rem 1rem;
  border-radius: 12px;
  display:flex;
  flex-direction: column;
}

.detalhe-item span{
  font-size: .75rem;
  color: var(--text-light);
  margin-bottom: .25rem;
}

.detalhe-item strong{
  font-size: .95rem;
  color: var(--text-color);
}

.detalhe-item.destaque{
  background: rgba(255,140,0,0.08);
  border-color: rgba(255,140,0,.35);
}

@media (max-width: 768px){
  .detalhe-body{
    grid-template-columns: 1fr;
  }

  .detalhe-grid{
    grid-template-columns: 1fr;
  }

  .detalhe-foto img{
    height: 220px;
  }
}

/* 🧾 Modal Detalhes do Produto */
#modalDetalhesProduto .modal-content {
  max-width: 920px;      /* antes estava 900+ */
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}

/* Quebra textos longos */
#modalDetalhesProduto {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#modalDetalhesProduto p,
#modalDetalhesProduto span,
#modalDetalhesProduto div {
  max-width: 100%;
  white-space: normal;
}

.detalhe-descricao{
  max-height: 140px;
  overflow-y: auto;
  padding-right: .5rem;
  line-height: 1.5;
  color: var(--text-light);
}

.ajuste-toggle{
  display:flex;
  gap:1rem;
}

.ajuste-btn{
  flex:1;
  padding:0.9rem;
  border-radius:14px;
  border:1px solid var(--border-color);
  font-weight:700;
  cursor:pointer;
  background:#fff;
  transition:.2s;
}

.ajuste-btn.entrada{
  color:var(--success-color);
}

.ajuste-btn.baixa{
  color:var(--danger-color);
}

.ajuste-btn.ativo.entrada{
  background:rgba(39,174,96,0.12);
  border-color:var(--success-color);
}

.ajuste-btn.ativo.baixa{
  background:rgba(214,48,49,0.12);
  border-color:var(--danger-color);
}

.paginacao {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin: 1.5rem 0;
}

.paginacao button {
  padding: .4rem .7rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  cursor: pointer;
}

.paginacao button.ativo {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.paginacao button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.paginacao {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.paginacao button {
  min-width: 36px;
  padding: .4rem .6rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: #fff;
  cursor: pointer;
}

.paginacao button.ativo {
  background: var(--primary-color);
  color: #fff;
  font-weight: 700;
}

.paginacao button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.paginacao-ellipsis {
  padding: .4rem .6rem;
  color: var(--text-light);
}

.detalhe-foto {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.detalhe-descricao.abaixo-foto {
  max-height: 160px;
  overflow-y: auto;
  padding: 1rem;
  border-radius: 12px;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-color);
}

.acoes-massa{
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 24px;

  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  border: 1px solid var(--border-color);

  display: none;
  align-items: center;
  gap: 14px;

  z-index: 9999;
  min-width: 600px;
  
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(6px);

}

.table-wrapper input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color);
  cursor: pointer;
}

.checkProduto,
#checkTodos {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary-color);
}

.modal {
  z-index: 9999;
}

.acoes-massa {
  z-index: 1000;
}

/* vendas agora > *//* vendas agora > *//* vendas agora > *//* vendas agora > *//* vendas agora > */

/* =========================
   PDV - Layout Geral
========================= */

.pdv-container {
  display: flex;
  gap: 2rem;
  height: 520px;
}

.pdv-left {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pdv-right {
  width: 380px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-color);
  padding-left: 1.5rem;
}

/* =========================
   Lista de Produtos
========================= */

.pdv-produtos {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1rem;
  background: var(--card-bg, #fff);
}

.pdv-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s ease;
}

.pdv-item:hover {
  background: rgba(0,0,0,0.05);
}

.pdv-item strong {
  color: var(--primary-color);
}

/* =========================
   Carrinho
========================= */

.pdv-carrinho {
  flex: 1;
  overflow-y: auto;
  margin-top: 1rem;
}

.pdv-carrinho-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px dashed var(--border-color);
}

.pdv-carrinho-item strong {
  font-size: .95rem;
}

/* =========================
   Total
========================= */

.pdv-total-box {
  margin-top: 1rem;
  padding: 1.2rem;
  border-radius: 16px;
  background: var(--primary-color);
  color: white;
  text-align: center;
}

.pdv-total-box span {
  font-size: 2rem;
  font-weight: 800;
}

/* =========================
   Forma de Pagamento
========================= */

.pdv-forma {
  margin-top: 1.5rem;
}

/* =========================
   Botão Finalizar
========================= */

.pdv-finalizar {
  margin-top: 1.5rem;
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 14px;
}

/* =========================
   Responsivo
========================= */

@media (max-width: 900px) {
  .pdv-container {
    flex-direction: column;
    height: auto;
  }

  .pdv-right {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-color);
    padding-left: 0;
    padding-top: 1.5rem;
  }
}

/* ===========================
   SIDEBAR COLLAPSE/EXPAND
   Cole no FINAL do /public/css/style.css
   =========================== */

/* Topbar (barra superior) */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 16px;

  /* ✅ fundo sólido pra NÃO “misturar” com o conteúdo */
  background: #fff;

  border-bottom: 1px solid var(--border-color);

  /* ✅ dá um respiro do conteúdo */
  margin: -2.5rem -2.5rem 1.5rem; /* compensa o padding de 2.5rem da .main-content */
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

/* Título na topbar */
.topbar-title{
  font-weight: 600;
  color: var(--text-color);
  opacity: 0.9;
}

/* Botão hambúrguer */
.hamburger{
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Os 3 traços */
/* CTRL+F: .hamburger span{ */
.hamburger span{
  display: block;
  width: 18px;
  height: 2px;

  /* ✅ antes: background: var(--text-color); */
  background: #fff; /* deixa os 3 traços visíveis no fundo escuro */

  opacity: 0.95;
  border-radius: 999px;
  margin: 2px 0;
}

/* ======== Estado recolhido ======== */
/* Quando o body tem a classe, a sidebar encolhe */
body.sidebar-collapsed .sidebar{
  width: 72px;               /* tamanho recolhido */
}

/* Quando recolhido, escondemos os textos */
body.sidebar-collapsed .sidebar .sidebar-nav a span{
  display: none;
}

/* Centraliza os links no modo recolhido */
body.sidebar-collapsed .sidebar .sidebar-nav a{
  justify-content: center;   /* pode depender do seu CSS atual; se não tiver flex, não quebra */
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

/* Ajusta o conteúdo principal quando a sidebar encolhe
   OBS: aqui depende se seu layout usa margin-left/padding-left.
   Se seu CSS atual já faz isso, pode manter só o que funcionar. */
body.sidebar-collapsed .main-content{
  /* se seu layout usa margin-left para “dar espaço” para a sidebar,
     troque o valor aqui para o seu padrão */
  margin-left: 72px;
}

/* ===========================
   ✅ SIDEBAR RECOLHÍVEL COM ÍCONES
   Cole no FINAL do style.css
   =========================== */

/* largura recolhida */
:root{
  --sidebar-collapsed-width: 78px;
}

/* animação suave */
.sidebar,
.main-content{
  transition: all .22s ease;
}

/* Header da sidebar agora é flex (botão + logo) */
.sidebar-header{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logo ajustado (substitui as classes que não existem no seu CSS) */
.logo-sidebar{
  width: 140px;            /* ajuste se quiser */
  height: auto;
  display: block;
}

/* Botão hambúrguer dentro da sidebar */
.sidebar-toggle{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  cursor: pointer;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* 3 traços (brancos no fundo azul) */
.sidebar-toggle span{
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 999px;
  opacity: .95;
}

/* ===== Estado recolhido ===== */
body.sidebar-collapsed .sidebar{
  width: var(--sidebar-collapsed-width);
  padding: 2rem 0.7rem; /* mais fino */
}

/* Esconde o logo quando recolhido */
body.sidebar-collapsed .logo-sidebar{
  display: none;
}

/* Centraliza nav quando recolhido */
body.sidebar-collapsed .sidebar-nav a{
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* Esconde os textos quando recolhido */
body.sidebar-collapsed .sidebar-nav a span{
  display: none;
}

/* Ícone sempre aparece (expandido e recolhido) */
.sidebar-nav a::before{
  content: attr(data-ico);
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 18px;
  margin-right: 10px;
  background: rgba(255,255,255,0.08);
}

/* No modo recolhido, tira o espaço do ícone */
body.sidebar-collapsed .sidebar-nav a::before{
  margin-right: 0;
}

/* Ajusta o conteúdo principal quando recolhido */
body.sidebar-collapsed .main-content{
  margin-left: var(--sidebar-collapsed-width);
  width: calc(100% - var(--sidebar-collapsed-width));
}

/* ===========================
   ✅ SIDEBAR FININHA + HOVER EXPAND + PIN (TRAVAR ABERTA)
   Cole no FINAL do style.css
   =========================== */

:root{
  --sidebar-expanded: 260px;           /* aberta (igual seu padrão) */
  --sidebar-collapsed: 78px;           /* fininha (só ícones) */
  --sidebar-anim: 220ms ease;          /* animação */
}

/* ✅ Base: sidebar e conteúdo com animação */
.sidebar{
  width: var(--sidebar-expanded);
  transition: width var(--sidebar-anim), padding var(--sidebar-anim);
  overflow: hidden; /* evita “vazar” texto quando encolhe */
}

.main-content{
  transition: margin-left var(--sidebar-anim), width var(--sidebar-anim);
}

/* ======================================================
   🔥 DEFAULT: começa recolhida (fininha) usando uma classe no body
   ====================================================== */

/* Quando estiver recolhida */
body.sidebar-collapsed .sidebar{
  width: var(--sidebar-collapsed);
  padding: 2rem 0.7rem;
}

/* Conteúdo acompanha */
body.sidebar-collapsed .main-content{
  margin-left: var(--sidebar-collapsed);
  width: calc(100% - var(--sidebar-collapsed));
}

/* Logo some quando recolhida */
body.sidebar-collapsed .logo-sidebar{
  display: none;
}

/* Texto some quando recolhida */
body.sidebar-collapsed .sidebar-nav a span{
  display: none;
}

/* Links centralizados no modo recolhido */
body.sidebar-collapsed .sidebar-nav a{
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* ======================================================
   🖱️ Hover: se recolhida e NÃO estiver “pinned”, abre ao passar mouse
   ====================================================== */
body.sidebar-collapsed:not(.sidebar-pinned) .sidebar:hover{
  width: var(--sidebar-expanded);
  padding: 2rem 1.5rem;
}

/* Quando abrir por hover, o logo volta */
body.sidebar-collapsed:not(.sidebar-pinned) .sidebar:hover .logo-sidebar{
  display: block;
}

/* Quando abrir por hover, o texto volta */
body.sidebar-collapsed:not(.sidebar-pinned) .sidebar:hover .sidebar-nav a span{
  display: inline;
}

/* Quando abrir por hover, o link volta a ter padding normal */
body.sidebar-collapsed:not(.sidebar-pinned) .sidebar:hover .sidebar-nav a{
  justify-content: flex-start;
  padding: 0.8rem 1.2rem;
}

/* 👇 IMPORTANTE: como a sidebar abre por cima (hover),
   não vamos mexer no main-content no hover para não “pular” a tela.
   Se você quiser empurrar o conteúdo junto no hover, eu ajusto também. */

/* ======================================================
   📌 PINNED: quando “travado aberto”, mostra tudo sempre
   ====================================================== */
body.sidebar-pinned .sidebar{
  width: var(--sidebar-expanded);
  padding: 2rem 1.5rem;
}

body.sidebar-pinned .logo-sidebar{
  display: block;
}

body.sidebar-pinned .sidebar-nav a span{
  display: inline;
}

body.sidebar-pinned .sidebar-nav a{
  justify-content: flex-start;
  padding: 0.8rem 1.2rem;
}

/* Quando pinned, o conteúdo fica no modo aberto normal */
body.sidebar-pinned .main-content{
  margin-left: var(--sidebar-expanded);
  width: calc(100% - var(--sidebar-expanded));
}

/* ======================================================
   ✅ ÍCONES: garantir que não “atrapalham o mouse”
   ====================================================== */

/* Ícone via ::before */
.sidebar-nav a::before{
  content: attr(data-ico);
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 18px;
  margin-right: 10px;
  background: rgba(255,255,255,0.08);

  /* ✅ não deixa o ::before “roubar” o mouse */
  pointer-events: none;
}

/* Botão ☰ dentro da sidebar sempre clicável */
.sidebar-toggle{
  pointer-events: auto;
}

/* (Opcional) quando recolhida, deixa o botão bem central */
body.sidebar-collapsed .sidebar-toggle{
  margin: 0 auto;
}

/* ======================================================
   ✅ Tooltip no modo recolhido (fica MUITO profissional)
   ====================================================== */
body.sidebar-collapsed .sidebar-nav a{
  position: relative;
}

body.sidebar-collapsed .sidebar-nav a::after{
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #111827;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

/* Tooltip: só aparece quando está fininha E a sidebar NÃO está aberta por hover */
body.sidebar-collapsed .sidebar-nav a::after{
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #111827;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

/* ✅ Só mostra tooltip quando a sidebar estiver fininha E NÃO estiver em hover */
body.sidebar-collapsed .sidebar:not(:hover) .sidebar-nav a:hover::after{
  opacity: 1;
}

/* ✅ Quando a sidebar abre (hover), não mostrar tooltip */
body.sidebar-collapsed .sidebar:hover .sidebar-nav a::after{
  opacity: 0 !important;
}

/* ===========================
   ✅ FORÇA EMOJI NO MODO RECOLHIDO
   Cole no FINAL do style.css
   =========================== */

/* Garante que no modo fininho o ícone é sempre o emoji (data-ico) */
body.sidebar-collapsed .sidebar-nav a::before{
  content: attr(data-ico) !important;
}

/* ===========================
   PDV LAUNCHER (BOTÕES GRANDES)
   CTRL+F: PDV-LAUNCHER-CSS
   =========================== */

.pdv-launcher{
  margin-top: 0.5rem;
}

.pdv-launcher-header{
  margin-bottom: 1.4rem;
}

.pdv-launcher-header h1{
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-color);
}

.pdv-launcher-header p{
  margin-top: .25rem;
  color: var(--text-light);
  font-weight: 500;
}

/* Grid estilo “painel” */
.pdv-launcher-grid{
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 18px;
}

/* Card base */
.pdv-tile{
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: #fff;
  padding: 18px 18px;
  text-align: left;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  gap: 10px;

  box-shadow: 0 10px 25px rgba(0,0,0,0.04);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.pdv-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.08);
}

.pdv-tile:active{
  transform: translateY(0px);
  filter: brightness(0.98);
}

/* Ícone (emoji) */
.pdv-tile-ico{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: rgba(0,0,0,0.06);
}

.pdv-tile-title{
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text-color);
}

.pdv-tile-sub{
  color: var(--text-light);
  font-weight: 500;
  font-size: .95rem;
}

/* Variações de cor (seguindo sua paleta) */
.pdv-tile-primary{
  background: linear-gradient(135deg, var(--primary-color), #001f42);
  border-color: rgba(255,255,255,0.12);
}
.pdv-tile-primary .pdv-tile-title,
.pdv-tile-primary .pdv-tile-sub{
  color: #fff;
}
.pdv-tile-primary .pdv-tile-ico{
  background: rgba(255,255,255,0.16);
}

.pdv-tile-accent{
  background: linear-gradient(135deg, var(--secondary-color), #E67E00);
  border-color: rgba(0,0,0,0.06);
}
.pdv-tile-accent .pdv-tile-title,
.pdv-tile-accent .pdv-tile-sub{
  color: #1f2937;
}
.pdv-tile-accent .pdv-tile-ico{
  background: rgba(255,255,255,0.35);
}

.pdv-tile-success{
  background: linear-gradient(135deg, var(--success-color), #1E8E52);
  border-color: rgba(0,0,0,0.06);
}
.pdv-tile-success .pdv-tile-title,
.pdv-tile-success .pdv-tile-sub{
  color: #fff;
}
.pdv-tile-success .pdv-tile-ico{
  background: rgba(255,255,255,0.16);
}

.pdv-tile-dark{
  background: linear-gradient(135deg, #4b5563, #111827);
  border-color: rgba(255,255,255,0.10);
}
.pdv-tile-dark .pdv-tile-title,
.pdv-tile-dark .pdv-tile-sub{
  color: #fff;
}
.pdv-tile-dark .pdv-tile-ico{
  background: rgba(255,255,255,0.14);
}

.pdv-tile-neutral{
  background: #fff;
}

/* Card principal maior (igual “Balcão/Venda”) */
.pdv-tile-primary{
  grid-row: span 2;
  min-height: 240px;
  justify-content: center;
}
.pdv-tile-primary .pdv-tile-title{
  font-size: 1.5rem;
}
.pdv-tile-primary .pdv-tile-ico{
  width: 68px;
  height: 68px;
  font-size: 30px;
  border-radius: 20px;
}

/* Responsivo */
@media (max-width: 980px){
  .pdv-launcher-grid{
    grid-template-columns: 1fr 1fr;
  }
  .pdv-tile-primary{
    grid-row: auto;
    grid-column: 1 / -1;
    min-height: 180px;
  }
}

@media (max-width: 560px){
  .pdv-launcher-grid{
    grid-template-columns: 1fr;
  }
}

/* ===========================
   PDV HOME - BALCÃO GIGANTE + COLUNA DIREITA
   =========================== */

.pdv-launcher{
  /* ocupa quase a tela toda, sem “matar” o padding do main-content */
  min-height: calc(100vh - 120px);
}

/* grid com 2 colunas: esquerda grande, direita fixa */
.pdv-launcher-grid{
  display: grid;
  grid-template-columns: 1.4fr 420px; /* ajuste a largura da coluna direita aqui */
  gap: 18px;
  align-items: stretch;
}

/* esquerda ocupa toda a altura */
.pdv-tile-balcao{
  min-height: calc(100vh - 170px); /* altura “tela cheia” (ajuste fino se quiser) */
  justify-content: center;
  text-align: center;
}

/* ícone e texto maiores no balcão */
.pdv-tile-balcao .pdv-tile-ico{
  width: 96px;
  height: 96px;
  font-size: 44px;
  border-radius: 26px;
  margin: 0 auto 8px;
}

.pdv-tile-balcao .pdv-tile-title{
  font-size: 2.1rem;
  font-weight: 900;
}

.pdv-tile-balcao .pdv-tile-sub{
  font-size: 1.05rem;
  opacity: .92;
}

/* coluna direita: empilha os cards */
.pdv-launcher-right{
  display: grid;
  grid-template-rows: repeat(5, minmax(86px, 1fr)); /* 5 botões empilhados */
  gap: 18px;
  min-height: calc(100vh - 170px);

  /* ✅ se a tela for baixa e não couber, vira scroll na coluna direita */
  overflow: auto;
  padding-right: 4px; /* espaço pro scroll não colar */
}

/* cards da direita ficam mais “compactos” */
.pdv-launcher-right .pdv-tile{
  justify-content: center;
}

/* responsivo */
@media (max-width: 1100px){
  .pdv-launcher-grid{
    grid-template-columns: 1fr; /* vira coluna única */
  }
  .pdv-tile-balcao,
  .pdv-launcher-right{
    min-height: auto;
  }
}

.pdv-tile-primary.pdv-tile-balcao{
  box-shadow: 0 22px 50px rgba(0,0,0,0.18);
}

/* ===========================
   ✅ PDV HOME - PREENCHER A TELA (sem branco na direita)
   CTRL+F: PDV-HOME-PREENCHER
   =========================== */

/* garante que o bloco do PDV use 100% da largura disponível */
.pdv-launcher{
  width: 100%;
  max-width: none;
}

/* faz o grid ocupar 100% da largura e ajusta a coluna direita dinamicamente */
.pdv-launcher-grid{
  width: 100%;

  /* ✅ esquerda ocupa o resto / direita cresce e encolhe conforme a tela */
  grid-template-columns: 1fr clamp(360px, 30vw, 640px);
}

/* opcional: se você quiser a direita mais larga, aumente o max ali (560px) */

/* ===========================
   PDV BALCÃO - ESTILO
   CTRL+F: PDV-BALCAO-CSS
   =========================== */

.pdv-page{
  width: 100%;
}

.pdv-top{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.pdv-title{
  color: var(--primary-color);
  font-size: 2rem;
  font-weight: 900;
}

.pdv-subtitle{
  margin-top: .25rem;
  color: var(--text-light);
  font-weight: 500;
}

.pdv-grid{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  align-items: start;
}

.pdv-col{
  padding: 1.25rem;
}

/* Busca */
.pdv-search{
  display:flex;
  align-items:center;
  gap: .6rem;
  padding: .75rem .85rem;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.03);
  margin-bottom: 1rem;
}

.pdv-search-input{
  border: none;
  outline: none;
  width: 100%;
  background: transparent;
}

/* Lista produtos */
.pdv-prod-list{
  max-height: calc(100vh - 320px);
  overflow:auto;
  padding-right: 4px;
}

.pdv-prod-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: .85rem .9rem;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  margin-bottom: .7rem;
  background: #fff;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.pdv-prod-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}

.pdv-prod-name{
  font-weight: 800;
  color: var(--text-color);
}

.pdv-prod-meta{
  font-size: .9rem;
  color: var(--text-light);
  margin-top: .1rem;
}

.pdv-prod-price{
  font-weight: 900;
  color: var(--primary-color);
  white-space: nowrap;
}

/* Carrinho */
.pdv-cart-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 1rem;
}

.pdv-cart-title{
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--primary-color);
}

.pdv-cart{
  max-height: calc(100vh - 420px);
  overflow:auto;
  padding-right: 4px;
}

.pdv-cart-item{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: .85rem .9rem;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  margin-bottom: .7rem;
  background: #fff;
}

.pdv-cart-item strong{
  color: var(--text-color);
}

.pdv-cart-controls{
  display:flex;
  align-items:center;
  gap: 8px;
  justify-content: flex-end;
}

.pdv-qty{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: .35rem .55rem;
}

.pdv-qty button{
  border: none;
  background: transparent;
  cursor: pointer;
  font-weight: 900;
  color: var(--primary-color);
  width: 28px;
  height: 28px;
  border-radius: 10px;
}

.pdv-qty button:hover{
  background: var(--bg-color);
}

.pdv-qty span{
  min-width: 22px;
  text-align:center;
  font-weight: 900;
}

.pdv-remove{
  border: none;
  background: rgba(214,48,49,.10);
  color: var(--danger-color);
  font-weight: 900;
  cursor:pointer;
  border-radius: 12px;
  padding: .45rem .65rem;
}

.pdv-summary{
  margin-top: 1rem;
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
}

.pdv-summary-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.pdv-btn-finalizar{
  width: 100%;
  padding: 1rem;
  border-radius: 14px;
}

.pdv-empty{
  padding: 1rem;
  color: var(--text-light);
  text-align:center;
}

/* Responsivo */
@media (max-width: 980px){
  .pdv-grid{
    grid-template-columns: 1fr;
  }
  .pdv-prod-list,
  .pdv-cart{
    max-height: none;
  }
}

.pdv-pay-row{
  display:grid;
  grid-template-columns: 1fr 160px 44px;
  gap: 10px;
  align-items:center;
  margin-bottom: .7rem;
}
.pdv-pay-row .btn-x{
  width:44px;
  height:44px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background:#fff;
  cursor:pointer;
}
.pdv-pay-row .btn-x:hover{ background: var(--bg-color); }

/* Remove sublinhado/linha de links que viraram tiles */
a.pdv-tile{
  text-decoration: none;
  color: inherit;
}

/* Remove aquele “outline roxo” padrão ao clicar */
a.pdv-tile:focus{
  outline: none;
}
a.pdv-tile:focus-visible{
  outline: 3px solid rgba(255,140,0,0.35);
  outline-offset: 3px;
  border-radius: 18px;
}

/* ===========================
   ÚLTIMAS VENDAS - VISUAL PREMIUM
   CTRL+F: UV-PREMIUM-CSS
   =========================== */

.pdv-history-page{
  width: 100%;
}

.pdv-history-stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 1rem;
}

.history-stat-card{
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.04);
}

.history-stat-card span{
  display:block;
  font-size: .85rem;
  color: var(--text-light);
  font-weight: 600;
  margin-bottom: .35rem;
}

.history-stat-card strong{
  font-size: 1.5rem;
  color: var(--primary-color);
  font-weight: 900;
}

.history-toolbar{
  display:grid;
  grid-template-columns: 1.5fr 180px 180px auto auto;
  gap: 12px;
  align-items:center;
  margin-bottom: 1rem;
  padding: 1rem;
}

.history-search{
  display:flex;
  align-items:center;
  gap: .6rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: .2rem .75rem;
  background:#fff;
}

.history-search .form-control{
  border:none;
  box-shadow:none;
  background:transparent;
}

.history-table-card{
  padding: 0;
  overflow: hidden;
}

.history-table-wrap{
  overflow:auto;
}

.history-table{
  width:100%;
  border-collapse: collapse;
}

.history-table thead th{
  background:#F8FAFB;
  color: var(--text-light);
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.history-table td,
.history-table th{
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.history-table tbody tr{
  transition: background .15s ease;
}

.history-table tbody tr:hover{
  background: #FAFBFC;
}

.history-id{
  font-weight: 800;
  color: var(--primary-color);
}

.history-total{
  font-weight: 900;
  color: var(--primary-color);
}

.history-actions{
  display:flex;
  justify-content:flex-end;
  gap: .5rem;
  flex-wrap: wrap;
}

.history-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .7rem;
  border-radius: 999px;
  font-size:.78rem;
  font-weight:800;
}

.history-chip.success{
  background: rgba(39,174,96,.12);
  color: var(--success-color);
}

.history-chip.info{
  background: rgba(0,43,91,.08);
  color: var(--primary-color);
}

.history-modal{
  max-width: 980px;
  width: 92vw;
}

.history-detail-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 1rem;
}

.history-detail-box{
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1rem;
}

.history-detail-box span{
  display:block;
  color: var(--text-light);
  font-size:.82rem;
  margin-bottom:.35rem;
}

.history-detail-box strong{
  color: var(--primary-color);
  font-size:1.1rem;
}

.history-pay-list{
  display:grid;
  gap:10px;
}

.history-pay-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff;
  border:1px solid var(--border-color);
  border-radius:12px;
  padding:.85rem 1rem;
}

.history-empty{
  padding: 2rem;
  text-align:center;
  color: var(--text-light);
}

@media (max-width: 900px){
  .pdv-history-stats{
    grid-template-columns: 1fr;
  }

  .history-toolbar{
    grid-template-columns: 1fr;
  }

  .history-detail-grid{
    grid-template-columns: 1fr;
  }
}