/* ==========================================================================
   Biz-Grafix Custom Stylesheet
   - Sidebar: Clean White Theme with Vibrant Orange Links & Red Accents
   - Logo: 80px in height, fitted inside sidebar header
   - Top Header Bar: Vibrant Orange (following logo color scheme)
   ========================================================================== */

/* 1. Sidebar Sticky, Full Height & Clean White Theme */
aside#menu,
#menu,
.sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 230px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.03) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1001 !important;
    transition: margin-left 0.3s ease, transform 0.3s ease !important;
}

#side-menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
    min-height: 100% !important;
    height: auto !important;
    padding-bottom: 50px !important;
}

/* Slim scrollbar for sticky sidebar */
aside#menu::-webkit-scrollbar,
#menu::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
    width: 4px !important;
}

aside#menu::-webkit-scrollbar-thumb,
#menu::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    background-color: #cbd5e1 !important;
    border-radius: 4px !important;
}

aside#menu::-webkit-scrollbar-track,
#menu::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
    background: #ffffff !important;
}

/* Sidebar toggle handling (desktop collapsed) */
body.hide-sidebar:not(.show-sidebar) aside#menu,
body.hide-sidebar:not(.show-sidebar) #menu,
body.hide-sidebar:not(.show-sidebar) .sidebar {
    margin-left: -230px !important;
}

body.hide-sidebar:not(.show-sidebar) #header,
body.hide-sidebar:not(.show-sidebar) #wrapper {
    margin-left: 0 !important;
}

/* Mobile responsive sidebar handling */
@media (max-width: 768px) {
    aside#menu,
    #menu,
    .sidebar {
        margin-left: -230px !important;
        z-index: 1050 !important;
    }

    body.page-small.show-sidebar aside#menu,
    body.page-small.show-sidebar #menu,
    body.show-sidebar aside#menu,
    body.show-sidebar #menu {
        margin-left: 0 !important;
    }
}

/* 2. Logo Container & Logo Image: 80px in height */
.sidebar-logo-container,
#side-menu > li:first-child {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

#logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

#logo a,
#logo .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#logo img,
#logo a img,
#logo .logo img {
    height: 80px !important;
    max-height: 80px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    transition: transform 0.2s ease-in-out;
}

#logo a.logo-text,
#logo .logo-text {
    color: #ea580c !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* 3. Top Header Bar - Clean White with Contrasting Brand Accents */
#header {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

#header nav {
    background: #ffffff !important;
    background-image: none !important;
}

#header .hide-menu {
    color: #ea580c !important;
    cursor: pointer !important;
    padding: 18px 14px !important;
    transition: all 0.2s ease !important;
}

#header .hide-menu i {
    color: #ea580c !important;
    font-size: 18px !important;
    transition: all 0.2s ease !important;
}

#header .hide-menu:hover i {
    color: #c2410c !important;
    transform: scale(1.1);
}

#header .navbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-right: 15px !important;
}

#header .navbar-right > li {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

#header .navbar-right > li > a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 8px !important;
    color: #334155 !important;
}

#header .nav > li > a,
#header .navbar-nav > li > a {
    color: #334155 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

#header .nav > li > a:hover,
#header .nav > li > a:focus,
#header .navbar-nav > li > a:hover,
#header .navbar-nav > li > a:focus {
    background: #fff7ed !important;
    color: #ea580c !important;
    border-radius: 6px !important;
}

#header .navbar-nav > li.header-user-profile > a {
    color: #334155 !important;
}

#header .profile img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9999px !important;
    border: 2px solid #ea580c !important;
    box-shadow: 0 1px 3px rgba(234, 88, 12, 0.25) !important;
    margin-top: 0 !important;
    transition: all 0.2s ease !important;
}

#header .profile:hover img {
    border-color: #c2410c !important;
    transform: scale(1.05);
}

#header .icon i,
#header .header-timer,
#header svg {
    color: #ea580c !important;
    transition: all 0.2s ease !important;
}

#header .notifications-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
}

#header .notifications-icon span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid #fee2e2 !important;
    background-color: #fef2f2 !important;
    margin-top: 0 !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

#header .notifications-icon svg,
.notifications-wrapper .notifications-icon svg,
.notifications-icon svg {
    color: #ef4444 !important;
    stroke: #ef4444 !important;
    width: 20px !important;
    height: 20px !important;
    transition: all 0.2s ease !important;
}

