/* ===========================================
   BASE STYLES
   Reset and global defaults for GSFT application
   =========================================== */

/* ======================================
   CSS RESET
   ====================================== */
* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  max-width: 100%;
}

/* ======================================
   BODY
   ====================================== */
body {
  padding: 0;
  padding-top: var(--header-height);
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  overflow-x: hidden;
  max-width: 100%;
}

.container-fluid {
  overflow-x: hidden;
  max-width: var(--page-max-width);
  margin: 0 auto;
}

/* Navbar container-fluid should always be full width */
.navbar .container-fluid {
  max-width: none;
  margin: 0;
}

/* ======================================
   MAIN CONTENT AREA
   ====================================== */
main {
  padding: var(--navbar-content-gap, 0);
  padding-left: 8px;
  padding-right: 0;
  padding-bottom: 0;
  margin: 0;
}

/* Mobile: remove all padding/margin from main */
@media (max-width: 768px) {
  main {
    margin-left: 0;
    padding: 0;
  }
}

/* ======================================
   FORMS
   ====================================== */
form {
  display: inline;
}

/* ======================================
   PAGE WRAPPER - For CSS Scoping
   ====================================== */
.page {
  /* Base page wrapper for CSS scoping - intentionally minimal */
  display: contents;
}

/* ======================================
   TYPOGRAPHY DEFAULTS
   ====================================== */
.txtbody {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.inputfooter {
  font-size: 8pt;
  margin-top: 0;
}

.form-text {
  font-size: 0.57em;
  color: var(--color-text-muted);
  line-height: var(--line-height-snug);
}

/* ======================================
   LAYOUT CONTAINERS
   ====================================== */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 15px;
}

/* Page container with centralized width control */
.page-container {
  max-width: var(--page-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* Full width variant (no max-width constraint) */
.page-container--fluid {
  max-width: none;
}

.content-container {
  width: 100%;
  max-width: var(--content-max-width);
  padding: 0;
  margin: 0 auto;
}

.page-header-container {
  padding: 0;
  margin-left: var(--space-xl);
}

/* ======================================
   ALIGNMENT UTILITIES
   ====================================== */
.centered, 
.centred {
  text-align: center;
}

/* ======================================
   BACKDROP (for modals)
   ====================================== */
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  display: none;
}

/* ======================================
   PRINT STYLES
   ====================================== */
@media print {
  .navbar {
    display: none;
  }

  main {
    margin: 0;
    padding: 0;
  }
}