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

:host {
  display: block;
  background: #f0f2f5;
  font-family: Inter, Roboto, sans-serif;
  font-size: 12px;
}

// ── Root wrapper ──────────────────────────────────────────────────────────────

.te-root {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 10px;
}

// ── Day-status blocking banners ───────────────────────────────────────────────

.te-day-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border-left: 4px solid;

  svg {
    flex-shrink: 0;
  }

  &--danger {
    background: #fef2f2;
    border-color: #dc2626;
    color: #991b1b;

    svg {
      stroke: #dc2626;
    }
  }

  &--warning {
    background: #fffbeb;
    border-color: #d97706;
    color: #92400e;

    svg {
      stroke: #d97706;
    }
  }
}

// ── Cashier compact account info strip ───────────────────────────────────────

.te-acs {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #dce4ef;
  border-radius: 8px;
  overflow: hidden;
  min-height: 44px;
}

.te-acs-id {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  flex-shrink: 0;
}

.te-acs-photo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #dce4ef;

  &--ph {
    background: #f0f4f9;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &--clickable {
    cursor: zoom-in;
    transition:
      border-color 0.15s,
      box-shadow 0.15s;

    &:hover {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgb(37 99 235 / 18%);
    }
  }
}

.te-acs-nameblock {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.te-acs-name {
  font-size: 12px;
  font-weight: 700;
  color: #0d1b2e;
  white-space: nowrap;
}

.te-acs-acno {
  font-size: 10px;
  font-family: 'Roboto Mono', monospace;
  color: #5a7089;
  letter-spacing: 0.4px;
}

.te-acs-sep {
  width: 1px;
  align-self: stretch;
  background: #dce4ef;
  flex-shrink: 0;
}

.te-acs-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  flex-shrink: 0;
}

.te-acs-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;

  &--blocked {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
  }

  &--dormant {
    background: #fffbeb;
    color: #d97706;
    border-color: #fde68a;
  }
}

.te-acs-kv {
  font-size: 11px;
  color: #4a607a;
  white-space: nowrap;

  b {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8aa0b8;
    margin-right: 2px;
  }
}

.te-acs-bals {
  display: flex;
  align-items: stretch;
  flex: 1;
}

.te-acs-b {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 5px 10px;
  border-right: 1px solid #f0f4f9;
  gap: 1px;

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

  &--main {
    background: #f8fbff;
  }

  &--after {
    background: #f0fdf6;
  }
}

.te-acs-b-l {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8aa0b8;
  white-space: nowrap;
}

.te-acs-b-v {
  font-size: 11.5px;
  font-weight: 700;
  color: #1a2a3e;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;

  &--cr {
    color: #059669;
  }
}

.te-acs-alerts {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  flex-shrink: 0;
}

.te-acs-alert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  padding: 3px 7px;

  &--danger {
    background: #fef2f2;
    color: #991b1b;

    svg {
      stroke: #dc2626;
    }
  }

  &--warning {
    background: #fffbeb;
    color: #92400e;

    svg {
      stroke: #d97706;
    }
  }

  &--info {
    background: #eff6ff;
    color: #1e40af;

    svg {
      stroke: #3b82f6;
    }
  }
}

// ── CBS Blue Transaction Entry ────────────────────────────────────────────────

$ws-ink: #0d1b2e; // nav bar dark navy
$ws-ink2: #162542; // slightly lighter navy (menu bar)
$ws-canvas: #f0f4f9; // page bg — light blue-grey
$ws-card: #fff;
$ws-border: #dce4ef;
$ws-accent: #e87722; // CBS orange — buttons only
$ws-focus: #2563eb; // CBS blue — field focus ring
$ws-text: #1a2a3e;
$ws-muted: #5a7089;
$ws-micro: #7a95b0;
$ws-dr: #c0392b;
$ws-cr: #1a7a4a;
$ws-divider: #dde6f0;
$ws-fld-bg: #f4f7fc;
$ws-fld-bd: #c8d8eb;

.ws-wrap {
  background: $ws-canvas;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgb(13 27 46 / 6%),
    0 4px 14px -8px rgb(13 27 46 / 14%);
  border: 1px solid $ws-border;
  font-family: 'Hanken Grotesk', Inter, sans-serif;
}

// ── Header ──────────────────────────────────────────────────────────────────
.ws-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 32px;
  background: linear-gradient(90deg, #0d1b2e 0%, #162542 100%);
  border-bottom: 2px solid $ws-accent;

  &__left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  &__right {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  &__icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: $ws-accent;
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
      stroke: #fff;
      width: 12px;
      height: 12px;
    }
  }

  &__title {
    font-family: Newsreader, Georgia, serif;
    font-size: 14px;
    font-weight: 500;
    color: #e8f0fb;
    letter-spacing: 0.01em;
  }

  &__effdt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #7a95b0;

    svg {
      stroke: #5a7589;
    }
  }

  &__date {
    height: 24px;
    padding: 0 8px;
    border: 1px solid #2a4060;
    border-radius: 5px;
    background: #0a1628;
    color: #e8f0fb;
    font-family: 'Hanken Grotesk', monospace;
    font-size: 11px;
    font-weight: 600;
    outline: none;

    &:focus {
      border-color: $ws-focus;
    }
  }
}

