html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Green theme to match PennyRoyal.App */
:root {
  --primary-green: #4a9e5a;
  --primary-green-dark: #3d8549;
  --primary-green-light: #5ab96c;
  --light-green-bg: #e8f5e9;
  --trans-green-bg: rgb(232 245 233 / 86%);
  --accent-red: #ce2022;
  --accent-gold: #fec969;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(74, 158, 90, 0.5);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Override Bootstrap primary color with green */
.btn-primary {
  background-color: var(--primary-green);
  border-color: var(--primary-green);
  color: white;
}

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

.btn-primary:active,
.btn-primary.active {
  background-color: var(--primary-green-dark) !important;
  border-color: var(--primary-green-dark) !important;
}

.btn-outline-primary {
  color: var(--primary-green);
  border-color: var(--primary-green);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--primary-green);
  border-color: var(--primary-green);
  color: white;
}

.bg-primary {
  background-color: var(--primary-green) !important;
}

.badge.bg-primary {
  background-color: var(--primary-green) !important;
}

.text-primary {
  color: var(--primary-green) !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: var(--primary-green-dark) !important;
}

/* Light green backgrounds */
.bg-light-green {
  background-color: var(--light-green-bg);
}

/* Form controls focus state */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 0.2rem rgba(74, 158, 90, 0.25);
}

/* Links */
a {
  color: var(--primary-green);
}

a:hover {
  color: var(--primary-green-dark);
}

/* Card headers with green theme */
.card-header.bg-primary {
  background-color: var(--primary-green) !important;
  color: white;
}

/* Navigation active state */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--primary-green);
}

/* Pagination */
.pagination .page-link {
  color: var(--primary-green);
}

.pagination .page-item.active .page-link {
  background-color: var(--primary-green);
  border-color: var(--primary-green);
}

.pagination .page-link:hover {
  color: var(--primary-green-dark);
}

/* Progress bars */
.progress-bar {
  background-color: var(--primary-green);
}

/* Alerts */
.alert-primary {
  background-color: var(--light-green-bg);
  border-color: var(--primary-green);
  color: var(--primary-green-dark);
}

/* List group */
.list-group-item.active {
  background-color: var(--primary-green);
  border-color: var(--primary-green);
}

/* Custom button variant for accent */
.btn-accent {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
  color: white;
}

.btn-accent:hover,
.btn-accent:focus {
  background-color: #b01b1d;
  border-color: #b01b1d;
  color: white;
  opacity: 0.9;
}

/* Navbar customization */
.navbar-light .navbar-brand,
.navbar-light .navbar-brand:hover {
  color: var(--primary-green);
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(74, 158, 90, 0.7);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--primary-green);
}

.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--primary-green);
}