/* 
 * Midnight Emerald Professional Theme
 * Premium Deep Tones with Brand Highlights
 */

:root {
    --brand-emerald: #86C100;
    --brand-azure: #00A6FF;
    --midnight-bg: #0f172a;
    --midnight-dark: #020617;
}

/* --- Header Styling --- */
#header {
    background: linear-gradient(135deg, var(--midnight-bg) 0%, var(--midnight-dark) 100%) !important;
    border-bottom: 2px solid var(--brand-emerald) !important;
    height: 64px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
}

/* --- Taskvera Logo - Before Settings, 100% Opacity, Vertically Centered --- */
.taskvera-logo-wrapper {
    display: flex !important;
    align-items: center !important;
    margin-right: 15px !important;
    list-style: none !important;
    height: 100% !important;
}

/* Desktop: Show Taskvera-01.png (original), Hide e-04.png (mobile) */
.taskvera-logo-desktop {
    height: 35px !important;
    width: auto !important;
    max-width: 130px !important;
    opacity: 1 !important;
    display: block !important;
}

.taskvera-logo-mobile {
    display: none !important;
}

/* Mobile: Show e-04.png, Hide Taskvera-01.png (original) */
@media (max-width: 768px) {
    .taskvera-logo-desktop {
        display: none !important;
    }
    
    .taskvera-logo-mobile {
        height: 30px !important;
        width: auto !important;
        max-width: 100px !important;
        opacity: 1 !important;
        display: block !important;
    }
    
    .taskvera-logo-wrapper {
        margin-right: 10px !important;
        height: 100% !important;
        align-items: center !important;
    }
}

#header .navbar-nav>li>a,
#header .navbar-nav>li>a>i,
#header .hide-menu,
#header .hide-menu svg,
#header .mobile-menu-toggle i {
    color: #ffffff !important;
}

#header .navbar-nav>li>a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Search Bar Refinement */
#top_search input {
    background: #d1d1d1 !important;
    /* Gray background */
    color: #000000 !important;
    /* Black text */
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 50px !important;
    /* Pill shape */
    padding-left: 40px !important;
    height: 38px !important;
    transition: all 0.3s ease;
}

#top_search input::placeholder {
    color: #666666 !important;
}

#top_search input:focus {
    background: #e2e2e2 !important;
    border-color: var(--brand-emerald) !important;
    box-shadow: 0 0 0 2px rgba(134, 193, 0, 0.2) !important;
}

#top_search_button button i {
    color: #444444 !important;
    /* Darker icon for better visibility on gray */
}

/* --- Sidebar Styling --- */
aside#menu {
    background: var(--midnight-dark) !important;
    border-right: 1px solid rgba(218, 207, 207, 0.05) !important;
}

#side-menu li a {
    color: rgba(255, 255, 255, 0.6) !important;
    border-left: 4px solid transparent;
    padding: 10px 20px !important;
    /* Reduced from 14px */
    transition: all 0.2s;
}

#side-menu li a i.menu-icon {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Sidebar Hover */
#side-menu li:hover>a {
    background: rgba(134, 193, 0, 0.05) !important;
    color: #ffffff !important;
}

#side-menu li:hover>a i.menu-icon {
    color: var(--brand-emerald) !important;
}

/* Sidebar Active */
#side-menu li.active>a {
    background: rgba(134, 193, 0, 0.15) !important;
    color: var(--brand-emerald) !important;
    border-left: 4px solid var(--brand-emerald) !important;
    font-weight: 600 !important;
}

#side-menu li.active>a i.menu-icon {
    color: var(--brand-emerald) !important;
}

/* Submenus */
#side-menu li ul.nav-second-level {
    background: rgba(0, 0, 0, 0.3) !important;
}

#side-menu li ul.nav-second-level li a {
    padding-left: 50px !important;
}

