/* ===========================================================
   ReliefMap
   Main Stylesheet
   Part 1
   Author : Vigneshan S
   Year : 2026
=========================================================== */

/* ===========================================================
   GOOGLE FONT
=========================================================== */

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

/* ===========================================================
   ROOT VARIABLES
=========================================================== */

:root{

/* Primary — Teal / Emerald relief palette */

    --primary:#1ABFAC;
    --primary-hover:#159A8A;
    --primary-dark:#159A8A;
    --primary-light:#DDF8F5;
    --accent:#1ABFAC;
    --accent-2:#10b981;

    /* Gradient */

    --gradient:linear-gradient(135deg,#1ABFAC 0%,#159A8A 100%);
    --gradient-warm:linear-gradient(135deg,#0F766E,#159A8A);

    /* Status */

    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#e11d48;
    --info:#14B8A6;

    /* Background — clean light workspace */

    --bg:#f8fafc;
    --card:#ffffff;
    --sidebar:#0F172A;
    --navbar:#0F172A;

    /* Text */

    --text:#111827;
    --text-light:#475569;
    --white:#ffffff;

    /* Border */

    --border:#e2e8f0;

    /* Radius */

    --radius:18px;

    /* Shadow */

    --shadow:

        0 10px 30px rgba(20,184,166,.10);

    --shadow-hover:

        0 15px 35px rgba(20,184,166,.18);

    /* Animation */

    --transition:.35s ease;

}

/* ===========================================================
   DARK MODE
=========================================================== */

body.dark,
body.dark.role-citizen,
body.dark.role-ngo,
body.dark.role-volunteer,
body.dark.role-admin{

    --bg:#071a22;

    --card:#0e2a35;

    --navbar:#0b1e2b;

    --text:#e6f7f4;

    --text-light:#9fc4be;

    --border:#1c3f4a;

    --shadow:

        0 10px 30px rgba(0,0,0,.35);

    --shadow-hover:

        0 15px 35px rgba(0,0,0,.5);

}

/* ===========================================================
   RESET
=========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

/* ===========================================================
   HTML
=========================================================== */

html{

    scroll-behavior:smooth;

}

/* ===========================================================
   BODY
=========================================================== */

body{

    font-family:"Poppins",sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    transition:background .4s;

}

/* ===========================================================
   LINKS
=========================================================== */

a{

    text-decoration:none;

    color:inherit;

}

/* ===========================================================
   IMAGES
=========================================================== */

img{

    width:100%;

    display:block;

}

/* ===========================================================
   BUTTONS
=========================================================== */

button{

    font-family:"Poppins";

    cursor:pointer;

    border:none;

    transition:var(--transition);

}

/* ===========================================================
   INPUT
=========================================================== */

input,

textarea,

select{

    font-family:"Poppins";

}

/* ===========================================================
   LIST
=========================================================== */

ul{

    list-style:none;

}

/* ===========================================================
   APP LAYOUT
=========================================================== */

.app{

    display:flex;

    min-height:100vh;

}

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

.content{

    margin-left:270px;

    padding:120px 30px 30px;

}

/* ===========================================================
   SECTION
=========================================================== */

section{

    margin-bottom:40px;

}

/* ===========================================================
   HEADINGS
=========================================================== */

h1{

    font-size:3rem;

    font-weight:700;

    color:var(--text);

}

h2{

    font-size:2rem;

    font-weight:700;

    color:var(--text);

}

h3{

    font-size:1.2rem;

    font-weight:600;

    color:var(--text);

}

p{

    line-height:1.8;

    color:var(--text-light);

}

/* ===========================================================
   SECTION HEADER
=========================================================== */

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.section-header h2{

    display:flex;

    gap:10px;

    align-items:center;

}

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

.card,

.map-card,

.chart-card,

.news-card,

.ai-card,

.profile-card,

.setting-card,

.weather-card{

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.card:hover,

.map-card:hover,

.chart-card:hover,

.news-card:hover,

.ai-card:hover,

.profile-card:hover,

.setting-card:hover,

.weather-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-hover);

}

/* ===========================================================
   BUTTONS
=========================================================== */

.primary-btn{

    background:var(--primary);

    color:white;

    padding:14px 30px;

    border-radius:12px;

    font-weight:600;

}

.primary-btn:hover{

    background:var(--primary-dark);

}

.secondary-btn{

    background:white;

    color:var(--primary);

    border:2px solid var(--primary);

    padding:14px 30px;

    border-radius:12px;

    font-weight:600;

}

.secondary-btn:hover{

    background:var(--primary);

    color:white;

}

/* ===========================================================
   SCROLLBAR
=========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-track{

    background:#CCFBF1;

}

/* ===========================================================
   SELECTION
=========================================================== */

::selection{

    background:var(--primary);

    color:white;

}
/* ===========================================================
   PAGE LOADER
=========================================================== */

#loader{

    position:fixed;

    inset:0;

    background:var(--sidebar);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader-content{

    text-align:center;

}

.loader-logo{

    width:100px;

    height:100px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

background:var(--gradient);

    color:white;

    font-size:42px;

    animation:rotateLogo 2s linear infinite;

}

.loader-content h1{

    color:white;

    margin-top:25px;

}

.loader-content p{

    color:#cbd5e1;

    margin:10px 0 25px;

}

.loader-bar{

    width:260px;

    height:8px;

    border-radius:20px;

background:#1c3f4a;

    overflow:hidden;

}

.loader-progress{

    width:0;

    height:100%;

background:var(--gradient);

    animation:loading 2.5s infinite;

}

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

.hero{

    display:flex;

    align-items:center;

    margin-top:20px;

}

.hero-left h1{

    margin:20px 0;

    line-height:1.2;

}

.hero-left p{

    max-width:650px;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.hero-right{

    display:flex;

    justify-content:center;

}

.hero-right img{

    max-width:520px;

    animation:floatImage 4s ease-in-out infinite;

}

/* ===========================================================
   HERO VIDEO BACKGROUND
=========================================================== */

.hero{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:var(--sidebar);

    min-height:520px;

    align-items:center;

    padding:60px 60px;

}

.hero-video{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:1;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgba(7,26,34,.85) 0%,

        rgba(7,26,34,.55) 45%,

        rgba(7,26,34,.25) 100%

    );

    z-index:2;

}

.hero-content{

    position:relative;

    z-index:3;

    max-width:720px;

}

.hero .hero-content .hero-left h1{

    color:#ffffff;

    text-shadow:0 4px 20px rgba(0,0,0,.5);

}

.hero .hero-content .hero-left p{

    color:#d7f2ee;

    text-shadow:0 2px 10px rgba(0,0,0,.4);

}

.hero .live{

    background:rgba(20,184,166,.25);

    border:1px solid rgba(45,212,191,.5);

    color:#5eead4;

    backdrop-filter:blur(6px);

}

.hero .primary-btn{

    background:var(--gradient);

    box-shadow:0 10px 25px rgba(20,184,166,.4);

}

.hero .secondary-btn{

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

    border-color:rgba(255,255,255,.5);

    color:#ffffff;

    backdrop-filter:blur(6px);

}

.hero .secondary-btn:hover{

    background:var(--primary);

    border-color:var(--primary);

    color:white;

}

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

.live{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    background:#dcfce7;

    color:var(--success);

    border-radius:50px;

    font-weight:600;

    font-size:.9rem;

}

/* ===========================================================
   ALERT BAR
=========================================================== */

.alert-bar{

    margin-top:35px;

    display:flex;

    align-items:center;

    gap:15px;

    background:#fee2e2;

    color:#b91c1c;

    padding:15px 25px;

    border-radius:14px;

    font-weight:600;

}

.alert-bar i{

    font-size:22px;

}

/* ===========================================================
   DASHBOARD GRID
=========================================================== */

.dashboard-cards{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:40px;

}

/* ===========================================================
   KPI CARD
=========================================================== */

.dashboard-cards .card{

    padding:28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    position:relative;

    overflow:hidden;

}

.dashboard-cards .card::before{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

    right:-45px;

    top:-45px;

    opacity:.12;

}

.dashboard-cards .hospital::before{

    background:#0d9488;

}

.dashboard-cards .food::before{

    background:#f59e0b;

}

.dashboard-cards .shelter::before{

    background:#16a34a;

}

.dashboard-cards .volunteer::before{

    background:#14B8A6;

}

.dashboard-cards span{

    color:var(--text-light);

    font-size:.95rem;

}

.dashboard-cards h2{

    margin-top:10px;

    font-size:2.2rem;

}

.dashboard-cards i{

    font-size:45px;

    opacity:.8;

}

/* ===========================================================
   STATUS COLORS
=========================================================== */

.hospital{

    border-left:6px solid #0d9488;

}

.food{

    border-left:6px solid #f59e0b;

}

.shelter{

    border-left:6px solid #16a34a;

}

.volunteer{

    border-left:6px solid #14B8A6;

}

/* ===========================================================
   PROGRESS BAR
=========================================================== */

.progress{

    width:100%;

    height:12px;

    background:#e5e7eb;

    border-radius:50px;

    overflow:hidden;

    margin:12px 0;

}

.progress-fill{

    height:100%;

    border-radius:50px;

background:linear-gradient(

        90deg,

        var(--primary),

        var(--accent)

    );

    animation:progressMove 2s ease;

}

/* ===========================================================
   BADGES
=========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:22px;

    height:22px;

    padding:0 8px;

    border-radius:50px;

    background:var(--danger);

    color:white;

    font-size:.75rem;

    font-weight:600;

}

/* ===========================================================
   AI STATUS
=========================================================== */

.ai-status{

    padding:8px 16px;

    border-radius:50px;

    background:#dcfce7;

    color:var(--success);

    font-weight:600;

}

/* ===========================================================
   UTILITY CLASSES
=========================================================== */

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.hidden{

    display:none !important;

}

.flex{

    display:flex;

}

.grid{

    display:grid;

}
/* ===========================================================
   MAP GRID
=========================================================== */

.map-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:25px;

    margin-top:40px;

}

