:root{
  --ink:#0f172a;          /* texto */
  --muted:#6b7280;        /* texto secundario */
  --card:#ffffff;         /* fundo card */
  --bg:#f5f7fb;           /* fundo app */
  --border:#e5e7eb;       /* borda leve */

  /* Etapas (NOVO MAPA) */
  --stage-10:#ef4444;     /* 10 = Em aberto */
  --stage-20:#f59e0b;     /* 20 = Separar */
  --stage-80:#fbbf24;     /* 80 = Separando */
  --stage-40:#38bdf8;     /* 40 = Em checkout */
  --stage-50:#22c55e;     /* 50 = Faturar */
  --stage-60:#818cf8;     /* 60 = Faturado */

  /* Toolbar */
  --brand:#2563eb;        /* azul do foco/checkbox */
  --radius-lg:12px;       /* cantos arredondados */
  --muted-2:#9ca3af;
}

html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-size:18px;
  line-height:1.6;
}

/* =========================
   Toolbar / Filtros
   ========================= */
.toolbar .input-group-sm > .form-control,
.toolbar .input-group-sm > .form-select,
.toolbar .input-group-sm > .input-group-text{
  height:42px;
  padding:10px 14px;
  font-size:16px;
  border-radius:var(--radius-lg);
}

.toolbar .input-group-sm > .input-group-text{
  background:#f8fafc;
  color:var(--muted);
  border-color:var(--border);
  font-weight:600;
}

.toolbar .btn{
  height:42px;
  padding:0 14px;
  border-radius:var(--radius-lg);
  font-weight:700;
  letter-spacing:.2px;
}
.toolbar .btn-primary{
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  border:0;
  box-shadow:0 6px 16px rgba(37,99,235,.20);
}
.toolbar .btn-success{
  background:linear-gradient(180deg,#22c55e,#16a34a);
  border:0;
  box-shadow:0 6px 16px rgba(34,197,94,.22);
}
.toolbar .btn-outline-secondary{
  border-color:var(--border);
  color:var(--ink);
  background:#fff;
}
.toolbar .btn:hover{ transform:translateY(-1px); }
.toolbar .btn:active{ transform:translateY(0); }

.toolbar .form-control,
.toolbar .form-select{
  border-color:var(--border);
  background:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.04);
}
.toolbar .form-control:focus,
.toolbar .form-select:focus,
.toolbar .btn:focus,
.filter-dd .dropdown-toggle:focus{
  box-shadow:0 0 0 3px rgba(37,99,235,.15), 0 6px 14px rgba(0,0,0,.05);
  border-color:#93c5fd;
}
.toolbar ::placeholder{ color:#9ca3af; }

/* Dropdowns de checkbox (Categoria/Vendedor/Transportadora) */
.filter-dd .dropdown-toggle{
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:#fff;
  color:var(--ink);
  font-weight:700;
  height:42px;
  box-shadow:0 6px 14px rgba(0,0,0,.04);
}
.filter-dd .dropdown-toggle .badge{
  background:#f1f5f9;
  color:var(--muted);
  border:1px solid var(--border);
  border-radius:999px;
  font-weight:600;
}

.filter-dd .dropdown-menu{
  width:320px;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(2,6,23,.12);
  padding:10px;
}
.filter-dd .dd-list{ max-height:260px; overflow:auto; }
.filter-dd .dd-item{ cursor:pointer; user-select:none; border-radius:10px; }
.filter-dd .dd-item:hover{ background:#f8fafc; }
.filter-dd .dd-item input{
  transform:scale(1.15);
  margin-right:10px;
  accent-color:var(--brand);
}
.filter-dd [data-role="summary"]{ color:var(--muted); }

/* pequenos ajustes de espaçamento entre controles */
.toolbar .d-flex.gap-2>*{ margin-right:6px; }
.toolbar .d-flex.gap-2>*:last-child{ margin-right:0; }

/* responsivo – filtros ocupam a linha toda no mobile */
@media (max-width:768px){
  .toolbar .input-group-sm,
  .filter-dd{ width:100% !important; }
  .toolbar .d-flex.gap-2.flex-wrap>*{ flex:1 1 auto; }
}

/* =========================
   Kanban Board (RESPONSIVO)
   ========================= */
.kanban-board{
  display:grid;
  gap:22px;
  align-items:start;
  /* Desktop grande – 6 colunas */
  grid-template-columns: repeat(6, minmax(260px, 1fr));
}

/* Notebooks / desktops médios */
@media (max-width:1600px){
  .kanban-board{ grid-template-columns: repeat(6, minmax(240px, 1fr)); }
}
@media (max-width:1400px){
  /* Cai pra 4 colunas confortáveis */
  .kanban-board{ grid-template-columns: repeat(4, minmax(260px, 1fr)); }
}

/* Tablet landscape (≈ iPad deitado) */
@media (max-width:1200px){
  .kanban-board{ grid-template-columns: repeat(3, minmax(260px, 1fr)); }
}

/* Tablet portrait */
@media (max-width:992px){
  .kanban-board{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}

/* Celular */
@media (max-width:576px){
  .kanban-board{ grid-template-columns: 1fr; gap:18px; }
}



/* ===== OPCIONAL: manter 6 colunas com rolagem horizontal =====
   Envolva o board com um wrapper que tenha .kanban-scroll para forçar
   6 colunas e permitir scroll lateral em telas menores.
*/
.kanban-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.kanban-scroll .kanban-board{
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  grid-template-columns: repeat(6, minmax(260px, 1fr));
}
@media (max-width:992px){
  .kanban-scroll .kanban-board{
    grid-template-columns: repeat(6, minmax(260px, 1fr));
  }
}

/* =========================
   Column
   ========================= */
.kanban-col{
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 12px 36px rgba(0,0,0,.06);
}
.kanban-col .col-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:18px 20px;
  border-bottom:1px solid var(--border);
}
.kanban-col .title{
  font-weight:800; font-size:20px; display:flex; align-items:center; gap:12px
}
.kanban-col .title .dot{width:16px; height:16px; border-radius:50%}
.kanban-col .cnt{
  background:#f3f4f6; border:1px solid var(--border);
  padding:4px 12px; border-radius:999px;
  font-weight:700; font-size:16px;
}
.kanban-col .col-actions{
  display:flex; align-items:center; gap:14px; font-size:16px; color:var(--muted)
}
.kanban-col .col-body{max-height:75vh; overflow:auto; padding:18px}

/* =========================
   Cards
   ========================= */
.order-card{
  position:relative;
  cursor:grab;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
  margin-bottom:16px;
  font-size:16px;
  background:var(--card);
}
.order-card .strip{height:10px; border-top-left-radius:18px; border-top-right-radius:18px}
.order-card .card-body{padding:18px 20px}
.order-card .order-id{font-weight:900; letter-spacing:.4px; font-size:20px; margin-bottom:12px}
.order-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.12); transform:translateY(-2px)}
.order-card .tiny{font-size:15px; color:var(--muted)}
.order-card .badge-round{border-radius:999px}

