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

@use 'assets/styles/product-list' as pl;

@include pl.product-list-styles;

/* Party-specific amber accent */
:host {
  --pl-accent: #b45309;
  --pl-accent-l: #fef3c7;
}

/* A closed party stays listed - its collections and interest are still on the books. */
.pm-row--closed td:not(.num) {
  opacity: 0.55;
}

.pm-pill {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 11px;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.7;
  background: #dcfce7;
  color: #15803d;
  white-space: nowrap;
}

.pm-pill--off {
  background: rgb(0 0 0 / 7%);
  color: rgb(0 0 0 / 52%);
}

/* The customer's real deposit account number, in the list. */
.pm-list-account {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
  font-size: 0.8rem;
}

/*
  A party with no account behind it. Called out rather than left blank: the balance beside it is
  money the bank's own books have no record of, which is the thing worth noticing here.
*/
.pm-list-no-account {
  font-size: 0.75rem;
  font-style: italic;
  color: #9b2c2c;
}

/*
  Matured accounts still open. Deliberately loud: it is money the bank owes a customer who has not
  been told, and every day it sits there is a day the bank is holding somebody else's money. Styled
  as a link to the work rather than a notice about it - reading it should be the same click as
  starting on it.
*/
.pm-due-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 16px;
  background: rgb(180 83 9 / 8%);
  border: 1px solid rgb(180 83 9 / 28%);
  border-radius: 8px;
  color: #92400e;
  text-decoration: none;
  transition: background 0.15s ease;

  &:hover {
    background: rgb(180 83 9 / 13%);
  }

  &__ic {
    font-size: 1.05rem;
    flex: 0 0 auto;
  }

  &__text {
    flex: 1 1 auto;
    font-size: 0.88rem;
    line-height: 1.45;
  }

  &__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
  }
}

@media (width <= 700px) {
  .pm-due-banner {
    flex-wrap: wrap;
  }
}

/*
 * The nominee count, which opens the list of names rather than the account itself.
 *
 * Styled as text that can be clicked rather than as a second action button: the row already has one
 * action, and a pair of equal-looking buttons would put "look at this" beside "change this" as
 * though the two were the same kind of thing.
 */
.pl-nominee-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--pl-accent);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;

  &:hover {
    text-decoration-thickness: 2px;
  }
}

.pl-muted {
  color: rgb(0 0 0 / 40%);
}