:root {
            --primary-color: #4A90E2;
            --primary-dark: #357ABD;
            --primary-light: #6BA3E8;
            --success-color: #28a745;
            --danger-color: #dc3545;
            --warning-color: #ffc107;
            --light-bg: #f8f9fa;
            --border-color: #dee2e6;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding-bottom: 2rem;
        }

        .navbar {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: white !important;
        }

        .navbar-brand i {
            margin-right: 0.5rem;
        }

        /* Sidebar layout */
        .sidebar {
            position: fixed;
            top: 56px; /* navbar height */
            left: 0;
            width: 260px;
            height: calc(100% - 56px);
            background: #ffffff;
            border-right: 1px solid var(--border-color);
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            transform: translateX(-270px);
            transition: transform 0.2s ease-in-out;
            z-index: 1040;
            padding-top: 0.5rem;
        }
        .sidebar.open { transform: translateX(0); }
        .sidebar .sidebar-header { padding: 0.5rem 0.75rem; }
        .sidebar .list-group-item { border: 0; border-radius: 0; padding: 0.6rem 0.75rem; }
        .sidebar .list-group-item:hover { background: #f5f7fb; }
        .sidebar .sidebar-section-title {
            padding: 0.5rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: #6c757d;
            text-transform: uppercase;
            border-top: 1px solid var(--border-color);
            margin-top: 0.25rem;
        }
        /* Sidebar backdrop for outside-click close */
        .sidebar-backdrop {
            position: fixed;
            top: 56px; /* navbar height */
            left: 0;
            width: 100%;
            height: calc(100% - 56px);
            background: rgba(0,0,0,0.25);
            display: none;
            z-index: 1030; /* below sidebar(1040) */
        }
        .navbar-title { color: #fff; font-weight: 700; }

        .main-container {
            max-width: 95vw;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        /* Prevent hover transform when a modal is open to avoid flicker */
        .modal-open .card,
        .modal-open .card:hover {
            transform: none !important;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
        }

        .card-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            border-radius: 15px 15px 0 0 !important;
            padding: 1.25rem;
            font-weight: 600;
            font-size: 1.2rem;
        }

        .btn-custom {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 0.6rem 1.5rem;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(74, 144, 226, 0.3);
        }

        .btn-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(74, 144, 226, 0.4);
            color: white;
        }

        .btn-custom:active {
            transform: translateY(0);
        }

        .table-container {
            overflow-x: auto;
            overflow-y: auto; /* enable vertical scrolling within table container */
            max-height: 70vh; /* keep header visible while body scrolls */
            border-radius: 10px;
        }

        .data-table {
            margin: 0;
        }

        .data-table thead {
            background: var(--light-bg);
            position: sticky;
            top: 0;
            z-index: 10;
        }
        /* Ensure each header cell is sticky for robust cross-browser behavior */
        .data-table thead th {
            position: sticky;
            top: 0;
            background: var(--light-bg);
            z-index: 15;
        }

        .data-table thead th {
            font-weight: 600;
            color: var(--primary-dark);
            border-bottom: 2px solid var(--primary-color);
            padding: 1rem;
            white-space: nowrap;
        }

        .data-table tbody tr {
            transition: background-color 0.2s ease;
        }

        .data-table tbody tr:hover {
            background-color: rgba(74, 144, 226, 0.05);
        }

        .data-table tbody td {
            padding: 0.875rem 1rem;
            vertical-align: middle;
        }

        /* Header actions alignment and spacing */
        .card-header .header-actions .btn {
            margin-left: 0.25rem;
        }
        .card-header .header-title i {
            margin-right: 0.25rem;
        }

        /* Sticky first column (Edit) to float horizontally on scroll */
        .data-table th.sticky-col,
        .data-table td.sticky-col {
            position: sticky;
            left: 0;
            background: #fff;
            z-index: 12;
            border-right: 2px solid var(--border-color);
        }
        /* Ensure header cell stays above body cells */
        .data-table thead th.sticky-col {
            z-index: 13;
        }

        .empty-state {
            text-align: center;
            padding: 4rem 2rem;
            color: #6c757d;
        }

        .empty-state i {
            font-size: 5rem;
            color: #fff;
            margin-bottom: 1.5rem;
            opacity: 0.3;
        }

        .empty-state h3 {
            color: #495057;
            margin-bottom: 1rem;
        }

        .empty-state p {
            color: #6c757d;
            margin-bottom: 2rem;
        }

        /* Improve the design of the empty-state Upload button */
        #uploadFromEmpty {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            border: none;
            color: #fff;
            padding: 0.8rem 1.4rem;
            border-radius: 8px;
            box-shadow: 0 6px 16px rgba(74, 144, 226, 0.35);
            transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
        }
        #uploadFromEmpty:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 22px rgba(74, 144, 226, 0.45);
        }
        #uploadFromEmpty:active {
            transform: translateY(0);
            box-shadow: 0 6px 16px rgba(74, 144, 226, 0.35);
            opacity: 0.95;
        }

        .upload-zone {
            border: 3px dashed var(--primary-color);
            border-radius: 15px;
            padding: 3rem 2rem;
            text-align: center;
            background: rgba(74, 144, 226, 0.05);
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 2rem 0;
        }

        .upload-zone:hover {
            background: rgba(74, 144, 226, 0.1);
            border-color: var(--primary-dark);
        }

        .upload-zone.dragover {
            background: rgba(74, 144, 226, 0.15);
            border-color: var(--primary-dark);
            transform: scale(1.02);
        }

        .upload-zone i {
            font-size: 4rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

        .file-info {
            background: var(--light-bg);
            border-radius: 10px;
            padding: 1.5rem;
            margin: 1.5rem 0;
            display: none;
        }

        .file-info.show {
            display: block;
            animation: fadeIn 0.4s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .preview-table {
            font-size: 0.9rem;
            max-height: 400px;
            overflow: auto;
        }

        .badge-custom {
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 500;
        }

        .search-box {
            max-width: 400px;
            margin-bottom: 1.5rem;
        }

        .search-box input {
            border-radius: 25px;
            padding: 0.6rem 1.2rem;
            border: 2px solid var(--border-color);
            transition: border-color 0.3s ease;
        }

        .search-box input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.15);
        }

        .pagination-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1.5rem;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .page-info {
            color: #6c757d;
            font-size: 0.95rem;
        }

        .pagination {
            margin: 0;
        }

        .pagination .page-link {
            color: var(--primary-color);
            border-color: var(--border-color);
            border-radius: 5px;
            margin: 0 2px;
            transition: all 0.2s ease;
        }

        .pagination .page-link:hover {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .pagination .page-item.active .page-link {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .loading-spinner {
            text-align: center;
            padding: 2rem;
        }

        .spinner-border {
            width: 3rem;
            height: 3rem;
            border-width: 0.3rem;
        }

        .alert {
            border-radius: 10px;
            border: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .instructions {
            background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }

        .instructions h5 {
            color: var(--primary-dark);
            margin-bottom: 1rem;
        }

        .instructions ul {
            margin: 0;
            padding-left: 1.5rem;
            color: #495057;
        }

        .instructions li {
            margin-bottom: 0.5rem;
        }

        .screen {
            display: none;
        }

        .screen.active {
            display: block;
            animation: fadeIn 0.4s ease;
        }
        .qb-and { color: var(--primary-color); font-weight: 600; }

        .action-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 1.5rem;
        }

        @media (max-width: 768px) {
            .navbar-brand {
                font-size: 1.2rem;
            }

            .card-header {
                font-size: 1rem;
            }

            .upload-zone {
                padding: 2rem 1rem;
            }

            .upload-zone i {
                font-size: 3rem;
            }

            .action-buttons {
                flex-direction: column;
            }

            .action-buttons button {
                width: 100%;
            }

            .pagination-controls {
                flex-direction: column;
                align-items: stretch;
            }
        }

        .progress {
            height: 25px;
            border-radius: 10px;
            margin: 1rem 0;
            display: none;
        }

        .progress.show {
            display: block;
        }

        .progress-bar {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            transition: width 0.3s ease;
        }

        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 0.75rem; /* reduced padding to shrink height */
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .stat-card i {
            font-size: 1.5rem; /* smaller icon */
            color: var(--primary-color);
            margin-bottom: 0.25rem; /* tighter spacing */
        }

        .stat-card h3 {
            font-size: 1.25rem; /* smaller count text */
            font-weight: 700;
            color: var(--primary-dark);
            margin: 0.25rem 0; /* tighter spacing */
        }

        .stat-card p {
            color: #6c757d;
            margin: 0;
        }

        /* Floating Filters Button (FAB) */
        .filter-fab {
            position: fixed;
            right: 24px;
            bottom: 24px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: #fff;
            box-shadow: 0 10px 18px rgba(0,0,0,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            z-index: 1050;
        }
        .filter-fab:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 24px rgba(0,0,0,0.25);
        }

        /* Inline filters visible above table */
        .filters-box { display: block; }
        .filters-box .form-control { min-width: 120px; }
        .filters-box .range-label { font-weight: 500; color: var(--primary-dark); }
        /* Structured filter box layout */
        .filters-structured {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 0.75rem;
            background: #fff;
            width: 70%;
            margin: 0 auto;
        }
        .filters-header {
            font-weight: 600;
            color: var(--primary-dark);
            background: #f8f9fa;
            border-bottom: 1px solid #e5e7eb;
            padding: 0.5rem 0.75rem;
            margin: -0.75rem -0.75rem 0.75rem -0.75rem;
            border-radius: 8px 8px 0 0;
        }
        .filter-group { margin-bottom: 0.5rem; }
        .filter-group .form-label, .filter-group .col-form-label { font-weight: 500; }
        .group-title { font-weight: 600; color: #374151; margin-bottom: 0.25rem; }
        /* Compact widths for dropdowns and inputs inside filter panel */
        .filters-structured .form-select,
        .filters-structured .form-control { max-width: 180px; }
        .filters-structured input[type="number"] { width: 80px; }
        .filters-structured input[type="date"] { width: 150px; }
        /* Uniform label and select widths for alignment */
        .filters-structured .filter-group .col-form-label {
            flex: 0 0 140px;
            min-width: 140px;
            margin-bottom: 0;
        }
        .filters-structured .filter-group .form-select {
            flex: 0 0 180px;
            min-width: 180px;
        }
        /* Constrain Chosen containers to compact width */
        .filters-structured .chosen-container { width: 180px !important; }
        .filters-structured .chosen-container .chosen-drop { width: 100% !important; }
        /* Override any global wideners for IDs within structured filter box */
        .filters-structured #areaFilter,
        .filters-structured #teamFilter,
        .filters-structured #bsgLeadFilter,
        .filters-structured #churchFilter,
        .filters-structured #memberFilter {
            width: 180px !important;
            min-width: 180px !important;
        }
        /* Reduce internal gutter for rows to pack items tighter */
        .filters-structured .row.g-3 > [class*="col-"] { padding-left: 0.25rem; padding-right: 0.25rem; }
        @media (max-width: 768px) {
            .filters-structured { width: 100%; }
        }
        /* Widen Area and Team dropdowns */
        #areaFilter, #teamFilter { min-width: 300px !important; }

        /* Fancy slider styling (previous single sliders) */
        .range-blue {
            --range-height: 10px;
            --range-bg: #e6eef6;
            --range-fill-start: #29c6f6; /* teal */
            --range-fill-end: #1e6dfb;   /* blue */
            --thumb-size: 18px;
            --thumb-border: #1e6dfb;
            --thumb-shadow: 0 4px 12px rgba(0,0,0,0.2);
            appearance: none;
            width: 160px;
            height: var(--thumb-size);
            border-radius: 999px;
            background: var(--range-bg);
            outline: none;
            transition: background-size 0.15s ease, box-shadow 0.15s ease;
        }
        /* WebKit */
        .range-blue::-webkit-slider-runnable-track {
            height: var(--range-height);
            background: transparent;
            border-radius: 999px;
        }
        .range-blue::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: var(--thumb-size);
            height: var(--thumb-size);
            border-radius: 50%;
            background: #fff;
            border: 3px solid var(--thumb-border);
            box-shadow: var(--thumb-shadow);
            margin-top: calc((var(--range-height) - var(--thumb-size)) / 2);
        }
        .range-blue:active::-webkit-slider-thumb { box-shadow: 0 6px 14px rgba(0,0,0,0.25); }
        /* Firefox */
        .range-blue::-moz-range-track {
            height: var(--range-height);
            background: var(--range-bg);
            border: none;
            border-radius: 999px;
        }
        .range-blue::-moz-range-progress {
            height: var(--range-height);
            background: linear-gradient(90deg, var(--range-fill-start) 0%, var(--range-fill-end) 100%);
            border-radius: 999px;
        }
        .range-blue::-moz-range-thumb {
            width: var(--thumb-size);
            height: var(--thumb-size);
            border-radius: 50%;
            background: #fff;
            border: 3px solid var(--thumb-border);
            box-shadow: var(--thumb-shadow);
        }
        /* Custom dual-handle age slider (pure HTML/CSS/JS) */
        .age-slider { position: relative; width: 100%; max-width: 200px; padding: 10px 8px; }
        .age-slider-track { position: relative; width: 100%; height: 8px; border-radius: 999px; background: #e9ecef; border: 1px solid #dcdfe3; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
        .age-slider-inner { position: absolute; inset: 0; border-radius: 999px; pointer-events: none; }
        .age-slider-fill { position: absolute; top: 0; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #4a90e2, #3b7bd6); box-shadow: 0 1px 3px rgba(59,123,214,0.25); }
        .age-slider-handle { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: #ffffff; border: 2px solid #4a90e2; box-shadow: 0 2px 6px rgba(74,144,226,0.3); cursor: pointer; }
        .age-slider-handle:focus { outline: none; box-shadow: 0 0 0 3px rgba(74,144,226,0.25); }
        .age-slider-tooltip, .age-slider-tooltip-left { position: absolute; top: 0; left: 0; transform: translate(-50%, -140%); background: #ffffff; color: #1f2d3d; font-weight: 600; padding: 4px 8px; border-radius: 6px; border: 1px solid #dcdfe3; box-shadow: 0 2px 6px rgba(0,0,0,0.08); font-size: 12px; white-space: nowrap; pointer-events: none; }
        .age-slider-tooltip::after, .age-slider-tooltip-left::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #ffffff; }
        .age-slider-ticks { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; height: 16px; display: flex; justify-content: space-between; pointer-events: none; }
        .age-slider-tick { position: relative; width: 1px; height: 8px; background: #cfd4da; }
        .age-slider-tick::after { content: attr(data-label); position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #6c757d; }
       
        /* Placement helpers */
        .age-slider-section { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
        .age-label { font-weight: 600; color: var(--primary-dark); white-space: nowrap; }
        .age-range-text { font-size: 0.9rem; color: #495057; white-space: nowrap; }
        @media (max-width: 768px) {
            .age-slider-section { grid-template-columns: 1fr; }
            .age-label { margin-bottom: 6px; }
            .age-range-text { margin-top: 6px; }
            .age-slider { max-width: 100%; }
            .age-slider-ticks { display: none; }
        }

        /* Chosen (searchable select) tweaks for modal and layout */
        .chosen-container { width: 100% !important; }
        .chosen-container .chosen-drop { z-index: 1061; }
        /* Ensure Area/Team chosen widgets have wider footprint */
        #areaFilter_chosen, #teamFilter_chosen { min-width: 200px !important; }

        /* View mode styles */
        .view-mode-toggle { display: inline-flex; align-items: center; gap: 0.5rem; }
        .view-mode-desktop #dataTableContainer,
        .view-mode-mobile #dataTableContainer { transition: opacity 0.25s ease, transform 0.25s ease; }
        .view-mode-enter { opacity: 0; transform: translateY(6px); }
        .view-mode-enter-active { opacity: 1; transform: translateY(0); }

        /* Mobile card list layout */
        .mobile-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
        .mobile-card .card-header { display: flex; align-items: center; justify-content: space-between; }
        .mobile-card .kv-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 0; border-bottom: 1px dashed var(--border-color); }
        .mobile-card .kv-row:last-child { border-bottom: none; }
        .mobile-card .kv-key { font-weight: 600; color: #495057; margin-right: 8px; }
        .mobile-card .kv-val { color: #212529; }
        .mobile-card .btn { min-height: 44px; padding: 0.5rem 0.9rem; }
        /* Hide number input arrows for percent fields */
        input.no-spin[type=number]::-webkit-outer-spin-button,
        input.no-spin[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input.no-spin[type=number] {
            -moz-appearance: textfield;
        }

        #editForm h6{
            background: #80808030;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
        }
        /* Loading overlay */
        #loadingOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(255,255,255,0.75);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000; /* above sidebar and modals backdrop */
        }
        #loadingOverlay .loading-box {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            padding: 16px 22px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        #loadingOverlay .loading-text {
            font-weight: 600;
            color: #333;
        }
    
/* Bulk Update grid UX enhancements */
#bulkUpdateGrid .ag-root-wrapper {
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}
#bulkUpdateGrid .ag-header-cell-label { color: #212529; }
#bulkUpdateGrid .ag-cell { padding: 6px 8px; color: #212529; }
#bulkUpdateGrid .ag-row { border-bottom: 1px solid #f0f2f5; }
#bulkUpdateGrid .ag-row-even { background-color: #fafafa; }
#bulkUpdateGrid .ag-row-odd { background-color: #ffffff; }
        /* Consistent inputs inside editors */
        .editable-input {
            width: 100%;
            padding: 6px 8px;
            font-size: 14px;
            line-height: 1.4;
            border: 1px solid #ced4da;
            border-radius: 4px;
            color: #212529;
            background-color: #fff;
        }
        .editable-input::placeholder { color: #6c757d; }
        /* Dropdown styling (native select rendered by agSelectCellEditor) */
#bulkUpdateGrid .ag-select .ag-picker-field-wrapper,
#bulkUpdateGrid .ag-select .ag-picker-field { padding: 2px 6px; }
        /* Vertical alignment consistency */
#bulkUpdateGrid .ag-cell-wrapper { display: flex; align-items: center; }
/* Accessibility focus outline */
.editable-input:focus { outline: 2px solid #80bdff; outline-offset: 0; }

/* Research grid UX enhancements (mirror bulk grid) */
#researchGrid .ag-root-wrapper {
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}
#researchGrid .ag-header-cell-label { color: #212529; }
#researchGrid .ag-cell { padding: 6px 8px; color: #212529; }
#researchGrid .ag-row { border-bottom: 1px solid #f0f2f5; }
#researchGrid .ag-row-even { background-color: #fafafa; }
#researchGrid .ag-row-odd { background-color: #ffffff; }
#researchGrid .ag-cell-wrapper { display: flex; align-items: center; }

    
/* View grid Actions column polish */
.ag-theme-alpine .ag-cell.actions-col {
  padding-top: 4px;
  padding-bottom: 6px; /* slight bottom padding per request */
}
.actions-cell {
  display: flex;
  align-items: center;
  gap: 6px; /* compact horizontal spacing */
}
.actions-cell .btn {
  line-height: 1;
}