/* =========================================
   ROOT COLORS
========================================= */

:root {

    --primary-color: #2563eb;

    --primary-dark: #1e3a8a;

    --secondary-color: #14b8a6;

    --sidebar-bg: #0f172a;

    --sidebar-hover: #1e293b;

    --sidebar-active: #2563eb;

    --body-bg: #f1f5f9;

    --card-bg: #ffffff;

    --text-dark: #1e293b;

    --text-muted: #64748b;

    --border-color: #e2e8f0;

}


/* =========================================
   BODY
========================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


body {

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

    background: var(--body-bg);

    color: var(--text-dark);

    overflow-x: hidden;

}


/* =========================================
   APP WRAPPER
========================================= */

.app-wrapper {

    min-height: 100vh;

    display: flex;

}


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

.sidebar {

    width: 260px;

    min-height: 100vh;

    background: var(--sidebar-bg);

    color: white;

    position: fixed;

    left: 0;

    top: 0;

    z-index: 1050;

    display: flex;

    flex-direction: column;

    transition: all 0.3s ease;

}


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

.sidebar-logo {

    height: 75px;

    display: flex;

    align-items: center;

    padding: 0 20px;

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

}


.logo-icon {

    width: 42px;

    height: 42px;

    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #14b8a6
    );

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    margin-right: 12px;

}


.logo-text {

    display: flex;

    flex-direction: column;

}


.logo-title {

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 0.5px;

}


.logo-subtitle {

    font-size: 9px;

    color: #94a3b8;

    letter-spacing: 1px;

}


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

.sidebar-menu {

    padding: 20px 12px;

    flex: 1;

    overflow-y: auto;

}


.menu-label {

    color: #64748b;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    padding:

        0 12px

        10px;

}


.menu-item {

    display: flex;

    align-items: center;

    text-decoration: none;

    color: #cbd5e1;

    padding: 12px;

    border-radius: 8px;

    margin-bottom: 4px;

    transition: 0.2s;

    font-size: 14px;

}


.menu-item:hover {

    background: var(--sidebar-hover);

    color: white;

}


.menu-item.active {

    background: linear-gradient(
        90deg,
        #2563eb,
        #1d4ed8
    );

    color: white;

    box-shadow:

        0 4px 10px

        rgba(37,99,235,0.25);

}


.menu-icon {

    width: 30px;

    font-size: 16px;

}


.menu-text {

    font-weight: 500;

}


.logout-menu {

    color: #fca5a5;

}


.logout-menu:hover {

    color: #fecaca;

}


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

.sidebar-footer {

    padding: 15px 20px;

    border-top:

        1px solid

        rgba(255,255,255,0.08);

}


.system-status {

    font-size: 12px;

    color: #cbd5e1;

}


.status-dot {

    width: 8px;

    height: 8px;

    background: #22c55e;

    border-radius: 50%;

    display: inline-block;

    margin-right: 6px;

}


.version-text {

    font-size: 10px;

    color: #64748b;

    margin-top: 5px;

}


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

.main-content {

    margin-left: 260px;

    width: calc(100% - 260px);

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}


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

.top-navbar {

    height: 75px;

    background: white;

    border-bottom:

        1px solid

        var(--border-color);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 28px;

    position: sticky;

    top: 0;

    z-index: 1000;

}


.sidebar-toggle {

    border: none;

    background: #f1f5f9;

    width: 42px;

    height: 42px;

    border-radius: 8px;

    font-size: 18px;

    color: #334155;

    cursor: pointer;

    margin-right: 15px;

    transition: 0.2s;

}


.sidebar-toggle:hover {

    background: var(--primary-color);

    color: white;

}


.page-title {

    font-size: 20px;

    font-weight: 600;

    color: #1e293b;

}


/* =========================================
   TOP RIGHT
========================================= */

.top-right-menu {

    display: flex;

    align-items: center;

    gap: 20px;

}


.notification-btn {

    position: relative;

    border: none;

    background: #f8fafc;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    font-size: 18px;

    color: #475569;

}


.notification-dot {

    position: absolute;

    width: 8px;

    height: 8px;

    background: #ef4444;

    border-radius: 50%;

    top: 8px;

    right: 8px;

}


.user-profile {

    display: flex;

    align-items: center;

    gap: 10px;

}


.user-avatar {

    width: 42px;

    height: 42px;

    background:

        linear-gradient(
            135deg,
            #2563eb,
            #14b8a6
        );

    border-radius: 50%;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

}


.user-info {

    display: flex;

    flex-direction: column;

}


