/* =========================
   GLOBAL UI v3
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: "Segoe UI", sans-serif;
}

body{
    background:#f5f7fb;
    overflow-x:hidden;
}

/* =========================
   SIDEBAR v3
========================= */

.sidebar{
    width:260px;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    background:linear-gradient(180deg,#0f3d2e,#0b2f24);
    z-index:1100;
    box-shadow:4px 0 20px rgba(0,0,0,0.15);

    display:flex;
    flex-direction:column;
}

.sidebar-header{
    padding:10px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    flex-shrink:0;
}

.sidebar-menu{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding:10px 0;
}

/* LINKS */
.sidebar-menu a {
    display: block;
    padding: 10px 18px;
    color: #ddd;
    text-decoration: none;
    transition: 0.2s;
}

.sidebar-menu a:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

/* NICE SCROLLBAR */
.sidebar-menu::-webkit-scrollbar {
    width: 6px;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
}

.logo{
    color:white;
    text-align:center;
    font-size:22px;
    font-weight:700;
    margin-bottom:30px;
}

/* =========================
   MAIN
========================= */

.main-content{

    margin-left:260px;
    padding:20px;

    transition:0.3s ease;

    width:calc(100% - 260px);
}

/* WHEN SIDEBAR HIDDEN */

.main-content.expanded{

    margin-left:0 !important;

    width:100% !important;
}

/* =========================
   TOPBAR v3
========================= */

.topbar{
    background:rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    padding:16px;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,0.06);
    margin-bottom:20px;
}

/* =========================
   CARDS v3
========================= */

.dashboard-card{
    background:white;
    padding:20px;
    border-radius:16px;
    box-shadow:0 10px 25px rgba(0,0,0,0.06);
    position:relative;
    transition:0.3s;
}

.dashboard-card:hover{
    transform:translateY(-5px);
}

.dashboard-card .icon{
    position:absolute;
    right:15px;
    top:10px;
    font-size:42px;
    opacity:0.15;
}

/* =========================
   MAP
========================= */

.map-card{
    background:white;
    padding:15px;
    border-radius:16px;
    box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

#map{
    width:100%;
    height:72vh;
    border-radius:12px;
}

/* =========================
   MOBILE TOPBAR
========================= */

.mobile-topbar{
    display:none;
    background:#0f3d2e;
    color:white;
    padding:12px;
    align-items:center;
    gap:10px;
    position:sticky;
    top:0;
    z-index:1200;
}

/* =========================
   SIDEBAR STATES
========================= */

.sidebar.hide{
    left:-260px;
}

.sidebar.show{
    left:0;
}

.main-content.full{
    margin-left:0;
}

/* =========================
   OVERLAY
========================= */

.sidebar-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.45);
    display:none;
    z-index:1000;
}

.sidebar-overlay.active{
    display:block;
}

/* Desktop: show */
#desktopToggle{
    display: inline-block;
}

/* =========================
   MOBILE FIX
========================= */

@media(max-width:768px){

    .mobile-topbar{
        display:flex;
    }

    .sidebar{
        left:-260px;
    }

    .main-content{
        margin-left:0;
        padding:12px;
    }

    #map{
        height:60vh;
    }
    
    #desktopToggle{
        display: none !important;
    }
}

/* =========================
   HERO v3
========================= */

/*.hero-section{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;

    background:
        linear-gradient(120deg, rgba(15,61,46,0.85), rgba(20,83,45,0.75)),
        url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2071&auto=format&fit=crop');

    background-size:cover;
    background-position:center;
}

.hero-animate .hero-title{
    text-shadow: 0 0 20px rgba(25, 135, 84, 0.3);
    font-size:3.5rem;
    font-weight:800;
    color:white;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s ease-out forwards;
    animation-delay: 0.2s;
}

.hero-animate .hero-text{
    color:rgba(255,255,255,0.85);
    max-width:600px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s ease-out forwards;
    animation-delay: 0.5s;
}

/* Button animation (optional nice touch) */
/*.hero-animate .hero-buttons {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s ease-out forwards;
    animation-delay: 0.8s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-logo{
    text-align:center;
}

.hero-logo img{
    width:140px;
    max-width:100%;
    height:auto;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,.15));
    animation:floatLogo 4s ease-in-out infinite;
}

@keyframes floatLogo{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
    100%{
        transform:translateY(0);
    }
}*/

.hero-section{

    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        rgba(7,35,28,.88),
        rgba(15,61,46,.78)
    ),

    url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2071&auto=format&fit=crop');

    background-size:cover;
    background-position:center;

}
.hero-content{

    text-align:center;

    position:relative;
    z-index:100;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.12);

    border-radius:30px;

    padding:50px 40px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.25);

}
.hero-logo img{

    width:170px;
    max-width:100%;

    filter:
    drop-shadow(0 0 20px rgba(255,255,255,.2))
    drop-shadow(0 0 40px rgba(25,135,84,.3));

    animation:
    floatLogo 4s ease-in-out infinite,
    glowLogo 3s infinite alternate;

}

