html {
  height: 100%;
}
body {
  height: 100vh; /* Uses full viewport height */
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden; /* Prevents scrolling on the main window */
}
/* Common font style */
body, label {
  font-family: Arial, sans-serif;
  font-size: 14px;
}
/* Header styling */
#header {
  margin-left: 0px;
  margin-bottom: 15px; /* Creates the desired spacing */
  font-size: 24px;
  flex-shrink: 0;
}
/* Container for search and control elements */
#controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}
/* Container for search field */
#searchContainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 5px;
}
/* Search field styling */
#searchInput {
  padding: 5px;
  width: 100%;
  max-width: 300px;
  min-width: 100px;
  box-sizing: border-box;
  margin-bottom: 5px;
}
/* Custom distance input styling */
#freeDistanceInput {
  height: 14px;
  width: 50px;
}
.distance-label {
  position: relative;
  top: 3px;
}
/* Container for distance filters */
#filterContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 5px;
}
/* Container for buttons */
#buttonContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
/* Dark Mode Button background color */
#darkModeButton, #processClipboardBtn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: white;
  background-color: #007bff;
}
/* Download Button background color */
#downloadCsvBtn {
  background-color: #90BF00;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: bold;
}

#downloadCsvBtn:hover {
  background-color: #90BF00;
}
/* Dark Mode styling */
body.dark-mode {
  background-color: #121212;
  color: white;
}
body.dark-mode table {
  color: white;
}
body.dark-mode th {
  background-color: #1f1f1f;
  border-bottom-color: #555;
}
body.dark-mode td {
  border-color: #333;
}
/* Clickable table headers */
th {
  cursor: pointer;
  background-color: #f2f2f2;
  position: sticky;
  top: -1px;
  z-index: 1;
  padding-right: 8px;
  white-space: nowrap; /* Prevents line breaks in header */
  border-bottom: 2px solid #ccc;
}
/* Table cells */
td {
  white-space: nowrap; /* Ensures content does not wrap */
}
/* Resizer not needed if size is automatic */
.resizer {
  display: none;
}
#table-container {
  overflow: auto; /* Allows horizontal and vertical scrolling */
  flex-grow: 1;
  position: relative;
}
body.dark-mode #table-container {
  border-color: #333;
}
/* Table styling */
table {
  width: auto; /* Allows table to take natural width */
  min-width: 100%; /* Ensures it fills at least container width */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto; /* Adjusts column width based on content */
}
th, td {
  padding: 3px;
  text-align: left;
  border: none;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
th:first-child, td:first-child {
    border-left: 1px solid #ddd;
}
body.dark-mode th, body.dark-mode td {
    border-color: #333;
}
body.dark-mode a {
  color: #d6a8f5;
}
body.dark-mode a:hover {
  color: #b57edc;
}
body.dark-mode #searchInput {
  background-color: #6c757d;
  color: white;
}
body.dark-mode #searchInput::placeholder {
  color: white;
}
/* Container for CSV upload (in header) */
#uploadContainer {
  margin-top: 10px;
}
/* Italic style for detail rows */
.detailRowAF td, .detailRowRT td {
  font-style: italic;
}
/* Toast styling */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 1000;
  font-size: 14px;
}
/* Download button styling – initially hidden */
#downloadContainer {
  margin-top: 10px;
  text-align: center;
  display: none;
  flex-shrink: 0;
}
#darkModeButton {
  margin-top: 14px;
}

/* csvtourds-layout-fix */
#webtools { 
  width: 100% !important; 
  display: flex !important; 
  flex-direction: column !important; 
  align-items: center !important; 
  margin-bottom: 12px !important; 
}
.content-row { display: flex; justify-content: space-between; gap: 20px; }
.content-row .main-content { flex: 1 1 auto; margin-right: 0 !important; }
.content-row .sidebar { width: 450px; }
#webtools-panel { max-width: 980px; }