@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html,
/* Make h1 bold */
h1 {
    font-weight: bold; /* Bold the h1 headers */
}

/* Spread out h3 and reduce size */
h3 {
    letter-spacing: 0.5px; /* Increase letter spacing */
    font-size: 14px; /* Adjust size as needed */
}

/* General text size adjustment */
body {
    font-size: 14px; /* Smaller text size for general content */
}

/* General page styles */
body {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #333;
    background-color: #f9f9f9;
}

/* Header styles */
.header {
    background-color: #fff;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Main content styles */
.main-content {
    padding: 20px;
    background-color: #fff;
    margin: 20px;
    border-radius: 5px;
}

/* Steps or actions styles */
.step {
    background-color: #e8f5e9;
    padding: 15px;
    margin-top: 10px;
    border-radius: 5px;
}

body {
    width: 100%;
    padding: 0;
    margin: 0;
}

.top {
    align-items: center;
}

/* Base navbar — overridden by green capsule section below */
.navbar {
    display: flex;
    align-items: center;
    font-size: .875rem;
    z-index: 2;
}

.title {
    padding-top: 0px;
    align-items: center;
    font-size: 18px;
    text-transform: none;
    color: #000000;
    vertical-align: center;
    font-weight: 700;
}

.sidebar_overview {
    width: 25%;
}

.homepage-body {
    display: flex;
    align-items: center;
}

.bold-text {
    font-weight: bolder;
}

html {
    font-family: "Inter", sans-serif;
}

body>.container-fluid:first-child {
    padding: 0 !important;
}

.homepage-content {
    padding-top: 75px;
    display: flex;
    flex-direction: column;
}

.homepage-head {
    display: flex;
    justify-content: center;
    /* background-color: peachpuff; */
}


.homepage-background {
    background-image: url("/img/home.jpg");
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    min-height: calc(100vh - 75px);
    margin: -24px;
}

.homepage-background:before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom right, #002F4B, #DC4225);
    opacity: .6;
    z-index: 0
}

.homepage-background>* {
    z-index: 1;
}

.light h1,
.light h2,
.light h3,
.light h4 {
    color: #fff;
}

.light .lead,
.light {
    color: #eee;
}

.homepage-lead-text-block {
    max-width: 100%;
    text-align: justify;
}

.indicator-section {
    margin: 40px;
}

.indicators-title {
    font-variant-caps: small-caps;
    text-align: center;
    font-family: "Inter", sans-serif;
}

.indicator-boxes {
    justify-content: center;
    display: flex;
}

.indicators-boxes-row {
    background-color: white;
    padding: 15px;
}

.indicator-box-title {
    color: #02735E;
    text-align: center;
    padding: 15px;
    font-variant-caps: small-caps;
    font-size: 20px;
}

.indicator-text {
    text-shadow: #05A688;
    color: #FFB800;
    text-align: center;
    padding: 15px;
    font-weight: bolder;
    font-size: 24px;
    border-top: 2px solid #02735E;
}

@media(min-width: 768px) {
    .homepage-lead-text-block {
        max-width: 66%;
    }
}

@media(min-width: 992px) {
    .homepage-lead-text-block {
        max-width: 33%;
    }
}

.bottom {
    margin-top: auto;
}

.ackn-elt {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ackn-elt:not(:last-child) {
    margin-bottom: 15px;
}

.light a:not(.btn) {
    text-decoration: underline;
    color: #ccc;
}

.light a:not(.btn):hover {
    text-decoration: underline;
    color: #fff;
}

.tree{
    color: #2a43d1;
    text-decoration: none;
}

.shrub{
    color: #0095c6;
    text-decoration: none;
}

.subshrub{
    color: #612e14;
    text-decoration: none;
}

.forb{
    color: #d77d28;
    text-decoration: none;
}

.graminoid{
    color: #633096;
    text-decoration: none;
}

.palm{
    color: #63a355;
    text-decoration: none;
}

.liana{
    color: #be2843;
    text-decoration: none;
}

.vine{
    color: #cc4fb9;
    text-decoration: none;
}

.scrambler{
    color: #017201;
    text-decoration: none;
}

.bamboo{
    color: #fd2f6d;
    text-decoration: none;
}

.other{
    color: #171717;
    text-decoration: none;
}

/* Legacy aliases */
.herb{
    color: #d77d28;
    text-decoration: none;
}

.climber{
    color: #cc4fb9;
    text-decoration: none;
}

.cactus{
    color: #49d1d5;
    text-decoration: none;
}

.shurb{
    color: #0095c6;
    text-decoration: none;
}

.subshurb{
    color: #612e14;
    text-decoration: none;
}

.card_title{
    font-weight: bold;
    text-align: center;
}

.map{
    align-items: center;
}
.climate-image-container {
    /* display: flex; */
    justify-content: center;
    align-items: center;
    /* width: 80%; */
    /* height: 60vh;
    margin: 0 auto; */
}

.climate-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: fill;
}

