:root {
    --cp-primary: #8620e4;
    --cp-primary-dark: #5f16a2;
    --cp-bg: #f4f7fc;
    --cp-card: #ffffff;
    --cp-border: #d9e2f1;
    --cp-text: #23314a;
    --cp-subtext: #6f809f;
    --cp-sidebar: #0f1f3d;
    --cp-sidebar-muted: #9fb5df;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(1200px 500px at 0% -10%, #d9e6ff 0%, rgba(217, 230, 255, 0) 65%),
        radial-gradient(1000px 500px at 100% -20%, #e4f2ff 0%, rgba(228, 242, 255, 0) 60%),
        var(--cp-bg);
    color: var(--cp-text);
}

.cp-layout {
    min-height: 100vh;
}

.cp-sidebar {
    background: linear-gradient(160deg, #12254a 0%, #0d1d39 55%, #0a1730 100%);
    color: #dce7ff;
    min-height: 100vh;
}

.cp-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cp-brand-badge {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #0b2e71;
    background: linear-gradient(145deg, #d8e7ff, #ffffff);
}

.cp-sidebar .nav-link {
    color: var(--cp-sidebar-muted);
    border-radius: 0.75rem;
    margin-bottom: 0.35rem;
    font-weight: 500;
    transition: 0.2s ease;
}

.cp-sidebar .nav-link.active,
.cp-sidebar .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.cp-content {
    min-height: 100vh;
}

.cp-topbar {
    border: 1px solid var(--cp-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
}

.cp-card {
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: 1rem;
    box-shadow: 0 12px 28px rgba(16, 46, 97, 0.06);
}

.cp-stat {
    border-radius: 0.95rem;
    border: 1px solid #e2eaf7;
    background: #fff;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.cp-stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    background: linear-gradient(145deg, var(--cp-primary), var(--cp-primary-dark));
}

.cp-muted {
    color: var(--cp-subtext);
}

.cp-table-wrap {
    overflow-x: auto;
}

.cp-table-wrap table {
    min-width: 760px;
}

.cp-login {
    min-height: 100vh;
}

.cp-login-card {
    border: 1px solid #dae4f5;
    border-radius: 1.1rem;
    box-shadow: 0 16px 36px rgba(9, 40, 91, 0.09);
}

.badge-soft {
    background: #edf4ff;
    color: #0a4ca8;
    border: 1px solid #caddff;
}

.cp-status {
    font-weight: 600;
    border-radius: 999px;
    font-size: 0.76rem;
    padding: 0.38rem 0.62rem;
}

.cp-status-1 { background: #fff4e2; color: #9a5b00; border: 1px solid #ffdca7; }
.cp-status-2 { background: #eaf6ff; color: #0f5ca8; border: 1px solid #bbdcff; }
.cp-status-3 { background: #eff4ff; color: #374e9e; border: 1px solid #cfd9ff; }
.cp-status-4 { background: #f4f0ff; color: #5b3aa8; border: 1px solid #d9ccff; }
.cp-status-5 { background: #e8fbff; color: #046f83; border: 1px solid #ace8f2; }
.cp-status-6 { background: #e6faef; color: #0b7c40; border: 1px solid #afe3c7; }
.cp-status-7 { background: #ffecec; color: #b21f2d; border: 1px solid #ffc2c7; }
.cp-status-8 { background: #f2f2f6; color: #4f5a6b; border: 1px solid #d6d9e1; }

@media (max-width: 991.98px) {
    .cp-content {
        padding-top: 0.5rem !important;
    }
}