/**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

// ── Color Palette ──
$primary-blue: #1a73e8;
$primary-blue-light: #e8f0fe;
$green: #0d9d58;
$green-light: #e6f4ea;
$purple: #7c3aed;
$purple-light: #f3e8ff;
$teal: #0891b2;
$teal-light: #e0f7fa;
$orange: #e8710a;
$orange-light: #fef3e2;
$gray-50: #f8f9fa;
$gray-100: #f1f3f4;
$gray-200: #e8eaed;
$gray-300: #dadce0;
$gray-600: #5f6368;
$gray-700: #3c4043;
$gray-900: #202124;
$white: #fff;
$red: #d93025;

// ── Main Container ──
.general-tab-container {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

// ── Performance History: Stat Cards ──
.performance-section {
  .performance-title {
    font-size: 16px;
    font-weight: 600;
    color: $gray-900;
    margin: 0 0 16px;
  }
}

.stat-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: $white;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow:
    0 1px 3px rgb(0 0 0 / 8%),
    0 1px 2px rgb(0 0 0 / 6%);
  border-left: 4px solid transparent;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;

  &:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
    transform: translateY(-2px);
  }

  &__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }

  &__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  &__label {
    font-size: 10.5px;
    font-weight: 500;
    color: $gray-600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  &__value {
    font-size: 16px;
    font-weight: 700;
    color: $gray-900;
    line-height: 1.2;
    margin-top: 2px;
  }

  // Color variants
  &--blue {
    border-left-color: $primary-blue;

    .stat-card__icon {
      background: $primary-blue-light;
      color: $primary-blue;
    }
  }

  &--green {
    border-left-color: $green;

    .stat-card__icon {
      background: $green-light;
      color: $green;
    }
  }

  &--purple {
    border-left-color: $purple;

    .stat-card__icon {
      background: $purple-light;
      color: $purple;
    }
  }

  &--teal {
    border-left-color: $teal;

    .stat-card__icon {
      background: $teal-light;
      color: $teal;
    }
  }

  &--orange {
    border-left-color: $orange;

    .stat-card__icon {
      background: $orange-light;
      color: $orange;
    }
  }
}

// ── Section Headers ──
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 2px solid $gray-200;
  margin-bottom: 0;

  &__left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  &__icon {
    font-size: 18px;
    color: $primary-blue;
  }

  &__title {
    font-size: 15px;
    font-weight: 600;
    color: $gray-900;
    margin: 0;
  }

  &__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 12px;
    background: $primary-blue-light;
    color: $primary-blue;
    font-size: 12px;
    font-weight: 600;
  }

  &__right {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

// ── Account Sections ──
.account-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

// Marks an FD row that is a renewal of an earlier term, since the row shows the original FD number
// rather than this term's own account number.
.fd-renewal-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 10px;
  background-color: $gray-200;
  color: $gray-700;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

// ── Table Wrapper ──
.table-wrapper {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
  border: 1px solid $gray-200;
  border-top: none;

  table {
    width: 100%;
  }
}

// ── Mat Table Styling ──
/* stylelint-disable selector-no-qualifying-type */
table[mat-table] {
  width: 100%;
  border-collapse: collapse;

  // Header row
  tr[mat-header-row] {
    background: $gray-700;
    height: 44px;
  }

  th[mat-header-cell] {
    color: $white;
    font-weight: 600;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0 14px;
    border-bottom: none;

    &.r-amount {
      text-align: right;
    }

    &.center {
      text-align: center;
    }
  }

  // Data rows
  tr[mat-row] {
    height: 48px;
    transition: background-color 0.15s ease;

    &:nth-child(even) {
      background-color: $gray-50;
    }

    &:nth-child(odd) {
      background-color: $white;
    }

    &:hover {
      background-color: $primary-blue-light !important;
      cursor: pointer;
    }

    &.select-row:hover {
      cursor: pointer;
    }
  }

  td[mat-cell] {
    padding: 0 14px;
    font-size: 13.5px;
    color: $gray-700;
    border-bottom: 1px solid $gray-200;

    &.r-amount {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    &.center {
      text-align: center;
    }
  }

  // Footer rows
  tr[mat-footer-row] {
    height: auto;
  }

  td[mat-footer-cell] {
    border-bottom: none;
    padding: 0;
  }

  // Status indicator dots
  .fa-stop {
    font-size: 10px;
    margin-right: 6px;
    vertical-align: middle;
  }

  // Action buttons
  .account-action-button {
    min-width: 26px;
    padding: 0 6px;
    margin: 4px 2px;
    line-height: 25px;
    font-size: 12px;
  }
}
/* stylelint-enable selector-no-qualifying-type */

// Status color classes (for the fa-stop dots)
:host ::ng-deep {
  .status-active,
  .status-loanStatusType-active {
    color: $green !important;
  }

  .status-active-overdue {
    color: $red !important;
  }

  .status-closed,
  .status-loanStatusType-closed {
    color: $gray-600 !important;
  }

  .status-overpaid,
  .status-loanStatusType-overpaid {
    color: $primary-blue !important;
  }

  .status-submitted,
  .status-loanStatusType-submitted {
    color: $orange !important;
  }

  .status-approved,
  .status-loanStatusType-approved {
    color: $teal !important;
  }
}

// ── Empty States ──
.table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;

  &__icon {
    font-size: 36px;
    color: $gray-300;
    margin-bottom: 12px;
  }

  &__text {
    font-size: 13.5px;
    color: $gray-600;
    margin: 0;
    font-weight: 400;
  }
}

// ── PDF Modal (kept as-is, with minor polish) ──
.pdf-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(0 0 0 / 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.pdf-modal-content {
  background: $white;
  border-radius: 12px;
  padding: 24px;
  width: 85%;
  max-width: 900px;
  position: relative;
  box-shadow: 0 20px 60px rgb(0 0 0 / 30%);
}

.pdf-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 24px;
  z-index: 1;
}

.rd-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  background: #dcfce7;
  color: #166534;

  &--ended {
    background: #e2e8f0;
    color: #475569;
  }
}

.rd-status__date {
  margin-top: 2px;
  font-size: 11px;
  color: #64748b;
}