/* ==========================================
   VARIÁVEIS
========================================== */

:root{
--orange-light:#ff7a1a;
--dark-red:#3d0505;
--red-light:#7a1515;
--gold:#ffb81c;

--bg-dark:#050505;

--card-gradient:linear-gradient(145deg,#111111,#0a0a0a);
}


/* ==========================================
   BODY
========================================== */

body{
font-family:'Outfit',sans-serif;
background-color:var(--bg-dark);
color:#eeeeee;
margin:0;
overflow-x:hidden;
}


/* FUNDO SUAVE */

body::before{
content:'';
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:radial-gradient(
circle at top right,
rgba(122,21,21,0.15) 0%,
transparent 50%
);

pointer-events:none;
z-index:-1;
}


/* ==========================================
   CONTAINERS
========================================== */

.bg-card{
background:var(--card-gradient);
border-radius:16px;
}


/* ==========================================
   LISTAS BANCO
========================================== */

.item-lista-db{

background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.05);

padding:10px;

border-radius:10px;

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

transition:all .2s ease;

}

.item-lista-db:hover{

background:rgba(255,255,255,0.06);
border-color:rgba(255,184,28,0.2);

}


/* ==========================================
   INPUTS
========================================== */

.input-dark{

background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.1);

padding:10px;

border-radius:8px;

color:#fff;

outline:none;

transition:.3s;

}

.input-dark:focus{

border-color:var(--gold);

background:rgba(255,255,255,0.05);

box-shadow:0 0 15px rgba(255,184,28,0.15);

}


/* SELECT */

select.input-dark{
appearance:none;
}


/* TEXTAREA */

textarea.input-dark{
min-height:80px;
resize:vertical;
}


/* ==========================================
   BOTÃO PRINCIPAL
========================================== */

.btn-principal{

background:linear-gradient(135deg,var(--gold),#f59e0b);

color:var(--dark-red);

border:1px solid rgba(255,255,255,0.4);

padding:10px;

font-weight:900;

border-radius:10px;

cursor:pointer;

box-shadow:0 8px 25px rgba(245,158,11,0.3);

transition:.3s;

}

.btn-principal:hover{

transform:translateY(-2px);

box-shadow:0 12px 30px rgba(245,158,11,0.4);

}

.btn-principal:active{
transform:scale(.97);
}


/* ==========================================
   MENU BOTÕES
========================================== */

.nav-btn{

padding:8px 16px;

border-radius:10px;

background:rgba(255,255,255,0.05);

border:1px solid rgba(255,255,255,0.1);

font-weight:700;

cursor:pointer;

transition:.2s;

}

.nav-btn:hover{
background:rgba(255,255,255,0.1);
}


.nav-btn.active{

background:rgba(255,184,28,0.1);

color:var(--gold);

border-color:rgba(255,184,28,0.3);

}


/* ==========================================
   MONITOR DE PEDIDOS
========================================== */

.card-pedido-kds{

background:#0c0c0c;

border-radius:12px;

border:1px solid rgba(255,255,255,0.05);

padding:10px;

cursor:pointer;

transition:.2s;

}

.card-pedido-kds:hover{
transform:scale(1.03);
}


/* ALERTA ATRASO */

.atraso-critico{

border-color:#ef4444!important;

animation:pulse-red 1.5s infinite;

}

@keyframes pulse-red{

0%{box-shadow:0 0 0 0 rgba(239,68,68,0.4);}

70%{box-shadow:0 0 0 10px rgba(239,68,68,0);}

100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}

}


/* ==========================================
   TAGS CARDÁPIO
========================================== */

.tag-categoria{

background:rgba(255,184,28,0.1);

color:var(--gold);

padding:2px 8px;

border-radius:6px;

font-size:9px;

font-weight:900;

text-transform:uppercase;

}


/* ==========================================
   BOTÕES PAGAMENTO MODAL
========================================== */

.btn-pagamento{

border:2px solid rgba(255,255,255,0.05);

padding:8px;

border-radius:10px;

color:#888;

cursor:pointer;

transition:.2s;

}

.btn-pagamento:hover{
background:rgba(255,255,255,0.05);
}

.btn-pagamento.ativo{

border-color:var(--gold);

background:rgba(255,184,28,0.1);

color:var(--gold);

box-shadow:0 0 15px rgba(255,184,28,0.1);

}


/* ==========================================
   SCROLL
========================================== */

.no-scrollbar::-webkit-scrollbar{
display:none;
}

.no-scrollbar{
-ms-overflow-style:none;
scrollbar-width:none;
}


/* ==========================================
   ANIMAÇÕES
========================================== */

.animate-fade-in{
animation:fadeIn .4s ease-out forwards;
}

@keyframes fadeIn{

from{
opacity:0;
transform:translateY(10px);
}

to{
opacity:1;
transform:translateY(0);
}

}


/* ==========================================
   GRID PEDIDOS (CORRIGIDO PARA PADRONIZAÇÃO)
========================================== */

#grade-pedidos-centro {
    display: grid;
    /* Aumentamos o tamanho mínimo para o card de delivery respirar */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 1.5rem;
    align-items: start;
}

/* Força todos os cards (Delivery e Mesa) a terem o mesmo comportamento visual */
#grade-pedidos-centro > div {
    min-height: 180px; /* Altura fixa para alinhar a grade */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Garante que preencham o espaço do grid */
}

/* Ajuste específico para os cards de Mesa Agrupada */
.card-mesa-agrupada {
    height: 180px !important;
}

/* ==========================================
   CONTROLE DE ROLAGEM DOS FORMULÁRIOS
========================================== */

