/* ==========================================================================
   Potiguaria — tema da loja
   Camada sobre o Bootstrap 5.3. Só define tokens e componentes próprios;
   layout e grid continuam vindo do Bootstrap.
   ========================================================================== */

:root {
    /* Paleta inspirada no litoral potiguar: areia, sol e maré */
    --pot-areia: #fdf6ec;
    --pot-areia-escura: #f3e3cd;
    --pot-sol: #e8730a;
    --pot-sol-claro: #ff9a3c;
    /* O laranja da marca tem 3.05:1 contra branco — reprova no WCAG AA.
       Por isso ele se divide em três papéis, cada um com contraste próprio:
       --pot-sol      decoração (bordas, ícones), nunca texto sobre ele;
       --pot-sol-acao fundo que carrega texto branco (botões, item ativo);
       --pot-sol-texto laranja usado COMO texto, que precisa inverter por tema. */
    --pot-sol-acao: #b8520a;
    --pot-sol-texto: #b8520a;
    --pot-mare: #0f6d78;
    --pot-mare-texto: #0f6d78;
    --pot-mare-escura: #0a4c54;
    --pot-carvao: #3b2d23;
    /* Superfície sempre escura (sidebar, rodapé): ao contrário de
       --pot-carvao, NÃO inverte no tema escuro, senão vira fundo claro
       sob texto claro. */
    --pot-painel-escuro: #3b2d23;
    --pot-painel-escuro-texto: #e5d9c9;
    --pot-logo-cor: #4a2f22;
    --pot-texto: #4a3b30;
    --pot-texto-suave: #7b6858;
    --pot-borda: #e6d7c3;
    --pot-sucesso: #2e7d4f;
    --pot-erro: #b3261e;
    --pot-atencao: #b8860b;

    --pot-superficie: #ffffff;
    --pot-sombra: 0 2px 12px rgba(59, 45, 35, .08);
    --pot-sombra-forte: 0 8px 28px rgba(59, 45, 35, .16);
    --pot-raio: 12px;
}

/* Tema escuro segue a preferência do sistema, como no SaborDF */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --pot-areia: #1c1714;
        --pot-areia-escura: #251e1a;
        --pot-superficie: #262019;
        --pot-texto: #f0e6da;
        --pot-texto-suave: #b8a894;
        --pot-borda: #3d332a;
        --pot-carvao: #f0e6da;
        --pot-painel-escuro: #16110e;
        --pot-sol-texto: #ff9a3c;
        --pot-mare-texto: #4fb3bf;
        --pot-painel-escuro-texto: #d8cbba;
        --pot-logo-cor: #f0e6da;
        --pot-sombra: 0 2px 12px rgba(0, 0, 0, .4);
        --pot-sombra-forte: 0 8px 28px rgba(0, 0, 0, .55);
    }
}

:root[data-tema="escuro"] {
    --pot-areia: #1c1714;
    --pot-areia-escura: #251e1a;
    --pot-superficie: #262019;
    --pot-texto: #f0e6da;
    --pot-texto-suave: #b8a894;
    --pot-borda: #3d332a;
    --pot-carvao: #f0e6da;
    --pot-painel-escuro: #16110e;
    --pot-sol-texto: #ff9a3c;
    --pot-mare-texto: #4fb3bf;
    --pot-painel-escuro-texto: #d8cbba;
    --pot-logo-cor: #f0e6da;
    --pot-sombra: 0 2px 12px rgba(0, 0, 0, .4);
    --pot-sombra-forte: 0 8px 28px rgba(0, 0, 0, .55);
}

/* --------------------------------------------------------------- base --- */