.ws-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 7px;
  border: none;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    filter 0.15s,
    transform 0.1s;

  &:active {
    transform: scale(0.97);
  }

  &--add {
    background: $ws-accent;
    color: #fff;
    box-shadow: 0 2px 8px rgb(180 83 9 / 30%);

    svg {
      stroke: #fff;
    }

    &:hover {
      filter: brightness(1.08);
    }
  }

  &--draft {
    background: $ws-divider;
    color: $ws-text;
    border: 1px solid $ws-border;

    &:hover {
      background: #ddd6c6;
    }
  }

  &--ghost {
    background: #fff;
    color: $ws-text;
    border: 1px solid $ws-border;
    font-size: 12px;

    &:hover {
      background: $ws-canvas;
      border-color: #a8bdd4;
    }
  }

  &--exit {
    color: $ws-dr;
    border-color: rgb(192 57 43 / 30%);

    &:hover {
      background: #fef2f0;
      border-color: $ws-dr;
    }
  }

  &--mode {
    background: $ws-ink;
    color: #c8daf0;
    border: 1px solid #2a4060;
    font-size: 12px;

    &:hover {
      background: $ws-ink2;
    }
  }

  &--action {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgb(79 70 229 / 30%);

    svg {
      stroke: #fff;
    }

    &:hover {
      filter: brightness(1.08);
    }
  }

  &--post {
    background: $ws-accent;
    color: #fff;
    font-weight: 700;
    padding: 6px 16px;
    box-shadow: 0 2px 8px rgb(232 119 34 / 30%);

    &:hover:not(:disabled) {
      filter: brightness(1.08);
    }

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

  &--reject {
    background: #fff;
    color: #dc2626;
    font-weight: 700;
    padding: 6px 16px;
    border: 1.5px solid #fca5a5;

    &:hover:not(:disabled) {
      background: #fef2f2;
      border-color: #dc2626;
    }

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

// ── Clerk edit: rejection banner ──────────────────────────────────────────────
.te-reject-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 12px 0;
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-left: 4px solid #dc2626;
  border-radius: 8px;
  color: #991b1b;

  svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #dc2626;
  }

  div {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  strong {
    font-size: 13px;
    font-weight: 700;
  }

  span {
    font-size: 12.5px;
  }

  small {
    font-size: 11.5px;
    color: #b45309;
    margin-top: 2px;
  }
}

// ── Manager review extras ─────────────────────────────────────────────────────
// Fieldset wrapper around the row form — disabled in review mode to make it read-only,
// while staying layout-neutral so the cards render exactly like the clerk view.
.ws-rows-fieldset {
  display: contents;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;

  &[disabled] {
    .ws-card {
      cursor: default;
    }

    // Keep values fully legible (browsers fade disabled controls by default)
    .ws-f__ctl,
    .ws-amt-input,
    input,
    select,
    textarea {
      opacity: 1;
      color: #1e293b;
      -webkit-text-fill-color: #1e293b;
      background: #f8fafc;
      cursor: default;
    }

    .ws-seg__btn {
      opacity: 1;
    }
  }
}

.ws-review-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-left: 10px;

  &[data-status='PENDING'] {
    background: #fef9c3;
    color: #a16207;
  }

  &[data-status='APPROVED'] {
    background: #dcfce7;
    color: #15803d;
  }

  &[data-status='REJECTED'] {
    background: #fee2e2;
    color: #b91c1c;
  }
}

.ws-reject-hint {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: #64748b;
}

.ws-reject-textarea {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;

  &:focus {
    outline: none;
    border-color: #dc2626;
  }
}

