/* =========================================================
   PDV Quitanda — Design Tokens
   Portado de: Quitanda_PDV_Design_System/colors_and_type.css
   UI Library: MudBlazor 9 + Material Design
   ========================================================= */

/* ---------------------------------------------------------
   BASE COLOR PALETTE
   --------------------------------------------------------- */
:root {
  /* Primária — Forest Green */
  --color-primary-900: #1B5E20;
  --color-primary-800: #2E7D32;   /* brand primary */
  --color-primary-600: #388E3C;
  --color-primary-400: #4CAF50;   /* primary lighten */
  --color-primary-200: #81C784;   /* secondary */
  --color-primary-100: #C8E6C9;
  --color-primary-50:  #F1F8F2;

  /* Neutral */
  --color-neutral-900: #1C1C1C;
  --color-neutral-700: #4A4A4A;
  --color-neutral-500: #929292;
  --color-neutral-300: #D6D5D5;
  --color-neutral-100: #F7F7F7;
  --color-neutral-50:  #F9FBF9;   /* app background */

  /* Funcionais */
  --color-error:   #E50000;
  --color-success: #26B050;
  --color-warning: #F59E0B;
  --color-info:    #006BB7;

  /* Ações */
  --color-link:        #006BB7;
  --color-btn-primary: #1B6EC2;

  /* Aliases semânticos */
  --color-bg:              var(--color-neutral-50);
  --color-surface:         #FFFFFF;
  --color-appbar-bg:       var(--color-primary-800);
  --color-appbar-text:     #FFFFFF;
  --color-sidebar-bg:      var(--color-primary-800);
  --color-sidebar-text:    #FFFFFF;

  --color-fg1:             var(--color-neutral-900);
  --color-fg2:             var(--color-neutral-700);
  --color-fg3:             var(--color-neutral-500);
  --color-border:          var(--color-neutral-300);

  --color-nav-hover:       rgba(255,255,255,0.10);
  --color-nav-active:      rgba(255,255,255,0.37);

  /* Status — Venda */
  --color-status-em-andamento: #F59E0B;
  --color-status-finalizada:   #26B050;
  --color-status-cancelada:    #E50000;

  /* Status — Caixa */
  --color-status-aberto:  #26B050;
  --color-status-fechado: var(--color-neutral-500);

  /* ---------------------------------------------------------
     TIPOGRAFIA
     --------------------------------------------------------- */
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  /* Escala (rem, base 16px) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.125rem;

  /* Pesos */
  --font-regular: 400;
  --font-medium:  500;
  --font-bold:    700;

  /* Entrelinha */
  --leading-tight:  1.2;
  --leading-normal: 1.5;

  /* Espaçamento de letras */
  --tracking-wide:  0.08em;   /* overline */

  /* ---------------------------------------------------------
     ESPAÇAMENTO (base 4px)
     --------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---------------------------------------------------------
     RAIOS DE BORDA
     --------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 9999px;

  /* ---------------------------------------------------------
     ELEVAÇÃO / SOMBRA
     --------------------------------------------------------- */
  --shadow-1: 0 2px 4px rgba(0,0,0,0.12);
  --shadow-2: 0 3px 8px rgba(0,0,0,0.15);
  --shadow-4: 0 4px 16px rgba(0,0,0,0.18);

  /* ---------------------------------------------------------
     TAMANHOS DE COMPONENTES
     --------------------------------------------------------- */
  --size-appbar-h:   3.5rem;  /* 56px */
  --size-sidebar-w:  250px;
  --size-nav-item-h: 3rem;    /* 48px */
  --size-btn-h:      36px;
}

/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-fg1);
}

/* ---------------------------------------------------------
   UTILITÁRIOS TIPOGRÁFICOS
   --------------------------------------------------------- */
.qs-overline {
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg3);
}

.qs-caption {
  font-size: var(--text-xs);
  color: var(--color-fg3);
}

/* ---------------------------------------------------------
   STATUS BADGES — pill com dot opcional
   --------------------------------------------------------- */
