/* ==========================================================================
   Comanda — Design System
   Tema UNIFICADO do sistema inteiro: .theme-chili (padrão), .theme-ocean,
   .theme-forest e .theme-midnight (ver SYSTEM_THEME_CHOICES em
   app/models/platform_settings.py) — cada um é uma paleta completa
   aplicada como classe no <body>, escolhida pelo Super Admin em
   Configurações → Aparência e usada ao mesmo tempo pela landing page
   pública, pelo painel do lojista, pelo painel do Super Admin e pelas
   telas de autenticação (login/cadastro/recuperação de senha) — os 4
   compartilham a mesma identidade visual, trocada de uma vez só.

   A cor de destaque (--accent/--accent-dark) do tema escolhido pode
   ainda ser afinada pelo Super Admin (PlatformSettings.admin_theme_accent)
   — ver bloco <style> injetado em layouts/admin_panel.html e
   layouts/lojista_panel.html, que sobrescreve só essas duas variáveis
   por cima do tema selecionado.

   Modo claro/escuro: alternado via atributo [data-theme] no <html>
   (persistido em localStorage, ver sidebarShell() em comanda.js),
   sobrescrevendo os tokens de --charcoal, --paper, --card-bg, --card-text,
   --card-border, --muted-text e --line sob "html[data-theme='light']
   .theme-chili" logo abaixo. A sidebar (menu lateral) usa tokens
   PRÓPRIOS (--sidebar-text, --sidebar-muted, --sidebar-border), sempre
   escuros nos dois modos — é o "chrome" fixo da marca, só o conteúdo
   (painel/cards/tabelas/formulários) troca de claro para escuro.
   ========================================================================== */

:root, .theme-chili {
  --ink:#1A1612;
  --charcoal:#221C16;
  --paper:#FAF4E8;
  --paper-2:#EFE5CD;
  --accent:#E54A36;
  --accent-dark:#C93522;
  --turmeric:#F0AD4E;
  --sage:#7AA06D;
  --line:#4E4338;
  --radius:12px;
  --card-bg:#2D251E;
  --card-text:#FAF4E8;
  --card-border:#44392E;
  --muted-text:#AFA491;
  /* Chrome fixo da sidebar — nunca sobrescrito pelo modo claro. */
  --sidebar-text:#FAF4E8;
  --sidebar-muted:#AFA491;
  --sidebar-border:#44392E;
}

/* Modo claro: mesma paleta de marca (--accent/--ink intocados), conteúdo
   invertido (fundo claro, texto escuro). Especificidade
   "html[data-theme] .theme-chili" (0,2,0) vence ".theme-chili" sozinho
   (0,1,0) mesmo a variável sendo redeclarada no próprio <body>. */
html[data-theme="light"] .theme-chili {
  --charcoal:#F7F1E4;
  --paper:#241C14;
  --paper-2:#FFFFFF;
  --card-bg:#FFFFFF;
  --card-text:#241C14;
  --card-border:#E4DAC5;
  --muted-text:#8A7B64;
  --line:#E4DAC5;
}

/* .theme-blue mantida por compatibilidade (variável antiga hoje sem
   nenhum lugar que a gere mais — o tema equivalente atual é
   .theme-ocean, abaixo, escolhido em Configurações → Aparência via
   PlatformSettings.system_theme, ver SYSTEM_THEME_CHOICES). */
.theme-blue, .theme-ocean {
  --ink:#0B1220;
  --charcoal:#101826;
  --paper:#FAF4E8;
  --paper-2:#E4ECF3;
  --accent:#2E86AB;
  --accent-dark:#20627E;
  --turmeric:#F0AD4E;
  --sage:#7AA06D;
  --line:#233047;
  --radius:12px;
  --card-bg:#16202F;
  --card-text:#FAF4E8;
  --card-border:#233047;
  --muted-text:#8FA0B8;
}

html[data-theme="light"] .theme-ocean {
  --charcoal:#EEF3F8;
  --paper:#0F1826;
  --paper-2:#FFFFFF;
  --card-bg:#FFFFFF;
  --card-text:#0F1826;
  --card-border:#DCE6F0;
  --muted-text:#5C7089;
  --line:#DCE6F0;
}

.theme-forest {
  --ink:#101A12;
  --charcoal:#17241A;
  --paper:#F5F4EA;
  --paper-2:#E9E4D0;
  --accent:#3E8E5B;
  --accent-dark:#2C6B41;
  --turmeric:#F0AD4E;
  --sage:#7AA06D;
  --line:#3A4A34;
  --radius:12px;
  --card-bg:#1F2E20;
  --card-text:#F5F4EA;
  --card-border:#334233;
  --muted-text:#9CAC91;
}

html[data-theme="light"] .theme-forest {
  --charcoal:#F1F0E4;
  --paper:#1B2A1D;
  --paper-2:#FFFFFF;
  --card-bg:#FFFFFF;
  --card-text:#1B2A1D;
  --card-border:#DCE3D2;
  --muted-text:#6D7B63;
  --line:#DCE3D2;
}

.theme-midnight {
  --ink:#0C0A16;
  --charcoal:#15111F;
  --paper:#F3F1FA;
  --paper-2:#E7E1F5;
  --accent:#8B5CF6;
  --accent-dark:#6D3FD1;
  --turmeric:#F0AD4E;
  --sage:#7AA06D;
  --line:#332A47;
  --radius:12px;
  --card-bg:#1D1830;
  --card-text:#F3F1FA;
  --card-border:#332A47;
  --muted-text:#A79CC2;
}

html[data-theme="light"] .theme-midnight {
  --charcoal:#F0EDFA;
  --paper:#170F28;
  --paper-2:#FFFFFF;
  --card-bg:#FFFFFF;
  --card-text:#170F28;
  --card-border:#E2DBF2;
  --muted-text:#6E6389;
  --line:#E2DBF2;
}

/* Seletor visual de tema (cards com prévia em gradiente) — usado na
   tela Configurações → Aparência do Super Admin, para escolher entre
   SYSTEM_THEME_CHOICES. Extraído de admin/settings/landing.html (onde
   era só do tema da landing page) para cá, para virar reutilizável
   agora que o tema é unificado (ver app/models/platform_settings.py). */
.theme-swatch-group { display: flex; gap: 12px; flex-wrap: wrap; }
.theme-swatch { cursor: pointer; }
.theme-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.theme-swatch-card {
  width: 120px; border: 2px solid var(--card-border); border-radius: 10px; padding: 10px;
  transition: border-color .2s, transform .2s;
}
.theme-swatch input:checked + .theme-swatch-card { border-color: var(--accent); transform: translateY(-2px); }
.theme-swatch-preview { height: 46px; border-radius: 6px; margin-bottom: 8px; }
.theme-swatch-label { font-size: .78rem; text-align: center; display: block; color: var(--card-text); }

