/* ============================================================
   Tema RTKSoft Food — carregado só quando o painel abre como Food
   (body.tema-food). Marinho no menu e no destaque, azul da marca na
   estrutura, rosa do logo nas ações. Referência: mockup aprovado
   "Painel RTKSoft Food — Visão geral" (Plus Jakarta Sans).
   ============================================================ */
body.tema-food {
    --food-marinho: #0E1B2E;
    --food-marinho-2: #16263D;
    --food-marinho-borda: #22344F;
    --food-azul: #2E9BE8;
    --food-azul-escuro: #1F86D6;
    --food-azul-texto: #1F7FC4;
    --food-azul-claro: #A9D4F5;
    --food-azul-fundo: #EAF4FD;
    --food-rosa: #D23A56;
    --food-rosa-escuro: #B82E48;
    --food-rosa-claro: #E85068;
    --food-rosa-texto: #B4233E;
    --food-grafite: #0E1B2E;
    --food-texto-2: #5B6B80;
    --food-texto-menu: #C9D6E5;
    --food-texto-menu-2: #9FB2C8;
    --food-linha: #DCE4EE;
    --food-linha-2: #EEF2F7;
    --food-fundo: #F3F6FA;
    --food-verde: #13803F;
    --food-verde-status: #34C17B;
    --food-laranja: #F2A33A;
    --food-fonte: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --food-sombra-card: 0 1px 2px rgba(14,27,46,.06);
    --food-sombra-hover: 0 14px 30px -14px rgba(14,27,46,.24);
    --food-ease: cubic-bezier(.22,1,.36,1);

    /* redefine o tema base (app.css) */
    --primary: #2E9BE8;
    --primary-dark: #1F86D6;
    --primary-light: #4AABEF;
    --primary-alpha10: rgba(46,155,232,.10);
    --primary-alpha20: rgba(46,155,232,.20);
    --primary-alpha30: rgba(46,155,232,.30);
    --chart-bar: #2E9BE8;
    --chart-bar-dim: #d6ebfb;
    --chart-line: #1F86D6;
    --shadow-blue: 0 6px 20px rgba(46,155,232,.25);
    --radius-card: 16px;
    --sidebar-width: 264px;

    background-color: var(--food-fundo) !important;
    color: var(--food-grafite);
}
body.tema-food h1, body.tema-food h2, body.tema-food h3,
body.tema-food h4, body.tema-food h5, body.tema-food h6 { font-weight: 800; color: var(--food-grafite); }
body.tema-food a { color: var(--food-azul-texto); }
body.tema-food a:hover { color: #165E92; }

/* Plus Jakarta Sans no painel (o login mantém a fonte dele). O app.css fixa Inter em alguns componentes. */
body.tema-food #appSidebar, body.tema-food #mainContent, body.tema-food .sidebar-flyout,
body.tema-food .sidebar-tooltip, body.tema-food .page-loader,
body.tema-food #mainContent .btn, body.tema-food #mainContent .card-body,
body.tema-food #mainContent .form-control, body.tema-food #mainContent .form-select { font-family: var(--food-fonte); }

/* app.css pinta todo <svg> com currentColor; os ícones de traço do tema precisam de fill none */
body.tema-food .food-marca svg, body.tema-food .food-loader svg, body.tema-food .food-btn-rosa svg { fill: none; }

/* foco visível pelo teclado */
body.tema-food #appSidebar a:focus-visible, body.tema-food #appSidebar button:focus-visible,
body.tema-food .sidebar-flyout a:focus-visible,
body.tema-food #mainContent a:focus-visible, body.tema-food #mainContent button:focus-visible,
body.tema-food .page-loader button:focus-visible {
    outline: 2px solid #8FD3FF;
    outline-offset: 2px;
    box-shadow: none;
}
body.tema-food #mainContent a:focus-visible, body.tema-food #mainContent button:focus-visible { outline-color: var(--food-azul); }

/* ---------- botões: ação em rosa ---------- */
body.tema-food .btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
body.tema-food .btn-primary {
    background: var(--food-rosa) !important;
    border-color: var(--food-rosa) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(210,58,86,.22);
}
body.tema-food .btn-primary:hover, body.tema-food .btn-primary:focus {
    background: var(--food-rosa-escuro) !important;
    border-color: var(--food-rosa-escuro) !important;
}
body.tema-food .btn-outline-primary { color: var(--food-azul-escuro) !important; border-color: var(--food-azul) !important; }
body.tema-food .btn-outline-primary:hover { background: var(--food-azul) !important; color: #fff !important; }
/* app.css pinta o outline-secondary de branco (pensado para o menu escuro); no conteúdo ele precisa aparecer */
body.tema-food #mainContent .btn-outline-secondary { color: #4B5563; border-color: #CFD8E3; background: #fff; }
body.tema-food #mainContent .btn-outline-secondary:hover { color: var(--food-grafite); border-color: #9FB3C8; background: #EEF4FA; }
body.tema-food .btn-success { background: var(--food-verde) !important; border-color: var(--food-verde) !important; }
body.tema-food .text-primary { color: var(--food-azul) !important; }
body.tema-food .form-control:focus, body.tema-food .form-select:focus {
    border-color: var(--food-azul);
    box-shadow: 0 0 0 .2rem rgba(46,155,232,.18);
}
body.tema-food .form-check-input:checked { background-color: var(--food-azul); border-color: var(--food-azul); }

/* ---------- controles segmentados (períodos) ---------- */
body.tema-food .seg-toggle {
    background: #fff;
    border: 1px solid var(--food-linha);
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
}
body.tema-food .seg-toggle button {
    color: var(--food-texto-2);
    font-size: 13px;
    font-weight: 600;
    padding: .38rem .9rem;
    border-radius: 9px;
    transition: background-color .22s ease, color .22s ease, box-shadow .22s ease;
}
body.tema-food .seg-toggle button:hover { color: var(--food-grafite); background: var(--food-fundo); }
body.tema-food .seg-toggle button.is-active { background: var(--food-marinho); color: #fff; box-shadow: 0 4px 10px -4px rgba(14,27,46,.5); }
body.tema-food .seg-toggle-sm { padding: 3px; border-radius: 10px; }
body.tema-food .seg-toggle-sm button { font-size: 12px; padding: .26rem .65rem; border-radius: 7px; }
body.tema-food .chart-combo { border-radius: 10px; border-color: var(--food-linha); color: var(--food-grafite); font-size: 13px; }

/* ---------- cartões ---------- */
body.tema-food .card { border: 0 !important; border-radius: 16px !important; box-shadow: var(--food-sombra-card); }
body.tema-food .card:hover { box-shadow: 0 8px 22px -12px rgba(14,27,46,.18); }
body.tema-food .page-panel { border-radius: 16px; border-color: var(--food-linha); }

/* ============================================================
   MENU LATERAL
   ============================================================ */
body.tema-food #appSidebar {
    background: var(--food-marinho);
    box-shadow: 1px 0 0 rgba(255,255,255,.03), 8px 0 30px -12px rgba(14,27,46,.45);
    color: #E7EEF7;
}
body.tema-food #appSidebar .border-secondary,
body.tema-food #appSidebar .border-bottom,
body.tema-food #appSidebar .border-top { border-color: transparent !important; }

/* cabeçalho: marca + "Painel da loja" */
body.tema-food #sidebarHeader { padding: 22px 14px 16px 22px; gap: 12px !important; }
body.tema-food .food-marca {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--food-rosa);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 18px -6px rgba(210,58,86,.6);
    transition: width .22s ease, height .22s ease, border-radius .22s ease;
}
body.tema-food #appSidebar .food-marca svg { width: 22px; height: 22px; }
body.tema-food .food-marca-nome { font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: #fff; line-height: 1.25; }
body.tema-food .food-marca-sub { font-size: 12px; color: var(--food-texto-menu-2); }
body.tema-food #sidebarToggle { color: var(--food-texto-menu-2) !important; border-radius: 9px !important; }
body.tema-food #sidebarToggle:hover { color: #fff !important; background: rgba(255,255,255,.08) !important; }
body.tema-food #appSidebar.is-collapsed #sidebarHeader { padding: 16px 4px 10px; }
body.tema-food #appSidebar.is-collapsed .food-marca { width: 36px; height: 36px; border-radius: 11px; }

/* cartão da loja */
body.tema-food .food-loja {
    margin: 2px 16px 12px;
    padding: 14px;
    border-radius: 14px;
    background: var(--food-marinho-2);
    display: flex; flex-direction: column; gap: 8px;
    white-space: normal;
}
body.tema-food .food-loja-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8EA3BB; }
body.tema-food .food-loja-nome { font-size: 14px; font-weight: 700; line-height: 1.3; color: #E7EEF7; }
body.tema-food .food-loja-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
body.tema-food .food-loja-situacao { display: inline-flex; align-items: center; gap: 6px; color: #BFE8CF; font-weight: 600; }
body.tema-food .food-loja-situacao i { width: 8px; height: 8px; border-radius: 50%; background: var(--food-verde-status); flex-shrink: 0; }
body.tema-food .food-loja-situacao.is-fechada { color: #F5B8C4; }
body.tema-food .food-loja-situacao.is-fechada i { background: var(--food-rosa); }
body.tema-food .food-loja-obs { color: var(--food-texto-menu-2); text-align: right; }

/* itens: realce que desliza da esquerda no hover, ícone anda 3 px, ativo em pílula azul */
body.tema-food #appSidebar nav { padding: 4px 12px 8px !important; }
body.tema-food #sidebarNav { gap: 4px !important; }
body.tema-food #appSidebar .sidebar-section-btn,
body.tema-food #appSidebar .nav-link.sidebar-direct,
body.tema-food #appSidebar .sidebar-child-link {
    color: var(--food-texto-menu) !important;
    border-radius: 10px !important;
    background-color: transparent !important;
    background-image: linear-gradient(90deg, rgba(255,255,255,.11), rgba(255,255,255,.04)) !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 0% 100% !important;
    transition: background-size .32s var(--food-ease), background-color .28s ease, color .2s ease, box-shadow .28s ease !important;
}
body.tema-food #appSidebar .sidebar-section-btn,
body.tema-food #appSidebar .nav-link.sidebar-direct { padding: 11px 12px; gap: 12px !important; font-size: 14px; font-weight: 500; }
body.tema-food #appSidebar .sidebar-child-link { padding: 8px 12px; font-size: 13.5px; font-weight: 500; }
body.tema-food #appSidebar .sidebar-section-btn:hover,
body.tema-food #appSidebar .nav-link.sidebar-direct:hover,
body.tema-food #appSidebar .sidebar-child-link:hover {
    background-size: 100% 100% !important;
    color: #fff !important;
}
body.tema-food #appSidebar .sidebar-section-btn > span:first-child,
body.tema-food #appSidebar .sidebar-direct > span:first-child,
body.tema-food #appSidebar .sidebar-child-link > span:first-child { transition: transform .24s var(--food-ease); }
body.tema-food #appSidebar .sidebar-section-btn:hover > span:first-child,
body.tema-food #appSidebar .sidebar-direct:hover > span:first-child,
body.tema-food #appSidebar .sidebar-child-link:hover > span:first-child { transform: translateX(3px); }
/* seção com a página atual: texto forte, sem pílula (a pílula fica no item) */
body.tema-food #appSidebar .sidebar-section-btn.is-active { color: #fff !important; font-weight: 600; }
body.tema-food #appSidebar .sidebar-section-btn.is-active::before,
body.tema-food #appSidebar .sidebar-child-link.active::before,
body.tema-food #appSidebar .nav-link.active.sidebar-direct::before { display: none; }
body.tema-food #appSidebar .sidebar-child-link.active,
body.tema-food #appSidebar .nav-link.active.sidebar-direct {
    background-color: var(--food-azul) !important;
    background-image: none !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 8px 18px -8px rgba(46,155,232,.75);
}
body.tema-food #appSidebar .sidebar-child-link.active:hover,
body.tema-food #appSidebar .nav-link.active.sidebar-direct:hover { background-color: #3AA5EE !important; }
body.tema-food #appSidebar .sidebar-chevron { color: #6F86A1; transition: transform .28s var(--food-ease); }
body.tema-food #appSidebar .sidebar-dev-tag { background: rgba(255,255,255,.07); color: #8EA3BB; }
/* subitens com um fio guia; a abertura anima a altura (collapse do Bootstrap) */
body.tema-food #appSidebar .collapse > ul,
body.tema-food #appSidebar .collapsing > ul {
    margin-left: 20px;
    padding-left: 8px !important;
    border-left: 1px solid var(--food-marinho-borda);
}
body.tema-food #appSidebar .collapsing { transition: height .32s var(--food-ease); }
body.tema-food #appSidebar.is-collapsed .collapse > ul { margin-left: 0; border-left: 0; }

