/* Prospecta Corban — UI foundation v282
   Regras globais de layout calibradas para navegador em zoom 100%.
   Este arquivo fica por último de propósito: corrige apenas geometria,
   responsividade e fluidez sem reestilizar os módulos existentes. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto;
}

html,
body {
  width: 100%;
  min-width: 0;
}

body {
  overflow-x: hidden;
}

#app-view,
.app-view {
  width: 100%;
  min-width: 0;
}

/* A tela autenticada precisa continuar completamente fora do layout
   enquanto o login estiver ativo. Os display:grid !important abaixo não
   podem vencer a classe utilitária .hidden. */
#app-view.hidden,
.app-view.hidden {
  display: none !important;
}

/* ---------------------------------------------------------
   1. SIDEBAR REALMENTE FIXA
   O conteúdo da página rola; o menu permanece no mesmo lugar.
   --------------------------------------------------------- */

@media (min-width: 821px) {
  .app-view {
    display: grid !important;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
    align-items: start;
  }

  .app-view .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--sidebar-width) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overscroll-behavior: contain;
  }

  .app-view .main {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .app-view .sidebar-nav {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }

  .app-view .sidebar-nav::-webkit-scrollbar {
    display: none;
  }
}

/* ---------------------------------------------------------
   2. BASE DE 100% DE ZOOM
   Nenhum zoom/transform escondido é aplicado no desktop.
   Todos os módulos herdam uma caixa previsível e proporcional.
   --------------------------------------------------------- */

.app-view,
.app-view *,
.app-view *::before,
.app-view *::after {
  box-sizing: border-box;
}

.app-view .main,
.app-view .content,
.app-view .master-workspace,
.app-view .pipeline-shell,
.app-view .pipeline-stage,
.app-view .reports-launcher {
  min-width: 0;
}

.app-view .content:not(.hidden) {
  animation: corban-view-enter 90ms ease-out both;
}

