/* Import typography styles */
@import url('/manage/css/typography.css');

/* Brand Colors */
:root {
  --green-light: #6CC24A;
  --green-medium: #4C8D2B;
  --green-dark: #3c9032;
  --text-gray: #A7A8AA;
}

/* Base styles */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Top Navigation */
.top-nav {
  background-color: var(--green-medium);
  padding: 1rem;
  color: white;
}

.top-nav a {
  color: white;
  text-decoration: none;
}

/* Main Content */
.main-content {
  flex: 1;
  padding: 0.5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Adjust spacing for specific pages */
.main-content h2:first-child {
  margin-top: 0.25rem;
}

/* Keep normal spacing for profile and billing pages */
body[data-page="profile"] .main-content h2:first-child,
body[data-page="billing"] .main-content h2:first-child {
  margin-top: 2rem;
}

/* Links */
a {
  color: var(--green-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #0d5a3f;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  background-color: #f8f9fa;
  border: 1px solid var(--green-dark);
  color: var(--green-dark);
  /* Add a transparent border to prevent layout shift on hover */
  box-shadow: 0 0 0 1px transparent;
}

.btn:hover {
  background-color: #f3f4f6;
  /* Add a subtle box-shadow on hover instead of changing border */
  box-shadow: 0 0 0 1px var(--green-dark);
}

.btn-primary {
  background-color: var(--green-dark);
  color: white;
  border: none;
}

.btn-primary:hover {
  background-color: white;
  color: var(--green-dark);
  border: 1px solid var(--green-dark);
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem;
  font-family: 'Roboto', sans-serif;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Progress Bar */
.progress-bar {
  background-color: var(--green-light);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  background-color: var(--green-dark);
  height: 100%;
  transition: width 0.3s ease;
}

/* Footer */
.footer {
  margin-top: auto;
  padding: 2rem;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid #ddd;
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-logo {
  max-width: 250px;
  height: auto;
}

.copyright {
  color: var(--text-gray);
  font-size: 0.8rem;
} 
/* ---- "a test run is using this server" ------------------------------------
   The regression suite snapshots and restores the WHOLE database between
   specs, so anything somebody does on dev while it runs can be rolled back
   underneath them. Loud on purpose, and full width above the navigation: the
   failure this prevents is discovering on your own that your work vanished.
   Never seen on production — nothing writes the marker there. */
.regression-banner {
    background: #b32b23;
    color: #fff;
    padding: 0.65rem 1rem;
    font-size: 0.92rem;
    line-height: 1.4;
    text-align: center;
    border-bottom: 3px solid #7d1d17;
}
.regression-banner strong { color: #fff; }

/* It flashes gently rather than sitting still, because it is transient and a
   reader should notice it appear. Motion is dropped for anyone who has asked
   the system not to animate. */
@media (prefers-reduced-motion: no-preference) {
    .regression-banner { animation: regression-pulse 2.4s ease-in-out infinite; }
    @keyframes regression-pulse {
        0%, 100% { background: #b32b23; }
        50%      { background: #cf3a31; }
    }
}