.user-name {

    font-size: 13px;

    font-weight: 600;

}


.user-role {

    font-size: 11px;

    color: var(--text-muted);

}


.user-arrow {

    font-size: 10px;

    color: #94a3b8;

}


/* =========================================
   CONTENT AREA
========================================= */

.content-area {

    flex: 1;

    padding: 28px;

}


/* =========================================
   FOOTER
========================================= */

.footer {

    background: white;

    border-top:

        1px solid

        var(--border-color);

    padding: 15px 28px;

    display: flex;

    justify-content: space-between;

    color: var(--text-muted);

    font-size: 12px;

}


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

.dashboard-header {

    margin-bottom: 25px;

}


.dashboard-title {

    font-size: 25px;

    font-weight: 700;

    color: #1e293b;

}


.dashboard-subtitle {

    color: var(--text-muted);

    font-size: 14px;

    margin-top: 5px;

}


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

.stat-card {

    background: white;

    border-radius: 14px;

    padding: 22px;

    border:

        1px solid

        var(--border-color);

    height: 100%;

    transition: 0.25s;

}


.stat-card:hover {

    transform: translateY(-4px);

    box-shadow:

        0 10px 25px

        rgba(15,23,42,0.08);

}


.stat-card-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.stat-title {

    font-size: 13px;

    color: var(--text-muted);

    margin-bottom: 8px;

}


.stat-value {

    font-size: 27px;

    font-weight: 700;

    color: #1e293b;

}


.stat-icon {

    width: 55px;

    height: 55px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

}


.icon-blue {

    background: #dbeafe;

    color: #2563eb;

}


.icon-green {

    background: #dcfce7;

    color: #16a34a;

}


.icon-orange {

    background: #ffedd5;

    color: #ea580c;

}


.icon-purple {

    background: #f3e8ff;

    color: #9333ea;

}


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

.content-card {

    background: white;

    border:

        1px solid

        var(--border-color);

    border-radius: 14px;

    padding: 22px;

}


.card-header-title {

    font-size: 17px;

    font-weight: 600;

    margin-bottom: 20px;

}


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

.sidebar-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.5);

    z-index: 1040;

    display: none;

}


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

@media (max-width: 992px) {

    .sidebar {

        transform: translateX(-100%);

    }


    .sidebar.show {

        transform: translateX(0);

    }


    .main-content {

        margin-left: 0;

        width: 100%;

    }


    .sidebar-overlay.show {

        display: block;

    }

}


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

@media (max-width: 576px) {

    .top-navbar {

        padding: 0 15px;

    }


    .content-area {

        padding: 18px;

    }


    .page-title {

        font-size: 16px;

    }


    .user-info,

    .user-arrow {

        display: none;

    }


    .top-right-menu {

        gap: 10px;

    }


    .footer {

        padding: 15px;

        flex-direction: column;

        gap: 5px;

    }


    .dashboard-title {

        font-size: 21px;

    }


    .stat-value {

        font-size: 23px;

    }

}

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

.page-header-section {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

}


.page-main-title {

    font-size: 24px;

    font-weight: 700;

    margin-bottom: 5px;

    color: var(--text-dark);

}


.page-description {

    color: var(--text-muted);

    font-size: 14px;

}


/* =========================================
   FORM CONTROLS
========================================= */

.form-label {

    font-size: 13px;

    font-weight: 600;

    color: #334155;

}


.form-control,
.form-select {

    min-height: 42px;

    border-color: #dbe2ea;

    border-radius: 8px;

}


.form-control:focus,
.form-select:focus {

    border-color: var(--primary-color);

    box-shadow:
        0 0 0 0.2rem
        rgba(37, 99, 235, 0.10);

}


.input-group-text {

    background: #f8fafc;

    border-color: #dbe2ea;

}


/* =========================================
   CUSTOM TABLE
========================================= */

.custom-table {

    margin-bottom: 0;

}


.custom-table thead th {

    background: #f8fafc;

    color: #475569;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.3px;

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

    padding: 14px;

}


.custom-table tbody td {

    padding: 14px;

    font-size: 13px;

    border-color: #eef2f7;

}


.custom-table tbody tr:hover {

    background: #f8fafc;

}


/* =========================================
   SEARCH BOX
========================================= */

.search-box {

    min-width: 320px;

}


.search-box .form-control {

    min-height: 40px;

}


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

@media (max-width: 576px) {

    .page-header-section {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }


    .search-box {

        width: 100%;

        min-width: 100%;

    }


    .page-main-title {

        font-size: 20px;

    }

}