:root {

    --sidebar-width: 270px;

    --sidebar-background: #17223b;

    --sidebar-hover: #243354;

    --background: #f5f7fb;

    --card-background: #ffffff;

    --text-primary: #1d2738;

    --text-secondary: #7b8798;

    --border-color: #e8edf4;

}


* {

    box-sizing: border-box;

}


body {

    margin: 0;

    background: var(--background);

    color: var(--text-primary);

    font-family:
        Inter,
        Segoe UI,
        Arial,
        sans-serif;

}


.app-layout {

    display: flex;

    min-height: 100vh;

}


.sidebar {

    width: var(--sidebar-width);

    background: var(--sidebar-background);

    color: white;

    position: fixed;

    left: 0;

    top: 0;

    bottom: 0;

    overflow-y: auto;

}


.brand {

    height: 90px;

    padding: 20px 22px;

    display: flex;

    align-items: center;

    gap: 14px;

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

}


.brand-icon {

    width: 42px;

    height: 42px;

    border-radius: 11px;

    background: #3764ff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 21px;

}


.brand-title {

    font-weight: 700;

    font-size: 17px;

}


.brand-subtitle {

    color: #9eabc2;

    font-size: 12px;

    margin-top: 3px;

}


.sidebar-nav {

    padding: 20px 15px;

}


.nav-item {

    display: flex;

    align-items: center;

    gap: 13px;

    min-height: 46px;

    margin-bottom: 5px;

    padding: 10px 14px;

    border-radius: 9px;

    color: #c1cada;

    text-decoration: none;

    font-size: 14px;

}


.nav-item i {

    width: 21px;

    font-size: 18px;

}


.nav-item:hover {

    background: var(--sidebar-hover);

    color: white;

}


.nav-item.active {

    background: #3764ff;

    color: white;

}


.nav-divider {

    height: 1px;

    margin: 16px 5px;

    background:
        rgba(255,255,255,0.08);

}


.main-content {

    width:
        calc(100% - var(--sidebar-width));

    margin-left:
        var(--sidebar-width);

}


.topbar {

    min-height: 90px;

    background: white;

    padding: 19px 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

}


.page-title {

    margin: 0;

    font-size: 25px;

    font-weight: 700;

}


.page-subtitle {

    color: var(--text-secondary);

    margin-top: 5px;

    font-size: 14px;

}


.user-area {

    display: flex;

    align-items: center;

    gap: 11px;

    font-size: 13px;

}


.user-avatar {

    width: 41px;

    height: 41px;

    background: #eef2ff;

    color: #3764ff;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 20px;

}


.user-company {

    color: var(--text-secondary);

    margin-top: 2px;

}


.page-content {

    padding: 30px 32px;

}


.stat-card {

    background: var(--card-background);

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

    border-radius: 15px;

    min-height: 122px;

    padding: 23px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-shadow:
        0 4px 18px rgba(30,45,70,0.04);

}


.stat-label {

    font-size: 13px;

    color: var(--text-secondary);

}


.stat-value {

    font-weight: 750;

    font-size: 34px;

    margin-top: 7px;

}


.stat-icon {

    width: 51px;

    height: 51px;

    border-radius: 13px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 23px;

}


.icon-blue {

    background: #e9efff;

    color: #3764ff;

}


.icon-green {

    background: #e5f8ef;

    color: #21a66b;

}


.icon-orange {

    background: #fff1df;

    color: #e98a20;

}


.icon-purple {

    background: #f2eafd;

    color: #8654cc;

}


.content-card {

    background: white;

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

    border-radius: 15px;

    padding: 25px;

    box-shadow:
        0 4px 18px rgba(30,45,70,0.04);

}


.card-header-custom {

    display: flex;

    justify-content: space-between;

    margin-bottom: 20px;

}


.card-header-custom h2 {

    font-size: 17px;

    margin: 0;

    font-weight: 700;

}


.card-header-custom p {

    color: var(--text-secondary);

    font-size: 13px;

    margin: 5px 0 0;

}


.status-list {

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

}


.status-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 3px;

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

}


.status-dot {

    width: 10px;

    height: 10px;

    margin-right: 9px;

    border-radius: 50%;

    display: inline-block;

}


.status-dot.green {

    background: #21a66b;

}


.status-dot.orange {

    background: #e98a20;

}


.status-dot.purple {

    background: #8654cc;

}


.quick-actions {

    display: grid;

    gap: 11px;

}


.quick-action {

    min-height: 49px;

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

    border-radius: 10px;

    padding: 12px 14px;

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--text-primary);

    text-decoration: none;

    font-size: 14px;

}


.quick-action i {

    color: #3764ff;

    font-size: 19px;

}


.quick-action:hover {

    background: #f7f9fe;

    border-color: #cfd9f7;

}


.empty-state {

    min-height: 190px;

    text-align: center;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: var(--text-secondary);

}


.empty-state i {

    font-size: 40px;

    color: #bcc6d5;

}


.empty-state h3 {

    color: var(--text-primary);

    font-size: 16px;

    margin: 13px 0 6px;

}


.empty-state p {

    font-size: 13px;

}


@media(max-width: 900px) {

    .sidebar {

        width: 75px;

    }


    .brand-title,
    .brand-subtitle,
    .nav-item span {

        display: none;

    }


    .brand {

        justify-content: center;

        padding-left: 10px;

        padding-right: 10px;

    }


    .nav-item {

        justify-content: center;

    }


    .main-content {

        width: calc(100% - 75px);

        margin-left: 75px;

    }


    .page-content {

        padding: 20px;

    }


    .topbar {

        padding-left: 20px;

        padding-right: 20px;

    }

}