html {
  font-size: 14px;
}

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

.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 #258cfb;
}

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

body {
  margin-bottom: 60px;
}

body {
    background-color: #014421; /* Dark green */
    color: #f8f9fa;            /* Light text for contrast */
}

/* Make sure form fields and cards have a readable background */
.form-control, .card, .bg-white, .modal-content {
    background-color: #fff !important;
    color: #212529 !important; /* Bootstrap default text color */
}

/* Only make labels/headings light on dark backgrounds */
.bg-dark label,
.bg-dark .col-form-label,
.bg-dark .fw-bold,
.bg-dark h2,
.bg-dark h1,
.bg-dark h3,
body label,
body .col-form-label,
body .fw-bold,
body h2,
body h1,
body h3 {
    color: #f8f9fa;
}

/* But inside cards, modals, or white backgrounds, use dark text */
.card label,
.card .col-form-label,
.card .fw-bold,
.card h2,
.card h1,
.card h3,
.modal-content label,
.modal-content .col-form-label,
.modal-content .fw-bold,
.modal-content h2,
.modal-content h1,
.modal-content h3,
.bg-white label,
.bg-white .col-form-label,
.bg-white .fw-bold,
.bg-white h2,
.bg-white h1,
.bg-white h3 {
    color: #212529 !important;
}

/* Keep error text visible */
.text-danger {
    color: #ff4c4c !important;
}

/* Make table text light for dark backgrounds */
table, th, td {
    color: #f8f9fa !important;
}

/* If you use Bootstrap table classes, also target them */
.table, .table th, .table td {
    color: #f8f9fa !important;
}

/* Make table headings visible with a dark background */
th, .table th {
    background-color: #113c1b !important; /* Dark green shade */
    color: #f8f9fa !important;            /* Light text for contrast */
}

.label-value-tight .col-form-label {
    margin-right: 0.5rem;
}
.label-value-tight .align-self-center {
    margin-left: 0 !important;
}