/* ────────────────────────────────────────────────────────────────────────
 * sidebar.css — menu lateral profissional do Apix Gestão de Loja.
 *
 * Inspirado no componente do HCM, adaptado à paleta navy/accent da Loja.
 * Cores:
 *   navy        #0B2545  (primary)
 *   navy-light  #1E3A8A  (hover/active)
 *   accent      #D97706  (CTAs e foco)
 *   purple      #7C3AED  (busca/search highlights)
 * ──────────────────────────────────────────────────────────────────────── */

:root {
  --apl-navy: #0B2545;
  --apl-navy-light: #1E3A8A;
  --apl-accent: #D97706;
  --apl-purple: #7C3AED;
  --apl-purple-light: #A78BFA;
  --apl-positive: #0F766E;
  --apl-negative: #B91C1C;
  --apl-warning: #B45309;
  --apl-g50: #f9fafb;
  --apl-g100: #f3f4f6;
  --apl-g200: #e5e7eb;
  --apl-g300: #d1d5db;
  --apl-g400: #9ca3af;
  --apl-g500: #6b7280;
  --apl-g600: #4b5563;
  --apl-g700: #374151;
  --apl-g800: #1f2937;
  --apl-g900: #111827;
}

/* Sidebar — base
 * Importante: override do styles.css antigo (.sidebar tinha gradient azul + padding) */
.sidebar {
  width: 280px !important;
  background: #fff !important;
  color: var(--apl-g700) !important;
  padding: 0 !important;          /* zera padding antigo */
  display: flex !important;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
  transition: transform 0.3s ease;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Links genéricos dentro do sidebar — sem textdecoration apenas.
 * NÃO zera padding/bg aqui pra não brigar com .nav-item / .sidebar-search-item /
 * .sidebar-cta-banner (que reaplicam suas próprias regras). */
.sidebar a { text-decoration: none; }

.sidebar.collapsed {
  transform: translateX(-280px);
}

/* Botão hamburger fixo quando colapsado */
.sidebar-hamburger {
  position: fixed;
  top: 16px;
  left: 16px;
  width: 42px;
  height: 42px;
  background: var(--apl-navy);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(11, 37, 69, 0.3);
}
.sidebar-hamburger:hover {
  background: var(--apl-navy-light);
  transform: scale(1.05);
}
.sidebar.collapsed ~ .sidebar-hamburger,
body:has(.sidebar.collapsed) .sidebar-hamburger { display: flex; }

/* Header do Sidebar — marca + botão fechar */
.sidebar-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--apl-g200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--apl-navy), var(--apl-navy-light));
  color: #fff;
  position: relative;
  overflow: hidden;
}
.sidebar-header::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(217,119,6,.25), transparent 70%);
}
.sidebar-header h2 {
  font-size: 1.1rem;
  margin: 0;
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
}
.sidebar-header h2 .ax-mark {
  color: var(--apl-accent);
  margin-right: 4px;
}
.sidebar-brand-link {
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 1;
  transition: opacity 0.2s;
}
.sidebar-brand-link:hover { opacity: 0.85; }

.sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}
/* Botão Alertas — espelha o botão fechar (28×28) para visual consistente.
   fill="#ffffff" hardcoded no <path> (não usamos currentColor) — imune a
   qualquer regra global de cor (ex.: `a { color: ... }`). */
.sidebar-alert-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
  text-decoration: none !important;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.sidebar-alert-btn .sidebar-alert-icon {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
  flex-shrink: 0;
}
.sidebar-alert-btn:hover {
  background: var(--apl-accent, #D97706);
  border-color: var(--apl-accent, #D97706);
  transform: translateY(-1px);
}
.sidebar-alert-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: #B91C1C;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--apl-navy);
  pointer-events: none;
}

.sidebar-close {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: all 0.2s;
  position: relative;
  z-index: 1;
}
.sidebar-close:hover {
  background: rgba(255,255,255,.25);
}

/* User Info */
.sidebar-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--apl-g200);
  background: var(--apl-g50);
}
.user-avatar-sidebar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--apl-navy), var(--apl-navy-light));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(11,37,69,.2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Quando avatar tem foto carregada, esconde a inicial e mostra moldura */
.user-avatar-sidebar.has-foto {
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(11,37,69,.25);
}

/* Wrapper clicável (HCM style) */
.user-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}
.user-avatar-wrapper:hover .avatar-overlay {
  opacity: 1;
}
.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.user-details-sidebar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.user-name-sidebar {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--apl-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-role-sidebar {
  font-size: 0.7rem;
  color: var(--apl-g500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1px;
}
.btn-logout-sidebar {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--apl-g400);
  padding: 6px;
  border-radius: 6px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-logout-sidebar:hover {
  background: #fee2e2;
  color: var(--apl-negative);
}

/* Busca — caixa de pesquisa estilizada */
.sidebar-search {
  padding: 12px 14px;
  background: #fff;
  border-bottom: 1px solid var(--apl-g200);
}
.sidebar-search-input-wrap {
  position: relative;
  width: 100%;
  height: 40px;
}
.sidebar-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--apl-g600);
  pointer-events: none;
  z-index: 2;
  transition: color .15s ease;
}
.sidebar-search-input-wrap:focus-within .sidebar-search-icon {
  color: var(--apl-accent);
}
.sidebar-search-input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 38px 0 38px;
  border: 1.5px solid var(--apl-g300);
  background: var(--apl-g50);
  color: var(--apl-g900);
  border-radius: 10px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
  transition: all .18s ease;
}
.sidebar-search-input::placeholder {
  color: var(--apl-g500);
  font-weight: 500;
}
.sidebar-search-input:hover {
  border-color: var(--apl-g400);
  background: #fff;
}
.sidebar-search-input:focus {
  border-color: var(--apl-accent);
  background: #fff;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .04),
    0 0 0 3px rgba(217, 119, 6, .15);
}
.sidebar-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}
.sidebar-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 1px solid var(--apl-g300);
  background: #fff;
  color: var(--apl-g600);
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all .15s;
}
.sidebar-search-clear:hover {
  background: #fee2e2;
  border-color: #f87171;
  color: var(--apl-negative);
  transform: translateY(-50%) scale(1.08);
}

