/* ========================================
   MOBILE RESPONSIVE FIXES - CRITICAL
   Load this AFTER crm-style.css
   ======================================== */

/* Force mobile viewport */
@viewport {
    width: device-width;
    zoom: 1.0;
}

/* ========================================
   MOBILE SIDEBAR - HIDE BY DEFAULT
   ======================================== */

@media (max-width: 767.98px) {
    /* Hide sidebar by default on mobile */
    .sidebar {
        transform: translateX(-100%) !important;
        position: fixed !important;
        z-index: 9999 !important;
        width: 280px !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        transition: transform 0.3s ease-in-out !important;
    }
    
    /* Show sidebar when active */
    .sidebar.show {
        transform: translateX(0) !important;
    }
    
    /* Remove left margin from content */
    #page-content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Overlay backdrop */
    body.sidebar-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9998;
        animation: fadeIn 0.3s;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    /* Prevent body scroll when sidebar open */
    body.sidebar-open {
        overflow: hidden;
    }
    
    /* MOVE MENU BUTTON TO HEADER - LEFT SIDE */
    .sidebar-toggle {
        display: flex !important;
        position: static !important; /* Changed from fixed */
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: var(--gray-700, #374151) !important;
        border: 1px solid var(--gray-300, #d1d5db) !important;
        box-shadow: none !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        padding: 0 !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
    }
    
    .sidebar-toggle:hover,
    .sidebar-toggle:active {
        background: var(--gray-100, #f3f4f6) !important;
        color: var(--primary-color, #032C82) !important;
        transform: none !important;
    }
    
    /* Show menu button in topbar */
    .topbar .d-md-none {
        display: flex !important;
    }
}

/* ========================================
   TOPBAR MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 767.98px) {
    .topbar {
        padding: 8px 0 !important;
        height: auto !important;
    }
    
    .topbar .container-fluid {
        flex-wrap: wrap !important;
        padding: 0 12px !important;
    }
    
    /* Hide desktop sidebar toggle */
    #sidebarToggleDesktop {
        display: none !important;
    }
    
    /* Search bar - full width on new row */
    .topbar .flex-grow-1 {
        order: 3 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin: 8px 0 0 0 !important;
        padding: 0 !important;
    }
    
    .topbar .position-relative {
        max-width: 100% !important;
    }
    
    #universalSearch {
        width: 100% !important;
        font-size: 14px !important;
        padding: 8px 12px !important;
    }
    
    /* User menu - compact */
    .topbar .navbar-nav {
        order: 2 !important;
        gap: 8px !important;
    }
    
    /* Hide user name and role on mobile */
    .topbar .d-none.d-lg-flex {
        display: none !important;
    }
    
    /* Notification icon */
    .topbar .bi-bell {
        font-size: 20px !important;
    }
    
    /* User avatar */
    .topbar .user-avatar-placeholder,
    .topbar img.rounded-circle {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ========================================
   MAIN CONTENT MOBILE
   ======================================== */

@media (max-width: 767.98px) {
    main.container-fluid {
        padding: 12px !important;
        min-height: calc(100vh - 100px) !important;
    }
    
    /* Page headers */
    .page-header,
    .d-flex.justify-content-between.align-items-center {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    .page-header h1,
    .page-header h2,
    .h3 {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }
    
    /* Button groups in headers */
    .page-header .d-flex,
    .d-flex.gap-2 {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    
    .page-header .btn,
    .d-flex.gap-2 .btn {
        flex: 1 1 auto !important;
        min-width: 120px !important;
        font-size: 13px !important;
        padding: 8px 12px !important;
    }
}

/* ========================================
   CARDS & WIDGETS MOBILE
   ======================================== */

@media (max-width: 767.98px) {
    .card {
        margin-bottom: 16px !important;
        border-radius: 8px !important;
    }
    
    .card-header {
        padding: 12px !important;
        font-size: 16px !important;
    }
    
    .card-body {
        padding: 12px !important;
    }
    
    .card-footer {
        padding: 12px !important;
    }
    
    /* Widget cards */
    .widget,
    .col-md-3,
    .col-md-4,
    .col-md-6,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
    }
    
    .widget {
        padding: 16px !important;
    }
    
    .widget h3 {
        font-size: 24px !important;
    }
    
    .widget h6 {
        font-size: 12px !important;
    }
    
    .widget-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 24px !important;
    }
    
    /* Summary cards */
    .bg-light.rounded {
        padding: 12px !important;
    }
    
    .bg-light.rounded h3 {
        font-size: 24px !important;
    }
    
    .bg-light.rounded .fs-1 {
        font-size: 32px !important;
    }
}

/* ========================================
   TABLES MOBILE - HORIZONTAL SCROLL
   ======================================== */

@media (max-width: 767.98px) {
    .table-responsive {
        margin: 0 -12px !important;
        width: calc(100% + 24px) !important;
        border-radius: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .table {
        min-width: 800px !important;
        font-size: 12px !important;
        margin-bottom: 0 !important;
    }
    
    .table thead th {
        padding: 8px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        position: sticky !important;
        top: 0 !important;
        background: #f9fafb !important;
        z-index: 10 !important;
    }
    
    .table tbody td {
        padding: 8px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    
    .table .btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
    
    .table .badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    
    /* DataTables mobile */
    .dataTables_wrapper {
        padding: 8px !important;
    }
    
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        margin-bottom: 12px !important;
        width: 100% !important;
    }
    
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .dataTables_wrapper .dataTables_info {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }
    
    .dataTables_wrapper .dataTables_paginate {
        font-size: 12px !important;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 4px 8px !important;
        margin: 0 2px !important;
        font-size: 11px !important;
    }
}

/* ========================================
   FORMS MOBILE
   ======================================== */

@media (max-width: 767.98px) {
    .form-control,
    .form-select {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 10px 12px !important;
        height: auto !important;
    }
    
    .form-label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }
    
    .form-text {
        font-size: 11px !important;
    }
    
    /* Form rows - stack on mobile */
    .row .col-md-6,
    .row .col-md-4,
    .row .col-md-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
    }
    
    /* Offcanvas - full screen on mobile */
    .offcanvas {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .offcanvas-header {
        padding: 16px !important;
    }
    
    .offcanvas-title {
        font-size: 18px !important;
    }
    
    .offcanvas-body {
        padding: 16px !important;
    }
}

/* ========================================
   BUTTONS MOBILE
   ======================================== */

@media (max-width: 767.98px) {
    .btn {
        font-size: 13px !important;
        padding: 10px 16px !important;
        min-height: 44px !important; /* Touch target */
    }
    
    .btn-sm {
        font-size: 12px !important;
        padding: 6px 12px !important;
        min-height: 36px !important;
    }
    
    .btn-lg {
        font-size: 16px !important;
        padding: 12px 20px !important;
        min-height: 48px !important;
    }
    
    /* Button groups - stack vertically */
    .btn-group {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .btn-group .btn {
        width: 100% !important;
        border-radius: 6px !important;
        margin-bottom: 8px !important;
    }
    
    /* Action buttons in cards */
    .card-header .btn-group,
    .card-header .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    
    .card-header .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ========================================
   MODALS MOBILE
   ======================================== */

@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100% - 16px) !important;
    }
    
    .modal-content {
        border-radius: 12px !important;
    }
    
    .modal-header {
        padding: 16px !important;
    }
    
    .modal-title {
        font-size: 18px !important;
    }
    
    .modal-body {
        padding: 16px !important;
        max-height: calc(100vh - 200px) !important;
        overflow-y: auto !important;
    }
    
    .modal-footer {
        padding: 12px 16px !important;
        flex-direction: column !important;
    }
    
    .modal-footer .btn {
        width: 100% !important;
        margin: 4px 0 !important;
    }
}

/* ========================================
   DROPDOWNS MOBILE
   ======================================== */

@media (max-width: 767.98px) {
    .dropdown-menu {
        font-size: 14px !important;
        min-width: 200px !important;
        max-width: calc(100vw - 32px) !important;
    }
    
    .dropdown-item {
        padding: 12px 16px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
    
    .dropdown-header {
        padding: 12px 16px !important;
        font-size: 12px !important;
    }
}

/* ========================================
   BADGES & LABELS MOBILE
   ======================================== */

@media (max-width: 767.98px) {
    .badge {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
    
    .badge-lg {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }
}

/* ========================================
   PAGINATION MOBILE
   ======================================== */

@media (max-width: 767.98px) {
    .pagination {
        font-size: 12px !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
    }
    
    .page-link {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    /* Hide page numbers on very small screens */
    .pagination .page-item:not(.active):not(:first-child):not(:last-child) {
        display: none !important;
    }
}

/* ========================================
   TABS MOBILE
   ======================================== */

@media (max-width: 767.98px) {
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        border-bottom: 2px solid var(--gray-200, #e5e7eb) !important;
        margin: 0 -12px !important;
        padding: 0 12px !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
    }
    
    .nav-tabs::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari */
    }
    
    .nav-tabs .nav-link {
        font-size: 14px !important;
        padding: 12px 20px !important;
        white-space: nowrap !important;
        border: none !important;
        border-bottom: 3px solid transparent !important;
        background: transparent !important;
        color: var(--gray-600, #6b7280) !important;
        font-weight: 500 !important;
        flex-shrink: 0 !important;
    }
    
    .nav-tabs .nav-link.active {
        color: var(--primary-color, #032C82) !important;
        border-bottom-color: var(--primary-color, #032C82) !important;
        background: transparent !important;
        font-weight: 600 !important;
    }
    
    .nav-tabs .nav-link:hover {
        border-bottom-color: var(--gray-400, #9ca3af) !important;
    }
    
    /* Tab content */
    .tab-content {
        padding-top: 16px !important;
    }
}

/* ========================================
   TOAST NOTIFICATIONS MOBILE
   ======================================== */

@media (max-width: 767.98px) {
    .toast-container {
        left: 8px !important;
        right: 8px !important;
        top: 8px !important;
    }
    
    .toast {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .toast-header {
        padding: 12px !important;
        font-size: 14px !important;
    }
    
    .toast-body {
        padding: 12px !important;
        font-size: 13px !important;
    }
    
    .alert.position-fixed {
        left: 8px !important;
        right: 8px !important;
        top: 8px !important;
        min-width: auto !important;
        max-width: calc(100% - 16px) !important;
        transform: translateX(0) !important;
    }
}

/* ========================================
   CHARTS MOBILE
   ======================================== */

@media (max-width: 767.98px) {
    canvas {
        max-height: 250px !important;
    }
    
    .card-body canvas {
        height: 200px !important;
    }
}

/* ========================================
   PROGRESS BARS MOBILE
   ======================================== */

@media (max-width: 767.98px) {
    .progress {
        height: 16px !important;
    }
    
    .progress-bar {
        font-size: 11px !important;
    }
}

/* ========================================
   UTILITY CLASSES MOBILE
   ======================================== */

@media (max-width: 767.98px) {
    /* Spacing utilities */
    .mb-4 { margin-bottom: 16px !important; }
    .mt-4 { margin-top: 16px !important; }
    .p-4 { padding: 16px !important; }
    .px-4 { padding-left: 16px !important; padding-right: 16px !important; }
    .py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
    
    /* Gap utilities */
    .gap-3 { gap: 12px !important; }
    .gap-4 { gap: 16px !important; }
    
    /* Text sizes */
    .fs-1 { font-size: 32px !important; }
    .fs-2 { font-size: 28px !important; }
    .fs-3 { font-size: 24px !important; }
    .fs-4 { font-size: 20px !important; }
    .fs-5 { font-size: 18px !important; }
    
    /* Hide on mobile */
    .d-none-mobile {
        display: none !important;
    }
}

/* ========================================
   EXTRA SMALL DEVICES (< 576px)
   ======================================== */

@media (max-width: 575.98px) {
    main.container-fluid {
        padding: 8px !important;
    }
    
    .card {
        margin-bottom: 12px !important;
    }
    
    .card-header,
    .card-body,
    .card-footer {
        padding: 10px !important;
    }
    
    .widget {
        padding: 12px !important;
    }
    
    .btn {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
    
    h1, .h1 { font-size: 22px !important; }
    h2, .h2 { font-size: 20px !important; }
    h3, .h3 { font-size: 18px !important; }
    h4, .h4 { font-size: 16px !important; }
    h5, .h5 { font-size: 14px !important; }
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */

@media (max-width: 767.98px) and (orientation: landscape) {
    .sidebar {
        width: 240px !important;
    }
    
    .sidebar-header {
        padding: 12px !important;
    }
    
    .menu-item {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    main.container-fluid {
        padding: 12px !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .sidebar,
    .topbar,
    .sidebar-toggle,
    .toast-container,
    .btn,
    .offcanvas,
    .modal-backdrop {
        display: none !important;
    }
    
    #page-content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .table {
        font-size: 10px !important;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus visible for keyboard navigation */


/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   COLLAPSIBLE FILTERS FOR MOBILE
   ======================================== */

@media (max-width: 767.98px) {
    /* Filter container */
    .filter-section,
    .card-body.filter-container {
        padding: 0 !important;
    }
    
    /* Filter toggle button */
    .filter-toggle-btn {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 16px !important;
        background: var(--gray-50, #f9fafb) !important;
        border: 1px solid var(--gray-200, #e5e7eb) !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        color: var(--gray-900, #111827) !important;
        margin-bottom: 12px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    
    .filter-toggle-btn:hover {
        background: var(--gray-100, #f3f4f6) !important;
        border-color: var(--gray-300, #d1d5db) !important;
    }
    
    .filter-toggle-btn.collapsed {
        border-radius: 8px !important;
    }
    
    .filter-toggle-btn:not(.collapsed) {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-color: transparent !important;
        background: white !important;
    }
    
    .filter-toggle-btn .bi {
        transition: transform 0.2s ease !important;
    }
    
    .filter-toggle-btn:not(.collapsed) .bi {
        transform: rotate(180deg) !important;
    }
    
    /* Filter collapse content */
    .filter-collapse {
        border: 1px solid var(--gray-200, #e5e7eb) !important;
        border-top: none !important;
        border-radius: 0 0 8px 8px !important;
        padding: 16px !important;
        background: white !important;
        margin-bottom: 16px !important;
    }
    
    /* Filter form groups */
    .filter-collapse .mb-3,
    .filter-collapse .form-group {
        margin-bottom: 16px !important;
    }
    
    .filter-collapse .mb-3:last-child,
    .filter-collapse .form-group:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Filter labels */
    .filter-collapse .form-label {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--gray-700, #374151) !important;
        margin-bottom: 6px !important;
        display: block !important;
    }
    
    /* Filter inputs */
    .filter-collapse .form-control,
    .filter-collapse .form-select {
        font-size: 15px !important;
        padding: 10px 12px !important;
        border: 1px solid var(--gray-300, #d1d5db) !important;
        border-radius: 6px !important;
    }
    
    /* Filter buttons */
    .filter-collapse .btn-group,
    .filter-collapse .d-flex.gap-2 {
        display: flex !important;
        gap: 8px !important;
        margin-top: 16px !important;
    }
    
    .filter-collapse .btn {
        flex: 1 !important;
        font-size: 14px !important;
        padding: 10px 16px !important;
        font-weight: 600 !important;
    }
    
    /* Quick filter chips */
    .filter-chips {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    
    .filter-chip {
        display: inline-flex !important;
        align-items: center !important;
        padding: 6px 12px !important;
        background: var(--primary-lightest, #e6eaf5) !important;
        color: var(--primary-color, #032C82) !important;
        border-radius: 20px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        border: 1px solid var(--primary-light, #0439a8) !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    
    .filter-chip:hover {
        background: var(--primary-light, #0439a8) !important;
        color: white !important;
    }
    
    .filter-chip.active {
        background: var(--primary-color, #032C82) !important;
        color: white !important;
        border-color: var(--primary-color, #032C82) !important;
    }
    
    .filter-chip .bi {
        margin-left: 6px !important;
        font-size: 12px !important;
    }
    
    /* Active filters indicator */
    .active-filters-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 20px !important;
        height: 20px !important;
        padding: 0 6px !important;
        background: var(--primary-color, #032C82) !important;
        color: white !important;
        border-radius: 10px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        margin-left: 8px !important;
    }
}

/* ========================================
   MOBILE FILTER ACCORDION ANIMATION
   ======================================== */

@media (max-width: 767.98px) {
    .filter-collapse {
        transition: all 0.3s ease-in-out !important;
        overflow: hidden !important;
    }
    
    .filter-collapse.collapsing {
        transition: height 0.3s ease !important;
    }
    
    .filter-collapse.show {
        display: block !important;
    }
    
    .filter-collapse:not(.show) {
        display: none !important;
    }
}