.map-card{

    padding:25px;

}

#mapContainer{

    width:100%;

    height:550px;

    border-radius:18px;

    overflow:hidden;

    margin-top:20px;

    border:2px solid var(--border);

}

/* ===========================================================
   WEATHER CARD
=========================================================== */

.weather-card{

    padding:25px;

}

.weather-main{

    display:flex;

    align-items:center;

    gap:20px;

    margin:30px 0;

}

.temperature{

    font-size:4rem;

    font-weight:700;

    color:var(--primary);

}

.weather-main h3{

    font-size:1.5rem;

}

.weather-stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.weather-stats div{

    background:#f8fafc;

    border-radius:14px;

    padding:18px;

}

.weather-stats span{

    display:block;

    color:var(--text-light);

    font-size:.85rem;

    margin-bottom:8px;

}

.weather-stats strong{

    font-size:1.2rem;

}

/* ===========================================================
   AI CENTER
=========================================================== */

.ai-center{

    margin-top:40px;

}

.ai-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.ai-card{

    padding:30px;

    text-align:center;

    position:relative;

}

.ai-card i{

    font-size:42px;

    color:var(--primary);

    margin-bottom:20px;

}

.ai-card h1{

    margin:15px 0;

    font-size:3rem;

    color:var(--text);

}

