*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: "Segoe UI", "Roboto", Helvetica, Arial, sans-serif;
    overflow: hidden;
    color: #333;
}

.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* --- HEADER GRID LAYOUT --- */
.header {
    display: grid;
    /* 3 Columns: Left (Auto), Center (1fr), Right (Auto) */
    /* We use minmax to ensure the sides don't collapse too much */
    grid-template-columns: 60px 1fr 60px;
    align-items: center;
    background-color: #004080;
    color: white;
    height: 60px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    z-index: 2000;
    padding: 0 10px;
}

/* Left: Hamburger Menu */
.header-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* Right: Logo */
.header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header img {
    height: 42px;
    background: white;
    padding: 2px;
    border-radius: 4px;
}

/* Center: Title */
.header-center {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Prevents overflow on very small screens */
}

.header-title {
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Responsive Font: Minimum 0.9rem, Preferred 2.5vw, Maximum 1.4rem */
    font-size: clamp(0.9rem, 2.5vw, 1.4rem);
    letter-spacing: 0.5px;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 26px;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.sidebar-toggle:hover {
    color: #ffd700; /* Gold color on hover */
}

/* --- LAYOUT WRAPPER --- */
.content-wrapper {
    display: flex;
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* --- SIDEBAR --- */
/*
.sidebar {
    width: 310px;
    background: #fdfdfd;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: 4px 0 10px rgba(0,0,0,0.05);
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}
*/



.sidebar {
    width: 370px;
    background: #fdfdfd;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column; /* Stack header, controls, footer */
    height: 100%;           /* Fill the available height */
    box-shadow: 4px 0 10px rgba(0,0,0,0.05);
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
}

.sidebar-content-scroll {
    flex: 1;              /* Takes up all available space */
    overflow-y: auto;     /* Adds scrollbar if controls are too tall */
    padding: 20px;        /* Move padding here from .sidebar */
}

.sidebar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #004080;
}

.sidebar-header h3 {
    margin: 0;
    color: #004080;
    font-size: 1.2rem;
    font-weight: 700;
}

.close-sidebar-btn {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #555;
    line-height: 1;
}

/* Form Controls Styling */
.control-group { margin-bottom: 20px; }

.control-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #444;
}

.select-wrapper {
    position: relative;
}

/* Add a custom arrow to dropdowns */
.select-wrapper::after {
    content: "▼";
    font-size: 0.8rem;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #004080;
    pointer-events: none;
}

.select-wrapper select {
    width: 100%;
    padding: 10px 30px 10px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    font-size: 0.95rem;
    color: #333;
    appearance: none; /* Remove default browser arrow */
    -webkit-appearance: none;
}

.select-wrapper select:focus {
    border-color: #004080;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 64, 128, 0.1);
}

