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

/*
 * Shared list-page styling for the Letter-Mgmt certificate pages
 * (Loan Interest, Share Certificate, etc.). Mirrors the visual language of
 * the notice list (header + filters + table) so the module feels cohesive.
 */

:host {
  --cert-blue: #1d4ed8;
  --cert-blue-d: #1e40af;
  --cert-blue-l: #eff6ff;
  --cert-blue-tint: #dbeafe;
  --cert-teal: #0d9488;
  --cert-teal-l: #ccfbf1;
  --cert-green: #15803d;
  --cert-green-l: #dcfce7;
  --cert-amber: #d97706;
  --cert-amber-l: #fef3c7;
  --cert-red: #b91c1c;
  --cert-red-l: #fee2e2;
  --cert-red-tint: #fecaca;
  --cert-purple: #6d28d9;
  --cert-purple-l: #ede9fe;
  --cert-g50: #f8fafc;
  --cert-g100: #f1f5f9;
  --cert-g200: #e2e8f0;
  --cert-g300: #cbd5e1;
  --cert-g500: #64748b;
  --cert-g700: #334155;
  --cert-g900: #0f172a;

  display: block;
}

.cert-root {
  padding: 20px 24px 32px;
  max-width: 1340px;
  margin: 0 auto;
}

/* ───────── Header banner ───────── */
.cert-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cert-blue-l) 0%, #fff 65%);
  border: 1px solid var(--cert-blue-tint);
  margin-bottom: 16px;
}

.cert-head-l {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cert-head-ic {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--cert-blue-d);
  color: #fff;
  font-size: 20px;
}

.cert-head-t {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 800;
  color: var(--cert-g900);
}

.cert-head-s {
  font-size: 12.5px;
  color: var(--cert-g500);
  line-height: 1.5;
}

.cert-head-r {
  margin-left: auto;
  flex-shrink: 0;
}

.cert-cta-btn {
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--cert-blue-d);
  border-radius: 8px;
  background: var(--cert-blue-d);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;

  &:hover {
    background: var(--cert-blue);
    border-color: var(--cert-blue);
  }

  &--muted {
    background: #fff;
    color: var(--cert-g700);
    border-color: var(--cert-g200);

    &:hover {
      background: var(--cert-g50);
      border-color: var(--cert-g300);
    }
  }
}

/* ───────── KPI strip ───────── */
.cert-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;

  @media (width <= 900px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cert-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--cert-g200);

  &--blue {
    background: var(--cert-blue-l);
    border-color: var(--cert-blue-tint);
  }

  &--green {
    background: var(--cert-green-l);
    border-color: #bbf7d0;
  }

  &--teal {
    background: var(--cert-teal-l);
    border-color: #99f6e4;
  }

  &--amber {
    background: var(--cert-amber-l);
    border-color: #fde68a;
  }
}

.cert-kpi-ic {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgb(255 255 255 / 70%);
  font-size: 16px;

  .cert-kpi--blue & {
    color: var(--cert-blue);
  }

  .cert-kpi--green & {
    color: var(--cert-green);
  }

  .cert-kpi--teal & {
    color: var(--cert-teal);
  }

  .cert-kpi--amber & {
    color: var(--cert-amber);
  }
}

.cert-kpi-n {
  font-size: 17px;
  font-weight: 800;
  color: var(--cert-g900);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.cert-kpi-l {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cert-g500);
  margin-top: 2px;
}

/* ───────── Filters ───────── */
.cert-filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--cert-g200);
  border-radius: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cert-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
  min-width: 220px;
  position: relative;

  label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cert-g500);
  }

  input,
  select {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--cert-g200);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: var(--cert-g900);
    outline: none;
    transition: border-color 0.15s ease;
    appearance: none;

    &:focus {
      border-color: var(--cert-blue);
    }
  }

  select {
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 2 6 7 11 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    cursor: pointer;
  }
}

.cert-input-ic {
  position: relative;
  width: 100%;

  fa-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cert-g500);
    font-size: 12px;
    pointer-events: none;
    z-index: 1;
  }

  input {
    padding-left: 32px;
  }
}

