/* Skin-Teal */
.skin-teal .main-header .navbar {
    background-color: #14b8a6;
}

/* teal-500 */
.skin-teal .main-header .navbar .nav>li>a {
    color: #ffffff;
}

.skin-teal .main-header .navbar .nav>li>a:hover,
.skin-teal .main-header .navbar .nav>li>a:active,
.skin-teal .main-header .navbar .nav>li>a:focus,
.skin-teal .main-header .navbar .nav .open>a,
.skin-teal .main-header .navbar .nav .open>a:hover,
.skin-teal .main-header .navbar .nav .open>a:focus,
.skin-teal .main-header .navbar .sidebar-toggle:hover {
    background-color: #0d9488;
    /* teal-600 */
    color: #f6f6f6;
}

.skin-teal .main-header .logo {
    background-color: #0d9488;
    /* teal-600 */
    color: #ffffff;
    border-bottom: 0 solid transparent;
}

.skin-teal .main-header .logo:hover {
    background-color: #115e59;
    /* teal-800 */
}

.skin-teal .main-header li.user-header {
    background-color: #14b8a6;
}

.skin-teal .content-header {
    background: transparent;
}

.skin-teal .wrapper,
.skin-teal .main-sidebar,
.skin-teal .left-side {
    background-color: #222d32;
}

.skin-teal .user-panel>.info,
.skin-teal .user-panel>.info>a {
    color: #fff;
}

.skin-teal .sidebar-menu>li.header {
    color: #4b646f;
    background: #1a2226;
}

.skin-teal .sidebar-menu>li>a {
    border-left: 3px solid transparent;
}

.skin-teal .sidebar-menu>li:hover>a,
.skin-teal .sidebar-menu>li.active>a {
    color: #ffffff;
    background: #1e282c;
    border-left-color: #14b8a6;
}

.skin-teal .sidebar-menu>li>.treeview-menu {
    margin: 0 1px;
    background: #2c3b41;
}

.skin-teal .sidebar a {
    color: #b8c7ce;
}

.skin-teal .sidebar a:hover {
    text-decoration: none;
}

.skin-teal .treeview-menu>li>a {
    color: #8aa4af;
}

.skin-teal .treeview-menu>li.active>a,
.skin-teal .treeview-menu>li>a:hover {
    color: #ffffff;
}

/* Skin-Slate ("Modern") */
.skin-slate .main-header .navbar {
    background-color: #1e293b;
}

/* slate-800 */
.skin-slate .main-header .navbar .nav>li>a {
    color: #ffffff;
}

.skin-slate .main-header .navbar .nav>li>a:hover,
.skin-slate .main-header .navbar .nav>li>a:active,
.skin-slate .main-header .navbar .nav>li>a:focus,
.skin-slate .main-header .navbar .nav .open>a,
.skin-slate .main-header .navbar .nav .open>a:hover,
.skin-slate .main-header .navbar .nav .open>a:focus,
.skin-slate .main-header .navbar .sidebar-toggle:hover {
    background-color: #0f172a;
    /* slate-900 */
    color: #f6f6f6;
}

.skin-slate .main-header .logo {
    background-color: #0f172a;
    /* slate-900 */
    color: #ffffff;
    border-bottom: 0 solid transparent;
}

.skin-slate .main-header .logo:hover {
    background-color: #020617;
    /* slate-950 */
}

.skin-slate .main-header li.user-header {
    background-color: #1e293b;
}

.skin-slate .content-header {
    background: transparent;
}

.skin-slate .wrapper,
.skin-slate .main-sidebar,
.skin-slate .left-side {
    background-color: #0f172a;
    /* Darker sidebar for "Modern" look */
}

.skin-slate .user-panel>.info,
.skin-slate .user-panel>.info>a {
    color: #fff;
}

.skin-slate .sidebar-menu>li.header {
    color: #94a3b8;
    background: #1e293b;
}

.skin-slate .sidebar-menu>li>a {
    border-left: 3px solid transparent;
}

