/* ==========================================================
   Reset
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==========================================================
   Theme
========================================================== */

:root{

    --background:#f4f7fb;
    --surface:#ffffff;

    --text:#202636;
    --text-secondary:#667085;
    --text-muted:#98A2B3;

    --border:#e4e7ec;

    --primary:#7C5CFF;
    --primary-dark:#5A38FF;

}

body.dark{

    --background:#111827;
    --surface:#1f2937;

    --text:#f8fafc;
    --text-secondary:#cbd5e1;
    --text-muted:#94a3b8;

    --border:#374151;

}


html,
body{

    height:100%;

    font-family:Inter,sans-serif;

    background:var(--background);

    color:var(--text);

    transition:
        background .25s ease,
        color .25s ease;

}

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

.app{
    display:flex;
    min-height:100vh;
}

.main{

    flex:1;

    background:var(--background);

    transition:background .25s ease;

}

/* ==========================================================
   Sidebar
========================================================== */

.sidebar{

    width:280px;

    background:var(--surface);

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

    display:flex;

    flex-direction:column;

    padding:28px 20px;

}

/* Logo */

.sidebar-logo{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:inherit;

    margin-bottom:42px;

}

.logo-icon{

    width:48px;
    height:48px;

    border-radius:16px;

    background:linear-gradient(135deg,#7C5CFF,#5A38FF);

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 12px 28px rgba(124,92,255,.28);

    flex-shrink:0;

}

.logo-icon svg{

    width:26px;
    height:26px;

}

.logo-icon line{

    stroke:#ffffff;
    stroke-width:4;
    stroke-linecap:round;

}

.logo-icon circle{

    fill:#ffffff;

}
.logo-text h1{

    font-size:20px;

    font-weight:700;

    color:var(--text);

}

/* Menu */

.nav-section{

    margin-bottom:34px;

}

.nav-label{

    display:block;

    margin-bottom:12px;

    color:#98A2B3;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.nav-item{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#475467;

    padding:12px 14px;

    border-radius:14px;

    margin-bottom:6px;

    transition:.2s;

    font-weight:500;

}

.nav-item:hover{

    background:#f5f7fb;

}

.nav-item.active{

    background:linear-gradient(135deg,#7C5CFF,#5A38FF);

    color:white;

    box-shadow:0 8px 20px rgba(124,92,255,.20);

}

.sidebar-footer{

    margin-top:auto;

    padding-top:22px;

    border-top:1px solid #eceff5;

}

/* ==========================================================
   Topbar
========================================================== */

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 36px;

    background:var(--background);

    transition:background .25s ease;

}

.topbar-left h2{

    font-size:30px;

    font-weight:700;

    color:var(--text);

    margin-bottom:4px;

}

.topbar-left p{

    color:var(--text-secondary);

    font-size:15px;

}

.topbar-right{

    display:flex;

    align-items:center;

    gap:16px;

}

/* Search */

.search-box{

    display:flex;

    align-items:center;

    gap:10px;

    background:var(--surface);

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

    border-radius:14px;

    padding:12px 16px;

    width:360px;

    transition:.2s;

}

.search-box:focus-within{

    border-color:#7C5CFF;

    box-shadow:0 0 0 4px rgba(124,92,255,.10);

}

.search-box i{

    color:#98A2B3;

}

.search-box input{

    border:none;

    outline:none;

    background:transparent;

    width:100%;

    font-size:15px;
	
	color:var(--text);

}

/* Theme button */

.theme-toggle{

    width:48px;

    height:48px;

    border:none;

    border-radius:14px;

    background:#ffffff;

    border:1px solid #e4e7ec;

    cursor:pointer;

    transition:.2s;

}

.theme-toggle:hover{

    background:#7C5CFF;

    color:white;

    border-color:#7C5CFF;

}

body {
    outline: 10px solid red !important;
}