Logo background
.skin-blue .main-header .logo {
    background-color: #501775 !important; /* Dark */
    color: #fff !important;
    border-bottom: 0 solid transparent !important;
}

/* Logo hover */
.skin-blue .main-header .logo:hover {
    background-color: #6D318F !important; /* Primary */
}

/* User dropdown header background */
.skin-blue .main-header li.user-header {
    background-color: #6D318F !important; /* Primary */
}

/* Navbar background */
.skin-blue .main-header .navbar {
    background-color: #6D318F !important;
}

/* Navbar hover toggle */
.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: #501775 !important;
}

/* Sidebar Background */
.skin-blue .main-sidebar,
.skin-blue .left-side {
    background-color: #501775 !important;
}

/* Active Sidebar Menu Item */
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li:hover > a {
    background-color: #6D318F !important;
    color: #fff !important;
}

/* Content Page Background */
.content-wrapper,
.right-side {
    background-color: #FAF2FF !important;
}

/* Buttons */
/* .btn-primary {
    background-color: #6D318F !important;
    border-color: #501775 !important;
}
.btn-primary:hover {
    background-color: #501775 !important;
    border-color: #6D318F !important;
} */

/* Pagination Active State */
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    z-index: 3;
    color: #fff !important;
    cursor: default;
    background-color: #6D318F !important; /* Primary */
    border-color: #501775 !important;     /* Dark */
}

/* Pagination Hover (Non-active) */
.pagination>li>a:hover,
.pagination>li>span:hover {
    background-color: #FAF2FF !important; /* Light */
    border-color: #6D318F !important;     /* Primary */
    color: #501775 !important;            /* Dark text */
}

/* Links Hover / Focus */
a:hover, a:active, a:focus {
    outline: none !important;
    text-decoration: none !important;
    color: #6D318F !important; /* Primary */
}

/* Box Primary Header Border */
.box.box-primary {
    border-top-color: #6D318F !important; /* Primary */
}

/* Box Primary Header Background (optional but looks nicer) */
.box.box-primary>.box-header.with-border {
    border-bottom: 1px solid #501775 !important; /* Dark */
}

/* Box Primary Title color (optional) */
.box.box-primary .box-title {
    color: #501775 !important; /* Dark */
}

/* Default Link Color */
.main-footer strong a {
    color: #6D318F !important; /* Primary */
}

.main-footer strong a:hover,
.main-footer strong a:focus {
    color: #501775 !important; /* Dark */
    text-decoration: none !important;
}

/* Header Logo */
.skin-blue .main-header .logo {
    background-color: #501775 !important; /* Dark */
    color: #fff !important;
    border-bottom: 0 solid transparent !important;
}

/* Header Logo Hover */
.skin-blue .main-header .logo:hover {
    background-color: #6D318F !important; /* Primary */
}

/* User Dropdown Header */
.skin-blue .main-header li.user-header {
    background-color: #6D318F !important; /* Primary */
}

/* Page Header Background */
.skin-blue .content-header {
    background: transparent !important;
}

/* Sidebar Main Background */
.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side {
    background-color: #501775 !important; /* Dark */
}

/* User Panel Text */
.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a {
    color: #fff !important;
}

/* Sidebar Section Header */
.skin-blue .sidebar-menu > li.header {
    color: #FAF2FF !important; /* Light text */
    background: #3b1d55 !important; /* Slightly darker shade of sidebar */
}

/* Sidebar Links */
.skin-blue .sidebar-menu > li > a {
    border-left: 3px solid transparent !important;
    color: #FAF2FF !important; /* Light text */
}

/* Active / Hover Sidebar Item */
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
    color: #fff !important;
    background: #6C2E9B !important; /* Mid-tone between primary + dark */
}

/* Active Highlight Border */
.skin-blue .sidebar-menu > li.active > a {
    border-left-color: #6D318F !important; /* Primary */
}

/* Treeview Menu Background */
.skin-blue .sidebar-menu > li > .treeview-menu {
    margin: 0 1px;
    background: #6C2E9B !important; /* Mid purple */
}

/* Sidebar Link Base Color */
.skin-blue .sidebar a {
    color: #FAF2FF !important; /* Light */
}

/* Sidebar Link Hover */
.skin-blue .sidebar a:hover {
    text-decoration: none !important;
    color: #fff !important;
}

/* Treeview Sub-menu links */
.skin-blue .sidebar-menu .treeview-menu > li > a {
    color: #E5D5F5 !important; /* Softer purple text */
}

/* Active Sub-item & Hover */
.skin-blue .sidebar-menu .treeview-menu > li.active > a,
.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
    color: #fff !important;
}

/* NAVBAR BACKGROUND */
.skin-blue .main-header .navbar {
    background-color: #501775 !important; /* dark purple */
    border-bottom: none;
}

/* Toggle (three bar) icon */
.skin-blue .main-header .navbar .sidebar-toggle {
    color: #FAF2FF !important; /* light text */
}
.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: #6C2E9B !important; /* mid purple */
    color: #fff !important;
}

/* Navbar icons and links */
.skin-blue .main-header .navbar .nav > li > a {
    color: #FAF2FF !important;
}
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li.open > a,
.skin-blue .main-header .navbar .nav .open > a {
    background-color: #6C2E9B !important;
    color: #fff !important;
}