#header .notifications-icon:hover span,
#header .notifications-icon:focus span {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
}

#header .notifications-icon:hover svg,
#header .notifications-icon:focus svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

#header .icon-notifications,
#header .notifications-wrapper .icon-notifications,
#header .badge,
#header .bg-warning {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

#header .mobile-menu-toggle {
    color: #ea580c !important;
    border: 1px solid #fed7aa !important;
    background-color: #fff7ed !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
}

#header .mobile-menu-toggle i {
    color: #ea580c !important;
}

#header .mobile-navbar {
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
}

#header .mobile-navbar .nav > li > a {
    color: #334155 !important;
}

#header .mobile-navbar .nav > li > a:hover {
    color: #ea580c !important;
    background-color: #fff7ed !important;
}

#header #search_input {
    background: #f8fafc !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
}

#header #search_input::placeholder {
    color: #94a3b8 !important;
}

#header #search_input:focus {
    border-color: #ea580c !important;
    background: #ffffff !important;
}

#header #top_search_button button i {
    color: #ea580c !important;
}

#header .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 3px solid #ea580c !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

#header .dropdown-menu li > a {
    color: #334155 !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    transition: all 0.15s ease !important;
}

#header .dropdown-menu li > a:hover,
#header .dropdown-menu li > a:focus {
    color: #ea580c !important;
    background-color: #fff7ed !important;
}

#header .dropdown-menu.notifications {
    min-width: 380px !important;
}

#header .dropdown-menu.notifications .notification-wrapper:hover {
    background-color: #fff7ed !important;
}

#header .dropdown-menu.notifications .unread-notification {
    background-color: #fef2f2 !important;
    border-left: 3px solid #ef4444 !important;
}

#header .dropdown-menu.notifications .notification-title {
    color: #0f172a !important;
    font-weight: 500 !important;
}

#header .dropdown-menu.notifications a.not-mark-as-read-inline {
    color: #ef4444 !important;
}

#header .dropdown-menu.notifications .tw-text-right a {
    color: #ef4444 !important;
    font-weight: 600 !important;
}

#header .dropdown-menu.notifications .tw-text-right a:hover {
    color: #dc2626 !important;
    text-decoration: underline !important;
}

#header .dropdown-menu.notifications .btn-default {
    background-color: #fff7ed !important;
    border-color: #fdba74 !important;
    color: #ea580c !important;
    font-weight: 600 !important;
}

#header .dropdown-menu.notifications .btn-default:hover {
    background-color: #ea580c !important;
    border-color: #ea580c !important;
    color: #ffffff !important;
}

/* 4. Sidebar Links - Vibrant Orange */
.sidebar li a,
#side-menu li a {
    color: #ea580c !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    padding: 9px 14px !important;
    margin: 2px 8px !important;
    border-radius: 6px !important;
    border: none !important;
    transition: all 0.18s ease-in-out !important;
}

.sidebar li a i.menu-icon,
#side-menu li a i.menu-icon {
    color: #ea580c !important;
    opacity: 0.92 !important;
    width: 20px !important;
    font-size: 15px !important;
    margin-right: 11px !important;
    display: inline-block !important;
    float: left !important;
    transition: color 0.18s ease-in-out !important;
}

.sidebar li a .menu-text,
#side-menu li a .menu-text {
    color: #ea580c !important;
    font-weight: 500 !important;
    transition: color 0.18s ease-in-out !important;
}

/* 5. Hover State - Warm Orange Tint with Red Accent Icon */
.sidebar li a:hover,
#side-menu li a:hover,
.sidebar .nav > li > a:hover,
.sidebar .nav > li > a:focus {
    background-color: #fff7ed !important;
    color: #c2410c !important;
    border-radius: 6px !important;
}

.sidebar li a:hover i.menu-icon,
#side-menu li a:hover i.menu-icon {
    color: #ef4444 !important; /* Red accent icon on hover */
    opacity: 1 !important;
}

.sidebar li a:hover .menu-text,
#side-menu li a:hover .menu-text {
    color: #c2410c !important;
}

