/* ═══════════════════════════════════════════════════════════════
   INN FIGHT — style.css PATCH Sprint 4
   Adicionar ao final do style.css existente
   ═══════════════════════════════════════════════════════════════ */

/* ── DASHBOARD KPI CARDS ─────────────────────────────────────── */
.dash-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:.75rem;
  margin-bottom:1.5rem;
}
.dash-kpi{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:1rem .875rem .875rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.2rem;
  transition:border-color .2s;
}
.dash-kpi:hover{ border-color:var(--r); }
.dk-icon{ font-size:1.4rem; line-height:1; margin-bottom:.25rem; }
.dk-val{
  font-family:'Bebas Neue',sans-serif;
  font-size:2rem;
  color:var(--r);
  line-height:1;
}
.dk-lbl{ font-size:.65rem; color:var(--g); text-transform:uppercase; letter-spacing:.06em; }
.dk-sub{ font-size:.6rem; color:var(--g2); margin-top:.1rem; }

/* ── DASHBOARD RANKING GRIDS ─────────────────────────────────── */
.dash-grids{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:.75rem;
  margin-bottom:1rem;
}
.dash-rank-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.875rem 1rem;
}
.dash-rank-title{
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--g);
  margin-bottom:.6rem;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--border);
}
.dash-rank-list{ display:flex; flex-direction:column; gap:.3rem; }
.dr-row{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.78rem;
  padding:.25rem 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.dr-row:last-child{ border-bottom:none; }
.dr-pos{ color:var(--r); font-family:'Bebas Neue',sans-serif; font-size:.9rem; min-width:1.5rem; }
.dr-name{ flex:1; color:var(--t); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dr-val{ color:var(--g); font-size:.72rem; white-space:nowrap; }
.dash-empty{ color:var(--g2); font-size:.75rem; padding:.5rem 0; }

/* ── DASHBOARD CLIQUES ───────────────────────────────────────── */
.dash-clicks{ display:flex; flex-direction:column; gap:.4rem; }
.dc-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.8rem;
  padding:.35rem .5rem;
  background:rgba(255,255,255,.03);
  border-radius:4px;
}
.dc-lbl{ color:var(--t); }
.dc-val{ color:var(--r); font-family:'Bebas Neue',sans-serif; font-size:.95rem; }

/* ── RESPONSIVO ──────────────────────────────────────────────── */
@media(max-width:480px){
  .dash-kpis{ grid-template-columns:repeat(2,1fr); }
  .dash-grids{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   INN FIGHT — MODAL UX PREMIUM v8
   Técnica: display:contents no form-side + CSS grid no lb-box
   DOM 100% intacto — WPP funcional garantido
   ═══════════════════════════════════════════════════════════════ */

/* ── Todas as telas ─────────────────────────────────────────── */
.lb-qtd-ctrl{display:flex;align-items:center;background:#1c1c1c;border:1px solid rgba(255,255,255,.1);border-radius:6px;overflow:hidden}
.lb-qtd-btn{width:32px;height:32px;background:transparent;border:none;color:rgba(255,255,255,.65);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:manipulation;flex-shrink:0;transition:background .12s}
.lb-qtd-btn:active{background:rgba(224,28,44,.18);color:var(--r)}
.lb-qtd-inp{width:40px;text-align:center;background:transparent;border:none;border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08);color:#fff;font-family:'Bebas Neue',sans-serif;font-size:1rem;padding:0;outline:none;height:32px;-moz-appearance:textfield}
.lb-qtd-inp::-webkit-inner-spin-button,.lb-qtd-inp::-webkit-outer-spin-button{-webkit-appearance:none}
.lb-qtd-lbl{font-family:'Barlow Condensed',sans-serif;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.7);flex:1}
.lb-qtd-empty{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;color:rgba(255,255,255,.28);padding:.2rem 0}
@keyframes lbShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
.lb-field.field-error{border-color:var(--r)!important;animation:lbShake .28s}
.lb-summary{display:flex;flex-wrap:wrap;gap:.25rem;padding:.05rem 0 .2rem}
.lb-summary-empty{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;color:rgba(255,255,255,.22);font-style:italic}
.lb-summary-tag{display:inline-flex;align-items:center;gap:.2rem;background:rgba(224,28,44,.14);border:1px solid rgba(224,28,44,.3);border-radius:4px;padding:.14rem .38rem;font-family:'Barlow Condensed',sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.lb-summary-tag-dot{width:4px;height:4px;border-radius:50%;background:var(--r);flex-shrink:0}

/* ── MOBILE ≤ 640px — classe lb-mobile adicionada pelo patch.js ── */
@media(max-width:640px){

  #lb{padding:0;align-items:stretch;background:rgba(0,0,0,.96);backdrop-filter:blur(6px)}

  /* LB-BOX: grid com 3 colunas e 2 linhas
     col1=40% col2=60% / row1=45vh row2=1fr */
  .lb-box.lb-mobile{
    width:100%!important;max-width:100%!important;
    height:100svh!important;max-height:100svh!important;
    border-radius:0!important;border:none!important;
    display:grid!important;
    grid-template-columns:40% 60%!important;
    grid-template-rows:45vh 1fr!important;
    background:#0d0d0d!important;
    overflow:hidden!important;
    position:relative!important;
  }
  .lb-box.lb-mobile::before{display:none!important}
  .lb-box.lb-mobile::after{display:none!important}

  /* Fechar */
  .lb-box.lb-mobile .lb-close{
    position:absolute!important;top:.65rem!important;right:.65rem!important;
    width:28px!important;height:28px!important;border-radius:50%!important;
    background:rgba(0,0,0,.6)!important;border:1px solid rgba(255,255,255,.15)!important;
    color:rgba(255,255,255,.65)!important;z-index:20!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    font-size:.8rem!important;cursor:pointer!important;
  }
  .lb-box.lb-mobile .lb-close:hover{background:var(--r)!important;border-color:var(--r)!important;color:#fff!important}

  /* lb-form-side: transparente no grid — filhos participam diretamente */
  .lb-box.lb-mobile .lb-form-side{
    display:contents!important;
  }

  /* ── IMAGEM: col1 row1 ── */
  .lb-box.lb-mobile #lb-media{
    grid-column:1!important;grid-row:1!important;
    position:relative!important;overflow:hidden!important;
    width:100%!important;height:100%!important;
    min-height:unset!important;aspect-ratio:unset!important;
    display:block!important;
  }
  .lb-box.lb-mobile #lb-media img{
    width:100%!important;height:100%!important;
    object-fit:cover!important;object-position:top center!important;
    display:block!important;
  }
  .lb-box.lb-mobile #lb-media::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(to right,transparent 50%,#0d0d0d 98%);
    pointer-events:none;
  }

  /* ── HEADER (título modal): col2 row1 — dentro de flex col ── */
  .lb-box.lb-mobile .lb-form-header{
    grid-column:2!important;grid-row:1!important;
    display:flex!important;flex-direction:column!important;
    padding:.55rem .8rem 0 .55rem!important;
    background:#0d0d0d!important;
    position:static!important;border:none!important;
    /* Altura apenas do header — os outros elementos do row1 são siblings */
    align-self:start!important;
    height:auto!important;
  }
  .lb-box.lb-mobile .lb-form-header-title{
    font-family:'Barlow Condensed',sans-serif!important;font-size:.65rem!important;
    letter-spacing:.12em!important;color:rgba(255,255,255,.28)!important;
    line-height:1!important;text-transform:uppercase!important;
  }
  .lb-box.lb-mobile .lb-form-header-sub{display:none!important}

  /* ── NOME + CATEGORIA + FORM: col2 row1 — empilhados ──
     Como display:contents no form-side, cada filho é item do grid.
     Precisamos que header, name, desc e form fiquem todos em col2/row1.
     Usamos position:relative e z-index para empilhá-los em col2 row1. */

  /* Truque: colocar name, desc e form no mesmo grid-area que o header
     fazendo-os sobrepostos via position — mas isso quebra o layout.
     
     MELHOR ABORDAGEM: agrupar col2 row1 como um flex container usando
     um pseudo-container via CSS subgrid não suportado.
     
     SOLUÇÃO FINAL: usar o lb-form-header como container col2/row1 com height:100%
     e posicionar os outros elementos dentro dele via siblings absolutos — não funciona.
     
     ABORDAGEM CORRETA: desistir do display:contents e usar um wrapper real no patch.js.
     O patch.js vai criar um wrapper <div class="lb-info-col"> que agrupa
     header + name + desc + (summary + label + tipos do form).
     Esse wrapper vai para col2/row1.
     O form vai para col1-span2/row2 (largura total, row2).
     Os elementos do form que já foram para o wrapper são escondidos no form.
  */

  /* IMPLEMENTAÇÃO REAL: o patch.js cria lb-info-col como wrapper */
  .lb-box.lb-mobile .lb-info-col{
    grid-column:2!important;grid-row:1!important;
    display:flex!important;flex-direction:column!important;
    overflow:hidden!important;
    padding:.5rem .8rem .3rem .5rem!important;
    background:#0d0d0d!important;
    border-left:1px solid rgba(255,255,255,.04)!important;
    box-sizing:border-box!important;
  }
  /* Esconder header/name/desc originais (foram copiados para info-col) */
  .lb-box.lb-mobile .lb-form-header{display:none!important}
  .lb-box.lb-mobile .lb-stamp-name{display:none!important}
  .lb-box.lb-mobile .lb-stamp-desc{display:none!important}

  /* Dentro do info-col — clones dos elementos */
  .lb-box.lb-mobile .lb-info-col .lb-form-header-title{
    font-family:'Barlow Condensed',sans-serif;font-size:.65rem;
    letter-spacing:.12em;color:rgba(255,255,255,.28);line-height:1;text-transform:uppercase;
    flex-shrink:0;margin-bottom:.15rem;
  }
  .lb-box.lb-mobile .lb-info-col .lb-info-name{
    font-family:'Bebas Neue',sans-serif;font-size:1.7rem;
    color:#fff;letter-spacing:.03em;line-height:1;flex-shrink:0;
    text-shadow:0 1px 8px rgba(0,0,0,.5);
  }
  .lb-box.lb-mobile .lb-info-col .lb-info-cat{
    font-family:'Barlow Condensed',sans-serif;font-size:.58rem;
    color:rgba(255,255,255,.3);letter-spacing:.12em;text-transform:uppercase;
    margin:.05rem 0 .2rem;flex-shrink:0;
  }
  .lb-box.lb-mobile .lb-info-col .lb-summary{flex-shrink:0;margin-bottom:.1rem}
  .lb-box.lb-mobile .lb-info-col .lb-sec-label{
    font-family:'Barlow Condensed',sans-serif;font-size:.55rem;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;color:var(--r);
    margin:.1rem 0 .2rem;flex-shrink:0;
  }
  .lb-box.lb-mobile .lb-info-col .lb-tipos{
    display:grid;grid-template-columns:1fr 1fr;gap:.22rem;
    flex:1;align-content:start;
  }
  .lb-box.lb-mobile .lb-info-col .lb-tipo{
    display:flex;align-items:center;gap:.28rem;
    padding:.34rem .42rem;background:#1a1a1a;
    border:1.5px solid rgba(255,255,255,.08);border-radius:7px;
    cursor:pointer;transition:border-color .15s,background .15s;
    user-select:none;-webkit-user-select:none;touch-action:manipulation;
  }
  .lb-box.lb-mobile .lb-info-col .lb-tipo.sel{background:rgba(224,28,44,.13);border-color:var(--r)}
  .lb-box.lb-mobile .lb-info-col .lb-tipo-box{
    width:11px;height:11px;border:1.5px solid rgba(255,255,255,.2);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:.43rem;color:transparent;flex-shrink:0;transition:all .15s;position:static;
  }
  .lb-box.lb-mobile .lb-info-col .lb-tipo.sel .lb-tipo-box{background:var(--r);border-color:var(--r);color:#fff}
  .lb-box.lb-mobile .lb-info-col .lb-tipo-lbl{
    font-family:'Barlow Condensed',sans-serif;font-size:.67rem;font-weight:700;
    letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.48);
    transition:color .15s;pointer-events:none;line-height:1;
  }
  .lb-box.lb-mobile .lb-info-col .lb-tipo.sel .lb-tipo-lbl{color:#fff}

  /* ── FORM BAIXO: col1-2 row2 — largura total ── */
  .lb-box.lb-mobile .lb-form-side .lb-form{
    grid-column:1/-1!important;grid-row:2!important;
    display:flex!important;flex-direction:column!important;
    padding:.5rem .9rem .15rem!important;
    background:#0d0d0d!important;
    overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;
    border-top:1px solid rgba(255,255,255,.06)!important;
    box-sizing:border-box!important;
  }

  /* No form baixo: esconder o que está no info-col (resumo, label produtos, tipos) */
  .lb-box.lb-mobile .lb-form .lb-summary{display:none!important}
  /* Primeiro lb-sec-label = "produtos desejados" → esconder */
  .lb-box.lb-mobile .lb-form .lb-sec-label:nth-child(1){display:none!important}
  /* lb-tipos → esconder */
  .lb-box.lb-mobile .lb-form .lb-tipos{display:none!important}

  /* Labels visíveis no form baixo */
  .lb-box.lb-mobile .lb-form .lb-sec-label{
    font-family:'Barlow Condensed',sans-serif;font-size:.56rem;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;color:var(--r);
    margin:.05rem 0 .28rem;display:block!important;
  }
  .lb-box.lb-mobile .lb-form .lb-qtd-rows{margin-bottom:.3rem;display:block!important}
  .lb-box.lb-mobile .lb-form .lb-qtd-row{
    display:flex!important;align-items:center;justify-content:space-between;
    padding:.28rem 0;border-bottom:1px solid rgba(255,255,255,.04);
  }
  .lb-box.lb-mobile .lb-form .lb-qtd-row:last-child{border-bottom:none}
  .lb-box.lb-mobile .lb-form .lb-field{
    width:100%;background:#181818;border:1.5px solid rgba(255,255,255,.08);
    border-radius:9px;color:#fff;font-family:'Barlow',sans-serif;font-size:.88rem;
    padding:.52rem .75rem;outline:none;transition:border-color .18s;
    margin-bottom:.28rem;-webkit-appearance:none;display:block!important;
  }
  .lb-box.lb-mobile .lb-form .lb-field:focus{border-color:var(--r)}
  .lb-box.lb-mobile .lb-form .lb-field::placeholder{color:rgba(255,255,255,.2)}
  .lb-box.lb-mobile .lb-form .lb-send{
    display:flex!important;position:sticky;bottom:0;z-index:10;
    width:100%;background:#25D366;color:#fff;border:none;
    font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.14em;
    padding:.78rem 1rem;cursor:pointer;
    align-items:center;justify-content:center;gap:.5rem;flex-shrink:0;
    box-shadow:0 -4px 16px rgba(37,211,102,.22);transition:background .18s;margin-top:auto;
  }
  .lb-box.lb-mobile .lb-form .lb-send:hover{background:#1da851}
  .lb-box.lb-mobile .lb-form .lb-send svg{flex-shrink:0}
  .lb-box.lb-mobile .lb-form .lb-tip{
    font-size:.58rem;color:rgba(255,255,255,.18);text-align:center;
    padding:.18rem .3rem .08rem;font-family:'Barlow',sans-serif;
    line-height:1.4;display:block!important;
  }

} /* fim @media mobile */

/* ── DESKTOP ≥ 641px — layout original ─────────────────────── */
@media(min-width:641px){
  .lb-box.lb-mobile{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:auto!important;
    max-width:860px!important;max-height:96svh!important;height:auto!important;
    background:var(--k3)!important;border:1px solid var(--bd)!important;
    border-radius:0!important;box-shadow:none!important;
  }
  .lb-box.lb-mobile .lb-form-side{display:flex!important;flex-direction:column;border-left:1px solid var(--bd);overflow-y:auto}
  .lb-box.lb-mobile .lb-form-header,.lb-box.lb-mobile .lb-stamp-name,.lb-box.lb-mobile .lb-stamp-desc{display:block!important}
  .lb-box.lb-mobile .lb-info-col{display:none!important}
  .lb-box.lb-mobile #lb-media{grid-column:auto!important;grid-row:auto!important;display:flex!important;min-height:200px;overflow:hidden;align-items:center;justify-content:center}
  .lb-box.lb-mobile #lb-media img{object-position:center!important}
  .lb-box.lb-mobile #lb-media::after{display:none!important}
  .lb-box.lb-mobile .lb-form-header{padding:.85rem 1rem .7rem;border-bottom:1px solid var(--bd);position:static!important;background:transparent!important}
  .lb-box.lb-mobile .lb-form-header-title{font-size:1.3rem!important;color:var(--w)!important;font-family:'Bebas Neue',sans-serif!important;letter-spacing:.05em}
  .lb-box.lb-mobile .lb-form-header-sub{display:block!important}
  .lb-box.lb-mobile .lb-stamp-name{font-size:1.1rem!important;padding:.85rem 1rem .8rem!important;border-top:1px solid var(--bd);font-family:'Bebas Neue',sans-serif!important;color:var(--t)!important}
  .lb-box.lb-mobile .lb-stamp-desc{font-size:.68rem!important;color:var(--g)!important;padding:.35rem 1rem .5rem!important}
  .lb-box.lb-mobile .lb-form-side .lb-form{
    grid-column:auto!important;grid-row:auto!important;
    display:block!important;padding:0!important;border:none!important;
    overflow:visible!important;background:transparent!important;
  }
  .lb-box.lb-mobile .lb-form .lb-summary{display:none!important}
  .lb-box.lb-mobile .lb-form .lb-sec-label{display:block!important;font-size:.62rem!important;color:var(--r)!important;margin-top:.7rem!important}
  .lb-box.lb-mobile .lb-form .lb-sec-label:nth-child(1){display:block!important}
  .lb-box.lb-mobile .lb-form .lb-tipos{display:grid!important;gap:.35rem!important}
  .lb-box.lb-mobile .lb-tipo{padding:.45rem .65rem!important;border-radius:0!important;border:1px solid var(--bd)!important;background:transparent!important}
  .lb-box.lb-mobile .lb-tipo.sel{background:rgba(232,21,27,.12)!important;border-color:var(--r)!important}
  .lb-box.lb-mobile .lb-tipo-box{border-radius:0!important;width:14px!important;height:14px!important;border:1.5px solid var(--g2)!important}
  .lb-box.lb-mobile .lb-tipo-lbl{font-size:.75rem!important}
  .lb-box.lb-mobile .lb-form .lb-field{display:block!important;border-radius:0!important;margin-bottom:.35rem!important;background:var(--k4)!important;border:1px solid var(--bd)!important;font-size:.82rem!important;padding:.52rem .8rem!important}
  .lb-box.lb-mobile .lb-form .lb-qtd-rows{display:block!important}
  .lb-box.lb-mobile .lb-form .lb-qtd-row{display:flex!important}
  .lb-box.lb-mobile .lb-send{position:static!important;box-shadow:none!important;font-family:var(--fc)!important;font-size:.85rem!important;padding:.78rem!important;border-radius:0!important}
  .lb-box.lb-mobile .lb-close{border-radius:0!important;background:var(--r)!important;color:#fff!important;width:30px!important;height:30px!important;border:none!important}
  .lb-box.lb-mobile .lb-close:hover{background:var(--rd)!important}
  #lb{padding:.75rem;align-items:center}
  .lb-box.lb-mobile .lb-form .lb-tip{display:block!important}
}