/* Page layout — header fixed, content scrolls */
.main-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    overflow: hidden;
}

.start-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.survey-header-container {
    flex-shrink: 0;
}

a {
  color: #006054;
  text-decoration: none;
  font-weight: 600;
}
a:hover {
  color: #007365;
  text-decoration: underline;
  cursor: pointer;
}
.list-group-item-action {
  color: #006054;
  text-decoration: none;
  font-weight: 600;
}
.list-group-item-action:hover {
  color: #007365;
  text-decoration: none;
}
.survey-location-card {
  display: inline-block;
  border-radius: 6px;
  padding: 8px 14px;
  margin: 4px;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  color: #006054;
  border: 1px solid #006054;
  border-left: 3px solid #006054;
  background: #f0faf9;
  transition: background 0.15s, color 0.15s;
}
.survey-location-card:hover {
  background: #e0f2f0;
  color: #007365;
  text-decoration: none;
}

/* Page-specific styles */
.main-content {
    min-height: calc(100vh - 80px);
    height: 90vh;
    width: 100vw;
    background: white; /* Ensure main content area has white background */
}

.page-header {
    background: white; /* Explicit white background for header area */
}

.page-header {
    background: linear-gradient(135deg, #176F75, #0d5459);
    color: white;
    padding: 24px 0;
    margin-bottom: 24px;
    border-radius: 0 0 16px 16px;
}

.content-card {
    background: var(--card-background);
    /*border-radius: 5px; REMOVE BORDER RADIUS TO BE CONSISTES WITH SIGNUP EXPLORER*/
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: var(--transition);

}

/* Autocomplete styles */
.autocomplete-container {
    position: relative;
}

.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.autocomplete-suggestion {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion.highlighted {
    background-color: #176F75;
    color: white;
}

.autocomplete-suggestion:last-child {
    border-bottom: none;
}

/* Survey status badges (statuses: draft, edited, uploaded) */
.status-uploaded { background-color: #176F75 !important; }
.status-edited { background-color: #6f42c1 !important; }
.status-paused { background-color: #ffc107 !important; color: #000 !important; }
.status-draft { background-color: #ffc107 !important; color: #000 !important; }

.text-section {
  display: contents;
}

.map-section {
  display: none;
  position: relative;
  height: 600px;
  width: 100%;
}
#start-map {
  height: 100%;
  width: 100%;
}

.div-history-buttons {
  margin-top: 10px;
}

#list_group {
  overflow-y: auto;
  max-height: 40vh;
}

.app-url {
  font-weight: 500;
  font-size: 0.875rem;
}

.previous-content-container {
  height: 80vh;
  overflow-y: auto;
}

/* Override bootstrap styles for these classes */
.list-group-item-action {
  color: #c44100;
  text-decoration: underline;
}

.list-group-item-action:hover {
  color: #c44100;
  text-decoration: underline;
  cursor: pointer;
}

.justify-right {
  justify-content: flex-end !important;
  margin-left: auto;
}

.divider-history {
  border: 0;
  margin: 0;
}

/* GPS options row — bigger tap targets and more breathing room between cells.
   Help label keeps its original font and icon size (no wrap on 360px screens).
   The whole switch row below it is one big <label> so a tap anywhere in the
   cell's lower half toggles the input. */
.gps-options-row {
    --bs-gutter-x: 1.5rem;
    row-gap: 0.75rem;
}

.gps-option-col {
    padding-top: 4px;
    padding-bottom: 4px;
}

.gps-option-col .help-label {
    display: block;
    padding: 6px 0;
    margin-bottom: 2px;
    white-space: nowrap;
}

.gps-option-switch {
    padding-left: 3.25em;
    min-height: 48px;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    cursor: pointer;
    width: 100%;
}

.gps-option-switch .form-check-input {
    width: 3em;
    height: 1.85em;
    margin-top: 0;
    margin-left: -3.25em;
    cursor: pointer;
    pointer-events: none;
}

.gps-option-switch .form-check-label {
    cursor: pointer;
    padding: 4px 0;
    flex: 1;
    display: inline-flex;
    align-items: center;
}

/* Help icons and labels */
.help-label {
    cursor: pointer;
}

.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #006054;
    color: white;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
    line-height: 1;
}

/* Help overlay */
.help-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9998;
}

.help-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88%;
    max-width: 380px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    z-index: 9999;
    overflow: hidden;
}

.help-overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #006054;
    color: white;
}

.help-overlay-title {
    font-weight: 700;
    font-size: 16px;
}

.help-overlay-close {
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    padding: 6px 14px;
    margin: -6px -10px -6px 0;
    background: none;
    border: none;
    color: white;
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.help-overlay-body {
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    overflow-y: auto;
}

/* Small screens — fill width */
@media (max-width: 449px) {
    .container, .start-container {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    .content-card {
        border-left: none;
        border-right: none;
        border-radius: 0;
        padding: 16px 12px;
        margin-bottom: 0;
    }
}

/* Mobile landscape */
@media (orientation: landscape) and (max-height: 500px) {
    .main-content {
        height: calc(100vh - 50px);
    }

    .date-time-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .date-time-col {
        flex: 1 1 0;
        max-width: 50%;
    }
}

/* History tabs (My Surveys | Recorded for Volunteers) — shown only to
   admins/coordinators (fillPreviousList). Same flat, square-cornered,
   underline-on-active pattern as the explore right-pane tabs. */
.history-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 8px;
}
.history-tab {
    flex: 1 1 0;
    padding: 8px 6px;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}
.history-tab:hover { background: #f1f3f4; }
.history-tab.active {
    background: var(--primary-light);
    border-bottom-color: var(--primary-color);
}