/* RentFast · Chrome: topbar, sidebar, layouts */

/* ── Topbar local antiga ──
   Substituída pelo header global (.gh-bar). Páginas individuais ainda têm
   <header class="topbar"> no markup, mas agora ficam ocultas.
   O header global já provê brand + busca + botão voltar + ações. */
.topbar {
  display: none !important;
}
.topbar-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em; color: var(--ink-1);
}
.topbar-brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--ink-1); color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  position: relative; flex-shrink: 0;
}
.topbar-brand-mark::after {
  content: ''; position: absolute; inset: -3px; border-radius: 11px;
  border: 1px solid var(--p); opacity: .55; pointer-events: none;
}
.topbar-nav {
  display: flex; gap: 4px; flex: 1; margin-left: var(--space-6);
}
.topbar-nav a {
  padding: 8px 12px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink-2);
  transition: color var(--t-fast), background var(--t-fast);
}
.topbar-nav a:hover { color: var(--ink-1); background: var(--surface-2); }
.topbar-nav a[aria-current="page"] { color: var(--ink-1); font-weight: 500; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }

/* Topbar compacta (usada em pages internas) */
.topbar-compact {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--space-3);
  height: 56px; padding: 0 var(--space-4);
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 768px) {
  .topbar-nav { display: none; }
  .topbar { padding: 0 var(--space-4); height: 56px; }
}

/* ── Dashboard layout ──
   O header global é sticky no topo; sidebar e topbar começam ABAIXO dele.
   A altura vem de --gh-h (tokens.css), nunca de número escrito à mão. */
.dash-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100dvh - var(--gh-h));
}

.dash-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: var(--gh-h); height: calc(100dvh - var(--gh-h));
  overflow: hidden;
}

.dash-side-head {
  /* MESMA altura da .dash-topbar: as duas bordas inferiores são vizinhas na
     tela e ficavam desencontradas (39px aqui contra 45px na topbar), deixando
     a linha do topo visivelmente torta. */
  min-height: var(--topbar-h);
  display: flex; align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}

.dash-side-nav {
  padding: 10px 8px; flex: 1; overflow-y: auto;
  scrollbar-width: thin;
}

.dash-side-nav .group {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-3);
  padding: 14px 12px 6px;
}

.dash-side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 14px;
  transition: all var(--t-fast);
  position: relative; text-decoration: none; margin-bottom: 1px;
}
.dash-side-link svg, .dash-side-link i { width: 17px; height: 17px; flex-shrink: 0; }
.dash-side-link:hover { background: var(--surface-2); color: var(--ink-1); }
.dash-side-link.active,
.dash-side-link[aria-current="page"] {
  background: var(--surface-2); color: var(--ink-1); font-weight: 500;
}
.dash-side-link.active::before,
.dash-side-link[aria-current="page"]::before {
  content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px;
  background: var(--p); border-radius: 0 3px 3px 0;
}

.dash-side-badge {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 11px;
  background: var(--p-fill); color: #fff;
  padding: 1px 7px; border-radius: var(--r-full);
}

.dash-side-foot {
  padding: 14px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}

.dash-main {
  display: flex; flex-direction: column; min-width: 0;
}

.dash-topbar {
  /* Cola abaixo do header global; altura vem de --gh-h (tokens.css) */
  position: sticky; top: var(--gh-h); z-index: 30;
  display: flex; align-items: center; gap: 12px;
  /* min-height, não height: com height fixo os botões de ação estouravam a
     barra quando o conteúdo era mais alto que 44px. */
  min-height: var(--topbar-h); padding: 0 var(--space-6);
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.dash-topbar-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;          /* o título não comprime mais os botões */
  margin-left: auto;
}
/* Botões da topbar: altura própria menor que a barra, para caberem com folga
   e ficarem centrados de verdade (antes encostavam na borda de baixo). */
.dash-topbar-actions .btn {
  padding-top: 5px; padding-bottom: 5px;
  line-height: 1.2;
  white-space: nowrap;
}

.dash-page-title {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink-1); flex: 1;
  min-width: 0;                                    /* deixa o título encolher */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dash-content {
  /* O padding inferior era 48px no estilo inline; mantido aqui porque o menu
     inferior fixo do mobile cobriria o fim do conteúdo. */
  padding: 16px var(--space-6) 48px;
  flex: 1; width: 100%;
}

/* Cabeçalho dentro do conteúdo (h1 + eyebrow + subtítulo).
   Atinge o padrão recorrente de <div><eyebrow><h1><p>...</div> que muitas
   páginas usam · compacta sem precisar editar cada template. */
