/* =========================================
   APP LAYOUT PREMIUM LIGHT
========================================= */

.app-layout{

    display:flex;

    min-height:100vh;

    background:
        radial-gradient(circle at top, rgba(212,175,55,.08), transparent 35%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

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

.sidebar{

    width:270px;

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

    backdrop-filter:blur(14px);

    border-right:1px solid rgba(15,23,42,.06);

    padding:1.5rem 1rem;

    flex-shrink:0;

    display:flex;

    flex-direction:column;

    box-shadow:
        8px 0 30px rgba(15,23,42,.03);

    transition:all .3s ease;
}

/* =========================================
   BRAND
========================================= */

.sidebar-brand{

    font-weight:800;

    font-size:1.15rem;

    margin-bottom:2rem;

    padding:0 .75rem;

    color:#0f172a;

    letter-spacing:-.5px;
}

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

.sidebar nav{

    display:flex;

    flex-direction:column;

    gap:.45rem;

    width:100%;
}

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

.sidebar nav a{

    display:flex;

    align-items:center;

    gap:.75rem;

    width:100%;

    padding:.9rem 1rem;

    border-radius:14px;

    color:#64748b;

    text-decoration:none;

    font-weight:500;

    transition:all .25s ease;
}

.sidebar nav a:hover{

    background:rgba(212,175,55,.10);

    color:#0f172a;

    transform:translateX(3px);
}

.sidebar nav a.active{

    background:linear-gradient(
        135deg,
        rgba(212,175,55,.18),
        rgba(245,215,110,.12)
    );

    color:#0f172a;

    font-weight:700;

    border:1px solid rgba(212,175,55,.15);

    box-shadow:
        0 10px 25px rgba(212,175,55,.10);
}

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

.main-content{

    flex:1;

    padding:2rem;

    overflow-x:hidden;
}

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

.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:2rem;

    gap:1rem;
}

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

.navbar h1{

    color:#0f172a;

    font-size:2rem;

    font-weight:800;

    letter-spacing:-1px;
}

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

.dashboard-grid{

    display:grid;

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

    gap:1.5rem;
}

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

.dashboard-grid .card{

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

    border:1px solid rgba(15,23,42,.06);

    border-radius:24px;

    padding:1.5rem;

    transition:.3s ease;

    backdrop-filter:blur(10px);

    box-shadow:
        0 10px 30px rgba(15,23,42,.05);
}

.dashboard-grid .card:hover{

    transform:translateY(-4px);

    border-color:rgba(212,175,55,.20);

    box-shadow:
        0 20px 40px rgba(15,23,42,.08),
        0 0 25px rgba(212,175,55,.08);
}

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

.dashboard-grid .card h3{

    margin-bottom:.7rem;

    font-size:1rem;

    font-weight:700;

    color:#475569;
}

/* =========================================
   STAT
========================================= */

.stat{

    font-size:2.4rem;

    font-weight:800;

    color:#b8860b;

    line-height:1;

    letter-spacing:-1px;
}

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

.sidebar::-webkit-scrollbar,
.main-content::-webkit-scrollbar{

    width:6px;
}

.sidebar::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb{

    background:rgba(212,175,55,.35);

    border-radius:999px;
}

/* =========================================
   TABLET
========================================= */

@media(max-width:992px){

    .sidebar{

        width:230px;
    }

    .main-content{

        padding:1.5rem;
    }

    .navbar h1{

        font-size:1.7rem;
    }
}

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

@media(max-width:768px){

    .app-layout{

        display:block;
    }

    /* SIDEBAR */

    .sidebar{

        position:fixed;

        top:0;
        left:0;

        width:280px;

        max-width:85vw;

        height:100vh;

        z-index:2000;

        background:#ffffff;

        border-right:1px solid rgba(15,23,42,.06);

        padding:80px 1rem 1rem;

        overflow-y:auto;

        transform:translateX(-100%);

        transition:transform .3s ease;

        box-shadow:
            20px 0 40px rgba(15,23,42,.08);
    }

    /* OPEN */

    .sidebar.open{

        transform:translateX(0);
    }

    /* BRAND */

    .sidebar-brand{

        margin-bottom:1.2rem;

        padding:0 .4rem;

        font-size:1rem;
    }

    /* NAV */

    .sidebar nav{

        display:flex;

        flex-direction:column;

        gap:.5rem;

        width:100%;
    }

    /* LINKS */

    .sidebar nav a{

        width:100%;

        display:flex;

        align-items:center;

        white-space:normal;

        padding:.9rem 1rem;

        border-radius:14px;

        font-size:.95rem;
    }

    /* MAIN */

    .main-content{

        width:100%;

        padding:1rem;

        padding-top:80px;

        overflow-x:hidden;
    }

    /* NAVBAR */

    .navbar{

        flex-direction:column;

        align-items:flex-start;

        margin-bottom:1.5rem;
    }

    .navbar h1{

        font-size:1.5rem;
    }

    /* GRID */

    .dashboard-grid{

        grid-template-columns:1fr;

        gap:1rem;
    }

    .dashboard-grid .card{

        border-radius:20px;

        padding:1.3rem;
    }

    .stat{

        font-size:2rem;
    }
}

/* =========================================
   MOBILE SMALL
========================================= */

@media(max-width:480px){

    .sidebar{

        width:260px;

        padding:70px .8rem 1rem;
    }

    .sidebar nav a{

        padding:.8rem .9rem;

        font-size:.9rem;
    }

    .main-content{

        padding:.9rem;

        padding-top:75px;
    }

    .navbar h1{

        font-size:1.35rem;
    }

    .dashboard-grid .card{

        padding:1.1rem;

        border-radius:18px;
    }

    .stat{

        font-size:1.8rem;
    }
}