.te-btn--danger {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;

  &:hover:not(:disabled) {
    background: #b91c1c;
  }

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

// ── Row cards ────────────────────────────────────────────────────────────────
.ws-rows {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ws-card {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: $ws-card;
  border: 1px solid $ws-border;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  position: relative;

  &:hover {
    border-color: #a8bdd4;
    box-shadow: 0 2px 10px rgb(13 27 46 / 8%);
  }

  &--active {
    border-color: $ws-accent;
    box-shadow:
      0 0 0 3px rgb(232 119 34 / 14%),
      0 2px 10px rgb(13 27 46 / 10%);
  }

  &__badge {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: $ws-ink;
    color: #c8daf0;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
  }

  &__body {
    flex: 1;
    min-width: 0;
  }

  &__del {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #9ab0c8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition:
      opacity 0.15s,
      background 0.15s;

    &:hover {
      background: #fde8e8;
      color: $ws-dr;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.2 !important;
    }
  }

  &:hover &__del {
    opacity: 1;
  }
}

// ── Group captions ────────────────────────────────────────────────────────────
// ── Group row (Classification+Account / Payment+Narration) ───────────────────
.ws-group-row {
  display: flex;
  align-items: stretch;
  gap: 0;

  &--mt {
    margin-top: 6px;
  }
}

.ws-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;

  &--flex {
    flex: 1;
    min-width: 0;
  }

  &__fields {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
    height: 100%;
    align-content: flex-end;
  }
}

.ws-caption {
  font-family: Newsreader, Georgia, serif;
  font-style: italic;
  font-size: 11px;
  color: #7a95b0;
  padding-bottom: 1px;
}

.ws-vdivider {
  width: 1px;
  background: $ws-divider;
  margin: 12px 8px 0;
  flex-shrink: 0;
}

// ── Field ─────────────────────────────────────────────────────────────────────
.ws-f {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;

  &--type {
    width: 160px;
  }

  &--branch {
    width: 130px;
  }

  &--trtp {
    width: 66px;
  }

  &--actyp {
    width: 66px;
  }

  &--acno {
    flex: 1;
    min-width: 110px;
  }

  &--ecsno {
    flex: 1.6;
    min-width: 150px;
  }

  &--dbcr {
    width: 84px;
    flex-shrink: 0;
  }

  &--paytype {
    width: 160px;
  }

  &--amt {
    width: 120px;
  }

  &--cheqno {
    width: 165px;
  }

  &--cheqdt {
    width: 108px;
  }

  &--tok {
    width: 120px;
  }

  &--desc {
    flex: 1;
    min-width: 0;
  }

  &__lbl {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: $ws-micro;
    white-space: nowrap;

    &--accent {
      color: $ws-focus;
    }
  }

  &__ctl {
    height: 26px;
    padding: 0 7px;
    border: 1px solid $ws-fld-bd;
    border-radius: 6px;
    background: $ws-fld-bg;
    color: $ws-text;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 11.5px;
    outline: none;
    width: 100%;
    transition:
      border-color 0.15s,
      box-shadow 0.15s;
    box-sizing: border-box;

    &:hover {
      border-color: #9ab5d0;
    }

    &:focus {
      border-color: $ws-focus;
      box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
      background: #fff;
    }

    &--mono {
      font-family: 'Roboto Mono', monospace;
      font-size: 12px;
      letter-spacing: 0.03em;
    }

    &--accent {
      color: $ws-text;
      font-weight: 600;
    }

    &--req {
      border-color: #f97316;
      background: #fff7ed;
    }
  }
}

select.ws-f__ctl {
  cursor: pointer;
}

input.ws-f__ctl--readonly {
  background: #f1f5f9;
  color: #475569;
  cursor: default;
  user-select: none;
  letter-spacing: 0.04em;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

/* AC.TP shown as a locked label instead of the normal editable select, while the row is filled
   from a token-driven request whose real account type row.acTyp cannot show (see
   acTypLockedByToken in the component). */
span.ws-f__ctl--locked {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  color: #475569;
  cursor: not-allowed;
  user-select: none;
  font-size: 11px;
  font-weight: 600;
}

input.ws-amt-input--locked {
  background: #fef9c3;
  color: #713f12;
  cursor: not-allowed;
  font-weight: 700;
}

.ws-amt-wrap--locked {
  border-color: #fde047 !important;
  background: #fefce8;
}

.ws-amt-locked-badge {
  font-size: 10px;
  margin-left: 3px;
  vertical-align: middle;
  cursor: help;
}

// ── Amount field ──────────────────────────────────────────────────────────────
.ws-amt-wrap {
  display: flex;
  align-items: center;
  border: 1px solid $ws-fld-bd;
  border-radius: 7px;
  background: $ws-fld-bg;
  height: 30px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;

  &:focus-within {
    border-color: $ws-focus;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
    background: #fff;
  }

  &--cash {
    border-color: #86efac;
    background: #f0fdf4;

    .ws-amt-prefix {
      color: #15803d;
    }

    .ws-amt-input {
      color: #15803d;
      font-weight: 700;
    }
  }
}

.ws-amt-prefix {
  padding: 0 5px 0 8px;
  font-size: 12px;
  color: $ws-muted;
  font-weight: 600;
  flex-shrink: 0;
}

.ws-f__hint {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: $ws-muted;
  font-weight: 500;
}

.ws-amt-input {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  font-family: 'Hanken Grotesk', monospace;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  padding-right: 8px;
  color: $ws-text;
  outline: none;
  font-variant-numeric: tabular-nums;
}

// ── Segmented DR/CR toggle ───────────────────────────────────────────────────
.ws-seg {
  display: flex;
  height: 30px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid $ws-fld-bd;

  &__btn {
    flex: 1;
    border: none;
    background: $ws-fld-bg;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    color: $ws-muted;
    transition:
      background 0.15s,
      color 0.15s;

    &--dr:hover {
      background: #fce9e6;
      color: $ws-dr;
    }

    &--cr:hover {
      background: #e8f4e2;
      color: $ws-cr;
    }

    &--active-dr {
      background: #fce9e6 !important;
      color: $ws-dr !important;
    }

    &--active-cr {
      background: #e8f4e2 !important;
      color: $ws-cr !important;
    }
  }
}

// ── Footer totals ─────────────────────────────────────────────────────────────
.ws-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: linear-gradient(180deg, #f4f7fc, #edf2f9);
  border-top: 1px solid $ws-divider;

  &__stats {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.ws-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;

  &__label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: $ws-micro;
  }

  &__val {
    font-size: 13px;
    font-weight: 700;
    color: $ws-text;
    font-variant-numeric: tabular-nums;
    font-family: 'Hanken Grotesk', monospace;

    &--dr {
      color: $ws-dr;
    }

    &--cr {
      color: $ws-cr;
    }

    &--ok {
      color: $ws-cr;
    }
  }
}

.ws-balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;

  &--ok {
    background: #e8f4e2;
    color: $ws-cr;

    svg {
      stroke: $ws-cr;
    }
  }

  &--bad {
    background: #fce9e6;
    color: $ws-dr;

    svg {
      stroke: $ws-dr;
    }
  }
}

// ── Transaction Entry Grid (legacy — keep for bottom grid inside accountDetails) ──────────────────────

.te-grid-wrap {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 2px 12px rgb(0 0 0 / 8%),
    0 0 0 1px rgb(0 0 0 / 6%);
}

// Grid header title bar
.te-grid-wrap::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #1e40af, #0ea5e9, #1e40af);
  background-size: 200% 100%;
  animation: te-shimmer 3s linear infinite;
}

