@import url("/www/css/shared/tokens.css");
@import url("/www/css/shared/layout.css");
@import url("/www/css/shared/components.css");
@import url("/www/css/shared/utilities.css");

.container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.app-header h1 {
  margin: 0;
  font-size: 2rem;
}

.sidebar {
  position: sticky;
  top: 1rem;
}

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

.form-group label {
  display: block;
  color: var(--primary-red);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

input[type="number"],
input[type="text"],
.selectize-input {
  border: 1px solid var(--border-medium);
  border-radius: 8px;
}

input[type="number"]:focus,
input[type="text"]:focus,
.selectize-input.focus {
  outline: none;
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.btn-primary,
.btn-reset,
.btn-download {
  width: 100%;
}

.map-body {
  position: relative;
  min-height: 450px;
}

.map-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 500;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.map-skeleton-box {
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  border-radius: 10px;
  background: linear-gradient(90deg, #f4f4f4 0%, #fbfbfb 50%, #f4f4f4 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.results-body .table-container {
  overflow-x: auto;
}

.abundant-definition {
  background-color: rgba(0, 123, 255, 0.08);
  border-left: 4px solid var(--region-selected);
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 1rem;
}

.abundant-definition p {
  margin: 0;
}

.instruction-box {
  background-color: rgba(0, 123, 255, 0.08);
  border-left: 4px solid var(--region-selected);
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
}

.citation-section {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.8rem;
  font-style: italic;
}

@media (max-width: 992px) {
  .sidebar {
    position: static;
  }
}