/* 6. Active State - Red Accents */
.sidebar li.active > a,
#side-menu li.active > a,
.sidebar .nav > li.active > a {
    background-color: #fef2f2 !important; /* Soft red tint */
    color: #dc2626 !important; /* Red active text */
    border-left: 4px solid #ef4444 !important; /* Red accent border */
    border-radius: 0 6px 6px 0 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.08) !important;
}

.sidebar li.active > a i.menu-icon,
#side-menu li.active > a i.menu-icon {
    color: #ef4444 !important; /* Red active icon */
    opacity: 1 !important;
}

.sidebar li.active > a .menu-text,
#side-menu li.active > a .menu-text {
    color: #dc2626 !important; /* Red active label */
    font-weight: 600 !important;
}

/* Arrow Caret Colors */
#side-menu .arrow {
    color: #ea580c !important;
    transition: color 0.18s ease-in-out !important;
}

#side-menu li:hover > a .arrow,
#side-menu li.active > a .arrow {
    color: #ef4444 !important; /* Red accent arrow */
}

/* Badges - Red Accents */
.sidebar .badge,
#side-menu .badge,
.sidebar .menu-badge {
    background-color: #ef4444 !important; /* Red accent badge */
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 3px 7px !important;
    border-radius: 10px !important;
}

/* 7. Submenu Styles */
.sidebar li .nav-second-level {
    background: #fffbf5 !important;
    padding: 4px 0 !important;
    border-left: 2px solid #fed7aa !important;
    margin-left: 22px !important;
    margin-bottom: 4px !important;
    border-radius: 0 4px 4px 0 !important;
}

.sidebar li .nav-second-level li a {
    color: #ea580c !important;
    font-size: 13px !important;
    padding: 6px 14px !important;
    margin: 1px 4px !important;
    border-radius: 4px !important;
}

.sidebar li .nav-second-level li a:hover {
    color: #dc2626 !important; /* Red accent */
    background-color: #ffedd5 !important;
}

.sidebar li .nav-second-level li.active a {
    color: #dc2626 !important;
    background-color: #fee2e2 !important; /* Red accent active */
    font-weight: 600 !important;
    border-left: 3px solid #ef4444 !important;
    border-radius: 0 4px 4px 0 !important;
}

/* 7b. Pinned Projects Styling */
#side-menu.nav > li.pinned_project > a {
    color: #475569 !important;
}
#side-menu.nav > li.pinned_project > a:hover {
    color: #ea580c !important;
    background: #fff7ed !important;
}
.pinned-separator {
    border-top: 1px solid #f1f5f9 !important;
    margin: 10px 0 !important;
}

/* 8. Setup Slide-Out Menu (if opened) */
#setup-menu-wrapper {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.06) !important;
}

#setup-menu-wrapper .customizer-heading {
    color: #ea580c !important;
    font-weight: 700 !important;
}

#setup-menu-wrapper li a {
    color: #ea580c !important;
}

#setup-menu-wrapper li a:hover {
    color: #dc2626 !important;
    background: #fff7ed !important;
}

#setup-menu-wrapper li.active > a {
    color: #dc2626 !important;
    background: #fef2f2 !important;
    border-left: 3px solid #ef4444 !important;
}

/* 9. Dashboard Widgets Polish */
.widget-dashboard-stat {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
}

.widget-dashboard-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 10. Projects Activity Feed Polish */
.projects-activity .panel_s {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.projects-activity .activity-feed {
    max-height: 540px;
    overflow-y: auto;
    padding-right: 6px;
}

.projects-activity .activity-feed::-webkit-scrollbar {
    width: 5px;
}

.projects-activity .activity-feed::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 3px;
}

/* 11. Admin Login Page Styling */
.company-logo img {
    margin: 0 auto;
    height: 200px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.admin-login-heading {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: -0.01em;
}

@media (max-width: 768px) {
    .login_admin .authentication-form-wrapper {
        padding-top: 2rem !important;
    }
    .company-logo {
        padding: 15px 10px 8px 10px;
    }
    .company-logo img {
        height: 150px;
        max-height: 200px;
    }
    .admin-login-heading {
        font-size: 1.125rem;
    }
}

@media (max-width: 480px) {
    .login_admin .authentication-form-wrapper {
        padding-top: 1.5rem !important;
    }
    .company-logo img {
        height: 120px;
    }
    .admin-login-heading {
        font-size: 1rem;
    }
}