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

// The DDS product review. Layered on the Disbursement & Transfers sheet and drawn from the same
// palette, so it reads as part of the same Approval Center rather than a screen of its own.

$brand: #0f4f3c;
$brand-mid: #1f7a5c;
$brand-light: #e6f4f0;
$primary: #4a6cf7;
$warning: #b45309;
$warning-bg: #fffbeb;
$warning-border: #fde68a;
$text-dark: #0f172a;
$text-mid: #475569;
$text-soft: #94a3b8;
$border: #e2e8f0;
$bg-white: #fff;
$bg-soft: #f8fafc;
$radius: 14px;
$shadow-sm:
  0 1px 3px rgb(15 23 42 / 6%),
  0 1px 2px rgb(15 23 42 / 4%);

@mixin icon($size) {
  font-size: $size;
  width: $size;
  height: $size;
  line-height: $size;
}

.ddr-mono {
  font-family: 'JetBrains Mono', SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.02em;
}

// A product review has more to lay out than a money movement, so the dialog widens for it.
.dri-body.ddr-body {
  max-width: none;
  gap: 16px;
  padding-bottom: 0;
}

.dri--dialog:has(.ddr-body) {
  width: min(880px, 94vw);
}

// ── Hero ─────────────────────────────────────────────────────────────────────
.ddr-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border-radius: $radius;
  background:
    radial-gradient(circle at 100% 0%, rgb(255 255 255 / 12%) 0, transparent 45%),
    linear-gradient(135deg, $brand 0%, $brand-mid 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgb(15 79 60 / 22%);

  &__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgb(255 255 255 / 14%);
    border: 1px solid rgb(255 255 255 / 22%);

    mat-icon {
      @include icon(28px);
    }
  }

  &__main {
    min-width: 0;
  }

  &__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }

  &__title {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  &__code {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 13px;
    color: rgb(255 255 255 / 78%);
  }

  &__meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 18px;
    border-left: 1px solid rgb(255 255 255 / 18%);
  }

  // Status reads on the dark band as a light chip, whatever its colour on a white card.
  .dri-status {
    background: rgb(255 255 255 / 92%);
    font-size: 11px;
    padding: 3px 10px;
  }
}

.ddr-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentcolor;
  opacity: 0.6;
}

.ddr-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;

  mat-icon {
    @include icon(18px);

    opacity: 0.75;
  }

  b {
    display: block;
    font-weight: 600;
    white-space: nowrap;
  }

  small {
    display: block;
    font-size: 11px;
    color: rgb(255 255 255 / 65%);
  }
}

.ddr-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgb(255 255 255 / 16%);
  color: #fff;
  border: 1px solid rgb(255 255 255 / 28%);

  &--edit {
    background: $warning-bg;
    color: $warning;
    border-color: $warning-border;
  }
}

// ── Key terms ────────────────────────────────────────────────────────────────
.ddr-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ddr-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: $bg-white;
  border: 1px solid $border;
  border-radius: 12px;
  box-shadow: $shadow-sm;

  &__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: $text-soft;

    mat-icon {
      @include icon(16px);

      color: $brand-mid;
    }
  }

  &__value {
    font-size: 18px;
    font-weight: 700;
    color: $text-dark;
    overflow-wrap: anywhere;
  }

  &__hint {
    font-size: 11.5px;
    color: $text-mid;
    min-height: 14px;
  }

  // A value that is a name rather than a figure - an agent's code and name - reads smaller.
  &__value--small {
    font-size: 14px;
    line-height: 1.3;
  }

  &--accent {
    background: $brand-light;
    border-color: #b7ddd0;

    .ddr-stat__value {
      font-size: 26px;
      color: $brand;
    }
  }
}

// ── Edit banner ──────────────────────────────────────────────────────────────
.ddr-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  background: $warning-bg;
  border: 1px solid $warning-border;
  color: $warning;

  mat-icon {
    @include icon(20px);

    flex-shrink: 0;
  }

  &--none {
    background: $bg-soft;
    border-color: $border;
    color: $text-mid;
  }
}

