niteshandClaude Opus 5
b71619c402
Transaction Entry (clerk): - Route a two-row Fund Transfer of Dr SHR / Cr GL to the share-withdrawal request with settlementMode GL, so a clerk can settle a share withdrawal into any GL account instead of the member's linked savings account. - Offer GL as an account type for Demand Draft funding, and submit it as a GL debit (no client or savings/current account is involved). My Work: - Add a voucher detail dialog so a clerk can open a raised voucher from the request list and see its GL lines. Closing Cash Report: - Fix the total row so it reflects the corrected opening balance. DD Leaflet Registry and DD Inventory: - Redesign both pages onto the shared usr-* visual language: gradient header badge, status filter chips with counts, card-wrapped sticky-header table, and one primary action per row with the rest behind an overflow menu. Filtering, pagination and every action condition are unchanged. - Register faHandPaper, needed by the new Stop Payment menu item. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
3465 lines
63 KiB
SCSS
3465 lines
63 KiB
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/.
|
|
*/
|
|
|
|
: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;
|
|
}
|
|
}
|