.dash-content > div:first-child > h1 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.2;
  margin: 0 0 4px;
}
.dash-content > div:first-child > .eyebrow {
  margin-bottom: 4px;
}
.dash-content > div:first-child > p {
  font-size: 13px; line-height: 1.45; margin: 0;
}
.dash-content > div:first-child:has(> h1) {
  margin-bottom: 16px;
}

/* Mobile: ainda mais compacto */
.dash-menu-btn {
  display: none; width: 40px; height: 40px; flex-shrink: 0;
  align-items: center; justify-content: center; margin-right: 4px;
  background: none; border: 1px solid var(--line); border-radius: var(--r10);
  color: var(--ink-2); cursor: pointer;
}
.dash-menu-btn i, .dash-menu-btn svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .dash-shell { grid-template-columns: 1fr; }
  .dash-sidebar { display: none; }
  .dash-menu-btn { display: flex; }
  .dash-topbar { padding: 0 var(--space-4); }
  .dash-page-title { font-size: 13px; }
  /* Sufixo decorativo do título ("- administração") sai no celular: com ele o
     título vira "Visão Geral, admi…" e nem o nome da página cabe inteiro.
     Seletor por atributo style seguindo o padrão já usado neste arquivo para
     alcançar estilo inline legado sem editar cada template. */
  .dash-page-title span[style*="font-mono"] { display: none; }
  .dash-content { padding: 12px var(--space-4) var(--space-5); }
  .dash-content > div:first-child > h1 { font-size: 18px; }
  .dash-content > div:first-child > p { font-size: 12px; }
}

/* Override global de h1s gigantes (legacy inline font-size).
   Muitas páginas têm <h1 style="font-size:26px"> ou 30px no padrão antigo.
   Esta regra compacta sem precisar editar cada template. */
h1[style*="font-size:26px"],
h1[style*="font-size: 26px"] { font-size: 22px !important; }
h1[style*="font-size:30px"],
h1[style*="font-size: 30px"] { font-size: 24px !important; }
@media (max-width: 600px) {
  h1[style*="font-size:26px"],
  h1[style*="font-size: 26px"] { font-size: 18px !important; }
  h1[style*="font-size:30px"],
  h1[style*="font-size: 30px"] { font-size: 20px !important; }
}

/* Mobile overlay sidebar */
.dash-sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.4); backdrop-filter: blur(2px);
}
@media (max-width: 900px) {
  .dash-sidebar.open { display: flex; position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; width: 260px; }
  .dash-sidebar-overlay.open { display: block; }
}

/* ── Compatibilidade com layout antigo (sidebar-layout) ── */
.sidebar-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100dvh;
}
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100dvh;
}
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 14px;
  transition: all var(--t-fast);
  position: relative; text-decoration: none; margin-bottom: 1px;
}
.sidebar-link :is(i, svg) { width: 17px; height: 17px; flex-shrink: 0; }
.sidebar-link:hover { background: var(--surface-2); color: var(--ink-1); }
.sidebar-link.active {
  background: color-mix(in oklch, var(--p) 10%, transparent);
  color: var(--p-ink); font-weight: 600;
}
.sidebar-link.active::before {
  content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px;
  background: var(--p); border-radius: 0 3px 3px 0;
}
.sidebar-badge {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: var(--p-fill); color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: var(--r-full); min-width: 18px; text-align: center;
  font-family: var(--font-mono);
}

/* Overlay sidebar mobile (compat) */
.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 89;
  background: rgba(0,0,0,.4);
}

@media (max-width: 900px) {
  .sidebar-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; position: fixed; left: 0; top: 0; bottom: 0; width: 260px; z-index: 90; }
  .sidebar.open { display: flex; }
  .sidebar-overlay.open { display: block; }
}

/* Topbar dashboard compat */
.topbar-compact, .topbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-5); height: 60px;
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}

/* Utilitários de visibilidade */
.hide-mobile   { display: block; }
.show-mobile   { display: none; }
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block; }
}
.hide-desktop  { display: none; }
@media (max-width: 900px) {
  .hide-desktop { display: block; }
}