#campos-dinamicos {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

#lista-geral {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

#painel-pedidos,
#painel-formulario,
#painel-lista,
#coluna-centro,
#layout-admin {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

@media (max-width: 900px) {
    #campos-dinamicos,
    #lista-geral,
    #painel-pedidos,
    #painel-formulario,
    #painel-lista,
    #coluna-centro,
    #layout-admin {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Efeito visual de botão selecionado */
.btn-pagamento.ativo {
    background-color: #ffb81c !important;
    color: #3d0505 !important;
    font-weight: 900;
    border-color: #ffb81c;
}


/* ==========================================
   RESPONSIVO
========================================== */

@media(max-width:900px){

main{
grid-template-columns:1fr;
}

#grade-pedidos-centro{
grid-template-columns:repeat(2,1fr);
}

}

/* Atualize ou adicione estas regras */
#layout-admin {
    display: flex;
    flex-direction: column;
    width: 100%; /* Garante que o layout use a largura toda */
}

#grade-pedidos-centro {
    display: grid !important;
    /* Força 3 colunas no PC agora que tem espaço */
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 16px !important;
    width: 100% !important;
}

.pedido-card {
    min-width: 0 !important; /* Permite que o card encolha para caber na grade */
    height: 145px !important; /* Altura fixa para manter o alinhamento */
}

/* Ajuste para tablets */
@media (max-width: 1200px) {
    #grade-pedidos-centro {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Ajuste para celulares */
@media (max-width: 800px) {
    #grade-pedidos-centro {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================
   MODAL PRODUTO - NOVO VISUAL
========================================== */

#modal-produto .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#modal-produto #p-modal-desc.expanded {
    display: block;
    overflow: visible;
}

#modal-produto #p-modal-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#modal-produto #lista-ingredientes label,
#modal-produto #lista-adicionais label {
    display: block;
    width: 100%;
}

#modal-produto textarea {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,184,28,0.35) transparent;
}

#modal-produto textarea::-webkit-scrollbar {
    width: 6px;
}

#modal-produto textarea::-webkit-scrollbar-thumb {
    background: rgba(255,184,28,0.35);
    border-radius: 999px;
}

#modal-produto textarea::-webkit-scrollbar-track {
    background: transparent;
}

#modal-produto .btn-elegante {
    background: linear-gradient(135deg, var(--gold), #f59e0b);
    color: var(--dark-red);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 10px 30px rgba(245,158,11,0.22);
    transition: all .25s ease;
}

#modal-produto .btn-elegante:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(245,158,11,0.28);
}

#modal-produto .btn-elegante:active {
    transform: scale(.98);
}

#modal-produto .opcao-card {
    transition: all .2s ease;
}

#modal-produto .opcao-card:hover {
    transform: translateY(-1px);
}

#modal-produto .secao-card {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 18px;
}

@media (max-width: 768px) {
    #modal-produto .mobile-sheet {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    #modal-produto #p-modal-nome {
        font-size: 1rem;
        line-height: 1.1;
    }

    #modal-produto #p-modal-desc {
        font-size: 13px;
    }

    #modal-produto #lista-ingredientes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* Correção visual dos campos select no tema escuro */
select {
  background-color: #0b0b0b;
  color: #ffffff;
}
select option {
  background-color: #111111;
  color: #ffffff;
}
select option:checked,
select option:hover {
  background-color: #333333;
  color: #ffffff;
}

/* NovixMenu: painel administrativo responsivo */
#body-admin, #layout-admin, #coluna-centro, #painel-formulario, #campos-dinamicos { min-width: 0; }
#sidebar { overscroll-behavior: contain; }
#campos-dinamicos input, #campos-dinamicos select, #campos-dinamicos textarea { max-width: 100%; min-width: 0; font-size: 16px; }
#campos-dinamicos button, #sidebar button { touch-action: manipulation; }
@media(max-width: 639px) {
  #painel-formulario .grid.grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
  #painel-formulario .grid.grid-cols-2 > * { min-width: 0; }
  #campos-dinamicos .flex.overflow-x-auto > button { flex: 0 0 auto; }
  #lista-cardapio-admin > *, #lista-geral > * { min-width: 0; max-width: 100%; }
  #painel-formulario, #painel-lista { overflow-wrap: anywhere; }
  #sidebar nav { overflow-y: auto; min-height: 0; }
  #modal-pedido > div { max-width: 100%; border-radius: 20px; }
}

/* NovixMenu mobile visual V2: preserve desktop layout */
@media(max-width:639px){
 #campos-dinamicos,#campos-dinamicos > div,#qr-mesa-resultado{min-width:0;max-width:100%;}
 #campos-dinamicos .tracking-widest{letter-spacing:.045em;}
 #qr-code-preview canvas,#qr-code-preview img{max-width:100%;height:auto;}
 .dia-inicio,.dia-fim{font-variant-numeric:tabular-nums;}
}

/* V6: mobile CRM controls and comfortable touch targets */
@media (max-width: 639px) {
  html, body { max-width: 100%; overflow-x: clip; }
  #campos-dinamicos { overflow-x: clip; }
  #novix-crm { width: 100%; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  #novix-crm .crm-tabs { width: 100%; max-width: 100%; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  #novix-crm .crm-tabs > button { min-height: 46px; scroll-snap-align: start; }
  #novix-crm button, #novix-crm .crm-person a { min-height: 44px; touch-action: manipulation; }
  #novix-crm .crm-person { align-items: flex-start; }
  #novix-crm .crm-person > div { min-width: 0; flex: 1 1 170px; }
  #novix-crm input, #novix-crm select { font-size: 16px; }
}