/* =========================================================
   ZeroTicket — Hero Unified Layout
   Atendimento é o molde estrutural dos 3 modos
   ========================================================= */

/* =========================================================
   1. FUNDO — mesma linguagem das órbitas do Atendimento
   ========================================================= */

.slide-pedidos,
.slide-retiradas{
  background:transparent !important;
}

/* brilho extremamente suave, igual à lógica do verde */
.slide-pedidos::before,
.slide-retiradas::before{
  content:'';
  position:absolute;
  inset:5% -2%;
  z-index:0;
  pointer-events:none;
}

.slide-pedidos::before{
  background:radial-gradient(
    ellipse,
    rgba(244,177,108,.18),
    transparent 68%
  );
}

.slide-retiradas::before{
  background:radial-gradient(
    ellipse,
    rgba(135,194,226,.18),
    transparent 68%
  );
}

/* segunda órbita */
.slide-pedidos::after,
.slide-retiradas::after{
  content:'';
  position:absolute;
  inset:16% -10%;
  border-radius:50%;
  background:transparent;
  pointer-events:none;
  transform:rotate(40deg);
  z-index:0;
}

.slide-pedidos::after{
  border:1px solid rgba(218,168,119,.30);
}

.slide-retiradas::after{
  border:1px solid rgba(148,194,218,.32);
}

/* primeira órbita — reaproveita o elemento mode-bg */
.order-bg,
.pickup-bg{
  position:absolute !important;
  inset:6% -4% 1% 3% !important;
  border-radius:50% !important;
  background:none !important;
  filter:none !important;
  opacity:1 !important;
  transform:rotate(-25deg) !important;
  z-index:0 !important;
  pointer-events:none;
}

.order-bg{
  border:1px solid rgba(218,168,119,.32) !important;
}

.pickup-bg{
  border:1px solid rgba(148,194,218,.34) !important;
}


/* =========================================================
   2. PAINEL PRINCIPAL — dimensões copiadas do Atendimento
   ========================================================= */

.order-app,
.pickup-app{
  left:0 !important;
  top:82px !important;
  width:108% !important;

  background:#fff !important;
  border-radius:14px !important;
  overflow:hidden !important;

  border:1px solid #dde6dd !important;

  box-shadow:
    0 25px 60px rgba(40,78,37,.145) !important;

  z-index:2;
}


/* =========================================================
   3. BARRA SUPERIOR — mesmo tamanho do verde
   ========================================================= */

.mode-window-top{
  height:auto !important;
  min-height:39px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  padding:13px 17px !important;

  background:#f2f5ef !important;
  border-bottom:1px solid #e3e9df !important;

  color:#869584 !important;
  font-size:8px !important;
}

.mode-window-top b{
  color:#6b786e !important;
  font-weight:650;
}


/* =========================================================
   4. CORPO — proporção do Atendimento
   ========================================================= */

.mode-app-body{
  min-height:267px !important;
  display:flex !important;
}


/* =========================================================
   5. SIDEBAR — EXATAMENTE 42px COMO O VERDE
   ========================================================= */

.order-sidebar,
.pickup-sidebar{
  width:42px !important;
  min-width:42px !important;
  flex:0 0 42px !important;

  padding:18px 0 0 !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;

  gap:22px !important;
}

/* mantém identidade de cada modo */
.order-sidebar{
  background:#a95320 !important;
}

.pickup-sidebar{
  background:#1d648e !important;
}

/* ícones exatamente na escala do Atendimento */
.order-sidebar .side-glyph,
.pickup-sidebar .side-glyph{
  width:16px !important;
  height:16px !important;

  display:grid !important;
  place-items:center !important;

  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;
  box-shadow:none !important;

  animation:none !important;
  transform:none !important;
}

.order-sidebar .side-glyph svg,
.pickup-sidebar .side-glyph svg{
  width:16px !important;
  height:16px !important;

  stroke-width:1.8 !important;
}

.order-sidebar .side-glyph{
  color:#f0c9aa !important;
}

.pickup-sidebar .side-glyph{
  color:#b9dbed !important;
}

.order-sidebar .side-glyph.active{
  color:#ffe3c8 !important;
}

.pickup-sidebar .side-glyph.active{
  color:#d9effb !important;
}


/* =========================================================
   6. CONTEÚDO — mesmos paddings e ritmo do Atendimento
   ========================================================= */

.mode-content{
  flex:1;
  min-width:0;
  padding:21px 17px !important;
}

.mode-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.mode-heading small{
  font-size:7px !important;
  letter-spacing:.15em !important;
}

.mode-heading h3{
  font-size:13px !important;
  margin:6px 0 19px !important;
  line-height:1.25;
}

.mode-heading>span{
  font-size:7px !important;
  padding:5px 8px !important;
}


/* =========================================================
   7. MÉTRICAS — copiadas do ritmo do verde
   ========================================================= */

.mode-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px !important;
}

.mode-metrics>div{
  padding:12px !important;
  border-radius:7px !important;
}

.mode-metrics small{
  display:block;
  font-size:8px !important;
}

.mode-metrics strong{
  display:block;
  font-size:25px !important;
  margin-top:5px !important;
  letter-spacing:-.05em;
}


/* =========================================================
   8. CONTEÚDO INFERIOR
   mesma distância das colunas do Atendimento
   ========================================================= */

.production-board{
  gap:17px !important;
  margin-top:17px !important;
}

.pickup-list{
  margin-top:17px !important;
  gap:8px !important;
}


/* =========================================================
   9. COMANDA / COMPROVANTE
   posição e dimensão equivalentes à senha verde
   ========================================================= */

.order-receipt,
.pickup-receipt{
  left:12px !important;
  bottom:0 !important;
  width:170px !important;

  z-index:7;

  box-shadow:
    0 15px 35px rgba(35,62,34,.15) !important;
}


/* =========================================================
   10. CARD DE CHAMADA
   mesma presença visual do verde
   ========================================================= */

.order-call,
.pickup-call{
  right:-12px !important;
  bottom:40px !important;

  min-width:160px !important;
  padding:20px !important;

  border-radius:14px !important;

  z-index:8;
}

.order-call strong,
.pickup-call strong{
  font-size:28px !important;
}


/* =========================================================
   11. BADGE DO MODO
   usa posição equivalente à floating-note verde
   ========================================================= */

.order-badge,
.pickup-badge{
  top:54px !important;
  right:10% !important;

  border-radius:30px !important;

  padding:11px 17px !important;

  background:#fff !important;

  font-size:10px !important;

  box-shadow:
    0 8px 20px rgba(41,71,32,.06) !important;

  z-index:6;
}


/* =========================================================
   12. RESPONSIVO — acompanha comportamento do verde
   ========================================================= */

@media(max-width:780px){

  .order-app,
  .pickup-app{
    width:100% !important;
    left:0 !important;
  }

  .order-sidebar,
  .pickup-sidebar{
    width:42px !important;
    min-width:42px !important;
    flex-basis:42px !important;

    gap:22px !important;
    padding-top:18px !important;
  }

  .mode-content{
    padding:17px !important;
  }

  .order-receipt,
  .pickup-receipt{
    left:10px !important;
    width:146px !important;
  }

  .order-call,
  .pickup-call{
    right:0 !important;
    bottom:10px !important;
  }
}