@keyframes te-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.te-grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 11.5px;

  th {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #7dd3fc;
    padding: 9px 6px;
    text-align: left;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-right: 1px solid #1e3a5f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

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

  td {
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    padding: 3px;
    background: #fff;
    vertical-align: middle;
    overflow: hidden;

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

  tr.te-row--selected td {
    background: linear-gradient(90deg, #eff6ff, #f0f9ff);
    border-bottom-color: #bae6fd;
  }

  tr:hover:not(.te-row--selected) td {
    background: #fafbff;
    cursor: pointer;
  }

  &--mini th {
    font-size: 9px;
    padding: 6px;
    background: linear-gradient(180deg, #334155, #1e293b);
    color: #94a3b8;
  }
}

.te-cell {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  font-family: 'Roboto Mono', monospace;
  font-size: 11.5px;
  padding: 5px 7px;
  color: #1e293b;
  outline: none;
  width: 100%;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;

  &:focus {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 12%);
  }

  // With table-layout:fixed, colgroup controls column width.
  // These size classes only apply to inputs INSIDE cells.
  &--xs {
    width: 100%;
  }

  &--sm {
    width: 100%;
  }

  &--md {
    width: 100%;
  }

  &--lg {
    width: 100%;
  }

  &--acno {
    width: 100%;
    letter-spacing: 0.03em;
  }
}

select.te-cell {
  cursor: pointer;
  appearance: auto;
}

.te-grid-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-top: 1px solid #e2e8f0;
}

.te-eff-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;

  &::before {
    content: '📅';
    font-size: 12px;
  }

  strong {
    font-family: 'Roboto Mono', monospace;
    font-weight: 800;
    background: #e0f2fe;
    padding: 2px 7px;
    border-radius: 5px;
    border: 1px solid #bae6fd;
    color: #0369a1;
  }
}

.te-add-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #fff;
  border: none;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  transition: background 0.15s;
  box-shadow: 0 2px 6px rgb(14 165 233 / 35%);

  &:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgb(14 165 233 / 50%);
    background: #0284c7;
  }
}

// ── Status messages ──────────────────────────────────────────────────────────

.te-loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgb(241 245 249 / 88%);
  backdrop-filter: blur(6px);
  z-index: 999;

  &__spinner {
    position: relative;
    width: 56px;
    height: 56px;

    svg {
      animation: te-spin 1s linear infinite;
    }
  }

  &__arc {
    transform-origin: 28px 28px;
  }

  &__pulse {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(37 99 235 / 12%), transparent 70%);
    animation: te-pulse 1.4s ease-in-out infinite;
  }

  &__title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
  }

  &__sub {
    font-size: 12.5px;
    color: #94a3b8;
    margin-top: -6px;
  }
}

@keyframes te-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes te-pulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.te-error {
  padding: 10px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
}

// ── Main Detail Panel ─────────────────────────────────────────────────────────

.te-detail {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.te-detail-top {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1.1fr;
  gap: 7px;

  @media (width <= 1100px) {
    grid-template-columns: 1fr 1fr;
  }

  @media (width <= 700px) {
    grid-template-columns: 1fr;
  }
}

// ── Panel Card ────────────────────────────────────────────────────────────────

.te-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgb(0 0 0 / 5%);

  &__header {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #e2e8f0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    &--mt {
      margin-top: 0;
      border-top: 1px solid #e2e8f0;
      background: linear-gradient(135deg, #334155, #475569);
    }
  }

  &__body {
    padding: 4px 8px;

    &--center {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
    }
  }
}

// ── Field rows ────────────────────────────────────────────────────────────────

.te-field {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 3px;
  font-size: 11px;
  border-bottom: 1px dotted #f1f5f9;
  padding-bottom: 3px;

  &:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
}

.te-field-row {
  display: flex;
  gap: 8px;

  .te-field {
    flex: 1;
  }
}

.te-label {
  min-width: 76px;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  padding-top: 1px;
}

.te-value {
  color: #1e293b;
  font-size: 11px;
  font-weight: 500;
  flex: 1;

  &-name {
    font-weight: 700;
    color: #0f172a;
    font-size: 12px;
  }

  &-wrap {
    white-space: normal;
    word-break: break-word;
  }
}

.te-mono {
  font-family: 'Roboto Mono', 'Courier New', monospace;
}

.te-dim {
  color: #94a3b8;
  font-size: 11px;
}

// ── Joint holders / Nominees ──────────────────────────────────────────────────