.cert-clear {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--cert-g200);
  border-radius: 8px;
  background: #fff;
  color: var(--cert-g700);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  &:hover {
    background: var(--cert-red-l);
    color: var(--cert-red);
    border-color: var(--cert-red-tint);
  }
}

/* ───────── Table ───────── */
.cert-card {
  background: #fff;
  border: 1px solid var(--cert-g200);
  border-radius: 12px;
  overflow: hidden;
}

.cert-table-wrap {
  overflow-x: auto;
}

.cert-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;

  th {
    text-align: left;
    padding: 12px;
    background: var(--cert-g50);
    color: var(--cert-g500);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10.5px;
    border-bottom: 1px solid var(--cert-g200);
    white-space: nowrap;
  }

  td {
    padding: 12px;
    border-bottom: 1px solid var(--cert-g100);
    vertical-align: top;
    color: var(--cert-g900);
  }

  tr:last-child td {
    border-bottom: 0;
  }

  .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  .small {
    font-size: 11.5px;
  }

  .muted {
    color: var(--cert-g500);
  }

  .col-actions {
    width: 88px;
    text-align: right;
    white-space: nowrap;
  }
}

.cert-cust-name {
  font-weight: 700;
  color: var(--cert-g900);
}

.cert-interest {
  color: var(--cert-green);
  font-weight: 800;
}

/* Pills */
.cert-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--cert-g100);
  color: var(--cert-g700);
  white-space: nowrap;

  &--type {
    background: var(--cert-purple-l);
    color: var(--cert-purple);
  }

  &--green {
    background: var(--cert-green-l);
    color: var(--cert-green);
  }

  &--blue {
    background: var(--cert-blue-l);
    color: var(--cert-blue-d);
  }

  &--amber {
    background: var(--cert-amber-l);
    color: var(--cert-amber);
  }
}

.cert-rate-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--cert-blue-l);
  color: var(--cert-blue-d);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Row action icon buttons */
.cert-row-actions {
  display: inline-flex;
  gap: 4px;
}

.cert-icon-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cert-g200);
  background: #fff;
  color: var(--cert-g500);
  border-radius: 8px;
  cursor: pointer;
  font-size: 11.5px;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;

  &:hover:not(:disabled) {
    background: var(--cert-blue-l);
    color: var(--cert-blue-d);
    border-color: var(--cert-blue-tint);
  }

  &:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  &.primary {
    background: var(--cert-blue-d);
    color: #fff;
    border-color: var(--cert-blue-d);

    &:hover:not(:disabled) {
      background: var(--cert-blue);
      border-color: var(--cert-blue);
    }
  }
}

.cert-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--cert-g500);
  font-size: 13px;

  fa-icon {
    margin-right: 6px;
    color: var(--cert-blue);
  }
}

/* Share-certificate specific cells (used by share-certificate.component.html) */
.cert-shares {
  font-weight: 800;
  color: var(--cert-blue-d);
  font-variant-numeric: tabular-nums;
}

.cert-folio {
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--cert-g900);
}

/* Form 121 register — eligibility warnings and the quarter-wise drill-down */

/* A row the branch needs to look at: an ineligible declaration, or the quarter
   in which the 194A threshold was crossed. */
.cert-row--warn > td {
  background: color-mix(in srgb, var(--cert-amber) 7%, transparent);
}

.cert-row--detail > td {
  background: var(--cert-g50);
  padding: 16px;
}

.cert-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cert-blue) 6%, transparent);
  border-left: 3px solid var(--cert-blue);
  font-size: 12px;
  color: var(--cert-g900);
  line-height: 1.5;

  fa-icon {
    color: var(--cert-blue);
    flex-shrink: 0;
    margin-top: 1px;
  }

  ul {
    margin: 6px 0 0;
    padding-left: 18px;
  }

  li + li {
    margin-top: 4px;
  }

  &--warn {
    background: color-mix(in srgb, var(--cert-amber) 8%, transparent);
    border-left-color: var(--cert-amber);

    fa-icon {
      color: var(--cert-amber);
    }
  }
}

/* The quarter table nested inside an expanded row. */
.cert-table--inner {
  background: #fff;
  border: 1px solid var(--cert-g200);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;

  th {
    background: #fff;
    border-bottom: 1px solid var(--cert-g200);
  }

  .cert-pill {
    margin-left: 6px;
  }
}