/* ===========================================================
   default.css — Core styles for Membership Script site
   =========================================================== */

/* Root variables for container sizing */
:root {
  --container-max-width: 1200px;
  --container-gutter: 15px;
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
               "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f9f9f9;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header & Navigation */
.site-header {
  background: #004080;
  color: #fff;
}
.site-nav {
  max-width: var(--container-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 1rem var(--container-gutter);
  display: flex;
  gap: 1rem;
}
.site-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

/* Constrain site to standard container width and center */
.site-header,
.site-main,
.site-footer {
  max-width: var(--container-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-gutter);
}

/* Main Content Area */
.site-main {
  margin: 2rem auto;
  flex: 1;
  display: flex;
  gap: 2rem;
}

/* Sidebar */
.site-sidebar {
  flex: 0 0 250px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1.5rem;
}
.site-sidebar h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: #004080;
}

/* Sidebar Menu */
.sidebar-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-menu li {
  margin-bottom: 0.75rem;
}
.sidebar-menu a {
  display: block;
  padding: 0.75rem 1rem;
  color: #004080;
  background: #f8f9fa;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease;
}
.sidebar-menu a:hover {
  background: #e9ecef;
}
.sidebar-menu a.active {
  background: #004080;
  color: #fff;
}

/* Content Area */
.site-content {
  flex: 1;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 2rem;
}
.site-content h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #004080;
}
.site-content h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #004080;
}
.site-content p {
  margin-bottom: 1rem;
}

/* Forms */
input,
select,
textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}
button,
input[type="submit"],
input[type="button"] {
  cursor: pointer;
  padding: 0.5rem 1rem;
  border: none;
  background: #004080;
  color: #fff;
  border-radius: 4px;
  font-size: 1rem;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
table th,
table td {
  padding: 0.75rem;
  border: 1px solid #ddd;
  text-align: left;
}

/* Utility: Progress Bar */
.progress-bar {
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
  height: 1rem;
  margin-bottom: 1rem;
}
.progress-fill {
  height: 100%;
  background: #004080;
  transition: width 0.3s ease;
}

/* ===========================================================
   Messages (error / success) styling
   =========================================================== */
.error-message,
.alert-danger {
  background: #ffe6e6;
  border: 1px solid #e74c3c;
  color: #8b1c1c;
  margin: 2rem auto;
  padding: 1rem;
  border-radius: 4px;
  max-width: var(--container-max-width);
  width: 100%;
}

.success-message,
.alert-success {
  background: #e6ffed;
  border: 1px solid #2ecc71;
  color: #2c662d;
  margin: 2rem auto;
  padding: 1rem;
  border-radius: 4px;
  max-width: var(--container-max-width);
  width: 100%;
}

.error-message p,
.success-message p {
  margin: 0;
  padding: 0;
}

.error-message span i,
.success-message span i {
  margin-right: 0.5rem;
  vertical-align: middle;
  font-size: 1.2em;
}

/* Table layout */
.site-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.site-content table td {
  vertical-align: top;
  padding: 1rem;
}

/* Right-hand column background */
.site-content table tr td:nth-child(2) {
  background: #f8f9fa;
  padding: 1.5rem;
}

/* Section headings */
.site-content h2,
.site-content h3 {
  color: #004080;
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Labels */
.site-content label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Text inputs */
.site-content input[type="text"],
.site-content input[type="password"] {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Checkboxes: inline label, aligned middle */
.site-content td label {
  display: inline-block;
  margin-bottom: 1rem;
  cursor: pointer;
}
.site-content input[type="checkbox"] {
  vertical-align: middle;
  margin-right: 0.5rem;
}

/* Submit button */
.site-content input[type="submit"],
.site-content .submit {
  background: #004080;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Footer */
.site-footer {
  max-width: 100%;
  width: 100%;
  margin: 2rem auto 0;
  border-top: 1px solid #ddd;
  padding: 1rem;
  color: #333;
  font-size: 0.875rem;
  text-align: center;
}