.lang-btn {
    width: 100%;
    padding: 12px;
    background-color: #f0f7ff;
    border: 1px solid #004080;
    color: #004080;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
}
.lang-btn:hover { background-color: #e0efff; }

/* --- MAIN CONTENT --- */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.scrolling-bar {
    background: linear-gradient(90deg, #e3f3fb 0%, #bbdefb 100%);
    color: #005cb9;
    border-bottom: 1px solid #2196F3;
    padding: 8px 0;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    z-index: 10;
}

#mapSSIFS {
    flex-grow: 1;
    width: 100%;
    z-index: 1;
}

/* Make the controls area expand to fill space, pushing footer down */
/* Wrap your controls (labels/selects) in a div if they aren't already, 
   OR just target the last control-group to grow, 
   OR simply let the footer margin-top: auto handle it. */

/*
.sidebar-footer {
    padding: 15px 20px;
    border-top: 1px solid #ddd;
    font-size: 0.8rem;
    color: #666;
    background-color: #f4f4f4;
    flex-shrink: 0; /* Prevents disclaimer from shrinking/disappearing *

    /* Optional: subtle background to distinguish it *
    padding: 15px;
    margin-left: -20px; /* Counteract sidebar padding to make it full width *
    margin-right: -20px;
    margin-bottom: -20px; *
} */

.sidebar-footer {
    padding: 15px 20px;
    border-top: 1px solid #ddd;
    font-size: 0.8rem;
    color: #666;
    background-color: #f4f4f4;
    flex-shrink: 0; 
    
    /* ADD THIS: Ensures the footer doesn't get too tall on very small screens */
    /* If the content is too tall, this part itself can scroll independently if needed, 
       though usually not required for just a small table + text */
    max-height: 40vh; 
    overflow-y: auto; 
}

.disclaimer-title {
    font-weight: bold;
    color: #b00020; /* Warning color */
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.sidebar-footer p {
    margin: 0;
    text-align: justify;
    font-size: 0.95em;
    line-height: 1.4;
}

.sidebar-footer :lang(ml) {
    font-family: "Noto Sans Malayalam", "Uroob", sans-serif;
    line-height: 1.2;
}

/* --- RESPONSIVE / MOBILE LAYOUT --- */
@media (max-width: 768px) {

    /* 1. HEADER FIX: Use min-content to hug the button and logo tightly */
    .header {
        display: grid;
        /* Left(Auto) | Title(Flexible) | Right(Auto) */
        grid-template-columns: min-content 1fr min-content;
        gap: 10px; /* Force space between elements */
        height: auto;
        min-height: 56px;
        padding: 8px;
    }

    .header-left, .header-right {
        /* Prevent these from shrinking */
        min-width: 40px; 
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header img {
        height: 36px; /* Ensure logo is small enough */
        width: auto;  /* Maintain aspect ratio */
        display: block;
    }

    .header-title {
        white-space: normal;
        line-height: 1.15;
        font-size: 0.9rem; /* Safe readable size */
        text-align: center;
        
        /* Box logic to handle 2 lines gracefully */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        
        /* Vertical center */
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    
    .sidebar-toggle {
        display: none !important;
    }

    /* 2. Main Layout (Stacking) */
    .content-wrapper {
        flex-direction: column;
    }

    .main-content {
        height: 55vh; /* Map takes top 55% */
        flex: none;
        order: 1;
        width: 100%;
    }

    /* 3. Sidebar Container (The Scrollable Area) */
    .sidebar {
        position: static;
        width: 100%;
        /* Take the remaining height (45vh) */
        flex: 1; 
        order: 2;
        border-top: 4px solid #004080;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        padding: 0;
        
        /* ENABLE GLOBAL SCROLLING HERE */
        overflow-y: auto !important; 
        display: block; /* Switch to block to let content flow naturally */
    }
    
    /* 4. Disable Internal Scrolling */
    .sidebar-content-scroll {
        /* Remove flex/scroll properties so it grows with content */
        flex: none !important;
        height: auto !important;
        overflow: visible !important;
        padding: 15px;
    }

    /* 5. Footer flows naturally at the bottom */
    .sidebar-footer {
        padding: 10px 15px;
        background: #eee;
        /* Ensure it just sits at the bottom of the flow */
        margin-top: 0; 
        border-top: 1px solid #ccc;
    }
    
    /* Optional: Compact styling for mobile controls */
    .control-group {
        margin-bottom: 15px;
    }
}

/*
/* --- RESPONSIVE ADJUSTMENTS --- *
@media (max-width: 768px) {
    /* 1. Header Adjustments *
    .header {
        height: auto;       /* Allow height to grow if text wraps *
        min-height: 60px;
        padding: 5px 10px;
    }
    
    .header-title {
        white-space: normal;  /* Allow text to wrap *
        line-height: 1.2;     /* Tighter line height for 2 lines *
        font-size: 0.95rem;   /* Readable size *
        max-height: 48px;     /* Prevent it from getting too huge *
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Limit to 2 lines *
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .header img {
        height: 32px; /* Slightly smaller logo on mobile *
    }
    
    .sidebar-toggle {
        display: none !important;
    }

    /* 2. Layout Structure *
    .content-wrapper {
        flex-direction: column;
    }

    .main-content {
        height: 55vh;
        flex: none;
        order: 1;
        width: 100%;
    }

    /* 3. Sidebar Bottom Panel *
    .sidebar {
        position: static;
        width: 100%;
        height: auto;     /* Auto height for bottom panel *
        flex: 1;
        order: 2;
        border-top: 4px solid #004080;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        /* Remove padding here, let inner elements handle it *
        padding: 0; 
    }
    
    /* 4. Scroll Adjustment for Mobile Sidebar *
    .sidebar-content-scroll {
        padding: 15px; /* Restore padding *
        overflow-y: auto;
    }

    .sidebar-footer {
        padding: 10px 15px;
        background: #eee;
    }
} */

@media (max-width: 380px) {
    /* Extremely small screens */
    .header-title {
        font-size: 0.85rem;
    }
}

/* --- EXISTING UTILITIES (Loader, Status, etc.) --- */
#statusMessage {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    text-align: center;
    background: rgba(50, 50, 50, 0.9);
    color: white;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 20px;
    display: none;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* ... Keep previous loader and legend styles ... */
#locationLoader {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.75);
    z-index: 9999;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 60px; height: 60px;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#loaderMsg { margin-top: 12px; color: #004080; font-weight: bold; }

.scrolling-text {
    display: inline-block;
    font-weight: bold;
    color: #b00020;
    font-size: 1.05em;
    padding-left: 100%;
    animation: scroll-left 22s linear infinite;
}
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }


/* --- LEGEND STYLING --- */
.info.legend {
    background: rgba(255, 255, 255, 0.95); /* High opacity white */
    backdrop-filter: blur(4px); /* Blur the map behind it (modern browser support) */
    padding: 0; /* Remove default padding, we'll handle it inside */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 64, 128, 0.2); /* Subtle blue border */
    font-family: "Segoe UI", sans-serif;
    min-width: 130px;
    overflow: hidden; /* Clips the header corners */
}

/* New Title Style */
.legend-title {
    background-color: #f0f7ff; /* Very light blue background */
    color: #004080; /* Theme blue text */
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    padding: 8px 10px;
    border-bottom: 1px solid #e0e0e0;
    margin: 0; /* Reset margin */
}

/* Container for the items */
.legend-content {
    padding: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: #333;
}

.legend-item:last-child {
    margin-bottom: 0;
}

.legend-box {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    border-radius: 3px; /* Softer corners on color boxes */
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

/* Legend & Modal Styles *
.info.legend {
    background: rgba(255, 255, 255, 0.95);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    border: 1px solid #ccc;
}
.legend-item { display: flex; align-items: center; margin-bottom: 5px; }
.legend-box { width: 18px; height: 18px; margin-right: 8px; border: 1px solid #888; } */

.lang-modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:10000; display:flex; align-items:center; justify-content:center; }
.lang-modal-content { background:#fff; padding:20px; border-radius:8px; width: 300px; text-align:center; position:relative; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.lang-close { position:absolute; top:10px; right:15px; font-size:24px; cursor:pointer; color:#999; }
.lang-option { display:block; width:100%; padding:12px; margin:8px 0; border:1px solid #ddd; border-radius:6px; background:none; cursor:pointer; font-size:16px; transition: 0.2s;}
.lang-option:hover { background:#f5f5f5; border-color: #aaa; }


/* --- Coordinate Control (Lat/Lon) --- */
.leaflet-control-latlng {
    background-color: #fff;
    border: 2px solid #004080; /* Matches the header color */
    border-radius: 4px;
    padding: 5px 10px;
    font-family: "Segoe UI", "Roboto", sans-serif;
    font-size: 0.7rem;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-weight: 600;
    white-space: nowrap;
    cursor: default;

    /* Ensure it sits nicely above other map layers */
    z-index: 1000;
}

/* --- TERMINOLOGY TABLE STYLES --- */
.terminology-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem; /* Slightly smaller to fit sidebars */
    background-color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.terminology-table th,
.terminology-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.terminology-table th {
    background-color: #f0f7ff; /* Matches your lang-btn hover/theme */
    color: #004080;            /* Matches your header color */
    font-weight: 700;
    border-bottom: 2px solid #e0efff;
}

.terminology-table tr:last-child td {
    border-bottom: none;
}

/* Dots to match the Map Legend colors */
.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}
.legend-dot.orange { background-color: orange; }
.legend-dot.blue { background-color: #00B4D8; }

/* --- RESPONSIVE / MOBILE LAYOUT --- */
@media (max-width: 768px) {
    /* 1. Hide the Toggle Button (Controls are always visible now) */
    .sidebar-toggle {
        display: none !important;
    }

    .close-sidebar-btn {
        display: none !important;
    }

    /* 2. Stack Elements Vertically */
    .content-wrapper {
        flex-direction: column; /* Stack children */
    }

    /* 3. Map takes top 55% of the screen */
    .main-content {
        height: 55vh; /* Fixed height for map */
        flex: none;   /* Don't grow/shrink, stay at 55vh */
        order: 1;     /* Map comes first */
        width: 100%;
    }

    /* 4. Sidebar becomes the Bottom Panel */
    .sidebar {
        position: static; /* Remove absolute positioning */
        transform: none;  /* Remove slide effect */
        width: 100%;      /* Full width */
        height: auto;     /* Let it grow with content */
        flex: 1;          /* Take remaining height */
        order: 2;         /* Sidebar comes second */
        max-width: none;  /* Remove width restriction */
        border-right: none;
        border-top: 4px solid #004080; /* Visual separator */
        padding: 10px 15px; /* Compact padding */
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }

    /* 5. Compact the Sidebar Header */
    .sidebar-header {
        margin-bottom: 10px;
        padding-bottom: 5px;
    }
    .sidebar-header h3 {
        font-size: 1rem;
    }

    /* 6. Arrange Dropdowns in a Grid/Row for efficiency?
       Optional: Makes better use of horizontal space */
    .control-group {
        margin-bottom: 10px;
    }

    /* 7. Smaller Popup Fonts for Mobile */
    .leaflet-popup-content {
        font-size: 11px !important;
        margin: 8px 10px !important;
        line-height: 1.4;
    }
    .leaflet-popup-content table th,
    .leaflet-popup-content table td {
        padding: 4px !important;
    }

    /* 8. Disclaimer Adjustment for Mobile */
    .sidebar-footer {
        font-size: 0.75rem; /* Smaller text */
        padding: 10px;
        margin-top: 10px;
    }

    /* Mobile Adjustment for the table */
    .terminology-table {
        font-size: 0.8rem;
    }
    .terminology-table th,
    .terminology-table td {
        padding: 6px 8px;
    }
}