/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

:root, [data-theme=default], [data-topbar=light], [data-sidebar=dark] {
    /* Primary Color: #0C7849 (Green) */
    --vz-primary: #0C7849 !important;
    --vz-primary-rgb: 12, 120, 73 !important;
    
    /* Secondary Color: #F58634 (Orange) */
    --vz-secondary: #F58634 !important;
    --vz-secondary-rgb: 245, 134, 52 !important;

    /* Theme Accent Colors & Links */
    --vz-link-color: #0C7849 !important;
    --vz-link-hover-color: #054c2d !important;

    /* Buttons */
    --vz-btn-primary-bg: #0C7849 !important;
    --vz-btn-primary-border: #0C7849 !important;
    --vz-btn-primary-hover-bg: #054c2d !important;
    --vz-btn-primary-hover-border: #054c2d !important;

    /* Success & warning */
    --vz-success: #0C7849 !important;
    --vz-success-rgb: 12, 120, 73 !important;
    --vz-warning: #F58634 !important;
    --vz-warning-rgb: 245, 134, 52 !important;
}

/* Override standard bootstrap theme variables */
.btn-primary {
    background-color: #0C7849 !important;
    border-color: #0C7849 !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #054c2d !important;
    border-color: #054c2d !important;
    color: #fff !important;
}

.btn-secondary {
    background-color: #F58634 !important;
    border-color: #F58634 !important;
    color: #fff !important;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: #d66b1a !important;
    border-color: #d66b1a !important;
    color: #fff !important;
}

.text-primary {
    color: #0C7849 !important;
}
.text-secondary {
    color: #F58634 !important;
}

.bg-primary {
    background-color: #0C7849 !important;
}
.bg-secondary {
    background-color: #F58634 !important;
}

.bg-primary-subtle {
    background-color: rgba(12, 120, 73, 0.1) !important;
    color: #0C7849 !important;
}
.bg-secondary-subtle {
    background-color: rgba(245, 134, 52, 0.1) !important;
    color: #F58634 !important;
}

.badge-primary {
    background-color: rgba(12, 120, 73, 0.1) !important;
    color: #0C7849 !important;
}

/* ==========================================
   SIDEBAR TEXT CONTRAST OVERRIDES (PURE WHITE)
   ========================================== */
[data-sidebar=dark] .navbar-menu {
    --vz-vertical-menu-item-color: rgba(255, 255, 255, 0.8) !important;
    --vz-vertical-menu-item-hover-color: #ffffff !important;
    --vz-vertical-menu-item-active-color: #ffffff !important;
    --vz-vertical-menu-sub-item-color: rgba(255, 255, 255, 0.7) !important;
    --vz-vertical-menu-sub-item-hover-color: #ffffff !important;
    --vz-vertical-menu-title-color: rgba(255, 255, 255, 0.45) !important;
}

.navbar-menu .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
}
.navbar-menu .navbar-nav .nav-link:hover {
    color: #ffffff !important;
}
.navbar-menu .navbar-nav .nav-link i {
    color: rgba(255, 255, 255, 0.7) !important;
}
.navbar-menu .navbar-nav .nav-link:hover i {
    color: #ffffff !important;
}
.navbar-menu .navbar-nav .menu-title {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Sidebar active link styling */
.navbar-menu .navbar-nav .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(245, 134, 52, 0.18) !important; /* Premium brand secondary orange subtle backdrop */
    border-left: 3px solid #F58634 !important; /* Sidebar orange active notch */
}
.navbar-menu .navbar-nav .nav-link.active i {
    color: #F58634 !important; /* Active icon matches secondary orange */
}
.navbar-menu .navbar-nav .nav-sm .nav-link.active {
    color: #F58634 !important;
}
.navbar-menu .navbar-nav .nav-sm .nav-link.active:before {
    background-color: #F58634 !important;
}

/* Login Screen Background Styling */
.auth-page-wrapper {
    background: linear-gradient(135deg, #0C7849 0%, #054c2d 100%) !important;
}

/* White container wrapper for the logo.png to prevent background color conflict */
.brand-logo-container {
    background-color: #ffffff !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Make sure small/collapsed logo fits nicely */
.logo-sm .brand-logo-container {
    padding: 3px 5px !important;
    border-radius: 4px !important;
}