/* =============================================================================
   Padrão visual da equipe — R2 "Laranja em Destaque" (aprovado em 04/10/2026)
   =============================================================================
   Carregado por TODAS as telas do admin (cada <body> tem "adm adm-<tela>") —
   NUNCA pelo PDV (pdv.php), que fica como está.

   O cabeçalho e o menu têm o estilo DENTRO deles (includes/topo_admin.php e
   includes/menu_admin.php) para não depender do cache deste arquivo.

   Como funciona:
   1) As telas já usam as mesmas variáveis (--azul-primario, --azul-escuro,
      --fundo, --borda...). Redefinidas no body.adm, o azul antigo vira o
      laranja/marrom da marca em todas as telas de uma vez.
   2) Os componentes repetidos (título da tela, quadros, botões, campos, abas,
      janelas, tabelas) ganham o MESMO tamanho, letra e canto.

   Tokens:
     laranja #FF6600 (escuro #e65c00, texto #c2410c) · marrom #3b2416
     fundo #F2EEEA · quadro #fff · linha #e8e1d9 · faixa de título #FAF8F6
     texto #2e1d12 · suave #7a6758 · campo: borda #dacfc3
     título da tela: Fraunces 800 · corpo: Nunito · números: JetBrains Mono
     cantos: quadro 8px, botão/campo 6px
   ============================================================================= */

body.adm {
    --azul-escuro: #2e1d12;
    --azul-primario: #FF6600;
    --azul-claro: #FFF1E6;
    --barra: #FF6600;
    --laranja: #FF6600;
    --fundo: #F2EEEA;
    --branco: #ffffff;
    --cinza-texto: #7a6758;
    --cinza-claro: #a8968a;
    --cinza: #2e1d12;
    --borda: #e8e1d9;
    --grade: #f1ece6;
    --verde: #2f7d3b;
    --vermelho: #dc2626;

    --p-marrom: #3b2416;
    --p-laranja: #FF6600;
    --p-laranja-esc: #e65c00;
    --p-laranja-txt: #c2410c;
    --p-laranja-claro: #FFF1E6;
    --p-texto: #2e1d12;
    --p-suave: #7a6758;
    --p-linha: #e8e1d9;
    --p-linha-fina: #f1ece6;
    --p-campo: #dacfc3;
    --p-faixa: #FAF8F6;
    --p-fundo: #F2EEEA;
    --p-titulo: 'Fraunces', Georgia, serif;
    --p-numero: 'JetBrains Mono', ui-monospace, Consolas, monospace;

    background: var(--p-fundo) !important;
    color: var(--p-texto);
    font-family: 'Nunito', system-ui, sans-serif;
}

/* ------------------------------------------------------------- Moldura da tela (IGUAL em todas)
   Mesma largura máxima, mesmas margens e mesmo espaço até o título: o título
   começa sempre no mesmo lugar, em qualquer tela. */
/* reserva o espaço da barra de rolagem: tela curta e tela longa ficam na mesma posição */
html:has(body.adm) { scrollbar-gutter: stable; }
body.adm .container,
body.adm-dashboard .rs {
    max-width: 1280px !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 24px 24px 48px !important;
    box-sizing: border-box;
}

/* ------------------------------------------------------------- Título da tela */
body.adm .page-header { align-items: center; margin-bottom: 20px; }
body.adm .page-title h1,
body.adm .page-header h1 {
    font-family: var(--p-titulo);
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: -.01em;
    line-height: 1.15;
    color: var(--p-texto);
}
body.adm .page-title p,
body.adm .page-header p { color: var(--p-suave); font-weight: 700; font-size: .9rem; }
/* Ícone ao lado do título: só algumas telas tinham — sai de todas (padrão do modelo) */
body.adm .page-title .icon-box { display: none !important; }
body.adm .page-title { gap: 0; }
/* Dashboard: a saudação é o título da tela, mesmo tamanho dos outros títulos */
body.adm-dashboard .rs-ola h1 { font-family: var(--p-titulo); font-weight: 800; font-size: 1.7rem; letter-spacing: -.01em; line-height: 1.15; }
body.adm-dashboard .rs-ola p { font-size: .9rem; }
body.adm-dashboard .rs-ola { margin-bottom: 6px; }
/* Dashboard na largura padrão: atalhos lado a lado */
body.adm-dashboard .rs-acoes { display: flex; flex-wrap: wrap; }
body.adm-dashboard .rs-acoes > * { flex: 1 1 200px; }
body.adm-dashboard .rs-acoes > .largo { flex-basis: 100%; }
body.adm h2, body.adm h3 { color: var(--p-texto); }

/* ------------------------------------------------------------- Quadros */
body.adm .card,
body.adm .painel,
body.adm .toolbar,
body.adm .table-container,
body.adm .card-form,
body.adm .stat-card,
body.adm .grafico-container {
    background: #fff;
    border: 1px solid var(--p-linha);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(46, 29, 18, .04);
}

