/*==================================================
        HEALTH METRICS DASHBOARD
            STYLE.CSS PART 1.1
==================================================*/

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

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

/*==========================
      CSS VARIABLES
==========================*/

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --secondary:#06b6d4;

    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;

    --dark:#0f172a;
    --text:#334155;
    --text-light:#64748b;

    --white:#ffffff;

    --bg:#f4f7fc;
    --card:#ffffff;

    --border:#e2e8f0;

    --shadow:
        0 10px 25px rgba(0,0,0,.08);

    --radius:18px;

    --transition:.35s ease;

}

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

body.dark{

    --bg:#0f172a;

    --card:#1e293b;

    --text:#f8fafc;

    --text-light:#cbd5e1;

    --border:#334155;

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    transition:var(--transition);

}

/*==========================
      CONTAINER
==========================*/

.container{

    width:min(1200px,92%);

    margin:auto;

}

/*==========================
      SECTIONS
==========================*/

.section{

    padding:90px 0;

}

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

h1,h2,h3,h4{

    color:var(--dark);

    font-weight:700;

}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4{

    color:white;

}

p{

    color:var(--text-light);

    line-height:1.7;

}

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

a{

    text-decoration:none;

    color:inherit;

}

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

img{

    display:block;

    width:100%;

}

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

ul{

    list-style:none;

}

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

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}

/*==========================
      INPUTS
==========================*/

input,
select,
textarea{

    font-family:inherit;

    outline:none;

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

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}

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

.btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 28px;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:white;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

.btn-outline{

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

    color:var(--primary);

    background:white;

}

.btn-outline:hover{

    background:var(--primary);

    color:white;

}

.btn-success{

    background:var(--success);

    color:white;

}

/*==========================
      ICON BUTTON
==========================*/

.icon-btn{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:white;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.icon-btn:hover{

    background:var(--primary);

    color:white;

}

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

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title span{

    color:var(--primary);

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

}

.section-title h2{

    margin:12px 0;

    font-size:2.2rem;

}

.section-title p{

    max-width:700px;

    margin:auto;

}

/*==========================
      LOADER
==========================*/

#loader{

    position:fixed;

    inset:0;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.loader-box{

    text-align:center;

}

.loader-box i{

    font-size:55px;

    color:var(--danger);

    margin:15px 0;

}

.loader-box h2{

    margin-bottom:10px;

}

.pulse{

    width:70px;

    height:70px;

    border-radius:50%;

    margin:auto;

    background:rgba(37,99,235,.15);

    animation:pulse 1.5s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(.8);

        opacity:1;

    }

    100%{

        transform:scale(1.8);

        opacity:0;

    }

}

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

#progressBar{

    position:fixed;

    top:0;

    left:0;

    height:4px;

    width:0;

    background:linear-gradient(
        to right,
        var(--primary),
        var(--secondary)
    );

    z-index:999;
}
/*==================================================
        STYLE.CSS PART 1.2
        HEADER + NAVBAR + HERO
==================================================*/

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

#header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

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

    backdrop-filter:blur(15px);

    z-index:1000;

    transition:.35s;

    border-bottom:1px solid rgba(0,0,0,.05);

}

body.dark #header{

    background:rgba(15,23,42,.92);

}

#header.scrolled{

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

}

/*==========================
        NAVBAR
==========================*/

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:80px;

}

/*==========================
        LOGO
==========================*/

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:1.4rem;

    font-weight:700;

    color:var(--primary);

}

.logo i{

    font-size:30px;

    color:var(--danger);

}

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

.nav-links{

    display:flex;

    align-items:center;

    gap:35px;

}

.nav-links a{

    position:relative;

    font-size:15px;

    font-weight:500;

    color:var(--text);

    transition:.3s;

}

body.dark .nav-links a{

    color:white;

}

