/* ============================================================
   QUART'Z ADMIN — ADMIN-BASE.CSS
   Tokens, reset, header, menu lateral, overlay, rodapé.
   Importado em todas as páginas do painel admin.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Montserrat:wght@200;300;400;500&display=swap');

/* ── RESET ──────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

html, body {
  background: var(--washi);
  color: var(--void);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a    { text-decoration: none; color: inherit; }
img  { display: block; max-width: 100%; }
button { cursor: pointer; font-family: var(--font-body); border: none; background: transparent; }
input, textarea, select {
  font-family: var(--font-body);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

/* ── TOKENS ─────────────────────────────────────────────────── */

:root {
  --washi:      #F4F0E8;
  --void:       #0D0D0F;
  --amadeirado: #A0622A;
  --ash:        #4A4A52;
  --stone:      #D4C5B0;
  --font-title: 'Cormorant Garamond', serif;
  --font-body:  'Montserrat', sans-serif;
  --header-h:   56px;
}

/* ── ADMIN PAGE — padding-top global ───────────────────────── */

.admin-page {
  padding-top: var(--header-h);
  min-height: 100vh;
}

/* ── OVERLAY ────────────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,13,15,0.5);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.overlay.show {
  opacity: 1;
  pointer-events: all;
}

/* ── HEADER ADMIN ───────────────────────────────────────────── */

.admin-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--void);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem;
  border-bottom: 1px solid rgba(212,197,176,0.12);
}

.admin-header__menu-btn {
  color: var(--washi);
  font-size: 1rem;
  padding: 8px;
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
}
.admin-header__menu-btn:hover { opacity: 0.7; }

.admin-header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

.admin-header__logo img {
  height: 22px;
  width: auto;
  display: block;
}

/* ── HEADER — sempre sólido void ───────────────────────────── */
/* O page-header tem fundo void igual ao header,               */
/* criando continuidade visual natural sem transparência.       */

.admin-header {
  transition: box-shadow 0.25s ease;
}

.admin-header--no-shadow {
  box-shadow: none;
  border-bottom-color: transparent;
}

.admin-header__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-badge {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amadeirado);
  border: 1px solid var(--amadeirado);
  padding: 3px 8px;
}

.admin-avatar {
  width: 28px;
  height: 28px;
  background: var(--amadeirado);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  color: var(--washi);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

/* ── MENU LATERAL ADMIN ─────────────────────────────────────── */

.admin-menu {
  position: fixed;
  top: 0; left: -100%;
  width: 280px;
  height: 100%;
  background: var(--void);
  z-index: 200;
  transition: left 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid rgba(212,197,176,0.10);
}
.admin-menu.show { left: 0; }

.admin-menu__header {
  padding: 18px 1.2rem 16px;
  border-bottom: 1px solid rgba(212,197,176,0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.admin-menu__titulo {
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--washi);
  letter-spacing: 0.04em;
}

.admin-menu__logo {
  height: 20px;
  width: auto;
  display: block;
  opacity: 0.9;
}

.admin-menu__marca {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-menu__admin-tag {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amadeirado);
  border: 1px solid var(--amadeirado);
  padding: 2px 7px;
  flex-shrink: 0;
}

.admin-menu__close {
  color: var(--stone);
  font-size: 14px;
  padding: 4px;
  transition: color 0.2s;
}
.admin-menu__close:hover { color: var(--washi); }

.admin-menu__label {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amadeirado);
  padding: 18px 1.2rem 6px;
  display: block;
  flex-shrink: 0;
}

.admin-menu__nav {
  display: flex;
  flex-direction: column;
}

.admin-menu__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 1.2rem;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(244,240,232,0.55);
  border-bottom: 1px solid rgba(212,197,176,0.06);
  transition: color 0.2s, background 0.2s;
}
.admin-menu__link:hover {
  color: var(--washi);
  background: rgba(244,240,232,0.04);
}
.admin-menu__link.ativo { color: var(--washi); }
.admin-menu__link.ativo .admin-menu__link-icon { color: var(--amadeirado); }

.admin-menu__link-icon {
  width: 16px;
  text-align: center;
  font-size: 13px;
  color: rgba(212,197,176,0.4);
  flex-shrink: 0;
  transition: color 0.2s;
}

.admin-menu__link-chevron {
  margin-left: auto;
  font-size: 8px;
  color: rgba(212,197,176,0.25);
  flex-shrink: 0;
}

.admin-menu__footer {
  margin-top: auto;
  padding: 16px 1.2rem 20px;
  border-top: 1px solid rgba(212,197,176,0.08);
  flex-shrink: 0;
}

