/* ============================================================================
   TOPBAR V2.0 - GLASSMORPHISM + GRAIN
   Barra superior com efeito vidro e textura granulada
   ============================================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: 64px;

  /* ========================================
     GLASSMORPHISM EFFECT
     ======================================== */
  background: rgba(var(--bg-primary-rgb), 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);

  /* ========================================
     GRAIN TEXTURE
     SVG inline para textura sutil
     ======================================== */
  background-image:
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence baseFrequency="0.9" numOctaves="3" /></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.05"/></svg>');

  /* Borda sutil */
  border-bottom: 1px solid rgba(var(--border-color-rgb), 0.15);

  /* Sombra difusa para baixo (estilo Photoshop) */
  box-shadow:
    0 4px 20px -2px rgba(0, 0, 0, 0.25),
    0 2px 10px -1px rgba(0, 0, 0, 0.15),
    0 1px 4px rgba(0, 0, 0, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);

  /* Layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;

  transition: all 0.3s ease;
}

/* ============================================================================
   LOGO COM GRADIENT
   ============================================================================ */

.topbar-logo {
  font-family: var(--font-title, 'Space Grotesk', sans-serif);
  font-size: 20px;
  font-weight: 800;

  /* Gradient do tema */
  background: linear-gradient(
    135deg,
    var(--color-secondary, #FFC800) 0%,
    var(--color-primary, #FF4500) 100%
  );

  /* Text gradient (WebKit) */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* Glow sutil */
  filter: drop-shadow(0 0 8px rgba(var(--color-secondary-rgb, 255, 200, 0), 0.35));

  letter-spacing: -0.02em;
  user-select: none;
  cursor: pointer;

  transition: all 0.3s ease;
}

.topbar-logo:hover {
  filter: drop-shadow(0 0 12px rgba(var(--color-secondary-rgb, 255, 200, 0), 0.5))
          brightness(1.1);
  transform: scale(1.02);
}

/* ============================================================================
   TOPBAR ACTIONS
   Botões, selects, etc
   ============================================================================ */

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.client-select {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  color: var(--text-primary);
  font-family: var(--font-secondary);
  font-weight: var(--font-medium);
  letter-spacing: 0.04em;
  text-transform: none;
  cursor: pointer;
  min-width: 190px;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 45%),
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"%3E%3Cpath d="M1 1l5 5 5-5" stroke="white" stroke-width="1.5" fill="none" stroke-linecap="round"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  transition: border-color 0.2s ease, background 0.2s ease;
  background-origin: padding-box;
  background-clip: padding-box;
  padding-right: 42px; /* evita “corte” do glow do caret */
}

.client-select:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.3);
}

.client-select:hover {
  border-color: rgba(var(--color-primary-rgb), 0.5);
}

.client-select::-ms-expand {
  display: none;
}

body[data-mode="light"] .client-select {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.2);
}

.topbar-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  margin-right: -0.5rem;
  user-select: none;
  opacity: 0.9;
}

/* ============================================================================
   SCROLL EFFECT
   Aumenta blur quando faz scroll
   ============================================================================ */

.topbar.scrolled {
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.18),
    0 4px 16px rgba(0, 0, 0, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* ============================================================================
   HEADER LEFT - Logo + Breadcrumb + Status
   ============================================================================ */

.header-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* ============================================================================
   BREADCRUMBS - Posição e Fonte
   ============================================================================ */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 2rem; /* Distância da logo - AUMENTADA */
  font-family: var(--font-title, 'Space Grotesk', sans-serif);
  font-size: 14px;
  font-weight: 500;
}

.crumb {
  color: var(--text-secondary, #A0A0A0);
  transition: color 0.2s ease;
}

.crumb:hover {
  color: var(--text-primary, #F0F0F0);
}

.crumb.current {
  color: var(--text-primary, #F0F0F0);
  font-weight: 600;
}

.crumb-sep {
  color: var(--text-tertiary, #606060);
  font-size: 12px;
}

/* ============================================================================
   STATUS INDICATOR
   ============================================================================ */

.header-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
  padding: 0.35rem 0.75rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.9); }
}

.status-text {
  color: #10B981;
  font-family: var(--font-title, 'Space Grotesk', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================================
   HEADER RIGHT - Actions
   ============================================================================ */

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ============================================================================
   THEME CONTROLS - Toggle Modo + Dropdown Temas
   ============================================================================ */

/* .header-theme-controls definido abaixo em T1 */

/* Toggle de Modo (Claro/Escuro) */
#modeToggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#modeToggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-secondary, #FFC800);
}

#modeToggle .mode-icon {
  font-size: 18px;
}

/* Dropdown de Temas */
#themeSelect,
.theme-select {
  appearance: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  color: var(--text-primary, #F0F0F0);
  font-family: var(--font-title, 'Space Grotesk', sans-serif);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  min-width: 140px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"%3E%3Cpath d="M1 1l5 5 5-5" stroke="%23A0A0A0" stroke-width="1.5" fill="none" stroke-linecap="round"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  transition: all 0.2s ease;
}

#themeSelect:hover,
.theme-select:hover {
  border-color: var(--color-secondary, #FFC800);
}

#themeSelect:focus,
.theme-select:focus {
  outline: none;
  border-color: var(--color-secondary, #FFC800);
  box-shadow: 0 0 0 2px rgba(var(--color-secondary-rgb, 255, 200, 0), 0.2);
}

/* T1: Theme Controls - Label à esquerda na MESMA LINHA */
.header-theme-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-right: 0.5rem;
  padding-right: 0.75rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* Label "ESCOLHA SEU ESTILO:" inline */
.theme-select-label {
  font-family: 'Space Grotesk', var(--font-primary), sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #A0A0A0);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  margin-right: 0.25rem;
}

body[data-mode="light"] .theme-select-label {
  color: var(--text-secondary, #666);
}

body[data-mode="light"] #themeSelect,
body[data-mode="light"] .theme-select {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--text-primary, #1A1A1A);
}