/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 🎨 kanbanPedidos.css – Estilo do Kanban seguindo o theme-consart     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────  KNOBS / VARIÁVEIS  ─────────────────────────────
   Use estes controles para regular o tamanho do quadro e do “quadrante” de cards.
   • --kb-board-h : altura do quadro inteiro (todas as colunas).
   • --kb-list-h  : altura do quadrante de cards (lista interna). Deixe "auto" para
                    a lista ocupar o restante da coluna e ter scroll vertical.
--------------------------------------------------------------------------------- */
:root {
  --kb-board-h: 820px; /* altura 3x maior */
  --kb-list-h: auto;    /* lista segue preenchendo a coluna */
}

/* Classes-atalho (opcionais) para trocar tamanho sem editar o :root */
.kb-h-sm { --kb-board-h: 640px;  --kb-list-h: auto; }  /* quadro menor  */
.kb-h-md { --kb-board-h: 960px;  --kb-list-h: auto; }  /* quadro médio  */
.kb-h-lg { --kb-board-h: 1380px; --kb-list-h: auto; }  /* quadro grande */
.kb-list-900  { --kb-list-h: 900px; }                  /* lista fixa 900px  */
.kb-list-1200 { --kb-list-h: 1200px; }                 /* lista fixa 1200px */

/* ═════════════════════════════════  CARDS / TÍTULOS  ═══════════════════════════ */

