/* =========================================================
   VARIÁVEIS
   ========================================================= */
:root{
  --bg: rgb(10 50 133 / 72%);
  --card:#111827;
  --muted:#9ca3af;
  --text:#e5e7eb;
  --brand:#22c55e;
  --brand2:#16a34a;
  --danger:#ef4444;
  --stroke: rgba(255,255,255,.08);
  --shadow: 0 18px 60px rgba(0,0,0,.45);

  /* impressão térmica */
  --receipt-width: 80mm; /* troque para 58mm se precisar */
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(34,197,94,.20), transparent 60%),
    radial-gradient(900px 500px at 110% 20%, rgba(56,189,248,.14), transparent 55%),
    var(--bg);
  color:var(--text);
}

a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:16px}

/* =========================================================
   TOPBAR PADRÃO
   ========================================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(12px);
  background: rgba(11,15,23,.70);
  border-bottom: 1px solid var(--stroke);
}

.brandRow{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
}

.logo{
  width:42px;
  height:42px;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(34,197,94,.35), rgba(56,189,248,.22));
  border:1px solid var(--stroke);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.logo img{width:100%; height:100%; object-fit:cover}

.titleWrap{flex:1}
.title{font-weight:800}
.subtitle{color:var(--muted); font-size:13px}

/* =========================================================
   ADMIN TOPBAR (título central + menu abaixo)
   ========================================================= */
.topbarAdmin{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
}

.topbarAdmin .adminHeader{
  text-align:center;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--stroke);
}

.topbarAdmin .adminTitle{
  font-size:24px;
  font-weight:900;
  line-height:1.1;
}

.topbarAdmin .adminSubtitle{
  margin-top:4px;
  font-size:12.5px;
  color:var(--muted);
}

.topbarAdmin .adminNav{
  display:flex;
  justify-content:center;
  gap:10px;
  padding:10px 12px 12px;
  overflow-x:auto;
}
.topbarAdmin .adminNav::-webkit-scrollbar{height:0}
.topbarAdmin .adminNav .btn{
  white-space:nowrap;
  padding:10px 12px !important;
}

.textfont {
font-size: 12px;
}

@media(max-width:420px){
  .topbarAdmin .adminTitle{font-size:20px}
  .topbarAdmin .adminSubtitle{font-size:12px}
}

/* =========================================================
   BOTÕES / FORMULÁRIOS
   ========================================================= */
.btn{
  border:0;
  border-radius:16px;
  padding:14px 16px;
  font-weight:900;
  cursor:pointer;
  transition:.15s ease;
}
.btnPrimary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#08110b;
}
.btnGhost{
  background: rgb(16 36 93 / 38%);
  border:1px solid var(--stroke);
  color:var(--text);
}
.btn:hover{transform: translateY(-1px)}

.form{
  max-width:520px;
  margin:18px auto;
  padding:16px;
}
.field{margin-bottom:12px}
.label {
    font-size: 14px;
    color: #f6faff;
    margin-bottom: 6px;
}
.input,.select,.textarea{
  width:100%;
  padding:14px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(17,24,39,.65);
  color:var(--text);
}
.textarea{min-height:100px}


/* =========================================================
   MODAL
   ========================================================= */
.modalOverlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  z-index:9999;
}
.modalBox{
  width:min(520px,100%);
  background: rgba(17,24,39,.95);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow: var(--shadow);
}
.modalTop,.modalBottom{
  padding:12px;
  border-bottom:1px solid var(--stroke);
}
.modalBottom{border-bottom:0; border-top:1px solid var(--stroke)}
.modalBody{padding:12px; max-height:70vh; overflow:auto}

/* =========================================================
   RECIBO (PREVIEW) — NOVO (estilo modelo)
   Compatível com o JS novo: .receiptPaper.thermal + classes t*
   ========================================================= */
.receiptPaper.thermal{
  background:#fff;
  color:#000;
  font-family: ui-monospace, "Courier New", monospace;
  padding:12px 10px;
  width:100%;
  line-height:1.18;
}

/* imagens/Logo */
.receiptPaper.thermal img{max-width:100%; height:auto}
.tLogoWrap{
  display:flex;
  justify-content:center;
  margin-bottom:8px;
}
.tLogo{
  width:135px;
  height:56px;
  object-fit:contain;
}

/* título loja */
.tTitle{
  text-align:center;
  font-weight:900;
  font-size:16px;
  letter-spacing:.2px;
  margin-bottom:2px;
}

