/* ===========================================================
   Sistema de Venda de Mesas — estilo base (tema festa junina)
   =========================================================== */
:root {
  --junina-vermelho: #c1272d;
  --junina-amarelo:  #f2a900;
  --junina-verde:    #2e7d32;
  --junina-azul:     #1565c0;
  --sidebar-bg:      #1f2330;
  --sidebar-fg:      #c9ced9;
  --sidebar-active:  #f2a900;
}

body {
  background: #f4f5f7;
}

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--junina-vermelho), var(--junina-amarelo));
  padding: 1rem;
}
.login-card {
  width: 100%;
  max-width: 380px;
  border: none;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.login-card .brand {
  font-weight: 700;
  color: var(--junina-vermelho);
}

/* ---------- Layout logado ---------- */
.app-navbar {
  background: linear-gradient(90deg, var(--junina-vermelho), var(--junina-amarelo));
}
.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar .dropdown-toggle {
  color: #fff !important;
}
.app-shell {
  display: flex;
  align-items: stretch;
}
.sidebar {
  background: var(--sidebar-bg);
  min-height: calc(100vh - 56px);
  padding-top: 1rem;
  width: 230px;
  flex: 0 0 230px;
  transition: flex-basis .15s ease, width .15s ease;
}
.sidebar .nav-link {
  color: var(--sidebar-fg);
  border-radius: 8px;
  margin: 2px 8px;
  padding: .55rem .9rem;
  font-size: .95rem;
}
.sidebar .nav-link:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.sidebar .nav-link.active {
  background: rgba(242,169,0,.15);
  color: var(--sidebar-active);
  font-weight: 600;
}
.sidebar .nav-link i { width: 1.2rem; display: inline-block; }
.content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.5rem;
}

/* Menu recolhido (só ícones) */
body.sidebar-collapsed .sidebar { width: 62px; flex-basis: 62px; }
body.sidebar-collapsed .sidebar .label,
body.sidebar-collapsed .sidebar hr { display: none; }
body.sidebar-collapsed .sidebar .nav-link {
  text-align: center;
  padding-left: .4rem;
  padding-right: .4rem;
}
body.sidebar-collapsed .sidebar .nav-link i { width: auto; margin: 0; font-size: 1.15rem; }

@media (max-width: 768px) {
  .sidebar { width: 62px; flex-basis: 62px; }
  .sidebar .label, .sidebar hr { display: none; }
  .sidebar .nav-link { text-align: center; }
}

/* ---------- Cards do dashboard ---------- */
.stat-card { border: none; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.stat-card .stat-num { font-size: 2rem; font-weight: 700; }

/* ---------- Editor / grid da quadra ---------- */
/* Layout em 3 colunas: (menu) · sidebar de config · canvas */
.editor-shell {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.editor-sidebar {
  flex: 0 0 250px;
  width: 250px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 14px;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 90px);
  overflow: auto;
}
.editor-canvas { flex: 1 1 auto; min-width: 0; }
.es-section { margin-bottom: 1rem; }
.es-section:last-child { margin-bottom: 0; }
.es-title {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a8a8a;
  font-weight: 700;
  margin-bottom: .5rem;
}
.es-tools .btn.active { box-shadow: 0 0 0 .2rem rgba(193,39,45,.30); }
.es-range-row {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  margin: .35rem 0 .1rem;
}
.es-range-row b { color: #c1272d; }

@media (max-width: 992px) {
  .editor-shell { flex-direction: column; }
  .editor-sidebar { width: 100%; flex-basis: auto; position: static; max-height: none; }
}

.grid-wrap {
  overflow: auto;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  max-height: 72vh;
}
/* Área de layout ampliada (editor) */
.grid-wrap-lg {
  max-height: calc(100vh - 120px);
  min-height: 62vh;
}
/* Moldura que imita o piso/paredes da quadra */
.court {
  display: inline-block;
  background-color: #f3ede1;
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.02) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.02) 75%);
  background-size: 24px 24px;
  background-position: center;
  border: 5px solid #8d6e63;
  border-radius: 8px;
  padding: var(--court-pad, 16px);
  box-shadow: inset 0 0 0 2px rgba(141,110,99,.25);
}
/* Quando há imagem de fundo, ela cobre a moldura (sem o padrão xadrez) */
.court.has-bg {
  background-image: none;
  background-size: cover;
  background-repeat: no-repeat;
}
.grid-quadra {
  display: grid;
  gap: var(--gap, 6px);
  width: max-content;
}
.grid-cell {
  width: var(--cell, 32px);
  height: var(--cell, 32px);
  box-sizing: border-box;
  border: 1px dashed #cfc6b4;
  border-radius: 4px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell, 32px) * 0.34);
  font-weight: 700;
  color: #555;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  line-height: 1;
}
.grid-cell:hover { outline: 2px solid var(--junina-amarelo); outline-offset: -2px; }

