/*=================================
        ArenaOS
        DASHBOARD 5.0
=================================*/



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

.hero-visual{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    perspective:1800px;

}



/*=================================
        WINDOW
=================================*/

.dashboard-window{

    position:relative;

    width:980px;

    height:650px;

    display:grid;

    grid-template-columns:230px 1fr;

    overflow:hidden;

    border-radius:32px;

    background:#0B1220;

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

    backdrop-filter:blur(24px);

    box-shadow:

        0 60px 120px rgba(0,0,0,.45),

        0 0 80px rgba(25,19,184,.12);

}



/*=================================
        REFLECTION
=================================*/

.dashboard-window::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent 35%,

        transparent 70%,

        rgba(255,255,255,.02)

    );

    pointer-events:none;

}



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

.dashboard-sidebar{

    display:flex;

    flex-direction:column;

    padding:28px;

    background:#08101D;

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

}



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

.sidebar-logo{

    display:flex;

    justify-content:center;

    margin-bottom:42px;

}

.sidebar-logo img{

    width:150px;

}



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

.sidebar-nav{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.sidebar-nav a{

    display:flex;

    align-items:center;

    height:48px;

    padding:0 18px;

    border-radius:14px;

    color:var(--text-muted);

    font-size:.94rem;

    font-weight:500;

    transition:all .30s ease;

    cursor:pointer;

}

.sidebar-nav a:hover{

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

    color:#fff;

}

.sidebar-nav a.active{

    color:#fff;

    background:linear-gradient(

        135deg,

        rgba(25,19,184,.35),

        rgba(59,54,232,.18)

    );

}



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

.dashboard-main{

    display:flex;

    flex-direction:column;

    padding:28px;

}



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

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:28px;

}

.dashboard-header small{

    display:block;

    color:var(--text-muted);

    margin-bottom:6px;

}

.dashboard-header h3{

    font-size:1.55rem;

    font-weight:700;

}



/*=================================
        PROFILE
=================================*/

.dashboard-profile{

    display:flex;

    align-items:center;

    gap:18px;

}

.dashboard-online{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22C55E;

    box-shadow:

        0 0 18px #22C55E;

}

.dashboard-avatar{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#fff;

    font-size:.85rem;

    font-weight:700;

    background:linear-gradient(

        135deg,

        #1913B8,

        #4F46E5

    );

}



/*=================================
        KPI GRID
=================================*/

.dashboard-kpis{

    display:grid;

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

    gap:18px;

    margin-bottom:24px;

}



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

.kpi-card{

    position:relative;

    padding:22px;

    border-radius:20px;

    background:#121C2D;

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

    overflow:hidden;

    transition:.35s;

}

.kpi-card:hover{

    transform:translateY(-6px);

    border-color:rgba(59,54,232,.25);

}

.kpi-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:3px;

    background:linear-gradient(

        90deg,

        #1913B8,

        #4F46E5

    );

}

.kpi-card span{

    display:block;

    color:var(--text-muted);

    margin-bottom:12px;

    font-size:.88rem;

}

.kpi-card strong{

    display:block;

    margin-bottom:8px;

    font-size:1.9rem;

    font-weight:800;

}

.kpi-card small{

    color:#22C55E;

    font-size:.8rem;

}
/*=================================
        CONTENT GRID
=================================*/

.dashboard-grid{

    display:grid;

    grid-template-columns:1.65fr 1fr;

    grid-template-rows:260px 1fr;

    gap:20px;

    flex:1;

}


/*=================================
        BASE CARD
=================================*/

.dashboard-card{

    position:relative;

    padding:24px;

    border-radius:22px;

    background:#121C2D;

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

    overflow:hidden;

    transition:.35s;

}

.dashboard-card:hover{

    transform:translateY(-6px);

    border-color:rgba(79,70,229,.30);

    box-shadow:

        0 20px 45px rgba(0,0,0,.25);

}


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

.card-title{

    margin-bottom:22px;

    font-size:1rem;

    font-weight:600;

    color:#fff;

}


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

.dashboard-chart-card{

    display:flex;

    flex-direction:column;

}

.chart-bars{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:10px;

    flex:1;

}

.chart-bars span{

    flex:1;

    border-radius:12px 12px 4px 4px;

    background:linear-gradient(

        180deg,

        #6B7CFF,

        #3B36E8,

        #1913B8

    );

    box-shadow:

        0 12px 25px rgba(59,54,232,.30);

    transition:.35s;

}

.chart-bars span:hover{

    filter:brightness(1.2);

    transform:translateY(-6px);

}


/*=================================
        CALENDAR
=================================*/

.calendar-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

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

}

