/* CalendarTxnsModal - Enhanced Brand Styling */
.calendar-txns-modal-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    height: auto; /* Let content define height inside modal-body */
    overflow: visible; /* Do not clip; modal body will handle scroll */
}

/* Main content area - this should be scrollable */
.calendar-txns-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    height: auto; /* Let content size naturally */
    overflow: visible; /* Avoid nested scroll; modal body will scroll */
    flex: initial; /* Don't force to fill; allows modal body scrolling */
    min-height: 0; /* Allow flex item to shrink below content size */
}

/* Custom scrollbar for calendar modal content */
.calendar-txns-content::-webkit-scrollbar {
    width: 6px;
}

.calendar-txns-content::-webkit-scrollbar-track {
    background: var(--neutral-gray-light);
    border-radius: 3px;
}

.calendar-txns-content::-webkit-scrollbar-thumb {
    background: var(--neutral-gray);
    border-radius: 3px;
}

.calendar-txns-content::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-gray-dark);
}

/* Enhanced Add Record Button */
.add-record-container {
    display: flex;
    justify-content: flex-end; /* align to right */
    margin-bottom: 1rem;
    padding: 0;
    flex-shrink: 0; /* Prevent button container from shrinking */
}

.add-record-icon {
    width: 16px;
    height: 16px;
}

/* Beautiful Filter Section */
.calendar-txns-filters.card {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border-light);
    border-radius: var(--card-border-radius);
    box-shadow: var(--input-shadow);
    padding: var(--spacing-lg);
    /* Don't kill spacing to the table; let mb-2 or this margin provide space */
    margin-bottom: var(--spacing-md);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* In full-height modal, ensure filters don't consume the whole viewport */
.modal-body-fullheight .calendar-txns-filters.card {
    max-height: none; /* Remove cap to avoid internal scroll container */
    overflow: visible; /* Let content flow; modal body handles scrolling */
}

/* Mobile: remove cap as well and keep padding compact */
@media (max-width: 576px) {
    .modal-body-fullheight .calendar-txns-filters.card {
        max-height: none;
        padding: var(--spacing-md);
        overflow: visible;
    }
}

/* Reduce gap above dynamic filters on small screens */
@media (max-width: 576px) {
    #calendar-modal-dynamic-filters {
        margin-top: var(--spacing-sm);
    }
}

/* Mobile responsive filters */
@media (max-width: 576px) {
    .filters-row {
        grid-template-columns: 1fr !important; /* Single column on mobile */
        gap: var(--spacing-md);
    }

    .calendar-txns-filters.card {
        padding: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .filters-row {
        display: grid !important;
        grid-template-columns: 1fr; /* Single column on tablets and below */
        gap: var(--spacing-md);
    }
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group .form-label {
    color: var(--text-dark);
    font-weight: 500;
    font-size: 14px;
    margin-bottom: var(--spacing-sm);
    text-transform: none !important; /* preserve original casing from config */
    letter-spacing: normal !important;
}

.filter-group .form-control {
    border: 1px solid var(--border-medium);
    border-radius: var(--input-border-radius);
    padding: var(--spacing-md);
    background: var(--bg-primary);
    color: var(--text-dark);
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    box-shadow: var(--input-shadow);
    height: 44px; /* Consistent height for all filter inputs */
    min-height: 44px; /* Touch-friendly minimum height */
}

.filter-group .form-control:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(45, 91, 229, 0.1);
    outline: none;
}

/* Make flatpickr input consistent with select2 */
.filter-group .flatpickr-input {
    height: 44px !important;
    min-height: 44px !important; /* Touch-friendly */
    padding: var(--spacing-md) !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: var(--input-border-radius) !important;
    background: var(--bg-primary) !important;
    color: var(--text-dark) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--input-shadow) !important;
}

.filter-group .flatpickr-input:focus {
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 3px rgba(45, 91, 229, 0.1) !important;
    outline: none !important;
}

/* Basic Select2 container styling - let select2 handle the rest */
.filter-group .select2-container {
    width: 100% !important;
}