.te-joint-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 11px;
  border-radius: 6px;
  margin-bottom: 2px;

  &:last-of-type {
    border-bottom: none;
  }

  &--clickable {
    cursor: pointer;
    transition: background 0.12s;

    &:hover {
      background: #f1f5f9;
    }
  }

  &--expanded {
    background: #eff6ff;
    border-bottom-color: #bfdbfe;
  }
}

.te-expand-icon {
  font-size: 9px;
  color: #94a3b8;
  flex-shrink: 0;
}

// ── Holder expanded detail card ───────────────────────────────────────────────

.te-holder-detail {
  background: #f8fafc;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  animation: te-slide-down 0.15s ease;
}

@keyframes te-slide-down {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.te-holder-card {
  display: grid;
  grid-template-columns: 90px 150px 1fr;
  gap: 12px;
  align-items: flex-start;

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

.te-holder-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.te-holder-media-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.te-holder-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.te-joint-name {
  flex: 1;
  font-weight: 600;
  color: #1e293b;
}

.te-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  white-space: nowrap;

  &--primary {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
  }
}

.te-mandate-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  margin-left: 8px;
  text-transform: none;
  letter-spacing: 0;
}

.te-sign-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: #f1f5f9;
  color: #475569;

  &--mandatory {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
  }

  &--optional {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #86efac;
  }
}

// ── Balance rows ──────────────────────────────────────────────────────────────

.te-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px dotted #f1f5f9;
  font-size: 11px;

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

  &--total {
    border-top: 1px solid #e2e8f0;
    border-bottom: none;
    font-weight: 700;
    padding-top: 6px;
    margin-top: 4px;
  }
}

.te-bal-num {
  width: 18px;
  color: #94a3b8;
  font-size: 11px;
  flex-shrink: 0;
}

.te-bal-label {
  flex: 1;
  color: #475569;
  font-size: 11px;
}

.te-bal-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 100px;
  color: #1e293b;

  &--cr {
    color: #059669;
  }

  &--dr {
    color: #dc2626;
  }
}

// ── Net Balance Bar ───────────────────────────────────────────────────────────

.te-balance-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgb(0 0 0 / 5%);
}

.te-bal-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-right: 1px solid #e2e8f0;

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

  &__label {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #64748b;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    border: 1px solid #e2e8f0;
  }

  &__val {
    font-weight: 800;
    font-size: 12px;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;

    &--cr {
      color: #059669;
    }

    &--big {
      font-size: 14px;
    }
  }
}

// ── Required field highlight ──────────────────────────────────────────────────

.te-cell--required {
  border-color: #f97316 !important;
  background: #fff7ed !important;
}

// Cash payment: amount highlighted style
.te-cell--cash-auto {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #15803d !important;
  font-weight: 700 !important;
}

// Denomination stock overdraft badge (closing position header)
.te-denom-overdraft-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  margin-left: 8px;
  animation: te-pulse 1s ease-in-out infinite;
}

// ── Non-Individual Partners Table ─────────────────────────────────────────────
.te-nonperson-partners-header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin: 10px 0 6px;

  svg {
    stroke: #64748b;
  }
}

.te-nonperson-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-bottom: 4px;

  th {
    background: #f1f5f9;
    color: #475569;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 8px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;

    &.num {
      text-align: center;
    }
  }

  td {
    padding: 5px 8px;
    border-bottom: 1px dotted #f1f5f9;

    &.num {
      text-align: center;
    }
  }

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

  tr:hover td {
    background: #f8fafc;
  }
}

// Denomination overdraft inline alert block
.te-denom-overdraft-alert {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;

  &__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 8px;

    svg {
      stroke: #dc2626;
      flex-shrink: 0;
    }
  }

  &__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin-bottom: 6px;

    th {
      background: #fee2e2;
      color: #7f1d1d;
      font-weight: 700;
      padding: 3px 6px;
      text-align: left;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    td {
      padding: 3px 6px;
      border-bottom: 1px solid #fecaca;
      color: #1e293b;
    }

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

  &__hint {
    font-size: 10px;
    color: #991b1b;
    font-style: italic;
  }
}

// Denomination required badge
.te-denom-required-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
  margin-left: 8px;
  animation: te-pulse 1.5s ease-in-out infinite;
}

// Denomination matches DD target badge
.te-denom-match-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

@keyframes te-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

// ── Confirmation Dialog ───────────────────────────────────────────────────────

