/* ==========================================================================
   AMBC - Estilos da Topbar (Barra Superior)
   Arquivo: css/layout/topbar.css
   Descrição: Estiliza elementos internos da topbar
              (botão menu, título, busca, ações, usuário)
   ========================================================================== */

/* ============================================
   🧱 ESTRUTURA INTERNA DA TOPBAR
   ============================================ */
.topbar__inicio {
  display: flex;
  align-items: center;
  gap: var(--esp-md);
  flex: 1;
  min-width: 0; /* permite truncar texto */
}

.topbar__centro {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 2;
  max-width: 480px;
}

.topbar__fim {
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
  margin-left: auto;
}

/* ============================================
   🍔 BOTÃO HAMBURGER (toggle da sidebar)
   ============================================ */
.topbar__toggle {
  display: none; /* visível apenas em tablet/mobile */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--raio-md);
  color: var(--cor-cinza-700);
  cursor: pointer;
  transition: background-color var(--transicao-rapida);
}

.topbar__toggle:hover {
  background-color: var(--cor-cinza-100);
}

.topbar__toggle:focus-visible {
  outline: var(--borda-foco);
}

.topbar__toggle .material-icons {
  font-size: 24px;
}

/* ============================================
   📍 TÍTULO DA PÁGINA ATUAL
   ============================================ */
.topbar__titulo {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--cor-cinza-800);
  line-height: var(--lh-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__subtitulo {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--cor-cinza-500);
  line-height: var(--lh-tight);
}

/* ============================================
   🔍 CAMPO DE BUSCA
   ============================================ */
.topbar__busca {
  position: relative;
  width: 100%;
}

.topbar__busca-input {
  width: 100%;
  height: 40px;
  padding: 0 var(--esp-md) 0 calc(var(--esp-md) + 24px);
  font-family: var(--fonte-principal);
  font-size: var(--fs-sm);
  color: var(--cor-cinza-800);
  background-color: var(--cor-cinza-100);
  border: 1px solid transparent;
  border-radius: var(--raio-md);
  transition: background-color var(--transicao-rapida),
              border-color var(--transicao-rapida),
              box-shadow var(--transicao-rapida);
}

.topbar__busca-input::placeholder {
  color: var(--cor-cinza-400);
}

.topbar__busca-input:hover {
  background-color: var(--cor-cinza-200);
}

.topbar__busca-input:focus {
  outline: none;
  background-color: var(--cor-branco);
  border-color: var(--cor-primaria);
  box-shadow: var(--sombra-foco);
}

.topbar__busca-icone {
  position: absolute;
  left: var(--esp-sm);
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--cor-cinza-400);
  pointer-events: none;
}

/* ============================================
   🔔 BOTÕES DE AÇÃO (notificações, mensagens, etc.)
   ============================================ */
.topbar__acao {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--raio-full);
  color: var(--cor-cinza-600);
  cursor: pointer;
  transition: background-color var(--transicao-rapida),
              color var(--transicao-rapida);
}

.topbar__acao:hover {
  background-color: var(--cor-cinza-100);
  color: var(--cor-primaria);
}

.topbar__acao:focus-visible {
  outline: var(--borda-foco);
}

.topbar__acao .material-icons {
  font-size: 22px;
}

/* Sino de notificações — sempre na cor primária */
.topbar__acao.topbar__sino {
  color: var(--cor-primaria);
}

.topbar__acao.topbar__sino:hover {
  color: var(--cor-primaria-escura, var(--cor-primaria));
}

.topbar__acao.topbar__sino .material-icons {
  font-size: 34px;
}

/* Badge de notificação (bolinha vermelha com número) */
.topbar__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--cor-primaria-contraste);
  background-color: var(--cor-erro);
  border: 2px solid var(--cor-branco);
  border-radius: var(--raio-full);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ============================================
   🔔 PAINEL DE NOTIFICAÇÕES (dropdown)
   ============================================ */
.topbar__notif-wrapper {
  position: relative;
}

.topbar__notif-painel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  background: var(--cor-branco);
  border: 1px solid var(--cor-cinza-200);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-md);
  z-index: 200;
  overflow: hidden;
}

.topbar__notif-painel[hidden] {
  display: none;
}

.topbar__notif-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-sm) var(--esp-md);
  border-bottom: 1px solid var(--cor-cinza-100);
}

.topbar__notif-titulo {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--cor-cinza-800);
}

.topbar__notif-link {
  font-size: var(--fs-xs);
  color: var(--cor-primaria);
  text-decoration: none;
}

.topbar__notif-link:hover {
  text-decoration: underline;
}

.topbar__notif-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.topbar__notif-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-sm) var(--esp-md);
  border-bottom: 1px solid var(--cor-cinza-100);
}

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

