.borderless-custom {
  border-collapse: separate;
  border-spacing: 4px;
}

.custom-cell {
  height: 2.5rem; /* increased height for better fill */
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
  border-radius: 0.3rem;
}

div[style*="background-color: black"] .custom-cell {
  background-color: #343a40;
}

/* Override custom cell color inside grey box */
.pure-white {
  background-color: #ffffff !important;
  border-color: black;
}

.middle-section-container {
  display: flex;
  gap: 1rem;
  width: 100%;
  /* height is now controlled dynamically via [ngStyle] */
}


/* Desktop view (default) */
.main-table {
  width: 60%;
  background-color: #f1f1f1df;
}

.transaction-summary {
  width: 40%;
  background-color: #d0ddf5;
}

.borderless-custom {
  border-collapse: separate;
  border-spacing: 4px;
}

.custom-cell-new {
  height: 2.5rem;
  background-color: #f8f9fa;
  border-radius: 0.3rem;
  border: 1px solid rgba(3, 27, 69, 0.678);
}

div[style*="background-color: black"] .custom-cell {
  background-color: #343a40;
}

.pure-white {
  background-color: #ffffff !important;
}

.buttons-custom {
  display: flex;
  height: 2.6rem;
  width: 100%;
  justify-content: space-between;
  padding-bottom: 0.2rem;
}

.btn {
  padding-bottom: 0.8rem;
  height: 100%;
}
.fw-bold {
  margin-right: 2rem;
  padding-bottom: 1rem;
}
/* Desktop view (default) - reorder the layout */
@media (min-width: 801px) {
  .main-table {
    order: 1;
  }

  .transaction-summary {
    order: 2;
  }
}

/* Responsive layout for tablet and mobile */
@media (max-width: 800px) {
  .middle-section-container {
    flex-direction: column;
    align-items: center;
    height: auto;
    max-height: 50vh; /* Optional: set a cap to avoid too much height */
    overflow-y: auto; /* Add vertical scrollbar */
    padding-bottom: 1rem;
  }
  .transaction-summary,
  .main-table {
    width: 80% !important;
    margin-bottom: 1rem;
  }
}

/* REMOVE or COMMENT this block fixed */
@media (min-width: 900px) and (max-width: 1400px),
  (min-width: 1440px) and (max-width: 2600px) {
  .middle-section-container {
    height: 38vh;
  }
  .transaction_tb {
    height: 100%;
  }
  .custom-cell {
    height: 25%; /* increased height for better fill */
    background-color: #0553a0;
    border: 1px solid #ced4da;
    border-radius: 0.3rem;
  }
  .transaction-summary {
    width: 40%;
    height: 100%;
  }

  .main-table {
    height: 100%;
  }
  .table-main {
    height: 100%;
  }
}

@media (min-height: 500px) and (max-height: 760px) {
  .middle-section-container {
    height: 100%;
  }
  .main-table {
    height: 100%;
  }
}