@keyframes corban-view-enter {
  from {
    opacity: .985;
    transform: translateY(1px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------
   3. CELULAR / "MODO COMPUTADOR"
   Em touch, inclusive quando o navegador anuncia ~980px em modo
   desktop, preservamos o menu lateral compacto e liberamos o
   máximo de largura para o conteúdo.
   --------------------------------------------------------- */

@media (pointer: coarse) and (max-width: 1100px) {
  .app-view,
  .app-view.sidebar-collapsed {
    --sidebar-width: 70px !important;
    display: grid !important;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
  }

  .app-view .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: var(--sidebar-width) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 10px 9px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border-right: 1px solid var(--app-border) !important;
    border-bottom: 0 !important;
    overflow: hidden !important;
  }

  .app-view .main {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .app-view .sidebar-header {
    min-height: 74px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .app-view .side-brand {
    justify-content: center !important;
  }

  .app-view .side-brand-copy,
  .app-view .sidebar-section-label,
  .app-view .nav-label,
  .app-view .nav-badge,
  .app-view .user-details,
  .app-view .logout-label,
  .app-view .sidebar-orbit,
  .app-view .sidebar-toggle {
    display: none !important;
  }

  .app-view .sidebar-nav {
    width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    gap: 4px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none;
  }

  .app-view .sidebar-nav::-webkit-scrollbar {
    display: none;
  }

  .app-view .nav,
  .app-view .logout-button,
  .app-view .user-chip {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .app-view .side-bottom {
    display: block !important;
    margin-top: auto !important;
  }

  .app-view .topbar,
  .app-view .content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .app-view .warning {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  .reports-launch-grid {
    gap: 12px !important;
  }
}

/* O breakpoint antigo transformava o menu em uma barra horizontal
   e, em celulares, acabava ocupando quase a tela inteira. Mantemos
   a navegação lateral também abaixo de 680px. */
@media (max-width: 680px) {
  .app-view,
  .app-view.sidebar-collapsed {
    --sidebar-width: 62px !important;
    display: grid !important;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
  }

  .app-view .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: var(--sidebar-width) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 8px 7px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border-right: 1px solid var(--app-border) !important;
    border-bottom: 0 !important;
  }

  .app-view .main {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .app-view .sidebar-header {
    min-height: 66px !important;
    flex-direction: column !important;
  }

  .app-view .sidebar-nav {
    margin-left: 0 !important;
    display: grid !important;
  }

  .app-view .sidebar-nav .nav {
    width: 100% !important;
    min-height: 42px !important;
  }

  .app-view .side-bottom {
    display: block !important;
  }

  .app-view .topbar {
    min-height: 58px !important;
    padding: 10px 11px !important;
  }

  .app-view .content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .reports-launch-grid {
    grid-template-columns: 1fr !important;
  }

  .pipeline-table-scroll,
  .table-wrap,
  .reports-table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-view .content:not(.hidden) {
    animation: none !important;
  }
}


/* ---------------------------------------------------------
   4. SIDEBAR MOBILE — ÍCONES E RODAPÉ
   O CSS legado da versão desktop recolhida tinha regras que, em Safari/iOS,
   deixavam os SVGs com caixa mas sem traço visível. No mobile definimos a
   geometria completa do botão e do SVG, sem depender do estado collapsed.
   --------------------------------------------------------- */

@media (pointer: coarse) and (max-width: 1100px),
       (max-width: 680px) {
  #app-view #app-sidebar .sidebar-nav {
    align-content: start !important;
    justify-content: start !important;
    grid-auto-rows: 46px !important;
    gap: 5px !important;
  }

  #app-view #app-sidebar .nav {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    gap: 0 !important;
    border-radius: 12px !important;
  }

  #app-view #app-sidebar .nav-icon {
    position: static !important;
    inset: auto !important;
    width: 21px !important;
    min-width: 21px !important;
    max-width: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    flex: 0 0 21px !important;
    display: grid !important;
    place-items: center !important;
    color: #8fa29a !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #app-view #app-sidebar .nav-icon svg {
    display: block !important;
    width: 21px !important;
    min-width: 21px !important;
    max-width: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #app-view #app-sidebar .nav.active .nav-icon {
    color: var(--app-accent) !important;
  }

  #app-view #app-sidebar .nav.disabled .nav-icon {
    opacity: .38 !important;
  }

  #app-view #app-sidebar .side-bottom {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    margin: auto auto 0 !important;
    padding: 8px 0 0 !important;
    display: grid !important;
    gap: 7px !important;
  }

  #app-view #app-sidebar #profile-button.profile-chip,
  #app-view #app-sidebar #logout-button {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  #app-view #app-sidebar #admin-avatar.profile-sidebar-avatar {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 9px !important;
  }

  #app-view #app-sidebar #admin-avatar-image {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover !important;
    border-radius: inherit !important;
  }

  #app-view #app-sidebar #admin-avatar-image.hidden {
    display: none !important;
  }

  #app-view #app-sidebar #admin-avatar-fallback {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    font-size: 9px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #app-view #app-sidebar .logout-icon {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    display: grid !important;
    place-items: center !important;
    color: #a9b8b1 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #app-view #app-sidebar .logout-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}


/* ---------------------------------------------------------
   5. VISIBILIDADE POR PERFIL NO MOBILE
   A classe .hidden é a fonte de verdade definida pelo JavaScript conforme
   perfil/permissão. Regras responsivas nunca podem reexibir uma navegação,
   botão ou bloco que o sistema marcou como oculto.
   --------------------------------------------------------- */

#app-view #app-sidebar .hidden,
#app-view #app-sidebar nav.hidden,
#app-view #app-sidebar .sidebar-nav.hidden,
#app-view #app-sidebar .nav.hidden,
#app-view #app-sidebar button.hidden,
#app-view #app-sidebar .side-bottom .hidden {
  display: none !important;
}