.ai-card p{

    margin-top:12px;

}

/* ===========================================================
   RESOURCE GRID
=========================================================== */

.resource-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-top:25px;

}

.resource-card{

    background:var(--card);

    padding:25px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.resource-card span{

    font-weight:600;

    color:var(--primary);

}

/* ===========================================================
   ANALYTICS
=========================================================== */

.analytics{

    margin-top:45px;

}

.chart-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    margin-bottom:25px;

}

.chart-card{

    padding:25px;

}

.chart-card canvas{

    width:100% !important;

    height:350px !important;

}

/* ===========================================================
   NEWS
=========================================================== */

.news-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.news-card{

    overflow:hidden;

}

.news-card img{

    height:220px;

    object-fit:cover;

}

.news-content{

    padding:25px;

}

.news-content h3{

    margin:18px 0 10px;

}

.news-content small{

    display:block;

    margin-top:20px;

    color:var(--text-light);

}

/* ===========================================================
   NEWS TAGS
=========================================================== */

.news-tag{

    display:inline-block;

    padding:8px 14px;

    border-radius:30px;

    color:white;

    font-size:.8rem;

    font-weight:600;

}

.news-tag.flood{

    background:#0d9488;

}

.news-tag.medical{

    background:#e11d48;

}

.news-tag.food{

    background:#16a34a;

}

/* ===========================================================
   GLASS EFFECT
=========================================================== */

.glass{

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

    backdrop-filter:blur(18px);

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

}

/* ===========================================================
   FADE ANIMATION
=========================================================== */

.fade-up{

    animation:fadeUp .8s ease forwards;

}

.fade-left{

    animation:fadeLeft .8s ease forwards;

}

.fade-right{

    animation:fadeRight .8s ease forwards;

}
/* ===========================================================
   TIMELINE
=========================================================== */

.timeline{

    position:relative;

    margin-top:25px;

    padding-left:40px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:10px;

    top:0;

    bottom:0;

    width:4px;

    background:var(--primary);

    border-radius:20px;

}

.timeline-item{

    position:relative;

    background:var(--card);

    margin-bottom:25px;

    padding:20px 25px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:-38px;

    top:28px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--primary);

    border:4px solid white;

}

.timeline-item.completed::before{

    background:var(--success);

}

.timeline-item.warning::before{

    background:var(--warning);

}

.timeline-item.active::before{

    background:var(--danger);

}

.timeline .time{

    font-size:.85rem;

    color:var(--text-light);

    display:block;

    margin-bottom:8px;

}

/* ===========================================================
   ACTIVITY FEED
=========================================================== */

.activity-list{

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    overflow:hidden;

}