/* Atalho de teclado dica (Ctrl+K) */
.sidebar-search-kbd {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--apl-g100);
  border: 1px solid var(--apl-g300);
  color: var(--apl-g500);
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  pointer-events: none;
  z-index: 2;
}
.sidebar-search-input-wrap:focus-within .sidebar-search-kbd { display: none; }

/* Navegação principal */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--apl-g300); border-radius: 2px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--apl-g400); }

/* Seção do menu */
.nav-section {
  margin-bottom: 4px;
}
.nav-section-title {
  padding: 12px 18px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--apl-g500);
  letter-spacing: 0.8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.18s;
  user-select: none;
}
.nav-section-title:hover {
  background: var(--apl-g50);
  color: var(--apl-g700);
}
.nav-section-arrow {
  font-size: 1.1rem;
  color: var(--apl-g400);
  transition: transform 0.3s ease, color 0.2s, background 0.2s;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--apl-g100);
  border-radius: 5px;
  line-height: 1;
}
.nav-section-title:hover .nav-section-arrow {
  background: var(--apl-g200);
  color: var(--apl-g700);
}
.nav-section.expanded .nav-section-arrow {
  transform: rotate(90deg);
  background: rgba(217, 119, 6, 0.15);
  color: var(--apl-accent);
}
.nav-section-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.nav-section.expanded .nav-section-items {
  max-height: 2000px;
}

/* Item de navegação */
.nav-item {
  display: flex;
  align-items: center;
  padding: 9px 18px 9px 32px;
  color: var(--apl-g700);
  text-decoration: none;
  transition: all 0.15s;
  font-size: 0.88rem;
  border-left: 3px solid transparent;
}
.nav-item:hover {
  background: rgba(11, 37, 69, 0.04);
  color: var(--apl-navy);
  border-left-color: var(--apl-accent);
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(11,37,69,.08), rgba(11,37,69,.02));
  color: var(--apl-navy);
  border-left-color: var(--apl-navy);
  font-weight: 600;
}
.nav-item.active::after {
  content: '';
  margin-left: auto;
  width: 6px;
  height: 6px;
  background: var(--apl-accent);
  border-radius: 50%;
}
.nav-icon {
  font-size: 1.05rem;
  margin-right: 10px;
  width: 22px;
  text-align: center;
  opacity: 0.85;
  flex-shrink: 0;
}
.nav-item.active .nav-icon {
  opacity: 1;
}
.nav-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-item.is-subitem {
  padding-left: 50px;
  font-size: 0.82rem;
  color: var(--apl-g600);
}
.nav-item.is-subitem .nav-icon {
  font-size: 0.95rem;
}

/* Footer — banner de destaque + copyright */
.sidebar-footer {
  border-top: 1px solid var(--apl-g200);
  background: var(--apl-g50);
}
.sidebar-cta-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--apl-purple), var(--apl-purple-light));
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 12px;
  transition: opacity 0.2s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(124, 58, 237, .3);
}
.sidebar-cta-banner:hover { opacity: 0.92; transform: translateY(-1px); }
.sidebar-cta-banner .cta-ico { font-size: 1.1rem; }
.sidebar-copyright {
  text-align: center;
  color: var(--apl-g400);
  font-size: 0.7rem;
  padding: 0 12px 12px;
}

/* ═══════════════════════════════════════════════════════════════
 * Resultados de busca inline
 * ═══════════════════════════════════════════════════════════════ */
.sidebar-search-inline-results {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 8px 14px;
  animation: sidebar-search-fade-in .15s ease-out;
}
@keyframes sidebar-search-fade-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sidebar-search-inline-results::-webkit-scrollbar { width: 6px; }
.sidebar-search-inline-results::-webkit-scrollbar-thumb {
  background: var(--apl-g300);
  border-radius: 3px;
}

