:root {
    --primary: #4F46E5;
    --sidebar-text: #111827;
    --sidebar-icon: #64748B;
    --sidebar-hover: #EEF2FF;
    --sidebar-active: #EEF2FF;
    --sidebar-width: 240px;
    --primary: #4f46e5;
}

/* Sidebar */
#sidebar {
    width: 240px;
    transition: all .3s;
    z-index: 1050;
    background: #fff;
}

/* Nav Links */
.sidebar-menu .nav-link {
    color: var(--sidebar-text) !important;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 500;
    transition: all .2s ease;
}

.sidebar-menu .nav-link i {
    width: 22px;
    font-size: 18px;
    color: var(--sidebar-icon);
    transition: .2s;
}

/* Hover */
.sidebar-menu .nav-link:hover {
    background: var(--sidebar-hover);
    color: var(--primary) !important;
}

.sidebar-menu .nav-link:hover i {
    color: var(--primary);
}

/* Active */
.sidebar-menu .nav-link.active {
    background: var(--sidebar-active);
    color: var(--primary) !important;
    font-weight: 600;
}

.sidebar-menu .nav-link.active i {
    color: var(--primary);
}

/* Mobile */
@media (max-width: 992px) {
    #sidebar {
        margin-left: -240px;
    }

    #mainContent {
        margin-left: 0 !important;
    }

    #topNav {
        left: 0 !important;
    }
}

body {
    background: #f8f9fb;
    overflow-x: hidden;
    font-family: 'Segoe UI', sans-serif;
}

/* Main Content */
.main-content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: 90px 24px 24px;
    transition: all .3s ease;
}

/* Cards */
.dashboard-card,
.custom-card {
    border: none;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.dashboard-card {
    padding: 20px;
}

.custom-card {
    padding: 24px;
    height: 100%;
}

.dashboard-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

/* Insight Items */
.insight-item {
    border-radius: 16px;
    padding: 16px 18px;
}

/* AI Card */
.ai-card {
    background: linear-gradient(135deg, #4f46e5, #3730a3);
    color: #fff;
}

.ai-item {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 14px 16px;
    transition: .2s;
}

.ai-item:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* Campaign */
.campaign-item {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    background: #fff;
}

/* Activity */
.activity-line {
    width: 2px;
    background: #d1d5db;
    border-radius: 10px;
}

/* Chart */
.chart-wrapper {
    height: 260px;
    border-left: 2px solid #d1d5db;
    border-bottom: 2px solid #d1d5db;
    padding: 0 10px;
}

.bar {
    width: 70px;
    border-radius: 16px 16px 0 0;
}

/* Tablet */
@media (max-width: 992px) {

    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 85px 16px 20px;
    }

    .custom-card,
    .dashboard-card {
        padding: 18px;
    }

    .bar {
        width: 52px;
    }
}

/* Mobile */
@media (max-width: 576px) {

    .main-content {
        padding: 80px 12px 20px;
    }

    .dashboard-card h3 {
        font-size: 22px;
    }

    .dashboard-icon {
        width: 46px;
        height: 46px;
    }

    .custom-card {
        padding: 16px;
        border-radius: 18px;
    }

    .chart-wrapper {
        overflow-x: auto;
        gap: 20px !important;
        min-width: 520px;
    }

    .bar {
        width: 42px;
    }

    .insight-item {
        padding: 14px;
    }

    h5 {
        font-size: 17px;
    }
}

/* CARD */
.customer-card {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    border: 1px solid #edf0f5;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

/* TABLE */
.table th {
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
    white-space: nowrap;
}

/* MOBILE */
@media (max-width: 992px) {

    .main-content {
        margin-left: 0;
        padding: 85px 16px 20px;
    }

    .customer-card {
        padding: 18px;
        border-radius: 20px;
    }
}

@media (max-width: 576px) {

    .table-responsive {
        border-radius: 18px;
    }

    .pagination-buttons {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}