* { box-sizing: border-box; }

body {
  background: var(--charcoal);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  /* Detalhes que tiram a "cara de site aberto no navegador": o retângulo
     cinza que o Chrome/Safari mobile pinta ao tocar em links/botões
     (some, sobra só o :active de cada componente, mais discreto) e o
     "puxão" de rolagem que revela a cor do sistema atrás do topo/rodapé
     da página inteira ao dar overscroll — deixa a rolagem presa ao
     conteúdo, como um app instalado. */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

.font-display { font-family: 'Archivo Black', sans-serif; letter-spacing: -0.02em; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.text-accent { color: var(--accent); }
.text-muted-custom { color: var(--muted-text) !important; }

/* Logotipo "MenuLink": as duas palavras coladas (sem espaço) e "Link"
   na cor de destaque, pra ler como um nome único de marca em vez de
   duas palavras soltas — em vez de tudo maiúsculo (MENU LINK), usa
   capitalização de nome próprio (Menu + Link) com letter-spacing bem
   apertado pra reforçar a junção visual. */
.brand-wordmark { letter-spacing: -0.01em; white-space: nowrap; }
.brand-wordmark .brand-wordmark-accent { color: var(--accent); }
[x-cloak] { display: none !important; }

/* ---------- Formulários ---------- */
.form-control, .form-select, .input-group-text {
  background: var(--charcoal); border-color: var(--card-border); color: var(--paper);
  font-size: .875rem; border-radius: 8px; padding: 10px 14px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent) 20%, transparent);
  background: var(--charcoal); color: var(--paper);
}
.form-control::placeholder { color: var(--muted-text); }
.form-label { color: var(--muted-text); }
.form-check-input { background-color: var(--charcoal); border-color: var(--card-border); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* Campo de senha com botão de mostrar/ocultar (ver comanda.js) */
.password-field-wrap { position: relative; }
.password-field-wrap .form-control { padding-right: 42px; }
.password-toggle-btn {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  background: none; border: none; color: var(--muted-text); padding: 6px;
  display: flex; align-items: center; cursor: pointer; border-radius: 6px;
}
.password-toggle-btn:hover { color: var(--paper); }

/* ---------- Botões ---------- */
.btn-chili {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
  border-radius: 8px; padding: 10px 20px;
}
.btn-chili:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-outline-chili { border-color: var(--accent); color: var(--accent); font-weight: 500; border-radius: 8px; padding: 6px 14px; background: transparent; }
.btn-outline-chili:hover { background: var(--accent); color: #fff; }
.btn-outline-secondary { color: var(--paper); border-color: var(--card-border); border-radius: 8px; padding: 6px 14px; }
.btn-outline-secondary:hover { background: color-mix(in srgb, var(--card-text) 12%, transparent); color: var(--paper); }
.btn-outline-custom { border: 1px solid var(--card-border); background: var(--card-bg); color: var(--card-text); font-weight: 500; border-radius: 8px; padding: 12px 24px; text-decoration: none; display: inline-block; }
.btn-outline-custom:hover { background: color-mix(in srgb, var(--card-text) 12%, transparent); }
.link-chili { color: var(--accent); text-decoration: none; font-weight: 500; }
.link-chili:hover { color: var(--accent-dark); text-decoration: underline; }

/* ---------- Painéis / cards genéricos ---------- */
.panel {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 20px; color: var(--card-text); box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.panel-title { font-family: 'Archivo Black'; font-size: 1rem; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }

/* Tabela (Bootstrap) no tema escuro — sem isso, .table cai no fundo
   branco padrão do Bootstrap, ilegível sobre .panel/.charcoal. Usado na
   tabela de clientes e na tabela de complementos do produto. */
.table { --bs-table-bg: transparent; --bs-table-color: var(--card-text); --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-hover-bg: rgba(255,255,255,.05); --bs-table-border-color: var(--card-border); color: var(--card-text); }
.table > thead { border-bottom-color: var(--card-border); }
.brand-mark {
  width: 44px; height: 44px; border-radius: 10px; background: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}
.empty-state { text-align: center; padding: 40px 20px; color: var(--muted-text); }
.empty-state i { font-size: 2rem; margin-bottom: 10px; display: block; color: var(--card-border); }

/* ---------- Estado vazio "hero" (ícone grande + título + texto + CTA) ----------
   Usado nas listagens do painel do lojista (Pedidos, Histórico, Clientes,
   Cardápio, Banners) — ver app/templates/lojista/_empty_state.html. O
   ícone fica num círculo com um glow radial na cor de destaque, no
   lugar de uma ilustração externa, mantendo a mesma sensação de "card
   com arte central" pedida sem depender de um arquivo de imagem. */
.empty-state-hero { text-align: center; padding: 56px 24px; }
.empty-state-icon {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 22px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 72%);
}
.empty-state-icon::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.empty-state-icon i { position: relative; font-size: 2.5rem; color: var(--accent); }
.empty-state-title { color: #fff; font-size: 1.2rem; margin-bottom: 8px; }
.empty-state-text { color: var(--muted-text); font-size: .88rem; max-width: 380px; margin: 0 auto 20px; }
@media (max-width: 575.98px) {
  .empty-state-hero { padding: 40px 16px; }
  .empty-state-icon { width: 76px; height: 76px; }
  .empty-state-icon i { font-size: 2rem; }
}

/* ---------- KPI cards ---------- */
.kpi-card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 20px; height: 100%; color: var(--card-text);
  display: flex; justify-content: space-between; align-items: center;
}
.kpi-card .kpi-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-text); font-weight: 600; }
.kpi-card .kpi-value { font-family: 'Archivo Black'; font-size: 1.75rem; margin-top: 4px; line-height: 1.1; }
.kpi-card .kpi-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; }

/* ---------- Ticket / comanda ---------- */
.ticket {
  background: var(--card-bg); border: 1px dashed var(--line); border-radius: 8px; padding: 16px;
  font-family: 'JetBrains Mono', monospace; position: relative; margin-bottom: 12px;
  color: var(--card-text); transition: border-color .2s;
}
.ticket:hover { border-color: var(--muted-text); }
.ticket-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ticket-num { font-weight: 700; font-size: .95rem; color: var(--paper); }
.ticket-items { font-size: .85rem; color: var(--muted-text); line-height: 1.6; }