.card{
  background:#fff;                                           /* fundo branco */
  border:1px solid var(--c-input-bd, #cfe2ff);               /* borda no tom do tema */
  border-radius:var(--radius,8px);                           /* cantos arredondados */
  padding: var(--c-space-6,24px);                            /* respiro interno */
  box-shadow:0 1px 0 rgba(0,0,0,.03);                        /* leve sombra */
  margin-block: var(--c-space-6,24px);                       /* separação vertical */
}
.page-header h1{ margin:0 0 var(--c-space-6,8px); }         /* título da página */
.card-title{ margin:0 0 var(--c-space-4,16px); }             /* título de bloco */

/* ═════════════════════════════════  TOOLBAR / FILTROS  ═════════════════════════ */

.toolbar{                                                     /* barra de ações */
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.toolbar .lbl{ font-weight:600; }                             /* rótulo forte */
.w-260{ min-width:260px; }                                    /* utilitário largura */
.w-100{ width:100%; }                                         /* utilitário ocupar 100% */

/* Badge de finalizados (contador) */
.badge{
  display:inline-flex; align-items:center;
  gap:6px; padding:6px 10px; border-radius:6px;
  font-weight:700; font-size:.9rem; border:1px solid transparent;
}
.badge-success{ background:#16a34a; color:#fff; border-color:#16a34a; }

/* ═══════════════════════  FORM DE CRIAÇÃO (GRID RESPONSIVO)  ═══════════════════ */

.kanban-form.grid-areas{
  display:grid; gap: var(--c-space-4,16px);                   /* espaçamento */
  grid-template-columns: 1fr;                                 /* mobile: 1 col */
  grid-template-areas:
    "cliente"
    "num"
    "obs"
    "cta";
}
.grp{ display:flex; flex-direction:column; gap:6px; }         /* grupo padrão */
.grp-cliente{ grid-area: cliente; }                           /* posição no grid */
.grp-num    { grid-area: num; }
.grp-obs    { grid-area: obs; }
.grp-cta    { grid-area: cta; align-self:end; }               /* botão à direita */
.rel{ position:relative; }                                    /* p/ autocomplete */

@media (min-width: 960px){
  .kanban-form.grid-areas{                                    /* desktop: 4 cols */
    grid-template-columns: 2fr 1fr 3fr 1fr;
    grid-template-areas: "cliente num obs cta";
    align-items:end;
  }
}

/* Botões no padrão do tema */
.btn{
  background:var(--btn-bg,#fff);
  border:1px solid var(--btn-bd,#000);
  color:var(--btn-fg,#000);
  height:40px; padding:0 12px; border-radius:var(--radius,8px);
  font-weight:700; cursor:pointer;
  transition:background-color .15s, border-color .15s, transform .02s, box-shadow .15s;
}
.btn:hover{ background:var(--btn-bg-hover,#f5f5f5); }
.btn-primary{
  background:#111827; color:#fff; border-color:#111827;       /* primário escuro */
}
.btn-primary:hover{ filter:brightness(1.05); }

/* ═════════════════════════════════  QUADRO KANBAN  ═════════════════════════════ */

.c-scroll--x{                                                 /* wrapper c/ scroll X */
  overflow-x:auto; overflow-y:hidden;                         /* só rola na horizontal */
  padding: var(--c-space-3,12px);
  border:1px solid var(--c-input-bd, #cfe2ff);
  border-radius: var(--radius,8px);
  background: var(--c-input-bg,#f7fbff);
  scrollbar-width: thin;                                      /* Firefox: barra fina */
  scrollbar-color: var(--c-primary,#a6c8ee) #f1f5f9;
}
.c-scroll--x::-webkit-scrollbar{ height:8px; }                /* WebKit: altura barra */
.c-scroll--x::-webkit-scrollbar-track{
  background:#f1f5f9; border-radius:8px;                      /* trilho */
}
.c-scroll--x::-webkit-scrollbar-thumb{
  background-color:var(--c-primary,#a6c8ee);                  /* “polegar” */
  border-radius:8px; border:2px solid #f1f5f9;
}
.c-scroll--x::-webkit-scrollbar-thumb:hover{
  background-color:var(--c-primary-600,#a6c8ee);
}

/* Container de colunas (dentro do .c-scroll--x) */
.kanban-board{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  gap: var(--c-space-5, 20px);
  align-items: stretch;
  height: var(--kb-board-h) !important;   /* <<< usar variável, não 720px */
  padding: 20px;
  scroll-behavior: smooth;
}

/* Colunas “elásticas”: crescem/encolhem e têm base confortável */
.kanban-column{
  flex: 1 1 clamp(100px, 28vw, 640px);
  min-width: min(100px, 100%);             /* <<< volta pra 640px (evita colunas estreitas) */
  height: 100%;
  display: flex; flex-direction: column;
  min-height: 0;
  background:#fff;
  border:1px dashed #bee3f8;
  border-radius:12px;
  padding:15px;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}

.kanban-column h2{
  text-align:center; font-size:18px; color:#0f172a; margin:0 0 10px;
  flex: 0 0 auto;                                             /* cabeçalho ocupa só o necessário */
}

/* Em telas muito largas, dê base maior para cada coluna */
@media (min-width: 1600px){
  .kanban-column{ 
    flex-basis: clamp(520px, 32vw, 760px);                    /* 520–760px (32vw) */
  }
}

/* Quadrante dos cards: ocupa o restante da coluna e tem scroll vertical */
.kanban-list{
  display:flex; flex-direction:column; gap:12px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding-right: 6px;

  /* altura controlada por variável */
  height: var(--kb-list-h) !important;     /* <<< garante que a variável vence */
  max-height: var(--kb-list-h) !important;

  scrollbar-width: thin;
}

.kanban-list::-webkit-scrollbar{ width: 8px; }                /* WebKit: largura da barra */
.kanban-list::-webkit-scrollbar-track{ 
  background:#f1f5f9; border-radius:8px; 
}
.kanban-list::-webkit-scrollbar-thumb{
  background-color: var(--c-primary,#a6c8ee);
  border-radius: 8px; 
  border: 2px solid #f1f5f9;
}

/* ═══════════════════════════════  CARTÕES (CARDS)  ════════════════════════════ */

.kanban-card{
  background:#e8f4fc;                                         /* azul clarinho */
  border:1px solid #c6e0f5;
  border-radius:8px; padding:12px; cursor:grab;
  transition: background .2s;
  max-width: 100%;                                            /* nunca extrapola a coluna */
}
.kanban-card:hover{ background:#dff0ff; }
.kanban-card .card-conteudo{
  display:flex; flex-wrap:nowrap; gap:6px; font-size:11px; color:#333;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width: 0;                                               /* permite encolher dentro do flex */
}
.kanban-card button{
  margin-top:8px; padding:4px 7px; font-size:9px;
  background:#111827; color:#fff; border:none; border-radius:6px; cursor:pointer;
}
.kanban-card button:hover{ filter:brightness(1.05); }

/* Urgência (bordas e selo) */
.kanban-card.urgente{
  border:2px solid #e11d48;                                   /* destaque vermelho */
  box-shadow:0 0 0 2px rgba(225,29,72,.15) inset;
  background:#ffeef1;
}
.badge-urgente{
  display:inline-flex; align-items:center; gap:6px; padding:2px 8px;
  border-radius:999px; font-size:12px; background:#fee2e2; color:#b91c1c;
  border:1px solid #fecaca;
}
.btn-urgente{
  padding:4px 8px; border-radius:6px; cursor:pointer; border:1px solid #e5e7eb;
  background:#fff; color:#b91c1c;
}
.btn-urgente:hover{ background:#fff5f5; border-color:#fecaca; }
.btn-urgente.ativo{ background:#fee2e2; border-color:#fecaca; color:#b91c1c; }

/* ═══════════════════════════════  MODAIS / LISTAS  ════════════════════════════ */

.modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); z-index:9999;
}
.modal-content, .modal-conteudo{
  background:#fff; border:1px solid var(--c-input-bd,#cfe2ff);
  border-radius:10px; padding:20px; width: min(1000px, 92vw);
  max-height: 86vh; overflow:auto;                            /* scroll se ultrapassar a viewport */
}
.modal-content .close, .modal-conteudo .close, .modal-conteudo .fechar{
  position:absolute; top:10px; right:14px; font-size:22px; font-weight:700; cursor:pointer;
}
.texto-obs{ white-space:pre-line; padding:15px 0 10px; font-size:15px; color:#333; }
.mt{ margin-top:20px; }

/* Autocomplete (clientes / produtos) */
.sugestoes-autocomplete{
  position:absolute; top:100%; left:0; right:0;
  background:#fff; border:1px solid #ccc; z-index:1000;
  max-height:200px; overflow-y:auto; padding:0; margin:2px 0 0; list-style:none;
  border-radius:6px;
}
.sugestoes-autocomplete li{ padding:8px; cursor:pointer; }
.sugestoes-autocomplete li:hover{ background:#eef6ff; }

/* Lista de pendências (no modal) */
.item-pendencia{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:6px 10px; background:#f9fbff; border:1px solid #cce6ff;
  border-radius:6px; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.item-pendencia strong{ font-weight:600; margin-right:5px; color:#333; }
.item-pendencia .qtd-editavel{
  display:inline-block; padding:2px 6px; font-weight:700; border:1px dashed #ccc; border-radius:4px;
  min-width:30px; text-align:center; background:#eef6ff; margin:0 10px;
}
.item-pendencia button{
  padding:4px 8px; font-size:12px; border:1px solid #e5e7eb; border-radius:4px; background:#fff; cursor:pointer;
}
.btn-excluir{ background:#ff4d4d; color:#fff; border-color:#ff4d4d; }
.btn-excluir:hover{ filter:brightness(.95); }
.btn-status{ background:#4caf50; color:#fff; border-color:#4caf50; }
.btn-status:hover{ filter:brightness(.95); }

/* ═══════════════════════════════  RESPONSIVIDADE  ═════════════════════════════ */

@media (max-width: 768px){
  .kanban-card .card-conteudo{ flex-direction:column; white-space:normal; } /* quebra info do card */
}

/* ── TIPOGRAFIA (knobs) ───────────────────────────────────────────── */
:root{
  /* tamanhos responsivos (ajuste à vontade) */
  --kb-h1-size: clamp(10px, 2.6vw, 34px);
  --kb-h2-size: clamp(10px, 1.9vw, 22px);
  --kb-lbl-size: clamp(10px, 1.4vw, 16px);

  /* pesos (negrito) – ajuste se quiser mais “forte” ou “leve” */
  --kb-h1-w: 800;
  --kb-h2-w: 700;
  --kb-lbl-w: 600;
}

/* título da página */
.page-header h1{
  font-size: 10px(--kb-h1-size);
  font-weight: 0.5vw(--kb-h1-w);
  line-height: 1.15px;
}

/* títulos das cards: “➕ Criar Card” e “📋 Quadro Kanban” */
.card .card-title{
  font-size: 10px(--kb-h2-size);
  font-weight: 0.5vw(--kb-h2-w);
  line-height: 1.2px;
}

/* rótulo do filtro “🧭 Coluna do Kanban:” */
.toolbar .lbl{
  font-size: 10px(--kb-lbl-size);
  font-weight: 0.5vw(--kb-lbl-w);
}