/* Make select2 input match flatpickr styling */
.filter-group .select2-container .select2-selection--multiple {
    height: auto !important; /* Allow height to expand for tags */
    min-height: 44px !important; /* Touch-friendly minimum */
    border: 1px solid var(--border-medium) !important;
    border-radius: var(--input-border-radius) !important;
    background: var(--bg-primary) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--input-shadow) !important;
    display: flex !important;
    align-items: flex-start !important; /* Align to top to accommodate multiple lines */
    padding: 4px !important; /* Consistent padding around the entire container */
    box-sizing: border-box !important;
}

.filter-group .select2-container .select2-selection--multiple:focus-within {
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 3px rgba(45, 91, 229, 0.1) !important;
    outline: none !important;
}

/* Style the rendered tags container for proper containment */
.filter-group .select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    align-items: flex-start !important; /* Align tags to start */
    flex-wrap: wrap !important;
    gap: 4px !important; /* Reduced gap between tags */
    padding: 4px !important; /* Consistent padding inside the rendered area */
    margin: 0 !important;
    width: 100% !important;
    min-height: 32px !important; /* Minimum height for single line of tags */
    box-sizing: border-box !important;
    overflow: visible !important; /* Allow tags to be visible */
    line-height: 1.2 !important; /* Better line height for wrapped content */
}

/* Style the tag text separately to prevent overlap */
.filter-group .select2-container .select2-selection--multiple .select2-selection__choice .select2-selection__choice__display {
    flex: 1 !important;
    margin-right: 4px !important; /* Reduced space between text and remove button */
    overflow: visible !important; /* Allow text to be fully visible */
    text-overflow: clip !important; /* Don't truncate text */
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important; /* Perfect vertical centering */
    line-height: 1 !important; /* Reset line height for better centering */
}