.full-height {
    height: 100vh;  /* 100% of the viewport height */
    overflow: hidden; /* Prevents scrolling */
    display: flex;
    flex-direction: column;
}
.content-column {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: start; /* Aligns content to the start horizontally */
    overflow: hidden;
}
.image-column img {
    height: auto;
    width: 100%;  /* Full width of the column */
    max-height: 100vh; /* Maximum height to fit the viewport */
    object-fit: cover; /* Cover the area without losing aspect ratio */
}

/* Custom for home page split between image and text */
.row-equal-height {
    display: flex;
    flex-wrap: wrap;
}

.column-equal-height {
    display: flex;
    flex-direction: column;
}

.content-fill {
    flex: 1;  /* This will make the content expand to fill available space */
}


/* General styling for the location tab */
body {
    font-family: "Inter", sans-serif;
    margin: 0;
    padding: 0;
    }

/* Top section styling */
.top-options {
    background-color: #CCCCCC;
    padding: 20px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    }

.top-options h3 {
    margin-bottom: 20px;
    font-size: 1.5em;
    }

.input-selectize {
    margin: 10px auto;
    width: 80%;
    }

.top-options input[type="text"] {
    margin: 5px;
    padding: 10px;
    width: calc(40% - 20px);
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 5px;
    }

.top-options button {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.top-options button:hover {
    background-color: #45a049;
}

/* Map section styling */
.map {
    margin: 0;
    text-align: center;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: #fff;
    max-width: 100%;
    width: 100%;
    position: relative;
}

.map h3 {
    margin-bottom: 20px;
    font-size: 1.5em;
}

/* Flexbox container to align left and right sections */
.flex-container {
    display: flex;
    justify-content: space-between; /* Space between left and right sections */
    align-items: stretch; /*flex-start; Align items to the top */
    gap: 20px; /* Add spacing between sections */
    margin-bottom: 20px;
    padding: 20px;
    background-color: #d5d2d2; /* Light background for the container */
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 85%; /* Adjust width for smaller container */
    max-width: 950px; /* Set a maximum width */
    margin: 0 auto; /* Center the container horizontally */
    height: 300px;
}

/* Left section styling */
.left-section {
    flex: 1; /* Left section takes up equal space */
    padding: 15px;
    border-right: 1px solid #ddd; /* Add a divider between left and right */
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center vertically */
    align-items: flex-start; /* Align items to the left horizontally */
    height: 100%; /* Ensure the section takes up the full available height */
}



.left-section h4 {
font-size: 1.2em;
margin-bottom: 10px;
font-weight: bold;
}

.left-section h5 {
font-size: 1em;
margin-bottom: 5px;
color: #555;
}

.left-section p {
font-size: 0.9em;
color: #666;
}

/* Right section styling */
.right-section {
flex: 1; /* Right section takes up equal space */
padding: 15px;
display: flex; /* Enable flexbox */
flex-direction: column; /* Stack elements vertically */
justify-content: center; /* Center vertically */
align-items: flex-start; /* Align items to the left horizontally */
height: 100%; /* Ensure the section takes up the full available height */
}

.right-section h4 {
font-size: 1.2em;
margin-bottom: 10px;
}

.right-section .input-selectize {
margin-top: 10px;
}

.right-section button {
margin-top: 15px;
padding: 10px 20px;
/* background-color: #4CAF50; */
/* color: white; */
/* border: none; */
border-radius: 5px;
cursor: pointer;
}

/* .right-section button:hover {
background-color: #45a049;
} */

/* Map styling (duplicate — keep consistent) */
.map {
margin: 0;
text-align: center;
padding: 0;
border: none;
border-radius: 0;
background-color: #fff;
max-width: 100%;
}

/* Custom styling for the red button */
.red-button {
    background-color: #ff4d4d; /* Red background */
    color: white; /* White text */
    border: none;
    padding: 10px 20px;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    font-size: 1em;
}

.red-button:hover {
background-color: #ff1a1a; /* Darker red on hover */
}


.coordinates-container {
    display: flex;
    align-items: center; /* Vertically align the input and button */
    gap: 10px; /* Add space between the input and button */
}

.coordinates-container input[type="text"] {
    flex: 1; /* Make the input field take most of the available space */
}

.coordinates-container button {
    padding: 10px 20px; /* Ensure the button has a consistent size */
}

/* Grey container styling */
/* .grey-container {
    background-color: #d5d2d2; /* Light grey background */
    /* padding: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    max-width: 950px; /* Set max width */
    /* margin: 0 auto; /* Center horizontally */
/* }

/* Bold text styling */
/* .bold-text {
    font-weight: bold;
    font-size: 18px;
} */

/* Select input styling */
/* .input-selectize {
    width: 100%;
    max-width: 500px;
} */

/* Flexbox container for potential layout adjustments */
/* .flex-container-ms {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
} */


/* Grey container styling */
.grey-container {
    background-color: #d5d2d2; /* Light grey background */
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    max-width: 50%; /* Adjust width dynamically */
    min-width: 100px; /* Prevent excessive shrinking */
    margin: 0 auto; /* Center horizontally */
    transition: width 0.3s ease-in-out; /* Smooth transition */
}

/* Flexbox container for left (input) and right (text) */
.flex-container-ms {
    display: flex;
    justify-content: space-between; /* Push left and right sections apart */
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

/* Left section: input */
.left-section-sm {
    flex: 0.1;
    min-width: 350px;
}

/* Right section: text */
.right-section-sm {
    flex: 1;
    min-width: 300px;
}

/* Make input-selectize larger */
/* .input-selectize .selectize-control {
    height: 50px; /* Adjust height */
    /* width: 500px;
    font-size: 16px; /* Make text more readable */
/* } */
/* Ensure input container takes proper width */
.input-container {
    width: 100%; /* Make input-container expand */
    max-width: 500px; /* Adjust max width for better alignment */
}
/* Make input-selectize larger */
.input-selectize .selectize-control {
    height: 60px; /* Increased height */
    width: 100%; /* Make it responsive */
    font-size: 18px; /* Increase text size */
    padding: 10px; /* More padding for better UX */
}

/* Ensure input inside selectize expands properly */
.input-selectize .selectize-input {
    min-height: 60px; /* Ensure text area expands */
    font-size: 18px; /* Match font size */
}

.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

/* =============================================== */
/* Species Tab Styles                              */
/* =============================================== */

/* Old species-search-bar selectize styles removed — now uses input_text */

/* Old species-tags-container removed — pills now rendered server-side */

/* Filters in vertical column (col-4) */
.species-filters-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.species-filters-col .species-filter-item {
    width: 100% !important;
}

.species-filters-col .species-filter-multi {
    max-width: 100%;
    min-width: 0;
}

.species-filter-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.species-filter-item > .shiny-input-container,
.species-filter-item > .form-group {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    width: auto !important;
}

.btn-select-all {
    flex-shrink: 0;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f0f0f0;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    margin-top: 2px;
    line-height: 1.4;
}

.btn-select-all:hover {
    background: #e0e0e0;
    color: #333;
}

.species-filter-item .form-group {
    margin-bottom: 0;
}

.species-filter-item .shiny-input-container {
    width: 100% !important;
}

/* Origin dropdown label — match species-filter-label style */
.species-filter-item .shiny-input-container > label.control-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}

#filter_origin {
    height: 38px !important;
    padding: 10px 28px 10px 12px !important;
}