/* Mesas: quadrado arredondado, colorido por status, com leve sombra (parece uma mesa) */
.grid-cell.mesa {
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 6px;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
}
.grid-cell.mesa[data-status="livre"]       { background: var(--junina-verde); }
.grid-cell.mesa[data-status="reservada"]   { background: var(--junina-amarelo); color: #222; }
.grid-cell.mesa[data-status="selecionada"] { background: var(--junina-azul); box-shadow: 0 0 0 2px #fff inset, 0 1px 3px rgba(0,0,0,.3); }
.grid-cell.mesa[data-status="vendida"]     { background: var(--junina-vermelho); }
.grid-cell.mesa[data-status="bloqueada"]   { background: #6c757d; }

/* Elementos não-vendáveis */
.grid-cell.el          { border: 1px solid rgba(0,0,0,.12); border-radius: 3px; color: #333; }
.grid-cell.el-pista    { background: #cfe8ff; }
.grid-cell.el-corredor { background: #eceff1; }
.grid-cell.el-palco    { background: #d1c4e9; }
.grid-cell.el-entrada  { background: #b2dfdb; }
.grid-cell.el-parede   { background: #455a64; color: #fff; }
.grid-cell.el-texto    { background: #fff8e1; }

/* Nos modos de visualização (PDV/cliente) as células vazias somem */
.grid-quadra[data-modo="cliente"] .grid-cell,
.grid-quadra[data-modo="pdv"] .grid-cell { cursor: default; }
.grid-quadra[data-modo="cliente"] .grid-cell:not(.mesa):not(.el),
.grid-quadra[data-modo="pdv"] .grid-cell:not(.mesa):not(.el) {
  border-color: transparent;
}
.grid-quadra[data-modo="cliente"] .grid-cell:hover,
.grid-quadra[data-modo="pdv"] .grid-cell:not(.mesa):hover { outline: none; }

/* Painel de configuração (sliders) — compacto, em linha */
.cfg-panel .cfg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 18px;
  margin-bottom: 2px;
  white-space: nowrap;
}
.cfg-panel .cfg-lbl { color: #555; }
.cfg-panel .form-range {
  width: 88px;
  flex: 0 0 88px;       /* não cresce nem encolhe */
  margin: 0;
  vertical-align: middle;
}
.cfg-panel .cfg-val {
  min-width: 52px;
  text-align: left;
  color: #222;
}

/* Legenda */
.legenda {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 3px;
  border: 1px solid rgba(0,0,0,.15);
}
.legenda.mesa-livre { background: var(--junina-verde); }
.legenda.el-pista   { background: #cfe8ff; }
.legenda.el-palco   { background: #d1c4e9; }
.legenda.el-entrada { background: #b2dfdb; }
.legenda.el-parede  { background: #455a64; }

/* ---------- Badges de status de mesa (reuso futuro) ---------- */
.badge-livre     { background: var(--junina-verde); }
.badge-reservada { background: var(--junina-amarelo); color:#000; }
.badge-vendida   { background: var(--junina-vermelho); }
.badge-bloqueada { background: #6c757d; }