.nav-links a:hover{

    color:var(--primary);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

.nav-links a:hover::after{

    width:100%;

}

/*==========================
        RIGHT MENU
==========================*/

.nav-right{

    display:flex;

    align-items:center;

    gap:12px;

}

.menu-btn{

    display:none;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:120px;

    position:relative;

    overflow:hidden;

    background:

    radial-gradient(circle at top right,
    rgba(37,99,235,.12),
    transparent 45%),

    radial-gradient(circle at bottom left,
    rgba(6,182,212,.12),
    transparent 40%);

}

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

.hero-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

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

.hero-tag{

    display:inline-block;

    background:#dbeafe;

    color:var(--primary);

    padding:8px 18px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.hero-content h1{

    font-size:3.5rem;

    line-height:1.2;

    margin-bottom:20px;

}

.hero-content p{

    max-width:520px;

    margin-bottom:35px;

}

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

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

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

.hero-stats{

    display:flex;

    gap:40px;

    flex-wrap:wrap;

}

.hero-stats h3{

    font-size:2rem;

    color:var(--primary);

}

.hero-stats span{

    color:var(--text-light);

    font-size:14px;

}

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

.hero-image{

    position:relative;

}

.hero-image img{

    border-radius:25px;

    box-shadow:var(--shadow);

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

}

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

.floating-card{

    position:absolute;

    width:180px;

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

    backdrop-filter:blur(12px);

    padding:18px;

    border-radius:18px;

    box-shadow:var(--shadow);

    animation:floatCard 3s ease-in-out infinite;

}

body.dark .floating-card{

    background:#1e293b;

}

.floating-card i{

    font-size:26px;

    color:var(--primary);

    margin-bottom:10px;

}

.floating-card h4{

    margin-bottom:6px;

}

.card1{

    top:30px;

    left:-40px;

}

.card2{

    right:-40px;

    top:180px;

}

.card3{

    left:40px;

    bottom:20px;

}

/*==========================
      FLOATING SHAPES
==========================*/

.shape{

    position:absolute;

    border-radius:50%;

    z-index:-1;

}

.shape.one{

    width:220px;

    height:220px;

    background:rgba(37,99,235,.08);

    top:80px;

    right:-80px;

}

.shape.two{

    width:140px;

    height:140px;

    background:rgba(6,182,212,.12);

    bottom:120px;

    left:-60px;

}

.shape.three{

    width:70px;

    height:70px;

    background:rgba(239,68,68,.12);

    top:45%;

    left:45%;

}

/*==========================
      ANIMATIONS
==========================*/

@keyframes floatImage{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

@keyframes floatCard{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

/*==========================
      MOBILE MENU
==========================*/

@media(max-width:992px){

    .menu-btn{

        display:flex;

    }

    .nav-links{

        position:fixed;

        top:80px;

        right:-100%;

        width:280px;

        height:calc(100vh - 80px);

        background:var(--card);

        flex-direction:column;

        justify-content:flex-start;

        align-items:flex-start;

        padding:40px 30px;

        gap:25px;

        transition:.35s;

        box-shadow:-10px 0 25px rgba(0,0,0,.08);

    }

    .nav-links.active{

        right:0;

    }

    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content p{

        margin:auto auto 35px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

    }

    .floating-card{

        display:none;

    }

}

@media(max-width:768px){

    .hero-content h1{

        font-size:2.5rem;

    }

}

@media(max-width:480px){

    .hero-content h1{

        font-size:2rem;

    }

}
/*==================================================
        STYLE.CSS PART 2.1
        DASHBOARD OVERVIEW
==================================================*/

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

.dashboard{

    background:var(--bg);

}

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

.dashboard-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

    margin-bottom:60px;

}

/*==========================
      DASHBOARD CARD
==========================*/

.dashboard-card{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    gap:20px;

    padding:28px;

    border-radius:20px;

    background:var(--card);

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

    box-shadow:var(--shadow);

    transition:.35s;

}

.dashboard-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

/*==========================
    CARD COLORS
==========================*/

.dashboard-card.primary{

    border-left:6px solid var(--primary);

}

.dashboard-card.success{

    border-left:6px solid var(--success);

}

.dashboard-card.warning{

    border-left:6px solid var(--warning);

}

.dashboard-card.danger{

    border-left:6px solid var(--danger);

}

/*==========================
        ICON
==========================*/

.card-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    color:#fff;

    font-size:30px;

    flex-shrink:0;

}

.primary .card-icon{

    background:linear-gradient(135deg,#2563eb,#60a5fa);

}

.success .card-icon{

    background:linear-gradient(135deg,#16a34a,#4ade80);

}

.warning .card-icon{

    background:linear-gradient(135deg,#f59e0b,#facc15);

}

.danger .card-icon{

    background:linear-gradient(135deg,#dc2626,#fb7185);

}

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

.card-content h3{

    font-size:2rem;

    margin-bottom:6px;

}

.card-content p{

    font-size:15px;

    margin-bottom:10px;

}

/*==========================
        TREND
==========================*/

.trend{

    display:inline-flex;

    align-items:center;

    gap:6px;

    font-size:13px;

    font-weight:600;

}

.positive{

    color:var(--success);

}

.warning-text{

    color:var(--warning);

}

.danger-text{

    color:var(--danger);

}

/*==========================
     HOVER EFFECT
==========================*/

.dashboard-card::before{

    content:"";

    position:absolute;

    top:-60px;

    right:-60px;

    width:120px;

    height:120px;

    border-radius:50%;

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

    transition:.35s;

}

.dashboard-card:hover::before{

    transform:scale(1.5);

}

/*==========================
     QUICK METRICS
==========================*/

.quick-metrics{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-bottom:60px;

}

/*==========================
      METRIC CARD
==========================*/

.metric-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px;

    border-radius:18px;

    background:var(--card);

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

    box-shadow:var(--shadow);

    transition:.35s;

}

.metric-card:hover{

    transform:translateY(-8px);

}

/*==========================
      METRIC ICON
==========================*/

.metric-icon{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(37,99,235,.12);

    color:var(--primary);

    font-size:24px;

}

.metric-card h4{

    font-size:1.5rem;

    margin-bottom:5px;

}

.metric-card span{

    color:var(--text-light);

    font-size:14px;

}

/*==========================
      SUMMARY GRID
==========================*/

.summary-wrapper{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

    gap:25px;

}

/*==========================
      SUMMARY CARD
==========================*/

.summary-card{

    padding:30px;

    border-radius:20px;

    background:var(--card);

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

    box-shadow:var(--shadow);

}

/*==========================
      CARD HEADER
==========================*/

.summary-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.live-dot{

    color:var(--success);

    font-size:14px;

    font-weight:600;

}

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

.summary-card ul{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.summary-card li{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--text);

}

.summary-card li i{

    color:var(--success);

}

/*==========================
      ALERTS
==========================*/

.alert-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:16px;

    margin-bottom:16px;

    border-radius:12px;

    font-weight:500;

}

.alert-item i{

    font-size:20px;

}

.alert-item.critical{

    background:#fee2e2;

    color:#dc2626;

}

.alert-item.warning{

    background:#fef3c7;

    color:#d97706;

}

.alert-item.success{

    background:#dcfce7;

    color:#15803d;

}

/*==========================
      RESPONSIVE
==========================*/

@media(max-width:768px){

    .summary-wrapper{

        grid-template-columns:1fr;

    }

    .dashboard-card{

        flex-direction:column;

        text-align:center;

    }

    .metric-card{

        flex-direction:column;

        text-align:center;

    }

}
/*==================================================
        STYLE.CSS PART 2.2
        ANALYTICS & CHARTS
==================================================*/

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

.analytics{

    background:linear-gradient(
        180deg,
        var(--bg),
        #eef4ff
    );

}

body.dark .analytics{

    background:#0f172a;

}

/*==========================
        CHART GRID
==========================*/

.chart-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));

    gap:25px;

    margin-bottom:30px;

}

/*==========================
        CHART CARD
==========================*/

.chart-card{

    background:var(--card);

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

    border-radius:22px;

    padding:25px;

    box-shadow:var(--shadow);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.chart-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

/*==========================
     DECORATION
==========================*/

.chart-card::before{

    content:"";

    position:absolute;

    top:-80px;

    right:-80px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(37,99,235,.05);

}

/*==========================
      CHART HEADER
==========================*/

.chart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.chart-header h3{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:18px;

}

.chart-header h3 i{

    color:var(--primary);

}

.chart-btn{

    padding:8px 18px;

    border-radius:30px;

    background:#eff6ff;

    color:var(--primary);

    font-weight:600;

    font-size:13px;

}

body.dark .chart-btn{

    background:#1e3a8a;

    color:white;

}

/*==========================
      CHART CANVAS
==========================*/

.chart-card canvas{

    width:100% !important;

    height:320px !important;

}

/*==========================
      INSIGHT GRID
==========================*/

.insight-wrapper{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

    gap:25px;

    margin:50px 0;

}

/*==========================
      INSIGHT CARD
==========================*/

.insight-card{

    background:var(--card);

    border-radius:22px;

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

    padding:30px;

    box-shadow:var(--shadow);

}

/*==========================
      TITLE
==========================*/

.insight-title{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

}

.insight-title i{

    font-size:28px;

    color:var(--primary);

}

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

.insight-card ul{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.insight-card li{

    position:relative;

    padding-left:22px;

    color:var(--text);

    line-height:1.7;

}

.insight-card li::before{

    content:"";

    position:absolute;

    left:0;

    top:11px;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

}

/*==========================
      PROGRESS BOX
==========================*/

.progress-box{

    margin-bottom:22px;

}

.progress-box span{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

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

.progress{

    width:100%;

    height:10px;

    background:#e2e8f0;

    border-radius:30px;

    overflow:hidden;

}

body.dark .progress{

    background:#334155;

}

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

.progress-bar{

    height:100%;

    border-radius:30px;

    transition:1s;

}

.progress-bar.healthy{

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

}

.progress-bar.warning{

    background:linear-gradient(
        90deg,
        #f59e0b,
        #facc15
    );

}

.progress-bar.danger{

    background:linear-gradient(
        90deg,
        #ef4444,
        #fb7185
    );

}

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

.activity-section{

    background:var(--card);

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

    border-radius:22px;

    padding:30px;

    box-shadow:var(--shadow);

}

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

.activity-header{

    margin-bottom:30px;

}

.activity-header h3{

    display:flex;

    align-items:center;

    gap:10px;

}

.activity-header i{

    color:var(--primary);

}

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

.timeline{

    position:relative;

    padding-left:35px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:9px;

    top:0;

    bottom:0;

    width:2px;

    background:#cbd5e1;

}

body.dark .timeline::before{

    background:#475569;

}

/*==========================
      ITEM
==========================*/

.timeline-item{

    position:relative;

    margin-bottom:35px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

/*==========================
      DOT
==========================*/

.dot{

    position:absolute;

    left:-31px;

    top:6px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--primary);

    border:4px solid white;

}

body.dark .dot{

    border-color:#1e293b;

}

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

.timeline-content{

    background:#f8fafc;

    padding:18px 20px;

    border-radius:15px;

}

body.dark .timeline-content{

    background:#1e293b;

}

.timeline-content h4{

    margin-bottom:8px;

}

.timeline-content p{

    margin-bottom:10px;

}

.timeline-content span{

    font-size:13px;

    color:var(--primary);

    font-weight:600;

}

/*==========================
      RESPONSIVE
==========================*/

@media(max-width:992px){

    .chart-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .chart-header{

        flex-direction:column;

        gap:15px;

        align-items:flex-start;

    }

    .chart-card canvas{

        height:260px !important;

    }

    .insight-wrapper{

        grid-template-columns:1fr;

    }

}
/*==================================================
        STYLE.CSS PART 3
    PATIENT TABLE • MODAL • FOOTER • RESPONSIVE
==================================================*/

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

.filter-container{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    align-items:center;

    justify-content:space-between;

    background:var(--card);

    padding:20px;

    border-radius:18px;

    box-shadow:var(--shadow);

    margin-bottom:25px;

}

.search-box{

    flex:1;

    min-width:280px;

    position:relative;

}

.search-box i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:var(--text-light);

}

.search-box input{

    width:100%;

    padding:14px 18px 14px 48px;

    border-radius:50px;

    background:var(--bg);

}

.filter-container select{

    padding:13px 18px;

    border-radius:50px;

    background:var(--bg);

    cursor:pointer;

}

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

.table-actions{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:25px;

}

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

.table-wrapper{

    overflow:auto;

    background:var(--card);

    border-radius:20px;

    box-shadow:var(--shadow);

}

table{

    width:100%;

    border-collapse:collapse;

    min-width:1100px;

}

thead{

    background:var(--primary);

    color:#fff;

}

th{

    padding:18px;

    text-align:left;

    font-size:15px;

}

td{

    padding:18px;

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

}

tbody tr{

    transition:.3s;

}

tbody tr:hover{

    background:rgba(37,99,235,.05);

}

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

.status{

    padding:8px 14px;

    border-radius:30px;

    color:#fff;

    font-size:13px;

    font-weight:600;

}

.status.healthy{

    background:var(--success);

}

.status.observation{

    background:var(--warning);

}

.status.critical{

    background:var(--danger);

}

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

.action-btn{

    width:38px;

    height:38px;

    border-radius:50%;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    margin-right:8px;

    transition:.3s;

}

.edit-btn{

    background:var(--primary);

}

.delete-btn{

    background:var(--danger);

}

.action-btn:hover{

    transform:scale(1.1);

}

/*==========================
      PAGINATION
==========================*/

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:35px;

}

.pagination button{

    width:45px;

    height:45px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

}

#pageInfo{

    font-weight:600;

}

/*==========================
        MODAL
==========================*/

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    z-index:5000;

}

