/* Estilização básica e tipografia */
html { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }
body {
    overflow-x: hidden;
    background-color: #111827; /* bg-dark-bg */
    color: #d1d5db; /* text-dark-text */
    min-height: 100vh; /* Garante que o body ocupe a altura total */
    margin: 0; /* Remove margem padrão do body */
}

/* Cabeçalho (usado apenas no fluxo Staff) */
.header-bar {
    background-color: #1f2937; /* bg-dark-card */
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #374151; /* dark-border */
    height: 56px; /* Define altura fixa para cálculo */
    box-sizing: border-box;
}

/* Container principal */
#mainContent {
    position: relative;
    overflow: hidden;
    /* Define altura para ocupar espaço restante APÓS o header (se visível) */
    height: calc(100vh - 56px);
}
/* Quando o login estiver ativo (sem header), mainContent ocupa tudo */
body:not(.logged-in) #mainContent {
    height: 100vh;
}


/* Cards de Conteúdo Genéricos */
.content-card {
    background-color: #1f2937; /* bg-dark-card */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    border-radius: 0.75rem;
    border: 1px solid #374151; /* dark-border */
}

/* Contêiner principal para transição de telas */
#appContainer {
    display: flex;
    width: 600vw; /* ATUALIZADO: Ajustado para 6 TELAS (incluindo KDS) */
    transition: transform 0.3s ease-out;
    height: 100%; /* Ocupa a altura do #mainContent */
}

/* Cada tela ocupa 100vw e a altura do container */
/* ATUALIZADO: Adicionado #kdsScreen */
#loginScreen, #panelScreen, #orderScreen, #paymentScreen, #managerScreen, #kdsScreen {
    width: 100vw;
    max-width: 100%;
    flex-shrink: 0;
    padding: 1rem; /* Padding interno */
    box-sizing: border-box;
    height: 100%; /* Ocupa a altura do #appContainer */
    overflow-y: auto; /* Adiciona rolagem SE o conteúdo interno exceder */
}

/* Ajuste específico para o painel de login centralizar o card */
#loginScreen {
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    padding: 2rem; /* Mais padding na tela de login */
}
/* Card de login */
#loginScreen > div {
   width: 100%;
   max-width: 450px; /* Limita largura máxima */
}


/* --- ESTILOS DARK MODE PARA ELEMENTOS COMUNS --- */

/* Inputs e Selects */
.input-pdv, select {
    background-color: #374151; /* bg-dark-input */
    border: 1px solid #4b5563; /* Cinza 600 */
    color: #d1d5db; /* text-dark-text */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 0.75rem;
    font-size: 1rem;
}
.input-pdv::placeholder, select option[disabled] {
    color: #6b7280; /* placeholder-dark-placeholder */
}
.input-pdv:focus, select:focus {
    outline: none;
    border-color: #ff7518; /* border-pumpkin */
    box-shadow: 0 0 0 2px rgba(255, 117, 24, 0.5); /* ring-pumpkin */
}

