/**
 * App layout – matches csm-ui look (light gray page, system font).
 * Literal values only so layout never breaks.
 */

.App {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content-wrapper {
  overflow-x: hidden;
  padding: 0.75rem; /* tighter gutters */
}

/* When dashboard is shown: csm-ui style – gray background, system font, 24px padding with top spacing */
.content-wrapper.csm-dashboard-wrapper {
  padding: 0;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
}

#csm-dashboard-root {
  width: 100%;
  min-height: 100%;
}

body #csm-dashboard-root ~ *,
.content-wrapper #csm-dashboard-root {
  width: 100%;
}

.welcome-content {
  max-width: var(--csm-max-width-content);
  margin: 0;
}

.welcome-content .lead {
  color: #666;
  font-size: 14px;
}

body.csm-dashboard-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.csm-dashboard-page > .content-wrapper.csm-dashboard-wrapper {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

body.csm-dashboard-page > .content-wrapper.csm-dashboard-wrapper > #csm-dashboard-root {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}