.topbar__notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-sm);
  padding: var(--esp-sm) var(--esp-md);
  border-bottom: 1px solid var(--cor-cinza-100);
  cursor: pointer;
  transition: background var(--transicao-rapida);
}

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

.topbar__notif-item:hover {
  background: var(--cor-cinza-50, #f9fafb);
}

.topbar__notif-item--nao-lida {
  background: var(--cor-primaria-100, #eff6ff);
}

.topbar__notif-item--nao-lida:hover {
  background: var(--cor-primaria-200, #dbeafe);
}

.topbar__notif-corpo {
  flex: 1;
  min-width: 0;
}

.topbar__notif-item-titulo {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--cor-cinza-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__notif-item-msg {
  font-size: var(--fs-xs);
  color: var(--cor-cinza-600);
  margin-top: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.topbar__notif-item-tempo {
  font-size: var(--fs-xs);
  color: var(--cor-cinza-400);
  margin-top: 4px;
}

.topbar__notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-primaria);
  flex-shrink: 0;
  margin-top: 5px;
}

.topbar__notif-vazia {
  padding: var(--esp-lg) var(--esp-md);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--cor-cinza-400);
}


/* ============================================
   🔗 BOTÃO WORDPRESS ADMIN
   ============================================ */
.topbar__btn-wp {
  display: flex;
  align-items: center;
  padding: var(--esp-xs);
  border-radius: var(--raio-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--cor-cinza-600);
  text-decoration: none;
  transition: background-color var(--transicao-rapida), color var(--transicao-rapida);
  white-space: nowrap;
}

.topbar__btn-wp:hover {
  background-color: var(--cor-cinza-100);
  color: var(--cor-primaria);
}

/* ============================================
   👤 MENU DO USUÁRIO
   ============================================ */
.topbar__usuario {
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
  padding: var(--esp-xs) var(--esp-sm);
  background: none;
  border: none;
  border-radius: var(--raio-md);
  cursor: pointer;
  transition: background-color var(--transicao-rapida);
}

.topbar__usuario:hover {
  background-color: var(--cor-cinza-100);
}

.topbar__usuario:focus-visible {
  outline: var(--borda-foco);
}

.topbar__usuario-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--raio-full);
  background-color: var(--cor-primaria);
  color: var(--cor-primaria-contraste);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
  overflow: hidden;
}

.topbar__usuario-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topbar__usuario-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: var(--lh-tight);
  text-align: left;
}

.topbar__usuario-nome {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--cor-cinza-800);
}

.topbar__usuario-cargo {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--cor-cinza-500);
}

.topbar__usuario-seta {
  font-size: 18px;
  color: var(--cor-cinza-500);
}

/* ============================================
   👤 DROPDOWN DO MENU DE USUÁRIO
   ============================================ */
.topbar__usuario-wrapper {
  position: relative;
}

.topbar__usuario-dropdown {
  position: fixed;
  top: var(--altura-header);
  right: var(--esp-lg);
  min-width: 230px;
  background: var(--fundo-card);
  border: var(--borda-padrao);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-lg);
  z-index: var(--z-modal);
  padding: var(--esp-xs) 0;
}

.topbar__usuario-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-sm);
  padding: var(--esp-sm) var(--esp-md);
  font-size: 0.875rem;
  color: var(--cor-texto);
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--transicao-rapida);
}

.topbar__usuario-dropdown-item:hover {
  background-color: var(--cor-cinza-100);
}

.topbar__usuario-dropdown-sair {
  color: var(--cor-erro);
}

.topbar__usuario-dropdown-divider {
  border: none;
  border-top: 1px solid var(--cor-borda);
  margin: var(--esp-xs) 0;
}

/* ============================================
   🌙 TOGGLE SOL/LUA (uiverse.io — namespaciado)
   ============================================ */
.topbar__switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  flex-shrink: 0;
}

.topbar__switch #topbar-tema-toggle {
  opacity: 0;
  width: 0;
  height: 0;
}

.topbar__switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #2196f3;
  transition: 0.4s;
  z-index: 0;
  overflow: hidden;
}

.topbar__switch .sun-moon {
  position: absolute;
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: yellow;
  transition: 0.4s;
}

.topbar__switch #topbar-tema-toggle:checked + .slider { background-color: black; }
.topbar__switch #topbar-tema-toggle:focus + .slider { box-shadow: 0 0 1px #2196f3; }

.topbar__switch #topbar-tema-toggle:checked + .slider .sun-moon {
  transform: translateX(26px);
  background-color: white;
  animation: topbar-rotate-center 0.6s ease-in-out both;
}

