/* Standard viewport shell.
   Loaded last on dashboard pages to keep layout stable across browser zoom,
   Windows display scaling, and different available viewport widths. */
:root {
  --viewport-page-x: clamp(14px, 1.35vw, 28px);
  --viewport-page-y: clamp(16px, 1.15vw, 24px);
  --viewport-page-gap: clamp(16px, 1vw, 22px);
}

html,
body {
  width: 100%;
  min-width: 320px;
  max-width: 100%;
  overflow-x: visible;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
}

.app-shell {
  display: grid !important;
  grid-template-columns: var(--sidebar-width, 250px) minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh;
  margin: 0 !important;
  padding: 0 !important;
}

.app-shell:has(.sidebar.collapsed) {
  grid-template-columns: var(--sidebar-collapsed, 72px) minmax(0, 1fr) !important;
}

.main-content {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.topbar,
.main-content .topbar {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-inline: var(--viewport-page-x) !important;
}

main,
.main-content main {
  width: 100%;
  min-width: 0;
  max-width: none !important;
  padding: var(--viewport-page-y) var(--viewport-page-x) calc(var(--viewport-page-y) + 16px) !important;
  gap: var(--viewport-page-gap);
}

main > *,
.panel,
.overview-panel,
.visual-dashboard,
.dashboard-countdown,
.schedule-panel,
.highlevel-panel,
.table-panel,
.campaign-panel,
.procurement-panel,
.progress-hero,
.curve-hero,
.money-hero,
.money-focus,
.control-panel,
.kpi-grid,
.dashboard-grid {
  min-width: 0;
  max-width: 100%;
}

.table-wrap,
.table-scroll,
.schedule-scroll,
.chart-wrap,
.curve-chart-stage,
.register-editor-scroll,
.timeline-scroll {
  max-width: 100%;
}

@media (max-width: 1024px) {
  .app-shell,
  .app-shell:has(.sidebar.collapsed) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .main-content {
    overflow: visible;
  }
}

@media (max-width: 640px) {
  :root {
    --viewport-page-x: 14px;
    --viewport-page-y: 16px;
    --viewport-page-gap: 16px;
  }
}