.calendar-item:last-child{

    border-bottom:none;

}

.calendar-item strong{

    color:#fff;

    font-size:.92rem;

}

.calendar-item span{

    color:var(--text-muted);

}


/*=================================
        RESERVATIONS
=================================*/

.reservation-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

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

}

.reservation-row:last-child{

    border-bottom:none;

}

.reservation-row strong{

    font-size:.95rem;

    font-weight:600;

}

.reservation-row small{

    padding:6px 12px;

    border-radius:999px;

    background:rgba(34,197,94,.12);

    color:#22C55E;

    font-size:.72rem;

    font-weight:700;

}


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

.activity-item{

    position:relative;

    padding:16px 0 16px 24px;

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

    color:var(--text-light);

    transition:.3s;

}

.activity-item:last-child{

    border-bottom:none;

}

.activity-item::before{

    content:"";

    position:absolute;

    left:0;

    top:22px;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#4F46E5;

    box-shadow:

        0 0 14px #4F46E5;

}

.activity-item:hover{

    padding-left:34px;

}


/*=================================
        GRID POSITIONS
=================================*/

.dashboard-chart-card{

    grid-column:1;

    grid-row:1;

}

.dashboard-grid>.dashboard-card:nth-child(2){

    grid-column:2;

    grid-row:1;

}

.dashboard-grid>.dashboard-card:nth-child(3){

    grid-column:1;

    grid-row:2;

}

.dashboard-grid>.dashboard-card:nth-child(4){

    grid-column:2;

    grid-row:2;

}
/*=================================
        PREMIUM EFFECTS
=================================*/

.dashboard-window{

    transform:rotateY(-8deg) rotateX(4deg);

    transform-style:preserve-3d;

    transition:.5s ease;

}

.hero-visual:hover .dashboard-window{

    transform:rotateY(-3deg) rotateX(1deg) scale(1.015);

}


/*=================================
        BACK LIGHT
=================================*/

.dashboard-window::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-260px;

    right:-220px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(79,70,229,.22),

            transparent 70%

        );

    filter:blur(80px);

    pointer-events:none;

}


/*=================================
        GLASS SHINE
=================================*/

.dashboard-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.06),

            transparent 35%,

            transparent 65%,

            rgba(255,255,255,.02)

        );

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.dashboard-card:hover::before{

    opacity:1;

}


/*=================================
        KPI SHINE
=================================*/

.kpi-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    transform:skewX(-25deg);

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.12),

            transparent

        );

    transition:.8s;

}

.kpi-card:hover::after{

    left:150%;

}


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

.chart-bars span{

    animation:barsGrow .9s cubic-bezier(.22,1,.36,1) both;

}

.chart-bars span:nth-child(1){animation-delay:.05s;}
.chart-bars span:nth-child(2){animation-delay:.10s;}
.chart-bars span:nth-child(3){animation-delay:.15s;}
.chart-bars span:nth-child(4){animation-delay:.20s;}
.chart-bars span:nth-child(5){animation-delay:.25s;}
.chart-bars span:nth-child(6){animation-delay:.30s;}
.chart-bars span:nth-child(7){animation-delay:.35s;}


/*=================================
        ONLINE
=================================*/

.dashboard-online{

    animation:onlinePulse 2s infinite;

}


/*=================================
        AVATAR
=================================*/

.dashboard-avatar{

    transition:.35s;

}

.dashboard-avatar:hover{

    transform:rotate(8deg) scale(1.08);

}


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

.sidebar-nav a{

    position:relative;

    overflow:hidden;

}

.sidebar-nav a::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.05),

            transparent

        );

    transition:.7s;

}

.sidebar-nav a:hover::before{

    left:140%;

}


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

.dashboard-window{

    animation:dashboardFloat 7s ease-in-out infinite;

}


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

@keyframes dashboardFloat{

    0%{

        transform:rotateY(-8deg) rotateX(4deg) translateY(0);

    }

    50%{

        transform:rotateY(-8deg) rotateX(4deg) translateY(-10px);

    }

    100%{

        transform:rotateY(-8deg) rotateX(4deg) translateY(0);

    }

}

@keyframes onlinePulse{

    0%{

        box-shadow:0 0 0 0 rgba(34,197,94,.6);

    }

    70%{

        box-shadow:0 0 0 12px rgba(34,197,94,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(34,197,94,0);

    }

}

@keyframes barsGrow{

    from{

        transform:scaleY(0);

        transform-origin:bottom;

    }

    to{

        transform:scaleY(1);

        transform-origin:bottom;

    }

}


/*=================================
        PREMIUM SHADOW
=================================*/

.hero-glow{

    opacity:.9;

    filter:blur(150px);

}