/* ============================================================
   EQI Budget System — app-layout.css
   Layout base unificado para todos os módulos.
   Substitui: .opex-layout, .hc-layout, .dashboard-layout,
              .settings-layout, .obz-layout, .module-layout,
              .timesheet-layout, .r-layout, .v-layout, .cx-layout,
              .forecast-layout
   ============================================================
   Uso: <div class="app-layout"> ... </div>
   Depende de: ../styles.css (tokens, reset, shell)
   ============================================================ */

/* ============================================================
   LAYOUT PRINCIPAL: container flex (aside + main)
   ============================================================ */
.app-layout {
  display: -webkit-box;
  display:    -ms-flexbox;
  display:        flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ============================================================
   MAIN: área de conteúdo com scroll interno
   ============================================================ */
.app-layout > main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 3rem;
  min-width: 0;
}

/* Responsivo — tablets */
@media (min-width: 768px) {
  .app-layout > main {
    padding: 2rem 2rem 4rem;
  }
}

/* Responsivo — desktop */
@media (min-width: 1024px) {
  .app-layout > main {
    padding: 2.5rem 2.5rem 5rem;
  }
}

/* ============================================================
   ALIASES — classes legadas continuam funcionando
   Mantidas para compatibilidade reversa; novas telas devem
   usar exclusivamente .app-layout.
   ============================================================ */
.opex-layout,
.hc-layout,
.dashboard-layout,
.settings-layout,
.obz-layout,
.module-layout,
.timesheet-layout,
.r-layout,
.v-layout,
.cx-layout,
.forecast-layout {
  display: -webkit-box;
  display:    -ms-flexbox;
  display:        flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  overflow: hidden;
}

.opex-layout > main,
.hc-layout > main,
.dashboard-layout > main,
.settings-layout > main,
.obz-layout > main,
.module-layout > main,
.timesheet-layout > main,
.r-layout > main,
.v-layout > main,
.cx-layout > main,
.forecast-layout > main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 3rem;
  min-width: 0;
}

@media (min-width: 768px) {
  .opex-layout > main,
  .hc-layout > main,
  .dashboard-layout > main,
  .settings-layout > main,
  .obz-layout > main,
  .module-layout > main,
  .timesheet-layout > main,
  .r-layout > main,
  .v-layout > main,
  .cx-layout > main,
  .forecast-layout > main {
    padding: 2rem 2rem 4rem;
  }
}

@media (min-width: 1024px) {
  .opex-layout > main,
  .hc-layout > main,
  .dashboard-layout > main,
  .settings-layout > main,
  .obz-layout > main,
  .module-layout > main,
  .timesheet-layout > main,
  .r-layout > main,
  .v-layout > main,
  .cx-layout > main,
  .forecast-layout > main {
    padding: 2.5rem 2.5rem 5rem;
  }
}

/* ============================================================
   UTILITÁRIOS DE LAYOUT (opcional, uso com .app-layout)
   ============================================================ */

/* Sidebar genérica — pode ser usada quando módulo não precisa
   de estilos visuais customizados na sidebar */
.app-layout > aside,
.app-sidebar {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}