/* seleção */
.order-card .select{
  position:absolute;
  top:14px;
  left:14px;
  transform:scale(1.5);
  z-index:2;
}
.order-card .order-id{ margin-left:36px; }
.order-card.selected{ outline:3px dashed #9ca3af; outline-offset:3px }

/* ícone de bloqueado no card */
.order-card .flag-blocked{
  position:absolute;
  bottom:0px; left:12px;
  font-size:18px;
  color:#ef4444;
  opacity:.95;
}

/* Drag ghost */
.sortable-ghost{opacity:.5}

/* Utilities */
.sticky-actions{
  position:sticky;
  bottom:0;
  background:#fff;
  padding:16px;
  border-top:1px solid var(--border)
}
.st-warn{ background:#f59e0b; } /* amarelo */
/* =========================
   Dots / Strips por estagio
   ========================= */
.dot.stage-10{background:var(--stage-10)}
.dot.stage-20{background:var(--stage-20)}
.dot.stage-80{background:var(--stage-80)}
.dot.stage-40{background:var(--stage-40)}
.dot.stage-50{background:var(--stage-50)}
.dot.stage-60{background:var(--stage-60)}

.strip.stage-10{background:var(--stage-10)}
.strip.stage-20{background:var(--stage-20)}
.strip.stage-80{background:var(--stage-80)}
.strip.stage-40{background:var(--stage-40)}
.strip.stage-50{background:var(--stage-50)}
.strip.stage-60{background:var(--stage-60)}

/* Ajustes finais dropdown (sem busca) */
.filter-dd .dropdown-menu{ width:280px; max-height:340px; overflow:auto; }
.filter-dd .dd-list{ max-height:260px; overflow:auto; }
.filter-dd [data-role="summary"]{ color:var(--muted); }
.filter-dd .dd-item{ cursor:pointer; user-select:none; }
.filter-dd .dd-item input{ margin-right:8px; }

/* =========================
   Mobile refinements
   ========================= */
@media (max-width:576px){
  .kanban-col{ border-radius:16px; }
  .kanban-col .col-head{ padding:14px 16px; }
  .kanban-col .col-body{ padding:14px; max-height:none; }
  .order-card{ border-radius:16px; }
  .order-card .card-body{ padding:14px 16px; }
  .order-card .order-id{ font-size:18px; margin-bottom:8px; }
}

/* Checkout Scanner */
#checkoutModal .table tbody tr.ok   { background:#ecfdf5; }   /* verde claro */
#checkoutModal .table tbody tr.pend { background:#fff7ed; }   /* laranja claro */
#checkoutModal .table tbody tr.err  { background:#fee2e2; }   /* vermelho claro */
#checkoutModal #chkBarcode{ font-weight:700; letter-spacing:.5px; }

.pedido-modal { position: relative; }

/* Faixa diagonal */
.ribbon-bloqueado{
  position: absolute;
  top: 14px;
  right: -44px;
  transform: rotate(45deg);
  background: #dc3545;           /* danger */
  color: #fff;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 72px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  z-index: 20;
  pointer-events: none;           /* não intercepta cliques */
}

/* melhora impressão */
@media print {
  .ribbon-bloqueado{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}