.sidebar-search-count {
  padding: 10px 12px 4px;
  font-size: 10.5px;
  color: var(--apl-g400);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}

.sidebar-search-grupo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--apl-navy);
  margin-top: 6px;
  border-top: 1px solid var(--apl-g100);
}
.sidebar-search-grupo-header:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 8px;
}
.sidebar-search-grupo-count {
  background: rgba(217, 119, 6, 0.12);
  color: var(--apl-accent);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}

.sidebar-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--apl-g800);
  transition: background .15s, transform .08s;
  cursor: pointer;
  margin: 1px 0;
}
.sidebar-search-item:hover {
  background: rgba(217, 119, 6, 0.06);
}
.sidebar-search-item.is-ativo {
  background: rgba(217, 119, 6, 0.12);
  box-shadow: inset 3px 0 0 var(--apl-accent);
}
.sidebar-search-item-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--apl-g100);
  border-radius: 7px;
  line-height: 1;
}
.sidebar-search-item:hover .sidebar-search-item-icon,
.sidebar-search-item.is-ativo .sidebar-search-item-icon {
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.sidebar-search-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.sidebar-search-item-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  color: var(--apl-navy);
}
.sidebar-search-item-path {
  font-size: 10.5px;
  color: var(--apl-g500);
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-search-chev {
  opacity: .6;
  color: var(--apl-g400);
}
.sidebar-search-item-enter {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--apl-g400);
  border: 1px solid var(--apl-g300);
  background: #fff;
  border-radius: 4px;
  padding: 1px 5px;
  opacity: 0;
  transition: opacity .15s;
}
.sidebar-search-item.is-ativo .sidebar-search-item-enter {
  opacity: 1;
  color: var(--apl-accent);
  border-color: var(--apl-accent);
}
.sidebar-search-item mark {
  background: #fef3c7;
  color: #78350f;
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 700;
}

/* Estado vazio */
.sidebar-search-vazio-state {
  padding: 28px 16px 22px;
  text-align: center;
}
.sidebar-search-vazio-icon {
  font-size: 28px;
  opacity: .4;
  margin-bottom: 8px;
}
.sidebar-search-vazio-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--apl-g700);
  margin-bottom: 3px;
}
.sidebar-search-vazio-sub {
  font-size: 11.5px;
  color: var(--apl-g400);
  margin-bottom: 12px;
}
.sidebar-search-vazio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.sidebar-search-tag {
  border: 1px solid var(--apl-g200);
  background: #fff;
  color: var(--apl-g600);
  padding: 5px 11px;
  border-radius: 12px;
  font-size: 11.5px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all .15s;
}
.sidebar-search-tag:hover {
  background: rgba(217, 119, 6, 0.06);
  border-color: var(--apl-accent);
  color: var(--apl-accent);
  transform: translateY(-1px);
}

/* Main content vai com margin de 280px (quando sidebar visível) */
.app-shell {
  display: flex;
  min-height: 100vh;
}
.app-shell .main {
  flex: 1;
  margin-left: 280px;
  padding: 20px 28px;
  background: #f5f7fa;
  min-height: 100vh;
  box-sizing: border-box;
  transition: margin-left 0.3s ease;
}
body:has(.sidebar.collapsed) .app-shell .main {
  margin-left: 0;
  padding-left: 70px;
}

/* Responsivo */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-280px);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .app-shell .main {
    margin-left: 0;
    padding-left: 64px;
  }
  .sidebar-hamburger { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════
 * OVERRIDE FINAL — força especificidade vs styles.css antigo
 * O styles.css define `.sidebar a { padding: 10px 14px; color: #fff; ... }`
 * com especificidade 0,1,1. Para garantir que nossas classes vencem,
 * prefixamos com `.sidebar` (sobe pra 0,2,0).
 * ═══════════════════════════════════════════════════════════════ */

/* Reset de regra genérica que poderia herdar */
.sidebar .nav-item {
  padding: 9px 18px 9px 32px !important;
  color: var(--apl-g700) !important;
  background: transparent !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.sidebar .nav-item:hover {
  background: rgba(11, 37, 69, 0.04) !important;
  color: var(--apl-navy) !important;
}
.sidebar .nav-item.active {
  background: linear-gradient(90deg, rgba(11,37,69,.08), rgba(11,37,69,.02)) !important;
  color: var(--apl-navy) !important;
  font-weight: 600 !important;
}
.sidebar .sidebar-search-item {
  padding: 9px 10px !important;
  color: var(--apl-g800) !important;
  margin: 1px 0 !important;
  border-radius: 8px !important;
}
.sidebar .sidebar-search-item:hover {
  background: rgba(217, 119, 6, 0.06) !important;
}
.sidebar .sidebar-cta-banner {
  padding: 10px 14px !important;
  margin: 12px !important;
  color: #fff !important;
  border-radius: 10px !important;
}
.sidebar .sidebar-search-tag {
  padding: 5px 11px !important;
  margin: 0 !important;
  color: var(--apl-g600) !important;
  background: #fff !important;
  border-radius: 12px !important;
}