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

/* Dashboard Widget Enhancements */
.card-animate {
    transition: all 0.3s ease-in-out;
}
.card-animate:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.ff-secondary {
    font-family: var(--vz-font-family-secondary);
}
.bg-info-subtle {
    background-color: rgba(41, 156, 219, 0.1) !important;
}
.bg-warning-subtle {
    background-color: rgba(247, 184, 75, 0.1) !important;
}

/* ========================================
   SIDEBAR - Clean Design with Logo Emphasis
   Following Velzon Template Structure
   ======================================== */

/* Logo Section - White Background Card */
.sidebar-logo-section {
    background: #ffffff;
    margin: 12px 12px 10px;
    padding: 20px 16px;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
    z-index: 10;
    position: relative;
}

.sidebar-logo-section .navbar-brand-box {
    padding: 0;
    height: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.sidebar-logo-section .logo-dark,
.sidebar-logo-section .logo-light {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease;
}

.sidebar-logo-section .logo-dark:hover,
.sidebar-logo-section .logo-light:hover {
    transform: scale(1.02);
}

.sidebar-logo-section .logo-lg img {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
    max-height: 90px;
    width: auto;
}

/* Navigation Section */
.sidebar-nav-section {
    background: transparent;
    margin-top: 8px;
    padding: 0 6px;
}

.sidebar-nav-section .h-100 {
    padding-bottom: 20px;
}

/* Menu Items */
.sidebar-nav-section .nav-item .nav-link {
    transition: all 0.25s ease;
    border-radius: 8px;
    margin-bottom: 3px;
    position: relative;
    color: #9da5ac;
    font-weight: 500;
}

.sidebar-nav-section .nav-item .nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 50%;
    background: #40a9ff;
    border-radius: 0 2px 2px 0;
    transition: transform 0.25s ease;
}

.sidebar-nav-section .nav-item .nav-link:hover::before,
.sidebar-nav-section .nav-item .nav-link.active::before {
    transform: translateY(-50%) scaleY(1);
}

.sidebar-nav-section .nav-item .nav-link:hover {
    background: rgba(64, 169, 255, 0.05);
    color: #ffffff;
    padding-left: 16px;
}

.sidebar-nav-section .nav-item .nav-link.active {
    background: rgba(64, 169, 255, 0.15);
    color: #ffffff;
    font-weight: 600;
}

.sidebar-nav-section .nav-item .nav-link i {
    transition: transform 0.2s ease;
}

.sidebar-nav-section .nav-item .nav-link:hover i {
    transform: translateX(2px);
}

/* Menu Title */
.sidebar-nav-section .menu-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #7a8591;
    padding: 18px 16px 10px;
}

/* Dropdown */
.sidebar-nav-section .menu-dropdown {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin: 4px 8px;
    padding: 4px 0;
}

.sidebar-nav-section .menu-dropdown .nav-link {
    font-size: 13px;
    padding: 9px 14px;
    margin: 2px 8px;
    border-radius: 6px;
    color: #9da5ac;
}

.sidebar-nav-section .menu-dropdown .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding-left: 18px;
}

.sidebar-nav-section .menu-dropdown .nav-link.active {
    background: #40a9ff;
    color: #ffffff;
}

/* ========================================
   COLLAPSED SIDEBAR STYLES
   ======================================== */

/* Small Hover Mode - Collapsed State */
[data-sidebar-size=sm-hover] .sidebar-logo-section {
    margin: 8px 6px !important;
    padding: 12px 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

[data-sidebar-size=sm-hover] .sidebar-logo-section .navbar-brand-box {
    padding: 0;
}

[data-sidebar-size=sm-hover] .sidebar-logo-section .logo-lg {
    display: none !important;
}

[data-sidebar-size=sm-hover] .sidebar-logo-section .logo-sm {
    display: inline-block !important;
    max-height: 36px;
    width: auto;
}

/* Hide nav text in collapsed mode */
[data-sidebar-size=sm-hover] .sidebar-nav-section .nav-link span,
[data-sidebar-size=sm-hover] .sidebar-nav-section .badge {
    display: none !important;
}

/* Center icons in collapsed mode */
[data-sidebar-size=sm-hover] .sidebar-nav-section .nav-link {
    justify-content: center;
    padding: 0.625rem 1rem !important;
}

[data-sidebar-size=sm-hover] .sidebar-nav-section .nav-link i {
    font-size: 22px;
    margin: 0;
    min-width: 24px;
}

[data-sidebar-size=sm-hover] .sidebar-nav-section .nav-link::before {
    display: none;
}

/* Menu title styling in collapsed mode */
[data-sidebar-size=sm-hover] .sidebar-nav-section .menu-title {
    text-align: center;
    padding: 12px 8px 8px;
}

[data-sidebar-size=sm-hover] .sidebar-nav-section .menu-title span {
    display: none;
}

[data-sidebar-size=sm-hover] .sidebar-nav-section .menu-title i {
    display: inline-block;
    font-size: 1.2rem;
    color: #7a8591;
}

/* ========================================
   EXPANDED STATE (HOVER ON COLLAPSED)
   ======================================== */

/* When hovering over collapsed sidebar */
[data-sidebar-size=sm-hover] .navbar-menu:hover .sidebar-logo-section {
    margin: 12px 12px 10px !important;
    padding: 20px 16px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

[data-sidebar-size=sm-hover] .navbar-menu:hover .sidebar-logo-section .logo-lg {
    display: inline-block !important;
}

[data-sidebar-size=sm-hover] .navbar-menu:hover .sidebar-logo-section .logo-sm {
    display: none !important;
}

[data-sidebar-size=sm-hover] .navbar-menu:hover .sidebar-nav-section .nav-link span,
[data-sidebar-size=sm-hover] .navbar-menu:hover .sidebar-nav-section .menu-title span {
    display: inline-block !important;
}

[data-sidebar-size=sm-hover] .navbar-menu:hover .sidebar-nav-section .nav-link {
    justify-content: flex-start;
    padding: 0.625rem 1.5rem !important;
}

[data-sidebar-size=sm-hover] .navbar-menu:hover .sidebar-nav-section .nav-link i {
    font-size: 18px;
    margin-right: 0.665rem;
    min-width: 18px;
}

[data-sidebar-size=sm-hover] .navbar-menu:hover .sidebar-nav-section .nav-link::before {
    display: block;
}

[data-sidebar-size=sm-hover] .navbar-menu:hover .sidebar-nav-section .menu-title {
    text-align: left;
    padding: 18px 16px 10px;
}

[data-sidebar-size=sm-hover] .navbar-menu:hover .sidebar-nav-section .menu-title i {
    display: none;
}