/* App Shell Layout - CSS-based responsive layout to prevent layout shift */

/* Main content wrapper */
.app-shell-main-content {
  min-height: 100vh;
  /* Mobile first - no margin */
  margin-left: 0;
  /* Mobile bottom padding for bottom nav */
  padding-bottom: 80px;
  transition: margin-left 0.2s ease;
}

/* Desktop: add margin for sidebar */
@media (min-width: 769px) and (orientation: landscape),
       (min-width: 1025px) {
  .app-shell-main-content {
    margin-left: var(--app-shell-sidebar-width, 70px);
    padding-bottom: 0;
  }
}

/* Tablet portrait: no margin, no bottom padding */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  .app-shell-main-content {
    margin-left: 0;
    padding-bottom: 0;
  }
}

/* Header responsive padding */
.app-shell-header {
  background-color: var(--mantine-color-white);
  border-bottom: 1px solid var(--mantine-color-gray-3);
  position: sticky;
  top: 0;
  z-index: 100;
  /* Mobile first */
  padding: 7px 15px 7px 9px;
}

@media (min-width: 769px) {
  .app-shell-header {
    padding: 16px 24px;
  }
}

/* Main content padding */
.app-shell-content {
  /* Mobile first */
  padding: 10px 0 0 0;
}

@media (min-width: 769px) {
  .app-shell-content {
    padding: 24px;
  }
}

/* Dark mode support */
[data-mantine-color-scheme="dark"] .app-shell-header {
  background-color: var(--mantine-color-dark-7);
  border-bottom-color: var(--mantine-color-dark-4);
}