/* ── Global header (gh-*), usado em todas as páginas logadas ── */
.gh-bar {
  /* 96, e não 50: sticky cria contexto de empilhamento, então o z-index do
     menu suspenso (200) só vale DENTRO do cabeçalho. Com 50 o menu inteiro
     ficava atrás da barra de baixo (90) e do botão flutuante de visualização
     (95), e no celular as últimas opções não aceitavam o toque. Abaixo de 100,
     que é a lateral do painel aberta, para o menu não cobrir a gaveta. */
  position: sticky; top: 0; z-index: 96;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  /* Altura DECLARADA, não resultante: o resto do layout se posiciona por
     --gh-h, então o header tem que medir exatamente isso. Antes a altura
     saía do padding + conteúdo (~60px) enquanto o CSS assumia 58px. */
  height: var(--gh-h);
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.gh-left {
  display: flex; align-items: center; gap: 12px;
  justify-self: start; min-width: 0;
}
.gh-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; text-decoration: none;
  background: transparent; border: 1px solid var(--line);
  border-radius: 50%; cursor: pointer;
  color: var(--ink-2);
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.gh-back:hover { background: var(--surface-2); color: var(--ink-1); border-color: var(--ink-3); }

.gh-search {
  display: flex; align-items: center;
  width: 100%; max-width: 640px;
  justify-self: center;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  overflow: hidden;
}
.gh-search:focus-within {
  border-color: var(--ink-2);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.gh-search-field {
  display: flex; align-items: center; gap: 8px;
  /* Altura declarada, e não resultante do padding: assim ela é exatamente a
     mesma dos botões redondos da barra em toda largura. Um pixel de diferença
     não se vê, mas quatro (36 contra 28 e contra 37) se veem, e foi o que
     deixava o campo ora colado, ora afundado. */
  height: 36px; padding: 0 16px; flex: 1.4; min-width: 0;
  cursor: text;
}
.gh-search-field--city { flex: 1; border-left: 1px solid var(--line); }
.gh-search-field i, .gh-search-field svg { color: var(--ink-3); flex-shrink: 0; }
.gh-search-field input {
  flex: 1; min-width: 0; border: none; background: transparent;
  font-size: 14px; color: var(--ink-1);
  font-family: var(--font-sans); outline: none;
}
.gh-search-field input::placeholder { color: var(--ink-fantasma); }
.gh-search-btn {
  margin: 4px; padding: 8px 18px; border: none; border-radius: var(--r-full);
  background: var(--ink-1); color: var(--bg);
  font-size: 13px; font-weight: 600; font-family: var(--font-sans);
  cursor: pointer; flex-shrink: 0;
  transition: background var(--t-fast);
}
.gh-search-btn:hover { background: color-mix(in oklch, var(--ink-1) 85%, var(--p)); }

.gh-actions {
  display: flex; align-items: center; gap: 10px;
  justify-self: end;
}
.gh-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent; border: 1px solid var(--line);
  border-radius: 50%; cursor: pointer;
  color: var(--ink-2);
  transition: all var(--t-fast);
}
.gh-icon-btn:hover { background: var(--surface-2); color: var(--ink-1); border-color: var(--ink-3); }

/* Contador preso ao ícone, à vista em qualquer página. O aviso de reserva só
   existia dentro do menu suspenso e na barra de baixo do celular: no
   computador, quem estivesse em outra tela não via que havia pedido esperando,
   e pedido esperando tem prazo. */
.gh-icon-btn--num { position: relative; }
.gh-num {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--p-fill); color: #fff;
  border: 2px solid var(--surface);
  border-radius: 99px; line-height: 1;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
}
/* display:flex acima vence o [hidden] do navegador, e o número aparecia zerado. */
.gh-num[hidden] { display: none; }
/* Pedido aguardando resposta pulsa: é o único que custa dinheiro se esfriar. */
.gh-num--atencao { background: var(--danger-solid); animation: gh-pulso 2.4s ease-in-out infinite; }
@keyframes gh-pulso {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--red) 55%, transparent); }
  55%      { box-shadow: 0 0 0 6px color-mix(in oklch, var(--red) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .gh-num--atencao { animation: none; } }
.gh-user-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  border-radius: 50%; transition: box-shadow var(--t-fast);
}
.gh-user-btn:hover { box-shadow: 0 0 0 3px color-mix(in oklch, var(--p) 20%, transparent); }
.gh-user-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  min-width: 240px; z-index: 200;
  /* Rola por dentro em vez de vazar pela tela. overscroll-behavior para o
     puxão no fim da lista não arrastar a página atrás. */
  max-height: calc(100dvh - var(--gh-h) - 16px);
  overflow: hidden auto;
  overscroll-behavior: contain;
}
.gh-drop-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: 13px; color: var(--ink-2);
  text-decoration: none; transition: background var(--t-fast);
}
.gh-drop-link:hover { background: var(--surface-2); }
.gh-drop-link i, .gh-drop-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.gh-drop-link.gh-drop-logout { color: var(--red-ink); }
.gh-drop-divider { height: 1px; background: var(--line); margin: 2px 0; }
/* A navegação do painel dentro do menu do nome: só no celular, onde a barra
   lateral não existe e o botão dela saiu da barra de cima. */