// ── Custom Alert Modal ────────────────────────────────────────────────────────
@keyframes te-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes te-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }

  70% {
    transform: scale(1.02) translateY(-2px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.te-alert-overlay {
  position: fixed;
  inset: 0;
  background: rgb(2 6 23 / 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(8px);
  animation: te-fade-in 0.18s ease;
}

.te-alert-box {
  display: flex;
  width: 400px;
  max-width: 94vw;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgb(0 0 0 / 32%),
    0 0 0 1px rgb(255 255 255 / 8%);
  animation: te-pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  // ── Left sidebar ─────────────────────────────────────────────────────────
  &__sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 56px;
    flex-shrink: 0;
    padding: 16px 0;
  }

  &__sidebar-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 20%);
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 15%),
      inset 0 1px 2px rgb(255 255 255 / 25%);

    svg {
      width: 17px;
      height: 17px;
      stroke: #fff;
    }
  }

  &__sidebar-type {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: rgb(255 255 255 / 70%);
    text-transform: uppercase;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
  }

  // ── Right content ─────────────────────────────────────────────────────────
  &__content {
    flex: 1;
    min-width: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  &__content-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 16px 8px;
    border-bottom: 1px solid #f1f5f9;

    h3 {
      margin: 0;
      font-size: 13.5px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.02em;
      line-height: 1.3;
    }
  }

  &__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: #94a3b8;
    border-radius: 4px;

    &:hover {
      background: #f1f5f9;
      color: #475569;
    }
  }

  &__lines {
    flex: 1;
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px 16px;
  }

  &__desc {
    margin: 0 0 8px;
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.5;
  }

  &__kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 10px;
    margin: 3px 0;
    background: #f8fafc;
    border-radius: 7px;
    border-left: 3px solid #e2e8f0;
    transition: background-color 0.15s;

    &:hover {
      background: #f1f5f9;
    }
  }

  &__kv-k {
    font-size: 11px;
    font-weight: 700;
    color: #334155;
  }

  &__kv-v {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  &__foot {
    margin: 8px 0 0;
    font-size: 10px;
    color: #94a3b8;
    font-style: italic;
    line-height: 1.4;
  }

  &__callout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 3px solid #d97706;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    line-height: 1.45;
    animation: te-pop-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

    svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      margin-top: 1px;
      color: #d97706;
    }
  }

  &__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid #f1f5f9;
    background: #fafafa;
  }

  // ── Error sidebar ─────────────────────────────────────────────────────────
  &--error &__sidebar {
    background: linear-gradient(160deg, #dc2626, #b91c1c);
  }

  &--error &__kv {
    border-left-color: #fca5a5;
    background: #fef2f2;
  }

  &--error &__kv-k {
    color: #991b1b;
  }

  // ── Warning sidebar ───────────────────────────────────────────────────────
  &--warning &__sidebar {
    background: linear-gradient(160deg, #d97706, #b45309);
  }

  &--warning &__kv {
    border-left-color: #fcd34d;
    background: #fffbeb;
  }

  &--warning &__kv-k {
    color: #92400e;
  }

  // ── Info sidebar ──────────────────────────────────────────────────────────
  &--info &__sidebar {
    background: linear-gradient(160deg, #2563eb, #1d4ed8);
  }

  &--info &__kv {
    border-left-color: #93c5fd;
    background: #eff6ff;
  }

  &--info &__kv-k {
    color: #1e40af;
  }

  // ── Success sidebar ───────────────────────────────────────────────────────
  &--success &__sidebar {
    background: linear-gradient(160deg, #059669, #047857);
  }

  &--success &__kv {
    border-left-color: #6ee7b7;
    background: #f0fdf4;
  }

  &--success &__kv-k {
    color: #065f46;
    font-weight: 800;
  }
}

// ── Alert buttons ─────────────────────────────────────────────────────────────
.te-alert-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  min-width: 76px;
  border-radius: 7px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    filter 0.15s,
    transform 0.1s;

  &:active {
    transform: scale(0.96);
  }

  &--ghost {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;

    &:hover {
      background: #e2e8f0;
    }
  }

  &--solid {
    color: #fff;

    &:hover {
      filter: brightness(1.1);
    }

    &.te-alert-btn--error {
      background: #dc2626;
    }

    &.te-alert-btn--success {
      background: #059669;
    }

    &.te-alert-btn--warning {
      background: #d97706;
    }

    &.te-alert-btn--info {
      background: #2563eb;
    }
  }
}

.te-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.te-confirm-box {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  width: 400px;
  max-width: 95vw;
  box-shadow: 0 20px 60px rgb(0 0 0 / 25%);
  animation: te-slide-down 0.2s ease;
}

.te-confirm-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  &--deposit {
    background: linear-gradient(135deg, #059669, #047857);
  }

  &--withdrawal {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
  }

  &--disbursement {
    background: linear-gradient(135deg, #0284c7, #0369a1);
  }

  &--action {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
  }
}

.te-confirm-icon {
  font-size: 20px;
}

// ── Account Actions popup ─────────────────────────────────────────────────────
.te-aa-box {
  width: 460px;
}

.te-aa-account {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 4px;

  &__no {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #1e40af;
    letter-spacing: 0.03em;
  }

  &__name {
    font-size: 13px;
    font-weight: 600;
    color: #0d1b2a;
  }
}

.te-aa-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1.5px solid #fecaca;
  background: #fef2f2;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s;

  &:hover {
    border-color: #f87171;
  }

  input {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: #dc2626;
    cursor: pointer;
    flex-shrink: 0;
  }

  span {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  strong {
    font-size: 13px;
    font-weight: 700;
    color: #991b1b;
  }

  small {
    font-size: 11.5px;
    color: #b91c1c;
    line-height: 1.4;
  }
}

.te-aa-calc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  font-size: 13px;

  &--loading,
  &--error {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    padding: 14px 12px;
  }

  &--loading {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #64748b;
  }

  &--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
  }

  &__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #166534;

    &--total {
      margin-top: 4px;
      padding-top: 8px;
      border-top: 1.5px dashed #bbf7d0;
      font-weight: 800;
      font-size: 15px;
      color: #15803d;
    }
  }

  &__note {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.45;
    color: #4d7c56;
  }

  &__warn {
    margin-top: 4px;
    padding: 7px 9px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    color: #92400e;
  }
}

