/**
 * Amivra — Common theme for the whole project.
 * Load after variables.css and design-system.css. Use with layout-app.css for uniform UI.
 * Single responsive DOM: one markup for all viewports; layout adapts via CSS media queries.
 * Mobile quality: iPhone (375–430), Samsung (360–412), Motorola (360–412), small (320).
 */

/* Ensure main wrappers use theme box model and don't overflow */
.layout-app .app-main-wrap,
.layout-app .container,
.layout-app .main-container,
.main-container,
.content-area {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

/* Contain horizontal overflow so only table/list scroll areas scroll, not the whole page */
.layout-app .container,
.layout-app .main-container {
  overflow-x: hidden;
}

/* Responsive container padding (one place for all pages) */
.main-container {
  padding: var(--spacing-lg) var(--spacing-sm);
}

@media (max-width: var(--bp-tablet)) {
  .main-container {
    padding: var(--spacing-md) var(--spacing-xs);
  }

  .content-area {
    padding: var(--spacing-md) var(--spacing-xs);
  }
}

@media (max-width: var(--bp-mobile)) {
  .main-container {
    padding: var(--spacing-sm) var(--spacing-xs);
  }

  .content-area {
    padding: var(--spacing-sm) var(--spacing-xs);
  }
}

/* Extra-small viewports (320px — iPhone SE narrow, small Android) */
@media (max-width: var(--bp-xs)) {
  .main-container {
    padding: var(--spacing-xs);
  }

  .content-area {
    padding: var(--spacing-xs);
  }
}

/* Optional: shared page title area (pages can use .page-title for in-content titles) */
.page-title {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  margin-top: 0;
}

/* Shared page footer (no inline styles) */
.page-footer {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
}

/* Redirect / placeholder message block */
.redirect-message {
  text-align: center;
  padding: var(--spacing-2xl);
}

/* Config display (e.g. setup page) */
.config-display {
  background: var(--color-surface);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}