.species-filter-item .shiny-input-select,
.species-filter-item select,
.species-filter-item select.form-select,
.species-filter-item .form-select {
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 28px 8px 12px !important;
    font-family: Inter, sans-serif !important;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 500;
    line-height: 125%;
    color: #171717 !important;
    background-color: #D2DED6 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 10px !important;
    cursor: pointer;
    white-space: nowrap;
    min-width: 0;
    width: 100% !important;
}

.species-filter-simplify {
    display: inline-flex;
    align-items: center;
    padding-bottom: 0;
}

.species-simplify-btn {
    border-radius: 20px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 500;
    white-space: nowrap;
}

#simplifyModal .modal-body .shiny-input-container {
    width: 100% !important;
}
#simplifyModal .modal-body .js-range-slider,
#simplifyModal .modal-body .irs,
#simplifyModal .modal-body .irs-with-grid {
    width: 100% !important;
}

.species-symbols-btn {
    border-radius: 20px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 500;
    white-space: nowrap;
    background-color: #4a7c3f !important;
    color: white !important;
    border: none !important;
}
.species-symbols-btn:hover {
    background-color: #3d6834 !important;
}

/* Symbols dropdown panel */
.symbols-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1050;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 320px;
    margin-top: 6px;
}
.symbols-dropdown.symbols-open {
    display: block;
}
.symbols-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px 8px;
}
.symbols-dropdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 18px 18px;
}
.symbols-dropdown-grid .symbol-badge {
    margin: 0 !important;
    text-align: center;
    font-size: 0.85em;
}

.species-grid-area {
    background-color: transparent;
    border-radius: 10px;
    margin: 0;
    padding: 16px 24px;
    min-height: 700px;
}

/* Brush click overlay on chart */
.brush-click-overlay {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.92);
    border: 2px solid #6cb043;
    border-radius: 12px;
    padding: 14px 22px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #2E7D32;
    text-align: center;
    cursor: pointer;
    z-index: 50;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    transition: background 0.15s, transform 0.15s;
    line-height: 1.4;
}
.brush-click-overlay:hover {
    background: #f0f8f0;
    transform: translate(-50%, -50%) scale(1.04);
}

