/* ==========================================================================
   Base & Typography Reset
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Montserrat', sans-serif, Arial, Helvetica;
    background-color: #f7fafc;
    display: flex;
    flex-direction: column;
    height: 100vh;      /* Pin layout to full screen viewport height */
    overflow: hidden;   /* Disable global window double scrollbars */
}

h1 {
    font-size:2.5rem;
}

h2 { 
    font-size: 1rem;
    color: brown;
}
    
/* Unvisited link */
a:link {
color: #898989;
text-decoration: none;
}

/* Visited link */
a:visited {
color: #7c7c7c;
text-decoration: none;
}

/* Mouse hover */
a:hover {
color: #ffffff;
text-decoration: underline;
}

/* Active link (clicked) */
a:active {
color: #ffffff;
text-decoration: underline;
}


.headercontent{
        display: flex;
        flex-direction: row;
      justify-content: space-between;
  align-items: center;
}

.headertext{
        display: flex;
        flex-direction: column;
    gap: 1rem;
    
}

/* ==========================================================================
   Sticky Header & Footer Layout Pinned Components
   ========================================================================== */
#header {
    border-bottom: 1px solid #e2e8f0;
    padding: 20px 20px 20px 20px;
    flex-shrink: 0;     /* Prevent header compression */
    z-index: 1000;      /* Keeps header above map graphics layer overlays */
}


#footer {
    border-top: 1px solid #e2e8f0;
    padding: 20px 20px 20px 20px;
    flex-shrink: 0;     /* Prevent footer compression */
    z-index: 1000;      /* Keeps footer above map graphics layer overlays */
}

/* ==========================================================================
   Main Layout Structure
   ========================================================================== */
.main-content {
    display: flex;
    height: calc(100vh - 120px); /* Adjust based on header/footer size */
    flex: 1;            /* Dynamically fills all space between header and footer */
    overflow: hidden;   /* Keeps panels scrolling contained within their frames */
}

#sidebar {
    width: 320px;       /* Restored to original layout specification width */
    background-color: #FFFFFF;
    border-right: 1px solid #e2e8f0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#map {
    flex: 1;
    height: 100%;
    min-height: 400px;
    z-index: 1;
}

#list-panel {
    width: 360px;       /* Restored to original layout specification width */ 
    background-color: #EDF2F7;
    border-left: 1px solid #e2e8f0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

}

/* ==========================================================================
   Modern Multi-Input Data Cards (File & URL Selectors)
   ========================================================================== */
.import-section {
    font-size: 1rem;
    color: #2d3748;
    margin-top: 1px;
    display: flex;
    flex-direction: row;
}
.basemap-card {
    font-size: 1rem;
    color: #2d3748;
    display: flex;
    flex-direction: column;
}

.import-section h3 {
    font-size: 1rem;
    color: #2d3748;
    margin-bottom: 5px;  
}

.data-input-card {
    background-color: #eef8ff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.input-card-title {
    display: block;
    font-size: 0.85rem;
    font-weight: bold;
    color: #4a5568;
    margin-bottom: 8px;
}

input[type="file"] { 
    display: none; 
}

.action-link-btn {
    display: block;
    text-align: center;
    padding: 8px;
    background-color: #fff;
    border: 1px dashed #cbd5e0;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #4a5568;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background-color 0.2s;
}

.action-link-btn:hover { 
    background-color: #edf2f7; 
}

.url-input-row {
    display: flex;
    gap: 5px;
}

.url-input-row input[type="text"] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
}

.url-input-row button {
    padding: 6px 12px;
    background-color: #4a5568;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
}

.url-input-row button:hover { 
    opacity: 0.9; 
}

