/* Upload Transaction Modal Specific Styles */
  .upload-transaction-input {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 15px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fafafa;
  }

  /* Desktop Layout - Ensure row layout */
  @media (min-width: 769px) {
    .upload-transaction-input {
      flex-direction: row !important;
      align-items: flex-end !important;
    }
  }

  .upload-transaction-input:first-of-type {
    background-color: transparent;
    border: none;
    padding: 0;
  }

  .upload-transaction-input .securityContainer {
    flex: 2;
    min-width: 0;
  }

  .upload-transaction-input .securityContainer input {
    width: 100%;
  }

  .upload-transaction-input > div:not(.securityContainer) {
    flex: 1;
    min-width: 120px;
  }

  .upload-transaction-input > div:not(.securityContainer) input {
    width: 100%;
  }

  .upload-transaction-input .btn-danger,
  .btn-danger.btn-sm,
  .btn.btn-danger {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    z-index: 10 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--text-caption) !important;
    line-height: 1 !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  

  /* ========================================
     MOBILE RESPONSIVE STYLES
  ======================================== */
  
  @media (max-width: 768px) {
    /* Mobile Delete Button - Square and properly positioned */
    .upload-transaction-input .btn-danger,
    .upload-transaction-box .transactionContainer .upload-transaction-input .btn-danger,
    .btn-danger.btn-sm,
    .btn.btn-danger,
    button.btn-danger,
    .upload-transaction-input button[class*="btn-danger"] {
      position: absolute !important;
      top: 10px !important;
      right: 10px !important;
      z-index: 25 !important;
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      min-height: 18px !important;
      max-width: 18px !important;
      max-height: 18px !important;
      padding: 0 !important;
      margin: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: var(--text-caption) !important;
      line-height: 1 !important;
      border-radius: 3px !important;
      box-sizing: border-box !important;
      flex-shrink: 0 !important;
    }
    
    /* Additional targeting for any delete button with X icon */
    .upload-transaction-input button:contains("×"),
    .upload-transaction-input button:contains("✕"),
    .upload-transaction-input button[title*="delete"],
    .upload-transaction-input button[title*="remove"] {
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      min-height: 18px !important;
      max-width: 18px !important;
      max-height: 18px !important;
      padding: 0 !important;
      margin: 0 !important;
      font-size: var(--text-caption) !important;
      line-height: 1 !important;
      border-radius: 3px !important;
      box-sizing: border-box !important;
    }
    
    /* Mobile Input Layout - Keep Desktop Layout */
    .upload-transaction-input {
      flex-direction: row !important;
      align-items: flex-end !important;
      gap: 10px !important;
      padding: 1rem !important;
      margin-bottom: 1rem !important;
      flex-wrap: wrap !important;
      display: flex !important;
    }
    
    .upload-transaction-input .securityContainer {
      flex: 2 !important;
      min-width: 200px !important;
    }
    
    .upload-transaction-input > div:not(.securityContainer) {
      flex: 1 !important;
      min-width: 80px !important;
      margin-right: 30px !important; /* Add space for delete button */
    }
    
    .upload-transaction-input > div:not(.securityContainer) input {
      width: calc(100% - 10px) !important;
      margin-right: 10px !important;
    }
    
    /* Mobile Modal Layout */
    .upload-transaction-Modal .modal-dialog {
      margin: 0.5rem;
      max-width: calc(100% - 1rem);
    }
    
    .upload-transaction-Modal .modal-content {
      max-height: 95vh;
      border-radius: 12px;
    }
    
    .upload-transaction-Modal .modal-header {
      padding: 1rem;
      border-bottom: 1px solid #e4e7ec;
    }
    
    .upload-transaction-Modal .modal-header h4 {
      font-size: 1.25rem;
      margin-bottom: 0.25rem;
    }
    
    .upload-transaction-Modal .modal-header p {
      font-size: 0.875rem;
      color: var(--text-muted, #475467);
      margin: 0;
    }
    
    .upload-transaction-Modal .modal-body {
      padding: 1rem;
      max-height: calc(95vh - 140px);
      display: flex !important;
      flex-direction: column !important;
    }
    
    /* Ensure proper ordering of all modal body children */
    .upload-transaction-Modal .modal-body > * {
      flex-shrink: 0;
    }
    
    /* Mobile Button Order - Transaction rows first, then Add Another Transaction, then Upload/Submit buttons */
    .upload-transaction-box {
      display: flex !important;
      flex-direction: column !important;
      margin-bottom: 1.5rem !important;
    }
    
    .upload-transaction-box > * {
      order: 0; /* Default order for all children */
    }
    
    /* First transaction input (always visible) */
    .upload-transaction-box .upload-transaction-input.transactionContainer {
      order: 1 !important; /* First transaction row */
      margin-bottom: 1rem !important;
      position: relative !important;
    }
    
    /* Transaction list (dynamically added rows) */
    .upload-transaction-box #uploadTransactionList {
      order: 2 !important; /* Dynamic transaction rows */
    }
    
    /* Add Another Transaction button - move to bottom */
    .upload-transaction-box > div:nth-child(2),
    .upload-transaction-box div[style*="margin-bottom: 15px"] {
      order: 999 !important; /* Add Another Transaction button - always last */
    }
    
    /* Upload/Submit buttons */
    .submit-upload-buttons {
      order: 1000 !important; /* Upload File and Add Funds buttons */
    }
    
    /* Transaction table - fixed height so form above never moves when rows are added */
    .upload-transaction-table {
      order: 1001 !important;
      max-height: 220px;
      overflow-y: auto;
      overflow-x: auto;
    }
    
    .upload-transaction-Modal .modal-footer {
      padding: 1rem;
      border-top: 1px solid #e4e7ec;
    }
    
    /* Mobile Upload Transaction Input - Keep Desktop Layout */
    .upload-transaction-input {
      flex-direction: row !important;
      align-items: flex-end !important;
      gap: 10px !important;
      padding: 1rem !important;
      margin-bottom: 1rem !important;
      flex-wrap: wrap !important;
      display: flex !important;
    }
    
    .upload-transaction-input .securityContainer {
      flex: 2 !important;
      min-width: 200px !important;
    }
    
    .upload-transaction-input > div:not(.securityContainer) {
      flex: 1 !important;
      min-width: 80px !important;
    }
    
    .upload-transaction-input label {
      font-size: 0.875rem;
      font-weight: 600;
      color: #374151;
      margin-bottom: 0.5rem;
      display: block;
    }
    
    .upload-transaction-input input {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      font-size: 0.875rem;
    }
    
    .upload-transaction-input input:focus {
      outline: none;
      border-color: #7f56d9;
      box-shadow: 0 0 0 3px rgba(127, 86, 217, 0.1);
    }
    
    /* File Upload Progress Modal - Force horizontal layout */
    #fileUploadProgressModal .upload-transaction-input {
      flex-direction: row !important;
      align-items: flex-end !important;
    }
    
    /* Mobile Buttons - Fix Overlapping */
    .btn-outline-dark-wright {
      width: auto !important;
      padding: 0.75rem 1rem !important;
      font-size: 0.875rem !important;
      margin-bottom: 1rem !important;
      display: inline-block !important;
      clear: both !important;
    }
    
    .submit-upload-buttons {
      display: flex !important;
      flex-direction: row !important;
      gap: 0.75rem !important;
      margin-top: 2rem !important;
      margin-bottom: 1rem !important;
      justify-content: space-between !important;
      align-items: center !important;
      clear: both !important;
      padding: 1.5rem 0 !important;
      border-top: 1px solid #e4e7ec !important;
      position: relative !important;
      z-index: 10 !important;
    }
    
    .submit-upload-buttons .btn {
      flex: 1 !important;
      padding: 0.75rem 1rem !important;
      font-size: 0.875rem !important;
      margin: 0 !important;
    }
    
    .submit-upload-buttons .btn:first-child {
      margin-right: 0.5rem !important;
    }
    
    /* Fix specific button positioning */
    .upload-transaction-box > div:last-child {
      margin-top: 1.5rem !important;
      clear: both !important;
    }
    
    
    /* Fix delete button positioning in transaction containers */
    .upload-transaction-box .transactionContainer .upload-transaction-input {
      position: relative !important;
      padding-right: 50px !important; /* Add space for delete button */
    }
    
    
    /* Mobile Table - Position below upload box; fixed height so form does not shift */
    .upload-transaction-table {
      overflow-x: auto !important;
      overflow-y: auto !important;
      max-height: 220px !important;
      margin-top: 1rem !important;
      margin-bottom: 2rem !important;
      clear: both !important;
      order: 3 !important;
      position: relative !important;
      z-index: 5 !important;
    }
    
    .upload-transaction-table table {
      min-width: 500px !important;
      font-size: 0.875rem !important;
    }
    
    .upload-transaction-table th,
    .upload-transaction-table td {
      padding: 0.75rem 0.5rem !important;
      white-space: nowrap !important;
    }
    
    /* Ensure upload transaction box has proper flexbox ordering */
    .upload-transaction-box {
      display: flex !important;
      flex-direction: column !important;
      margin-bottom: 1.5rem !important;
    }
    
    
    /* Mobile File Upload Progress Modal */
    #fileUploadProgressModal .modal-dialog {
      margin: 4rem 0.5rem 1rem 0.5rem !important;
      max-width: calc(100% - 1rem) !important;
      max-height: calc(100vh - 5rem) !important;
      transform: translateY(60px) !important;
    }
    
    #fileUploadProgressModal .modal-content {
      max-height: calc(100vh - 6rem) !important;
      border-radius: 12px !important;
    }
    
    #fileUploadProgressModal .modal-body {
      padding: 1rem !important;
      max-height: calc(100vh - 300px) !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }
    
    /* Mobile File Upload Transaction List */
    #fileUploadProgressModal .upload-transaction-box,
    #fileUploadProgressModal #fileUploadTransactionBox {
      display: block !important;
      width: 100% !important;
      margin-top: 1rem !important;
      overflow-y: auto !important;
      max-height: 300px !important;
    }
    
    #fileUploadProgressModal #fileUploadTransactionList {
      display: block !important;
      width: 100% !important;
      visibility: visible !important;
    }
    
    #fileUploadProgressModal #fileUploadTransactionList .upload-transaction-input,
    #fileUploadProgressModal #fileUploadTransactionList .csvUpload {
      display: flex !important;
      flex-direction: row !important;
      align-items: flex-end !important;
      padding: 1rem !important;
      margin-bottom: 1rem !important;
      background-color: #f8f9fa !important;
      border: 1px solid #e0e0e0 !important;
      border-radius: 8px !important;
      visibility: visible !important;
      opacity: 1 !important;
      width: 100% !important;
      gap: 1rem !important;
    }
    
    #fileUploadProgressModal #fileUploadTransactionList .upload-transaction-input > div {
      flex: 1 !important;
      min-width: 120px !important;
      margin-bottom: 0 !important;
      font-size: 0.875rem !important;
    }
    
    #fileUploadProgressModal #fileUploadTransactionList .upload-transaction-input .securityContainer {
      flex: 2 !important;
      min-width: 200px !important;
    }
    
    #fileUploadProgressModal #fileUploadTransactionList .upload-transaction-input label {
      font-weight: 600;
      color: #374151;
      margin-bottom: 0.25rem;
      display: block;
    }
    
    #fileUploadProgressModal #fileUploadTransactionList .upload-transaction-input input {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 0.875rem;
      background-color: white;
    }
    
    /* Ensure file upload progress modal is not cut off at top */
    #fileUploadProgressModal.modal.show .modal-dialog {
      transform: translateY(60px) !important;
    }
    
    #fileUploadProgressModal.modal.fade .modal-dialog {
      transform: translateY(60px) !important;
    }
    
    #fileUploadProgressModal .modal-header {
      padding: 1rem !important;
      border-bottom: 1px solid #e4e7ec !important;
      flex-shrink: 0 !important;
    }
    
    #fileUploadProgressModal .modal-header h4 {
      font-size: 1.25rem !important;
      margin-bottom: 0.25rem !important;
      line-height: 1.4 !important;
    }
    
    #fileUploadProgressModal .modal-footer {
      padding: 1rem !important;
      border-top: 1px solid #e4e7ec !important;
      flex-shrink: 0 !important;
    }
    
    /* Mobile Progress Bar */
    .progress {
      height: 8px;
      margin-bottom: 1rem;
    }
    
    /* Mobile File Upload Table */
    .fileUploadTable {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin: 1rem 0;
      padding: 1rem;
      background-color: #f8f9fa;
      border-radius: 8px;
    }
    
    .fileUploadTableCell {
      text-align: center;
    }
    
    .fileUploadTableHeader {
      font-size: 0.75rem;
      font-weight: 600;
      color: #6b7280;
      margin-bottom: 0.25rem;
    }
    
    .fileUploadTableData {
      font-size: 1.25rem;
      font-weight: 700;
      color: #1f2937;
    }
    
    /* Mobile Edit Transaction Modal */
    #editTransactionModal .modal-dialog {
      margin: 0.5rem;
      max-width: calc(100% - 1rem);
    }
    
    #editTransactionModal .modal-content {
      max-height: 90vh;
    }
    
    #editTransactionModal .modal-body {
      padding: 1rem;
    }
    
    #editTransactionModal input {
      width: 100%;
      padding: 0.75rem;
      margin-bottom: 1rem;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      font-size: 0.875rem;
    }
    
    #editTransactionModal .btn {
      width: 100%;
      padding: 0.75rem;
      font-size: 0.875rem;
    }
    
    /* Mobile Import Holding Modal */
    #importholdingModal .modal-dialog,
    #importmfholdingModal .modal-dialog,
    #deleteTransactionModal .modal-dialog,
    #fileUploadConfirmModal .modal-dialog {
      margin: 0.5rem;
      max-width: calc(100% - 1rem);
    }
    
    /* Mobile File Upload Confirm Modal - Fix content cutoff */
    #fileUploadConfirmModal .modal-dialog {
      margin: 4rem 0.5rem 1rem 0.5rem !important;
      max-width: calc(100% - 1rem) !important;
      max-height: calc(100vh - 5rem) !important;
      transform: translateY(60px) !important;
    }
    
    #fileUploadConfirmModal .modal-content {
      max-height: calc(100vh - 6rem) !important;
      border-radius: 12px !important;
    }
    
    #fileUploadConfirmModal .modal-header {
      padding: 1rem !important;
      border-bottom: 1px solid #e4e7ec !important;
      flex-shrink: 0 !important;
    }
    
    #fileUploadConfirmModal .modal-header h4 {
      font-size: 1.25rem !important;
      margin-bottom: 0.25rem !important;
      line-height: 1.4 !important;
    }
    
    #fileUploadConfirmModal .modal-body {
      padding: 1rem !important;
      max-height: calc(100vh - 250px) !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }
    
    #fileUploadConfirmModal .modal-footer {
      padding: 1rem !important;
      border-top: 1px solid #e4e7ec !important;
      flex-shrink: 0 !important;
    }
    
    /* Ensure modal is not cut off at top */
    #fileUploadConfirmModal.modal.show .modal-dialog {
      transform: translateY(60px) !important;
    }
    
    #fileUploadConfirmModal.modal.fade .modal-dialog {
      transform: translateY(60px) !important;
    }
    
    /* Mobile Upload Help Content - Ensure visibility */
    #fileUploadConfirmModal .uploadHelp {
      display: flex !important;
      flex-direction: column !important;
      gap: 0.5rem !important;
      margin: 1rem 0 !important;
      font-size: 0.875rem !important;
    }
    
    #fileUploadConfirmModal .uploadHelp span {
      padding: 0.75rem !important;
      background-color: #f8f9fa !important;
      border-radius: 6px !important;
      font-family: monospace !important;
      font-size: 0.8rem !important;
      line-height: 1.4 !important;
      word-break: break-all !important;
    }
    
    #fileUploadConfirmModal .modal-body a {
      display: inline-flex !important;
      align-items: center !important;
      gap: 0.5rem !important;
      margin-top: 1rem !important;
      padding: 0.75rem !important;
      background-color: #f8f9fa !important;
      border-radius: 6px !important;
      text-decoration: none !important;
      color: #000 !important;
      font-size: 0.9rem !important;
      font-weight: 600 !important;
    }
    
    /* Mobile Video Modal */
    #video_pop .modal-dialog {
      margin: 0.5rem;
      max-width: calc(100% - 1rem);
    }
    
    #video_pop .modal-content {
      max-height: 90vh;
    }
    
    #video_pop .embed-responsive {
      height: 250px;
    }
    
    /* Mobile Close Button */
    .modal-header .close {
    position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      font-size: 1.5rem;
      z-index: 1050;
    }
    
    /* Mobile Alert Messages */
    .alert {
      font-size: 0.875rem;
      padding: 0.75rem;
      margin-bottom: 1rem;
    }
    
    /* Mobile Upload Help */
    .uploadHelp {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin: 1rem 0;
      font-size: 0.875rem;
    }
    
    .uploadHelp span {
      padding: 0.5rem;
      background-color: #f3f4f6;
      border-radius: 6px;
      font-family: monospace;
    }
    
    /* Mobile Touch Improvements */
    .btn {
      min-height: 44px; /* iOS recommended touch target size */
      touch-action: manipulation;
    }
    
    .modal-header .close {
      min-height: 44px;
      min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

    /* Mobile Form Improvements */
    input, select, textarea {
      min-height: 44px;
      font-size: var(--text-body-lg); /* Prevents zoom on iOS */
      touch-action: manipulation;
    }
    
    /* Mobile Table Improvements */
    .upload-transaction-table {
      -webkit-overflow-scrolling: touch;
    }
    
    .upload-transaction-table table {
      border-collapse: separate;
      border-spacing: 0;
    }
    
    .upload-transaction-table th {
      position: sticky;
      top: 0;
      background-color: #f8f9fa;
      z-index: 10;
    }
    
    /* Mobile Progress Improvements */
    .progress {
      -webkit-appearance: none;
      appearance: none;
    }
    
    .progress-bar {
      transition: width 0.3s ease;
    }
    
    /* Mobile Modal Animations */
    .modal.fade .modal-dialog {
      transform: translate(0, 0);
      transition: transform 0.3s ease-out;
    }
    
    .modal.show .modal-dialog {
      transform: translate(0, 0);
    }
    
    /* Mobile Accessibility */
    .modal-header h4,
    .modal-header .modal-title {
      font-size: 1.25rem;
      font-weight: 600;
      line-height: 1.4;
    }
    
    .modal-body {
      line-height: 1.5;
    }
    
    /* Mobile Button Groups */
    .modal-footer {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    
    .modal-footer .btn {
      order: 1;
    }
    
    .modal-footer .btn:last-child {
      order: 0;
    }
    
    /* Fix Specific Overlapping Issues */
    .upload-transaction-box {
      margin-bottom: 2rem !important;
      position: relative !important;
      z-index: 1 !important;
    }
    
    .upload-transaction-box > div {
      margin-bottom: 1rem !important;
    }
    
    .upload-transaction-box > div:last-child {
      margin-bottom: 0 !important;
    }
    
    /* Ensure proper spacing between sections */
    #uploadTransactionList {
      margin-top: 1rem !important;
      margin-bottom: 1.5rem !important;
    }
    
    /* Fix button positioning with proper spacing */
    .submit-upload-buttons {
      clear: both !important;
      margin-top: 2rem !important;
      margin-bottom: 1rem !important;
      padding: 1.5rem 0 !important;
      border-top: 1px solid #e4e7ec !important;
      position: relative !important;
      z-index: 10 !important;
    }
    
    /* Ensure no overlapping with floating elements */
    .upload-transaction-Modal .modal-body {
      position: relative !important;
      z-index: 1 !important;
      padding-bottom: 2rem !important;
    }
    
    /* Extra small screens - Keep file upload modal horizontal */
    @media (max-width: 480px) {
      /* Keep file upload modal horizontal even on small screens */
      #fileUploadProgressModal .upload-transaction-input {
        flex-direction: row !important;
        align-items: flex-end !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
      }
      
      #fileUploadProgressModal .upload-transaction-input .securityContainer {
        flex: 2 !important;
        min-width: 150px !important;
      }
      
      #fileUploadProgressModal .upload-transaction-input > div:not(.securityContainer) {
        flex: 1 !important;
        min-width: 80px !important;
      }
      
      .submit-upload-buttons {
        flex-direction: column;
        gap: 0.5rem;
      }
      
      .submit-upload-buttons .btn {
        width: 100%;
      }
    }
  }

  .btn-outline-dark-wright {
    background-color: white;
    border: 2px solid #6c757d;
    color: #6c757d;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  .btn-outline-dark-wright:hover {
    background-color: #6c757d;
    color: white;
  }

  /* ========================================
     MODAL SCROLL BEHAVIOR & LAYOUT
  ======================================== */
  
  /* Fix modal scroll behavior */
  .modal-open {
    overflow: hidden !important;
  }
  
  .upload-transaction-Modal {
    overflow: hidden !important;
    z-index: 1050 !important;
  }
  
  .upload-transaction-Modal .modal-dialog {
    overflow: hidden !important;
  }
  
  .upload-transaction-Modal .modal-content {
    overflow: hidden !important;
    max-height: 90vh;
  }
  
  .upload-transaction-Modal .modal-body {
    overflow-y: auto !important;
    max-height: calc(90vh - 120px);
  }
  
  .upload-transaction-Modal .upload-transaction-table {
    overflow-y: auto !important;
    max-height: 300px;
  }
  
  /* Prevent scroll events from bubbling to background */
  .upload-transaction-Modal * {
    scroll-behavior: smooth;
  }
  
  /* Ensure modal backdrop prevents background interaction */
  .modal-backdrop {
    z-index: 1040 !important;
    pointer-events: none;
  }
  
  .modal-backdrop.show {
    pointer-events: auto;
  }
  
  /* ========================================
     DESKTOP RESPONSIVE STYLES
  ======================================== */
  
  @media (min-width: 769px) {
    /* Desktop Modal Layout */
    .upload-transaction-Modal .modal-dialog {
      max-width: 800px;
      margin: 1.75rem auto;
    }
    
    .upload-transaction-Modal .modal-content {
      max-height: 85vh;
    }
    
    .upload-transaction-Modal .modal-body {
      max-height: calc(85vh - 140px);
    }
    
    /* Desktop Upload Transaction Input */
    .upload-transaction-input {
      flex-direction: row;
      align-items: flex-end;
      gap: 15px;
    }
    
    .upload-transaction-input .securityContainer {
      flex: 2;
      min-width: 0;
    }
    
    .upload-transaction-input > div:not(.securityContainer) {
      flex: 1;
      min-width: 120px;
    }
    
    /* Desktop Buttons */
    .submit-upload-buttons {
      display: flex;
      flex-direction: row;
      gap: 1rem;
      justify-content: flex-end;
    }
    
    .submit-upload-buttons .btn {
      width: auto;
      min-width: 120px;
    }
    
    /* Desktop File Upload Table */
    .fileUploadTable {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
      padding: 10px;
      background-color: #f8f9fa;
      border-radius: 8px;
    }
    
    .fileUploadTableCell {
      text-align: center;
      flex: 1;
    }
    
    .fileUploadTableHeader {
      font-weight: 600;
      font-size: var(--text-body-sm);
      color: #495057;
      margin-bottom: 5px;
    }
    
    .fileUploadTableData {
      font-size: var(--text-title-sm);
      font-weight: 700;
      color: #212529;
    }
    
    /* Desktop File Upload Transaction List */
    #fileUploadProgressModal #fileUploadTransactionList {
      display: block !important;
      width: 100%;
      margin-top: 1rem;
      visibility: visible !important;
    }
    
    #fileUploadProgressModal #fileUploadTransactionList .upload-transaction-input,
    #fileUploadProgressModal #fileUploadTransactionList .csvUpload {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      padding: 0.75rem 1rem !important;
      margin-bottom: 0.75rem !important;
      background-color: #f8f9fa !important;
      border: 1px solid #e0e0e0 !important;
      border-radius: 8px !important;
      gap: 1rem !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    #fileUploadProgressModal #fileUploadTransactionList .upload-transaction-input > div {
      flex: 1;
      min-width: 100px;
      font-size: 0.875rem;
    }
    
    #fileUploadProgressModal #fileUploadTransactionList .upload-transaction-input .securityContainer {
      flex: 2;
      min-width: 200px;
    }
    
    #fileUploadProgressModal #fileUploadTransactionList .upload-transaction-input label {
      font-weight: 600;
      color: #374151;
      margin-bottom: 0.25rem;
      display: block;
      font-size: 0.75rem;
    }
    
    #fileUploadProgressModal #fileUploadTransactionList .upload-transaction-input input {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 0.875rem;
      background-color: white;
    }
  }
  
  /* ========================================
     FILE UPLOAD PROGRESS MODAL
  ======================================== */
  
  /* Fix file upload progress modal scroll */
  #fileUploadProgressModal {
    overflow: hidden !important;
    z-index: 1050 !important;
  }
  
  #fileUploadProgressModal .modal-dialog {
    overflow: hidden !important;
    max-height: 90vh;
  }
  
  #fileUploadProgressModal .modal-content {
    overflow: hidden !important;
    max-height: 90vh;
  }
  
  #fileUploadProgressModal .modal-body {
    overflow-y: auto !important;
    max-height: calc(90vh - 140px);
    padding: 1rem;
  }
  
  #fileUploadProgressModal .upload-transaction-box,
  #fileUploadProgressModal #fileUploadTransactionBox {
    overflow-y: auto !important;
    max-height: 400px;
    margin-top: 1rem;
    display: block !important;
    width: 100%;
  }
  
  #fileUploadProgressModal #fileUploadTransactionList {
    display: block !important;
    width: 100%;
    margin-top: 1rem;
  }
  
  #fileUploadProgressModal #fileUploadTransactionList .upload-transaction-input {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0.75rem !important;
    margin-bottom: 0.5rem !important;
    background-color: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    gap: 1rem !important;
  }
  
  #fileUploadProgressModal #fileUploadTransactionList .upload-transaction-input > div {
    flex: 1;
    font-size: 0.875rem;
    color: #374151;
  }
  
  #fileUploadProgressModal #fileUploadTransactionList .upload-transaction-input .securityContainer {
    flex: 2;
  }
  
  #fileUploadProgressModal #fileUploadTransactionList .csvUpload {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure all child elements in fileUploadTransactionList are visible */
  #fileUploadProgressModal #fileUploadTransactionList > * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Add minimum height to show when list should have content */
  #fileUploadProgressModal .upload-transaction-box:not(:empty) {
    min-height: 50px;
  }
  
  /* Style for any dynamically added transaction items */
  #fileUploadProgressModal [class*="transaction"],
  #fileUploadProgressModal [class*="Transaction"] {
    display: block !important;
    visibility: visible !important;
    margin-bottom: 0.5rem;
  }
  
  /* Prevent scroll events from bubbling to background for file upload modal */
  #fileUploadProgressModal * {
    scroll-behavior: smooth;
  }
  
  /* ========================================
     ACCESSIBILITY IMPROVEMENTS
  ======================================== */
  
  /* Ensure focus is visible on modal elements */
  #transactionModal button:focus,
  #transactionModal input:focus,
  #transactionModal select:focus,
  #transactionModal textarea:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
  }
  
  /* Ensure close button is properly styled */
  #transactionModal .close {
    cursor: pointer;
  }
  
  #transactionModal .close:hover {
    opacity: 0.7;
  }
  
  /* ========================================
     FILE UPLOAD MODAL - FORCE HORIZONTAL LAYOUT
  ======================================== */
  
  /* Override any conflicting styles for file upload modal */
  #fileUploadProgressModal .upload-transaction-input,
  #fileUploadProgressModal .csvUpload {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 1rem !important;
    padding: 0.75rem !important;
    margin-bottom: 0.5rem !important;
    background-color: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    width: 100% !important;
  }
  
  #fileUploadProgressModal .upload-transaction-input .securityContainer {
    flex: 2 !important;
    min-width: 200px !important;
  }
  
  #fileUploadProgressModal .upload-transaction-input > div:not(.securityContainer) {
    flex: 1 !important;
    min-width: 100px !important;
  }
  
  #fileUploadProgressModal .upload-transaction-input label {
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 0.25rem !important;
    display: block !important;
    font-size: 0.875rem !important;
  }
  
  #fileUploadProgressModal .upload-transaction-input input {
    width: 100% !important;
    padding: 0.5rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    font-size: 0.875rem !important;
    background-color: white !important;
  }

  /* Keep layout stable: dropdown and long scheme text must not change row height */
  .upload-transaction-Modal .securityContainer {
    position: relative;
    min-height: 52px;
  }
  .upload-transaction-Modal #tickerContainer {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 2px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    z-index: 20 !important;
  }

  /* ========================================
     MANUAL UPLOAD MODAL REDESIGN (#transactionModal)
     Scoped with the modal id so these rules win over
     the legacy generic rules above.
  ======================================== */

  #transactionModal .modal-content {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.18) !important;
    overflow: hidden !important;
  }

  /* --- Header --- */
  #transactionModal .modal-header {
    padding: 20px 24px 16px !important;
    border-bottom: 1px solid #eaecf0 !important;
    align-items: flex-start !important;
  }
  #transactionModal .txn-header-content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 32px;
  }
  #transactionModal .txn-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f4ebff 0%, #e9d7fe 100%);
    color: #7f56d9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
  }
  #transactionModal .modal-header h4 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    color: #101828 !important;
  }
  #transactionModal .modal-header p {
    margin: 3px 0 0 !important;
    font-size: 0.875rem !important;
    color: var(--text-muted, #475467) !important;
  }

  #transactionModal .modal-body {
    padding: 18px 24px !important;
  }

  /* --- Step labels --- */
  #transactionModal .txn-step-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #344054;
    margin-bottom: 10px;
  }
  #transactionModal .txn-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #7f56d9;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
  }
  #transactionModal .txn-funds-header {
    margin-top: 18px;
  }
  #transactionModal .txn-funds-count {
    background: #f4ebff;
    color: #6941c6;
    border-radius: 999px;
    padding: 1px 10px;
    font-size: 0.75rem;
    font-weight: 700;
  }

  /* --- Fund entry rows --- */
  #transactionModal .upload-transaction-input.transactionContainer {
    display: grid !important;
    grid-template-columns: minmax(0, 2.2fr) minmax(90px, 1fr) minmax(90px, 1fr) !important;
    align-items: end !important;
    gap: 12px !important;
    border: 1px solid #eaecf0 !important;
    border-radius: 12px !important;
    background: #f9fafb !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
    position: relative !important;
  }
  /* Added rows carry a remove button: give it its own column */
  #transactionModal .upload-transaction-input.transactionContainer:has(.btn-danger) {
    grid-template-columns: minmax(0, 2.2fr) minmax(90px, 1fr) minmax(90px, 1fr) auto !important;
  }
  #transactionModal .upload-transaction-input.transactionContainer > div {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  #transactionModal .upload-transaction-input.transactionContainer label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #475467 !important;
    margin-bottom: 4px !important;
    display: block !important;
  }
  #transactionModal .upload-transaction-input.transactionContainer .form-control {
    height: 42px !important;
    min-height: 42px !important;
    /* No !important: validation JS flags invalid fields via inline border-color */
    border: 1px solid #d0d5dd;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    background: #fff !important;
    box-shadow: none !important;
    margin: 0 !important;
    width: 100% !important;
  }
  #transactionModal .upload-transaction-input.transactionContainer .form-control:focus {
    border-color: #7f56d9 !important;
    box-shadow: 0 0 0 3px rgba(127, 86, 217, 0.12) !important;
    outline: none !important;
  }
  #transactionModal .upload-transaction-input.transactionContainerError {
    border-color: #fda29b !important;
    background: #fffbfa !important;
  }

  /* Remove-row button: inline, aligned with inputs (overrides legacy absolute hack) */
  #transactionModal .transactionContainer .btn-danger {
    position: static !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: end !important;
    background: #fff !important;
    border: 1px solid #eaecf0 !important;
    border-radius: 8px !important;
    color: var(--text-muted, #475467) !important;
    font-size: 0.875rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
  }
  #transactionModal .transactionContainer .btn-danger:hover,
  #transactionModal .transactionContainer .btn-danger:focus {
    background: #fef3f2 !important;
    border-color: #fda29b !important;
    color: #d92d20 !important;
  }

  /* --- Entry actions row --- */
  #transactionModal .txn-entry-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 2px 0 16px !important;
    border: none !important;
    padding: 0 !important;
  }
  #transactionModal .txn-add-row-btn {
    background: none;
    border: 1px dashed #d6bbfb;
    color: #6941c6;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    min-height: 42px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  #transactionModal .txn-add-row-btn:hover,
  #transactionModal .txn-add-row-btn:focus {
    background: #f9f5ff;
    border-color: #b692f6;
    color: #53389e;
  }
  #transactionModal .txn-add-funds-btn {
    min-height: 42px !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* --- "or" divider --- */
  #transactionModal .txn-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted, #475467);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 14px !important;
  }
  #transactionModal .txn-divider::before,
  #transactionModal .txn-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #eaecf0;
  }

  /* --- File upload card --- */
  #transactionModal .txn-file-upload-card {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    gap: 14px;
    padding: 14px 16px !important;
    background: #fff;
    border: 1.5px dashed #d0d5dd;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    margin: 0 !important;
    float: none !important;
  }
  #transactionModal .txn-file-upload-card:hover,
  #transactionModal .txn-file-upload-card:focus {
    border-color: #7f56d9;
    background: #fcfaff;
  }
  #transactionModal .txn-file-upload-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f4ebff;
    color: #7f56d9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
  }
  #transactionModal .txn-file-upload-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 600 !important;
    color: #344054;
    line-height: 1.3;
  }
  #transactionModal .txn-file-upload-sub {
    display: block;
    font-size: 0.8rem;
    font-weight: 400 !important;
    color: var(--text-muted, #475467);
    margin-top: 2px;
    line-height: 1.3;
  }
  #transactionModal .txn-file-upload-arrow {
    margin-left: auto;
    color: var(--text-muted, #475467);
    font-size: 0.8rem;
  }

  /* --- Empty state --- */
  #transactionModal .txn-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 16px;
    border: 1px dashed #eaecf0;
    border-radius: 12px;
    background: #fcfcfd;
    color: var(--text-muted, #475467);
    font-size: 0.875rem;
    text-align: center;
  }
  #transactionModal .txn-empty-state i {
    font-size: 1.1rem;
  }

  /* --- Funds table --- */
  #transactionModal .upload-transaction-table {
    margin: 0 !important;
    border: 1px solid #eaecf0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    overflow: hidden;
  }
  #transactionModal .upload-transaction-table table {
    margin-bottom: 0 !important;
  }
  #transactionModal .upload-transaction-table th {
    background: #f9fafb !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #475467 !important;
    border-top: none !important;
    border-bottom: 1px solid #eaecf0 !important;
    padding: 10px 14px !important;
  }
  #transactionModal .upload-transaction-table td {
    font-size: 0.875rem !important;
    color: #344054 !important;
    border-top: none !important;
    border-bottom: 1px solid #f2f4f7 !important;
    padding: 10px 14px !important;
    vertical-align: middle !important;
  }

  /* --- Footer --- */
  #transactionModal .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 24px 18px !important;
    border-top: 1px solid #eaecf0 !important;
  }
  #transactionModal .txn-footer-hint {
    color: var(--text-muted, #475467);
    font-size: 0.8rem;
  }
  #transactionModal .review-Txn-Button {
    min-height: 44px !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    order: 1 !important;
    margin: 0 !important;
  }

  /* --- File upload confirm modal (#fileUploadConfirmModal) --- */
  #fileUploadConfirmModal .modal-content {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.18) !important;
    overflow: hidden !important;
  }
  #fileUploadConfirmModal .modal-header {
    padding: 18px 22px 14px !important;
    border-bottom: 1px solid #eaecf0 !important;
    align-items: flex-start !important;
  }
  #fileUploadConfirmModal .txn-header-content {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-right: 28px;
  }
  #fileUploadConfirmModal .txn-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, #f4ebff 0%, #e9d7fe 100%);
    color: #7f56d9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
  }
  #fileUploadConfirmModal .modal-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    color: #101828 !important;
  }
  #fileUploadConfirmModal .txn-upload-modal-sub {
    margin: 3px 0 0 !important;
    font-size: 0.82rem !important;
    color: var(--text-muted, #475467) !important;
  }
  #fileUploadConfirmModal .close {
    color: var(--text-muted, #475467);
    opacity: 1;
    text-shadow: none;
  }
  #fileUploadConfirmModal .close:hover {
    color: #475467;
  }
  #fileUploadConfirmModal .modal-body {
    padding: 18px 22px !important;
    max-height: none !important;
  }
  #fileUploadConfirmModal .txn-upload-format-intro {
    font-size: 0.875rem;
    color: #475467;
    margin-bottom: 12px;
  }
  #fileUploadConfirmModal .uploadHelp {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
    background: none !important;
    padding: 0 !important;
  }
  #fileUploadConfirmModal .uploadHelp span {
    flex: 1 !important;
    background: #f9fafb !important;
    border: 1px solid #eaecf0 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
    font-size: 0.78rem !important;
    color: #475467 !important;
    line-height: 1.7 !important;
    word-break: normal !important;
  }
  #fileUploadConfirmModal .uploadHelp span strong {
    color: #101828;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 0.8rem;
  }
  #fileUploadConfirmModal .modal-body a.txn-sample-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    background: #f9f5ff !important;
    border: 1px solid #e9d7fe !important;
    border-radius: 8px !important;
    color: #6941c6 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
  }
  #fileUploadConfirmModal .modal-body a.txn-sample-link:hover {
    background: #f4ebff !important;
    border-color: #d6bbfb !important;
    color: #53389e !important;
  }
  #fileUploadConfirmModal .modal-footer {
    padding: 14px 22px 18px !important;
    border-top: 1px solid #eaecf0 !important;
    display: block !important;
  }
  #fileUploadConfirmModal #fileInputContainer {
    margin: 0 !important;
  }
  #fileUploadConfirmModal .txn-choose-file-btn {
    min-height: 46px !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    margin: 0 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
  }
  #fileUploadConfirmModal .txn-choose-file-btn:hover,
  #fileUploadConfirmModal .txn-choose-file-btn:focus {
    background: #232b3e !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 37, 60, 0.25);
  }

  @media (max-width: 480px) {
    #fileUploadConfirmModal .uploadHelp {
      flex-direction: column !important;
    }
  }

  /* --- Mobile --- */
  @media (max-width: 768px) {
    /* Keep DOM order; neutralise the legacy order hacks above */
    #transactionModal .upload-transaction-box > * {
      order: 0 !important;
      margin-bottom: 0 !important;
    }
    #transactionModal .upload-transaction-box {
      margin-bottom: 0 !important;
    }
    #transactionModal .upload-transaction-input.transactionContainer {
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
      padding: 12px !important;
      padding-right: 12px !important;
      margin-bottom: 10px !important;
    }
    #transactionModal .upload-transaction-input.transactionContainer .securityContainer {
      grid-column: 1 / -1;
    }
    /* On mobile the remove button sits at the card's top-right corner */
    #transactionModal .transactionContainer .btn-danger {
      position: absolute !important;
      top: 10px !important;
      right: 10px !important;
      width: 28px !important;
      height: 28px !important;
      min-width: 28px !important;
      min-height: 28px !important;
      max-width: 28px !important;
      max-height: 28px !important;
      border-radius: 6px !important;
      font-size: 0.75rem !important;
      z-index: 5 !important;
    }
    #transactionModal .upload-transaction-input.transactionContainer .securityContainer label {
      padding-right: 36px;
    }
    #transactionModal .txn-entry-actions {
      flex-direction: column-reverse !important;
      align-items: stretch !important;
      gap: 8px !important;
      margin: 4px 0 14px !important;
    }
    #transactionModal .txn-add-row-btn,
    #transactionModal .txn-add-funds-btn {
      width: 100% !important;
      justify-content: center !important;
    }
    #transactionModal .modal-footer {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 8px !important;
    }
    #transactionModal .txn-footer-hint {
      text-align: center;
      order: 2;
    }
    #transactionModal .review-Txn-Button {
      width: 100% !important;
    }
    #transactionModal .upload-transaction-table {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
  }