/* Brush selection results panel */
.brush-results-panel {
    position: relative;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 12px 24px;
    max-height: 400px;
    overflow-y: auto;
}

.brush-add-btn {
    font-size: 0.85em;
    border-radius: 20px;
    padding: 4px 12px;
}

/* Species tab background gradient */
.tab-pane[data-value="tab_species"] > .container-fluid {
    background: linear-gradient(180deg, #ffffff 0%, #d2ded6 100%);
    min-height: 100vh;
}

/* Floating nav buttons for species tab */
.tab-pane[data-value="tab_species"] .nav-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid #e9ecef;
    padding: 12px 50px;
    max-width: 100%;
    margin: 0;
}

.tab-pane[data-value="tab_species"] .nav-buttons .btn-outline-secondary {
    background-color: #fff;
}

/* =============================================== */
/* Climate Tab Styles                              */
/* =============================================== */

.climate-header {
    max-width: 80%;
    margin: 0 auto 20px;
    padding: 18px 24px;
    border-bottom: 1px solid #e9ecef;
    text-align: center;
}

.climate-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

/* Main row: map left + Whittaker right */
.climate-main-row {
    display: flex;
    gap: 24px;
    padding: 0 24px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.climate-map-col {
    flex: 1;
    min-width: 0;
    min-height: 600px;
}

.climate-map-col iframe {
    height: 600px !important;
    min-height: 600px !important;
    border-radius: 10px;
}

.climate-right-col {
    flex: 1;
    min-width: 0;
}

.climate-right-col .jupyter-widgets {
    max-height: 320px !important;
    overflow: hidden;
}

/* Chips/Badge styles for checkbox groups */
.climate-right-col .shiny-input-checkboxgroup,
.climate-column .shiny-input-checkboxgroup,
.biome-column .shiny-input-checkboxgroup {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px 10px !important;
    row-gap: 16px !important;
}

.climate-right-col .shiny-input-checkboxgroup > .checkbox,
.climate-column .shiny-input-checkboxgroup > .checkbox,
.biome-column .shiny-input-checkboxgroup > .checkbox {
    margin: 0 !important;
}

.tab-pane[data-value="tab_climate"] .shiny-input-checkboxgroup {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 16px !important;
    gap: 16px 10px !important;
}

.tab-pane[data-value="tab_climate"] .shiny-input-checkboxgroup > .checkbox,
.tab-pane[data-value="tab_climate"] .shiny-input-checkboxgroup > .checkbox-inline {
    margin: 0 !important;
    display: inline-block !important;
}

.climate-right-col .shiny-input-checkboxgroup label,
.climate-column .shiny-input-checkboxgroup label,
.biome-column .shiny-input-checkboxgroup label,
.tab-pane[data-value="tab_climate"] .shiny-input-checkboxgroup label,
.tab-pane[data-value="tab_climate"] .checkbox-inline {
    display: inline-flex !important;
    align-items: center;
    padding: 10px 18px !important;
    margin: 4px 4px !important;
    border: 2px solid #ccc;
    border-radius: 25px;
    cursor: pointer;
    background: #f5f5f5;
    transition: all 0.2s ease;
    font-size: 13px;
    user-select: none;
    line-height: 1.5;
}

.climate-right-col .shiny-input-checkboxgroup label:hover,
.climate-column .shiny-input-checkboxgroup label:hover,
.biome-column .shiny-input-checkboxgroup label:hover {
    border-color: #6c757d;
    background: #e9ecef;
}

.climate-right-col .shiny-input-checkboxgroup input[type="checkbox"],
.climate-column .shiny-input-checkboxgroup input[type="checkbox"],
.biome-column .shiny-input-checkboxgroup input[type="checkbox"] {
    display: none;
}

/* Selected state */
.climate-right-col .shiny-input-checkboxgroup label:has(input:checked),
.climate-column .shiny-input-checkboxgroup label:has(input:checked),
.biome-column .shiny-input-checkboxgroup label:has(input:checked) {
    background: #6c757d;
    color: white;
    border-color: #6c757d;
}

/* Fallback for browsers without :has() support */
.climate-right-col .shiny-input-checkboxgroup .checkbox.checked label,
.climate-column .shiny-input-checkboxgroup .checkbox.checked label,
.biome-column .shiny-input-checkboxgroup .checkbox.checked label {
    background: #6c757d;
    color: white;
    border-color: #6c757d;
}

/* Climate type specific colors when selected */
.climate-right-col .shiny-input-checkboxgroup label:has(input:checked)[for*="Continental"],
.climate-column .shiny-input-checkboxgroup label:has(input:checked)[for*="Continental"] {
    background: #5D4E6D;
    border-color: #5D4E6D;
}

.climate-right-col .shiny-input-checkboxgroup label:has(input:checked)[for*="Polar"],
.climate-column .shiny-input-checkboxgroup label:has(input:checked)[for*="Polar"] {
    background: #A8D5E5;
    border-color: #A8D5E5;
    color: #333;
}

.climate-right-col .shiny-input-checkboxgroup label:has(input:checked)[for*="Temperate"],
.climate-column .shiny-input-checkboxgroup label:has(input:checked)[for*="Temperate"] {
    background: #6B8E5A;
    border-color: #6B8E5A;
}

.climate-right-col .shiny-input-checkboxgroup label:has(input:checked)[for*="Dry"],
.climate-column .shiny-input-checkboxgroup label:has(input:checked)[for*="Dry"] {
    background: #E8C07D;
    border-color: #E8C07D;
    color: #333;
}

.climate-right-col .shiny-input-checkboxgroup label:has(input:checked)[for*="Highland"],
.climate-column .shiny-input-checkboxgroup label:has(input:checked)[for*="Highland"] {
    background: #8B7355;
    border-color: #8B7355;
}

.climate-right-col .shiny-input-checkboxgroup label:has(input:checked)[for*="Tropical"],
.climate-column .shiny-input-checkboxgroup label:has(input:checked)[for*="Tropical"] {
    background: #2E7D4A;
    border-color: #2E7D4A;
}

/* Hide empty group label above checkbox pills */
.tab-pane[data-value="tab_climate"] .shiny-input-checkboxgroup > label.control-label,
.climate-right-col .shiny-input-checkboxgroup > label.control-label {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Floating nav buttons footer for climate tab */
.tab-pane[data-value="tab_climate"] .nav-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid #e9ecef;
    padding: 12px 50px;
    max-width: 100%;
    margin: 0;
}

.tab-pane[data-value="tab_climate"] .nav-buttons .btn-outline-secondary {
    background-color: #fff;
}

/* =============================================== */
/* i18n — Bilingual Toggle                         */
/* =============================================== */

body.lang-pt .i18n-en { display: none !important; }
body.lang-en .i18n-pt { display: none !important; }
/* Before JS loads, default to PT */
body:not(.lang-en):not(.lang-pt) .i18n-en { display: none !important; }

.lang-toggle {
    font-weight: 600;
    min-width: 38px;
    border-radius: 20px;
    font-size: 0.8rem;
    padding: 2px 10px;
}

/* =============================================== */
/* Navbar — Green Capsule (Figma)                  */
/* =============================================== */

.navbar {
    background: transparent !important;
    border-bottom: none !important;
    padding: 15px 0 8px !important;
    box-shadow: none;
    justify-content: center;
}

.navbar .container-fluid {
    background-color: rgba(179, 255, 96, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 50px;
    padding: 14px 28px;
    gap: 0;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap !important;
    display: inline-flex !important;
    width: auto;
}

.navbar .navbar-brand {
    padding: 4px 6px 4px 0 !important;
    margin-right: 0 !important;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background: transparent;
}

.navbar .navbar-nav {
    background: transparent;
    padding: 0;
    align-items: center;
    flex-wrap: nowrap !important;
    flex-grow: 0 !important;
    flex-shrink: 0;
}

/* Force single line — disable collapse on all screens */
.navbar .navbar-collapse {
    display: flex !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
}

.navbar .navbar-toggler {
    display: none !important;
}

/* Controls after spacer: outside capsule look */
.navbar .navbar-nav > .bslib-nav-spacer ~ .nav-item {
    background: transparent;
}

/* Remove Bootstrap nav-underline border */
.navbar .nav-underline .nav-link,
.navbar .nav-underline .nav-link.active {
    border-bottom: none !important;
}

/* Hide Recommend (tab 5) and Admin from the navbar */
.navbar .nav-item:has(a[data-value="tab_recommend"]),
.navbar .nav-item:has(a[data-value="tab_admin"]) {
    display: none !important;
}

/* Tab badge (numbered circle) — dark grey */
.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #555;
    color: white;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

/* Nav-link items */
.navbar .nav-item {
    display: flex;
    align-items: center;
}

.navbar .nav-link {
    border-radius: 0 !important;
    padding: 6px 8px !important;
    margin: 0;
    font-size: 0.85rem;
    color: #555;
    background: transparent !important;
    transition: color 0.15s;
    white-space: nowrap;
    border: none !important;
    display: flex;
    align-items: center;
    position: relative;
    top: -5px;
}

.navbar .nav-link:hover {
    background: transparent !important;
    color: #222;
}

.navbar .navbar-nav .nav-link.active {
    background: rgba(255, 255, 255, 0.7) !important;
    color: #222 !important;
    font-weight: 700;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    overflow: hidden;
}

.navbar .nav-link.active .tab-badge {
    background-color: #333;
}

/* Chevron separators — remove old ::before approach */
.navbar .navbar-nav > .nav-item + .nav-item > .nav-link::before {
    display: none !important;
}

/* 4 chevrons as ::after on each nav-item, absolutely positioned */
.navbar .nav-item {
    position: relative;
}

.navbar .nav-item:has(a[data-value="tab_start"])::after,
.navbar .nav-item:has(a[data-value="tab_location"])::after,
.navbar .nav-item:has(a[data-value="tab_climate"])::after,
.navbar .nav-item:has(a[data-value="tab_species"])::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -12px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #999;
    border-top: 1.5px solid #999;
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    z-index: 5;
}

/* Spacer + controls after capsule */
.navbar .navbar-nav > .bslib-nav-spacer {
    flex-grow: 0 !important;
    width: 0;
}
.navbar .navbar-nav > .bslib-nav-spacer ~ .nav-item {
    background: transparent;
    margin-left: 10px;
}
.navbar .navbar-nav > .bslib-nav-spacer ~ .nav-item > .nav-link::before {
    display: none !important;
}

/* Lang toggle styling */
.lang-toggle {
    border-radius: 20px;
    font-size: 0.8rem;
    padding: 4px 12px;
}

/* =============================================== */
/* Location Tab                                     */
/* =============================================== */

.tab-pane[data-value="tab_location"] .map {
    height: calc(100vh - 280px);
    overflow: hidden;
    position: relative;
    margin-left: 50px;
    margin-right: 50px;
    border-radius: 10px;
    width: calc(100% - 100px) !important;
    max-width: calc(100% - 100px) !important;
}

.tab-pane[data-value="tab_location"] .map iframe,
.tab-pane[data-value="tab_location"] .map .html-fill-container,
.tab-pane[data-value="tab_location"] .map > div {
    width: 100% !important;
    height: 100% !important;
}

.tab-pane[data-value="tab_location"] .nav-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    border-top: none;
    padding: 16px 50px;
    margin: 0;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.tab-pane[data-value="tab_location"] .nav-buttons .btn-outline-secondary {
    background-color: #fff;
}

.tab-pane[data-value="tab_location"] .container-fluid {
    position: relative;
    padding: 0 !important;
}

/* =============================================== */
/* Location Bar                                     */
/* =============================================== */

.location-bar {
    max-width: 600px;
    margin: 30px auto 20px;
    padding: 24px 32px;
    background: #f6f9f2;
    border-radius: 12px;
    text-align: center;
}

.location-bar .shiny-input-container {
    width: 100% !important;
}

.location-bar .shiny-input-container input[type="text"] {
    text-align: center;
    font-size: 15px;
    color: #4a7c59;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 16px;
}

.location-bar .shiny-input-container input[type="text"]::placeholder {
    color: #8aab7a;
}

.location-bar a {
    color: #4a7c59;
    text-decoration: underline;
}

.loc-btn {
    border-color: #4a7c59;
    color: #4a7c59;
    border-radius: 20px;
    padding: 8px 24px;
    font-size: 14px;
}

.loc-btn:hover {
    background-color: #4a7c59;
    color: #fff;
}

/* =============================================== */
/* Navigation Buttons (Voltar / Próximo)           */
/* =============================================== */

.nav-buttons {
    border-top: 1px solid #dee2e6;
    padding-top: 16px;
    max-width: 960px;
}

.nav-btn {
    min-width: 120px;
    font-weight: 500;
    padding: 8px 24px;
    border-radius: 6px;
}

/* =============================================== */
/* Recommend Tab                                    */
/* =============================================== */

.rec-metric-card {
    text-align: center;
    padding: 15px;
}
.rec-metric-value {
    font-size: 1.8em;
    font-weight: bold;
    color: #27ae60;
}
.rec-metric-label {
    font-size: 0.85em;
    color: #7f8c8d;
}
.rec-nfix-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    background-color: #27ae60;
    color: white;
}