@keyframes floatLogo{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }

}

@keyframes glowLogo{

    from{
        filter:
        drop-shadow(0 0 10px rgba(25,135,84,.3));
    }

    to{
        filter:
        drop-shadow(0 0 35px rgba(25,135,84,.9));
    }

}
.hero-title{

    color:#fff;

    font-size:3.8rem;

    font-weight:800;

    text-shadow:
    0 0 20px rgba(25,135,84,.4);

}

.hero-text{

    color:rgba(255,255,255,.9);

    max-width:650px;

    font-size:1.15rem;

    margin:auto;

}
.hero-animate .hero-title,
.hero-animate .hero-text,
.hero-animate .hero-buttons{

    opacity:0;

    transform:translateY(30px);

    animation:fadeUp 1s ease forwards;

}

.hero-animate .hero-title{

    animation-delay:.2s;

}

.hero-animate .hero-text{

    animation-delay:.5s;

}

.hero-animate .hero-buttons{

    animation-delay:.8s;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}
.leaf{

    position:absolute;

    font-size:34px;

    opacity:.35;

}

.leaf1{

    top:15%;
    left:10%;

    animation:leafFloat 10s infinite;

}

.leaf2{

    right:12%;
    top:30%;

    animation:leafFloat 13s infinite;

}

.leaf3{

    left:20%;
    bottom:20%;

    animation:leafFloat 11s infinite;

}

@keyframes leafFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-35px);
    }

    100%{
        transform:translateY(0);
    }

}
.pin{

    position:absolute;

    font-size:28px;

}

.pin1{

    left:15%;
    bottom:25%;

    animation:pinPulse 2s infinite;

}

.pin2{

    right:15%;
    bottom:35%;

    animation:pinPulse 3s infinite;

}

@keyframes pinPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.3);
    }

    100%{
        transform:scale(1);
    }

}
.eco-icon{

    position:absolute;

    font-size:42px;

    opacity:.4;

}

.carbon{

    top:10%;
    right:8%;

    animation:floatIcon 10s infinite;

}

.biodiversity{

    left:8%;
    top:55%;

    animation:floatIcon 12s infinite;

}

.heat{

    right:20%;
    top:55%;

    animation:floatIcon 14s infinite;

}

@keyframes floatIcon{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-25px);
    }

    100%{
        transform:translateY(0);
    }

}
@media(max-width:768px){

    .hero-content{

        padding:30px 20px;

    }

    .hero-title{

        font-size:2.2rem;

    }

    .hero-text{

        font-size:1rem;

    }

    .hero-logo img{

        width:120px;

    }

    .leaf,
    .pin,
    .eco-icon{

        font-size:22px;

    }

}

.hero-bg-elements i{

    font-size:2rem;

    opacity:.8;

    filter:
        drop-shadow(0 0 15px rgba(255,255,255,.4))
        drop-shadow(0 0 30px rgba(255,255,255,.2));

}

