/* Main layout and containers */
.container {
  max-width: 768px;
  /* Adding styles to match styles.css */
  padding: 0;
}

h1 {
  color: #1e90ff;
  font-weight: 700;
  /* Matching the navbar-brand style */
  font-size: 1.5rem;
}

/* Card components */
.form-card {
  box-shadow: 0 2px 12px rgba(30, 144, 255, 0.08);
  /* Adding styles to match feature-card */
  background: white;
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.form-card:hover {
}

/* Form elements */
.search-btn {
  padding: 12px 0;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 10px 0;
  border-radius: 12px;
  letter-spacing: 0.05em;
  /* Matching feature-btn */
  background-color: #1e90ff;
  color: white;
  border: none;
  transition: all 0.3s;
}

.search-btn:hover {
  background-color: #0d6efd;
  transform: translateY(-2px);
}

/* Time display */
.time-display {
  font-size: 1.1rem;
}

#current-time {
  font-family: monospace;
}

/* Results table container */
.results-table-container {
  background: #23272b;
  border-radius: 18px;
  padding: 24px;
  margin-top: 32px;
  margin-bottom: 32px;
  border: 1px solid #2c3136;
  overflow-x: auto;
  /* Matching hero-section */
  color: #f5f7fa;
}

/* Table styles */
.results-table {
  width: 100%;
  border-collapse: collapse;
  color: #f5f7fa;
  font-size: 1rem;
}

.results-table th,
.results-table td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid #2c3136;
}

.results-table th {
  cursor: pointer;
}

.results-table th.sorted-asc::after {
  content: " ↑";
}

.results-table th.sorted-desc::after {
  content: " ↓";
}

/* Badges */
.badge {
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 0.95em;
  font-weight: 500;
  margin-right: 4px;
}

/* Logs container */
#logs-container {
  max-height: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
}

#logs-list {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  max-height: 500px; /* Fallback height for smaller screens */
  padding-right: 5px;
}

#logs-container .card-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 1rem;
}

.logs-title {
  flex-shrink: 0;
}

/* Back to top button */
#back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(30, 144, 255, 0.9);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
}

#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

#back-to-top:hover {
  background: rgba(30, 144, 255, 1);
  transform: translateY(-5px);
}

/* Status popup */
.status-popup {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  max-width: 350px;
  z-index: 1000;
}

.status-popup .card {
  background: #e74c3c;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.status-popup .card-title {
  margin-top: 0;
  font-size: 18px;
  color: white;
}

/* Airport result card */
#airport-result .card {
  max-width: 600px;
  margin: 0 auto;
  color: white;
  text-align: left;
  /* Adding styles to match feature-card */
  background: #23272b;
  border-radius: 18px;
  border: 1px solid #2c3136;
}

/* Adding body styles from styles.css */
body {
  background-color: #f5f7fa;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Responsive styles */
@media (max-width: 768px) {
  .container {
    max-width: 98vw;
    padding: 0 8px;
  }
  
  .results-table-container {
    padding: 12px;
  }
}

@media (max-width: 576px) {
  .results-table {
    font-size: 0.9rem;
  }
  
  .results-table-container {
    padding: 8px;
  }
  
  .search-btn {
    font-size: 1.1rem;
  }
}

@media (min-width: 992px) {
  #logs-container {
    max-height: none;
    overflow-y: auto;
  }

  /* Container-specific styling */
  main .form-search-container {
    height: 100%;
    max-height: 965px;
  }

  main .logs-container-wrapper {
    max-height: 965px;
  }

  #search-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  #logs-container {
    display: flex;
    flex-direction: column;
  }

  /* Ensure the logs container doesn't overflow */
  #logs-list {
    max-height: calc(100vh - 250px); /* Use viewport height as reference */
    overflow-y: auto;
  }
}

.card-title.logs-title {
  color: #fff !important;
}

/* Light background for the whole app */
body {
  background-color: #f5f7fa;
  color: #23272b;
}

/* Cards and containers */
.form-card,
.feature-card,
.card,
.results-table-container,
#airport-result .card,
#logs-container {
  background: #fff !important;
  color: #23272b !important;
  border: 1px solid #e3e6ea;
  box-shadow: 0 2px 12px rgba(30, 144, 255, 0.04);
}

/* Table styles */
.results-table {
  background: #fff;
  color: #23272b;
}

.results-table th,
.results-table td {
  background: #fff;
  color: #23272b;
  border-bottom: 1px solid #e3e6ea;
}

/* Inputs and selects */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="datetime-local"],
select,
textarea {
  background: #f5f7fa;
  color: #23272b;
  border: 1px solid #bfc8d6;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1rem;
  margin-bottom: 18px;
  transition: border-color 0.2s;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #1e90ff;
  outline: none;
}

/* Buttons */
.btn,
.search-btn,
.feature-btn {
  background-color: #1e90ff;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}

.btn:hover,
.search-btn:hover,
.feature-btn:hover {
  background-color: #0d6efd;
  color: #fff;
}

/* Card titles */
.card-title,
.card-title.logs-title {
  color: #1e90ff !important;
}

/* Footer */
footer {
  background: #f5f7fa;
  color: #23272b;
  border-top: 1px solid #e3e6ea;
}

/* Muted text */
.text-muted,
.ff-muted {
  color: #6c757d !important;
}

/* Badges */
.badge,
.ff-badge {
  background: #e3e6ea;
  color: #23272b;
}

.form-select,
.form-select:focus {
  background-color: #f5f7fa !important;
  color: #23272b !important;
  border: 1px solid #bfc8d6 !important;
  box-shadow: none !important;
}

/* Custom row in main container */
main > .container-fluid > .row {
  min-height: 400px;
}

/* Search and logs container styles */
main .form-search-container {
  height: 100%;
  min-height: 400px;
}

/* Custom column styles for results table */
.nowrap-cell {
  white-space: nowrap;
}

.wind-column {
  width: 150px;
  min-width: 150px;
}

/* Ensure the search card has minimum height */
#search-card {
  min-height: 500px; /* Minimum height for search container */
}

/* Style for logs container */
#logs-container {
  min-height: 300px; /* Smaller minimum height for logs */
  max-height: 80vh; /* Prevent excessive height on mobile */
}

/* Ensure the logs list fills available space but doesn't overflow */
#logs-list {
  flex: 1;
  overflow-y: auto;
  max-height: 60vh; /* Limit height to prevent excessive scrolling */
}