/* DROPDOWN MENU BACKGROUND */
.skin-blue .main-header .navbar .dropdown-menu {
    background-color: #6C2E9B !important;
    border: none;
}

/* Dropdown text */
.skin-blue .main-header .navbar .dropdown-menu > li > a {
    color: #FAF2FF !important;
}
.skin-blue .main-header .navbar .dropdown-menu > li > a:hover {
    background-color: #9745C7 !important; /* primary purple */
    color: #fff !important;
}

/* Notification bell icon color fix */
.skin-blue .main-header .navbar .fa-bell-o,
.skin-blue .main-header .navbar .fa-bell {
    color: #FAF2FF !important;
}

/* Notification count badge */
.skin-blue .main-header .navbar .label-warning {
    background-color: #9745C7 !important;
    color: #fff !important;
}

/* User dropdown header purple */
.skin-blue .main-header li.user-header {
    background-color: #9745C7 !important;
}

/* Profile / Logout buttons */
.skin-blue .main-header .navbar .user-footer .btn-default {
    background: #FAF2FF !important;
    border: none !important;
    color: #501775 !important;
}
.skin-blue .main-header .navbar .user-footer .btn-default:hover {
    background: #E5D5F5 !important;
}

/* Mark All Read link specific style */
#mark-read {
    color: #9745C7 !important;     /* primary purple */
    font-weight: 600;
}

#mark-read:hover,
#mark-read:focus {
    color: #501775 !important;     /* dark purple hover */
    text-decoration: underline;
}

/* Navbar dropdown link text */
.skin-blue .main-header .navbar .dropdown-menu > li > a {
    color: #501775 !important; /* Dark purple (normal state) */
}

/* Hover / Active states */
.skin-blue .main-header .navbar .dropdown-menu > li > a:hover,
.skin-blue .main-header .navbar .dropdown-menu > li.active > a {
    background-color: #9745C7 !important; /* Primary purple */
    color: #FAF2FF !important;            /* Light text for contrast */
}

/* Divider & header text if needed */
.skin-blue .main-header .navbar .dropdown-menu .header {
    color: #501775 !important;
    font-weight: 600;
}

/* Login Page Background */
body.login-page {
    background-color: #FAF2FF; /* Light lavender */
}

/* Login Box */
.login-box-body {
    border-radius: 8px;
    border: 1px solid #E8D6F4;
    background: #FFFFFF;
}

/* App Name (Logo Text) */
.login-logo a {
    color: #501775 !important; /* Dark purple */
    font-weight: 600;
}

/* Login Input Focus */
.form-control:focus {
    border-color: #9745C7 !important;
    box-shadow: 0 0 3px #9745C7 !important;
}

/* Purple Button */
.btn-primary {
    background-color: #9745C7 !important;
    border-color: #9745C7 !important;
}

.btn-primary:hover {
    background-color: #501775 !important;
    border-color: #501775 !important;
    color: #ffffff !important;
}

/* Remember Me Checkbox Color using iCheck theme */
.icheckbox_square-purple,
.iradio_square-purple {
    background-position: 0 0;
    /* You already selected `icheckbox_square-purple` so just ensure the purple theme loads */
}

/* Links inside login box */
.login-box-body a {
    color: #9745C7 !important;
}

.login-box-body a:hover {
    color: #501775 !important;
}

/* Sign in text */
.login-box-msg {
    color: #501775 !important;
    font-weight: 500;
}





/* Improve Show Fields Layout */
.dl-horizontal dt {
    float: left;
    width: 180px;                 /* Wider label */
    text-align: left;
    font-weight: 600;
    color: #501775;               /* Dark Purple Title */
    margin-bottom: 12px;
}

/* .dl-horizontal dd {
    margin-left: 200px;
    padding-bottom: 12px;
    border-bottom: 1px solid #E8D6F4;
} */

/* Remove last border */
.dl-horizontal dd:last-of-type {
    border-bottom: none;
}

/* Spacing inside box */
.box-body {
    padding-top: 25px !important;
}

/* Value Text Style */
.dl-horizontal dd {
    color: #333;
    font-size: 15px;
}

/* Image fields (cover, sample, etc.) auto format */
.dl-horizontal dd img {
    max-width: 180px;
    border-radius: 6px;
    border: 1px solid #E0D2EF;
    padding: 4px;
}

/* Buttons alignment */
.btn-group .btn {
    border-radius: 4px !important;
}

.nav-tabs-custom .nav-tabs li.active {
    border-top-color: #501775 !important;
}

.profile-user-img {
    margin: 0 auto;
    width: 100px !important;
    height: 100px !important;
    padding: 3px;
    border: 3px solid #d2d6de;
}

/* .box-header.with-border {
    border-bottom: 1px solid #501775 !important;
} */

.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #501775;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

img.custom-img {
    border-radius: 3px !important;
    margin-bottom: 20px !important;
    width: 300px !important;
    height: 200px !important;
    border: 3px solid #501775 !important;
}

img.logo-img {
    border-radius: 3px !important;
    margin-bottom: 20px !important;
    width: 200px !important;
    height: 200px !important;
    border: 3px solid #501775 !important;
}

aside.skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side {
    background-color: #642091 !important;
}