/* flyout e tooltip do menu recolhido */
body.tema-food .sidebar-flyout {
    background: var(--food-marinho);
    border: 1px solid var(--food-marinho-borda);
    border-left: 0;
    box-shadow: 10px 0 30px -8px rgba(14,27,46,.45);
    padding: .6rem .45rem .7rem;
}
body.tema-food .sidebar-flyout-title { color: #8EA3BB; border-bottom-color: var(--food-marinho-borda); }
body.tema-food .sidebar-flyout a { color: var(--food-texto-menu); border-radius: 9px; transition: background-color .2s ease, color .2s ease; }
body.tema-food .sidebar-flyout a:hover { background: rgba(255,255,255,.08); color: #fff; }
body.tema-food .sidebar-flyout a.active { background: var(--food-azul); color: #fff; font-weight: 600; }
body.tema-food .sidebar-tooltip { background: var(--food-marinho-2); border: 1px solid var(--food-marinho-borda); }

/* rodapé do menu: servidor + usuário + sair, compactos */
body.tema-food .food-sidebar-rodape { flex-shrink: 0; padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
body.tema-food .food-servidor {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--food-marinho-borda);
    border-radius: 12px;
}
body.tema-food .food-servidor-ponto {
    position: relative;
    width: 10px; height: 10px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--food-verde-status);
    box-shadow: 0 0 0 4px rgba(52,193,123,.18);
}
body.tema-food .food-servidor-nome { font-size: 13px; font-weight: 600; color: #E7EEF7; line-height: 1.3; }
body.tema-food .food-servidor-info { font-size: 12px; color: var(--food-texto-menu-2); }
body.tema-food .food-usuario { display: flex; align-items: center; gap: 10px; padding: 2px 2px 0 4px; }
body.tema-food .food-usuario-avatar {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--food-azul);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
}
body.tema-food .food-usuario-dados { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
body.tema-food .food-usuario-nome { font-size: 13px; font-weight: 600; color: #E7EEF7; }
body.tema-food .food-usuario-papel { font-size: 12px; color: var(--food-texto-menu-2); }
body.tema-food .food-sair {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--food-marinho-borda);
    border-radius: 10px;
    color: var(--food-texto-menu);
    cursor: pointer;
    transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .22s var(--food-ease);
}
body.tema-food .food-sair:hover { background: rgba(210,58,86,.16); border-color: rgba(210,58,86,.55); color: #fff; transform: translateX(2px); }
body.tema-food #appSidebar.is-collapsed .food-sidebar-rodape { padding: 10px 8px 14px; align-items: center; }
body.tema-food #appSidebar.is-collapsed .food-servidor { border: 0; padding: 8px; justify-content: center; }
body.tema-food #appSidebar.is-collapsed .food-usuario { padding: 0; justify-content: center; }

/* ============================================================
   ÁREA PRINCIPAL: topo, conteúdo e rodapé em linha no fim da página
   ============================================================ */
body.tema-food #mainContent {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    color: var(--food-grafite);
}
body.tema-food #mainContent > .p-3 { flex: 1 0 auto; }
body.tema-food #mainContent .sticky-top.bg-white {
    background-color: rgba(243,246,250,.86) !important;
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--food-linha) !important;
    box-shadow: none !important;
}
body.tema-food #mainContent .sticky-top .fw-bold { color: var(--food-grafite); }
body.tema-food #overview .bg-primary.rounded-circle { background-color: var(--food-azul) !important; }
body.tema-food #mainContent .sticky-top .form-select { border-color: var(--food-linha); border-radius: 10px; }
body.tema-food #mainContent .refresh-link {
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--food-linha);
    color: var(--food-grafite);
}
body.tema-food #mainContent .refresh-link:hover { border-color: var(--food-azul); color: var(--food-azul-texto); }
body.tema-food #mainContent .refresh-link i { display: inline-block; transition: transform .45s var(--food-ease); }
body.tema-food #mainContent .refresh-link:hover i { transform: rotate(180deg); }
/* com o menu aberto o usuário já aparece embaixo dele: o topo não repete */
@media (min-width: 992px) {
    body.tema-food #appSidebar:not(.is-collapsed) ~ #mainContent #overview > .d-flex.align-items-center.gap-2:has(> .rounded-circle) { display: none !important; }
}
body.tema-food .food-rodape {
    margin-top: auto;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
    padding: 10px 16px 18px;
    font-size: 12px;
    color: var(--food-texto-2);
}
@media (min-width: 768px) { body.tema-food .food-rodape { padding: 8px 24px 22px; } }

