:root {
    --menu-dark: #6E1B5C;       /* from pic11 - solid deep magenta/purple */
    --menu-dark-hover: #8A2A76;
    --menu-gradient-start: #D9AECB; /* from pic22 - light pink/lavender gradient */
    --menu-gradient-end: #C492B8;
    --content-bg: #FFFFFF;      /* right section stays white/light, not pic22 */
    --text-light: #FFFFFF;
    --accent: #6E1B5C;
}

body {
    background-color: #F4F4F6;
}

.sidebar {
    min-height: 100vh;
    background: var(--menu-dark);
    color: var(--text-light);
    width: 240px;
}

.sidebar .brand {
    background: linear-gradient(135deg, var(--menu-gradient-start), var(--menu-gradient-end));
    padding: 18px 14px;
    font-weight: 700;
    color: #3A0F33;
}

.sidebar .nav-link {
    color: #f1d9ec;
    padding: 10px 16px;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: var(--menu-dark-hover);
    color: #fff;
    border-radius: 4px;
}

.content-area {
    background: var(--content-bg);
    min-height: 100vh;
    padding: 24px;
}

.topbar {
    background: linear-gradient(90deg, var(--menu-gradient-start), var(--menu-gradient-end));
    padding: 10px 20px;
}

.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover {
    background-color: var(--menu-dark-hover);
    border-color: var(--menu-dark-hover);
}

.card-header.theme {
    background-color: var(--accent);
    color: #fff;
}

.badge-open { background:#6c757d; }
.badge-assigned { background:#0d6efd; }
.badge-inprogress { background:#fd7e14; }
.badge-completed { background:#198754; }
.badge-closed { background:#343a40; }