body {
    background-color: var(--pot-areia);
    color: var(--pot-texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

a {
    color: var(--pot-mare-texto);
}

a:hover {
    color: var(--pot-mare-escura);
}

h1, h2, h3, h4, h5 {
    color: var(--pot-carvao);
    font-weight: 700;
}

/* Foco sempre visível: navegação por teclado precisa ser rastreável */
:focus-visible {
    outline: 3px solid var(--pot-sol);
    outline-offset: 2px;
}

/* ----------------------------------------------------------- cabeçalho --- */

.pot-header {
    background: linear-gradient(160deg, var(--pot-areia-escura), var(--pot-areia));
    border-bottom: 1px solid var(--pot-borda);
}

/* O logo é aplicado como MÁSCARA, não como <img>: assim o arquivo continua
   externo e cacheável, mas quem define a cor é o CSS — um <img> carrega o SVG
   num documento isolado, onde currentColor nunca chegaria. */
.pot-logo {
    display: inline-block;
    height: 68px;
    aspect-ratio: 1223 / 228;
    max-width: 100%;
    background-color: var(--pot-logo-cor);
    -webkit-mask: url("../images/logo.svg") no-repeat center / contain;
    mask: url("../images/logo.svg") no-repeat center / contain;
}

/* Na sidebar o fundo é sempre escuro, independentemente do tema. */
.pot-admin-sidebar .pot-logo {
    height: 40px;
    background-color: var(--pot-painel-escuro-texto);
}

.pot-tagline {
    color: var(--pot-texto-suave);
    margin: .35rem 0 0;
}

.pot-nav {
    background-color: var(--pot-superficie);
    border-top: 1px solid var(--pot-borda);
    border-bottom: 1px solid var(--pot-borda);
}

.pot-nav .nav-link {
    color: var(--pot-texto);
    font-weight: 600;
}

.pot-nav .nav-link:hover,
.pot-nav .nav-link.ativo {
    color: var(--pot-sol-texto);
}

.pot-carrinho-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    font-size: .7rem;
}

/* ------------------------------------------------------------- botões --- */

.btn-pot {
    background-color: var(--pot-sol-acao);
    border-color: var(--pot-sol-acao);
    color: #fff;
    font-weight: 600;
}

.btn-pot:hover,
.btn-pot:focus {
    background-color: #cf6608;
    border-color: #cf6608;
    color: #fff;
}

.btn-pot-outline {
    border-color: var(--pot-mare-texto);
    color: var(--pot-mare-texto);
    font-weight: 600;
}

.btn-pot-outline:hover {
    background-color: var(--pot-mare);
    color: #fff;
}

/* Impede duplo clique em ações de pagamento (JS adiciona .ocupado) */
.btn.ocupado {
    pointer-events: none;
    opacity: .65;
}

/* -------------------------------------------------------------- cards --- */

.pot-card {
    background-color: var(--pot-superficie);
    border: 1px solid var(--pot-borda);
    border-radius: var(--pot-raio);
    box-shadow: var(--pot-sombra);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}

.pot-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pot-sombra-forte);
}

.pot-card__imagem {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: var(--pot-areia-escura);
}

.pot-card__corpo {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pot-card__titulo {
    font-size: 1.05rem;
    margin-bottom: .35rem;
}

.pot-card__descricao {
    color: var(--pot-texto-suave);
    font-size: .9rem;
    flex: 1;
}

.pot-preco {
    color: var(--pot-sol-texto);
    font-size: 1.25rem;
    font-weight: 700;
}

.pot-esgotado {
    filter: grayscale(.7);
    opacity: .75;
}

/* ------------------------------------------------------ busca dinâmica --- */

.pot-busca {
    position: relative;
    flex: 1 1 auto;
    min-width: 11rem;
}

.pot-busca-resultados {
    position: absolute;
    z-index: 1050;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    max-height: min(60vh, 22rem);
    overflow-y: auto;
    background-color: var(--pot-superficie);
    border: 1px solid var(--pot-borda);
    border-radius: var(--pot-raio);
    box-shadow: var(--pot-sombra-forte);
}

.pot-busca-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    color: var(--pot-texto);
    text-decoration: none;
    border-bottom: 1px solid var(--pot-borda);
}

.pot-busca-item:last-child {
    border-bottom: 0;
}

/* Mouse e teclado compartilham o mesmo destaque. */
.pot-busca-item:hover,
.pot-busca-item:focus,
.pot-busca-item.ativo {
    background-color: var(--pot-areia-escura);
    color: var(--pot-texto);
}

.pot-busca-item img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 8px;
    background-color: var(--pot-areia-escura);
}

.pot-busca-nome {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pot-busca-preco {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--pot-sol-texto);
}

.pot-busca-item.indisponivel img {
    filter: grayscale(.7);
    opacity: .75;
}

.pot-busca-item.indisponivel .pot-busca-preco {
    font-weight: 500;
    color: var(--pot-texto-suave);
}

.pot-busca-vazio {
    padding: .75rem;
    color: var(--pot-texto-suave);
}

.pot-busca-todos {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    border: 0;
    border-top: 1px solid var(--pot-borda);
    background-color: var(--pot-areia-escura);
    color: var(--pot-mare-texto);
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
}


/* -------------------------------------------------------------- forms --- */

.pot-painel {
    background-color: var(--pot-superficie);
    border: 1px solid var(--pot-borda);
    border-radius: var(--pot-raio);
    box-shadow: var(--pot-sombra);
    padding: 1.5rem;
}