/* Beautiful tag styling */
.filter-group .select2-container .select2-selection--multiple .select2-selection__choice {
    background: linear-gradient(135deg, var(--brand-blue) 0%, #4a6cf7 50%, #6c5ce7 100%) !important; /* Enhanced 3-color gradient */
    border: none !important;
    border-radius: 10px !important; /* Slightly smaller radius for better fit */
    color: white !important;
    font-size: 11px !important; /* Smaller font size to fit better */
    font-weight: 500 !important;
    padding: 4px 6px 4px 8px !important; /* Reduced padding for more compact tags */
    margin: 1px !important; /* Small margin for spacing */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 1px 3px rgba(45, 91, 229, 0.2) !important; /* Reduced shadow */
    transition: all 0.2s ease !important; /* Faster transition */
    line-height: 1 !important;
    white-space: nowrap !important;
    min-height: 22px !important; /* Smaller minimum height */
    max-height: 26px !important; /* Smaller maximum height */
    flex-shrink: 0 !important;
    width: auto !important;
    position: relative !important;
    vertical-align: top !important; /* Ensure proper alignment */
}

/* Mobile tag optimizations */
@media (max-width: 576px) {
    .filter-group .select2-container .select2-selection--multiple .select2-selection__choice {
        font-size: 10px !important; /* Even smaller on mobile */
        padding: 3px 5px 3px 7px !important;
        min-height: 20px !important;
        max-height: 24px !important;
        border-radius: 8px !important;
    }
}

.filter-group .select2-container .select2-selection--multiple .select2-selection__choice:hover {
    background: linear-gradient(135deg, #3d7dd8 0%, #4057d9 50%, #5b4bd1 100%) !important; /* Darker gradient on hover */
    transform: translateY(-2px) scale(1.02) !important; /* Enhanced hover effect */
    box-shadow: 0 4px 16px rgba(45, 91, 229, 0.3), 0 2px 8px rgba(108, 92, 231, 0.25) !important; /* Enhanced shadow on hover */
}

/* Beautiful remove button styling */
.filter-group .select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 12px !important; /* Smaller font size */
    font-weight: bold !important;
    margin: 0 !important;
    margin-left: 4px !important; /* Small margin from text */
    padding: 0 !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important; /* Smaller width */
    height: 14px !important; /* Smaller height */
    border-radius: 50% !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Mobile touch-friendly remove button */
@media (max-width: 576px) {
    .filter-group .select2-container .select2-selection--multiple .select2-selection__choice__remove {
        width: 16px !important; /* Slightly larger for touch */
        height: 16px !important;
        font-size: 14px !important;
        /* Remove the min-height/min-width touch targets for tags as they're too small */
    }
}

.filter-group .select2-container .select2-selection--multiple .select2-selection__choice::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%) !important;
    border-radius: 10px !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

.filter-group .select2-container .select2-selection--multiple .select2-selection__choice:hover::before {
    opacity: 1 !important;
}

/* Minimal dropdown styling for modal context */
.select2-container--default .select2-dropdown {
    z-index: 9999 !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: var(--input-border-radius) !important;
    background: var(--bg-primary) !important;
    box-shadow: var(--input-shadow) !important;
    margin-top: 2px !important; /* Small gap from the input */
}

.select2-container--default .select2-results__option {
    padding: 8px 12px;
    min-height: 36px !important; /* Smaller but still touch-friendly */
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: var(--text-dark) !important;
    background: var(--bg-primary) !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

/* Mobile touch-friendly dropdown options */
@media (max-width: 576px) {
    .select2-container--default .select2-results__option {
        min-height: 44px !important; /* Larger touch target on mobile */
        padding: 12px 16px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}

.select2-container--default .select2-results__option--highlighted {
    background: var(--brand-blue) !important;
    color: var(--text-light) !important;
}

.select2-container--default .select2-results__option--selected {
    background: rgba(45, 91, 229, 0.1) !important;
    color: var(--brand-blue) !important;
    font-weight: 500 !important;
}

/* Ensure dropdown appears above modal elements */
.calendar-txns-modal-container .select2-dropdown {
    z-index: 9999 !important;
}

/* Fix select2 search input styling */
.select2-container--default .select2-search--inline .select2-search__field {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 4px !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: var(--text-dark) !important;
    min-height: 20px !important;
}

/* Mobile search input */
@media (max-width: 576px) {
    .select2-container--default .select2-search--inline .select2-search__field {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}

/* Table card should take remaining space and be scrollable */
.calendar-txns-table.card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    padding: 0;
    margin-bottom: 0;
    flex: 1; /* Take remaining space */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow shrinking */
    overflow: hidden;
}

.table-wrapper {
    flex: initial; /* Natural sizing, vertical scroll by modal body */
    overflow-y: visible; /* Vertical scroll handled by modal body */
    overflow-x: auto; /* Enable horizontal scrolling for mobile */
    margin: var(--spacing-lg);
    margin-bottom: 0;
    border-radius: var(--input-border-radius);
    border: 1px solid var(--border-light);
    background: var(--bg-primary);
}

/* Mobile table wrapper optimizations */
@media (max-width: 576px) {
    .table-wrapper {
        margin: var(--spacing-sm); /* Reduced margins on mobile */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
}

/* Modern Table Styling */
.calendar-txns-table .table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Inter', sans-serif;
    min-width: 600px; /* Ensure minimum width for horizontal scrolling */
}

/* Mobile table optimizations */
@media (max-width: 576px) {
    .calendar-txns-table .table {
        min-width: 500px; /* Slightly smaller minimum width on mobile */
        font-size: 13px; /* Smaller font size for mobile */
    }
}

.calendar-txns-table .table th {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, #f0f4ff 100%);
    color: var(--text-dark);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-bottom: 2px solid var(--brand-blue);
    padding: var(--spacing-md) var(--spacing-lg);
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap; /* Prevent header text wrapping */
}

/* Mobile table header optimizations */
@media (max-width: 576px) {
    .calendar-txns-table .table th {
        padding: var(--spacing-sm) var(--spacing-md); /* Reduced padding on mobile */
        font-size: 11px; /* Smaller font size */
        letter-spacing: 0.3px;
    }
}

.calendar-txns-table .table th:first-child {
    border-top-left-radius: var(--input-border-radius);
}

.calendar-txns-table .table th:last-child {
    border-top-right-radius: var(--input-border-radius);
}

.calendar-txns-table .table td {
    color: var(--text-dark);
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-bottom: 1px solid rgba(45, 91, 229, 0.05);
    font-size: 14px;
    vertical-align: middle;
    white-space: nowrap; /* Prevent cell content wrapping */
}

/* Mobile table cell optimizations */
@media (max-width: 576px) {
    .calendar-txns-table .table td {
        padding: var(--spacing-sm) var(--spacing-md); /* Reduced padding on mobile */
        font-size: 12px; /* Smaller font size */
    }
}

.calendar-txns-table .table tbody tr {
    transition: all 0.2s ease;
}

/* Fix hover issue - target the row directly and prevent interference */
.calendar-txns-table .table tbody tr.txn-row {
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Prevent delete button from interfering with row hover */
.calendar-txns-table .table tbody tr.txn-row:hover .delete-txn-btn {
    transform: none !important; /* Don't move the button when row is hovered */
}

/* Enhanced Delete Button - Clean styling without red background */
.delete-txn-btn {
    background: transparent; /* Remove red background */
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 8px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    position: relative;
    cursor: pointer;
    min-height: 36px; /* Touch-friendly */
}

/* Mobile delete button optimizations */
@media (max-width: 576px) {
    .delete-txn-btn {
        width: 40px; /* Larger touch target on mobile */
        height: 40px;
        min-height: 36px; /* Touch-friendly */
        min-width: 36px;
        padding: 10px;
    }
}

.delete-txn-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: rgba(255, 71, 87, 0.1); /* Light red tint on hover only */
    border-color: #ff4757;
    color: #ff4757;
}

.delete-txn-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Loading state for delete button */
.delete-txn-btn.loading {
    pointer-events: none;
    opacity: 0.7;
    background: rgba(255, 71, 87, 0.1);
    border-color: #ff4757;
}

.delete-txn-btn.loading .spinner-border {
    color: #ff4757;
}

/* Hide the ::before pseudo-element ONLY when loading */
.delete-txn-btn.loading::before {
    display: none !important;
}

/* Disabled state for delete button */
.delete-txn-btn:disabled:not(.loading) {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Hide the SVG icon completely */
.delete-txn-btn svg {
    display: none !important;
}

/* Style the trash icon from media - no white filter */
.delete-txn-btn::before {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url('/static/media/trash.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

/* Mobile trash icon optimization */
@media (max-width: 576px) {
    .delete-txn-btn::before {
        width: 20px; /* Slightly larger icon on mobile */
        height: 20px;
    }
}

.delete-txn-btn:hover::before {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%); /* Red color filter */
}

/* Modern Badges with updated text */
.calendar-txns-table .badge {
    font-size: 12px; /* Increased from 11px */
    font-weight: 500;
    padding: 6px 14px; /* Increased padding for larger badge */
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-height: 24px; /* Ensure consistent height */
    display: inline-flex; /* Better alignment */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
    white-space: nowrap; /* Prevent badge text wrapping */
}

/* Mobile badge optimizations */
@media (max-width: 576px) {
    .calendar-txns-table .badge {
        font-size: 10px; /* Smaller font on mobile */
        padding: 4px 8px; /* Reduced padding */
        min-height: 20px;
        letter-spacing: 0.3px;
    }
}

/* Transaction Type Badge Gradients */
.badge-gradient-info {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-light) 100%);
    color: white;
    border: none;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.badge-gradient-success {
    background: linear-gradient(135deg, var(--brand-blue-dark) 0%, var(--brand-blue) 100%);
    color: white;
    border: none;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.badge-gradient-warning {
    background: var(--brand-gradient);
    color: white;
    border: none;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.badge-gradient-secondary {
    background: linear-gradient(135deg, var(--text-secondary) 0%, var(--text-muted) 100%);
    color: white;
    border: none;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Enhanced Pagination - Better integration with table, no borders */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl); /* Match table wrapper padding */
    background: var(--bg-primary); /* Match table background */
    border-radius: 0 0 var(--input-border-radius) var(--input-border-radius); /* Match table wrapper radius */
    flex-shrink: 0;
    margin: 0 var(--spacing-lg); /* Match table wrapper margin */
    margin-top: 0; /* No top margin since it connects to table */
    margin-bottom: var(--spacing-lg); /* Bottom margin for spacing */
}

/* Mobile pagination optimizations */
@media (max-width: 576px) {
    .pagination-container {
        flex-direction: column; /* Stack pagination elements vertically on mobile */
        gap: var(--spacing-sm);
        padding: var(--spacing-md); /* Reduced padding */
        margin: 0 var(--spacing-sm); /* Match reduced table wrapper margin */
        margin-bottom: var(--spacing-md);
    }

    /* Hide pagination info on very small screens */
    .pagination-info {
        order: 2; /* Move to bottom */
        font-size: 11px !important;
    }

    /* Make pagination controls more prominent */
    #txns-pagination {
        order: 1; /* Move to top */
    }

    /* Stack rows per page control */
    .rows-per-page {
        order: 3; /* Move to bottom */
        justify-content: center;
    }
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.pagination .page-link {
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    margin: 0 2px;
    padding: 6px 12px;
    color: var(--text-dark);
    background: var(--bg-primary);
    transition: all 0.3s ease;
    font-size: 13px;
    font-weight: 500;
    min-height: 32px; /* Reduced from 44px for better desktop appearance */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile pagination links - restore touch-friendly height */
@media (max-width: 576px) {
    .pagination .page-link {
        min-height: 44px; /* Touch-friendly */
        min-width: 44px;
        padding: 8px 12px;
        font-size: 14px; /* Slightly larger for touch */
        margin: 0 1px; /* Reduced margin */
    }

    /* Hide ellipsis and some page numbers on mobile to save space */
    .pagination .page-item:nth-child(n+5):nth-last-child(n+5) {
        display: none;
    }

    /* Keep first, current, last pages and prev/next buttons */
    .pagination .page-item:first-child,
    .pagination .page-item:last-child,
    .pagination .page-item.active,
    .pagination .page-item:nth-child(2),
    .pagination .page-item:nth-last-child(2) {
        display: block !important;
    }
}

.pagination .page-link:hover {
    background: var(--brand-blue);
    color: var(--text-light);
    border-color: var(--brand-blue);
    transform: translateY(-1px);
}

.pagination .page-item.active .page-link {
    background: var(--brand-gradient);
    border-color: var(--brand-blue);
    color: var(--text-light);
}

.rows-per-page {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.rows-per-page label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

/* Mobile rows per page */
@media (max-width: 576px) {
    .rows-per-page label {
        font-size: 12px;
    }
}

.rows-per-page select {
    border: 1px solid var(--border-medium);
    border-radius: var(--input-border-radius);
    padding: 6px 12px;
    background: var(--bg-primary);
    color: var(--text-dark);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    min-width: 80px;
    transition: all 0.3s ease;
    min-height: 44px; /* Touch-friendly */
}

/* Mobile rows per page select */
@media (max-width: 576px) {
    .rows-per-page select {
        font-size: 16px; /* Prevent zoom on iOS */
        min-height: 44px; /* Touch-friendly */
        padding: 8px 12px;
    }
}

.rows-per-page select:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(45, 91, 229, 0.1);
    outline: none;
}

/* Enhanced Modal Styling - Full screen on mobile */
#calendar-txns-modal .modal-dialog {
    max-width: 85vw;
    width: 85vw;
    margin: 1.75rem auto;
    height: calc(100vh - 3.5rem);
    display: flex;
    flex-direction: column;
}

/* Mobile modal - full screen */
@media (max-width: 576px) {
    #calendar-txns-modal .modal-dialog {
        max-width: 100vw;
        width: 100vw;
        height: 100vh;
        margin: 0;
        border-radius: 0; /* Remove border radius for full screen */
    }

    #calendar-txns-modal .modal-content {
        border-radius: 0; /* Remove border radius for full screen */
        height: 100vh;
    }

    /* Adjust add record button for mobile */
    .add-record-container {
        padding: 0; /* Remove side padding on mobile */
        justify-content: center; /* Center button on mobile */
    }

    .add-record-btn {
        width: 100%; /* Full width button on mobile */
        justify-content: center;
        padding: var(--spacing-md) var(--spacing-lg);
        min-height: 48px; /* Larger touch target */
        font-size: 16px; /* Larger text */
    }

    /* Reduce gaps in modal container on mobile */
    .calendar-txns-modal-container {
        gap: var(--spacing-xs);
        padding: var(--spacing-sm);
    }

    .calendar-txns-content {
        gap: var(--spacing-xs);
    }
}

#calendar-txns-modal .modal-content {
    height: 100%;
    border-radius: var(--container-border-radius);
    border: none;
    box-shadow: var(--modal-shadow);
    display: flex;
    flex-direction: column;
    overflow-y: visible; /* Avoid nested scroll; delegate to modal body */
    background: var(--bg-primary);
    flex: 1;
}

/* Main background header - fixed at top */
#calendar-txns-modal .modal-header {
    background: var(--bg-primary);
    color: var(--text-dark);
    border: none;
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--container-border-radius) var(--container-border-radius) 0 0;
    padding: var(--spacing-md) var(--spacing-xl);
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    min-height: 60px; /* Consistent header height */
}

