/* Payment.css */

.component-table-wrapper .pagination {
  display: unset;
  justify-content: unset;
  background-color: unset;
  border-top: unset;
  padding: unset;
  color: unset;

  svg {
    margin-left: 0rem !important;
  }
}

.bottom-gap-card-payment {
  margin-bottom: 1.5rem;
}

.inbox-header-text {
  padding-left: 16px;
  margin-top: 2px;
  @include typography-heading-m;
  color: var(--digitv2-lightTheme-primary-2);
}

.custom-inbox-filter-heading {
  padding-left: 16px;
  margin-top: 2px;
  @include typography-heading-m;
  color: var(--digitv2-lightTheme-primary-2);
}

.custom-inbox-table-row {
  width: 100%;
  text-align: start;
  border: 0px !important
}

/* Main Wrapper */
.custom-register-inbox-screen {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Row Section - Ensures Both Sections Have the Same Height */
.custom-register-inbox-screen .inner-div-row-section {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  min-height: 80vh;
  height: auto;
  align-items: stretch;
  /* Forces both sections to stay equal in height */
}

/* Filter Section - Fixed to 30% Width */
.custom-register-inbox-screen .custom-inbox-filter-section {
  flex: 0 0 20%;
  /* Fixes width to 30%, prevents unwanted expansion */
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Ensures it stretches with table */
  min-height: 100%;
  overflow-y: auto;
}

/* Table Section - Takes Remaining 70% */
.custom-register-inbox-screen .custom-inbox-outer-table-section {
  flex: 1;
  /* Takes remaining width (70%) */
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Matches filter height */
  min-height: 100%;
  overflow-y: auto;
}

/* Inner Table Section */
.custom-inbox-outer-table-section .inner-table-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* Makes sure table stretches */
}

/* Table Card Override */
.custom-inbox-outer-table-section .card-overide {
  max-width: 100%;
  overflow: auto;
  margin: 0px;
  flex-grow: 1;
  /* Makes sure the table always fills height */
}

/* Reset Proximity Icon */
.on-icon-reset-proximity {
  border: 1px solid #e0e0e0;
  padding: 6px;
  margin-bottom: 10px;
  cursor: pointer;
}

/* Bill Inbox */
.custom-bill-inbox {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.bill-container {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}

.bill-container-margin-bottom {
  margin-bottom: 2.5rem;
}

.left-section {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.filter-container {
  display: flex;
  flex-direction: row;
  height: 60vh;
  overflow-y: auto;
}

.label-pair {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

.view-label-heading {
  @include typography-heading-s;
  color: var(--digitv2-lightTheme-text-primary);
  width: 20%;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.view-label-text {
  @include typography-body-s;
  color: var(--digitv2-lightTheme-text-primary);
  width: 80%;
}

.small-loader-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.25rem; 
}

.scaled-loader {
  transform: scale(0.25);
  transform-origin: left center;
}

.payment-screen-headers{
  color: var(--digitv2-lightTheme-primary-2);
  font-size: var(--digitv2-fontSize-heading-xl-desktop);
  white-space: nowrap;
}

.edit-attendance-mangement-table{
  border-radius: 8px 8px 0px 0px;

  .rdt_TableBody{
    border: none !important;
    border-radius: 8px 8px 0px 0px;
  }

  .rdt_Table {
    border-radius: 8px 8px 0px 0px;
  }

  .rdt_TableHead {
    border-radius: 8px 8px 0px 0px;
  }

  .rdt_TableHeadRow {
    border-radius: 8px 8px 0px 0px;

    .rdt_TableCol{
      &:first-of-type{
        border-top-left-radius: 8px !important;
      }
      &:last-of-type{
        border-top-right-radius: 8px !important;
      }
    }
  }
}

.payment-setup-table,
.attendance-management-table,
.digit-attendance-inbox-table,
.digit-bill-inbox-table,
.bill-details-table,
.manage-bills-table,
.my-bills-table,
.verify-generate-payments-table,
.digit-attendee-inbox-table{
  border-radius: 8px 8px 0px 0px !important;

  .rdt_TableBody{
    border: none !important;
    border-radius: 8px 8px 0px 0px;
  }

  .rdt_Table {
    border-radius: 8px 8px 0px 0px;
  }

  .rdt_TableHead {
    border-radius: 8px 8px 0px 0px;
  }

  .rdt_TableHeadRow {
    border-radius: 8px 8px 0px 0px;

    .rdt_TableCol{
      &:first-of-type{
        border-top-left-radius: 8px !important;
      }
      &:last-of-type{
        border-top-right-radius: 8px !important;
      }
    }
  }
}

.digit-inbox-payments-table-wrapper{
  .rdt_Pagination{
    margin-top:0rem !important;
  }
}

.date-range-pair{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.digit-tag-wrapper {
  &.search-results-placeholder-tag {
    .digit-tag-text {
      color: #0057BD !important;
    }
    background-color: #EFF8FF !important;
  }
}

.date-range-picker-payments{
  .rdrDateDisplayItem input,
    .rdrDateDisplayItemActive input{
    outline: none !important;
    cursor: not-allowed !important;
    border: none !important;
  }
}