/* Card Accent Borders */
.basemap-card { border-left: 4px solid #7f8c8d; }
.polygon-card { border-left: 4px solid #2b6cb0; }
.point-card { border-left: 4px solid #319795; }

/* ==========================================================================
   Filters & Forms
   ========================================================================== */
.section-divider {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 15px 0;
}


.intro {
    font-size: 1rem;
    color: #d5d5d5;
    margin-bottom: 15px;
    line-height: 1.4;
}

.filter-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}
#temporal-slider {
    width: 100%;
    box-sizing: border-box; /* Ensures padding/borders don't spill outside container boundaries */
    margin-top: -15px;/* Adds a clean layout separation between the label text and track */
   margin-bottom: 24px;
    display: block;
    -webkit-appearance: none; /* Disables native browser defaults */
    appearance: none;
    height: 8px;
    border-radius: 5px;
    background: #ddd; /* Color of the unfilled slider bar track */
    outline: none;
}



.filter-group label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 6px;
    color: #e5e5e5;
}

.filter-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    background-color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    color: #2d3748;
    outline: none;
    transition: border-color 0.2s;
}

.filter-group select:focus {
    border-color: #d4d4d4;
}

.filter-group select:disabled {
    background-color: #edf2f7;
    color: #a0aec0;
    cursor: not-allowed;
}

#reset-btn {
    width: 100%;
    padding: 10px;
    background-color: #e2e8f0;
    border: none;
    border-radius: 6px;
    color: #4a5568;
    font-family: inherit;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-bottom: 20px;
}

#reset-btn:hover {
    background-color: #cbd5e0;
}

/* ==========================================================================
   Details Panel (Sidebar Content)
   ========================================================================== */
#details-panel {
    margin-top: 10px;
    border-top: 2px solid #edf2f7;
    padding-top: 15px;
}

.placeholder-text {
    color: #a0aec0;
    text-align: center;
    font-style: italic;
    padding: 20px 0;
    font-size: 0.85rem;
}

.detail-section-title {
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #d4d4d4;
    margin: 15px 0 8px 0;
    letter-spacing: 0.5px;
}

.detail-label {
    font-size: 0.75rem;
    color: #d4d4d4;
    font-weight: bold;
    margin-top: 6px;
}

.detail-val {
    font-size: 0.85rem;
    color: #a0aec0;
    margin-bottom: 6px;
    line-height: 1.3;
    word-break: break-word;
}

.detail-val a {
    color: #a0aec0;
    text-decoration: none;
}

.detail-val a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Directory List & Accordions
   ========================================================================== */
.list-count {
    color: #d4d4d4;
    font-size: 1rem;
    font-weight: normal;
    margin-left: 5px;
}

.empty-state {
    color: #a0aec0;
    text-align: center;
    padding: 20px;
    font-style: italic;
    font-size: 0.85rem;
}

#list-container {
    margin-top: 15px;

    flex: 1;
}

.accordion-section {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
}

.accordion-header {
    background-color: #edf2f7;
    padding: 12px 15px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: background-color 0.2s;
}

.accordion-header:hover {
    background-color: #e2e8f0;
}

.group-badge {
    background-color: #cbd5e0;
    color: #4a5568;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
}

.accordion-content {
    display: none;
    max-height: 300px;
    overflow-y: auto;
    background-color: #fff;
    border-top: 1px solid #e2e8f0;
}

/* Toggle Expand State */
.accordion-section.active .accordion-content {
    display: block;
}

.accordion-section.active .accordion-header {
    background-color: #e2e8f0;
}

/* Directory Rows */
.agent-list-item {
    padding: 10px 15px;
    border-bottom: 1px solid #f7fafc;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: background-color 0.2s;
}

.agent-list-item:last-child {
    border-bottom: none;
}

.agent-list-item:hover {
    background-color: #ebf8ff;
}

.agent-list-item.active {
    background-color: #bee3f8;
    border-left: 4px solid #3182ce;
}

.agent-list-item strong {
    font-size: 0.85rem;
    color: #2d3748;
}

.sub-info {
    font-size: 0.75rem;
    color: #718096;
    margin-top: 3px;
}

/* ==========================================================================
   Leaflet Overrides & Custom Styles
   ========================================================================== */
.custom-svg-marker {
    background: none;
    border: none;
}

/* Responsive Overrides */
@media (max-width: 1024px) {
    .main-content {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    #sidebar, #list-panel {
        width: 100%;
        height: auto;
        border: none;
    }
    #map {
        height: 400px;
        width: 100%;
    }
}