/* User Profile Section */
.sidebar-user-profile {
    background: transparent !important;
    margin-top: 70px !important;
    /* Reduced from 50px */
    padding: 10px 0px !important;
    /* Reduced from 25px */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.sidebar-user-profile a.dropdown-toggle {
    background: #d1d1d1 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--midnight-dark) !important;
    padding: 12px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.sidebar-user-profile a.dropdown-toggle span {
    color: var(--midnight-dark) !important;
    /* Force dark text for name/role/email on white bg for contrast */
}

.sidebar-user-profile .tw-truncate {
    max-width: 140px !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Setup Menu Customizer Sidebar */
#setup-menu-wrapper {
    background: var(--midnight-dark) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#setup-menu-wrapper .customizer-heading {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
    display: block !important;
    padding-bottom: 15px !important;
}

#setup-menu-wrapper ul#setup-menu li a {
    color: rgba(255, 255, 255, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#setup-menu-wrapper ul#setup-menu li a:hover,
#setup-menu-wrapper ul#setup-menu li.active>a,
#setup-menu-wrapper ul#setup-menu li ul.nav-second-level li a:hover,
#setup-menu-wrapper ul#setup-menu li ul.nav-second-level li.active>a {
    background: var(--brand-emerald) !important;
    color: #000000 !important;
}

#setup-menu-wrapper ul#setup-menu li a:hover i.menu-icon,
#setup-menu-wrapper ul#setup-menu li.active>a i.menu-icon,
#setup-menu-wrapper ul#setup-menu li ul.nav-second-level li a:hover i.menu-icon,
#setup-menu-wrapper ul#setup-menu li ul.nav-second-level li.active>a i.menu-icon {
    color: #000000 !important;
}

#setup-menu-wrapper .close-customizer {
    color: #ffffff !important;
}

/* --- Mobile Specific Refinements --- */
@media (max-width: 768px) {
    #header {
        height: 64px !important;
        padding-top: 5px !important;
    }

    /* Left Side: Hamburger */
    .hide-menu {
        margin-top: 10px !important;
        margin-left: 10px !important;
        float: left !important;
    }

    /* Middle Side: Search */
    #top_search {
        float: left !important;
        width: calc(100% - 120px) !important;
        /* Full width minus side buttons */
        margin: 8px 0 0 5px !important;
    }

    #top_search input {
        height: 36px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    /* Right Side: Toggle */
    .mobile-menu-toggle {
        margin-top: 10px !important;
        margin-right: 10px !important;
        float: right !important;
        padding: 8px !important;
    }

    /* Hide Desktop Clutter */
    #logo,
    .navbar-right,
    .mobile-icon-menu {
        display: none !important;
    }

    #search_results {
        top: 64px !important;
        width: 100vw !important;
        left: 0 !important;
    }
}

/* --- Dropdown Menu Styling (Quick Create, Notifications, Profile) --- */
.dropdown-menu {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.dropdown-menu li>a {
    color: #000000 !important;
}

.dropdown-menu li>a:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #000000 !important;
}