.gh-drop-celular { display: none; }
.gh-drop-sep {
  padding: 10px 16px 5px; font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);
  border-top: 1px solid var(--line); margin-top: 4px;
}
/* O bloco vira no MESMO ponto em que a barra lateral some (900px). Estava em
   560, e entre 561 e 900 não havia lateral nem este bloco: no tablet o
   fornecedor ficava sem Gestão, Rotas, Avisos e Minha loja, e o
   administrador sem cinco telas, sem porta nenhuma. */
@media (max-width: 900px) { .gh-drop-celular { display: block; } }

/* O contrário: o que só faz falta quando a barra de BAIXO some, acima de
   900px. Abaixo disso, oferecer de novo é a mesma porta duas vezes. */
.gh-drop-largo { display: block; }
@media (max-width: 900px) { .gh-drop-largo { display: none; } }
/* No dedo, cada opção precisa de 44px. Com 40 a lista inteira ficava difícil
   de acertar, e errar aqui leva a pessoa para outra tela. */
@media (max-width: 900px) {
  .gh-drop-link { padding: 12px 16px; min-height: 44px; font-size: 14px; }
  .gh-drop-link i, .gh-drop-link svg { width: 16px; height: 16px; }
}
.gh-drop-badge {
  margin-left: auto;
  background: var(--p-fill); color: #fff;
  border-radius: 99px; padding: 1px 8px;
  font-size: 10px; font-family: var(--font-mono); font-weight: 700;
}
.gh-drop-mode { padding: 8px 16px; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  /* 12px de cada lado, o mesmo respiro do conteúdo: com 10 os botões das pontas
     ficavam mais colados na borda que qualquer outra coisa da página. */
  .gh-bar { grid-template-columns: auto 1fr auto; padding: 6px 12px; gap: 8px; }
  .gh-search-field--city { display: none; }
  .gh-search-field { padding: 6px 10px; }
  .gh-search-field input { font-size: 13px; }
  /* 36px e não 32: nesta faixa já é dedo (tablet e dobrável aberto), e o
     alvo de 32 ficava abaixo do mínimo do próprio projeto. */
  .gh-search-btn { padding: 8px 12px; font-size: 12px; min-height: 36px; }
  .gh-back { width: 36px; height: 36px; }
  .gh-icon-btn { width: 36px; height: 36px; }
  .gh-user-btn .avatar { width: 36px !important; height: 36px !important; font-size: 12px !important; }
}
@media (max-width: 600px) {
  .gh-bar { padding: 5px 12px; }
  .gh-search-btn { display: none; }
  .gh-search { max-width: none; }
  .gh-search-field { padding: 5px 10px; }
}
/* ── Header global no mobile ──────────────────────────────────────────────
   Antes o celular recebia o layout de desktop inteiro: grade 1fr/2fr/1fr com
   gap de 16px, dois campos de busca e o botão "Buscar", tudo espremido numa
   barra alta e cheia de vão. E os offsets da topbar eram chutados em 46px/42px
   enquanto a barra media ~60px, por isso o conteúdo ficava ATRÁS do header
   (que é sticky) e não dava para clicar. Aqueles offsets foram removidos:
   agora tudo se posiciona por --gh-h.                                        */
@media (max-width: 768px) {
  .gh-bar {
    /* Colunas que se ajustam ao conteúdo: a busca fica com o espaço que sobra
       em vez de receber uma fração fixa que sobrava ou faltava. */
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding: 0 10px;
  }
  .gh-left { gap: 8px; }
  .gh-back, .gh-icon-btn { width: 34px; height: 34px; }
  .gh-back i, .gh-back svg { width: 15px; height: 15px; }
  .gh-actions { gap: 6px; }
  .gh-user-btn .avatar { width: 34px !important; height: 34px !important; font-size: 12px !important; }

  .gh-search-field { padding: 8px 12px; }
  .gh-search-field input { font-size: 15px; }   /* ≥16px evita zoom no iOS; 15px + o resto do layout é o equilíbrio aqui */

  /* Um campo só. O filtro de cidade e o botão "Buscar" tomavam metade da
     barra num aparelho estreito; a busca continua funcionando pelo Enter e a
     cidade é filtrável na própria página de resultados. */
  .gh-search-field--city, .gh-search-btn { display: none; }
}