.te-aa-next {
  margin-top: 4px;
  padding: 9px 11px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.5;
  color: #3730a3;

  strong {
    font-weight: 700;
  }
}

.te-confirm-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.te-confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px dotted #f1f5f9;

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

  &--amount .te-confirm-val {
    font-size: 16px;
    font-weight: 700;
  }

  &--after .te-confirm-val {
    font-size: 17px;
  }
}

.te-confirm-label {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.te-confirm-val {
  color: #1e293b;
  font-weight: 500;
}

.te-confirm-divider {
  border-top: 2px solid #e2e8f0;
  margin: 6px 0;
}

.te-confirm-disbursed-note {
  justify-content: center;
  border-bottom: none;
  margin-top: 4px;
}

.te-confirm-disbursed-badge {
  display: inline-block;
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  width: 100%;
}

.te-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

// ── Alerts ────────────────────────────────────────────────────────────────────

.te-alerts-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.te-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;

  svg {
    flex-shrink: 0;
  }

  &--danger {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
  }

  &--warning {
    background: #fffbeb;
    color: #d97706;
    border-color: #fde68a;
  }

  &--info {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
  }
}

// ── Extended rows ─────────────────────────────────────────────────────────────

.te-ext-row {
  display: grid;
  grid-template-columns: 140px 200px 1fr 1fr;
  gap: 10px;

  &--2 {
    grid-template-columns: 1fr 1fr;
  }

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

  @media (width <= 700px) {
    grid-template-columns: 1fr;
  }
}

.te-photo-img {
  max-width: 100px;
  max-height: 120px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  object-fit: cover;
}

.te-photo-img--clickable {
  cursor: zoom-in;
  transition:
    transform 0.15s,
    box-shadow 0.15s;

  &:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
  }
}

.te-sig-img {
  max-width: 160px;
  max-height: 70px;
  object-fit: contain;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
}

.te-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}

.te-facilities-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.te-facility {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;

  &--on {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
  }

  &--off {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
    text-decoration: line-through;
  }
}

.te-tds-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  margin-top: 6px;

  &--warn {
    background: #fffbeb;
    color: #d97706;
    border-color: #fde68a;
  }
}

// ── Compliance cards (NEFT/RTGS + Cheque Clearing) ───────────────────────────

.te-compliance-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.te-compliance-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;

  svg {
    color: #64748b;
    flex-shrink: 0;
  }

  &--alert {
    background: #fff7ed;
    border-color: #fed7aa;

    svg {
      color: #ea580c;
    }
  }
}

.te-compliance-label {
  display: block;
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.te-compliance-val {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}

// Today panel — fixed height, transactions scroll, total sticky at bottom
.te-panel__body--today {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  max-height: 110px;
}

.te-today-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 4px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
  }
}

.te-today-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dotted #f1f5f9;
  font-size: 12px;

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

.te-today-type {
  color: #475569;
  font-size: 11px;
}

.te-today-amt {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.te-today-total {
  display: flex;
  justify-content: space-between;
  padding: 7px 14px;
  border-top: 2px solid #e2e8f0;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.te-linked-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 8px 0 4px;

  &:first-child {
    margin-top: 0;
  }
}

.te-linked-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px dotted #f1f5f9;
  font-size: 11px;

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

.te-si-row {
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;

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

.te-si-name {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 2px;
}

.te-si-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

// ── Withdrawal rule alert ─────────────────────────────────────────────────────

.te-withdrawal-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;

  &--danger {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
  }

  &--warning {
    background: #fffbeb;
    color: #d97706;
    border-color: #fde68a;
  }
}

.te-wr-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.te-wr-msg {
  flex: 1;
  line-height: 1.4;
}

// ── Denomination Section ──────────────────────────────────────────────────────

.te-denom-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;

  @media (width <= 1100px) {
    grid-template-columns: 1fr 1fr;
  }

  @media (width <= 700px) {
    grid-template-columns: 1fr;
  }
}

.te-denom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;

  th {
    background: #f1f5f9;
    color: #64748b;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;

    &.num {
      text-align: right;
    }
  }

  td {
    padding: 2px 8px;
    border-bottom: 1px solid #f8fafc;
    color: #1e293b;
    font-size: 11px;

    &.num {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
  }

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

  tr:hover td {
    background: #f8fafc;
  }

  tfoot td {
    background: #f1f5f9;
    border-top: 2px solid #e2e8f0;
    font-size: 11px;
    padding: 4px 8px;
  }
}

// ── Section header row inside denomination table ──────────────────────────────

.te-denom-section-row td {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-top: 1px solid #e2e8f0;

  &.te-denom-section-row__label {
    color: #1d4ed8;
    background: #eff6ff;
  }
}

.te-denom-section-row--coin td.te-denom-section-row__label {
  color: #92400e;
  background: #fffbeb;
}

.te-denom-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1d4ed8;
  background: #eff6ff;
  border-bottom: 1px solid #dbeafe;
  border-top: 1px solid #e2e8f0;
  padding: 4px 10px;

  &--coin {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
  }
}