.admin-menu__site-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 200;
  color: rgba(212,197,176,0.4);
  letter-spacing: 0.06em;
  transition: color 0.2s;
}
.admin-menu__site-link:hover { color: var(--washi); }
.admin-menu__site-link i { font-size: 9px; }

/* ── CABEÇALHO DE PÁGINA ────────────────────────────────────── */

.page-header {
  background: var(--void);
  padding: 24px 1.2rem 48px;
  position: relative;
  z-index: 1;
}

.page-header__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 200;
  color: var(--stone);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 20px;
  transition: color 0.2s;
}
.page-header__back:hover { color: var(--washi); }
.page-header__back i { font-size: 8px; }

.page-header__badge {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amadeirado);
  margin-bottom: 10px;
  display: block;
}

.page-header__titulo {
  font-family: var(--font-title);
  font-size: clamp(2rem, 8vw, 2.8rem);
  font-weight: 400;
  color: var(--washi);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}

.page-header__sub {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 200;
  color: rgba(212,197,176,0.55);
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.page-header__sub strong {
  color: var(--amadeirado);
  font-weight: 400;
}

/* ── SEÇÃO GENÉRICA ─────────────────────────────────────────── */

.secao {
  padding: 24px 1.2rem 0;
}

.secao + .secao {
  margin-top: 20px;
}

.secao__titulo {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--stone);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.secao__titulo-link {
  color: var(--amadeirado);
  letter-spacing: 0.14em;
  font-size: 7px;
  transition: opacity 0.2s;
}
.secao__titulo-link:hover { opacity: 0.7; }

/* ── RODAPÉ ADMIN ───────────────────────────────────────────── */

.admin-footer {
  margin-top: 48px;
  padding: 20px 1.2rem 32px;
  border-top: 1px solid var(--stone);
  text-align: center;
}

.admin-footer__texto {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 200;
  color: var(--stone);
  letter-spacing: 0.06em;
  line-height: 1.8;
}

/* ============================================================
   DESKTOP — min-width: 1024px
   Sidebar fixa + conteúdo à direita
   ============================================================ */

@media (min-width: 1024px) {

  /* ── SIDEBAR FIXA ──────────────────────────────────────── */

  .admin-menu {
    left: 0 !important;
    width: 220px;
    position: fixed;
    top: 56px;
    height: calc(100% - 56px);
    transition: none;
    border-right: 1px solid rgba(212,197,176,0.12);
    z-index: 50;
  }

  /* Overlay e botão fechar não fazem sentido no desktop */
  .overlay              { display: none !important; }
  .admin-menu__close    { display: none; }
  .admin-header__menu-btn { display: none; }

  /* ── HEADER DESKTOP ────────────────────────────────────── */

  .admin-header {
    padding: 0 2rem;
  }

  /* Logo centralizada no header, igual ao site público */
  .admin-header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    padding-left: 0;
  }

  .admin-header__right {
    margin-left: auto;
  }

  /* ── CONTEÚDO PRINCIPAL ────────────────────────────────── */

  .admin-page {
    margin-left: 220px;
    padding-top: 56px;
  }

  /* Page-header ocupa full width da área de conteúdo */
  .page-header {
    padding: 32px 2.5rem 40px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
  }

  /* Wrapper interno — limita largura do conteúdo mas não do header */
  .secao,
  .admin-search-wrap,
  .admin-tabs,
  .ver-mais-wrap,
  .alerta-bloco,
  .cta-bloco,
  .contagem-stats,
  .pedidos-admin-lista,
  .admin-footer {
    max-width: 960px;
  }

  /* Back link + badge + título em linha no desktop */
  .page-header__back {
    margin-bottom: 16px;
  }

  .page-header__titulo {
    font-size: clamp(2.2rem, 3vw, 3rem);
  }

  /* ── SEÇÕES ────────────────────────────────────────────── */

  .secao {
    padding: 28px 2.5rem 0;
  }

  /* ── GRIDS DE MÉTRICAS — 4 colunas ────────────────────── */

  .metricas-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Hoje: 2 cards lado a lado mas maiores */
  .metricas-grid--hoje {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── AÇÕES RÁPIDAS — 4 em linha ────────────────────────── */

  .acoes-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── CONTAGEM STATS — mais espaçoso ────────────────────── */

  .contagem-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .contagem-stat {
    padding: 28px 0;
  }

  .contagem-stat__valor {
    font-size: 2.2rem;
  }

  /* ── SEARCH BAR ────────────────────────────────────────── */

  .admin-search-wrap {
    padding: 20px 2.5rem;
  }

  /* ── TABS ──────────────────────────────────────────────── */

  .admin-tabs {
    padding: 0 2.5rem;
  }

  /* ── LISTAS ────────────────────────────────────────────── */

  .pedidos-admin-lista,
  .secao#clientes-lista,
  .secao#produtos-lista {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  /* ── CARD DE PEDIDO — layout desktop ───────────────────── */

  .pedido-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 0 20px;
    align-items: start;
  }

  .pedido-card__topo {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .pedido-card__data {
    grid-column: 1 / 3;
    grid-row: 2;
    margin-bottom: 0;
  }

  .pedido-card__produto {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .pedido-card__acoes {
    grid-column: 1 / 3;
    grid-row: 4;
    flex-direction: row;
    gap: 10px;
  }

  .pedido-card__btn {
    flex: none;
    padding: 10px 20px;
    white-space: nowrap;
  }

  /* ── PRODUTO LINHA — mais colunas no desktop ───────────── */

  .produto-linha {
    padding: 16px 0;
  }

  .produto-linha__img {
    width: 64px;
    height: 64px;
  }

  .produto-linha__nome {
    font-size: 13px;
  }

  .produto-linha__meta {
    font-size: 10px;
  }

  /* ── CLIENTE LINHA ─────────────────────────────────────── */

  .cliente-avatar {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }

  .cliente-linha__nome {
    font-size: 13px;
  }

  /* ── VER MAIS ──────────────────────────────────────────── */

  .ver-mais-wrap {
    padding: 24px 2.5rem;
  }

  /* ── ALERTAS E CTAs ────────────────────────────────────── */

  .alerta-bloco,
  .cta-bloco {
    padding: 40px 2.5rem;
  }

  .alerta-bloco__btn {
    max-width: 340px;
  }

  /* ── RODAPÉ ────────────────────────────────────────────── */

  .admin-footer {
    padding: 24px 2.5rem 40px;
    max-width: 100%;
  }

  /* ── DRAWER — mais largo no desktop ────────────────────── */

  .detail-drawer {
    width: 380px;
  }

  /* ── MENU LABEL E LINKS — ajustes visuais ──────────────── */

  .admin-menu__label {
    padding: 16px 1.2rem 6px;
  }

  .admin-menu__link {
    padding: 11px 1.2rem;
    font-size: 11px;
  }

}

/* ── DESKTOP LARGO (1280px+) ─────────────────────────────── */

@media (min-width: 1280px) {

  /* Sem max-width — usa toda a área */

  .admin-menu {
    width: 240px;
  }

  .admin-page {
    margin-left: 240px;
  }

  .admin-header__logo {
    width: 240px;
  }

}

/* ── DESKTOP — ocultar logo da sidebar ─────────────────────── */
@media (min-width: 1024px) {
  .admin-menu__marca  { display: none; }
  .admin-menu__header { display: none; }

  /* Sidebar começa direto nos labels sem header */
  .admin-menu {
    padding-top: 8px;
  }
}

/* ── GARANTIA DE INTERATIVIDADE ────────────────────────────── */
/* Garante que nenhum elemento de layout sobreponha os controles */

.pf-layout,
.pf-col-img,
.pf-col-form,
.pf-img-principal,
.pf-detalhe-slot,
.pf-opcao,
.pf-chip,
.pf-input,
.pf-select,
.pf-textarea {
  position: relative;
  z-index: 10;
}

/* O page-header nunca deve cobrir conteúdo abaixo */
.page-header {
  overflow: visible;
}

/* Admin header não intercepta cliques abaixo dele */
.admin-header {
  pointer-events: auto;
}

/* ============================================================
   CORREÇÃO DEFINITIVA — CLIQUES
   O admin-header é fixed e pode interceptar cliques no conteúdo.
   pointer-events: none no header, auto apenas nos filhos diretos.
   ============================================================ */

.admin-header {
  pointer-events: none;
}

.admin-header > *,
.admin-header__menu-btn,
.admin-header__logo,
.admin-header__right,
.admin-badge,
.admin-avatar {
  pointer-events: auto;
}

/* admin-menu também precisa de pointer-events corretos */
.admin-menu {
  pointer-events: auto;
}

/* Todo o conteúdo abaixo do header deve ser clicável */
.admin-page,
.admin-page * {
  pointer-events: auto;
}

/* Overlay só quando ativo */
.overlay {
  pointer-events: none;
}
.overlay.show {
  pointer-events: auto;
}