.form-control,
.form-select {
    background-color: var(--pot-superficie);
    border-color: var(--pot-borda);
    color: var(--pot-texto);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--pot-superficie);
    color: var(--pot-texto);
    border-color: var(--pot-sol);
    box-shadow: 0 0 0 .2rem rgba(232, 115, 10, .2);
}

.form-label {
    font-weight: 600;
    color: var(--pot-texto);
}

/* ------------------------------------------------------------- badges --- */

.badge-status {
    font-weight: 600;
    padding: .4em .7em;
    border-radius: 999px;
    font-size: .78rem;
    display: inline-block;
}

.badge-aguardando { background-color: #fff3cd; color: #7a5b00; }
.badge-pago       { background-color: #d7f0e0; color: #1c5c38; }
.badge-fabricacao { background-color: #dbe9ff; color: #123c7a; }
.badge-rota       { background-color: #e5dbff; color: #4a2c88; }
.badge-entregue   { background-color: #d2ede0; color: #14532d; }
.badge-cancelado  { background-color: #f8d7da; color: #7a1c22; }

/* ---------------------------------------------------------- pagamento --- */

.pot-pix-qr {
    max-width: 260px;
    width: 100%;
    border: 8px solid #fff;
    border-radius: 8px;
    box-shadow: var(--pot-sombra);
    background: #fff;
}

.pot-pix-codigo {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .8rem;
    word-break: break-all;
    background-color: var(--pot-areia-escura);
    border: 1px dashed var(--pot-borda);
    border-radius: 8px;
    padding: .75rem;
    color: var(--pot-texto);
}

.pot-contador {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--pot-sol);
}

/* ------------------------------------------------------ monte seu bolo --- */

.pot-componente {
    border: 2px solid var(--pot-borda);
    border-radius: var(--pot-raio);
    padding: .85rem;
    cursor: pointer;
    background-color: var(--pot-superficie);
    transition: border-color .15s ease, background-color .15s ease;
    display: block;
    height: 100%;
}

.pot-componente:hover {
    border-color: var(--pot-sol-claro);
}

.pot-componente input:checked ~ .pot-componente__conteudo {
    color: var(--pot-sol);
}

.pot-componente:has(input:checked) {
    border-color: var(--pot-sol);
    background-color: rgba(232, 115, 10, .07);
}

/* -------------------------------------------------------------- grupo --- */

.pot-participante {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--pot-borda);
}

.pot-participante:last-child {
    border-bottom: none;
}

/* ------------------------------------------------------------- rodapé --- */

.pot-footer {
    background-color: var(--pot-painel-escuro);
    color: var(--pot-painel-escuro-texto);
    margin-top: 3rem;
    padding: 2rem 0 1.25rem;
}

.pot-footer a {
    color: var(--pot-areia-escura);
    text-decoration: none;
}

.pot-footer a:hover {
    color: var(--pot-sol-claro);
    text-decoration: underline;
}

/* -------------------------------------------------------------- admin --- */

.pot-admin-sidebar {
    background-color: var(--pot-painel-escuro);
    min-height: 100%;
}

.pot-admin-sidebar .nav-link {
    color: var(--pot-painel-escuro-texto);
    border-radius: 8px;
    margin-bottom: .15rem;
    font-weight: 500;
}

.pot-admin-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
}

.pot-admin-sidebar .nav-link.ativo {
    background-color: var(--pot-sol-acao);
    color: #fff;
}

.pot-metrica {
    background-color: var(--pot-superficie);
    border: 1px solid var(--pot-borda);
    border-left: 4px solid var(--pot-sol);
    border-radius: var(--pot-raio);
    padding: 1rem 1.25rem;
    box-shadow: var(--pot-sombra);
}

.pot-metrica__valor {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--pot-carvao);
    line-height: 1.1;
}

.pot-metrica__rotulo {
    color: var(--pot-texto-suave);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Tabelas do painel: linha inteira clicável via data-href */
.pot-tabela tbody tr[data-href] {
    cursor: pointer;
}

.pot-tabela tbody tr[data-href]:hover {
    background-color: var(--pot-areia-escura);
}

.table {
    --bs-table-bg: var(--pot-superficie);
    --bs-table-color: var(--pot-texto);
    --bs-table-border-color: var(--pot-borda);
}

/* Conteúdo largo deve rolar dentro do próprio container, não na página */
.pot-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------ estados --- */

.pot-vazio {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--pot-texto-suave);
}

.pot-vazio i {
    font-size: 3rem;
    display: block;
    margin-bottom: .75rem;
    opacity: .5;
}

@media (max-width: 576px) {
    .pot-logo { height: 52px; }
    .pot-metrica__valor { font-size: 1.5rem; }
}

/* Respeita quem pediu menos animação no sistema */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}