@import "./constants.css";

body {
  counter-reset: h3counter;
  background-color: var(--background-color);
  margin: 0;
  padding: 0;
  font-family: var(--body-font, 'Arial', sans-serif);
  min-height: 100vh;
}

.main-container {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-x: hidden;
}

.container-sidebar-and-content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  flex: 1;
  align-items: stretch;
  position: relative;
  background-color: #f8f9fa;
  overflow: hidden;
  margin-top: var(--header-height);
  transition: all var(--transition-speed) ease;
  padding: 0;
  margin-bottom: 0;
}


/* No-sidebar authenticated pages (projects list, profile, admin pages) */
.container-sidebar-and-content.no-sidebar .sidebar,
.container-sidebar-and-content.no-sidebar .sidebar-overlay {
  display: none !important;
}

.container-sidebar-and-content.no-sidebar .template-content {
  margin-left: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Page content on public templates (login, activate) — compensate for fixed header */
.public-template-content {
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
  width: 100%;
}

/* Authenticated pages without sidebar (profile) */
.no-sidebar-template-content {
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
  width: 100%;
  padding: 0 0 2rem 0;
}

@media (max-width: 768px) {
  .container-sidebar-and-content {
    flex-direction: column;
    width: 100%;
    padding: 0;
    overflow-x: hidden;
  }
}