/* Título de quadro: letras pequenas em maiúsculas, como nos quadros do modelo */
body.adm .card-title, body.adm .panel-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--p-suave);
    border-bottom-color: var(--p-linha);
}
body.adm .card > h2, body.adm .painel > h2 {
    font-family: var(--p-titulo);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.005em;
}

/* ------------------------------------------------------------- Botões (lisos, canto 6) */
body.adm .btn-primary,
body.adm .btn-alerta-ok,
body.adm .btn-panel.primary {
    background: var(--p-laranja);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-weight: 800;
    box-shadow: none;
}
body.adm .btn-primary:hover,
body.adm .btn-alerta-ok:hover,
body.adm .btn-panel.primary:hover {
    background: var(--p-laranja-esc);
    transform: none;
    box-shadow: none;
}
body.adm .btn-voltar,
body.adm .btn-sec,
body.adm .btn-alerta-cancelar,
body.adm .btn-panel.secondary {
    background: #fff;
    color: var(--p-texto);
    border: 1px solid var(--p-campo);
    border-radius: 6px;
}
body.adm .btn-voltar:hover,
body.adm .btn-sec:hover,
body.adm .btn-alerta-cancelar:hover,
body.adm .btn-panel.secondary:hover { background: var(--p-faixa); color: var(--p-texto); border-color: #c9b9a8; }
body.adm .btn-excluir, body.adm .btn-danger, body.adm .btn-reativar { border-radius: 6px; }

/* ------------------------------------------------------------- Campos */
body.adm .form-group label { color: var(--p-suave); font-weight: 800; }
body.adm .form-group input,
body.adm .form-group select,
body.adm .form-group textarea,
body.adm .input-box input,
body.adm .input-box select,
body.adm .input-filtro,
body.adm .filtros-catalogo input,
body.adm .filtros-catalogo select {
    border-color: var(--p-campo);
    border-radius: 6px;
    color: var(--p-texto);
}
body.adm input:focus,
body.adm select:focus,
body.adm textarea:focus {
    border-color: var(--p-laranja) !important;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, .15) !important;
    outline: 0;
}
body.adm input[type="checkbox"], body.adm input[type="radio"] { accent-color: var(--p-laranja); }

/* Botão "Escolher arquivo" (fotos e vídeos) */
body.adm input[type="file"] { font: 700 .88rem 'Nunito', sans-serif; color: var(--p-suave); max-width: 100%; }
body.adm input[type="file"]::file-selector-button {
    font: 800 .86rem 'Nunito', sans-serif;
    color: var(--p-texto);
    background: #fff;
    border: 1px solid var(--p-campo);
    border-radius: 6px;
    padding: 8px 14px;
    margin-right: 10px;
    cursor: pointer;
}
body.adm input[type="file"]::file-selector-button:hover { background: var(--p-faixa); }

/* ------------------------------------------------------------- Abas (atual em marrom) */
body.adm .tab-btn { border-radius: 6px; font-weight: 800; }
body.adm .tab-btn.active,
body.adm .tab-btn.ativo,
body.adm .tab-btn.ativa {
    background: var(--p-marrom) !important;
    color: #fff !important;
    border-color: var(--p-marrom) !important;
    box-shadow: none;
}

