body{margin:0; padding:0}

/* Layout */
.csd-wrapper{
    display:flex;
    height:100vh;
}

/* Sidebar */
.csd-sidebar{
    width:240px;
    background:#0f172a;
    color:#fff;
    padding:15px;
    transition:0.3s;
}

.csd-sidebar.collapsed {
    width: 70px;
}
/* Hide text when collapsed */
.csd-sidebar.collapsed h3,
.csd-sidebar.collapsed a span {
    display: none;
}
/* Center icons */
.csd-sidebar.collapsed a {
    text-align: center;
}

/* Notification popup */
#csd-notify-box {
    position: absolute;
    top: 50px;
    right: 20px;
    background: #fff;
    color: #000;
    padding: 15px;
    border-radius: 10px;
    display: none;
    width: 200px;
    z-index: 999;
}

/* User */
.csd-user-box{text-align:center;margin-bottom:20px;}

.csd-user-box img,
.csd-avatar{
    width:70px;
    height:70px;
    border-radius:50%;
    object-fit:cover;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
}
.csd-avatar h3{
    color:#fff !important;
}

/* Menu */
.csd-sidebar ul{padding:0;margin:0;list-style:none}

.csd-sidebar a{
    display:block;
    padding:12px;
    color:#fff;
    text-decoration:none;
    width:100%;
}

.csd-sidebar a:hover,
.csd-sidebar a.active{
    background:#3aa6b9;
}

/* Logout */
.csd-logout{
    margin-top:20px;
    display:block;
    background:red;
    padding:10px;
    text-align:center;
}

/* Content */
.csd-content{
    flex:1;
    background:#e9f8f9;
    padding:10px;
}

/* Topbar */
.csd-topbar{
    display:flex;
    justify-content:space-between;
}
/* Button */
.csd-btn {
    cursor: pointer;
    padding: 8px 12px;
    background: #1e293b;
    border-radius: 6px;
}
/* Top actions */
.csd-top-actions {
    display: flex;
    gap: 10px;
}

/* Cards */
.csd-cards{
    display:flex;
    gap:10px;
    margin-top:10px;
}

.csd-card{
    background:#fff;
    padding:20px;
    border-radius:10px;
    flex:1;
}

/* DARK DEFAULT */
.csd-content {
    background: #020617;
    color: #fff;
}

/* LIGHT MODE */
.light-mode .csd-content {
    background: #f1f5f9;
    color: #000;
}

.light-mode .csd-card {
    background: #fff;
    color: #000;
}

.light-mode .csd-sidebar {
    background: #e2e8f0;
    color: #000;
}

.light-mode .csd-sidebar a {
    color: #000;
}

.csd-form{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-width:400px;
}

.csd-form input,
.csd-form textarea{
    padding:10px;
}

.csd-form button{
    padding:10px;
    background:#2563eb;
    color:#fff;
    border:none;
}