.modal.active{

    display:flex;

}

.modal-content{

    width:100%;

    max-width:800px;

    background:var(--card);

    border-radius:20px;

    padding:30px;

    animation:popup .35s ease;

}

@keyframes popup{

    from{

        transform:translateY(30px);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

#closeModal{

    font-size:30px;

    cursor:pointer;

}

.form-grid{

    display:grid;

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

    gap:20px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:8px;

    font-weight:600;

}

.form-group input,
.form-group select{

    padding:14px;

    border-radius:10px;

    background:var(--bg);

}

.modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:15px;

    margin-top:30px;

}

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

.report-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

}

.report-card{

    text-align:center;

    padding:35px;

    background:var(--card);

    border-radius:20px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.report-card:hover{

    transform:translateY(-8px);

}

.report-card i{

    font-size:45px;

    color:var(--primary);

    margin-bottom:20px;

}

.report-card h3{

    margin-bottom:15px;

}

.report-card p{

    margin-bottom:25px;

}

/*==========================
      CONTACT
==========================*/

.contact-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

}

.contact-card{

    background:var(--card);

    text-align:center;

    padding:35px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.contact-card i{

    font-size:40px;

    color:var(--primary);

    margin-bottom:18px;

}

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

footer{

    background:#0f172a;

    color:#cbd5e1;

    margin-top:100px;

}

.footer-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:40px;

    padding:70px 0;

}