.te-denom-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 20px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(135deg, #ecfeff, #cffafe);
  color: #155e75;
  border: 1px solid #a5f3fc;

  &--coin {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    font-size: 10px;
    background: linear-gradient(135deg, #fef9c3, #fde68a);
    color: #854d0e;
    border-color: #fcd34d;
  }
}

.te-denom-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;

  button {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    padding: 0;
    line-height: 1;

    &:hover:not(:disabled) {
      background: #0ea5e9;
      border-color: #0ea5e9;
      color: #fff;
    }

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

  input {
    width: 50px;
    height: 24px;
    border: 1.5px solid #e2e8f0;
    border-radius: 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
    background: #fff;
    outline: none;
    appearance: textfield;
    transition:
      border-color 0.15s,
      box-shadow 0.15s;

    &:focus {
      border-color: #0ea5e9;
      box-shadow: 0 0 0 2px rgb(14 165 233 / 15%);
    }

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      appearance: none;
    }

    &::placeholder {
      color: #cbd5e1;
    }
  }
}

.te-denom-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e2e8f0;
}

.te-cr {
  color: #059669 !important;
}

.te-dr {
  color: #dc2626 !important;
}

.te-closing-row--neg td {
  background: #fef2f2;
}

// ── Basic Info horizontal layout ─────────────────────────────────────────────

.te-basic-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  .te-balance-row {
    flex-direction: column;
    align-items: flex-start;
    border-right: 1px solid #f1f5f9;
    border-bottom: none;
    padding: 6px 12px;

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

    &--total {
      border-top: none;
      padding-top: 6px;
      margin-top: 0;
    }

    .te-bal-label {
      font-size: 10px;
      color: #94a3b8;
      margin-bottom: 2px;
    }

    .te-bal-value {
      font-size: 13px;
      min-width: unset;
    }
  }

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

// ── Action Buttons ────────────────────────────────────────────────────────────

.te-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  box-shadow: 0 1px 4px rgb(0 0 0 / 5%);
}

.te-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #475569;
  transition: all 0.15s;

  &:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
  }

  &:active {
    transform: scale(0.98);
  }

  &--primary {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgb(14 165 233 / 30%);

    &:hover {
      background: linear-gradient(135deg, #0284c7, #0369a1);
    }
  }

  &--exit {
    background: #fff;
    color: #ef4444;
    border-color: #fecaca;

    &:hover {
      background: #fef2f2;
    }
  }

  &--mode {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgb(139 92 246 / 30%);
    min-width: 130px;

    &:hover {
      background: linear-gradient(135deg, #7c3aed, #6d28d9);
    }
  }
}

// ── Approved Withdrawal Banner ────────────────────────────────────────────────
.ws-withdrawal-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 10px 16px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
  border: 1.5px solid #6ee7b7;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgb(16 185 129 / 12%);

  /* A closure is destructive, so it must not read like the ordinary green "all good" banner. */
  &--closure {
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    border-color: #a5b4fc;
    box-shadow: 0 1px 4px rgb(79 70 229 / 14%);

    .ws-withdrawal-banner__icon {
      color: #4f46e5;
    }

    .ws-withdrawal-banner__title {
      color: #3730a3;
    }
  }

  &--loading {
    background: #f8fafc;
    border-color: #cbd5e1;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 13px;
  }

  &__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: ws-spin 0.7s linear infinite;
    flex-shrink: 0;
  }

  &__icon {
    color: #10b981;
    font-size: 22px;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 2px;
  }

  &__content {
    flex: 1;
    min-width: 0;
  }

  &__title {
    font-size: 13px;
    font-weight: 700;
    color: #065f46;
    margin-bottom: 4px;
  }

  &__details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 12px;
    color: #374151;
  }

  &__note {
    margin-top: 6px;
    font-size: 11px;
    color: #6b7280;
  }

  &__clear {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 2px;
    line-height: 1;
    display: flex;
    align-items: center;
    border-radius: 4px;
    flex-shrink: 0;

    &:hover {
      color: #6b7280;
      background: #f1f5f9;
    }

    mat-icon {
      font-size: 18px;
      width: 18px;
      height: 18px;
    }
  }
}

.ws-wb-sep {
  color: #9ca3af;
}

@keyframes ws-spin {
  to {
    transform: rotate(360deg);
  }
}

.ws-dd-unconfigured-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 16px;
  padding: 12px 16px;
  background: #fffbeb;
  border: 1.5px solid #fcd34d;
  border-radius: 8px;
  color: #92400e;
  font-size: 13px;

  mat-icon {
    color: #d97706;
    font-size: 24px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  &__text {
    flex: 1;
    line-height: 1.4;

    strong {
      color: #78350f;
    }
  }
}

.te-dd-issue-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 4px rgb(2 132 199 / 35%);
  transition: all 0.15s ease-in-out;
  letter-spacing: 0.2px;

  &:hover:not(:disabled) {
    background: linear-gradient(135deg, #0369a1, #0284c7);
    box-shadow: 0 3px 8px rgb(2 132 199 / 50%);
    transform: translateY(-1px);
  }

  &:active:not(:disabled) {
    transform: translateY(0);
  }

  &:disabled {
    background: #cbd5e1;
    color: #64748b;
    cursor: not-allowed;
    box-shadow: none;
  }
}