/* Mobile modal header */
@media (max-width: 576px) {
    #calendar-txns-modal .modal-header {
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: 0; /* Remove border radius for full screen */
        min-height: 56px; /* Slightly smaller on mobile */
    }
}

#calendar-txns-modal .modal-title {
    font-weight: 600;
    font-size: 18px;
    color: var(--text-dark);
}

/* Mobile modal title */
@media (max-width: 576px) {
    #calendar-txns-modal .modal-title {
        font-size: 16px; /* Slightly smaller on mobile */
    }
}

#calendar-txns-modal .btn-close {
    filter: none;
    opacity: 0.8;
    min-height: 44px; /* Touch-friendly */
    min-width: 44px;
}

/* Mobile close button */
@media (max-width: 576px) {
    #calendar-txns-modal .btn-close {
        min-height: 48px; /* Larger touch target on mobile */
        min-width: 48px;
        font-size: 20px;
    }
}

#calendar-txns-modal .btn-close:hover {
    opacity: 1;
}

/* Modal body - scrollable content area */
#calendar-txns-modal .modal-body {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-xl);
    overflow: auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    min-height: 0;
}

/* Mobile modal body */
@media (max-width: 576px) {
    #calendar-txns-modal .modal-body {
        padding: var(--spacing-xs) var(--spacing-sm); /* Reduced padding on mobile */
    }
}