.carbon i{

    color:#4ade80;

    filter:
    drop-shadow(0 0 12px #4ade80)
    drop-shadow(0 0 25px #4ade80);

}

.leaf1 i{

    color:#6CC417;

    filter:
    drop-shadow(0 0 12px #6CC417)
    drop-shadow(0 0 25px #6CC417);

}

.leaf3 i{

    color:#6AA121;

    filter:
    drop-shadow(0 0 12px #6AA121)
    drop-shadow(0 0 25px #6AA121);

}

.leaf2 i{

    color:#FD1C03;

    filter:
    drop-shadow(0 0 12px #FD1C03)
    drop-shadow(0 0 25px #FD1C03);

}

.biodiversity i{

    color:#facc15;

    filter:
    drop-shadow(0 0 12px #facc15)
    drop-shadow(0 0 25px #facc15);

}

.heat i{

    color:#fb7185;

    filter:
    drop-shadow(0 0 12px #fb7185)
    drop-shadow(0 0 25px #fb7185);

}

.pin i{

    color:#60a5fa;

    filter:
    drop-shadow(0 0 12px #60a5fa)
    drop-shadow(0 0 25px #60a5fa);

}

@media(max-width:768px){

    .hero-bg-elements i{

        font-size:1.5rem;

    }

}

/* =========================
   GLASS BUTTON
========================= */

.glass-btn{
    background:rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,0.25);
    color:white;
    transition:0.3s;
}

.glass-btn:hover{
    background:white;
    color:#0f3d2e;
}

/* =========================
   LOGIN v3 GLASS UI
========================= */

.auth-body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#0f3d2e,#14532d);
    padding:20px;
}

.auth-card{
    width:100%;
    max-width:420px;
    background:rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    padding:35px;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,0.2);
}

/* =========================
   FEATURES
========================= */

.feature-card{
    background:rgba(255,255,255,0.95);
    padding:30px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:0.3s;
    text-align:center;
}

.feature-card:hover{
    transform:translateY(-8px);
}



/* =========================
   LIVE HEATWAVE ANIMATION V2
========================= */

/* HEAT PULSE */
.heat-pulse {

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: rgba(255, 0, 0, 0.9);

    border: 2px solid rgba(255,255,255,0.9);

    box-shadow:
        0 0 0 rgba(255, 0, 0, 0.7),
        0 0 20px rgba(255, 80, 0, 0.9);

    animation: heatPulse 2s infinite;
}

/* HOT LEVEL */
.heat-hot {

    background: rgba(255, 60, 0, 0.95);

    box-shadow:
        0 0 0 rgba(255, 60, 0, 0.7),
        0 0 30px rgba(255, 0, 0, 1);

}

/* MEDIUM LEVEL */
.heat-medium {

    background: rgba(255, 140, 0, 0.9);

    box-shadow:
        0 0 0 rgba(255, 140, 0, 0.7),
        0 0 25px rgba(255, 180, 0, 0.9);

}

/* COOL LEVEL */
.heat-cool {

    background: rgba(255, 220, 0, 0.85);

    box-shadow:
        0 0 0 rgba(255, 220, 0, 0.6),
        0 0 18px rgba(255, 255, 0, 0.8);

}

/* PULSE ANIMATION */
@keyframes heatPulse {

    0% {

        transform: scale(0.8);

        box-shadow:
            0 0 0 0 rgba(255, 0, 0, 0.8),
            0 0 15px rgba(255, 80, 0, 0.9);

        opacity: 1;
    }

    70% {

        transform: scale(1.8);

        box-shadow:
            0 0 0 25px rgba(255, 0, 0, 0),
            0 0 40px rgba(255, 120, 0, 1);

        opacity: 0.6;
    }

    100% {

        transform: scale(0.8);

        box-shadow:
            0 0 0 0 rgba(255, 0, 0, 0),
            0 0 15px rgba(255, 80, 0, 0.9);

        opacity: 1;
    }
}

/* =========================
   HEAT LEGEND
========================= */

.heat-legend {

    position: absolute;

    bottom: 25px;
    right: 20px;

    z-index: 999;

    background: rgba(255,255,255,0.96);

    padding: 15px;

    border-radius: 18px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.15);

    width: 170px;

    backdrop-filter: blur(10px);
}

.heat-legend h6 {

    margin-bottom: 12px;

    font-weight: 700;

    color: #222;
}

.legend-item {

    display: flex;

    align-items: center;

    margin-bottom: 10px;

    font-size: 14px;
}

.legend-color {

    width: 16px;
    height: 16px;

    border-radius: 50%;

    margin-right: 10px;
}

.legend-hot {

    background: red;

    box-shadow: 0 0 12px red;
}

.legend-medium {

    background: orange;

    box-shadow: 0 0 10px orange;
}

.legend-cool {

    background: yellow;

    box-shadow: 0 0 8px gold;
}

/* =========================
   MAP GLOW EFFECT
========================= */

#map {

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 10px 40px rgba(0,0,0,0.15),
        0 0 30px rgba(255,80,0,0.15);

}

/* =========================
   LIVE STATUS BADGE
========================= */

.live-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(255,0,0,0.08);

    color: #d00000;

    padding: 8px 14px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 600;
}

.live-dot {

    width: 10px;
    height: 10px;

    background: red;

    border-radius: 50%;

    animation: liveBlink 1s infinite;
}

@keyframes liveBlink {

    0%{
        opacity: 1;
    }

    50%{
        opacity: 0.2;
    }

    100%{
        opacity: 1;
    }
}

/* =========================
   MOBILE OPTIMIZATION
========================= */

@media(max-width:768px){

    .heat-legend {

        width: 140px;

        right: 10px;
        bottom: 10px;

        padding: 12px;
    }

    .legend-item {

        font-size: 12px;
    }

    .heat-pulse {

        width: 14px;
        height: 14px;
    }

    .live-badge {

        width: 100%;

        justify-content: center;

        margin-top: 10px;
    }
}

/* =========================
   TIMELINE SLIDER
========================= */

.timeline-box{

    background:white;

    padding:25px;

    border-radius:24px;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);

    margin-bottom:20px;
}

.timeline-box h5{
    font-weight:700;
}

.form-range{

    height:8px;

    cursor:pointer;
}

.form-range::-webkit-slider-thumb{

    background:#198754;

    width:22px;
    height:22px;

    border-radius:50%;

    border:none;

    box-shadow:0 0 10px rgba(25,135,84,0.5);
}

.form-range::-moz-range-thumb{

    background:#198754;

    border:none;

    width:22px;
    height:22px;

    border-radius:50%;
}

/* MOBILE */

@media(max-width:768px){

    .timeline-box{

        padding:18px;
    }

    .timeline-box .btn{

        width:100%;
    }
}

.heat-flow-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 80, 0, 0.9);
    box-shadow: 0 0 20px rgba(255, 80, 0, 0.8);
    animation: flowPulse 1.5s infinite;
}

@keyframes flowPulse {
    0% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.6); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0.6; }
}


/* =========================
   AI ZONE TABLE
========================= */

.zone-table-card{

    background:white;

    border-radius:24px;

    padding:25px;

    margin-top:20px;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.zone-table-card table{

    margin-bottom:0;
}

.zone-table-card thead{

    background:#14532d;

    color:white;
}

.zone-table-card th{

    padding:16px;
    font-weight:600;
}

.zone-table-card td{

    padding:16px;
    vertical-align:middle;
}

.risk-high{

    background:#ffebee;
    color:#c62828;

    padding:6px 14px;

    border-radius:30px;

    font-weight:700;
}

.risk-medium{

    background:#fff3e0;
    color:#ef6c00;

    padding:6px 14px;

    border-radius:30px;

    font-weight:700;
}

.risk-low{

    background:#e8f5e9;
    color:#2e7d32;

    padding:6px 14px;

    border-radius:30px;

    font-weight:700;
}

/* MOBILE */

@media(max-width:768px){

    .zone-table-card{

        padding:18px;
    }

    .zone-table-card table{

        min-width:850px;
    }
}

.logo-wrapper{
    text-align:center;
    margin-bottom:20px;
}

.logo-img{
    max-width:220px;
    width:100%;
    height:auto;
    display:inline-block;
    object-fit:contain;
}

/* Tablet */
@media (max-width:768px){

    .logo-img{
        max-width:180px;
    }

}

/* Mobile */
@media (max-width:576px){

    .logo-img{
        max-width:140px;
    }

}

.site-footer{

    background: linear-gradient(
        135deg,
        #0f3d2e,
        #14532d
    );

    color:#fff;

    border-top:1px solid rgba(255,255,255,.1);

    box-shadow:
        0 -5px 20px rgba(0,0,0,.15);

    position:relative;

    overflow:hidden;

}

/* Decorative glow */
.site-footer::before{

    content:'';

    position:absolute;

    top:-80px;
    right:-80px;

    width:200px;
    height:200px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

}

.site-footer h6{

    color:#fff;

    font-size:1.1rem;

    display:flex;

    align-items:center;

    gap:10px;

}

.site-footer h6 img{

    width:32px;

    height:32px;

    border-radius:8px;

    transition:.3s;

}

.site-footer h6 img:hover{

    transform:rotate(10deg) scale(1.1);

}

.site-footer small{

    color:#fff;

}

.site-footer a{

    color:#9be15d;

    text-decoration:none;

    transition:.3s;

}

.site-footer a:hover{

    color:#fff;

}

/* Footer content */
.site-footer .container{

    position:relative;

    z-index:2;

}

/* Mobile */
@media(max-width:768px){

    .site-footer{

        text-align:center;

    }

    .site-footer h6{

        justify-content:center;

        margin-bottom:10px;

    }

    .site-footer .col-md-6{

        margin-bottom:15px;

    }

}
.site-footer::after{

    content:'';

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:3px;

    background:
    linear-gradient(
        90deg,
        #4ade80,
        #22c55e,
        #4ade80
    );

    background-size:200% 100%;

    animation:footerGlow 5s linear infinite;

}

@keyframes footerGlow{

    from{
        background-position:0 0;
    }

    to{
        background-position:200% 0;
    }

}

.feature-icon1 i{
    font-size:2rem;
    color: #3EA055;
}
.feature-icon2 i{
    font-size:2rem;
    color: #fb7185;
}
.feature-icon3 i{
    font-size:2rem;
    color: #C0C0C0;
}



.stat-card{

    border:none;

    border-radius:20px;

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-5px);

}

.stat-icon{

    font-size:3rem;

    margin-bottom:10px;

}

.stat-card h2{

    font-weight:700;

}

.card{

    border-radius:20px;

}



/* Chain the classes together with NO spaces to break Leaflet's priority */
img.leaflet-marker-icon.custom-biodiversity-marker,
div.leaflet-marker-icon.custom-biodiversity-marker {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}