/* ====== General Layout ====== */
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background-color: #f9faf9; /* light grey background */
  color: #2c3e50;
  line-height: 1.6;
}

h1, h2, h3 {
  font-weight: 600;
  color: #1a2a3a;
}

a.link {
  color: #009688; /* modern green */
  text-decoration: none;
}

a.link:hover {
  text-decoration: underline;
  color: #00695c; /* darker green */
}

/* ====== Form Styling ====== */
form label {
  font-weight: 500;
  color: #34495e;
}

form .form-control, form .form-select {
  border: 1px solid #ccd6dd;
  border-radius: 4px;
  transition: border-color 0.2s ease;
}

form .form-control:focus, form .form-select:focus {
  border-color: #00bcd4; /* cyan */
  box-shadow: 0 0 0 0.2rem rgba(0,188,212,0.25);
}

/* Autocomplete dropdown */
#organismList .list-group-item {
  cursor: pointer;
}
#organismList .list-group-item:hover {
  background-color: #e0f7fa; /* light cyan */
}

/* ====== Table Styling ====== */
.table {
  font-size: 0.95rem;
}

.table thead {
  background-color: #009688; /* green header */
  color: #fff;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #fdf2e9; /* peach tint */
}

.table td, .table th {
  vertical-align: top !important;
}

.muted {
  color: #7f8c8d;
  font-style: italic;
}

/* ====== Buttons ====== */
.btn-primary {
  background-color: #009688; /* green */
  border-color: #009688;
}
.btn-primary:hover {
  background-color: #00695c;
  border-color: #00695c;
}

.btn-info {
  background-color: #00bcd4; /* cyan */
  border-color: #00bcd4;
}
.btn-info:hover {
  background-color: #0097a7;
  border-color: #0097a7;
}

.btn-outline-secondary {
  border-color: #009688;
  color: #009688;
}
.btn-outline-secondary:hover {
  background-color: #009688;
  color: #fff;
}

/* Modern grey style for View Sequence button */
.btn-sequence {
  background-color: #9e9e9e;   /* medium grey */
  border-color: #9e9e9e;
  color: #fff;                 /* white text for contrast */
}

.btn-sequence:hover {
  background-color: #616161;   /* darker grey on hover */
  border-color: #616161;
  color: #fff;
}







/* ====== PDB / AlphaFold Section ====== */
.pdb-group {
  margin-bottom: 0.75em;
}

.small-text {
  font-size: 0.85rem;
  color: #555;
}

/* ====== Modal Styling ====== */
.modal-content {
  border-radius: 6px;
}

.modal-header {
  background-color: #009688; /* green */
  color: #fff;
}

.modal-title {
  font-weight: 600;
}

pre {
  background-color: #f1f8e9; /* light green background */
  padding: 1em;
  border-radius: 4px;
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
}

/* ====== Spinner ====== */
.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid #ccc;
  border-top-color: #00bcd4; /* cyan spinner */
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn-green {
  background-color: #008B8B; /* replace with your preferred green */
  color: #fff;
  border: none;
}
.btn-green:hover {
  background-color: #4aaa7e; /* darker shade on hover */
}