/* ============================================================
   INTRANET RANCHO S — topbar-v2.css
   Sprint 3.B1 — Topbar e Drawer redesenhados (Claude Design)
   Sobrepõe seletivamente classes existentes em layout.css.
   ============================================================ */

/* ── TOPBAR — refinamentos ──────────────────────────────────── */
.topbar { gap: 12px; }

/* Brand mais compacto, libera espaço pra breadcrumb e busca */
.topbar-brand { flex: 0 0 auto; gap: 10px; }
.topbar-brand img { height: 32px; }
.topbar-brand-label { font-size: 11px; letter-spacing: 0.14em; }

/* Pill branco p/ logo de fundo transparente sobre topbar verde */
.topbar-logo-pill {
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.topbar-logo-pill img { height: 30px; width: 30px; object-fit: contain; display: block; }

/* Separador flexível entre breadcrumb e elementos da direita */
.topbar-spacer { flex: 1 1 auto; min-width: 6px; }

/* ── SEARCH-BOX (busca global) ─────────────────────────────── */
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 6px 10px;
  width: 260px;
  max-width: 32vw;
  flex-shrink: 1;
  transition: background 0.15s, border-color 0.15s;
}
.search-box:hover,
.search-box:focus-within {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.32);
}
.search-box svg { color: rgba(255,255,255,0.55); flex-shrink: 0; }
.search-box input {
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  width: 100%;
  min-width: 0;
}
.search-box input::placeholder { color: rgba(255,255,255,0.55); }
.search-box kbd {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  color: rgba(255,255,255,0.75);
  font-family: 'DM Sans', sans-serif;
  flex-shrink: 0;
}

/* ── LOJA-SWITCH ────────────────────────────────────────────── */
.loja-switch-wrapper { position: relative; flex-shrink: 0; }

.loja-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  padding: 6px 10px;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.loja-switch:hover { background: rgba(255,255,255,0.20); }
.loja-switch.open { background: rgba(255,255,255,0.20); }
.loja-switch .label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.loja-switch .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--verde-limao-2);
}
.loja-switch svg { flex-shrink: 0; color: rgba(255,255,255,0.65); }

.loja-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  z-index: 250;
  overflow: hidden;
  animation: fadeIn 0.15s ease;
}
.loja-dropdown-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text3);
  text-transform: uppercase;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.loja-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.12s;
}
.loja-option:hover { background: var(--verde-suave); }
.loja-option.active { background: var(--verde-suave); }
.loja-option-icon {
  width: 28px; height: 28px;
  background: var(--verde-suave);
  color: var(--verde-escuro);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.loja-option.active .loja-option-icon {
  background: var(--verde-escuro);
  color: #fff;
}
.loja-option-meta { flex: 1; min-width: 0; }
.loja-option-name { font-size: 13px; font-weight: 600; color: var(--text); }
.loja-option-sub  { font-size: 11px; color: var(--text3); margin-top: 1px; }
.loja-option-check { color: var(--verde-escuro); flex-shrink: 0; }

.loja-dropdown-foot {
  border-top: 1px solid var(--border);
  padding: 8px;
  background: var(--bg);
}
.btn-all-stores {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--verde-escuro);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.btn-all-stores:hover { background: var(--verde-suave); }

/* ── TOPBAR USER (refinamento — meta e role) ───────────────── */
.topbar-user { gap: 10px; padding-right: 4px; }
.topbar-user .meta,
.user-dropdown-trigger .meta { text-align: right; line-height: 1.2; }
.topbar-user .meta .name,
.user-dropdown-trigger .meta .name { font-size: 13px; font-weight: 600; color: #fff; }
.topbar-user .meta .role,
.user-dropdown-trigger .meta .role { font-size: 10.5px; color: rgba(255,255,255,0.65); }

/* ── DRAWER (substitui menu-overlay) ──────────────────────── */
/* Mantemos menu-overlay como container, mas refinamos o panel. */
.menu-panel { padding: 0; width: 280px; max-width: 86vw; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.sidebar-brand-logo {
  width: 36px; height: 36px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-brand .grow { flex: 1; min-width: 0; }
.sidebar-brand .brand-label {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--verde-limao-2);
  text-transform: uppercase;
}
.sidebar-brand .brand-sub {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-top: 1px;
}
.sidebar-close {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-close:hover { background: rgba(255,255,255,0.20); }

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  padding: 16px 18px 6px;
}

/* Nav items refinados (extends .menu-nav li a) */
.menu-nav li a .nav-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.menu-nav li a .nav-icon svg {
  width: 18px; height: 18px;
  color: rgba(255,255,255,0.65);
}
.menu-nav li a:hover .nav-icon svg,
.menu-nav li a.active .nav-icon svg { color: var(--verde-limao-2); }

.menu-nav li a .nav-badge {
  margin-left: auto;
  background: var(--verde-limao);
  color: var(--verde-escuro);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9px;
  min-width: 18px;
  text-align: center;
}

.sidebar-foot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  background: rgba(0,0,0,0.20);
}
.sidebar-foot .dot {
  width: 6px; height: 6px;
  background: var(--verde-limao);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--verde-limao);
}

/* ── BUSCA — resultados dropdown (S3.B3) ───────────────────── */
.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  z-index: 240;
  max-height: 420px;
  overflow-y: auto;
  display: none;
}
.search-results.open { display: block; }
.search-group {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.search-group:last-child { border-bottom: 0; }
.search-group-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--text3);
  text-transform: uppercase;
  padding: 6px 14px;
}
.search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  transition: background 0.12s;
}
.search-item:hover { background: var(--verde-suave); }
.search-item .label { flex: 1; min-width: 0; }
.search-item .sub { font-size: 11px; color: var(--text3); }

/* ── SIDEBAR DARK THEME (verde escuro + ícones brancos) ─────── */
.menu-panel {
  background: #005C28;
  border-right: 1px solid rgba(0,0,0,0.30);
}

/* Texto dos itens — branco sobre verde escuro */
.menu-nav li a { color: rgba(255,255,255,0.85); }
.menu-nav li a:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.menu-nav li a.active {
  background: #1B7A3D;
  color: #fff;
}

/* Ícone — fundo sutil, herda currentColor (branco) */
.menu-panel .nav-icon {
  background: rgba(255,255,255,0.10);
}
.menu-panel .menu-nav li a:hover .nav-icon,
.menu-panel .menu-nav li a.active .nav-icon {
  background: rgba(255,255,255,0.18);
}

/* Rótulos de seção — limão claro sobre verde escuro */
.menu-section-label {
  color: var(--verde-limao-2);
}

/* Logo no cabeçalho da sidebar — filter converte cor→branco sobre verde escuro */
.sidebar-brand-img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 3px;
}

/* Remove flex:1 do layout.css que espaçava seções desigualmente */
.menu-panel .menu-nav { flex: none; }

/* ── Responsivo ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .search-box { display: none; }
  .topbar-user .meta,
  .user-dropdown-trigger .meta { display: none; }
  .loja-switch .label { display: none; }
}
@media (max-width: 640px) {
  .loja-switch { padding: 6px 8px; }
  .loja-switch .name { font-size: 12px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
  .topbar { padding: 0 12px; gap: 8px; }
}

/* ── Modo campo (entregador): topbar enxuta ──────────────────
   Aplicado por js/app.js (body.modo-campo). Esconde a busca global e
   a troca-de-loja, que não fazem sentido pro entregador (loja única).
   Mantém menu lateral filtrado, sino de avisos e avatar/sair. */
body.modo-campo .search-box,
body.modo-campo .loja-switch-wrapper { display: none !important; }