/* =============================================== */
/* Welcome Tab — Step 1: Welcome                   */
/* =============================================== */

.welcome-bullets-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.welcome-bullet {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #444;
}

.bullet-icon {
    flex-shrink: 0;
    width: 18px;
    color: #555;
    margin-top: 2px;
}

.bullet-icon svg {
    width: 16px;
    height: 16px;
}

.btn-comecar {
    font-size: 16px;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 8px;
    border: 2px solid #4a7c59;
    background-color: #4a7c59;
    color: #fff;
    transition: all 0.2s;
}

.btn-comecar:hover {
    background-color: #3d6a4b;
    border-color: #3d6a4b;
    color: #fff;
}

/* ── Welcome hero image — full height ── */

/* Float navbar over content when Start tab is active */
body:has(.tab-pane[data-value="tab_start"].active) .navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Kill ALL padding/margin around the start tab so the image is edge-to-edge */
.tab-content:has(.tab-pane[data-value="tab_start"].active) {
    padding: 0 !important;
}

.tab-content > .tab-pane[data-value="tab_start"] {
    padding: 0 !important;
    margin: 0 !important;
}

/* The outer container-fluid wrapping .tab-content */
.container-fluid:has(> .tab-content) {
    padding: 0 !important;
}

/* The inner container-fluid from page_fluid (has inline padding: 10px 20px) */
.tab-pane[data-value="tab_start"] .container-fluid {
    padding: 0 !important;
    max-width: 100% !important;
}