/* linhas "====" / "----" */
.tLine{
  font-size:12px;
  letter-spacing:.2px;
  white-space:pre;
  text-align:center;
  margin:6px 0;
}

.tCenter{ text-align:center; font-size:12px; }
.tLeft{ text-align:left; font-size:12px; }
.tRight{ text-align:right; }

.tBigCenter{
  text-align:center;
  font-weight:900;
  font-size:18px;
  margin-top:2px;
  margin-bottom:2px;
}

/* bloco cliente/endereço */
.tBlock{
  display:grid;
  gap:3px;
  font-size:12px;
}

/* faixa do tipo (MESA/TELE/RETIRADA) */
.tTypeBand{
  text-align:center;
  font-weight:900;
  font-size:12px;
  letter-spacing:1px;
  padding:6px 6px;
  border-top:1px dashed #000;
  border-bottom:1px dashed #000;
  margin:6px 0;
}

/* linhas */
.tRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  font-size:12px;
}
.tHeadRow{ font-weight:900; }
.tGrow{ flex:1; }

/* itens */
.tItems{ display:grid; gap:6px; margin-top:2px; }

.tItem{ break-inside: avoid; page-break-inside: avoid; }
.tItemTop{
  display:flex;
  gap:6px;
  align-items:flex-start;
}
.tQty{
  width:28px;
  font-weight:900;
}
.tName{
  flex:1;
  min-width:0;
  word-break:break-word;
}
.tSub{
  width:76px;
  text-align:right;
  white-space:nowrap;
}

/* total */
.tTotalRow{
  display:flex;
  justify-content:space-between;
  font-weight:900;
  font-size:14px;
  margin-top:4px;
}

/* rodapé */
.tFooterGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:4px 10px;
  font-size:11px;
}

/* =========================================================
   IMPRESSÃO TÉRMICA – 1 página, tamanho REAL (80mm / 58mm)
   (mantém sua lógica de printArea, só adapta classes novas)
   ========================================================= */
@media print{

  *{
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 !important;
  }

  @page{
    size: var(--receipt-width) auto;
    margin: 0 !important;
  }

  html, body{
    background:#fff !important;
    width: var(--receipt-width) !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  /* esconde tudo */
  body *{
    visibility:hidden !important;
  }

  /* mostra só o printArea */
  #printArea,
  #printArea *{
    visibility:visible !important;
  }

  #printArea{
    display:block !important;
    position:static !important;
    width: var(--receipt-width) !important;
    max-width: var(--receipt-width) !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  /* ✅ recebe o recibo novo */
  #printArea .receiptPaper.thermal{
    width:100% !important;
    margin:0 !important;
    padding:10px 8px !important;
    font-size: 12px !important;
  }

  /* impede quebra (classes novas) */
  .tItem, .tItemTop{
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* garante escala real */
  body{
    zoom: 100% !important;
  }
}

/* =========================================================
   CLIENTE: layout do cardápio (index.html)
   ========================================================= */

.notice{
  background: rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:12px 14px;
  margin:12px 0;
  box-shadow: var(--shadow);
}

.pills{
  display:flex;
  gap:10px;
  padding: 0 16px 12px;
  overflow-x:auto;
}
.pills::-webkit-scrollbar{height:0}

.pill{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  font-weight:900;
  transition:.15s ease;
}
.pill:hover{transform: translateY(-1px)}
.pill.active{
  background: linear-gradient(135deg, rgba(34,197,94,.30), rgba(22,163,74,.18));
  border-color: rgba(34,197,94,.45);
}

.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  padding-bottom: 92px; /* espaço para bottomBar */
}
@media(min-width:720px){ .grid{grid-template-columns: repeat(3, minmax(0, 1fr));} }
@media(min-width:1020px){ .grid{grid-template-columns: repeat(4, minmax(0, 1fr));} }

.productCard{
  background: rgba(17,24,39,.72);
  border:1px solid var(--stroke);
  border-radius:18px;
  overflow:hidden;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  min-height: 250px;
}

.productImg{
  width:100%;
  height:140px;
  background: rgba(255,255,255,.04);
  border-bottom:1px solid var(--stroke);
  overflow:hidden;
}
.productImg img{width:100%; height:100%; object-fit:cover}

.productBody{
  padding:12px;
  display:grid;
  gap:8px;
  flex:1;
}
.productName{font-weight:900; line-height:1.15}
.productDesc{color:var(--muted); font-size:12.5px; line-height:1.25; min-height:32px}

.productFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 0 12px 12px;
}
.productPrice{font-weight:900; font-size:14px}