/* ---------- login dividido ---------- */
body.tema-food .login-page {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
    background: #fff;
    animation: none;
}
body.tema-food #loginCanvas, body.tema-food .login-orb { display: none; }
body.tema-food .login-food-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(2rem, 4vw, 3.5rem);
    color: #fff;
    background: #061f3d;
}
/* Foto real de uso (cozinha com o PDV, Unsplash, licença livre). A pessoa fica
   à direita, perto do formulário; o texto vai sobre a parte escurecida. */
body.tema-food .login-food-foto {
    position: absolute; inset: 0; z-index: -3;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 72% center;
    pointer-events: none;
}
body.tema-food .login-food-velo {
    position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(4, 24, 50, .97) 0%,
            rgba(6, 36, 72, .88) 36%,
            rgba(10, 52, 98, .45) 66%,
            rgba(12, 60, 110, .06) 100%),
        linear-gradient(0deg, rgba(4, 20, 42, .6), transparent 55%);
}
body.tema-food .login-food-grade {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    opacity: .09;
    background-image: radial-gradient(rgba(255, 255, 255, .85) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%);
    mask-image: linear-gradient(90deg, #000, transparent 70%);
}
body.tema-food .login-food-icone {
    width: 64px; height: 64px; border-radius: 50%;
    background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
body.tema-food .login-food-conteudo {
    margin-top: auto;
    max-width: min(31rem, 62%);
}
body.tema-food .login-food-hero h1 {
    color: #fff; font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 800;
    line-height: 1.08; letter-spacing: -.01em; margin: 0;
}
body.tema-food .login-food-hero h1 span { display: block; margin-top: .25rem; color: #7CC4F5; }
body.tema-food .login-food-texto p {
    margin: 1.1rem 0 0; font-size: 1.05rem; line-height: 1.55; color: rgba(255,255,255,.72);
}
body.tema-food .login-food-recursos {
    position: relative; list-style: none; margin: 2.25rem 0 0; padding: 0;
    width: min(29rem, 100%); height: 7.25rem;
}
body.tema-food .login-food-recurso {
    display: none;
    position: absolute; inset: 0;
    align-items: center; gap: 1rem;
    height: fit-content; min-height: 6.5rem;
    padding: 1rem 1.125rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 1rem;
    background: rgba(255,255,255,.1);
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,.2);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
body.tema-food .login-food-recurso:first-child { display: flex; }
body.tema-food .login-food-recurso strong { display: block; font-size: 1rem; font-weight: 700; color: #fff; }
body.tema-food .login-food-recurso strong + span { display: block; margin-top: .25rem; font-size: .9rem; line-height: 1.45; color: rgba(255,255,255,.68); }
body.tema-food .login-food-recurso-icone {
    display: flex; flex: 0 0 3rem; width: 3rem; height: 3rem;
    align-items: center; justify-content: center;
    border-radius: .875rem; font-size: 1.35rem; color: #fff;
    background: linear-gradient(135deg, #2E9BE8, #D23A56);
    box-shadow: 0 .5rem 1.4rem rgba(210, 58, 86, .25);
}
/* Um recurso por vez: entra de baixo, fica legível e sai por cima (só transform/opacity). */
@media (prefers-reduced-motion: no-preference) {
    body.tema-food .login-food-texto { opacity: 0; animation: food-texto-entrada .8s ease-out .15s forwards; }
    body.tema-food .login-food-recurso {
        display: flex; opacity: 0;
        animation: food-recurso-subindo 25s ease-in-out var(--recurso-atraso) infinite;
    }
}
@keyframes food-texto-entrada { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes food-recurso-subindo {
    0%   { opacity: 0; transform: translateY(30px) scale(.985); }
    4%   { opacity: 1; transform: none; }
    17%  { opacity: 1; transform: none; }
    21%  { opacity: 0; transform: translateY(-30px) scale(.985); }
    100% { opacity: 0; transform: translateY(-30px) scale(.985); }
}
@media (min-width: 992px) and (max-height: 760px) {
    body.tema-food .login-food-hero h1 { font-size: 2.1rem; }
    body.tema-food .login-food-texto p { font-size: .95rem; margin-top: .75rem; }
    body.tema-food .login-food-recursos { margin-top: 1.25rem; }
}
body.tema-food .login-card-box {
    align-self: center;
    justify-self: center;
    box-shadow: none;
    border-radius: 0;
    width: 380px;
    animation: none;
}
body.tema-food .login-food-logo { width: 210px; max-width: 80%; height: auto; display: block; margin: 0 auto .5rem; }
body.tema-food .login-field-box:focus-within { border-color: var(--food-azul); box-shadow: 0 0 0 .2rem rgba(46,155,232,.18); }
body.tema-food .login-remember input { accent-color: var(--food-rosa); }
body.tema-food .login-forgot { color: var(--food-azul-escuro); }
@media (max-width: 991.98px) {
    body.tema-food .login-page { grid-template-columns: 1fr; }
    body.tema-food .login-food-hero { display: none; }
    body.tema-food .login-card-box { width: 100%; max-width: 420px; padding: 2rem 1.25rem; }
}

/* ============================================================
   TELA DE CARREGANDO (#pageLoader)
   ============================================================ */
body.tema-food .page-loader { background: var(--food-marinho); color: #fff; }
body.tema-food .page-loader.is-visible { animation: food-aparece .22s ease both; }
body.tema-food .food-loader {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 28px;
    padding: 24px;
    text-align: center;
}
body.tema-food .food-loader-marca { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
body.tema-food .food-loader-anel { position: absolute; inset: 0; animation: food-gira 1.1s linear infinite; }
body.tema-food .food-loader-icone {
    width: 72px; height: 72px;
    border-radius: 20px;
    background: var(--food-rosa);
    display: flex; align-items: center; justify-content: center;
    animation: food-pulsa 1.6s ease-in-out infinite;
}
body.tema-food .food-loader-textos { display: flex; flex-direction: column; align-items: center; gap: 8px; }
body.tema-food .food-loader-textos strong { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
body.tema-food .food-loader-textos span { font-size: 16px; color: #B7C7DA; }
body.tema-food .food-loader-barra { width: 220px; height: 4px; border-radius: 999px; background: #1E3150; overflow: hidden; }
body.tema-food .food-loader-barra i { display: block; width: 40%; height: 100%; border-radius: 999px; background: var(--food-azul); animation: food-corre 1.4s ease-in-out infinite; }
body.tema-food .food-loader #loaderMessage { margin-top: -14px; font-size: 13px; color: #8EA3BB; max-width: 320px; }
body.tema-food .food-loader .loader-dismiss { margin-top: -14px; color: var(--food-texto-menu-2); font-size: 13px; font-weight: 600; }
body.tema-food .food-loader .loader-dismiss:hover { color: #fff; }
@keyframes food-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes food-gira { to { transform: rotate(360deg); } }
@keyframes food-pulsa { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.92); opacity: .85; } }
@keyframes food-corre { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* ============================================================
   VISÃO GERAL (views/home_food.php)
   ============================================================ */
body.tema-food .food-home { display: flex; flex-direction: column; gap: 24px; padding-top: 4px; }

/* cabeçalho: saudação + data, cardápio e sincronização */
body.tema-food .food-cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
body.tema-food .food-cabecalho-titulo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.tema-food .food-cabecalho-data { font-size: 13px; font-weight: 600; color: var(--food-texto-2); }
body.tema-food .food-cabecalho h1 { margin: 0; font-size: clamp(22px, 2.3vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
body.tema-food .food-cabecalho-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
body.tema-food .food-sync {
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--food-linha);
    font-size: 13px; font-weight: 600; color: var(--food-texto-2);
    white-space: nowrap;
}
body.tema-food .food-sync i {
    position: relative;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--food-verde-status);
    box-shadow: 0 0 0 3px rgba(52,193,123,.18);
}
body.tema-food .food-btn-rosa {
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 18px;
    border-radius: 12px;
    background: var(--food-rosa);
    color: #fff !important;
    font-weight: 700; font-size: 14px;
    text-decoration: none;
    box-shadow: 0 10px 22px -10px rgba(210,58,86,.75);
    transition: background-color .22s ease, box-shadow .22s ease, transform .22s var(--food-ease);
}
body.tema-food .food-btn-rosa:hover { background: var(--food-rosa-escuro); transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(210,58,86,.8); }
body.tema-food .food-btn-rosa:active { transform: translateY(0); }
body.tema-food .food-btn-rosa svg { transition: transform .22s var(--food-ease); }
body.tema-food .food-btn-rosa:hover svg { transform: translate(1px, -1px); }

/* cards de KPI */
body.tema-food .food-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
body.tema-food .food-kpi {
    position: relative;
    min-width: 0;
    display: flex; flex-direction: column; gap: 10px;
    padding: 20px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--food-sombra-card);
    overflow: hidden;
    transition: transform .28s var(--food-ease), box-shadow .28s ease;
}
body.tema-food .food-kpi:hover { transform: translateY(-3px); box-shadow: var(--food-sombra-hover); }
body.tema-food .food-kpi-rotulo { font-size: 13px; font-weight: 600; color: var(--food-texto-2); }
body.tema-food .food-kpi-valor {
    font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--food-grafite);
    white-space: nowrap;
}
body.tema-food .food-kpi-nota { font-size: 12px; color: var(--food-texto-2); }
body.tema-food .food-kpi-destaque { background: var(--food-marinho); box-shadow: 0 10px 26px -14px rgba(14,27,46,.7); }
body.tema-food .food-kpi-destaque::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 100% 0%, rgba(46,155,232,.28), transparent 55%);
    pointer-events: none;
}
body.tema-food .food-kpi-destaque .food-kpi-rotulo { color: #B7C7DA; }
body.tema-food .food-kpi-destaque .food-kpi-valor { color: #fff; }
body.tema-food .food-kpi-destaque .food-kpi-nota { color: #8FD3FF; }
body.tema-food .food-kpi-cancelada .food-kpi-valor { color: var(--food-rosa-texto); }

/* grades e cards */
body.tema-food .food-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) {
    body.tema-food .food-grade-blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.tema-food .food-grade-blocos.tem-cardapio > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
    body.tema-food .food-grade-graficos { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    body.tema-food .food-grade-blocos.tem-cardapio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.tema-food .food-grade-blocos.tem-cardapio > :last-child { grid-column: auto; }
    body.tema-food .food-grade-listas { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
body.tema-food .food-card {
    min-width: 0;
    display: flex; flex-direction: column; gap: 16px;
    padding: 22px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--food-sombra-card);
    transition: box-shadow .28s ease, transform .28s var(--food-ease);
}
body.tema-food .food-card:hover { box-shadow: var(--food-sombra-hover); }
body.tema-food .food-card-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
body.tema-food .food-card h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
body.tema-food .food-card-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--food-texto-2); }
body.tema-food .food-card-total { font-size: 13px; font-weight: 700; color: var(--food-azul-texto); white-space: nowrap; padding-top: 3px; }
body.tema-food .food-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -4px; }
body.tema-food .food-mini-titulo { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8EA3BB; margin-bottom: -8px; }
body.tema-food .food-vazio { margin: 0; padding: 16px 0; text-align: center; font-size: 14px; color: var(--food-texto-2); }

/* pedidos por dia: barras arredondadas, o dia de maior volume em azul forte, zero em cinza claro */
body.tema-food .food-barras { height: 260px; gap: 6px; padding-bottom: 24px; }
body.tema-food .food-barras.is-denso { gap: 3px; }
body.tema-food .food-barras .annual-track { max-width: 64px; gap: 2px; }
body.tema-food .food-barras .annual-track > span {
    position: relative;
    overflow: visible;
    background: #E3E9F1;
    border-radius: 9px 9px 4px 4px;
    color: transparent;
    font-size: 0;
    transform-origin: 50% 100%;
    transition: background-color .2s ease;
}
body.tema-food .food-barras.is-denso .annual-track > span { border-radius: 5px 5px 2px 2px; }
body.tema-food .food-barras .annual-item.is-active .annual-track > span { background: var(--food-azul-claro); padding-top: 0; }
body.tema-food .food-barras .annual-item.is-max .annual-track > span { background: var(--food-azul); }
body.tema-food .food-barras .annual-item.is-active:hover .annual-track > span { background: #7DBFF0; }
body.tema-food .food-barras .annual-item.is-max:hover .annual-track > span { background: var(--food-azul-escuro); }
body.tema-food .food-barras .annual-track > span[data-n]::before {
    content: attr(data-n);
    position: absolute; left: -6px; right: -6px; bottom: 100%;
    margin-bottom: 5px;
    text-align: center;
    font-size: 13px; font-weight: 700; line-height: 1;
    color: var(--food-grafite);
}
body.tema-food .food-barras.is-denso .annual-track > span[data-n]::before { font-size: 10px; margin-bottom: 3px; }
body.tema-food .food-barras .annual-item:hover .annual-track > span[data-n]::before { opacity: 0; }
body.tema-food .food-barras .annual-item b { font-size: 12px; font-weight: 500; color: var(--food-texto-2); margin-top: 6px; }
body.tema-food .food-barras.is-denso .annual-item b { font-size: 10px; }
body.tema-food .food-barras .stack-segment:last-child { border-radius: 6px 6px 0 0; }
body.tema-food .food-barras .annual-track .bar-value { color: var(--food-azul-texto); font-weight: 700; }
body.tema-food .bar-tip { background: var(--food-marinho); border-radius: 8px; box-shadow: 0 10px 22px -8px rgba(14,27,46,.5); }
body.tema-food .bar-tip::after { border-top-color: var(--food-marinho); }
body.tema-food .chart-legend span { color: var(--food-texto-2); }

/* formas de pagamento: barra empilhada + legenda com % e valor */
body.tema-food .food-pag-barra {
    display: flex; gap: 3px;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--food-linha-2);
}
body.tema-food .food-pag-barra > i { display: block; height: 100%; min-width: 4px; }
body.tema-food .food-pag-legenda { display: flex; flex-direction: column; gap: 12px; }
body.tema-food .food-pag-item { display: flex; align-items: center; gap: 10px; font-size: 14px; }
body.tema-food .food-pag-item > i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
body.tema-food .food-pag-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tema-food .food-pag-item > em { font-style: normal; color: var(--food-texto-2); }
body.tema-food .food-pag-item > strong { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; white-space: nowrap; }

/* ranking (top vendedores) */
body.tema-food .food-ranking { display: flex; flex-direction: column; gap: 14px; }
body.tema-food .food-ranking-linha { display: flex; align-items: center; gap: 12px; }
body.tema-food .food-ranking-pos {
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 8px;
    background: var(--food-azul-fundo);
    color: var(--food-azul-texto);
    font-weight: 800; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
body.tema-food .food-ranking-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
body.tema-food .food-ranking-topo { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
body.tema-food .food-ranking-nome { font-weight: 600; min-width: 0; }
body.tema-food .food-ranking-topo strong { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.tema-food .food-trilho { height: 8px; border-radius: 999px; background: var(--food-linha-2); overflow: hidden; }
body.tema-food .food-trilho > i { display: block; height: 100%; border-radius: 999px; background: var(--food-azul); transform-origin: 0 50%; }

/* contas */
body.tema-food .conta-badge { border-color: var(--food-linha); border-radius: 12px; padding: .55rem .65rem; transition: background-color .2s ease, border-color .2s ease, transform .2s var(--food-ease); }
body.tema-food .conta-badge:hover { border-color: var(--food-azul-claro); transform: translateY(-1px); }
body.tema-food .conta-badge.is-active { background: var(--food-azul-fundo); border-color: var(--food-azul); }
body.tema-food .conta-badge-val { color: var(--food-grafite); font-size: .86rem; }
body.tema-food .conta-badge-lbl { color: var(--food-texto-2); }
body.tema-food .food-contas-lista { overflow-y: auto; max-height: 240px; }
body.tema-food .food-contas-lista > div { border-color: var(--food-linha-2) !important; }
body.tema-food .food-contas-lista::-webkit-scrollbar { width: 4px; }
body.tema-food .food-contas-lista::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }

/* cardápio digital */
body.tema-food .food-card-cardapio .food-card-topo { align-items: center; }
body.tema-food .food-selo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
body.tema-food .food-selo i { width: 7px; height: 7px; border-radius: 50%; }
body.tema-food .food-selo.is-aberto { color: #137A47; background: #E3F6EC; }
body.tema-food .food-selo.is-aberto i { background: var(--food-verde-status); }
body.tema-food .food-selo.is-fechado { color: var(--food-rosa-texto); background: #FBE7EB; }
body.tema-food .food-selo.is-fechado i { background: var(--food-rosa); }
body.tema-food .food-cardapio-link { display: block; font-size: 14px; color: var(--food-texto-2) !important; text-decoration: none; }
body.tema-food .food-cardapio-link:hover { color: var(--food-azul-texto) !important; text-decoration: underline; }
body.tema-food .food-mini-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.tema-food .food-mini-kpis > div { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; background: var(--food-fundo); }
body.tema-food .food-mini-kpis span { font-size: 12px; color: var(--food-texto-2); }
body.tema-food .food-mini-kpis strong { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
body.tema-food .food-mini-kpis strong.is-alerta { color: var(--food-rosa-texto); }
body.tema-food .food-btn-contorno {
    margin-top: auto;
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px;
    border-radius: 12px;
    border: 1.5px solid var(--food-marinho);
    color: var(--food-marinho) !important;
    font-weight: 700; font-size: 14px;
    text-decoration: none;
    transition: background-color .22s ease, color .22s ease, transform .22s var(--food-ease);
}
body.tema-food .food-btn-contorno:hover { background: var(--food-marinho); color: #fff !important; transform: translateY(-1px); }

/* vendas recentes e estoque */
body.tema-food .food-card-tabela { padding-bottom: 12px; }
body.tema-food .food-tabela th {
    background: transparent;
    color: var(--food-texto-2);
    font-size: 12px; font-weight: 600;
    text-transform: none; letter-spacing: 0;
    border-bottom: 1px solid var(--food-linha-2) !important;
    padding: .5rem .5rem;
}
body.tema-food .food-tabela td { font-size: 13px; color: var(--food-grafite); border-color: #F1F4F8; padding: .55rem .5rem; }
body.tema-food .food-tabela tbody tr { transition: background-color .15s ease; }
body.tema-food .food-tabela tbody tr:hover > td { background: #F6F9FC; }
body.tema-food .food-tabela tr.is-cancelada td { color: #8A97A8; }
body.tema-food .food-tag-cancelada { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--food-rosa-texto); background: #FBE7EB; }
body.tema-food .food-estoque { gap: 14px; }
body.tema-food .food-estoque .stock-row > div strong { color: var(--food-grafite); font-size: 13px; }
body.tema-food .food-estoque .stock-row > div span { color: var(--food-texto-2); }
body.tema-food .food-estoque .stock-row > b { color: var(--food-azul-texto); }
body.tema-food .food-estoque .stock-row > em { height: 6px; background: var(--food-linha-2); border-radius: 999px; }
body.tema-food .food-estoque .stock-row > em > i { background: var(--food-azul); border-radius: 999px; transform-origin: 0 50%; }

/* ============================================================
   ANIMAÇÕES — só com movimento liberado (prefers-reduced-motion)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    /* entrada em cascata (o food.js numera --ordem; sem JS entram juntos) */
    body.tema-food .food-entra { animation: food-entra .6s var(--food-ease) backwards; animation-delay: calc(var(--ordem, 0) * 60ms); }
    /* barras crescendo de baixo para cima; a barra empilhada preenche da esquerda */
    body.tema-food .food-barras .annual-track > span { animation: food-cresce .75s var(--food-ease) backwards; animation-delay: calc(180ms + var(--i, 0) * 22ms); }
    body.tema-food .food-pag-barra.is-animando { animation: food-preenche .9s var(--food-ease) backwards; animation-delay: .25s; }
    body.tema-food .food-trilho > i,
    body.tema-food .food-estoque .stock-row > em > i { animation: food-trilho .9s var(--food-ease) backwards; animation-delay: .35s; }
    /* menu: item ativo entra suave; subitens descem em cascata quando a seção abre */
    body.tema-food #appSidebar .sidebar-child-link.active,
    body.tema-food #appSidebar .nav-link.active.sidebar-direct { animation: food-pilula .45s var(--food-ease) backwards; }
    body.tema-food #appSidebar .sidebar-section-btn[aria-expanded="true"] + .collapsing .sidebar-child-link { animation: food-subitem .34s var(--food-ease) backwards; }
    body.tema-food #appSidebar .collapsing li:nth-child(2) .sidebar-child-link { animation-delay: 30ms; }
    body.tema-food #appSidebar .collapsing li:nth-child(3) .sidebar-child-link { animation-delay: 60ms; }
    body.tema-food #appSidebar .collapsing li:nth-child(4) .sidebar-child-link { animation-delay: 90ms; }
    body.tema-food #appSidebar .collapsing li:nth-child(5) .sidebar-child-link { animation-delay: 120ms; }
    body.tema-food #appSidebar .collapsing li:nth-child(n+6) .sidebar-child-link { animation-delay: 150ms; }
    /* halo do servidor e da sincronização */
    body.tema-food .food-servidor-ponto::after,
    body.tema-food .food-sync i::after {
        content: '';
        position: absolute; inset: -3px;
        border-radius: 50%;
        border: 2px solid rgba(52,193,123,.55);
        animation: food-halo 2.4s ease-out infinite;
    }
}
@keyframes food-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes food-cresce { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes food-preenche { from { clip-path: inset(0 100% 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
@keyframes food-trilho { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes food-pilula { from { opacity: .4; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes food-subitem { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes food-halo { 0% { transform: scale(.8); opacity: .9; } 70%, 100% { transform: scale(2.1); opacity: 0; } }

@media (max-width: 575.98px) {
    body.tema-food .food-home { gap: 18px; }
    body.tema-food .food-card { padding: 18px; }
    body.tema-food .food-kpi-valor { font-size: 24px; }
    body.tema-food .food-cabecalho-acoes { width: 100%; }
    body.tema-food .food-btn-rosa { flex: 1 1 auto; justify-content: center; }
    body.tema-food .food-barras { height: 220px; }
    body.tema-food .food-pag-item > strong { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.tema-food * { animation: none !important; transition: none !important; }
}