/* Custom modal classes for calendar modal */
.modal-fullheight-custom {
    width: 90vw;
    max-width: 1200px;
    height: 90vh;
    margin: 5vh auto;
    display: flex;
    flex-direction: column;
}

/* Mobile full height modal */
@media (max-width: 576px) {
    .modal-fullheight-custom {
        width: 100vw;
        height: 100vh;
        margin: 0;
        max-width: none;
    }
}

.modal-fullheight-custom .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Modal body for full-height modals - enable content scrolling */
.modal-body-fullheight {
    padding: 0 !important;
    /* Make modal body the scroll container */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth on iOS */
}

/* Ensure the calendar modal container can scroll its content */
.modal-body-fullheight .calendar-txns-modal-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    /* Avoid nested scroll here; let modal body scroll */
    overflow: visible !important;
    padding: 0 !important; /* Remove padding to prevent layout issues */
}

/* Calendar content should fill available space and handle overflow */
.modal-body-fullheight .calendar-txns-content {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important; /* Let content define height; modal body will scroll */
    overflow: visible !important; /* Avoid nested scroll */
    padding: var(--spacing-md) !important; /* Add padding here instead */
}

/* Mobile calendar content */
@media (max-width: 576px) {
    .modal-body-fullheight .calendar-txns-content {
        padding: var(--spacing-sm) !important; /* Reduced padding on mobile */
    }
}

