/* ==========================================
            ANIMATION CLASSES
========================================== */

.fade-in{

    animation:fadeIn .6s ease forwards;

}

.slide-left{

    animation:slideLeft .6s ease forwards;

}

.slide-right{

    animation:slideRight .6s ease forwards;

}

.zoom-in{

    animation:zoomIn .4s ease forwards;

}

.float{

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

}

.pulse{

    animation:pulse 1.8s infinite;

}

.glow{

    animation:glow 2s infinite;

}

.rotate{

    animation:rotate 1.2s linear infinite;

}

.bounce{

    animation:bounce 1.5s infinite;

}

/* ==========================================
            HOVER EFFECTS
========================================== */

.hover-lift{

    transition:.35s ease;

}

.hover-lift:hover{

    transform:translateY(-8px);

}

.hover-scale{

    transition:.35s ease;

}

.hover-scale:hover{

    transform:scale(1.03);

}

.hover-rotate{

    transition:.35s ease;

}

.hover-rotate:hover{

    transform:rotate(5deg);

}

/* ==========================================
            BUTTON RIPPLE
========================================== */

.btn{

    position:relative;

    overflow:hidden;

}

.btn::after{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:0;

    height:0;

    border-radius:50%;

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

    transform:translate(-50%,-50%);

    transition:width .5s,height .5s;

}

.btn:active::after{

    width:260px;

    height:260px;

}

/* ==========================================
            CARD ENTRY ANIMATION
========================================== */

.dashboard-card,
.progress-card,
.entry-card,
.records-table-card,
.summary-card,
.chart-card{

    animation:fadeIn .7s ease;

}

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

.table tbody tr{

    animation:fadeIn .45s ease;

}

/* ==========================================
            FAB
========================================== */

.fab{

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

}

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

.progress-fill{

    transition:stroke-dashoffset 1.2s ease;

}

/* ==========================================
            LOADING SPINNER
========================================== */

.spinner-border{

    animation:rotate .8s linear infinite;

}


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

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

/* ==========================================
            DARK THEME (DEFAULT)
========================================== */

:root{

    /* Brand Colors */

    --primary:#6366F1;
    --primary-light:#818CF8;
    --primary-dark:#4338CA;

    /* Status Colors */

    --success:#22C55E;
    --warning:#F59E0B;
    --danger:#EF4444;
    --info:#06B6D4;

    /* Background */

    --bg:#0F172A;
    --bg-secondary:#111827;
    --surface:#1E293B;
    --surface-light:#334155;

    /* Glass Card */

    --card:rgba(255,255,255,.08);
    --card-hover:rgba(255,255,255,.12);

    /* Text */

    --text:#F8FAFC;
    --text-light:#CBD5E1;
    --text-muted:#94A3B8;

    /* Border */

    --border:rgba(255,255,255,.08);

    /* Shadows */

    --shadow-sm:
        0 4px 12px rgba(0,0,0,.18);

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

    --shadow-lg:
        0 25px 60px rgba(0,0,0,.35);

    /* Radius */

    --radius-sm:10px;
    --radius:20px;
    --radius-lg:30px;

    /* Spacing */

    --space-xs:6px;
    --space-sm:12px;
    --space-md:20px;
    --space-lg:30px;
    --space-xl:40px;

    /* Animation */

    --transition:.35s ease;

    /* Sidebar */

    --sidebar-width:270px;

    /* Navbar */

    --navbar-height:80px;

    /* Progress Ring */

    --progress-size:220px;
    --progress-radius:90;

}

/* ==========================================
            LIGHT THEME
========================================== */

body.light-theme{

    --bg:#F1F5F9;
    --bg-secondary:#FFFFFF;

    --surface:#FFFFFF;
    --surface-light:#E2E8F0;

    --card:rgba(255,255,255,.9);
    --card-hover:#FFFFFF;

    --text:#0F172A;
    --text-light:#475569;
    --text-muted:#64748B;

    --border:#E2E8F0;

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.08);

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

    --shadow-lg:
        0 20px 40px rgba(0,0,0,.18);

}

/* ==========================================
            GRADIENTS
========================================== */

:root{

    --gradient-primary:
        linear-gradient(
            135deg,
            #6366F1,
            #818CF8
        );

    --gradient-success:
        linear-gradient(
            135deg,
            #22C55E,
            #16A34A
        );

    --gradient-warning:
        linear-gradient(
            135deg,
            #F59E0B,
            #D97706
        );

    --gradient-danger:
        linear-gradient(
            135deg,
            #EF4444,
            #DC2626
        );

    --gradient-info:
        linear-gradient(
            135deg,
            #06B6D4,
            #0891B2
        );

    --gradient-purple:
        linear-gradient(
            135deg,
            #8B5CF6,
            #7C3AED
        );

}

/* ==========================================
            Z-INDEX
========================================== */

:root{

    --z-sidebar:1000;
    --z-navbar:1010;
    --z-fab:1050;
    --z-toast:1080;
    --z-modal:1090;
    --z-loader:1100;

}