.activity-list li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 25px;

    border-bottom:1px solid var(--border);

    transition:var(--transition);

}

.activity-list li:last-child{

    border-bottom:none;

}

.activity-list li:hover{

    background:#f8fafc;

}

.activity-list i{

    color:var(--primary);

    margin-right:12px;

}

.activity-list span{

    color:var(--text-light);

    font-size:.85rem;

}

/* ===========================================================
   NOTIFICATIONS
=========================================================== */

.notification-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.notification-card{

    padding:22px;

    border-radius:var(--radius);

    color:white;

    box-shadow:var(--shadow);

}

.notification-card h4{

    margin-bottom:12px;

}

.notification-card.critical{

    background:#dc2626;

}

.notification-card.warning{

    background:#f59e0b;

}

.notification-card.success{

    background:#16a34a;

}

/* ===========================================================
   TABLE
=========================================================== */

table{

    width:100%;

    border-collapse:collapse;

    background:var(--card);

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

}

thead{

    background:var(--primary);

    color:white;

}

th{

    padding:18px;

    text-align:left;

}

td{

    padding:18px;

    border-bottom:1px solid var(--border);

}

tbody tr:hover{

    background:#f8fafc;

}

/* ===========================================================
   FORMS
=========================================================== */

form{

    display:grid;

    gap:18px;

}

input,

textarea,

select{

    width:100%;

    padding:14px 16px;

    border:1px solid var(--border);

    border-radius:12px;

    outline:none;

    transition:var(--transition);

    background:white;

}

textarea{

    resize:vertical;

    min-height:130px;

}

input:focus,

textarea:focus,

select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(20,184,166,.15);

}

/* ===========================================================
   FOOTER BASE
=========================================================== */

footer{

    margin-top:70px;

    padding:40px;

    text-align:center;

    background:var(--sidebar);

    color:white;

}

.footer-content p{

    color:#cbd5e1;

    margin:12px 0;

}

.social{

    display:flex;

    justify-content:center;

    gap:18px;

    margin:20px 0;

}

.social i{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

    cursor:pointer;

    transition:var(--transition);

}

.social i:hover{

    background:var(--primary);

    transform:translateY(-5px);

}

/* ===========================================================
   BACKEND OFFLINE BANNER
=========================================================== */

.backend-banner{

    position:fixed;

    top:0;

    left:0;

    right:0;

    z-index:2000;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:12px 20px;

    background:linear-gradient(135deg,#b91c1c,#e11d48);

    color:white;

    font-weight:600;

    font-size:.9rem;

    box-shadow:0 8px 25px rgba(185,28,28,.35);

}

.backend-banner i{

    font-size:20px;

}

.backend-banner code{

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

    padding:2px 8px;

    border-radius:6px;

}

/* ===========================================================
   SCROLL TOP BUTTON
=========================================================== */

#scrollTopBtn{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:white;

    font-size:22px;

    cursor:pointer;

    display:none;

    z-index:999;

    box-shadow:var(--shadow);

    transition:var(--transition);

}


/* ===========================================================
   KEYFRAMES
=========================================================== */

@keyframes loading{

    0%{

        width:0;

    }

    100%{

        width:100%;

    }

}

@keyframes rotateLogo{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes floatImage{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

@keyframes progressMove{

    from{

        width:0;

    }

}

@keyframes pulseDot{

    0%,100%{

        opacity:1;

        transform:scale(1);

    }

    50%{

        opacity:.55;

        transform:scale(.8);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* ===========================================================
   HEADER SUBTITLE
=========================================================== */

.header-subtitle{

    color:var(--text-light);

    font-size:.95rem;

    margin-top:8px;

}

/* ===========================================================
   ENHANCED CARD HOVER GLOW
=========================================================== */

.news-card,
.profile-card,
.setting-card,
.contact-card,
.contact-form-card,
.info-block,
.stat,
.achievement{

    position:relative;

}

.news-card::after,
.profile-card::after,
.setting-card::after,
.contact-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

background:linear-gradient(135deg,rgba(20,184,166,.12),transparent 60%);

    opacity:0;

    transition:opacity .4s;

    pointer-events:none;

}

.news-card:hover::after,
.profile-card:hover::after,
.setting-card:hover::after,
.contact-card:hover::after{

    opacity:1;

}

/* ===========================================================
   HELPERS
=========================================================== */

.round{

    border-radius:50%;

}

.shadow{

    box-shadow:var(--shadow);

}

.shadow-hover:hover{

    box-shadow:var(--shadow-hover);

}

.w-100{

    width:100%;

}

.text-primary{

    color:var(--primary);

}

.text-success{

    color:var(--success);

}

.text-danger{

    color:var(--danger);

}

.text-warning{

    color:var(--warning);

}