/* ==========================================
   Dashboard Root Variables
========================================== */

:root{

    /* ======================================
       Brand Colors
    ====================================== */

    --dashboard-primary:#0A9396;
    --dashboard-primary-dark:#0B7285;
    --dashboard-secondary:#38BDF8;

    --dashboard-success:#16A34A;
    --dashboard-warning:#D97706;
    --dashboard-danger:#DC2626;

    --dashboard-purple:#7C3AED;
    --dashboard-blue:#0284C7;

    /* ======================================
       Text
    ====================================== */

    --dashboard-title:#0B3C5D;
    --dashboard-text:#334155;
    --dashboard-muted:#64748B;
    --dashboard-light:#94A3B8;

    /* ======================================
       Background
    ====================================== */

    --dashboard-bg:#F6FAFC;
    --dashboard-surface:#FFFFFF;
    --dashboard-card:#FFFFFF;

    /* ======================================
       Border
    ====================================== */

    --dashboard-border:#E2E8F0;
    --dashboard-border-light:#EEF2F6;

    /* ======================================
       Hero
    ====================================== */

    --hero-gradient:
        linear-gradient(
            135deg,
            #0A9396 0%,
            #0891B2 55%,
            #38BDF8 100%
        );

    /* ======================================
       Button
    ====================================== */

    --dashboard-btn-gradient:
        linear-gradient(
            135deg,
            #0A9396,
            #0891B2
        );

    --dashboard-btn-gradient-hover:
        linear-gradient(
            135deg,
            #087C80,
            #0B7285
        );

    /* ======================================
       Badge
    ====================================== */

    --dashboard-badge-bg:#E6FFFA;
    --dashboard-badge-color:#0A9396;

    /* ======================================
       Radius
    ====================================== */

    --dashboard-radius-xs:8px;
    --dashboard-radius-sm:12px;
    --dashboard-radius-md:16px;
    --dashboard-radius-lg:22px;
    --dashboard-radius-xl:30px;

    /* ======================================
       Shadow
    ====================================== */

    --dashboard-shadow-sm:
        0 4px 12px rgba(15,23,42,.05);

    --dashboard-shadow-md:
        0 10px 28px rgba(15,23,42,.08);

    --dashboard-shadow-lg:
        0 20px 55px rgba(15,23,42,.10);

    --dashboard-shadow-hover:
        0 25px 70px rgba(10,147,150,.18);

    /* ======================================
       Transition
    ====================================== */

    --dashboard-transition:
        all .30s ease;

    /* ======================================
       Layout
    ====================================== */

    --dashboard-max-width:1450px;

    --dashboard-padding:35px;

    --dashboard-gap:32px;

    --dashboard-section-gap:40px;

    /* ======================================
       Hero
    ====================================== */

    --hero-padding:45px;

    --hero-title-size:2.8rem;

    --hero-text-size:16px;

    /* ======================================
       Toolbar
    ====================================== */

    --toolbar-height:72px;

    /* ======================================
       Input
    ====================================== */

    --dashboard-input-height:56px;

    /* ======================================
       Table
    ====================================== */

    --table-header-bg:#F8FAFC;

    --table-hover:#F7FCFC;

    /* ======================================
       Z Index
    ====================================== */

    --dashboard-dropdown-z:999;
    --dashboard-popup-z:1050;

}


/* ==========================================
   Dashboard Background
========================================== */

.dashboard-wrapper{

    width:100%;

    max-width:var(--dashboard-max-width);

    margin:auto;

}


/* ==========================================
   Common Animation
========================================== */

.dashboard-card,
.dashboard-content-card{

    animation:dashboardFade .45s ease;

}


@keyframes dashboardFade{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}