/* ------------------------------------------------------------- Tabelas */
body.adm .table-container th,
body.adm table thead th {
    color: var(--p-suave);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 900;
    background: var(--p-faixa);
    border-bottom-color: var(--p-linha);
}
body.adm .table-container td { border-bottom-color: var(--p-linha-fina); }
body.adm .table-container tbody tr:hover > td { background: #FCFAF8; }
body.adm .cal-day-name { background: var(--p-faixa); }

/* ------------------------------------------------------------- Janelas (modais) */
body.adm .modal-content,
body.adm .modal-alerta-box {
    border-radius: 8px;
    border: 1px solid var(--p-linha);
    box-shadow: 0 24px 60px rgba(46, 29, 18, .25);
    overflow: hidden;
}
body.adm .modal-header:has(.btn-fechar) { background: var(--p-faixa); border-bottom: 1px solid var(--p-linha); }
body.adm .modal-header:has(.btn-fechar) h2,
body.adm .modal-header:has(.btn-fechar) h3 {
    color: var(--p-texto) !important;
    font-family: var(--p-titulo);
    font-weight: 800 !important;
    font-size: 1.2rem !important;
}
body.adm .modal-header .btn-fechar { border-radius: 6px; }
body.adm .modal-alerta-titulo { font-family: var(--p-titulo); font-weight: 800; }
body.adm .modal-overlay { background: rgba(46, 29, 18, .5); }

/* ------------------------------------------------------------- Mensagens */
body.adm .alerta, body.adm .aviso { border-radius: 6px; }
body.adm-encomendas .quadro-prazo { border-radius: 8px; border-left: 4px solid #f59e0b; }

/* ------------------------------------------------------------- Detalhes por tela */
body.adm-pagamentos .metodo-icone { background: var(--p-faixa); box-shadow: inset 0 0 0 1px var(--p-linha); border-radius: 6px; }
body.adm-produtos .badge-categoria { background: var(--p-laranja-claro); color: var(--p-laranja-txt); border-radius: 4px; }
body.adm-produtos .filtros-catalogo input, body.adm-produtos .filtros-catalogo select { background-color: #fff; }
body.adm-previsao .chip { background: #F1ECE6; color: var(--p-texto); }

/* Dashboard: quadros com o mesmo canto e os 3 números numa faixa só (como no modelo) */
body.adm-dashboard .rs-hero { border-radius: 8px; }
body.adm-dashboard .rs-card,
body.adm-dashboard .rs-insight { border-radius: 8px; border-color: var(--p-linha); }
body.adm-dashboard .rs-periodos button,
body.adm-dashboard .rs-periodos label { border-radius: 6px; }
body.adm-dashboard .rs-periodos .on { background: var(--p-marrom); border-color: var(--p-marrom); }
body.adm-dashboard .rs-acoes a,
body.adm-dashboard .rs-acoes button { border-radius: 6px; }
body.adm-dashboard .rs-numeros { gap: 0; background: #fff; border: 1px solid var(--p-linha); border-radius: 8px; overflow: hidden; }
body.adm-dashboard .rs-numeros .rs-card { border: 0; border-radius: 0; border-right: 1px solid var(--p-linha); text-align: left; padding: 12px 16px; }
body.adm-dashboard .rs-numeros .rs-card:last-child { border-right: 0; }
body.adm-dashboard .rs-numeros small { text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; font-weight: 900; }
body.adm-dashboard .rs-card h3 { letter-spacing: .12em; font-size: .74rem; }

/* Estatísticas: os 4 números numa faixa só, o primeiro em laranja (como no modelo) */
body.adm-estatisticas .kpis { gap: 0; background: #fff; border: 1px solid var(--p-linha); border-radius: 8px; overflow: hidden; }
body.adm-estatisticas .kpi { border: 0; border-radius: 0; border-right: 1px solid var(--p-linha); padding: 14px 18px; }
body.adm-estatisticas .kpi:last-child { border-right: 0; }
body.adm-estatisticas .kpi span { font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
body.adm-estatisticas .kpi b { font-size: 1.45rem; }
body.adm-estatisticas .kpi:first-child { background: var(--p-laranja); }
body.adm-estatisticas .kpi:first-child span, body.adm-estatisticas .kpi:first-child small { color: #ffe2cc; }
body.adm-estatisticas .kpi:first-child b { color: #fff; }
@media (max-width: 760px) {
    body.adm-estatisticas .kpis { grid-template-columns: 1fr 1fr; }
    body.adm-estatisticas .kpi { border-bottom: 1px solid var(--p-linha); }
    body.adm-estatisticas .kpi:nth-child(2n) { border-right: 0; }
}

/* Números com cara de painel (alinhados, mesma largura) */
body.adm-dashboard .rs-numeros b,
body.adm-estatisticas .kpi b,
body.adm .stat-valor { font-family: var(--p-numero); font-weight: 700; letter-spacing: -.01em; }
body.adm td, body.adm .rs-linha { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- Login */
body.adm-login, body.adm-login * { font-family: 'Nunito', system-ui, sans-serif; }
body.adm-login .login-box {
    border-radius: 8px;
    border: 1px solid var(--p-linha);
    border-top: 4px solid var(--p-laranja);
    box-shadow: 0 10px 30px rgba(46, 29, 18, .08);
    padding: 32px 30px;
}
body.adm-login .login-box h2 { font-family: var(--p-titulo); font-weight: 800; font-size: 1.5rem; color: var(--p-texto); }
body.adm-login .form-group label { color: var(--p-suave); font-weight: 800; font-size: .9rem; }
body.adm-login .form-group input { border: 1px solid var(--p-campo); border-radius: 6px; }
body.adm-login .btn-submit { border-radius: 6px; font-weight: 800; }
body.adm-login .btn-submit:hover { background: var(--p-laranja-esc); }
body.adm-login .erro { border-radius: 6px; }

/* ------------------------------------------------------------- Celular */
@media (max-width: 760px) {
    body.adm .container, body.adm-dashboard .rs { padding: 16px 14px 40px !important; }
    body.adm .page-title h1, body.adm .page-header h1, body.adm-dashboard .rs-ola h1 { font-size: 1.45rem; }
    body.adm-dashboard .rs-acoes > * { flex-basis: 40%; }
    /* Encomendas e Agenda: no celular a tabela vira cartões — sem a moldura em volta */
    body.adm-encomendas .table-container,
    body.adm-agenda .table-container { background: transparent; border: 0; box-shadow: none; }
    body.adm-encomendas #tabela-pedidos tr.tr-pedido { border-color: var(--p-linha); border-radius: 8px; box-shadow: 0 1px 2px rgba(46, 29, 18, .04); }
    body.adm-encomendas #tabela-pedidos tr.tr-pedido > td:nth-child(3) { background: var(--p-faixa); border-radius: 6px; }
    body.adm-dashboard .rs-numeros .rs-card { padding: 10px 10px; }
}