:root{
  --sidebar-w: 240px;
  --topbar-h: 56px;
}
body{
  background:#f4f6fa;
  padding-top: var(--topbar-h);
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}

/* Sidebar — DESKTOP (≥992px) */
.sidebar{
  width: var(--sidebar-w) !important;
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  z-index: 1030;
}
.sidebar .nav-link{
  color: #cdd5e0;
  padding: .55rem .9rem;
  border-radius: .35rem;
  margin: 1px 0;
  font-size: .92rem;
  display: flex;
  align-items: center;
  gap:.6rem;
}
.sidebar .nav-link:hover{ background:#1f2733; color:#fff; }
.sidebar .nav-link.active{ background:#0d6efd; color:#fff; font-weight:600; }
.sidebar .nav-section{
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6c757d;
  padding: 1rem .9rem .3rem;
  font-weight: 600;
}
.content{
  margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--topbar-h));
}

/* MOBILE (<992px) — offcanvas */
@media (max-width: 991.98px){
  .sidebar{
    /* z-index MUITO alto pra ficar acima de qualquer overlay */
    z-index: 9999 !important;
    top: 0 !important;
    height: 100vh !important;
    width: 80vw !important;        /* largura adaptativa: 80% da tela */
    max-width: 320px !important;   /* mas no máximo 320px */
    pointer-events: auto !important;
    /* Permite scroll vertical sem fechar o menu */
    touch-action: pan-y;
    overflow: hidden;              /* o scroll é do offcanvas-body */
    display: flex;
    flex-direction: column;
  }
  /* O .offcanvas-body é o container scrollável real */
  #sidebar .offcanvas-body{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    touch-action: pan-y;
  }
  #sidebar .offcanvas-body,
  #sidebar .nav,
  #sidebar .nav-item,
  #sidebar .nav-link{
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
  }
  /* Backdrop FICA ABAIXO do sidebar — força mesmo se Bootstrap mudar */
  .offcanvas-backdrop{
    z-index: 9990 !important;
  }
  .content{ margin-left: 0; }

  /* Touch targets MAIORES no celular pra dedo */
  .sidebar .nav-link{
    padding: 1rem 1rem !important;
    font-size: 1rem;
    min-height: 52px;
    cursor: pointer;
  }
  .sidebar .nav-link i{
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
  }
  .sidebar .nav-section{
    padding: 1.2rem 1rem .4rem;
    font-size: .72rem;
  }
  /* Estado ativo bem visível ao tocar */
  .sidebar .nav-link:active{
    background:#0d6efd !important;
    color:#fff !important;
  }
}

/* Garante que tabelas em telas pequenas tenham scroll horizontal limpo */
@media (max-width: 575.98px){
  .table-responsive{ -webkit-overflow-scrolling: touch; }
  /* Botões em touch precisam de área mínima de 44x44px (Apple HIG) */
  .btn-sm{ min-height: 38px; min-width: 38px; }
  /* Modal full-screen no celular pra não ficar apertado */
  .modal-dialog{ margin: .5rem; }
}

/* iOS Safari faz AUTO-ZOOM ao focar input com font-size <16px — força 16px em todos */
@media (max-width: 767.98px){
  input.form-control,
  input.form-control-sm,
  select.form-select,
  select.form-select-sm,
  textarea.form-control{
    font-size: 16px !important;
  }
  /* Botões touch-friendly */
  .btn{ min-height: 44px; }
  .btn-sm{ min-height: 38px; }
  /* Dropdown menus mais espaçados pra dedo */
  .dropdown-item{ padding: .75rem 1rem; }
}

/* Cards */
.card{
  border: 0;
  border-radius: .65rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.card-stat{
  border-left: 4px solid var(--bs-primary);
}
.card-stat .num{ font-size: 1.6rem; font-weight: 700; }

.btn{ border-radius: .5rem; }
.btn-lg{ padding: .85rem 1.2rem; font-size: 1.05rem; }

/* Forms */
.form-control, .form-select{
  border-radius: .5rem;
  padding: .55rem .8rem;
  font-size: 1rem;
}
.form-label{ font-weight: 500; font-size: .9rem; margin-bottom: .25rem; }

/* Table responsiva mobile */
.table-card{ background: #fff; border-radius:.65rem; overflow:hidden; }
.table-card .table{ margin: 0; }
.table-card .table th{ background: #f8f9fb; font-size:.8rem; text-transform: uppercase; letter-spacing: .03em; color:#6c757d; }
.table-card .table td, .table-card .table th{ vertical-align: middle; padding: .75rem .9rem; }

/* Toolbar (filtro + ação) */
.toolbar{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center;
  margin-bottom: 1rem;
}
.toolbar .form-control{ max-width: 320px; }

/* Status pills */
.badge{ font-weight: 600; letter-spacing: .03em; }

/* Login */
.login-wrap{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
  padding: 1rem;
}
.login-card{
  width: 100%;
  max-width: 410px;
  background:#fff;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.login-card .brand{
  text-align:center;
  margin-bottom:1.5rem;
}
.login-card .brand i{ font-size: 3rem; color: var(--bs-primary); }

/* Carrinho do PDV */
.pdv-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap:1rem; }
@media(max-width:991.98px){ .pdv-grid{ grid-template-columns: 1fr; } }
.pdv-itens{ background:#fff; border-radius:.65rem; padding:1rem; }
.pdv-resumo{ background:#fff; border-radius:.65rem; padding:1rem; }
.pdv-item{
  display:flex; gap:.6rem; align-items:center;
  padding:.6rem 0; border-bottom: 1px dashed #eee;
}
.pdv-item:last-child{ border-bottom:0; }
.pdv-item .qty{ width: 70px; }
.pdv-item .preco{ width: 110px; }

/* Cupom imprimível */
.cupom{
  width: 80mm;
  margin: 0 auto;
  padding: 8px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #000;
  background:#fff;
}
.cupom h2{ text-align:center; font-size:14px; margin: 0 0 4px; }
.cupom .center{ text-align:center; }
.cupom .right{ text-align:right; }
.cupom hr{ border:0; border-top: 1px dashed #000; margin:6px 0; }
.cupom table{ width:100%; border-collapse: collapse; }
.cupom table td{ padding: 1px 0; vertical-align: top; }

@media print{
  body{ background:#fff; padding:0; }
  .no-print{ display:none !important; }
  .cupom{ width: auto; }
  @page{ margin: 4mm; size: 80mm auto; }
}

/* Mobile tweaks */
@media (max-width: 575.98px){
  .table-responsive-cards thead{ display:none; }
  .table-responsive-cards tbody tr{
    display:block; padding:.85rem; border-bottom:1px solid #eee;
  }
  .table-responsive-cards tbody td{
    display:flex; justify-content:space-between; padding:.25rem 0; border:0;
  }
  .table-responsive-cards tbody td::before{
    content: attr(data-label);
    font-weight: 600; color:#6c757d; font-size:.78rem; text-transform:uppercase;
  }
}