/* Visual do portal Oficina Ministerial: grafite com a grade fina de fundo */
body {
    background-color: #161616;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 44px 44px;
    color: #f2f2f2;
    font-family: "DM Sans", sans-serif;
}

.tab-view {
    display: none;
}

.tab-view.active {
    display: block;
}

.transition-all-custom {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #222222;
}

::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff9800;
}

.milestone-node {
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.milestone-node:hover {
    transform: scale(1.15);
}

/* Menu lateral retrátil — só ícones quando encolhido */
#app-sidebar {
    transition: width 0.2s ease;
}

@media (min-width: 768px) {
    #app-sidebar.sidebar-collapsed {
        width: 5.25rem !important;
    }
}

#app-sidebar.sidebar-collapsed .sidebar-label {
    display: none;
}

#app-sidebar.sidebar-collapsed .nav-btn,
#app-sidebar.sidebar-collapsed #sidebar-toggle-row {
    justify-content: center;
}

#app-sidebar.sidebar-collapsed #sidebar-brand-row {
    justify-content: center;
}

/* ==========================================================================
   Janelas amplas (padrão): toda janela (#modal-…) usa quase a tela inteira,
   em vez de uma coluna estreita no meio. O conteúdo rola por dentro e os
   formulários ganham mais colunas nas telas largas.
   ========================================================================== */
[id^="modal-"] { padding: 12px !important; align-items: stretch !important; }
[id^="modal-"] > div {
  width: 100% !important;
  max-width: min(1500px, 100%) !important;
  max-height: calc(100dvh - 24px) !important;
  margin: auto;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
@media (min-width: 1024px) {
  [id^="modal-"] { padding: 20px 28px !important; }
  [id^="modal-"] > div { max-height: calc(100dvh - 40px) !important; }
  /* formulários: 4 colunas (os campos largos continuam ocupando 2) */
  [id^="modal-"] .grid.sm\:grid-cols-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  [id^="modal-"] .grid.sm\:grid-cols-2 > .sm\:col-span-2 { grid-column: span 2 / span 2; }
  [id^="modal-"] .grid.sm\:grid-cols-2 > .sm\:col-span-2:last-child { grid-column: 1 / -1; } /* anotações: a linha toda */
  [id^="modal-"] textarea { min-height: 120px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  [id^="modal-"] .grid.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}