/* Base body styling with gradient background */
body {
    background: radial-gradient(ellipse at top, #E6F7F1 50%, #FFFFFF 90%);
    color: #1F2937; /* dark gray text for readability */
    margin: 0;
    height: 100vh;
}

/* Ensure the gradient covers the entire viewport */
html {
    height: 100%;
}

/* Make sure Shiny containers don't override the background */
.container-fluid {
    background: transparent;
}

/* Climate panel styling for header */
.climate-panel {
    background: linear-gradient(135deg, #d6c436 0%, #8fc27b 50%, #c5d8a0 100%, #E6F7F1 50%);    
    color:black;
    padding: 8px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Logo styling within climate panel */
.climate-panel img {
    height: 40px;
    margin-right: 15px;
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
}

/* Title text styling within climate panel */
.climate-panel span {
    margin: 0;
    flex-grow: 1;
    font-weight: 600;
    font-size: 1.2rem;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}

/* Info icon styling within climate panel */
.climate-panel .fa-circle-info,
.climate-panel svg {
    margin-left: 10px;
    opacity: 0.9;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.climate-panel .fa-circle-info:hover,
.climate-panel svg:hover {
    opacity: 1;
}

/* Navbar specific adjustments */
.navbar-brand .climate-panel {
    margin-bottom: 0;
    padding: 6px 16px;
}

/* ========== NEW SELECTIZE CONTROLS STYLING ========== */

/* Selectize input box styling */
.selectize-input {
    font-size: 12px !important;
    height: 32px !important;
    padding: 6px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
    min-height: 32px !important;
}

/* Selectize dropdown menu styling */
.selectize-dropdown {
    font-size: 12px !important;
    border-radius: 4px !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Dropdown items styling */
.selectize-dropdown .option {
    padding: 6px 8px !important;
    font-size: 12px !important;
}

/* Dropdown item hover effect */
.selectize-dropdown .option:hover {
    background-color: #f3f4f6 !important;
}

/* Selected dropdown item */
.selectize-dropdown .option.active {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

/* Label styling for selectize inputs */
.control-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 4px !important;
    color: #374151 !important;
}

/* Column spacing adjustments */
.col-sm-6 {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Compact form group spacing */
.form-group {
    margin-bottom: 15px !important;
}

/* Focus state for selectize inputs */
.selectize-input.focus {
    border-color: #8fc27b !important;
    box-shadow: 0 0 0 2px rgba(143, 194, 123, 0.2) !important;
}

/* Placeholder text styling */
.selectize-input input::placeholder {
    color: #9ca3af !important;
    font-size: 12px !important;
}

/* ========== CARD FOOTER STYLING ========== */

/* Compact card footer */
.card-footer {
    padding: 4px 10px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    background-color: #f8f9fa !important;
    border-top: 1px solid #e9ecef !important;
}
 
/* ========== ACTION BUTTON STYLING ========== */
 
/* Action button compact styling */
.btn {
    font-size: 11px !important;
    padding: 4px 8px !important;
    height: 28px !important;
    width: auto !important;
    max-width: 100px !important;
    line-height: 1.1 !important;
    border-radius: 4px !important;
}
 
/* Primary button styling */
.btn-primary {
    background-color: #8fc27b !important;
    border-color: #8fc27b !important;
    color: white !important;
}
 
/* Button hover effect */
.btn-primary:hover {
    background-color: #7ab86a !important;
    border-color: #7ab86a !important;
}
 
/* ========== CHECKBOX STYLING ========== */
 
/* Checkbox container */
.checkbox {
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}
 
/* Checkbox label */
.checkbox label {
    font-size: 12px !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
    padding-left: 10px !important;
    line-height: 1.3 !important;
}
 
/* Checkbox input */
.checkbox input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    margin-top: 2px !important;
}

/* ========== DOWNLOAD BUTTON STYLING ========== */

/* Download button base styling */
.btn-outline-primary {
    font-size: 11px !important;
    padding: 4px 8px !important;
    height: 28px !important;
    width: auto !important;
    max-width: 100px !important;
    line-height: 1.1 !important;
    border-radius: 4px !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
}

/* Download button hover effect */
.btn-outline-primary:hover {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    color: white !important;
}

/* Download button focus state */
.btn-outline-primary:focus {
    box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.25) !important;
}

/* ========== CARD FOOTER COLUMN ALIGNMENT ========== */

/* Left align first column (View Data button) */
.card-footer .col-sm-4:nth-child(1) {
    text-align: left !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

/* Right align second column (Download button) */
.card-footer .col-sm-4:nth-child(2) {
    text-align: right !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Center align third column (Checkbox) */
.card-footer .col-sm-4:nth-child(3) {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Overall card footer flexbox container */
.card-footer .row {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* Remove default column padding for tighter spacing */
.card-footer .col-sm-4 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* Ensure all buttons in card footer have consistent styling */
.card-footer .btn {
    font-size: 11px !important;
    padding: 4px 8px !important;
    height: 28px !important;
    width: auto !important;
    max-width: 150px !important;
    line-height: 1.1 !important;
    border-radius: 4px !important;
}

.custom-card {
    border: 1px solid #8fc27b;          /* ✅ green border */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
  }

  .custom-card:hover {
    transform: translateY(-3px) scale(1.01);   /* ✅ more movement */
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); /* ✅ stronger shadow */
  }

/* Glossary Container */
.glossary-container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Main Title */
.glossary-title {
    color: #2c3e50;
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
}

/* Introduction Text */
.glossary-intro {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 3rem;
    text-align: center;
    line-height: 1.6;
}

/* Section Containers */
.glossary-section {
    margin-bottom: 3rem;
}

/* Section Titles */
.section-title {
    color: #34495e;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    font-weight: 600;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
}

/* Indicators Grid */
.indicators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

/* Individual Indicator Cards */
.indicator-card {
    background: #ffffff;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.indicator-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Indicator Titles */
.indicator-title {
    color: #2c3e50;
    margin: 0 0 0.75rem 0;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Indicator Units */
.indicator-unit {
    color: #7f8c8d;
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    font-weight: 500;
    font-style: italic;
}

/* Indicator Descriptions */
.indicator-description {
    color: #555;
    margin: 0;
    line-height: 1.5;
    font-size: 0.95rem;
}

/* Usage Notes Section */
.usage-notes {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    margin-top: 3rem;
}

/* Usage Notes Title */
.usage-title {
    color: #2c3e50;
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Usage Notes List */
.usage-list {
    margin: 0;
    padding-left: 1.5rem;
}

.usage-list li {
    color: #555;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.usage-list li:last-child {
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .glossary-container {
        padding: 1rem;
    }
    
    .glossary-title {
        font-size: 2rem;
    }
    
    .indicators-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .indicator-card {
        padding: 1rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    .glossary-container {
        background-color: #1a1a1a;
        color: #e0e0e0;
    }
    
    .glossary-title {
        color: #ffffff;
    }
    
    .glossary-intro {
        color: #cccccc;
    }
    
    .section-title {
        color: #ffffff;
        border-bottom-color: #4a90e2;
    }
    
    .indicator-card {
        background: #2d2d2d;
        border-color: #404040;
        color: #e0e0e0;
    }
    
    .indicator-title {
        color: #ffffff;
    }
    
    .indicator-unit {
        color: #999999;
    }
    
    .indicator-description {
        color: #cccccc;
    }
    
    .usage-notes {
        background: #2d2d2d;
        border-color: #404040;
    }
    
    .usage-title {
        color: #ffffff;
    }
    
    .usage-list li {
        color: #cccccc;
    }
}
/* ========== ABOUT MODAL STYLING ========== */

/* Custom styling for About modal content */
.custom-about-modal {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #1F2937;
}

/* Increase modal width - Large size */
.modal-lg .modal-dialog {
    max-width: 950px !important;
    width: 90% !important;
}

/* Alternative: Extra Large size with custom width */
.modal-xl .modal-dialog {
    max-width: 1100px !important;
    width: 92% !important;
}

/* Apply your dashboard gradient background to modal */
.modal-content {
    background: radial-gradient(ellipse at top, #E6F7F1 50%, #FFFFFF 90%) !important;
    border: 2px solid #8fc27b !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Modal header with gradient similar to climate panel */
.modal-header {
    background: linear-gradient(135deg, #d6c436 0%, #8fc27b 50%, #c5d8a0 100%) !important;
    border-bottom: 2px solid #8fc27b !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 12px 20px !important;
}

/* Modal title styling */
.modal-title {
    color: #1F2937 !important;
    font-weight: 600 !important;
    font-size: 1.3rem !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5) !important;
}

/* Modal body styling */
.modal-body {
    padding: 20px 25px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
}

/* Close button styling */
.modal-header .btn-close {
    filter: brightness(0) !important;
    opacity: 0.6 !important;
}

.modal-header .btn-close:hover {
    opacity: 1 !important;
}

/* Adjust paragraph spacing in modal */
.custom-about-modal p {
    margin-bottom: 0.9rem;
    color: #1F2937;
}

/* Style for headings in modal */
.custom-about-modal h3 {
    font-size: 1.15rem;
    margin-top: 1.3rem;
    margin-bottom: 0.7rem;
    color: #2c3e50;
    font-weight: 600;
    border-bottom: 1px solid #8fc27b;
    padding-bottom: 0.3rem;
}

.custom-about-modal h4 {
    font-size: 1.05rem;
    margin-top: 1rem;
    margin-bottom: 0.6rem;
    color: #374151;
    font-weight: 500;
}

/* Bold text styling */
.custom-about-modal strong {
    color: #2c3e50;
    font-weight: 600;
}

/* List styling in modal */
.custom-about-modal ul {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.custom-about-modal li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* Backdrop styling */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Scrollbar styling for modal body */
.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #8fc27b;
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #7ab86a;
}

/* Responsive adjustments for modal */
@media (max-width: 768px) {
    .modal-lg .modal-dialog,
    .modal-xl .modal-dialog {
        max-width: 95% !important;
        margin: 1rem auto !important;
    }
    
    .custom-about-modal {
        font-size: 0.85rem;
    }
    
    .modal-title {
        font-size: 1.1rem !important;
    }
    
    .modal-body {
        padding: 15px !important;
    }
}
/* ========== SIDEBAR SPONSORS LOGO STYLING ========== */

.sidebar-sponsors-logo {
    width: 100%;
    max-width: 280px;
    margin-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    padding: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sidebar-sponsors-logo:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* ========== SIDEBAR About Info modified from global big_btn above ========== */

.big-btn {
    width: 250px !important;
    height: 50px !important;
    font-size: 18px !important;
    padding: 12px 20px !important;

    border: 1.5px solid #8fc27b !important;   /* ✅ thinner green border */
    border-radius: 6px !important;

    background-color:  #f4fdf6 !important;     /* ✅ same as card background */
    color: #1F2937 !important;                /* ✅ readable dark text */

    max-width: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);    /* ✅ subtle shadow like cards */
}

.big-btn:hover {
    background-color: #f4fdf6 !important;     /* ✅ light greenish hover */
    border-color: #7ab86a !important;         /* ✅ darker green on hover */
}