/* The single row inside the start tab */
.tab-pane[data-value="tab_start"] .row {
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.db-selection-inline {
    flex-direction: column;
}

.welcome-hero-col {
    height: 100vh;
    padding: 0 !important;
}

.welcome-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sponsor-logos {
    margin-top: auto;
    padding-bottom: 20px;
}

/* ── Step cards on hero image ── */

.step-cards-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.step-cards-overlay-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.step-cards-grid {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    padding: 24px;
    align-items: center;
    justify-items: center;
}

.step-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 10px;
    padding: 20px 16px;
    text-align: center;
    width: 100%;
    max-width: 220px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    position: relative;
}

.step-card-number {
    position: absolute;
    top: 10px;
    left: 14px;
    font-size: 13px;
    font-weight: 700;
    color: #555;
}

.step-card-icon {
    color: #4a7c59;
    margin-bottom: 8px;
}

.step-card-icon svg {
    width: 28px;
    height: 28px;
}

.step-card-text {
    font-size: 12px;
    color: #444;
    line-height: 1.4;
    margin: 0;
}

/* =============================================== */
/* Welcome Tab — Step 2: Database Selection        */
/* =============================================== */

.db-selection-panel {
    max-width: 520px;
    margin: 40px auto;
    padding: 30px 40px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}