/* Telas bem estreitas: o carrinho sai do header (segue no menu inferior) */
@media (max-width: 380px) {
  .gh-bar { padding: 0 8px; }
  #gh-cart-btn { display: none; }
}

/* ── Troca de modo na lateral do painel (base_dashboard.html) ── */
.dash-side-modos { display: flex; flex-direction: column; gap: 6px; }
.dash-side-modo-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink-2); font: inherit; font-size: 13px; text-align: left;
  cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast);
}
.dash-side-modo-btn:hover { border-color: var(--p-ink); color: var(--p-ink); }
.dash-side-modo-btn :is(i, svg) { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Mode switch pill (partial _mode_switch.html) ── */
.mode-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-full);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  text-decoration: none; border: none; white-space: nowrap;
  font-family: var(--font-sans);
}
/* Um estilo só para os três modos: cliente, fornecedor e administração. */
.mode-pill--client, .mode-pill--supplier, .mode-pill--admin {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.mode-pill--client:hover, .mode-pill--supplier:hover, .mode-pill--admin:hover {
  background: var(--ink-1);
  border-color: var(--ink-1);
  color: var(--bg);
}
.mode-pill--client:hover .mode-pill-dot,
.mode-pill--supplier:hover .mode-pill-dot,
.mode-pill--admin:hover .mode-pill-dot {
  background: var(--bg);
}
.mode-pill--become {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.mode-pill--become:hover {
  border-color: var(--ink-3);
  color: var(--ink-1);
}
.mode-pill-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.mode-pill-dot--client { background: var(--ink-3); }
.mode-pill-dot--supplier { background: var(--p); }
.mode-pill-dot--admin { background: var(--amber, #d97706); }

/* ── Reputation widget (sidebar mini-card + global) ── */
:root {
  /* Estes cinco são escritos como número grande sobre fundo claro. Os tons
     anteriores rendiam de 2:1 a 3.4:1, ou seja, a nota da reputação era a
     coisa menos legível da tela. Mesma escada de cor, claridade fechada. */
  --rep-excellent: oklch(0.46 0.15 148);
  --rep-good:      oklch(0.50 0.16 148);
  --rep-fair:      oklch(0.53 0.14 75);
  --rep-warning:   oklch(0.52 0.17 45);
  --rep-risk:      oklch(0.52 0.19 25);
}
/* Wordmark: troca pro logo branco no tema escuro ou em fundo escuro forçado
   (variant="light") · senão o "Rent" escuro some no escuro. */
[data-mode="dark"] .rf-brand-img--dark { display: none !important; }
[data-mode="dark"] .rf-brand-img--light { display: block !important; }
.rf-brand--force-light .rf-brand-img--dark { display: none !important; }
.rf-brand--force-light .rf-brand-img--light { display: block !important; }

[data-mode="dark"] {
  --rep-excellent: #4ade80;
  --rep-good:      #86efac;
  --rep-fair:      #fbbf24;
  --rep-warning:   #fb923c;
  --rep-risk:      #f87171;
}
.rep-mini-card {
  display: block; text-decoration: none;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  transition: background var(--t-fast);
}
.rep-mini-card:hover { background: color-mix(in oklch, var(--p) 6%, var(--surface-2)); }
.rep-mini-bar {
  height: 6px; border-radius: 99px;
  background: color-mix(in oklch, var(--ink-3) 20%, transparent);
  overflow: hidden;
}
.rep-mini-bar-fill {
  height: 100%; border-radius: 99px;
  transition: width var(--t-fast);
}
.rep-mini-excellent { background: var(--rep-excellent); }
.rep-mini-good      { background: var(--rep-good); }
.rep-mini-fair      { background: var(--rep-fair); }
.rep-mini-warning   { background: var(--rep-warning); }
.rep-mini-risk      { background: var(--rep-risk); }

/* Badge de reputação inline (ex: card de cliente).
   Fundo sólido leve + texto sólido escuro/claro pra contraste em ambos os temas. */
.rep-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 99px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
/* Light mode: tons claros do tier + texto escuro */
.rep-pill-excellent { background: #dcfce7; color: #166534; border-color: #86efac; }
.rep-pill-good      { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.rep-pill-fair      { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.rep-pill-warning   { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.rep-pill-risk      { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
/* Dark mode: fundo translúcido + texto claro do tier */
[data-mode="dark"] .rep-pill-excellent { background: rgba(34,197,94,0.18);  color: #86efac; border-color: rgba(34,197,94,0.4); }
[data-mode="dark"] .rep-pill-good      { background: rgba(16,185,129,0.18); color: #6ee7b7; border-color: rgba(16,185,129,0.4); }
[data-mode="dark"] .rep-pill-fair      { background: rgba(245,158,11,0.18); color: #fbbf24; border-color: rgba(245,158,11,0.4); }
[data-mode="dark"] .rep-pill-warning   { background: rgba(234,88,12,0.20);  color: #fdba74; border-color: rgba(234,88,12,0.4); }
[data-mode="dark"] .rep-pill-risk      { background: rgba(220,38,38,0.20);  color: #fca5a5; border-color: rgba(220,38,38,0.4); }

/* ── Bottom nav fixo (mobile, estilo Instagram) ── */
.dash-bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: color-mix(in oklch, var(--surface) 95%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 6px env(safe-area-inset-right) max(8px, env(safe-area-inset-bottom)) env(safe-area-inset-left);
}
.dash-bnav-item {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px;
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-3); text-decoration: none;
  font-size: 10px; font-family: var(--font-mono); font-weight: 500;
  position: relative;
  transition: color var(--t-fast);
}
.dash-bnav-item:hover { color: var(--ink-1); }
.dash-bnav-item.active { color: var(--p-ink); }
.dash-bnav-item.active i,
.dash-bnav-item.active svg { color: var(--p-ink); }
.dash-bnav-item i,
.dash-bnav-item svg { width: 22px; height: 22px; flex-shrink: 0; }
.dash-bnav-item span { white-space: nowrap; }
/* display:flex abaixo vence o [hidden] do navegador. */
.dash-bnav-badge[hidden] { display: none; }
.dash-bnav-badge {
  position: absolute; top: 4px; left: 50%; margin-left: 4px;
  background: var(--red); color: #fff;
  min-width: 16px; height: 16px;
  padding: 0 5px; border-radius: 99px;
  font-size: 9px; font-weight: 700; font-family: var(--font-mono);
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

@media (max-width: 900px) {
  .dash-bottom-nav { display: flex; }
  /* Espaço no body inteiro pra conteúdo não ficar atrás do bottom nav.
     Aplica globalmente (dashboard E não-dashboard). */
  /* 66px é a altura medida da barra (ícone 22 + rótulo + padding), não os
     58 que estavam escritos aqui: o último item de cada página ficava
     debaixo dela e não dava para tocar. */
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
  .dash-main { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}
/* Pra páginas que escondem o bottom nav (print, etc), zera o padding */
body:not(:has(.dash-bottom-nav)) { padding-bottom: 0 !important; }

/* Loja atual no topo da barra lateral */
.dash-side-store {
  display: flex; flex-direction: column; gap: 2px;
  margin: 4px 12px 10px; padding: 10px 12px;
  background: var(--surface-2); border-radius: var(--r10); border: 1px solid var(--line);
}
.dash-side-store-name { font-weight: 600; font-size: 13px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-side-store-net  { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.dash-side-store-switch { font-size: 11px; color: var(--p-ink); text-decoration: none; margin-top: 2px; }

/* Em tela muito larga (TV, monitor grande) a linha de texto e a tabela
   esticavam sem limite, e ler de longe virava vaivém de olho. */
@media (min-width: 1800px) {
  .dash-content { max-width: 1600px; margin-left: auto; margin-right: auto; }
}

/* ── Larguras do painel administrativo ──────────────────────────────────
   Várias telas do painel tinham max-width fixo em pixels no estilo inline
   (settings.html usava 760px), o que num monitor largo deixava metade da
   área em branco e comprimia os campos em duas colunas estreitas.
   Estas classes ocupam o espaço disponível e reorganizam por conta própria. */

/* Envelope da página: usa a largura útil, com teto só para não esticar
   demais em monitor ultrawide. */
.admin-wide { max-width: 1440px; }

/* Texto corrido mantém medida legível INDEPENDENTE do envelope: linha longa
   demais é ruim de ler, ao contrário de campo de formulário. */
.admin-wide > p,
.admin-lead { max-width: 72ch; }

/* Cartões lado a lado quando há espaço. Teto de DUAS colunas de propósito:
   com auto-fit livre, uma tela de 1920px criava 3 colunas para 2 cartões,
   sobrava uma vazia, cada cartão ficava com 440px e os campos dentro dele
   desabavam para 1 coluna. Medido; ficava pior que o layout original. */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
/* Só divide em duas colunas quando cada cartão AINDA couber duas colunas de
   campos. Conta: 2 campos de 240px + 16 de gap + 48 de padding = 544px por
   cartão; dois cartões + 24 de gap = 1112px de área útil, que com a sidebar
   de 240px e o padding de 48px do conteúdo dá ~1400px de janela. Abaixo
   disso, um cartão só ocupando a largura toda rende MAIS campos por linha
   (medido: 3 colunas a 1280px) do que dois cartões estreitos (1 coluna). */
@media (min-width: 1400px) {
  .card-grid { grid-template-columns: 1fr 1fr; }
}

/* Campos dentro do cartão: quantas colunas couberem a partir de 240px cada.
   Substitui o "1fr 1fr" fixo, que mantinha duas colunas mesmo com espaço
   para três. 240px e não 200px porque os rótulos são longos ("Prazo do
   fornecedor confirmar (h)") e quebravam em duas linhas. */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════
   MENU DO PAINEL NA BARRA DE CIMA

   No celular o painel empilhava duas faixas: o header global e, logo abaixo,
   uma segunda barra que existia para carregar o botão do menu e repetir o nome
   da página, que o cabeçalho do conteúdo já anuncia em corpo maior. Duas
   faixas fixas comem 110px de uma tela de 844, antes de qualquer conteúdo.

   O botão subiu para o header global. A segunda barra some quando não tem mais
   nada a dizer: sem ação própria e com a página já se apresentando sozinha.
   ══════════════════════════════════════════════════════════════════════════ */
.gh-menu {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r10); cursor: pointer;
  color: var(--ink-2);
  transition: all var(--t-fast);
}
.gh-menu:hover { background: var(--surface-2); color: var(--ink-1); border-color: var(--ink-3); }
.gh-menu[hidden] { display: none; }

@media (max-width: 900px) {
  .gh-bar.com-menu .gh-menu { display: inline-flex; }
}
/* No celular o botão sai da barra, a pedido: a pessoa abre o mesmo painel pelo
   círculo do nome, à direita, e dois botões para a mesma gaveta na mesma faixa
   de 390px é repetição. O que a barra lateral tinha de exclusivo passou para o
   menu do nome, no bloco .gh-drop-celular. */
@media (max-width: 560px) {
  .gh-bar.com-menu .gh-menu { display: none; }
}
@media (max-width: 900px) {
  /* Com o menu no topo, o voltar genérico sai do painel: as telas do painel
     têm o próprio voltar, contextual, no cabeçalho do conteúdo. Três botões
     redondos antes do logo num celular de 390px não é navegação, é fila. */
  .gh-bar.com-menu .gh-back { display: none; }
  /* O botão da segunda barra perdeu a função. */
  .dash-menu-btn { display: none; }
}

/* ══ TÍTULO ESCRITO DUAS VEZES ══
   A barra do painel escreve o nome da página, e o conteúdo escreve de novo,
   logo abaixo, em corpo maior: "Reservas" em cima de "Reservas". Vale em
   qualquer largura, não só no celular.

   Onde a página tem título próprio, o da barra some. E se a barra também não
   carrega nenhuma ação, ela inteira some: sobrariam 40px de faixa vazia. As
   duas condições juntas, porque sem título próprio a barra é a única indicação
   de onde a pessoa está. */
.dash-main:has(.dash-content > div:first-child h1) .dash-page-title { display: none; }
.dash-main:has(.dash-content > div:first-child h1)
  .dash-topbar:not(:has(.dash-topbar-actions > *)) { display: none; }
@media (max-width: 768px) {
  .gh-menu { width: 34px; height: 34px; }
  .gh-menu i, .gh-menu svg { width: 16px; height: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SELETOR DE MODO NO CABEÇALHO

   Não existia em lugar nenhum um rótulo do modo ATUAL. O cartão do perfil
   mostra a preferência de LOGIN (em que modo o próximo acesso começa), e as
   duas viravam a mesma coisa na cabeça de quem lia: o perfil dizia "Fornecedor"
   enquanto a sessão estava em cliente, e a pessoa só descobria isso quando uma
   tela recusava o clique dela.

   Aqui o rótulo é o estado e o botão é a ação, na mesma peça. No celular o
   texto sai e ficam o ponto colorido e o ícone, que é o que cabe.
   ══════════════════════════════════════════════════════════════════════════ */
.gh-modo { position: relative; flex-shrink: 0; }
.gh-modo-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 10px;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-full); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: all var(--t-fast); white-space: nowrap;
}
.gh-modo-btn:hover { background: var(--surface-2); color: var(--ink-1); border-color: var(--ink-3); }
.gh-modo-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink-4);
}
.gh-modo-dot--client   { background: var(--p); }
.gh-modo-dot--supplier { background: var(--green, #16a34a); }
.gh-modo-dot--admin    { background: var(--blue, #2563eb); }

.gh-modo-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 232px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
}
.gh-modo-menu[hidden] { display: none; }
.gh-modo-atual {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 11px 10px; font-size: 12px; line-height: 1.45; color: var(--ink-3);
  border-bottom: 1px solid var(--line); margin-bottom: 5px;
}
.gh-modo-atual .gh-modo-dot { margin-top: 5px; }
.gh-modo-atual strong { color: var(--ink-1); font-weight: 600; }
.gh-modo-opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px 11px; border: 0; border-radius: var(--r-sm);
  background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13.5px; color: var(--ink-1);
}
.gh-modo-opt:hover { background: var(--surface-2); }
.gh-modo-nota {
  padding: 8px 11px 6px; margin-top: 4px; border-top: 1px solid var(--line);
  font-size: 11px; line-height: 1.4; color: var(--ink-4);
}

@media (max-width: 900px) {
  /* Só o ponto e o ícone: o nome do modo não cabe junto da busca e do avatar,
     e o ponto colorido já distingue os três de relance. */
  .gh-modo-label { display: none; }
  .gh-modo-btn { padding: 0 8px; gap: 5px; }
}
@media (max-width: 768px) {
  .gh-modo-btn { height: 34px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CABEÇALHO NO CELULAR: QUATRO CONTROLES, NÃO SETE

   Medido em 390px: voltar 34, logo 28, busca 170, modo 44, tema 34, carrinho
   34, avatar 36, mais seis vãos de 8. A busca ficava com 170px e o próprio
   texto dela virava "O que vo".

   O que sai, e por quê:
     carrinho  já está na barra de baixo, com contador e tudo;
     tema      é preferência, não navegação: mora no menu do avatar;
     modo      idem, e o anel colorido do avatar continua dizendo qual é.

   Sobram voltar (ou o menu do painel), logo, busca e avatar, e a busca passa
   de 170px para cerca de 250.
   ══════════════════════════════════════════════════════════════════════════ */
.gh-drop-compacto { display: none; }
.gh-drop-link[data-rf-theme-btn] { display: flex; align-items: center; gap: 12px; }
.gh-drop-link[data-rf-theme-btn] svg { flex-shrink: 0; }

/* Anel do modo em volta do avatar: o estado continua visível sem custar um
   botão. Cores iguais às do seletor, para as duas peças se reconhecerem. */
.gh-user-btn { border-radius: 50%; padding: 0; background: none; border: 0; cursor: pointer; }
.gh-user-btn--supplier { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--green, #16a34a); }
.gh-user-btn--admin    { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--blue, #2563eb); }

@media (max-width: 768px) {
  .gh-bar .gh-icon-btn[data-rf-theme-btn],
  .gh-bar #gh-cart-btn,
  .gh-bar .gh-modo { display: none; }
  .gh-drop-compacto { display: block; }
  /* Com menos itens à direita, a busca pode respirar. */
  .gh-actions { gap: 8px; }
  .gh-bar { gap: 10px; padding: 0 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   O CAMPO DE BUSCA ERA O ITEM MAIS ALTO DA BARRA

   Medido em 390px: a barra tem 52px, o campo 36 e todos os outros controles
   (voltar, avatar) 34. Sendo o mais alto de todos, ele encostava em cima e
   embaixo enquanto o resto respirava, e era isso que se via como "colado na
   margem".

   Agora ele tem a mesma altura dos vizinhos. Sobram 9px de folga de cada lado,
   iguais para todo mundo na barra.
   ══════════════════════════════════════════════════════════════════════════ */
.gh-search { align-items: center; }
@media (max-width: 900px) {
  /* 36px, a mesma altura que voltar, tema e avatar têm nesta faixa. Sem esta
     linha o campo caía para 28px e passava a ser o MAIS BAIXO da barra, que é
     o mesmo desalinho de antes com o sinal trocado. */
  .gh-search-field { height: 36px; padding: 0 14px; }
  .gh-search-field input { font-size: 15px; }
}
@media (max-width: 768px) {
  .gh-search-field { height: 34px; padding: 0 12px; }
  .gh-search-field i, .gh-search-field svg { width: 15px; height: 15px; }
}