/**
 * PM2.0 - Folha de Estilos Principal
 * Centralizada na pasta assets/css/style.css
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Nexa';
  src: url('../font/Nexa-Heavy.ttf') format('truetype');
  font-weight: 700;
  font-weight: 800;
  font-weight: 900;
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nexa';
  src: url('../font/Nexa-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-weight: 300;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nexa-Heavy';
  src: url('../font/Nexa-Heavy.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nexa-Light';
  src: url('../font/Nexa-ExtraLight.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

.brand-logo-text, .font-nexa {
  font-family: 'Nexa-Heavy', 'Nexa', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.025em;
}

:root {
  --primary-color: #212F98;
  --secondary-color: #1DA8ED;
  --accent-color: #FFAF00;
  --dark-color: #1C2A33;
  --primary-hover: #1C2A33;
  --primary-light: #eef2ff;
  --bg-page: #f6f8fb;
}

html {
  background-color: var(--bg-page);
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-page);
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Suavidade de Navegação & Prevenção de Flicker / Layout Shift (CLS)
   ========================================================================== */

/* Suporte Nativo a Cross-Document View Transitions (Chrome, Edge, Chromium) */
@view-transition {
  navigation: auto;
}

/* Mantém Sidebar e Header perfeitamente estáticos/estáveis durante a transição */
#mainSidebar, #app-sidebar {
  view-transition-name: app-sidebar;
}

#mainHeader, #app-header {
  view-transition-name: app-header;
}

main {
  view-transition-name: app-main-content;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(app-sidebar),
::view-transition-new(app-sidebar),
::view-transition-old(app-header),
::view-transition-new(app-header) {
  animation: none;
}

::view-transition-old(app-main-content) {
  animation: 0.1s cubic-bezier(0.4, 0, 1, 1) both fadeContentOut;
}

::view-transition-new(app-main-content) {
  animation: 0.2s cubic-bezier(0.16, 1, 0.3, 1) both fadeContentIn;
}

@keyframes fadeContentOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.998); }
}

@keyframes fadeContentIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Reserva de dimensões para eliminar o salto de layout (CLS) antes do JS rodar */
@media (min-width: 1024px) {
  #app-sidebar {
    width: 16rem; /* 256px = w-64 */
    height: 100vh;
    flex-shrink: 0;
    background-color: #ffffff;
    border-right: 1px solid rgba(226, 232, 240, 0.8);
    display: block;
    box-sizing: border-box;
  }
}

@media (max-width: 1023px) {
  #app-sidebar {
    display: none;
  }
}

#app-header {
  height: 5rem; /* 80px = h-20 */
  background-color: #ffffff;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  width: 100%;
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Animação suave de entrada para transições de conteúdo principal */
@media (prefers-reduced-motion: no-preference) {
  main {
    animation: smoothPageEntrance 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes smoothPageEntrance {
  0% {
    opacity: 0.88;
    transform: translateY(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scrollbar personalizado elegante */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Custom range slider para orçamento e duração */
.custom-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 9999px;
  outline: none;
}
.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #212F98;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(33, 47, 152, 0.4);
  transition: transform 0.15s ease;
}
.custom-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.custom-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #212F98;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(33, 47, 152, 0.4);
}

/* Utilitários visuais para transição e foco */
.input-focus-primary:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(33, 47, 152, 0.15);
}

/* Animação suave para drop downs e modais */
.dropdown-enter {
  animation: dropdownIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}