// ── Sections ─────────────────────────────────────────────────────────────────
.ddr-section {
  background: $bg-white;
  border: 1px solid $border;
  border-radius: $radius;
  box-shadow: $shadow-sm;
  overflow: hidden;

  &__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid $border;
    background: linear-gradient(90deg, $bg-soft 0%, $bg-white 100%);
  }

  &__icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: $brand-light;
    color: $brand;

    mat-icon {
      @include icon(17px);
    }
  }

  &__title {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: $text-mid;
    margin-right: auto;
  }
}

.ddr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ddr-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid $border;
  min-width: 0;

  // Two columns: a hairline between them, and none under the last row.
  &:nth-child(odd) {
    border-right: 1px solid $border;
  }

  &:last-child,
  &:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }

  &__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: $text-soft;
  }

  &__value {
    font-size: 15px;
    font-weight: 600;
    color: $text-dark;
    overflow-wrap: anywhere;
  }

  &__flag {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: $warning-bg;
    color: $warning;
    border: 1px solid $warning-border;
  }

  &__diff {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    mat-icon {
      @include icon(16px);

      color: $warning;
    }
  }

  &__old {
    font-size: 14px;
    color: $text-soft;
    text-decoration: line-through;
  }

  &--changed {
    background: linear-gradient(90deg, rgb(253 230 138 / 22%) 0%, $bg-white 85%);
    box-shadow: inset 3px 0 0 #f59e0b;
  }
}

.ddr-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 3px 10px 3px 7px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: #f1f5f9;
  color: $text-mid;

  mat-icon {
    @include icon(16px);
  }

  &--yes {
    background: #dcfce7;
    color: #15803d;
  }
}

// ── Actions stay in reach however far the terms run ─────────────────────────
.ddr-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 4px -20px 0;
  padding: 14px 20px;
  background: rgb(255 255 255 / 94%);
  backdrop-filter: blur(6px);
  border-top: 1px solid $border;
  box-shadow: 0 -6px 16px rgb(15 23 42 / 6%);
}

// ── Narrow screens ───────────────────────────────────────────────────────────
/* stylelint-disable-next-line media-feature-range-notation -- Safari compatibility */
@media (max-width: 720px) {
  .ddr-hero {
    grid-template-columns: auto 1fr;

    &__meta {
      grid-column: 1 / -1;
      flex-flow: row wrap;
      gap: 14px;
      padding: 12px 0 0;
      border-left: 0;
      border-top: 1px solid rgb(255 255 255 / 18%);
    }
  }

  .ddr-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ddr-grid {
    grid-template-columns: 1fr;
  }

  .ddr-tile {
    &:nth-child(odd) {
      border-right: 0;
    }

    &:nth-last-child(2):nth-child(odd) {
      border-bottom: 1px solid $border;
    }
  }
}

// ── A DDS product's Accounting, as its own Accounting tab shows it ───────────────────────────────────
.ddr-acct {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 20px;

  &__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid $border;
    border-radius: 10px;
    background: $bg-white;

    &--changed {
      border-color: $warning-border;
      background: $warning-bg;
    }

    @media (width <= 720px) {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  &__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  &__kind {
    flex: none;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    &--liability {
      background: #dbeafe;
      color: #1e40af;
    }

    &--expense {
      background: #fef3c7;
      color: #92400e;
    }
  }

  &__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: $text-dark;
  }

  &__value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
  }

  &__gl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: $brand;

    &--old {
      font-weight: 500;
      color: $text-soft;
      text-decoration: line-through;
    }

    &--none {
      color: #b91c1c;
    }
  }

  &__code {
    padding: 1px 8px;
    border: 1px solid $border;
    border-radius: 6px;
    background: $bg-soft;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: $text-mid;
  }

  &__arrow {
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: $warning;
  }
}