.skin-slate .sidebar-menu>li:hover>a,
.skin-slate .sidebar-menu>li.active>a {
    color: #ffffff;
    background: #334155;
    border-left-color: #cbd5e1;
}

.skin-slate .sidebar-menu>li>.treeview-menu {
    margin: 0 1px;
    background: #1e293b;
}

.skin-slate .sidebar a {
    color: #cbd5e1;
}

.skin-slate .sidebar a:hover {
    text-decoration: none;
}

.skin-slate .treeview-menu>li>a {
    color: #94a3b8;
}

.skin-slate .treeview-menu>li.active>a,
.skin-slate .treeview-menu>li>a:hover {
    color: #ffffff;
}

/* Skin-Indigo ("Professional") */
.skin-indigo .main-header .navbar {
    background-color: #4f46e5;
}

/* indigo-600 */
.skin-indigo .main-header .navbar .nav>li>a {
    color: #ffffff;
}

.skin-indigo .main-header .navbar .nav>li>a:hover,
.skin-indigo .main-header .navbar .nav>li>a:active,
.skin-indigo .main-header .navbar .nav>li>a:focus,
.skin-indigo .main-header .navbar .nav .open>a,
.skin-indigo .main-header .navbar .nav .open>a:hover,
.skin-indigo .main-header .navbar .nav .open>a:focus,
.skin-indigo .main-header .navbar .sidebar-toggle:hover {
    background-color: #4338ca;
    /* indigo-700 */
    color: #f6f6f6;
}

.skin-indigo .main-header .logo {
    background-color: #4338ca;
    /* indigo-700 */
    color: #ffffff;
    border-bottom: 0 solid transparent;
}

.skin-indigo .main-header .logo:hover {
    background-color: #3730a3;
    /* indigo-800 */
}

.skin-indigo .main-header li.user-header {
    background-color: #4f46e5;
}

.skin-indigo .content-header {
    background: transparent;
}

.skin-indigo .wrapper,
.skin-indigo .main-sidebar,
.skin-indigo .left-side {
    background-color: #222d32;
}

.skin-indigo .user-panel>.info,
.skin-indigo .user-panel>.info>a {
    color: #fff;
}

.skin-indigo .sidebar-menu>li.header {
    color: #4b646f;
    background: #1a2226;
}

.skin-indigo .sidebar-menu>li>a {
    border-left: 3px solid transparent;
}

.skin-indigo .sidebar-menu>li:hover>a,
.skin-indigo .sidebar-menu>li.active>a {
    color: #ffffff;
    background: #1e282c;
    border-left-color: #4f46e5;
}

.skin-indigo .sidebar-menu>li>.treeview-menu {
    margin: 0 1px;
    background: #2c3b41;
}

.skin-indigo .sidebar a {
    color: #b8c7ce;
}

.skin-indigo .sidebar a:hover {
    text-decoration: none;
}

.skin-indigo .treeview-menu>li>a {
    color: #8aa4af;
}

.skin-indigo .treeview-menu>li.active>a,
.skin-indigo .treeview-menu>li>a:hover {
    color: #ffffff;
}

/* Skin-Violet ("Violet Premium") - Matches the screenshot style */
/* Primary Color: #7F56D9 (Violet-600) */
/* Sidebar Color: #2C1C5F (Violet-950) or Deep Purple */

.skin-violet .main-header .navbar {
    background-color: #7F56D9;
}

/* Violet-600 */
.skin-violet .main-header .navbar .nav>li>a {
    color: #ffffff;
}

.skin-violet .main-header .navbar .nav>li>a:hover,
.skin-violet .main-header .navbar .nav>li>a:active,
.skin-violet .main-header .navbar .nav>li>a:focus,
.skin-violet .main-header .navbar .nav .open>a,
.skin-violet .main-header .navbar .nav .open>a:hover,
.skin-violet .main-header .navbar .nav .open>a:focus,
.skin-violet .main-header .navbar .sidebar-toggle:hover {
    background-color: #6941C6;
    /* Violet-700 */
    color: #f6f6f6;
}

.skin-violet .main-header .logo {
    background-color: #6941C6;
    /* Violet-700 */
    color: #ffffff;
    border-bottom: 0 solid transparent;
}