.status-pill {
  font-family: 'Inter'; font-size: .7rem; font-weight: 700; padding: 4px 12px; border-radius: 30px;
  text-transform: uppercase; letter-spacing: .04em; display: inline-block;
}
.status-pending { background: rgba(229,74,54,0.15); color: #FF8A7A; }
.status-confirmed { background: rgba(67,97,238,0.15); color: #9DB2FF; }
.status-preparing { background: rgba(240,173,78,0.15); color: #FCD581; }
.status-out_for_delivery, .status-ready_for_pickup { background: rgba(122,160,109,0.15); color: #BCE2AF; }
.status-completed { background: rgba(255,255,255,0.08); color: var(--paper); }
.status-canceled { background: rgba(255,255,255,0.04); color: var(--muted-text); text-decoration: line-through; }

/* ---------- Carrossel de filtros (chips) ----------
   Barras de filtro tipo "chip" (status de Pedidos/Histórico, período do
   Histórico, ordenação de Clientes, categorias de Produtos) — em vez de
   quebrar em várias linhas quando não cabem (ficava com cortes
   desajeitados em telas estreitas), viram uma faixa que rola na
   horizontal em uma linha só, como um carrossel. A barra de rolagem
   fica escondida (mais discreta) mas a rolagem continua funcionando
   normalmente por toque/arraste. */
.chip-scroll {
  display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll > * { flex-shrink: 0; white-space: nowrap; }

.status-badge { font-size: .7rem; font-weight: 700; padding: 4px 12px; border-radius: 30px; text-transform: uppercase; letter-spacing: .04em; display: inline-block; color: #fff; }
.status-active { background: var(--sage); }
.status-trial { background: var(--accent); }
.status-blocked { background: #C93522; }
.status-suspended { background: var(--muted-text); color: var(--ink); }

/* ---------- Product / banner cards ---------- */
.product-card { border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; background: var(--card-bg); height: 100%; color: var(--card-text); transition: transform .2s; }
.product-card:hover { transform: translateY(-2px); }
.product-card img { width: 100%; height: 140px; object-fit: cover; background: #3A3127; }
.product-card .body { padding: 14px; }
.product-card .price { font-family: 'Archivo Black'; color: var(--accent); font-size: 1.1rem; }

/* .banner-row-main (imagem + título/subtítulo) e .banner-row-actions
   (badge + botões) são dois grupos flex dentro de .banner-row — no
   desktop cabem lado a lado numa linha só; no mobile (ver breakpoint
   575.98px abaixo) cada grupo vira uma linha inteira, em vez de espremer
   os 5 itens (imagem, texto, badge, editar, excluir) numa única linha
   estreita e "deformar" o card. */
.banner-row { border: 1px solid var(--card-border); border-radius: var(--radius); padding: 12px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; background: var(--card-bg); margin-bottom: 10px; color: var(--card-text); }
.banner-row img { width: 90px; height: 56px; object-fit: cover; border-radius: 8px; background: #3A3127; flex-shrink: 0; }
.banner-row-main { display: flex; align-items: center; gap: 14px; flex: 1 1 240px; min-width: 0; }
.banner-row-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.min-w-0 { min-width: 0; }

/* ---------- Cliente (cartão usado abaixo do breakpoint md, ver
   lojista/customers/list.html) ----------
   A tabela de 7 colunas (nome, telefone, pedidos, total gasto, último
   pedido, cliente desde, excluir) fica ilegível/espremida em telas de
   celular mesmo com scroll horizontal — vira um cartão por cliente.
   Só nome + resumo (pedidos/total gasto) ficam sempre visíveis; os
   demais dados (telefone, último pedido, cliente desde) ficam atrás de
   um "Ver dados" (collapse), pra não empilhar informação demais de
   cara — o botão de remover fica sempre à mão ao lado dele. */
.customer-card { border: 1px solid var(--card-border); border-radius: var(--radius); padding: 14px; background: var(--card-bg); margin-bottom: 10px; color: var(--card-text); }
.customer-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.customer-card-head > div { min-width: 0; }
.customer-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: .82rem; margin: 10px 0 0; }
.customer-card-stats dt { color: var(--muted-text); font-weight: 400; }
.customer-card-stats dd { color: var(--card-text); margin: 0 0 4px; }
.customer-card-actions { display: flex; gap: 8px; margin-top: 10px; }
.customer-card-actions [data-bs-toggle="collapse"] .bi-chevron-down { transition: transform .2s; }
.customer-card-actions [data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.badge-order { font-family: 'JetBrains Mono'; background: rgba(255,255,255,.05); border: 1px solid var(--card-border); border-radius: 6px; padding: 3px 10px; font-size: .75rem; color: var(--muted-text); }

/* ---------- Chat (suporte lojista <-> Super Admin) ----------
   Layout inspirado no WhatsApp (pedido explícito do usuário: "mais
   natural pro lojista") — barra de cabeçalho com avatar, fundo com um
   padrão sutil de "papel de parede", bolhas com uma quina reta do lado
   de quem enviou (efeito de "rabinho" só com border-radius assimétrico,
   sem precisar de SVG/máscara), separador de dia centralizado, e uma
   barra de entrada em formato de pílula com botão de enviar redondo. */
.chat-panel {
  display: flex; flex-direction: column; height: min(640px, 75vh); overflow: hidden;
}

.chat-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--card-border); background: rgba(0,0,0,.12); flex-shrink: 0;
}
.chat-header-name {
  font-weight: 700; font-size: .95rem; color: var(--card-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-header-status { font-size: .75rem; color: var(--muted-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* min-width: 0 é o que permite o nome/e-mail truncar com "..." dentro de
   um flex item em vez de forçar o cabeçalho a crescer/quebrar em duas
   linhas — sem isso, um nome de loja comprido (ex: "Braseiro & Cia")
   espremido ao lado do link "Ver dados da loja" quebrava feio no
   celular. */
.chat-header > div { min-width: 0; }

.chat-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-avatar-sm { width: 36px; height: 36px; font-size: .9rem; }

.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 4px;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--card-text) 5%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
}
.chat-day-divider { display: flex; justify-content: center; margin: 10px 0; }
.chat-day-divider span {
  background: rgba(0,0,0,.25); color: var(--muted-text); font-size: .7rem; font-weight: 600;
  padding: 3px 12px; border-radius: 30px; text-transform: uppercase; letter-spacing: .03em;
}

.chat-bubble-row { display: flex; margin: 2px 0; }
.chat-bubble-row-own { justify-content: flex-end; }
.chat-bubble {
  max-width: 75%; border-radius: 14px 14px 14px 3px; padding: 8px 12px;
  background: var(--surface-2, rgba(255,255,255,.07)); color: var(--card-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.chat-bubble-own { border-radius: 14px 14px 3px 14px; background: var(--accent); color: #1B140F; }
.chat-bubble-body { font-size: .9rem; white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
.chat-bubble-time { font-size: .65rem; opacity: .65; margin-top: 3px; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 3px; }

/* Ticks de "enviada/visualizada" (estilo WhatsApp) — só aparecem nas
   PRÓPRIAS mensagens (ver _chat_messages.html). Um risco (bi-check) sem
   cor de destaque = mandada mas ainda não vista pelo outro lado; dois
   riscos coloridos (bi-check-all) = já visualizada (ChatMessage.read_at
   preenchido, ver ChatService.mark_read). */
.chat-bubble-tick { font-size: .8rem; opacity: .7; }
.chat-bubble-tick-read { color: var(--accent-dark); opacity: 1; }
.chat-bubble-own .chat-bubble-tick-read { color: #1B140F; opacity: .85; }

.chat-empty-state { margin: auto; text-align: center; color: var(--muted-text); padding: 30px; }
.chat-empty-state i { font-size: 1.8rem; opacity: .5; display: block; margin-bottom: 8px; }

.chat-send-error { border-radius: 10px; }

/* ---------- Anexo de chat (comprovante/imagem/PDF) ---------- */
.chat-bubble-attachment { margin-bottom: 6px; }
.chat-attachment-thumb {
  display: block; max-width: 220px; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--card-text) 15%, transparent);
}
.chat-attachment-file {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--card-text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-text) 15%, transparent);
  color: inherit; text-decoration: none; max-width: 220px;
}
.chat-attachment-file:hover { background: color-mix(in srgb, var(--card-text) 10%, transparent); color: inherit; }
.chat-attachment-file i.bi-file-earmark-pdf { font-size: 1.3rem; color: var(--accent); flex-shrink: 0; }
.chat-attachment-file-name { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.chat-attachment-file-open { font-size: .8rem; opacity: .6; flex-shrink: 0; }

.chat-input-bar {
  display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px;
  border-top: 1px solid var(--card-border); background: rgba(0,0,0,.1); flex-shrink: 0;
}
/* Envolve a textarea + o nome do arquivo selecionado (ver
   .chat-attachment-selected) num mesmo bloco flex/coluna, pro indicador
   de anexo aparecer logo abaixo da caixa de texto sem bagunçar o
   alinhamento dos botões (anexo/enviar), que continuam alinhados pela
   base (`align-items: flex-end` no .chat-input-bar). */
.chat-input-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-input {
  flex: 1; border-radius: 22px; border: 1px solid var(--card-border); background: var(--card-bg);
  color: var(--card-text); padding: 10px 16px; resize: none; max-height: 120px;
}
.chat-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.chat-attachment-selected {
  font-size: .72rem; color: var(--accent); padding: 3px 16px 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.chat-attachment-selected:empty { display: none; }
.chat-attach-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--card-border); background: transparent;
  color: var(--muted-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 1.05rem; transition: filter .15s, color .15s, border-color .15s;
}
.chat-attach-btn:hover { color: var(--accent); border-color: var(--accent); }
.chat-send-btn {
  width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--accent); color: #1B140F;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem;
  transition: filter .15s;
}
.chat-send-btn:hover { filter: brightness(1.1); }

/* ---------- Central de Suporte (lista de conversas do admin) ---------- */
.support-conversation-list { max-height: min(640px, 75vh); overflow-y: auto; }
.support-conversation-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--card-border);
  color: var(--card-text); text-decoration: none; transition: background .15s;
}
/* O texto (nome/badge/última mensagem) fica num filho com .flex-grow-1,
   mas um item flex não encolhe abaixo do próprio conteúdo por padrão
   (min-width: auto) — sem isso o text-truncate do template não tem
   efeito nenhum em telas estreitas e a linha estoura/empurra o avatar.
   Mesmo ajuste já usado em .chat-header (ver acima). */
.support-conversation-item > .flex-grow-1 { min-width: 0; }
.support-conversation-item:first-child { border-top: none; }
.support-conversation-item:hover { background: rgba(255,255,255,.04); color: var(--card-text); }
.support-conversation-item.active { background: color-mix(in srgb, var(--accent) 12%, transparent); border-left: 3px solid var(--accent); padding-left: 13px; }

/* ---------- Upload / dropzone ---------- */
.dropzone { border: 2px dashed var(--card-border); border-radius: 10px; padding: 24px 16px; text-align: center; cursor: pointer; transition: all .2s ease; background: rgba(0,0,0,.1); }
.dropzone:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, transparent); }
.dropzone i { font-size: 1.8rem; color: var(--muted-text); margin-bottom: 4px; }
.dropzone input[type=file] { display: none; }
/* Preview local (FileReader) do arquivo recém-selecionado, antes do
   envio — ver comanda.js `initDropzonePreviews`. JS alterna a classe
   `d-none` (Bootstrap, !important) no ícone/texto e na prévia — não dá
   pra alternar só via `.has-preview i { display: none }` aqui porque o
   ícone tem `d-block` (`!important` do Bootstrap), que ganharia de
   qualquer regra deste arquivo por especificidade. */
.dropzone-preview { max-height: 140px; max-width: 100%; border-radius: 8px; margin: 0 auto 8px; object-fit: cover; }
.dropzone-compact { padding: 12px; }
.dropzone-compact .dropzone-preview { max-height: 70px; }
.dropzone-compact i { font-size: 1.2rem; margin-bottom: 0; }

/* Wrapper com posição relativa pra ancorar os botões-ícone de remover
   (ver comanda.js `initDropzonePreviews`) — ficam fora do <label> de
   propósito, como irmãos, pra não precisar de stopPropagation contra o
   onclick que abre o seletor de arquivo. */
.dropzone-wrap { position: relative; }
.dropzone-remove-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.55); color: #fff; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease;
}
.dropzone-remove-btn:hover { background: rgba(229,74,54,.85); }

.upload-meta { font-size: .75rem; color: var(--muted-text); margin-top: 4px; }
.upload-error { font-size: .8rem; color: #FF8A7A; background: rgba(229,74,54,0.1); border: 1px solid rgba(229,74,54,0.2); border-radius: 8px; padding: 8px 12px; margin-top: 8px; }

/* Pré-visualização do link do cardápio no cadastro — mostra pra quem
   está criando a loja, em texto simples (sem "URL"/"slug"), qual vai
   ser o endereço final e completo que ele vai poder mandar pro
   cliente. Usa a cor de destaque pra chamar atenção sem parecer erro. */
.slug-preview-box {
  font-size: .8rem; color: var(--card-text);
  background: color-mix(in srgb, var(--accent) 10%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.slug-preview-box i { color: var(--accent); }
.slug-preview-box .font-mono { color: var(--accent); font-weight: 600; word-break: break-all; }

/* ---------- Modais ---------- */
.modal-content { background: var(--card-bg); color: var(--card-text); border: 1px solid var(--card-border); border-radius: 14px; }
.modal-header, .modal-footer { border-color: var(--card-border); padding: 16px 24px; }
.modal-body { padding: 24px; }
.modal-title { color: var(--paper); font-family: 'Archivo Black', sans-serif; }
.btn-close { filter: invert(1) brightness(0.9); opacity: .6; }

/* ---------- Alertas informativos (Bootstrap .alert-*) ---------- */
/* Sem isso, o Bootstrap padrão usa fundo claro/branco com texto escuro
   — no tema escuro da Comanda isso fica quase ilegível (texto claro
   sobre fundo claro em cima de um painel escuro), especialmente
   perceptível quando um toast de flash (ver .toast-flash-* abaixo)
   aparece por cima. Mesma paleta dos toasts, pra manter consistência. */
.alert { border-radius: 10px; }
.alert-secondary { background: rgba(255,255,255,.06); border: 1px solid var(--card-border); color: var(--card-text); }
.alert-success { background: rgba(122,160,109,.16); border: 1px solid rgba(122,160,109,.4); color: #BCE2AF; }
.alert-danger { background: rgba(229,74,54,.16); border: 1px solid rgba(229,74,54,.4); color: #FF8A7A; }
.alert-warning { background: rgba(240,173,78,.16); border: 1px solid rgba(240,173,78,.4); color: #FCD581; }
.alert-info { background: rgba(67,97,238,.16); border: 1px solid rgba(67,97,238,.4); color: #9DB2FF; }
.alert a, .alert strong { color: inherit; }

/* ---------- Barra de progresso de navegação ---------- */
/* Elemento único, criado via JS (comanda.js) e reaproveitado a cada
   requisição HTMX (navegação boosted da sidebar/barra inferior E
   salvamentos em drawer) — feedback visual imediato de que "algo está
   acontecendo", em vez da tela parecer travada enquanto o servidor
   responde. Cor de destaque (--accent) acompanha o tema em vigor. */
.nav-progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; opacity: 0;
  background: var(--accent, #E54A36); z-index: 3000; pointer-events: none;
  box-shadow: 0 0 8px var(--accent, #E54A36);
}

/* ---------- Toasts de flash ---------- */
/* top:16px por padrão (páginas sem topbar: landing, login, cardápio
   público). Nos painéis (lojista/admin), há uma topbar "sticky" no mesmo
   canto superior — sem o offset abaixo, o toast (z-index mais alto)
   ficava por cima dos botões da topbar (tema, "Ver cardápio"),
   bloqueando o clique e parecendo uma sobreposição de informação. */
.toast-flash-stack { position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; max-width: 380px; width: calc(100% - 32px); pointer-events: none; }
body:has(.app-shell) .toast-flash-stack { top: 84px; }
.toast-flash {
  border-radius: 10px; padding: 14px 16px; font-size: .875rem; box-shadow: 0 12px 32px rgba(0,0,0,.4);
  display: flex; align-items: flex-start; gap: 10px; border: 1px solid; backdrop-filter: blur(6px);
  pointer-events: auto;
}
.toast-flash-icon { font-size: 1.05rem; line-height: 1.4; flex-shrink: 0; }
.toast-flash-message { flex: 1; line-height: 1.4; word-break: break-word; }
.toast-flash-close { background: none; border: none; color: inherit; opacity: .6; font-size: 1.1rem; line-height: 1; cursor: pointer; flex-shrink: 0; padding: 0; transition: opacity .15s; }
.toast-flash-close:hover { opacity: 1; }
.toast-flash-success { background: rgba(122,160,109,.16); border-color: rgba(122,160,109,.4); color: #BCE2AF; }
.toast-flash-danger { background: rgba(229,74,54,.16); border-color: rgba(229,74,54,.4); color: #FF8A7A; }
.toast-flash-warning { background: rgba(240,173,78,.16); border-color: rgba(240,173,78,.4); color: #FCD581; }
.toast-flash-info { background: rgba(67,97,238,.16); border-color: rgba(67,97,238,.4); color: #9DB2FF; }
.toast-flash-secondary { background: rgba(255,255,255,.07); border-color: var(--card-border); color: var(--paper); }

/* Entrada: desliza da direita + some suavemente. Saída: um pouco mais
   rápida, encolhendo pra cima — evita o "pisca" de esconder/mostrar
   instantâneo que existia antes (só display:none/block via x-show). */
.toast-flash-enter { transition: opacity .35s ease, transform .35s cubic-bezier(.22,.9,.32,1); }
.toast-flash-enter-start { opacity: 0; transform: translateX(24px) scale(.96); }
.toast-flash-enter-end { opacity: 1; transform: translateX(0) scale(1); }
.toast-flash-leave { transition: opacity .2s ease, transform .2s ease, margin-top .2s ease, max-height .2s ease; }
.toast-flash-leave-start { opacity: 1; transform: scale(1); max-height: 100px; }
.toast-flash-leave-end { opacity: 0; transform: scale(.97) translateX(8px); max-height: 0; margin-top: -10px; }

/* ---------- Painel de autenticação (login/cadastro/recuperar) ----------
   Vídeo de fundo é OPCIONAL (PlatformSettings.auth_background_video,
   configurado pelo Super Admin em Configurações → Aparência) — sem ele,
   .auth-shell continua com o fundo sólido padrão do tema ativo. Com
   vídeo, .auth-video-bg cobre a tela inteira (mesmo padrão de
   .hero-video-bg da landing page) e .auth-panel vira um cartão "vidro
   fosco" (glassmorphism) flutuando por cima, pra continuar legível
   sobre qualquer cena do vídeo. */
.auth-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; gap: 20px; position: relative; overflow: hidden; }
.auth-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.auth-video-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 55%, transparent), color-mix(in srgb, var(--ink) 88%, transparent)); }
.auth-shell-with-video .auth-back-link,
.auth-shell-with-video .auth-tabs,
.auth-shell-with-video .auth-panel { position: relative; z-index: 2; }
.auth-shell-with-video .auth-panel {
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: color-mix(in srgb, var(--card-text) 14%, transparent);
}
.auth-shell-with-video .auth-tabs { background: color-mix(in srgb, var(--ink) 40%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.auth-panel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: calc(var(--radius) + 4px); padding: 40px 30px; width: 100%; max-width: 440px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); animation: authPanelIn .5s ease both; }
.auth-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-text); text-decoration: none; font-size: .85rem; }
.auth-back-link:hover { color: var(--card-text); }
/* As abas Entrar/Criar Loja são NAVEGAÇÃO (trocam de tela), não uma
   ação a executar — por isso usam um contorno fino na aba ativa em vez
   do preenchimento sólido de var(--accent) que os botões de ação
   (.btn-chili) usam. Preenchimento igual ao do botão "Entrar"/"Criar
   Loja" logo abaixo confundia o lojista, que achava que clicar na aba
   também enviaria o formulário. */
.auth-tabs { display: flex; gap: 4px; background: color-mix(in srgb, var(--card-text) 6%, transparent); border-radius: 30px; padding: 4px; width: 100%; max-width: 440px; }
.auth-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 8px 12px; border-radius: 26px; font-size: .85rem; font-weight: 600; color: var(--muted-text); text-decoration: none; border: 1px solid transparent; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.auth-tab:hover { color: var(--card-text); }
.auth-tab.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* Overlay de "preparando tudo" no envio do cadastro (auth/register.html)
   — cobre a tela inteira assim que o formulário é enviado de verdade,
   pra dar sensação de progresso durante o tempo real de criação da loja
   (tenant + usuário + conteúdo de exemplo + mensagem de boas-vindas). */
.register-loading-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.register-loading-overlay.is-visible { opacity: 1; pointer-events: all; }
.register-loading-box { text-align: center; color: #fff; padding: 0 24px; }
.register-loading-box .spinner-border { color: var(--accent); width: 3rem; height: 3rem; }
.register-loading-text { font-weight: 600; font-size: 1.05rem; max-width: 300px; margin-left: auto; margin-right: auto; }

/* Assistente de cadastro em passos (auth/register.html) — um
   campo/pergunta por tela, com transição animada entre elas. Só some
   um passo por vez quando o JS roda (classe `.js-wizard` no <form>) —
   sem JavaScript, `.reg-step` nunca fica escondido, e a pessoa vê o
   formulário inteiro de uma vez (camada 100% progressiva). */
.reg-progress { margin-bottom: 18px; }
.reg-progress-track { height: 6px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--card-text) 10%, transparent); }
.reg-progress-fill { height: 100%; border-radius: 4px; background: var(--accent); transition: width .35s cubic-bezier(.22, 1, .36, 1); }
.reg-progress-label { font-size: .75rem; color: var(--muted-text); margin: 6px 0 0; text-align: right; }

#register-form.js-wizard .reg-step { display: none; }
#register-form.js-wizard .reg-step.is-active { display: block; }

.reg-step-question { font-family: 'Archivo Black', sans-serif; font-size: 1.15rem; line-height: 1.3; margin: 0 0 4px; }
.reg-step-hint { font-size: .8rem; color: var(--muted-text); margin: 0 0 14px; }
.reg-step-nav { display: flex; gap: 10px; margin-top: 18px; }
.reg-step-nav .btn-outline-secondary { border-color: var(--card-border); color: var(--card-text); white-space: nowrap; }

@keyframes regStepInNext {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes regStepInBack {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}
.reg-step.reg-step-in-next { animation: regStepInNext .32s cubic-bezier(.22, 1, .36, 1); }
.reg-step.reg-step-in-back { animation: regStepInBack .32s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) {
  .reg-step.reg-step-in-next, .reg-step.reg-step-in-back { animation: none; }
}
@keyframes authPanelIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-panel { animation: none; }
  .auth-video-bg { display: none; }
}

/* ---------- "Revelar ao rolar" genérico (data-reveal, ver comanda.js) ---------- */
.reveal-pending { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms); }
.reveal-pending.is-visible { opacity: 1; transform: none; }

/* ---------- Caixa de ícone com fundo na cor de destaque ----------
   Usada na landing page (3 destaques do hero) e no dashboard do
   lojista (atalhos rápidos) — extraída para cá (era duplicada como
   <style> local da landing page + estilo inline no dashboard, os dois
   com a cor do tema "chili" fixa em rgba(), que não acompanhava a
   troca de tema do sistema) para as duas fontes sempre acompanharem o
   tema ativo (color-mix com var(--accent), não mais uma cor fixa). */
.feature-icon-box {
  width: 48px; height: 48px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 20px;
}

/* ---------- Cards de opção que abrem uma gaveta de edição ----------
   Genérico, usado em qualquer tela de configuração dividida em seções
   (landing page, aparência do admin, aparência do lojista): cada card
   é um <button type="button" data-bs-toggle="offcanvas" ...> que abre
   a gaveta daquela seção — o formulário de verdade continua sendo um
   único <form> (as gavetas ficam dentro dele), os cards só reorganizam
   a apresentação, não mudam onde os dados são enviados. */
.settings-option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.settings-option {
  display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 20px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  color: inherit;
}
.settings-option:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.18); border-color: var(--accent); }
.settings-option-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-option-icon {
  width: 42px; height: 42px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0;
}
.settings-option-title { font-weight: 600; color: var(--card-text); }
.settings-option-preview { font-size: .82rem; color: var(--muted-text); line-height: 1.4; }
.settings-option-thumb { width: 100%; height: 70px; object-fit: cover; border-radius: 8px; }
.settings-option-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700;
  color: #fff; background: var(--accent); padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.settings-option-swatch { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--card-border); flex-shrink: 0; }

/* ---------- App shell (sidebar + topbar), usado pelo lojista e super admin ---------- */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.sidebar {
  width: 260px; flex-shrink: 0; background: var(--ink); color: var(--sidebar-text);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh;
  transition: width .25s cubic-bezier(.4,0,.2,1); overflow: hidden; border-right: 1px solid var(--sidebar-border);
}
.sidebar.is-collapsed { width: 78px; }
@media (max-width: 991.98px) {
  /* Efeito de gaveta: a sidebar mora fora da tela (translateX) e desliza
     pra dentro com transform (mais suave/performático que animar
     "left") quando "show" é ligado — mesma easing da versão recolhível
     de desktop, só que mais rápida por ser um deslize maior. Sombra
     forte simula profundidade, como uma gaveta física se abrindo por
     cima do conteúdo.

     `100vh` no celular é calculado com base na altura MÁXIMA da tela
     (barra de endereço recolhida) — mas ao abrir a gaveta a barra ainda
     costuma estar visível, então a gaveta (fixed, 100vh) nascia maior
     que a área realmente visível e o rodapé (avatar + Sair da conta)
     ficava escondido embaixo da dobra, só aparecendo depois de rolar a
     página (o que recolhe a barra do navegador) — dava a impressão de
     bug. `100dvh` (dynamic viewport height) acompanha a altura visível
     de verdade; mantemos o `100vh` antes como fallback pra navegadores
     que não suportam `dvh`. */
  .sidebar {
    position: fixed; left: 0; top: 0; height: 100vh; height: 100dvh; width: 280px; z-index: 1050;
    transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    border-right: 1px solid var(--sidebar-border); box-shadow: 12px 0 40px rgba(0,0,0,.45);
  }
  .sidebar.show { transform: translateX(0); }
  /* Backdrop com fade (opacity) em vez de aparecer/sumir abruptamente
     (display none/block não anima) — o `transition-delay` na
     visibility faz ela só virar "hidden" depois do fade de saída
     terminar, mas "visible" imediatamente na entrada. */
  .sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 1040; backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .sidebar-backdrop.show { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s linear 0s; }
}
.sidebar-brand { padding: 24px 20px; border-bottom: 1px solid var(--sidebar-border); display: flex; align-items: center; gap: 12px; }
.sidebar.is-collapsed .sidebar-brand { justify-content: center; }
.sidebar-brand .mark { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; overflow: hidden; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
.sidebar-brand .mark img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-brand-text { flex: 1; min-width: 0; overflow: hidden; }
.sidebar.is-collapsed .sidebar-brand-text { display: none; }

.nav-food { padding: 16px 12px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.nav-food .nav-link {
  color: var(--sidebar-muted); border-radius: 10px; padding: 12px 14px; margin-bottom: 6px;
  display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: .95rem;
  transition: all .2s ease; white-space: nowrap; position: relative; text-decoration: none;
}
.sidebar.is-collapsed .nav-food .nav-link { justify-content: center; padding: 12px; }
.nav-food .nav-link i { font-size: 1.2rem; width: 24px; text-align: center; flex-shrink: 0; }
.nav-food .nav-link:hover { background: rgba(255,255,255,.04); color: #fff; }
.nav-food .nav-link.active { background: var(--accent); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); }
.sidebar.is-collapsed .nav-link .nav-label, .sidebar.is-collapsed .nav-link .nav-count { display: none; }

/* Botão de recolher/expandir — alinhado na mesma coluna dos ícones do
   menu (herda `.nav-food .nav-link`, inclusive o
   `.sidebar.is-collapsed .nav-food .nav-link` que centraliza tudo
   quando recolhida), como o primeiro item de .nav-food, acima do
   Dashboard/Métricas Core — em vez de espremido ao lado da logo em
   .sidebar-brand (onde colidia visualmente com ela quando a sidebar
   estava recolhida: os dois dividiam uma coluna de 78px).
   Visualmente é só um ícone, não um botão: sem preenchimento no hover
   (diferente dos nav-links de destino), levemente apagado em repouso e
   com opacidade total só ao passar o mouse — reforça que é um
   controle, não uma seção do menu. */
.nav-collapse-toggle {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left; opacity: .75;
}
.nav-collapse-toggle:hover { background: transparent; opacity: 1; }

/* Ícone de hambúrguer (3 linhas), sempre 3 linhas — nunca vira "X".
   Ao recolher, as barras de cima/baixo encolhem e deslizam levemente
   (com um pequeno atraso escalonado entre elas), formando um efeito de
   "aperto" animado que sinaliza a ação sem trocar a metáfora visual. */
.hamburger-icon { width: 24px; height: 16px; flex-shrink: 0; position: relative; display: inline-flex; flex-direction: column; justify-content: space-between; }
.hamburger-icon span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: width .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1); }
.hamburger-icon.is-active span:nth-child(1) { width: 60%; transform: translateY(1px); transition-delay: .04s; }
.hamburger-icon.is-active span:nth-child(2) { width: 100%; }
.hamburger-icon.is-active span:nth-child(3) { width: 60%; transform: translateY(-1px); transition-delay: .04s; }
.sidebar-foot { padding: 16px 20px; border-top: 1px solid var(--sidebar-border); font-size: .8rem; color: var(--sidebar-muted); white-space: nowrap; background: rgba(0,0,0,0.15); }
/* Recolhida: some só o nome/loja (texto), mas mantém avatar + botão de
   sair visíveis e centralizados — antes o rodapé inteiro sumia
   (opacity:0 + height:0), deixando o logout inacessível sem expandir a
   sidebar de novo primeiro. */
.sidebar.is-collapsed .sidebar-foot { padding: 12px 0; }

/* Chip de usuário no rodapé da sidebar (lojista/admin): avatar com
   inicial + nome/loja + botão de sair dedicado (ícone maior, com fundo
   próprio e hover destacado) — antes era só um link de texto simples,
   fácil de não perceber como a ação de logout. */
.user-chip { display: flex; align-items: center; gap: 10px; }
.sidebar.is-collapsed .user-chip { flex-direction: column; gap: 8px; }
.user-avatar {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 1rem; color: #1B140F;
  background: conic-gradient(from 220deg, var(--accent), var(--accent-dark, var(--accent)), var(--accent));
}
.sidebar.is-collapsed .user-avatar { margin: 0 auto; }
.user-chip-text { flex: 1; min-width: 0; overflow: hidden; }
.sidebar.is-collapsed .user-chip-text { display: none; }
.user-chip-name { color: var(--paper); font-weight: 600; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip-role { color: var(--sidebar-muted); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-logout-btn {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--sidebar-muted); border: 1px solid var(--sidebar-border); background: transparent; font-size: 1.05rem;
  transition: background .15s, color .15s, border-color .15s;
}
.sidebar.is-collapsed .user-logout-btn { margin: 0 auto; }
.user-logout-btn:hover { background: rgba(229,74,54,.16); border-color: rgba(229,74,54,.4); color: #FF8A7A; }

/* Drawer direito (offcanvas) usado para criar/editar produto — os blocos
   (dados do produto, fotos, complementos) ficam empilhados um abaixo do
   outro, então essa largura só precisa caber confortavelmente o form de
   uma coluna (não mais um layout de duas colunas lado a lado); o lojista
   rola a barra pra baixo pra ir preenchendo cada bloco.
   Importante: setar --bs-offcanvas-width (a variável que o Bootstrap usa
   internamente pra "width" do .offcanvas-end) em vez de "width" direto —
   o seletor composto ".offcanvas.offcanvas-end" do Bootstrap tem
   especificidade maior que a classe única ".drawer-wide" e sempre
   ganharia da nossa própria regra de "width". */
.drawer-wide { --bs-offcanvas-width: min(640px, 95vw); background: var(--charcoal); color: var(--paper); }
.drawer-wide .offcanvas-header { border-bottom: 1px solid var(--card-border); }
.drawer-wide .btn-close { filter: invert(1) brightness(2); }

/* Barra de ações (Salvar/Excluir) no final do drawer de produto —
   depois de fotos e complementos, não junto ao form de dados, pra
   aparecer só quando o lojista rolar até o fim (ver
   products/_form_fragment.html). Fica no fluxo normal do documento
   (não é sticky/fixa) — a linha acima já deixa claro que é uma barra
   de ação, sem sobrepor os painéis anteriores. */
.drawer-actions { border-top: 1px solid var(--card-border); padding-top: 16px; margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Drawer estreito, para formulários ainda mais simples (ex.: banner). */
.drawer-narrow { --bs-offcanvas-width: min(560px, 95vw); background: var(--charcoal); color: var(--paper); }
.drawer-narrow .offcanvas-header { border-bottom: 1px solid var(--card-border); }
.drawer-narrow .btn-close { filter: invert(1) brightness(2); }

.main { flex: 1; min-width: 0; background: var(--charcoal); }
.topbar {
  background: color-mix(in srgb, var(--charcoal) 85%, transparent); border-bottom: 1px solid var(--card-border);
  backdrop-filter: blur(10px); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: 1.25rem; margin: 0; font-weight: 700; color: var(--paper); font-family: 'Archivo Black', sans-serif; }
.content { padding: 24px; }

/* Barra chamativa de fim de período de teste (últimos dias / tolerância
   / prazo esgotado) — ver layouts/lojista_panel.html. Deliberadamente
   "impossível de ignorar": cor sólida de alerta, sticky no topo do
   conteúdo, texto em negrito. Contraste com o aviso discreto (texto
   pequeno sem fundo) mostrado no resto do período de teste. */
.trial-urgent-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #C93522; color: #fff; font-weight: 600; font-size: .85rem;
  padding: 10px 16px; border-radius: 10px;
  position: sticky; top: 8px; z-index: 5;
  box-shadow: 0 4px 16px rgba(201, 53, 34, .35);
}
.trial-urgent-bar i { font-size: 1.1rem; }

/* ---------- Barra de navegação inferior (só no celular) ----------
   O maior detalhe que faz o painel parecer um app de verdade em vez de
   um site aberto no celular: os destinos mais usados ficam fixos
   embaixo, ao alcance do polegar, e "Mais" abre a mesma gaveta lateral
   de sempre (sidebarOpen, já existe pro botão hamburguer) — sem duplicar
   nenhuma rota ou lógica de "ativo", só uma segunda porta de entrada pro
   mesmo menu. Escondida em telas grandes (d-lg-none no markup), onde a
   sidebar fixa já cumpre esse papel. */
.bottom-tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; background: color-mix(in srgb, var(--charcoal) 94%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--sidebar-border, var(--card-border));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-tab-bar-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 4px 6px; min-height: 56px; color: var(--sidebar-muted, var(--muted-text));
  text-decoration: none; font-size: .66rem; font-weight: 600; text-align: center; line-height: 1.1;
  border: none; background: none; position: relative; -webkit-tap-highlight-color: transparent;
}
.bottom-tab-bar-item i { font-size: 1.3rem; }
.bottom-tab-bar-item.active { color: var(--accent); }
.bottom-tab-bar-item .status-badge {
  position: absolute; top: 4px; right: calc(50% - 26px); font-size: .6rem; padding: 1px 5px;
}
@media (max-width: 991.98px) {
  /* Espaço reservado embaixo do conteúdo pra barra fixa não tapar o
     final da página (botões de salvar, última linha de tabela, etc). */
  .content { padding-bottom: 82px; }

  /* Evita duplicar na gaveta lateral os destinos que já estão na barra
     inferior — o "Mais" da barra abre essa mesma gaveta, então só faz
     sentido ela trazer o que NÃO está embaixo (relatórios, config.,
     pedidos novos/histórico, etc). Marcadas com .nav-mobile-hide no
     template. Só entra nesse breakpoint (onde a sidebar vira gaveta);
     no desktop (sidebar fixa, sem a barra inferior) esses itens seguem
     aparecendo normalmente. */
  .nav-food .nav-mobile-hide { display: none; }
}

/* Botão sol/lua de alternar claro/escuro (topbar dos painéis) — mesma
   troca de ícone com fade cruzado usada em vários dashboards: os dois
   ícones ficam sobrepostos, só a opacidade/rotação anima entre eles. */
.theme-toggle-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--card-border);
  background: transparent; color: var(--muted-text); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; flex-shrink: 0; position: relative; overflow: hidden;
}
.theme-toggle-btn:hover { color: var(--paper); border-color: var(--muted-text); }
.theme-toggle-btn i { position: absolute; font-size: 1.05rem; transition: transform .3s ease, opacity .2s ease; }
.theme-toggle-btn .bi-moon-stars { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle-btn .bi-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
.theme-toggle-btn.is-light .bi-moon-stars { opacity: 0; transform: rotate(90deg) scale(.4); }
.theme-toggle-btn.is-light .bi-sun { opacity: 1; transform: rotate(0deg) scale(1); }

.chart-container { position: relative; height: 220px; width: 100%; }
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);} 70%{box-shadow:0 0 0 10px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

@media (max-width: 991.98px) {
  .topbar { padding: 14px 20px; }
  /* padding-bottom fica de fora do shorthand acima de propósito: esse
     `.content` mais específico (mesmo media query, mas escrito depois no
     arquivo) vencia a cascata e zerava o espaço reservado pra barra
     inferior fixa (regra logo acima, ".bottom-tab-bar"), fazendo o fim
     de várias páginas (botão salvar, última linha de tabela/cardápio)
     ficar escondido atrás dos ícones sem dar pra rolar até lá. */
  .content { padding: 16px; padding-bottom: 82px; }
  .kpi-card .kpi-value { font-size: 1.4rem; }
}
@media (max-width: 575.98px) {
  .topbar h1 { font-size: 1.05rem; }
  .content { padding: 12px; padding-bottom: 82px; }
  .panel { padding: 16px; }

  /* Chat no celular: cabeçalho mais compacto (o link "Ver dados da loja"
     some — é uma ação secundária, e competir por espaço com o nome da
     loja é o que fazia o nome quebrar em duas linhas feio) e bolhas
     ocupam mais largura, já que a tela toda é estreita. */
  .chat-header { gap: 8px; padding: 10px 12px; }
  .chat-header-tenant-link { display: none; }
  .chat-avatar { width: 34px; height: 34px; font-size: .85rem; }
  .chat-bubble { max-width: 85%; }
  .chat-messages { padding: 12px 10px; }
  .chat-input-bar { padding: 10px; gap: 8px; }
  .chat-send-btn { width: 38px; height: 38px; font-size: 1rem; }

  /* Banners: cada card empilha em duas linhas (imagem+texto, depois
     badge+ações) em vez de espremer tudo numa linha só — mesma ideia do
     cabeçalho do chat acima, adaptar um flex row rígido pra tela
     estreita em vez de deixar ele estourar/comprimir o conteúdo. */
  .banner-row-main { flex: 1 1 100%; }
  .banner-row-actions { flex: 1 1 100%; justify-content: space-between; }
  .banner-row img { width: 64px; height: 40px; }
}