/* Table card takes remaining space and enables scrolling */
.modal-body-fullheight .calendar-txns-table.card {
    /* Allow table section to size naturally within modal body scroll */
    flex: initial !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 400px; /* Critical for flex child to shrink */
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

/* Table wrapper enables the horizontal scrolling only; vertical by modal body */
.modal-body-fullheight .table-wrapper {
    flex: initial !important;
    overflow-y: visible !important; /* Vertical scroll handled by modal body */
    overflow-x: auto !important; /* Enable horizontal scrolling */
    margin: var(--spacing-lg) !important;
    margin-bottom: 0 !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
}

/* Mobile table wrapper in modal */
@media (max-width: 576px) {
    .modal-body-fullheight .table-wrapper {
        margin: var(--spacing-sm) !important; /* Reduced margin on mobile */
    }
}

/* Pagination container stays fixed at bottom */
.modal-body-fullheight .pagination-container {
    flex-shrink: 0 !important; /* Never shrink */
    margin: 0 var(--spacing-lg) !important;
    margin-bottom: var(--spacing-lg) !important;
}

/* Mobile pagination in modal */
@media (max-width: 576px) {
    .modal-body-fullheight .pagination-container {
        margin: 0 var(--spacing-sm) !important;
        margin-bottom: var(--spacing-sm) !important;
    }
}

/* Removed custom Inline/Modal Statistics Block styles to inherit from calendar.css */
/* (Previously defined #calendar-statistics, .statistics-grid, .stat-item, etc.) */