.footer-grid h2,
.footer-grid h4{

    color:#fff;

    margin-bottom:18px;

}

.footer-grid ul li{

    margin:12px 0;

}

.footer-grid a{

    color:#cbd5e1;

    transition:.3s;

}

.footer-grid a:hover{

    color:#fff;

}

.social-links{

    display:flex;

    gap:12px;

}

.social-links a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#1e293b;

    border-radius:50%;

}

.footer-bottom{

    text-align:center;

    padding:20px;

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

}

/*==========================
      TOAST
==========================*/

.toast{

    position:fixed;

    top:30px;

    right:30px;

    background:var(--success);

    color:#fff;

    padding:16px 22px;

    border-radius:12px;

    display:flex;

    align-items:center;

    gap:10px;

    transform:translateX(150%);

    transition:.35s;

    z-index:6000;

}

.toast.show{

    transform:translateX(0);

}

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

#scrollTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:50px;

    height:50px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

#scrollTop.show{

    opacity:1;

    visibility:visible;

}

/*==========================
      RESPONSIVE
==========================*/

@media(max-width:992px){

    .form-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .filter-container{

        flex-direction:column;

        align-items:stretch;

    }

    .table-actions{

        flex-direction:column;

    }

    .modal-content{

        padding:20px;

    }

    .footer-grid{

        text-align:center;

    }

    .social-links{

        justify-content:center;

    }

}

@media(max-width:480px){

    .section{

        padding:70px 0;

    }

    .pagination{

        flex-direction:column;

        gap:10px;

    }

    .report-card,

    .contact-card{

        padding:25px;

    }

}