cbsnexora/src/app/shared/dormancy-alert-panel/dormancy-alert-panel.component.scss

/**
 * 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 'sass:color';

// ── Design Tokens ──────────────────────────────────────────────────────────
// Risk colours
$c-safe: #16a34a;
$bg-safe: #f0fdf4;
$bd-safe: #bbf7d0;
$c-low: #0284c7;
$bg-low: #f0f9ff;
$bd-low: #bae6fd;
$c-medium: #d97706;
$bg-medium: #fffbeb;
$bd-medium: #fde68a;
$c-high: #dc2626;
$bg-high: #fff5f5;
$bd-high: #fecaca;
$c-critical: #b91c1c;
$bg-critical: #fef2f2;
$bd-critical: #fca5a5;
$c-escheat: #7c3aed;
$bg-escheat: #f5f3ff;
$bd-escheat: #ddd6fe;

// Neutral
$text: #1e293b;
$muted: #64748b;
$subtle: #94a3b8;
$border: #e2e8f0;
$surface: #f8fafc;

// ── Host ───────────────────────────────────────────────────────────────────
:host {
  display: block;
  margin: 14px 0 18px;
}

// ── Root wrapper ───────────────────────────────────────────────────────────
.dap {
  border-radius: 14px;
  border: 1.5px solid $border;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 4px rgb(0 0 0 / 6%);
  transition: box-shadow 0.2s;

  &:hover {
    box-shadow: 0 3px 12px rgb(0 0 0 / 10%);
  }

  // Risk-tinted border
  &--safe {
    border-color: $bd-safe;
  }

  &--low {
    border-color: $bd-low;
  }

  &--medium {
    border-color: $bd-medium;
  }

  &--high {
    border-color: $bd-high;
  }

  &--critical {
    border-color: $bd-critical;
  }

  &--escheat {
    border-color: $bd-escheat;
  }

  // ── HEADER ───────────────────────────────────────────────────────
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    background: $surface;
    border-bottom: 1px solid $border;
  }

  &__header-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  &__icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid $border;

    i {
      font-size: 17px;
    }

    .dap--safe & {
      background: $bg-safe;
      border-color: $bd-safe;

      i {
        color: $c-safe;
      }
    }

    .dap--low & {
      background: $bg-low;
      border-color: $bd-low;

      i {
        color: $c-low;
      }
    }

    .dap--medium & {
      background: $bg-medium;
      border-color: $bd-medium;

      i {
        color: $c-medium;
      }
    }

    .dap--high & {
      background: $bg-high;
      border-color: $bd-high;

      i {
        color: $c-high;
      }
    }

    .dap--critical & {
      background: $bg-critical;
      border-color: $bd-critical;

      i {
        color: $c-critical;
      }
    }

    .dap--escheat & {
      background: $bg-escheat;
      border-color: $bd-escheat;

      i {
        color: $c-escheat;
      }
    }
  }

  &__title {
    font-size: 13.5px;
    font-weight: 700;
    color: $text;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }

  &__subtitle {
    font-size: 11.5px;
    color: $muted;
    margin-top: 2px;
    line-height: 1.4;
  }

  // ── Badge group ──────────────────────────────────────────────────
  &__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  &__risk-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: default;

    .dap--safe & {
      background: $bg-safe;
      color: $c-safe;
      border: 1.5px solid $bd-safe;
    }

    .dap--low & {
      background: $bg-low;
      color: $c-low;
      border: 1.5px solid $bd-low;
    }

    .dap--medium & {
      background: $bg-medium;
      color: $c-medium;
      border: 1.5px solid $bd-medium;
    }

    .dap--high & {
      background: $bg-high;
      color: $c-high;
      border: 1.5px solid $bd-high;
    }

    .dap--critical & {
      background: $bg-critical;
      color: $c-critical;
      border: 1.5px solid $bd-critical;
    }

    .dap--escheat & {
      background: $bg-escheat;
      color: $c-escheat;
      border: 1.5px solid $bd-escheat;
    }
  }

  &__risk-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    animation: pulse-dot 2s ease-in-out infinite;

    .dap--safe & {
      background: $c-safe;
    }

    .dap--low & {
      background: $c-low;
    }

    .dap--medium & {
      background: $c-medium;
    }

    .dap--high & {
      background: $c-high;
    }

    .dap--critical & {
      background: $c-critical;
    }

    .dap--escheat & {
      background: $c-escheat;
    }
  }

  &__monitor-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: $bg-low;
    color: $c-low;
    border: 1.5px solid $bd-low;

    i {
      font-size: 10px;
    }
  }

  // ── Metric Cards ─────────────────────────────────────────────────
  &__cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid $border;

    &--product {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    @media (width <= 1024px) {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

      .dap__card:nth-child(3n) {
        border-right: none;
      }
    }

    @media (width <= 600px) {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

      .dap__card:nth-child(2n) {
        border-right: none;
      }
    }
  }

  &__card {
    padding: 14px 16px;
    border-right: 1px solid $border;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: background 0.15s;
    min-width: 0; // allow text to wrap within grid cell

    &:last-child {
      border-right: none;
    }

    &:hover {
      background: $surface;
    }
  }

  &__card-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: $muted;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__card-hint {
    font-size: 10.5px;
    color: $subtle;
    margin-top: 2px;
    line-height: 1.3;
  }

  &__help {
    font-size: 9px;
    color: $subtle;
    cursor: help;
    flex-shrink: 0;

    &:hover {
      color: $c-low;
    }
  }

  // Status pill
  &__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    width: fit-content;

    i {
      font-size: 11px;
    }

    &--green {
      background: $bg-safe;
      color: $c-safe;
      border: 1px solid $bd-safe;
    }

    &--gray {
      background: #f1f5f9;
      color: $muted;
      border: 1px solid #e2e8f0;
    }

    &--safe {
      background: $bg-safe;
      color: $c-safe;
      border: 1px solid $bd-safe;
    }

    &--low {
      background: $bg-low;
      color: $c-low;
      border: 1px solid $bd-low;
    }

    &--medium {
      background: $bg-medium;
      color: $c-medium;
      border: 1px solid $bd-medium;
    }

    &--high {
      background: $bg-high;
      color: $c-high;
      border: 1px solid $bd-high;
    }

    &--critical {
      background: $bg-critical;
      color: $c-critical;
      border: 1px solid $bd-critical;
    }

    &--escheat {
      background: $bg-escheat;
      color: $c-escheat;
      border: 1px solid $bd-escheat;
    }
  }

  // Number display
  &__number {
    font-size: 22px;
    font-weight: 800;
    color: $text;
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;

    small {
      font-size: 11px;
      font-weight: 500;
      color: $muted;
    }

    &--warn {
      color: $c-high;

      small {
        color: color.adjust($c-high, $lightness: 10%);
      }
    }
  }

  &__date {
    font-size: 12.5px;
    font-weight: 600;
    color: $text;
    display: flex;
    align-items: center;
    gap: 6px;

    i {
      color: $muted;
      font-size: 12px;
    }

    &--muted {
      color: $muted;
    }
  }

  &__reached {
    font-size: 12px;
    font-weight: 600;
    color: $c-high;
    display: flex;
    align-items: center;
    gap: 6px;

    i {
      font-size: 11px;
    }
  }

  &__na {
    font-size: 12px;
    color: $subtle;
    font-style: italic;
  }

  // ── Timeline ─────────────────────────────────────────────────────
  &__timeline {
    padding: 16px 18px 18px;
    background: $surface;
    border-top: 1px solid $border;
  }

  &__tl-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
  }

  &__tl-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: $muted;
  }

  &__tl-note {
    font-size: 10px;
    color: $subtle;
    font-style: italic;
  }

  &__tl-track {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  &__tl-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    min-width: 68px;
  }

  &__tl-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid $border;
    background: #fff;
    transition: all 0.2s;

    i {
      font-size: 12px;
      color: #cbd5e1;
    }

    &--done {
      background: $c-safe;
      border-color: $c-safe;
      box-shadow: 0 0 0 3px rgba($c-safe, 0.15);

      i {
        color: #fff;
      }
    }

    &--current {
      background: #fff;
      box-shadow: 0 0 0 3px rgb(0 0 0 / 8%);

      .dap--safe &,
      .dap--low & {
        border-color: $c-safe;
        box-shadow: 0 0 0 3px rgba($c-safe, 0.15);

        i {
          color: $c-safe;
        }
      }

      .dap--medium & {
        border-color: $c-medium;
        box-shadow: 0 0 0 3px rgba($c-medium, 0.15);

        i {
          color: $c-medium;
        }
      }

      .dap--high &,
      .dap--critical & {
        border-color: $c-high;
        box-shadow: 0 0 0 3px rgba($c-high, 0.15);

        i {
          color: $c-high;
        }
      }

      .dap--escheat & {
        border-color: $c-escheat;
        box-shadow: 0 0 0 3px rgba($c-escheat, 0.15);

        i {
          color: $c-escheat;
        }
      }
    }

    &--pending {
      background: $surface;

      i {
        color: #cbd5e1;
      }
    }
  }

  &__tl-name {
    font-size: 10px;
    font-weight: 700;
    color: $muted;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
    cursor: help;
    display: flex;
    align-items: center;
    gap: 3px;
  }

  &__tl-info {
    font-size: 8px;
    color: $subtle;
    text-transform: none;
  }

  &__tl-sub {
    font-size: 9px;
    color: $subtle;
    text-align: center;
  }

  &__tl-days {
    font-size: 10px;
    color: $muted;
    background: #e9eef5;
    border-radius: 999px;
    padding: 2px 7px;
    font-weight: 600;
    white-space: nowrap;
  }

  &__tl-reached-tag {
    font-size: 9px;
    color: $c-high;
    background: $bg-high;
    border-radius: 999px;
    padding: 2px 7px;
    font-weight: 700;
    border: 1px solid $bd-high;
    white-space: nowrap;
  }

  &__tl-line {
    flex: 1;
    height: 2px;
    background: $border;
    margin: 14px 2px 0;
    min-width: 20px;
    border-radius: 2px;
    transition: background 0.3s;

    &--done {
      background: $c-safe;
    }
  }
}

// ── Pulse animation for risk dot ───────────────────────────────────────────
@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}