.qs-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.qs-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Venda */
.qs-badge--em-andamento               { background: #FFF8E1; color: #B45309; }
.qs-badge--em-andamento .qs-badge__dot { background: #F59E0B; }

.qs-badge--finalizada                  { background: #E8F5E9; color: #2E7D32; }
.qs-badge--finalizada .qs-badge__dot   { background: #26B050; }

.qs-badge--cancelada                   { background: #FFEBEE; color: #C62828; }
.qs-badge--cancelada .qs-badge__dot    { background: #E50000; }

/* Caixa */
.qs-badge--aberto                     { background: #E8F5E9; color: #2E7D32; }
.qs-badge--aberto .qs-badge__dot      { background: #26B050; }

.qs-badge--fechado                    { background: #F5F5F5; color: #929292; }
.qs-badge--fechado .qs-badge__dot     { background: #929292; }

/* Produto */
.qs-badge--ativo                      { background: #E8F5E9; color: #2E7D32; }
.qs-badge--inativo                    { background: #F5F5F5; color: #929292; }

.qs-badge--estoque-baixo              { background: #FFEBEE; color: #C62828; }
.qs-badge--estoque-baixo .qs-badge__dot { background: #E50000; }

.qs-badge--estoque-ok                 { background: #E8F5E9; color: #2E7D32; }
.qs-badge--estoque-ok .qs-badge__dot  { background: #26B050; }

.qs-badge--por-peso                   { background: #E3F2FD; color: #1565C0; }

/* ---------------------------------------------------------
   PAYMENT METHOD CHIPS
   --------------------------------------------------------- */
.qs-payment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qs-payment-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 2px solid #e0e0e0;
  background: #fff;
  color: #4A4A4A;
  border-radius: var(--radius-md);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
  line-height: 1;
  font-family: var(--font-sans);
}

.qs-payment-chip:hover:not(.qs-payment-chip--active) {
  border-color: #4CAF50;
  background: #F1F8F2;
}

.qs-payment-chip--active {
  border-color: #2E7D32;
  background: #2E7D32;
  color: #fff;
}

/* ---------------------------------------------------------
   SIDEBAR NAV — hover / active overlay sobre verde
   --------------------------------------------------------- */
.mud-nav-link:hover:not(.active) {
  background-color: var(--color-nav-hover) !important;
  border-radius: var(--radius-sm) !important;
}

.mud-nav-link.active {
  background-color: var(--color-nav-active) !important;
  border-radius: var(--radius-sm) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------
   PDV — LAYOUT PRINCIPAL
   --------------------------------------------------------- */
.qs-pdv-layout {
  display: flex;
  gap: 0;
  height: calc(100vh - 4.5rem);
  overflow: hidden;
}

.qs-pdv-left {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.qs-pdv-right {
  width: 360px;
  flex-shrink: 0;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Cabeçalho interno da venda */
.qs-pdv-venda-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

/* Campo de busca com overlay de resultados */
.qs-search-wrapper {
  position: relative;
}

.qs-search-loading {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.qs-resultados-lista {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-4);
  border: 1px solid var(--color-border);
  max-height: 300px;
  overflow-y: auto;
}

.qs-resultado-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  border-left: 3px solid transparent;
  transition: background-color 0.1s ease;
}

.qs-resultado-item:last-child { border-bottom: none; }

.qs-resultado-item:hover {
  background-color: rgba(46, 125, 50, 0.08);
}

/* Destaque do item selecionado por ↑/↓ — bem mais forte que o hover: é o principal jeito de
   navegar (operador usa teclado, não mouse), precisa ficar óbvio qual Enter vai escolher. */
.qs-resultado-item--foco {
  background-color: var(--color-primary-100);
  border-left-color: var(--color-primary-600);
}

.qs-resultado-item--foco .qs-resultado-nome {
  font-weight: var(--font-bold, 700);
}

.qs-resultados-dica {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-fg3);
  background: var(--color-primary-50);
  text-align: center;
}

.qs-resultado-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.qs-resultado-nome {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-fg1);
}

.qs-resultado-codigo {
  font-size: var(--text-xs);
  color: var(--color-fg3);
}

.qs-resultado-preco {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-primary-800);
  white-space: nowrap;
  margin-left: var(--space-4);
}

/* Carrinho */
.qs-carrinho {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.qs-carrinho-tabela {
  flex: 1;
}

.qs-carrinho-rodape {
  padding: var(--space-3) var(--space-4);
  border-top: 2px solid var(--color-border);
  background: var(--color-neutral-100);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.qs-carrinho-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  color: var(--color-fg3);
  flex: 1;
}

/* Totais card com gradiente */
.qs-totais-card {
  background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 60%, #388E3C 100%);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  color: #fff;
}

.qs-totais-card__overline {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  margin-bottom: var(--space-1);
}

.qs-totais-card__valor {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--space-1);
}

.qs-totais-card__meta {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}

/* MudBlazor define .mud-divider-fullwidth com flex-grow:1 (pensado pra crescer na
   LARGURA dentro de uma linha) — mas .qs-pdv-right é uma COLUNA flexível, então esse
   flex-grow cresce na ALTURA e engole todo espaço vertical sobrando (achado em 19/10:
   os 2 <MudDivider /> "soltos" do painel de pagamento viravam ~105px cada, um vazio
   enorme entre Desconto/Forma de Pagamento e entre Registrar/Finalizar). Zera só o
   crescimento, mantendo a largura total (width:100% já vem do MudBlazor).
   Ver docs/decisoes.md, 2026-10-19. */
.qs-pdv-right > .mud-divider-fullwidth {
  flex-grow: 0;
}

/* Seção genérica no painel direito */
.qs-pdv-secao {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Pagamentos listados */
.qs-pagamentos-lista {
  background: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.qs-pagamento-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) 0;
}

/* Atalhos de valor rápido */
.qs-atalhos-valor {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
}

.qs-atalho-btn {
  background: var(--color-neutral-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-fg2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  font-family: var(--font-sans);
}

.qs-atalho-btn:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-400);
  color: var(--color-primary-800);
}

/* Botão finalizar venda — destaque máximo */
.qs-btn-finalizar {
  height: 48px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------
   CAIXA — STAT CARDS
   --------------------------------------------------------- */
.qs-stat-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--space-4);
}

.qs-stat-card__overline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg3);
  margin-bottom: var(--space-1);
}

.qs-stat-card__valor {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary-800);
  line-height: 1.1;
}

.qs-stat-card__meta {
  font-size: 12px;
  color: var(--color-fg3);
  margin-top: var(--space-1);
}