.db-option-card {
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px 20px;
    transition: border-color 0.2s;
    cursor: pointer;
}

.db-option-card.selected {
    border-color: #4a7c59;
}

.db-option-header {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 4px;
}

.db-option-header input[type="radio"] {
    accent-color: #4a7c59;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.db-option-title {
    font-weight: 600;
    font-size: 15px;
    color: #333;
}

.db-traits-list {
    padding-left: 30px;
    margin-top: 4px;
}

.db-trait {
    font-size: 13px;
    line-height: 1.8;
}

.db-pro {
    color: #444;
}

.db-con {
    color: #888;
}

/* =============================================== */
/* Results Tab — Custom Table (Figma)              */
/* =============================================== */

.results-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Inter, sans-serif;
    font-size: 14px;
}

.results-table th {
    font-size: 0.85em;
    font-weight: 600;
    color: #3d6834;
    border-bottom: 2px solid #ccc;
    padding: 10px 12px;
    white-space: nowrap;
    text-align: left;
}

.results-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #e8ebe9;
    color: #333;
}

.results-table tbody tr:nth-child(odd) {
    background: #FFFFFF;
}

.results-table tbody tr:nth-child(even) {
    background: #D2DED6;
}

.results-table .sci-link {
    color: #3d6834;
    text-decoration: underline;
    cursor: pointer;
}

.results-table .sci-link:hover {
    color: #2a4e24;
}

.results-table .th-sort {
    cursor: pointer;
    opacity: 0.4;
    margin-left: 4px;
    font-size: 0.9em;
}

.results-table .th-sort:hover {
    opacity: 1;
}

.results-table .th-remove {
    cursor: pointer;
    opacity: 0.5;
    margin-left: 6px;
    font-size: 1em;
}

.results-table .th-remove:hover {
    opacity: 1;
    color: #c00;
}

.results-table .text-center {
    text-align: center;
}

/* Download button — Figma dark green pill */
.results-download-btn {
    background-color: #3d6834 !important;
    color: white !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 8px 22px !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

.results-download-btn:hover {
    background-color: #2f5228 !important;
}

/* Results tab background gradient (Figma: white → forest green-100) */
.tab-pane[data-value="tab_results"] > .container-fluid {
    background: linear-gradient(180deg, #ffffff 0%, #d2ded6 100%);
    min-height: 100vh;
}

/* Results tab floating nav */
.tab-pane[data-value="tab_results"] .nav-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid #e9ecef;
    padding: 12px 50px;
    max-width: 100%;
    margin: 0;
}

.tab-pane[data-value="tab_results"] .nav-buttons .btn-outline-secondary {
    background-color: #fff;
}

/* =============================================== */
/* Species Tab — Discovery Layout                  */
/* =============================================== */

/* Hide the selectize data store */
.hidden-selectize-store {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

/* Search input inline (inside filters column) */
.species-search-inline {
    margin-bottom: 2px;
}

.species-search-inline .shiny-input-container {
    width: 100% !important;
}

.species-search-inline input[type="text"] {
    width: 100% !important;
    height: 34px !important;
    font-family: Inter, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #171717 !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    outline: none !important;
}

.species-search-inline input[type="text"]::placeholder {
    color: #aaa !important;
    opacity: 1;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
}

.species-search-inline label.control-label,
.species-search-inline .shiny-input-container > label {
    display: none !important;
}

.species-search-inline .form-group {
    margin-bottom: 0 !important;
}

.species-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
    display: block;
}

/* Chart toolbar (Simplificar + Símbolos buttons) — right-aligned */
.chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 24px 0;
}