.qtyRow{display:flex; align-items:center; gap:8px}
.qtyBtn{
  width:36px; height:36px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight:900;
  cursor:pointer;
}
.qtyVal{min-width:28px; text-align:center; font-weight:900}

.bottomBar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:20;
  background: rgba(11,15,23,.78);
  backdrop-filter: blur(12px);
  border-top:1px solid var(--stroke);
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
}

.checkoutRow{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:12px;
}

.totalBox{
  flex:1;
  background: rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:12px 14px;
  box-shadow: var(--shadow);
}
.totalLabel{font-size:12px; color:var(--muted); font-weight:800}
.totalValue{font-size:14px; font-weight:900; margin-top:2px}

.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none !important}


/* =========================================================
   CLIENTE – NOVO TOPO (status + boas-vindas)
   (usado no index.html novo)
   ========================================================= */

.brandRow{
  align-items:flex-start; /* deixa o topo mais “cartão” */
}

/* linha do status (ABERTO/FECHADO) */
.statusRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
}

.statusBadge{
  font-size:12px;
  font-weight:950;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  white-space:nowrap;
}

/* estados */
.statusOpen{
  color:#052e16;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-color: rgba(34,197,94,.55);
}

.statusClosed{
  color:#3f0a0a;
  background: linear-gradient(135deg, rgba(239,68,68,1), rgba(185,28,28,1));
  border-color: rgba(239,68,68,.55);
}

.hoursText{
  font-size:12.5px;
  color:var(--muted);
  font-weight:800;
}

/* boas-vindas */
.welcomeBox{
  margin-top:12px;
  background: rgba(255,255,255,.05);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:14px;
  box-shadow: var(--shadow);
}

.welcomeTitle{
  font-weight:950;
  font-size:10px;
}

.welcomeText{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
  line-height:1.35;
}


/* =========================================================
   CLIENTE – produtos em card retangular (linha)
   ========================================================= */

.productsList{
  display:grid;
  gap:12px;
  padding-bottom: 92px; /* espaço p/ bottomBar */
}