.skin-violet .main-header .logo:hover {
    background-color: #53389E;
    /* Violet-800 */
}

.skin-violet .main-header li.user-header {
    background-color: #7F56D9;
}

.skin-violet .content-header {
    background: transparent;
}

.skin-violet .wrapper,
.skin-violet .main-sidebar,
.skin-violet .left-side {
    background-color: #1e1b4b;
    /* Deep Indigo/Violet */
}

.skin-violet .user-panel>.info,
.skin-violet .user-panel>.info>a {
    color: #fff;
}

.skin-violet .sidebar-menu>li.header {
    color: #A4BCF5;
    /* Light Violet/Blue Text */
    background: #151336;
    /* Darker than sidebar */
}

.skin-violet .sidebar-menu>li>a {
    border-left: 3px solid transparent;
}

.skin-violet .sidebar-menu>li:hover>a,
.skin-violet .sidebar-menu>li.active>a {
    color: #ffffff;
    background: #2e2a63;
    /* Slightly lighter sidebar item */
    border-left-color: #9E77ED;
    /* Lighter Violet Accent */
}

.skin-violet .sidebar-menu>li>.treeview-menu {
    margin: 0 1px;
    background: #151336;
}

.skin-violet .sidebar a {
    color: #dbe4ff;
}

.skin-violet .sidebar a:hover {
    text-decoration: none;
}

.skin-violet .treeview-menu>li>a {
    color: #94a3b8;
}

.skin-violet .treeview-menu>li.active>a,
.skin-violet .treeview-menu>li>a:hover {
    color: #ffffff;
}

/* Modern Rounded Aesthetics for Violet Theme */
.skin-violet .box {
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border-top: none;
}

.skin-violet .btn {
    border-radius: 8px;
    /* Slightly rounded buttons */
}

.skin-violet .btn-primary {
    background-color: #7F56D9;
    border-color: #7F56D9;
}

.skin-violet .btn-primary:hover {
    background-color: #6941C6;
    border-color: #6941C6;
}

.skin-violet .info-box {
    border-radius: 16px;
}

.skin-violet .form-control {
    border-radius: 8px;
    border: 1px solid #d1d5db;
}

.skin-violet .form-control:focus {
    border-color: #7F56D9;
    box-shadow: 0 0 0 3px rgba(127, 86, 217, 0.2);
}

/* Tailwind Utilities Overlay for Themes */
/* Teal */
.tw-bg-teal-800 {
    background-color: #115e59 !important;
}

.hover\:tw-bg-teal-700:hover {
    background-color: #0f766e !important;
}

.tw-from-teal-800 {
    --tw-gradient-from: #115e59 !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(17, 94, 89, 0)) !important;
}

.tw-to-teal-900 {
    --tw-gradient-to: #134e4a !important;
}

/* Slate */
.tw-bg-slate-800 {
    background-color: #1e293b !important;
}

.hover\:tw-bg-slate-700:hover {
    background-color: #334155 !important;
}

.tw-from-slate-800 {
    --tw-gradient-from: #1e293b !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(30, 41, 59, 0)) !important;
}

.tw-to-slate-900 {
    --tw-gradient-to: #0f172a !important;
}

/* Indigo */
.tw-bg-indigo-800 {
    background-color: #3730a3 !important;
}

.hover\:tw-bg-indigo-700:hover {
    background-color: #4338ca !important;
}

.tw-from-indigo-800 {
    --tw-gradient-from: #3730a3 !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(55, 48, 163, 0)) !important;
}

.tw-to-indigo-900 {
    --tw-gradient-to: #312e81 !important;
}

/* Violet */
.tw-bg-violet-800 {
    background-color: #53389E !important;
}

.hover\:tw-bg-violet-700:hover {
    background-color: #6941C6 !important;
}

.tw-from-violet-800 {
    --tw-gradient-from: #53389E !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(83, 56, 158, 0)) !important;
}

.tw-to-violet-900 {
    --tw-gradient-to: #42307D !important;
}