/* Botões de Categoria/Setor */
.category-btn, .sector-btn {
    border: 1px solid #4b5563; /* Cinza 600 */
    background-color: #374151; /* bg-dark-input */
    color: #d1d5db; /* text-dark-text */
    padding: 0.75rem 1rem; /* py-3 px-4 */
    border-radius: 9999px; /* rounded-full */
    font-size: 1rem; /* text-base */
    font-weight: 600; /* font-semibold */
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.category-btn:hover, .sector-btn:hover {
    background-color: #4b5563; /* Cinza 600 */
}
/* Estilo Ativo (Laranja) */
.category-btn.bg-pumpkin, .sector-btn.bg-pumpkin {
    background-color: #ff7518 !important; /* bg-pumpkin */
    border-color: #ff7518 !important; /* border-pumpkin */
    color: #ffffff !important; /* text-white */
}


/* Botões de Método de Pagamento */
.payment-method-btn {
    background-color: #374151; /* bg-dark-input */
    color: #d1d5db; /* text-dark-text */
    border: 1px solid #4b5563; /* Cinza 600 */
    padding: 0.75rem; /* py-3 */
    border-radius: 0.5rem; /* rounded-lg */
    font-weight: 700; /* font-bold */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    font-size: 1rem; /* text-base */
}
.payment-method-btn:hover {
     background-color: #4b5563; /* Cinza 600 */
}
.payment-method-btn.active {
    background-color: #ff7518 !important; /* bg-pumpkin */
    color: white !important;
    border-color: #ff7518 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Cards de Mesa */
.table-card-panel {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.75rem;
    position: relative;
    border: 1px solid #4b5563; /* Borda sutil padrão */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
/* Cores aplicadas via JS, mas definimos os estilos aqui para referência/fallback */
.table-card-panel.status-free { /* Mesa livre */
    background-color: #064e3b; color: #a7f3d0; border-color: #047857;
}
.table-card-panel.status-free:hover { background-color: #059669; }
.table-card-panel.status-occupied { /* Mesa ocupada */
     background-color: #4b0e0e; color: #fecaca; border-color: #991b1b;
}
 .table-card-panel.status-occupied:hover { background-color: #7f1d1d; }
 .table-card-panel.status-pending { /* Pedido pendente cliente */
     background-color: #312e81; color: #e0e7ff; border-color: #fbbf24; border-width: 2px;
 }
 .table-card-panel.status-pending:hover { background-color: #4338ca; }

.table-timer { color: #9ca3af; /* Cinza 400 */ font-size: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.25rem;}
.table-timer i { font-size: 0.75rem; }

/* Botão de Agrupar Mesas (NOVO: Top-left) */
.merge-icon-btn { 
    position: absolute; 
    top: 0.5rem; 
    left: 0.5rem; 
    color: #ff7518; /* pumpkin */ 
    font-size: 1.25rem; 
    z-index: 10; 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 0; 
    line-height: 1;
}
.merge-icon-btn:hover { color: #e46815; } /* pumpkin-dark */


/* Ícone de Alerta (Permanece Top-right) */
.attention-icon { 
    position: absolute; 
    top: 0.5rem; 
    right: 0.5rem; 
    font-size: 1.25rem; 
    z-index: 10; 
    color: #fbbf24; /* yellow-400 - Espera/Pendente */ 
}


/* Botão de Status KDS (AJUSTADO: Removido 'position: absolute' e 'top/left') */
.kds-status-icon-btn { 
    color: #a5b4fc; /* indigo-300 */ 
    font-size: 1rem; /* Tamanho ajustado para o footer */
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 0; 
    line-height: 1;
    margin-right: 0.5rem; /* Margem para separar do timer */
}
.kds-status-icon-btn:hover { color: #c7d2fe; } /* indigo-200 */


/* Itens na lista de pedido (Painel 2) */
#openOrderList > div { background-color: #374151; border: 1px solid #4b5563; }
#openOrderList span.font-semibold { color: #e5e7eb; }
#openOrderList span.cursor-pointer { color: #a5b4fc; } /* indigo-300 para obs */
#openOrderList span.cursor-pointer .text-yellow-400 { color: #facc15; } /* Amarelo para obs 'Espera' */
#openOrderList span.font-bold { color: #ff7518; } /* pumpkin para preço */


/* Itens na lista de revisão (Painel 3) */
#reviewItemsList .border-b { border-bottom-color: #374151; }
#reviewItemsList > div > div:hover { background-color: #374151; } /* Fundo sutil no hover */
#reviewItemsList span.font-semibold { color: #e5e7eb; }
#reviewItemsList span.text-dark-placeholder { color: #9ca3af; }
#reviewItemsList span.font-bold { color: #ff7518; }
#reviewItemsList input[type="checkbox"] { background-color: #4b5563; border-color: #6b7280; }
#reviewItemsList input[type="checkbox"]:checked { background-color: #ff7518; border-color: #ff7518; }

/* Lista de Pagamentos Registrados */
#paymentSummaryList { background-color: #111827; border-color: #374151; }
#paymentSummaryList > div { border-bottom-color: #374151; }
#paymentSummaryList span.text-gray-400 { color: #9ca3af; }
#paymentSummaryList span.font-semibold { color: #e5e7eb; }


/* Cardápio (STAFF PANEL) */
.product-card { 
    background-color: #1f2937; 
    border-color: #374151; 
}

.product-card h4 { color: #e5e7eb; }
.product-card p { color: #9ca3af; }
.product-card span.font-bold { color: #ff7518; }


/* Switch Espera */
.switch-obs { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch-obs input { opacity: 0; width: 0; height: 0; }
.slider-obs { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4b5563; transition: .4s; border-radius: 34px; }
.slider-obs:before { background-color: white; height: 20px; width: 20px; left: 4px; bottom: 4px; border-radius: 50%; position: absolute; content: ""; transition: .4s;}
input:checked + .slider-obs { background-color: #fbbf24; }
input:checked + .slider-obs:before { transform: translateX(22px); }


/* Painel Gerencial */
#managerScreen { background-color: #111827; /* Fundo ainda mais escuro */ }
.manager-card { background-color: #1f2937; border-color: #ff7518; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
.manager-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(255, 117, 24, 0.3), 0 4px 6px -4px rgba(255, 117, 24, 0.2); }
.manager-card h4 { color: #e5e7eb; }
.manager-card p { color: #9ca3af; }
.manager-card i { color: #ff7518; }
/* Cores específicas para ícones de cards gerenciais */
.manager-card .text-green-400 { color: #34d399; }
.manager-card .text-indigo-400 { color: #818cf8; }
.manager-card .text-red-400 { color: #f87171; }
.manager-card .text-gray-400 { color: #9ca3af; }


/* Animação de Loading */
@keyframes spin { to { transform: rotate(360deg); } }
.loading-spinner { border: 4px solid rgba(255, 255, 255, 0.1); border-left-color: #ff7518; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }


/* Correção para o Card do Cliente */
#menuItemsGridClient .product-card {
    overflow: visible;
}

/* Ajusta o espaçamento do grid do cliente */
#menuItemsGridClient {
    gap: 3px;
}

/* Estilos para as Abas de CRM */
.crm-tab-btn {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #9ca3af; /* gray-400 */
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.crm-tab-btn:hover {
    color: #d1d5db; /* gray-300 */
}
.crm-tab-btn.active {
    color: #ff7518; /* pumpkin */
    border-bottom-color: #ff7518;
}
.crm-tab-content {
    display: none;
    padding: 1rem;
    background-color: #111827; /* dark-bg */
    border-radius: 0 0 0.5rem 0.5rem;
}
.crm-tab-content.active {
    display: block;
}
/* Esconde a barra de rolagem das abas */
.crm-tabs-container::-webkit-scrollbar {
    display: none;
}
.crm-tabs-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Estilos para Abas do Modal de Login */
.client-tab-btn {
    border-bottom: 2px solid transparent;
    color: #6b7280; /* dark-placeholder */
    transition: all 0.2s ease;
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
}

.client-tab-btn.active {
    color: #ff7518; /* pumpkin */
    border-bottom-color: #ff7518;
}

.client-tab-btn:not(.active):hover {
    color: #d1d5db; /* dark-text */
    border-bottom-color: #374151; /* dark-border */
}

.client-tab-content {
    display: none; /* Escondido por padrão */
}

.client-tab-content.active {
    display: block; /* Mostrado quando ativo */
}

/* Botões Genéricos */
.btn-pumpkin {
    background-color: #ff7518; /* bg-pumpkin */
    color: white;
    font-weight: 600; /* font-semibold */
    padding: 0.75rem 1.25rem; /* py-3 px-5 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 0.2s ease;
}
.btn-pumpkin:hover {
    background-color: #e46815; /* pumpkin-dark */
}
.btn-pumpkin:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    background-color: #374151; /* dark-input */
    color: #d1d5db; /* dark-text */
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
    border: 1px solid #4b5563;
}
.btn-secondary:hover {
    background-color: #4b5563;
}

.btn-green {
    background-color: #10B981; /* green-500 */
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}
.btn-green:hover {
    background-color: #059669; /* green-600 */
}

/* ========================================= */
/* ESTILOS KDS (COZINHA)            */
/* ========================================= */

#kdsScreen {
    /* Fundo ligeiramente diferente para destacar ambiente de cozinha (mais escuro/slate) */
    background-color: #0f172a; /* Slate-900 */
}

/* Efeito de hover suave nos cards */
.kds-card {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.kds-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* --- Refinamento Visual dos Modais (Geral + Cliente) --- */

/* Lista de TODOS os modais do sistema */
#managerModal, 
#res_formModal, 
#res_mapModal, 
#crm_formModal, 
#vouch_formModal,
/* Modais do Cliente Adicionados Abaixo */
#associationModal,
#customerRegistrationModal,
#clientObsModal,
#productInfoModal,
#customAlertModal {
    background-color: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease-in-out;
}

/* Animação do "Cartão" dentro do modal */
#managerModal > div,
#res_formModal > div,
#crm_formModal > div,
#vouch_formModal > div,
#associationModal > div,
#customerRegistrationModal > div,
#clientObsModal > div,
#productInfoModal > div,
#customAlertModal > div {
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Efeito Skeleton (Carregamento Elegante) --- */
.skeleton {
    background: #1f2937;
    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 0.5rem;
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}