/* Discovery row: filters left + results right, thin border */
.species-discovery-row {
    padding: 0 24px;
    margin-bottom: 16px;
    border: 1.5px solid #b0b0b0;
    border-radius: 10px;
    margin-left: 24px;
    margin-right: 24px;
    padding: 16px;
    background: #fff;
}

/* Discovery results container */
.discovery-results-container {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.discovery-section {
    max-height: 25vh;
    overflow-y: auto;
}

.discovery-section-header {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    padding: 6px 12px;
    background: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.discovery-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    cursor: pointer;
}

.discovery-checkbox-item:hover {
    background: #f5f9f5;
}

.discovery-checkbox-item input[type="checkbox"] {
    accent-color: #4a7c3f;
    flex-shrink: 0;
}

.discovery-checkbox-item label {
    flex: 1;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discovery-score {
    color: #4a7c3f;
    font-weight: 600;
}

/* Switchboard links panel */
.switchboard-panel {
    margin: 12px 0 4px;
    padding: 10px 14px;
    background: #f4f9f0;
    border: 1px solid #c8dfc0;
    border-radius: 6px;
    font-size: 0.87em;
}
.switchboard-header {
    font-weight: 600;
    color: #3a6b2a;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.switchboard-logo-link {
    color: #3a6b2a;
    text-decoration: none;
    font-size: 1.1em;
}
.switchboard-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.switchboard-link {
    display: inline-block;
    padding: 3px 10px;
    background: white;
    border: 1px solid #a3c49a;
    border-radius: 4px;
    color: #2a5b1b;
    text-decoration: none;
    transition: background 0.15s;
}
.switchboard-link:hover {
    background: #d4edda;
    border-color: #5a9e4a;
    text-decoration: none;
}
.switchboard-sci {
    font-style: italic;
}
.switchboard-common {
    color: #666;
    font-size: 0.9em;
}
.switchboard-inline-link {
    color: #2a5b1b;
    font-size: 0.85em;
    text-decoration: none;
    white-space: nowrap;
}
.switchboard-inline-link:hover {
    text-decoration: underline;
    color: #3d6834;
}

.treegoer-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    font-size: 0.72em;
    font-weight: 600;
    color: #2a5b1b;
    background: #d4edda;
    border: 1px solid #a3d0ae;
    border-radius: 3px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Selected species section */
.selected-section {
    border-top: 2px solid #d2ded6;
    background: #fafcfa;
}

.selected-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}

.selected-item .remove-btn {
    color: #c00;
    cursor: pointer;
    font-size: 16px;
    margin-left: auto;
    flex-shrink: 0;
}

.selected-item .remove-btn:hover {
    color: #900;
}

/* Multi-select filter selectize — compact */
.species-filter-multi {
    min-width: 0;
}

.species-filter-multi .selectize-control {
    height: auto !important;
    padding: 0 !important;
}

/* Selectize input: transparent flex container, items flow below input */
.species-filter-multi .selectize-input {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* The text input — styled as the visible "box", always on top */
.species-filter-multi .selectize-input > input {
    order: -1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 32px !important;
    font-family: Inter, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500;
    color: #171717 !important;
    background-color: #D2DED6 !important;
    border: 1px solid #bbb !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    box-sizing: border-box !important;
}

.species-filter-multi .selectize-input > input::placeholder {
    color: #555 !important;
    font-weight: 500;
    font-size: 13px !important;
}

/* Selected items — pills below the input box */
.species-filter-multi .selectize-input .item {
    padding: 2px 6px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    background-color: #4a7c3f !important;
    color: white !important;
    margin: 0 !important;
    cursor: default;
}

.species-filter-multi .selectize-input .item .remove {
    color: white !important;
    border-left: none !important;
    font-size: 11px !important;
    padding: 0 3px !important;
    cursor: pointer;
}

.species-filter-multi .selectize-input > input::placeholder {
    color: #555 !important;
    font-weight: 500;
    font-size: 13px !important;
}

.species-filter-multi .shiny-input-container {
    width: 100% !important;
}

.species-filter-multi label.control-label {
    display: none !important;
}