/* ==========================================================================
   FLOW CRM (Perfex CRM) Complete Desktop & Mobile Navigation & Card Styling
   ========================================================================== */

/* 1. Global Clickable Cards & Widgets */
.top_stats_card_link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
}

.top_stats_card_link:hover,
.top_stats_card_link:focus {
    text-decoration: none !important;
    color: inherit !important;
}

.top_stats_card_link .top_stats_wrapper {
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.top_stats_card_link:hover .top_stats_wrapper {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09) !important;
    border-color: #cbd5e1 !important;
}

.top_stats_card_link:active .top_stats_wrapper {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

/* 2. Menu Toggle Button */
.hide-menu {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 100 !important;
}

/* 3. Mobile Specific Responsive Layout (max-width: 768px) */
@media (max-width: 768px) {
    /* Prevent horizontal page shifting on mobile when sidebar is closed */
    html,
    body:not(.show-sidebar) {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Mobile Header Layout */
    #header {
        width: 100% !important;
        max-width: 100vw !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 8px !important;
        height: 54px !important;
        min-height: 54px !important;
        position: relative !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
    }

    #header .hide-menu {
        margin: 0 !important;
        padding: 6px 8px !important;
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    #header nav {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin-left: 6px !important;
        overflow: hidden !important;
    }

    #header nav > .tw-flex {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }

    #top_search {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    #top_search #search_input {
        width: 100% !important;
        max-width: 100% !important;
        height: 36px !important;
        font-size: 13px !important;
        margin: 0 !important;
        padding-left: 32px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }

    #top_search_button {
        left: 6px !important;
        top: 2px !important;
    }

    #header .navbar-right {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        gap: 2px !important;
        list-style: none !important;
    }

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

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

    /* Mobile Sidebar & Drawer Overlay */
    body.show-sidebar .sidebar,
    body.page-small.show-sidebar .sidebar,
    body.show-sidebar #menu,
    body.page-small.show-sidebar #menu {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        margin-left: 0 !important;
        width: 260px !important;
        height: 100vh !important;
        z-index: 99999 !important;
        background: #ffffff !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.show-sidebar #wrapper:after,
    body.page-small.show-sidebar #wrapper:after {
        content: "" !important;
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(15, 23, 42, 0.45) !important;
        z-index: 99990 !important;
        pointer-events: auto !important;
        opacity: 1 !important;
    }

    /* Mobile Content Layout */
    .content {
        padding: 12px 10px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .content > .row,
    .dashboard .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
        width: auto !important;
    }

    .content [class*="col-"],
    .dashboard [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* Disable protruding drag handles on mobile */
    .widget-dragger {
        display: none !important;
        left: 0 !important;
    }

    /* Dashboard Options Button */
    .screen-options-btn {
        right: 10px !important;
        top: 0 !important;
        font-size: 11.5px !important;
        padding: 4px 10px !important;
        border-radius: 0 0 6px 6px !important;
        z-index: 30 !important;
    }

    .screen-options-area {
        padding: 10px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Dashboard Stat Cards & Panels */
    .top_stats_wrapper {
        padding: 12px 14px 14px 14px !important;
        margin-bottom: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .widget,
    .panel_s,
    .card {
        margin-bottom: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 8px !important;
    }

    .panel_s .panel-body {
        padding: 12px 10px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Text wrapping inside stat items */
    .top_stats_wrapper .tw-truncate {
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 12.5px !important;
    }

    /* Tables, DataTables, & Modals */
    .table-responsive,
    .dataTables_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 12px !important;
    }

    table.dataTable,
    .table {
        width: 100% !important;
        max-width: 100% !important;
    }
}