@keyframes topbar-rotate-center {
  0%   { transform: translateX(26px) rotate(0); }
  100% { transform: translateX(26px) rotate(360deg); }
}

.topbar__switch .moon-dot { opacity: 0; transition: 0.4s; fill: gray; }
.topbar__switch #topbar-tema-toggle:checked + .slider .sun-moon .moon-dot { opacity: 1; }
.topbar__switch .slider.round { border-radius: 34px; }
.topbar__switch .slider.round .sun-moon { border-radius: 50%; }

.topbar__switch #moon-dot-1 { left: 10px; top: 3px;  position: absolute; width: 6px;  height: 6px;  z-index: 4; }
.topbar__switch #moon-dot-2 { left: 2px;  top: 10px; position: absolute; width: 10px; height: 10px; z-index: 4; }
.topbar__switch #moon-dot-3 { left: 16px; top: 18px; position: absolute; width: 3px;  height: 3px;  z-index: 4; }

.topbar__switch .light-ray { position: absolute; z-index: -1; fill: white; opacity: 10%; }
.topbar__switch #light-ray-1 { left: -8px;  top: -8px;  width: 43px; height: 43px; }
.topbar__switch #light-ray-2 { left: -50%;  top: -50%;  width: 55px; height: 55px; }
.topbar__switch #light-ray-3 { left: -18px; top: -18px; width: 60px; height: 60px; }

.topbar__switch .cloud-light { position: absolute; fill: #eee; animation: topbar-cloud-move 6s infinite; }
.topbar__switch .cloud-dark  { position: absolute; fill: #ccc; animation: topbar-cloud-move 6s infinite 1s; }

.topbar__switch #cloud-1 { left: 30px; top: 15px; width: 40px; }
.topbar__switch #cloud-2 { left: 44px; top: 10px; width: 20px; }
.topbar__switch #cloud-3 { left: 18px; top: 24px; width: 30px; }
.topbar__switch #cloud-4 { left: 36px; top: 18px; width: 40px; }
.topbar__switch #cloud-5 { left: 48px; top: 14px; width: 20px; }
.topbar__switch #cloud-6 { left: 22px; top: 26px; width: 30px; }

@keyframes topbar-cloud-move {
  0%   { transform: translateX(0px); }
  40%  { transform: translateX(4px); }
  80%  { transform: translateX(-4px); }
  100% { transform: translateX(0px); }
}

.topbar__switch .stars { transform: translateY(-32px); opacity: 0; transition: 0.4s; }
.topbar__switch .star  { fill: white; position: absolute; transition: 0.4s; animation: topbar-star-twinkle 2s infinite; }
.topbar__switch #topbar-tema-toggle:checked + .slider .stars { transform: translateY(0); opacity: 1; }

.topbar__switch #star-1 { width: 20px; top: 2px;  left: 3px;  animation-delay: 0.3s; }
.topbar__switch #star-2 { width: 6px;  top: 16px; left: 3px; }
.topbar__switch #star-3 { width: 12px; top: 20px; left: 10px; animation-delay: 0.6s; }
.topbar__switch #star-4 { width: 18px; top: 0px;  left: 18px; animation-delay: 1.3s; }

@keyframes topbar-star-twinkle {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.2); }
  80%  { transform: scale(0.8); }
  100% { transform: scale(1); }
}

/* ============================================
   ➖ DIVISOR VERTICAL (entre grupos de ações)
   ============================================ */
.topbar__divisor {
  width: 1px;
  height: 24px;
  background-color: var(--cor-cinza-200);
  margin: 0 var(--esp-xs);
}

/* ============================================
   📱 RESPONSIVIDADE — Tablet (≤ 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .topbar__toggle {
    display: inline-flex; /* aparece o hamburger */
  }

  .topbar__centro {
    display: none; /* esconde busca no tablet */
  }
}

/* ============================================
   📱 RESPONSIVIDADE — Mobile (≤ 640px)
   ============================================ */
@media (max-width: 640px) {
  .topbar__subtitulo {
    display: none;
  }

  .topbar__usuario-info {
    display: none; /* só mostra o avatar */
  }

  .topbar__usuario-seta {
    display: none;
  }

  .topbar__switch {
    display: none; /* toggle acessível pelo dropdown do usuário em mobile */
  }

  /* Dropdowns viram gavetas fixas abaixo da topbar */
  .topbar__notif-painel {
    position: fixed;
    top: var(--altura-header);
    left: 0;
    right: 0;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    transform: none;
    border-radius: 0 0 var(--raio-lg) var(--raio-lg);
  }

  .topbar__usuario-dropdown {
    left: 0;
    right: 0;
    min-width: 0;
    border-radius: 0 0 var(--raio-md) var(--raio-md);
  }
}