.dropdown-menu .divider {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.dropdown-header {
    color: #000000 !important;
    font-weight: 600 !important;
}

/* Specific fix for Quick Create icons */
.dropdown-menu li a i {
    color: #000000 !important;
}

.dropdown-menu li a:hover i {
    color: var(--brand-emerald) !important;
}

/* --- Bootstrap Select Dropdown Styling --- */
/* Updated: 2026-01-13 - White background, black text for all dropdowns */
.bootstrap-select .dropdown-menu,
.bootstrap-select .dropdown-menu.inner,
.bootstrap-select.open .dropdown-menu,
.bootstrap-select.open .dropdown-menu.inner {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.bootstrap-select .dropdown-menu li,
.bootstrap-select .dropdown-menu.inner li,
.bootstrap-select .dropdown-menu>li,
.bootstrap-select .dropdown-menu.inner>li {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu.inner li a,
.bootstrap-select .dropdown-menu>li>a,
.bootstrap-select .dropdown-menu.inner>li>a {
    color: #000000 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus,
.bootstrap-select .dropdown-menu.inner li a:hover,
.bootstrap-select .dropdown-menu.inner li a:focus,
.bootstrap-select .dropdown-menu>li>a:hover,
.bootstrap-select .dropdown-menu>li>a:focus,
.bootstrap-select .dropdown-menu.inner>li>a:hover,
.bootstrap-select .dropdown-menu.inner>li>a:focus {
    background: rgba(0, 0, 0, 0.05) !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #000000 !important;
}

.bootstrap-select .dropdown-menu li.active,
.bootstrap-select .dropdown-menu li.active a,
.bootstrap-select .dropdown-menu li.active a:hover,
.bootstrap-select .dropdown-menu li.active a:focus,
.bootstrap-select .dropdown-menu.inner li.active,
.bootstrap-select .dropdown-menu.inner li.active a,
.bootstrap-select .dropdown-menu.inner li.active a:hover,
.bootstrap-select .dropdown-menu.inner li.active a:focus,
.bootstrap-select .dropdown-menu>li.active>a,
.bootstrap-select .dropdown-menu>li.active>a:hover,
.bootstrap-select .dropdown-menu>li.active>a:focus {
    background: rgba(0, 0, 0, 0.1) !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #000000 !important;
}

.bootstrap-select .dropdown-menu li.selected,
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu.inner li.selected,
.bootstrap-select .dropdown-menu.inner li.selected a,
.bootstrap-select .dropdown-menu>li.selected>a {
    background: rgba(0, 0, 0, 0.1) !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #000000 !important;
}

.bootstrap-select .dropdown-menu .dropdown-header,
.bootstrap-select .dropdown-menu.inner .dropdown-header {
    color: #000000 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.bootstrap-select .dropdown-menu .divider,
.bootstrap-select .dropdown-menu.inner .divider {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Bootstrap Select Search Box */
.bootstrap-select .bs-searchbox,
.bootstrap-select .bs-searchbox input,
.bootstrap-select .dropdown-menu .bs-searchbox,
.bootstrap-select .dropdown-menu .bs-searchbox input {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

.bootstrap-select .bs-searchbox input::placeholder,
.bootstrap-select .dropdown-menu .bs-searchbox input::placeholder {
    color: #666666 !important;
}

/* Override any inline styles or dynamic styles */
.bootstrap-select .dropdown-menu * {
    color: #000000 !important;
}

.bootstrap-select .dropdown-menu li.active small {
    color: #666666 !important;
}

/* --- Mobile Collapse Menu Styling --- */
#mobile-collapse {
    background: var(--midnight-bg) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#mobile-collapse ul.nav li a {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#mobile-collapse ul.nav li a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--brand-emerald) !important;
}

/* --- Lead Management Header Section --- */
.lead-management-header {
    background: linear-gradient(135deg, var(--midnight-bg) 0%, var(--midnight-dark) 100%) !important;
    border-radius: 16px !important;
    padding: 24px 32px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

.lead-header-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.lead-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex: 1 !important;
}

.lead-header-icon {
    font-size: 48px !important;
    color: #ffffff !important;
    opacity: 0.9 !important;
}

.lead-header-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.lead-header-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.lead-header-subtitle {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.lead-header-actions {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.lead-action-btn {
    padding: 10px 20px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.lead-action-primary {
    background: #007bff !important;
    color: #ffffff !important;
}

.lead-action-primary:hover {
    background: #0056b3 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3) !important;
}

.lead-action-secondary {
    background: #6c757d !important;
    color: #ffffff !important;
}

.lead-action-secondary:hover {
    background: #545b62 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3) !important;
}

.lead-action-info {
    background: #17a2b8 !important;
    color: #ffffff !important;
}

.lead-action-info:hover {
    background: #138496 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3) !important;
}

/* Mobile Responsive for Header */
@media (max-width: 768px) {
    .lead-management-header {
        padding: 20px !important;
        border-radius: 12px !important;
    }
    
    .lead-header-content {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .lead-header-left {
        width: 100% !important;
    }
    
    .lead-header-icon {
        font-size: 36px !important;
    }
    
    .lead-header-title {
        font-size: 22px !important;
    }
    
    .lead-header-subtitle {
        font-size: 13px !important;
    }
    
    .lead-header-actions {
        width: 100% !important;
        flex-direction: column !important;
    }
    
    .lead-action-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* --- Lead Status Cards Styling - Header Style --- */
.leads-status-cards {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
}

.leads-status-cards::-webkit-scrollbar {
    height: 6px !important;
}

.leads-status-cards::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}

.leads-status-cards::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
}

.leads-status-cards::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

.lead-status-card {
    min-width: 160px !important;
    max-width: 200px !important;
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, var(--midnight-bg) 0%, var(--midnight-dark) 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 18px 22px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    position: relative !important;
    overflow: hidden !important;
}

.lead-status-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: var(--brand-emerald) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.lead-status-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.4), 0 4px 8px -2px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.lead-status-card:hover::before {
    opacity: 1 !important;
}

.lead-status-button {
    background: linear-gradient(135deg, var(--midnight-bg) 0%, var(--midnight-dark) 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    cursor: pointer !important;
    text-align: left !important;
    outline: none !important;
}

.lead-status-button:hover {
    background: linear-gradient(135deg, var(--midnight-dark) 0%, var(--midnight-bg) 100%) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.lead-status-button:focus {
    outline: 2px solid var(--brand-emerald) !important;
    outline-offset: 2px !important;
}

.lead-status-lost {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%) !important;
    border-color: #fc2d42 !important;
    color: #ffffff !important;
}

.lead-status-count {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
    color: #ffffff !important;
}

.lead-status-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    color: #ffffff !important;
}

.lead-status-percent {
    font-size: 11px !important;
    font-weight: 500 !important;
    opacity: 0.7 !important;
    margin-top: 4px !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Override color for status cards to use white text on dark background */
.lead-status-button .lead-status-count,
.lead-status-button .lead-status-name {
    color: #ffffff !important;
}

/* Add accent left border based on status color */
.lead-status-button {
    border-left: 4px solid var(--status-color, var(--brand-emerald)) !important;
}

/* Use status color as accent on hover with glow effect */
.lead-status-button:hover {
    border-left-width: 4px !important;
    box-shadow: 0 0 0 2px rgba(134, 193, 0, 0.2), 0 8px 16px -4px rgba(0, 0, 0, 0.4) !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .leads-status-cards {
        gap: 10px !important;
        padding-bottom: 10px !important;
    }
    
    .lead-status-card {
        min-width: 140px !important;
        max-width: 170px !important;
        padding: 14px 18px !important;
        border-radius: 12px !important;
    }
    
    .lead-status-count {
        font-size: 24px !important;
    }
    
    .lead-status-name {
        font-size: 13px !important;
    }
}

/* --- Grouped Kanban View Styling - Service Call Dashboard Style --- */
.leads-kan-ban {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

#kan-ban-tab {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    padding: 20px 0 !important;
}

/* Service Call Dashboard Style Kanban Board */
#kan-ban {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.kanban-grouped-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kanban-group-wrapper {
    flex: 1 1 calc(25% - 20px) !important;
    min-width: 250px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

.kan-ban-group {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 280px) !important;
    display: flex !important;
    flex-direction: column !important;
    background: #f8f9fa !important;
    border-radius: 10px !important;
    padding: 10px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.kan-ban-col-wrapper {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Column Header - Service Call Style */
.kan-ban-group .panel-heading {
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 10px !important;
    border-radius: 5px !important;
    text-align: center !important;
    color: white !important;
    margin-bottom: 10px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.kan-ban-group .panel-heading .heading {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: white !important;
}

/* Kanban Column Structure - Fixed Height with Internal Scroll */
.kan-ban-group .panel_s {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 280px) !important;
    max-height: calc(100vh - 280px) !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.kan-ban-group .kan-ban-content-wrapper {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    max-height: 100% !important;
    height: auto !important;
    word-break: break-word !important;
    word-wrap: break-word !important;
}

.kan-ban-group .kan-ban-content {
    min-height: auto !important;
    height: auto !important;
}

/* Kanban List - Service Call Style */
.kan-ban-group .status.leads-status {
    min-height: 100px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Empty State - Service Call Style */
.kan-ban-group .empty-state {
    text-align: center !important;
    font-size: 12px !important;
    color: #888 !important;
    margin-top: 10px !important;
    padding: 20px 10px !important;
}

#kan-ban .kan-ban-col {
    float: none !important;
    display: block !important;
    height: 100% !important;
    width: 100% !important;
}

/* Clear floats for Bootstrap grid */
.kanban-grouped-row::after {
    content: "";
    display: table;
    clear: both;
}

/* Override any conflicting styles for kanban columns */
.kan-ban-col-wrapper .panel_s {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Ensure status list doesn't expand infinitely */
.kan-ban-group .status.leads-status {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* Custom scrollbar styling for kanban columns */
.kan-ban-group .kan-ban-content-wrapper::-webkit-scrollbar {
    width: 8px !important;
}

.kan-ban-group .kan-ban-content-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 10px !important;
}

.kan-ban-group .kan-ban-content-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 10px !important;
}

.kan-ban-group .kan-ban-content-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Responsive adjustments - Service Call Style */
@media (max-width: 1024px) {
    .kanban-group-wrapper {
        flex: 1 1 calc(50% - 20px) !important;
    }
}

@media (max-width: 768px) {
    .kanban-group-wrapper {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
    
    .kan-ban-group {
        max-height: calc(100vh - 250px) !important;
    }
    
    .kan-ban-group .panel_s {
        height: calc(100vh - 250px) !important;
        max-height: calc(100vh - 250px) !important;
    }
}