/**
 * 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/.
 */

$primary: #0f766e;

.csm-container {
  // Four inputs sit side by side in the entry row; 760px squeezed them out of the card.
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px;
}

.csm-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;

  &__title {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
  }
}

.csm-back {
  color: $primary;
}

.csm-card {
  background: var(--md-sys-color-surface, #fff);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
  padding: 16px 24px 24px;
}

.csm-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;

  // Sized rather than left to the browser, so the entry row keeps its shape whatever is typed in.
  th:nth-child(1),
  td:nth-child(1) {
    width: 26%;
  }

  th:nth-child(2),
  td:nth-child(2) {
    width: 22%;
  }

  th:nth-child(3),
  td:nth-child(3) {
    width: 22%;
  }

  th:nth-child(4),
  td:nth-child(4) {
    width: 18%;
  }

  th:nth-child(5),
  td:nth-child(5) {
    width: 12%;
  }

  th {
    text-align: left;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(0 0 0 / 55%);
    padding: 8px 10px;
    border-bottom: 2px solid rgb(0 0 0 / 10%);
  }

  td {
    padding: 6px 10px;
    border-bottom: 1px solid rgb(0 0 0 / 6%);
    vertical-align: middle;
  }
}

.csm-inline-field {
  width: 100%;
  // Without this the field holds its own 180px floor and pushes the next column out of the card.
  min-width: 0;

  ::ng-deep .mat-mdc-text-field-wrapper {
    height: 44px;
  }
}

.csm-row-actions {
  text-align: center;
  width: 48px;
}

.csm-new-row {
  background: rgb(15 118 110 / 4%);
}

.csm-empty {
  color: rgb(0 0 0 / 50%);
  font-size: 14px;
  margin: 12px 0 0;
}

.csm-action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgb(0 0 0 / 8%);
}

/*
 * What the slabs actually cover, and any figure between them that none of them claims.
 *
 * A gap is legitimate - a bank may set no commission below some floor - so this reports rather than
 * warns. But it has to be said out loud: the commission run finds no slab for a volume in a gap and
 * moves on, so the agent is simply paid nothing that month and nothing on screen explains it.
 */
.csm-coverage {
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid rgb(0 0 0 / 12%);
  border-radius: 6px;
  background: rgb(0 0 0 / 2.5%);
  display: flex;
  flex-direction: column;
  gap: 6px;

  &__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.86rem;
  }

  &__type {
    font-weight: 600;
    min-width: 90px;
  }

  &__range {
    color: rgb(0 0 0 / 62%);
    font-variant-numeric: tabular-nums;
  }

  &__gap {
    color: #b45309;
    font-variant-numeric: tabular-nums;
  }
}