/* em telas maiores, 2 colunas */
@media(min-width:860px){
  .productsList{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* CARD */
.productCard{
  background: rgba(17,24,39,.72);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;

  display:flex;               /* 🔥 linha */
  align-items:stretch;
  min-height:auto;            /* remove altura antiga */
  flex-direction:row;         /* garante */
  transition:.15s ease;
}
.productCard:hover{ transform: translateY(-1px); }

/* IMAGEM À ESQUERDA */
.productImg{
  width:104px !important;
  min-width:104px;
  height:104px !important;
  border-bottom:0 !important;
  border-right:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}
.productImg img{width:100%; height:100%; object-fit:cover}

/* CORPO NO MEIO */
.productBody{
  flex:1;
  padding:12px !important;
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  min-width:0;
}

/* NOME + PREÇO NA MESMA LINHA */
.productName{
  font-weight:950;
  font-size:14.5px;
  line-height:1.15;
  margin:0;
}
.productDesc{
  color:var(--muted);
  font-size:12.5px;
  line-height:1.25;
  margin:0;
}

/* RODAPÉ VIRA “área do botão +” */
.productFooter{
  padding:10px !important;
  border-left:1px solid var(--stroke);
  background: rgba(255,255,255,.02);

  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  min-width:72px;
}

/* PREÇO */
.productPrice{
  font-weight:950;
  font-size:13.5px;
  white-space:nowrap;
}

/* BOTÃO + (usa seus estilos base) */
.qtyRow{
  display:flex;
  align-items:center;
  justify-content:center;
}
.qtyBtn{
  width:44px !important;
  height:44px !important;
  border-radius:16px !important;
  border:1px solid rgba(34,197,94,.40) !important;
  background: linear-gradient(135deg, rgba(34,197,94,.26), rgba(22,163,74,.12)) !important;
  color: var(--text) !important;
  font-weight:950 !important;
  font-size:22px !important;
}
.qtyVal{ display:none !important; } /* esconde contador se você só quer o + */

/* mobile: melhora clique */
@media(max-width:420px){
  .productImg{ width:92px !important; min-width:92px; height:92px !important; }
  .productFooter{ min-width:66px; }
  .qtyBtn{ width:42px !important; height:42px !important; }
}
.profileBtn{
  display:flex;
  align-items:center;
  gap:10px;
}
.profileMini{
  width:26px; height:26px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
}
.profileMini img{width:100%; height:100%; object-fit:cover}
.profileLabel{font-weight:900}
@media(max-width:520px){
  .profileLabel{display:none;}
}

/* =========================================================
   ADMIN – Perfil (dashboard em blocos)
   ========================================================= */

.profileTop{
  background: rgba(17,24,39,.72);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.profileTopLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.profileBigAvatar{
  width:56px;
  height:56px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  flex:0 0 auto;
}
.profileBigAvatar img{width:100%; height:100%; object-fit:cover}

.profileTopInfo{min-width:0}
.profileStoreName{
  font-weight:950;
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.profileStoreSub{
  color:var(--muted);
  font-size:12.5px;
  margin-top:2px;
}

/* Grid: mobile 2 colunas, cresce no desktop */
.dashGrid{
  margin-top:12px;
  display:grid;
  gap:12px;

  grid-template-columns: repeat(2, minmax(0, 1fr)); /* ✅ 2 por linha no mobile */
}

@media(min-width:720px){
  .dashGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media(min-width:1020px){
  .dashGrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Bloco */
.dashTile{
  background: rgba(17,24,39,.72);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  min-height: 132px;
  transition:.15s ease;
}

.dashTile:hover{ transform: translateY(-2px); }
.dashTile:active{ transform: translateY(0px); }

/* Ícone grande */
.dashIcon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(56,189,248,.10));
  border:1px solid var(--stroke);
}

/* Texto */
.dashLabel{
  font-weight:950;
  font-size:14px;
  line-height:1.1;
  color: #f3ecf3;
}
.dashHint{
  color:var(--muted);
  font-size:12px;
  line-height:1.2;
}

/* =========================================================
   ADMIN – Perfil (tela interna tipo pop-up)
   ========================================================= */
.panelOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}

.panelCard{
  width: min(720px, 100%);
  background: rgba(17,24,39,.95);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-top: 10px;
}

.panelTop{
  padding: 12px;
  border-bottom: 1px solid var(--stroke);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.panelTitle{font-weight:950; font-size:16px}
.panelSub{color:var(--muted); font-size:12.5px; margin-top:2px}

.panelBody{
  padding: 12px;
}

.panelBottom{
  padding: 12px;
  border-top: 1px solid var(--stroke);
  display:flex;
  justify-content:flex-end;
}

.panelPreview{
  margin-top: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 12px;
  display:flex;
  gap: 12px;
  align-items: center;
}

.previewAvatar{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
}
.previewAvatar img{width:100%; height:100%; object-fit:cover}
.panelPreviewRight{min-width:0}

/* =========================================================
   HORÁRIOS – Cards por dia (mais profissional)
   ========================================================= */

.hoursList{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* Desktop: 2 colunas */
@media(min-width:780px){
  .hoursList{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Desktop grande: 3 colunas */
@media(min-width:1100px){
  .hoursList{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.hoursCard{
  background: rgba(17,24,39,.72);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 12px;
  display:grid;
  gap: 10px;
}

.hoursCardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--stroke);
}

.hoursDay{
  font-weight: 950;
  font-size: 15px;
}

.hoursClosed{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted);
  font-weight: 900;
  user-select:none;
}

.hoursCheck{
  width:18px;
  height:18px;
  accent-color: var(--brand);
}

.hoursCardBody{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.hoursField{
  display:grid;
  gap: 6px;
}

.hoursLabel{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}

.hoursTime{
  padding: 12px !important;
}

.hoursRow.isClosed{
  opacity: .70;
}

.hoursRow.rowError{
  border-color: rgba(239,68,68,.55);
  background: rgba(239,68,68,.10);
}

/* Mobile pequeno: inputs em coluna se quiser mais espaço */
@media(max-width:420px){
  .hoursCardBody{ grid-template-columns: 1fr; }
}

/* =========================================================
   PIX – formulário profissional
   ========================================================= */
.pixForm{
  display:grid;
  gap:12px;
}

.pixForm .field{
  margin-bottom: 0; /* mantém alinhado no painel */
}


/* =========================================================
   RELATÓRIOS
   ========================================================= */

.panelCardWide{
  width: min(1100px, 100%);
}

.reportsHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

.reportsSmall{
  font-size:12px;
  color: var(--muted);
  font-weight:800;
}

.reportsTitle{
  font-size:18px;
  font-weight:950;
  margin-top:2px;
}

.reportsHint{
  font-size:12px;
  color: var(--muted);
  margin-top:4px;
}

.reportsActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.reportsGrid{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;
}
@media(min-width:980px){
  .reportsGrid{ grid-template-columns: 1.2fr .8fr; }
}

.reportsCard{
  background: rgba(17,24,39,.72);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:12px;
}

.kpiGrid{
  display:grid;
  gap:10px;
  grid-template-columns: 1fr 1fr;
}
@media(min-width:980px){
  .kpiGrid{ grid-template-columns: 1fr 1fr; }
}

.kpiItem{
  background: rgba(255,255,255,.05);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:12px;
}

.kpiLabel{
  font-size:12px;
  color: var(--muted);
  font-weight:900;
}

.kpiValue{
  font-size:16px;
  font-weight:950;
  margin-top:4px;
}

.reportsRowTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.reportsPeriod{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.reportsField{
  display:grid;
  gap:6px;
}

.reportsTables{
  display:grid;
  gap:12px;
  margin-top:12px;
}

.reportsTableCard{
  background: rgba(255,255,255,.04);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:12px;
}

.reportsTableTitle{
  font-weight:950;
  margin-bottom:10px;
}

.rTable{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:14px;
}
.rTable th, .rTable td{
  border-bottom:1px solid var(--stroke);
  padding:10px 8px;
  font-size:13px;
}
.rTable th{
  text-align:left;
  color: var(--muted);
  font-weight:900;
}
.rTable tr:last-child td{
  border-bottom:0;
}

/* =========================================================
   USUÁRIOS – painel dentro do perfil
   ========================================================= */
.usersBoard{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;
}
@media(min-width:980px){
  .usersBoard{ grid-template-columns: 1fr 1fr; }
}

.usersBlock{
  background: rgba(17,24,39,.72);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:14px;
  display:grid;
  gap:10px;
}

.usersBlockTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.usersBlockTitle{
  font-weight:950;
  font-size:15px;
}
.usersBlockHint{
  font-size:12.5px;
  color:var(--muted);
  margin-top:3px;
}

.usersForm{ display:grid; gap:12px; }

.usersPermsTitle{
  font-weight:950;
  font-size:13px;
  margin-top:4px;
}

.usersPermsGrid{
  display:grid;
  gap:10px;
  grid-template-columns: 1fr;
}
@media(min-width:520px){
  .usersPermsGrid{ grid-template-columns: 1fr 1fr; }
}

.permCard{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.permCard input{ width:18px; height:18px; margin-top:2px; }
.permInfo{ min-width:0; }
.permName{ font-weight:900; font-size:13px; }
.permDesc{ font-size:12px; color:var(--muted); margin-top:2px; line-height:1.2; }

.usersSearchRow{ margin-bottom:10px; }

.usersList{
  display:grid;
  gap:10px;
}

.userCard{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius:18px;
  padding:12px;
  display:grid;
  gap:10px;
}
.userTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.userName{ font-weight:950; }
.userMeta{ font-size:12px; color:var(--muted); margin-top:2px; }


/* =========================================================
   FIX: Overlays com scroll (painéis do Perfil/Admin)
   - resolve travamento e permite rolar até o botão
   ========================================================= */
.panelOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 14px;
  display: none;              /* você já controla via JS */
  align-items: center;
  justify-content: center;
  overflow: auto;             /* ✅ permite rolar a overlay inteira se precisar */
  -webkit-overflow-scrolling: touch;
}

.panelCard{
  width: min(980px, 100%);
  max-height: calc(100vh - 28px);  /* ✅ cabe na tela */
  display: flex;
  flex-direction: column;          /* ✅ top + body + bottom */
  overflow: hidden;                /* ✅ body que rola, não o card inteiro */
}

.panelCardWide{
  width: min(1180px, 100%);
  max-height: calc(100vh - 28px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panelTop{
  flex: 0 0 auto;
}

.panelBody{
  flex: 1 1 auto;
  overflow: auto;                  /* ✅ scroll aqui */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 14px;
}

.panelBottom{
  flex: 0 0 auto;
  position: sticky;                /* ✅ botão sempre visível */
  bottom: 0;
  background: rgba(17,24,39,.92);  /* combina com seu tema */
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--stroke);
}

/* =========================================================
   USUÁRIOS: grid + espaços (evita botão "sumir")
   ========================================================= */
.usersBoard{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 980px){
  .usersBoard{
    grid-template-columns: 1fr 1fr;  /* 2 blocos lado a lado no desktop */
    align-items: start;
  }
}

.usersBlock{
  min-width: 0;
}

.usersForm{
  display: grid;
  gap: 10px;
}

.usersPermsGrid{
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

@media (min-width: 560px){
  .usersPermsGrid{ grid-template-columns: 1fr 1fr; }
}

/* deixa o botão sempre alcançável no mobile */
#btnCreateUser{
  width: 100%;
  margin-top: 6px;
}

.userBadge{
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}
.userBadge.off{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
}

.userActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.userActions .btn{ padding:8px 10px; }
/* =========================================================
   PEDIDOS – CARDS COM BORDA + FUNDO SUAVE (SEM DEPENDER DO MARKUP)
   - funciona mesmo se seu JS não tiver orderGrid/orderBox etc.
   - cor por status via:
     a) data-status="new|prep|done|canceled"
     b) class="orderCard status-new|status-prep|status-done|status-canceled"
   ========================================================= */

.ordersCards{
  display:grid;
  gap:12px;
}

/* grid bonito no desktop */
@media(min-width:760px){
  .ordersCards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media(min-width:1100px){
  .ordersCards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* se você quiser cards também no desktop, deixe assim.
   se quiser tabela no desktop, comente esse bloco. */
@media(min-width:900px){
  .ordersTableWrap{ display:none; }
}
/* =========================================================
   PEDIDOS – CARDS (BORDAS VISÍVEIS + FUNDOS SUAVES POR STATUS)
   Compatível 100% com o JS atual (orderCard + data-status)
   ========================================================= */

/* GRID */
.ordersCards{
  display:grid;
  gap:12px;
}

/* cards também no desktop */
@media(min-width:900px){
  .ordersTableWrap{ display:none; }
}

@media(min-width:760px){
  .ordersCards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media(min-width:1100px){
  .ordersCards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* =========================================================
   CARD PRINCIPAL
   ========================================================= */
.orderCard{
  border-radius:18px;
  overflow:hidden;

  /* BORDA REAL (agora aparece) */
  border:1px solid rgba(255,255,255,.22);

  /* sombra externa + interna */
  box-shadow:
    0 16px 48px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.06);

  background: rgba(17,24,39,.88);
}

/* =========================================================
   FUNDOS SUAVES POR STATUS (bem discretos)
   ========================================================= */
.orderCard[data-status="new"]{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent),
    rgba(17,24,39,.88);
}

.orderCard[data-status="preparing"]{
  background:
    linear-gradient(180deg, rgba(56,189,248,.12), transparent),
    rgba(17,24,39,.88);
}

.orderCard[data-status="done"]{
  background:
    linear-gradient(180deg, rgba(34,197,94,.12), transparent),
    rgba(17,24,39,.88);
}

.orderCard[data-status="canceled"]{
  background:
    linear-gradient(180deg, rgba(239,68,68,.12), transparent),
    rgba(17,24,39,.88);
}

/* =========================================================
   CABEÇALHO
   ========================================================= */
.orderHead{
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.orderHeadLeft{
  display:grid;
  gap:8px;
  min-width:0;
}

.orderStatusLine{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.orderStatusPill{
  font-size:12px;
  font-weight:950;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.orderStatusPill.status-preparing{
  border-color: rgba(56,189,248,.55);
  background: rgba(56,189,248,.18);
}
.orderStatusPill.status-done{
  border-color: rgba(34,197,94,.55);
  background: rgba(34,197,94,.18);
}
.orderStatusPill.status-canceled{
  border-color: rgba(239,68,68,.65);
  background: rgba(239,68,68,.22);
}

.orderDate{
  font-size:12px;
  color: rgba(229,231,235,.70);
}

.orderMetaLine{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}

.orderMetaStrong{ font-weight:950; }
.orderMetaDot{ opacity:.4; }
.orderMeta{ opacity:.85; }

.orderTotal{
  font-weight:950;
  font-size:14px;
  white-space:nowrap;
}

/* =========================================================
   CORPO
   ========================================================= */
.orderBody{
  padding:12px;
  display:grid;
  gap:10px;
}

/* CAIXA DE ITENS */
.orderItemsBox{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:10px;
}

.orderItemsTitle{
  font-size:12px;
  font-weight:950;
  opacity:.8;
  margin-bottom:6px;
}

.orderItemsList{
  display:grid;
  gap:6px;
  max-height:140px;
  overflow:auto;
  padding-right:4px;
}
.orderItemsList::-webkit-scrollbar{ width:6px; }
.orderItemsList::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius:999px;
}

.orderItem{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
}

.orderEmpty{
  font-size:12px;
  opacity:.65;
}

/* OBSERVAÇÃO */
.orderObs{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:10px;
  font-size:12.5px;
  line-height:1.35;
}

/* =========================================================
   AÇÕES
   ========================================================= */
.orderActions{
  padding:12px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.orderBtn{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight:950;
  font-size:12px;
  cursor:pointer;
  transition:.15s ease;
}
.orderBtn:hover{ transform: translateY(-1px); }

.orderBtn.danger{
  border-color: rgba(239,68,68,.65);
  background: rgba(239,68,68,.22);
}

.orderBtn.receipt{
  margin-left:auto;
}

@media(max-width:520px){
  .orderBtn.receipt{
    width:100%;
    margin-left:0;
    border-radius:16px;
    text-align:center;
  }
}



/* =========================================================
   VENDAS – layout
   ========================================================= */

.salesTopRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.salesTabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.salesActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.salesChartsGrid{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;
  margin-top: 12px;
}
@media(min-width:980px){
  .salesChartsGrid{ grid-template-columns: 1.2fr .8fr; }
}

.salesChartCard{
  background: rgba(17,24,39,.72);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:12px;
}

.salesChartTitle{
  font-weight:950;
  margin-bottom:10px;
}

.salesChartWrap{
  position:relative;
  height:220px;
}
/* =========================================================
   HOME "APP-LIKE" (perfil/cardápio) — VERSÃO CORRIGIDA/ÚNICA
   Escopo: só quando <body class="menuPage">
   - remove duplicações (sem regras repetidas no fim)
   - corrige o “fundo” que subia e cobria metade do avatar
   - capa + avatar estáveis em qualquer tela
   ========================================================= */

/* desativa topbar antigo */
.menuPage .topbar{ display:none !important; }

/* fundo (mais neutro e legível) */
body.menuPage{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(34,197,94,.16), transparent 62%),
    radial-gradient(900px 500px at 110% 20%, rgba(56,189,248,.10), transparent 58%),
    #050913;
}

/* -------- TOPBAR (busca + carrinho) -------- */
.menuPage .appTopbar{
  position: sticky;
  top: 0;
  margin-top: 5px;
  z-index: 100;
  padding: 1px 14px;
  display:flex;
  gap:12px;
  align-items:center;
  background: rgba(5, 9, 19, .74);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.menuPage .appSearch{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

.menuPage .appIcon{ opacity:.85; }

.menuPage .appSearch input{
  width:100%;
  border:0;
  outline:none;
  background: transparent;
  color: rgba(255,255,255,.94);
  font-size: 15.5px;
}
.menuPage .appSearch input::placeholder{
  color: rgba(229,231,235,.62);
}

.menuPage .appCart{
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 16px;
  padding: 7px 7px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  cursor:pointer;
}

.menuPage .appBadge{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 950;
  background: var(--danger);
  color:#fff;
  border: 2px solid rgba(5, 9, 19, .74);
}

/* -------- CAPA + AVATAR (FIX DEFINITIVO) --------
   IMPORTANTE:
   - o avatar “sai” da capa (overflow: visible)
   - a área do .profileInfo desce o suficiente (padding-top)
   -> assim NÃO existe “fundo” cobrindo metade do avatar
*/
.menuPage .profileHeader{
  position: relative;
  height: 150px;
  overflow: visible;            /* ✅ deixa o avatar sair */
  isolation:isolate;
  background: #0b1220;
}

.menuPage .coverImg{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* overlay sutil para contraste */
.menuPage .profileHeader::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.42));
  z-index:1;
}

/* avatar ancorado e saindo pra fora da capa */
.menuPage .avatarWrap{
  position:absolute;
  left:50%;
  bottom:-42px;                 /* ✅ metade pra fora */
  transform: translateX(-50%);
  z-index:5;

  width: 84px;
  height: 84px;
  border-radius: 999px;
  padding: 6px;

  background: rgba(6,10,20,.92);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}

.menuPage .avatarImg{
  width:100%;
  height:100%;
  border-radius: 999px;
  object-fit: cover;
  display:block;
  border: 1px solid rgba(255,255,255,.10);
}

/* -------- INFO (nome + status) --------
   Esse é o ponto que evita o “fundo” subir em cima do avatar.
   NÃO coloque style="padding-top:0" no HTML.
*/
.menuPage .profileInfo{
  padding-top: 64px;            /* ✅ empurra o conteúdo pra baixo do avatar */
  padding-bottom: 10px;
  position: relative;
  z-index: 2;
}

.menuPage .profileNameRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top: 0;
}

.menuPage .profileName{
  font-size: 26px;
  font-weight: 980;
  letter-spacing: .2px;
  text-align:center;
  line-height: 1.1;
  color: rgba(255,255,255,.96);
  text-shadow: 0 10px 26px rgba(0,0,0,.45);
}

.menuPage .profileVerified{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 13px;
  font-weight: 950;
  background: linear-gradient(135deg, rgba(34,197,94,1), rgba(22,163,74,1));
  color:#04150a;
  box-shadow: 0 10px 26px rgba(34,197,94,.25);
}

.menuPage .profileMetaRow{
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

/* status + horas mais legíveis */
.menuPage .openBadge{
  font-size: 10px;
  font-weight: 980;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  box-shadow: 0 14px 32px rgba(0,0,0,.40);
  white-space:nowrap;
}

.menuPage .openBadge.statusOpen{
  color:#052e16;
  background: linear-gradient(135deg, rgba(34,197,94,1), rgba(22,163,74,1));
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 18px 42px rgba(34,197,94,.18);
}
.menuPage .openBadge.statusClosed{
  color:#3f0a0a;
  background: linear-gradient(135deg, rgba(239,68,68,1), rgba(185,28,28,1));
  border-color: rgba(239,68,68,.55);
  box-shadow: 0 18px 42px rgba(239,68,68,.14);
}

.menuPage .hoursText{
  color: rgba(229,231,235,.86);
  font-size: 10px;
  font-weight: 900;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
}

/* -------- Boas vindas -------- */
.menuPage .welcomeCard{
  margin-top: 12px;
  max-width: 820px;
  margin-left:auto;
  margin-right:auto;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.menuPage .welcomeTitle{ font-weight: 980; }
.menuPage .welcomeSub{
  color: rgba(229,231,235,.78);
  font-weight: 800;
  margin-top:4px;
  font-size: 10px;
}

/* -------- Categorias -------- */
.menuPage .catsStrip{
  display:flex;
  gap:10px;
  padding: 12px 14px 10px;
  overflow:auto;
  scroll-snap-type: x mandatory;

  background: rgba(5, 9, 19, .40);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.menuPage .catsStrip::-webkit-scrollbar{ height:0; }

.menuPage #categoryPills .pill{
  scroll-snap-align: start;

  min-width: 128px;
  height: 56px;
  padding: 12px 14px;
  border-radius: 18px;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  box-shadow: 0 14px 42px rgba(0,0,0,.42);

  font-weight: 950;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.menuPage #categoryPills .pill:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}
.menuPage #categoryPills .pill.active{
  border-color: rgba(34,197,94,.60);
  background:
    linear-gradient(135deg, rgba(34,197,94,.20), rgba(22,163,74,.10)),
    rgba(255,255,255,.06);
  box-shadow:
    0 18px 52px rgba(0,0,0,.48),
    0 0 0 1px rgba(34,197,94,.20) inset;
}

/* -------- Produtos (polish leve) -------- */
.menuPage .productsList{ margin-top: 12px; }

.menuPage .productCard{
  background: rgba(17,24,39,.80);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.50);
}
.menuPage .productDesc{ color: rgba(229,231,235,.70); }
.menuPage .productPrice{ color: rgba(255,255,255,.92); }

/* Responsivo */
@media(max-width:420px){
  .menuPage .profileHeader{ height: 140px; }
  .menuPage .avatarWrap{
    width: 80px;
    height: 80px;
    bottom: -40px;
  }
  .menuPage .profileInfo{ padding-top: 50px; }
  .menuPage .profileName{ font-size: 16px; }
  .menuPage #categoryPills .pill{ min-width: 120px; height: 30px; font-size: 10px; }
}


/* 🔎 Faixa Rastreie seu pedido */
.trackBar {
  position: fixed;
  bottom: 72px; /* fica logo acima da bottomBar */
  left: 0;
  right: 0;
  z-index: 9;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 52px;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff;
  text-decoration: none;

  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;

  box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
}

.trackBar:active {
  opacity: 0.9;
}

.trackIcon {
  font-size: 20px;
}

.trackText {
  font-size: 14px;
}

/* Topbar actions: rastreio + carrinho */
.appActions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Botão de rastreio no mesmo padrão do carrinho */
.appTrack{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.15);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:20px;
}

.appTrack:active{
  transform: scale(.98);
  opacity:.92;
}

.appTrack, .appCart{
  border: none;
  background: transparent;
  padding: 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.topIconPng{
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}