nitesh
2d93f80d50
- Guarantor must be a real existing client with a verified active share account, with clickable share-account chips - Loan Committee Approval now requires Resolution No./Date plus a full application report before approving - Loan Committee gets its own pre-filtered pipeline view via a menu link and stage query param - Legal Approval stage gets a multi-file document upload checklist with add-more support - CIC PDF parser: item-level score detection before line-based fallback, fixing font-size-driven line-merging misdetection - New Interest & Share Rate Chart tab: per-product interest/tenure bands and per-amount-slab Share Capital linkage requirements
981 lines
19 KiB
SCSS
981 lines
19 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/.
|
|
*/
|
|
|
|
// Loan Origination-specific styling layered on top of ../cashier/cashier-shared.scss (pg-*,
|
|
// cctr-*) and ../npa/npa-shared.scss (npa-timeline-* — reused as-is for the application's stage
|
|
// history/audit trail, since it's the same generic "date-led event log" primitive already built
|
|
// for the NPA Recovery Journey popup, not NPA-specific).
|
|
|
|
// EMI Repayment Schedule can run to 240 rows (a 20-year Housing Loan) — scrolls within a fixed
|
|
// height with the header pinned, rather than pushing the rest of the page far down.
|
|
.loan-emi-table-scroll {
|
|
max-height: 420px;
|
|
overflow-y: auto;
|
|
|
|
thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
.loan-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 3px 10px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
white-space: nowrap;
|
|
|
|
&--progress {
|
|
background: #eff6ff;
|
|
color: #1d4ed8;
|
|
border: 1px solid #bfdbfe;
|
|
}
|
|
|
|
&--hold {
|
|
background: #fffbeb;
|
|
color: #b45309;
|
|
border: 1px solid #fde68a;
|
|
}
|
|
|
|
&--rejected {
|
|
background: #fef2f2;
|
|
color: #dc2626;
|
|
border: 1px solid #fecaca;
|
|
}
|
|
|
|
&--disbursed {
|
|
background: #f0fdf4;
|
|
color: #15803d;
|
|
border: 1px solid #bbf7d0;
|
|
}
|
|
|
|
&--verified {
|
|
background: #f0fdf4;
|
|
color: #15803d;
|
|
border: 1px solid #bbf7d0;
|
|
}
|
|
|
|
&--missing {
|
|
background: #fffbeb;
|
|
color: #b45309;
|
|
border: 1px solid #fde68a;
|
|
}
|
|
}
|
|
|
|
.pg-btn--success {
|
|
background: linear-gradient(135deg, #22c55e, #15803d);
|
|
color: #fff;
|
|
|
|
&:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.pg-btn--danger {
|
|
background: #fff;
|
|
border-color: #fecaca;
|
|
color: #dc2626;
|
|
|
|
&:hover {
|
|
background: #fef2f2;
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.pg-btn--warn {
|
|
background: #fff;
|
|
border-color: #fde68a;
|
|
color: #b45309;
|
|
|
|
&:hover {
|
|
background: #fffbeb;
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Stage stepper — the 12-stage sanctioning pipeline, drawn as a connected row of
|
|
// dots so an application's progress reads at a glance.
|
|
// ---------------------------------------------------------------------------
|
|
.loan-stepper {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
overflow-x: auto;
|
|
padding: 22px 18px 16px;
|
|
}
|
|
|
|
.loan-step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
min-width: 90px;
|
|
position: relative;
|
|
|
|
&__connector {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: -50%;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: #e2e8f0;
|
|
z-index: 0;
|
|
}
|
|
|
|
&:first-child &__connector {
|
|
display: none;
|
|
}
|
|
|
|
&__dot {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 999px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
background: #f1f5f9;
|
|
color: #94a3b8;
|
|
border: 2px solid #e2e8f0;
|
|
}
|
|
|
|
&__label {
|
|
margin-top: 8px;
|
|
font-size: 10.5px;
|
|
text-align: center;
|
|
color: #64748b;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
max-width: 92px;
|
|
}
|
|
|
|
&--done {
|
|
.loan-step__dot {
|
|
background: #15803d;
|
|
border-color: #15803d;
|
|
color: #fff;
|
|
}
|
|
|
|
.loan-step__connector {
|
|
background: #86efac;
|
|
}
|
|
|
|
.loan-step__label {
|
|
color: #15803d;
|
|
}
|
|
}
|
|
|
|
&--current {
|
|
.loan-step__dot {
|
|
background: #4338ca;
|
|
border-color: #4338ca;
|
|
color: #fff;
|
|
box-shadow: 0 0 0 4px rgb(67 56 202 / 15%);
|
|
}
|
|
|
|
.loan-step__label {
|
|
color: #4338ca;
|
|
font-weight: 800;
|
|
}
|
|
}
|
|
|
|
&--rejected {
|
|
.loan-step__dot {
|
|
background: #dc2626;
|
|
border-color: #dc2626;
|
|
color: #fff;
|
|
}
|
|
|
|
.loan-step__label {
|
|
color: #dc2626;
|
|
}
|
|
}
|
|
|
|
&--hold {
|
|
.loan-step__dot {
|
|
background: #d97706;
|
|
border-color: #d97706;
|
|
color: #fff;
|
|
}
|
|
|
|
.loan-step__label {
|
|
color: #d97706;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Action card — the current stage's checklist/inputs and Approve/Reject buttons.
|
|
// ---------------------------------------------------------------------------
|
|
.loan-action-card {
|
|
background: #f8fafc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
padding: 16px 18px;
|
|
margin: 0 16px 16px;
|
|
}
|
|
|
|
.loan-checklist {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.loan-checklist-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 13px;
|
|
color: #1e293b;
|
|
|
|
// stylelint-disable-next-line selector-no-qualifying-type
|
|
input[type='checkbox'] {
|
|
width: 16px;
|
|
height: 16px;
|
|
accent-color: #4338ca;
|
|
}
|
|
}
|
|
|
|
.loan-action-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.loan-kv-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 12px 20px;
|
|
padding: 18px;
|
|
|
|
&--tight-bottom {
|
|
padding: 0 0 10px;
|
|
}
|
|
|
|
&--tight-top {
|
|
padding: 10px 0 0;
|
|
}
|
|
}
|
|
|
|
.loan-kv-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
|
|
dt {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: #64748b;
|
|
}
|
|
|
|
dd {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #0d1b2a;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
}
|
|
|
|
.loan-approval-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: 12px;
|
|
padding: 4px 18px 18px;
|
|
}
|
|
|
|
.loan-approval-tile {
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 10px;
|
|
padding: 12px 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
|
|
&__role {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: #64748b;
|
|
}
|
|
|
|
&__decision {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
&--approved .loan-approval-tile__decision {
|
|
color: #15803d;
|
|
}
|
|
|
|
&--rejected .loan-approval-tile__decision {
|
|
color: #dc2626;
|
|
}
|
|
|
|
&--pending .loan-approval-tile__decision {
|
|
color: #94a3b8;
|
|
}
|
|
}
|
|
|
|
// New Application intake — existing-customer search (real Fineract client lookup, dropped into
|
|
// this otherwise fully mock/dummy-data pipeline screen).
|
|
.loi-selected-client {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 6px;
|
|
background: #f8fafc;
|
|
font-weight: 600;
|
|
font-size: 13.5px;
|
|
}
|
|
|
|
.loi-search-hint {
|
|
color: #94a3b8;
|
|
font-size: 12.5px;
|
|
margin: -8px 0 12px;
|
|
}
|
|
|
|
.loi-search-results {
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
max-width: 480px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.loi-search-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
background: #fff;
|
|
border: none;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&:hover {
|
|
background: #f8fafc;
|
|
}
|
|
}
|
|
|
|
.loi-search-name {
|
|
font-weight: 600;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.loi-search-meta {
|
|
color: #94a3b8;
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
// Application Detail — real share-account chips (clickable, opens the details popup)
|
|
.loi-share-account-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.loi-share-account-chip {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 999px;
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
border: none;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: #bbf7d0;
|
|
}
|
|
}
|
|
|
|
// Application Detail — KYC & Documents: real verified-status cards (existing client) and the
|
|
// local-only capture UI (no linked real client) both lay out as a compact card grid instead of
|
|
// one long stacked column, so a 6-7 item checklist reads as a glanceable board, not a scroll.
|
|
.loi-kyc-doc-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.loi-kyc-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 10px 12px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
|
|
// Cards holding nothing but a single checkbox item (e-KYC fingerprint, secured-loan property
|
|
// proofs) would otherwise look like empty boxes next to the document cards -- centering the
|
|
// one line vertically makes the shorter card read as intentional, not unfinished.
|
|
&--checkbox {
|
|
justify-content: center;
|
|
min-height: 46px;
|
|
}
|
|
|
|
// Compact everything inside a card -- the section-wide .pg-btn/.inv-form-field sizes are tuned
|
|
// for full-width action rows elsewhere on this page, and read oversized packed into a card.
|
|
.pg-btn {
|
|
padding: 4px 10px;
|
|
font-size: 12px;
|
|
min-height: 30px;
|
|
}
|
|
|
|
.inv-form-field {
|
|
gap: 2px;
|
|
|
|
span {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
select {
|
|
height: 30px;
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
// stylelint-disable-next-line selector-no-qualifying-type
|
|
input[type='date'] {
|
|
height: 30px;
|
|
font-size: 12.5px;
|
|
}
|
|
}
|
|
|
|
.loi-kyc-card-title {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: #64748b;
|
|
}
|
|
|
|
.loi-kyc-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.loi-kyc-masked {
|
|
font-variant-numeric: tabular-nums;
|
|
font-family: 'Courier New', monospace;
|
|
color: #475569;
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.loi-kyc-card-files {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
// Thumbnail(s) of whatever was just uploaded -- clicking one opens the full file in
|
|
// DocumentPreviewDialogComponent, straight from the in-memory File (nothing is uploaded
|
|
// anywhere yet in this local-only capture UI).
|
|
.loi-kyc-thumbs {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.loi-kyc-thumb {
|
|
width: 56px;
|
|
height: 56px;
|
|
padding: 0;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 6px;
|
|
background: #f8fafc;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
|
|
&:hover {
|
|
border-color: #94a3b8;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.loi-kyc-thumb-label {
|
|
font-size: 9.5px;
|
|
font-weight: 600;
|
|
color: #64748b;
|
|
text-align: center;
|
|
padding: 2px;
|
|
}
|
|
|
|
.loi-kyc-card-verify {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
|
|
// stylelint-disable-next-line selector-no-qualifying-type
|
|
input[type='text'] {
|
|
height: 30px;
|
|
padding: 0 8px;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 6px;
|
|
font-size: 12.5px;
|
|
width: 120px;
|
|
}
|
|
}
|
|
|
|
.loi-kyc-note {
|
|
color: #94a3b8;
|
|
font-size: 12px;
|
|
margin: -2px 0 10px;
|
|
}
|
|
|
|
// CIC / Credit Bureau Check stage -- the Consent and Charge steps each get their own bordered
|
|
// sub-card (instead of loose elements sharing the page-level .loan-action-card) so the two
|
|
// distinct steps read as separate units rather than one long unbroken list.
|
|
.loi-cic-subsection {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 14px 16px;
|
|
margin: 0 0 14px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.loi-cic-subsection-title {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: #1e40af;
|
|
}
|
|
|
|
.loi-kyc-error {
|
|
color: #dc2626;
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
margin: -2px 0 0;
|
|
}
|
|
|
|
// Field Investigation -- one card per address (Home/Office/Property/Shop) instead of stacked
|
|
// full-width sections, since each visit's officer/SLA/GPS/photo capture is a self-contained unit.
|
|
.loi-fi-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
|
gap: 14px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.loi-fi-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 14px 16px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
}
|
|
|
|
.loi-fi-card-title {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: #1e40af;
|
|
}
|
|
|
|
.loi-fi-view-details {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
align-self: flex-start;
|
|
gap: 6px;
|
|
height: 30px;
|
|
padding: 0 12px;
|
|
border: 1px solid #c7d2fe;
|
|
border-radius: 999px;
|
|
background: #eef2ff;
|
|
color: #4338ca;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: #e0e7ff;
|
|
}
|
|
}
|
|
|
|
.loi-otp-digits {
|
|
display: flex;
|
|
gap: 5px;
|
|
|
|
// stylelint-disable-next-line selector-no-qualifying-type
|
|
input[type='text'] {
|
|
width: 28px;
|
|
height: 30px;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
// KYC & Documents' Monthly Income card -- full basis for the EMI figure, not just the number.
|
|
.loi-emi-breakdown {
|
|
margin-top: 4px;
|
|
padding: 12px 14px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 10px;
|
|
background: #f8fafc;
|
|
|
|
.loan-kv-grid {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.loi-emi-breakdown-title {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: #64748b;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.loi-emi-formula {
|
|
margin: 10px 0 0;
|
|
}
|
|
|
|
// CIC check charge -- picking one of the client's real accounts to debit reuses the .loi-kyc-card
|
|
// grid/card look, just made clickable as a whole (a plain button, not a form control) with a
|
|
// clear selected state.
|
|
.loi-charge-account {
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
|
|
&--selected {
|
|
border-color: #15803d;
|
|
background: #f0fdf4;
|
|
}
|
|
}
|
|
|
|
// A completed stepper step is a real <button> (see canJumpToStage) so the officer can jump
|
|
// straight back to it -- reset the browser's own button chrome and only add a hover affordance,
|
|
// the done/current/rejected/hold color treatment is already handled by the shared .loan-step
|
|
// rules above regardless of the element being a <div> or a <button>.
|
|
.loan-step--clickable {
|
|
border: none;
|
|
background: transparent;
|
|
padding: 0;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
.loan-step__dot {
|
|
box-shadow: 0 0 0 3px rgb(21 128 61 / 20%);
|
|
}
|
|
|
|
.loan-step__label {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Re-opens the bank statement analysis dialog for a CSV already on file -- the analysis only
|
|
// pops up once automatically (right after upload), so this is the only way back into it once an
|
|
// officer has closed it and wants to double-check something.
|
|
.loi-bsa-reopen {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: 34px;
|
|
padding: 0 14px;
|
|
border: 1px solid #c7d2fe;
|
|
border-radius: 999px;
|
|
background: #eef2ff;
|
|
color: #4338ca;
|
|
font-size: 12.5px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: #e0e7ff;
|
|
border-color: #a5b4fc;
|
|
}
|
|
}
|
|
|
|
// Loan-specific documents (Housing/KCC/Vehicle/... papers) -- an officer-added custom document
|
|
// gets a small remove control right next to its title; the product's own required list never
|
|
// shows one, since removeCustomProductDoc() is a no-op for a non-custom entry anyway.
|
|
.loi-doc-remove {
|
|
margin-left: 6px;
|
|
border: none;
|
|
background: none;
|
|
color: #94a3b8;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
padding: 0 2px;
|
|
|
|
&:hover {
|
|
color: #dc2626;
|
|
}
|
|
}
|
|
|
|
.loi-custom-doc-input {
|
|
height: 36px;
|
|
padding: 0 12px;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
min-width: 260px;
|
|
flex: 1;
|
|
}
|
|
|
|
// Legal Approval documents -- its own card style (icon + status accent stripe) rather than the
|
|
// plain .loi-kyc-card, since Legal Approval is a page most officers look at repeatedly right
|
|
// before disbursement and benefits from a clearer, less generic-looking checklist.
|
|
.loi-legal-doc-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.loi-legal-doc-progress {
|
|
font-size: 11.5px;
|
|
font-weight: 700;
|
|
color: #64748b;
|
|
background: #f1f5f9;
|
|
padding: 3px 10px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.loi-legal-doc-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.loi-legal-doc-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 12px 14px;
|
|
border: 1px solid #e2e8f0;
|
|
border-left: 4px solid #f59e0b;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
transition:
|
|
box-shadow 0.15s ease,
|
|
border-color 0.15s ease;
|
|
|
|
&:hover {
|
|
box-shadow: 0 3px 12px rgb(15 23 42 / 6%);
|
|
}
|
|
|
|
&--submitted {
|
|
border-left-color: #10b981;
|
|
}
|
|
}
|
|
|
|
.loi-legal-doc-title-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.loi-legal-doc-icon {
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.loi-legal-doc-title {
|
|
flex: 1;
|
|
font-size: 12.5px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.loi-legal-doc-upload-btn {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.loi-legal-doc-thumb-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.loi-legal-doc-thumb-remove {
|
|
border: none;
|
|
background: none;
|
|
color: #94a3b8;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
padding: 0 2px;
|
|
|
|
&:hover {
|
|
color: #dc2626;
|
|
}
|
|
}
|
|
|
|
// CIC Credit Bureau Hero Card in Stage detail
|
|
.loi-cic-hero-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
background: #fff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
padding: 16px 20px;
|
|
margin-bottom: 16px;
|
|
box-shadow: 0 2px 8px rgb(15 23 42 / 4%);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.loi-cic-score-badge {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 90px;
|
|
height: 80px;
|
|
border-radius: 12px;
|
|
padding: 8px 12px;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #10b981, #059669);
|
|
|
|
.loi-cic-score-num {
|
|
font-size: 1.8rem;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
}
|
|
|
|
.loi-cic-score-band {
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
margin-top: 4px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
&--excellent {
|
|
background: linear-gradient(135deg, #10b981, #047857);
|
|
}
|
|
|
|
&--good {
|
|
background: linear-gradient(135deg, #0ea5e9, #0284c7);
|
|
}
|
|
|
|
&--fair {
|
|
background: linear-gradient(135deg, #f59e0b, #d97706);
|
|
}
|
|
|
|
&--poor {
|
|
background: linear-gradient(135deg, #f43f5e, #e11d48);
|
|
}
|
|
}
|
|
|
|
.loi-cic-details-grid {
|
|
display: flex;
|
|
gap: 24px;
|
|
flex: 1;
|
|
flex-wrap: wrap;
|
|
|
|
.loi-cic-detail-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.loi-cic-label {
|
|
font-size: 0.76rem;
|
|
color: #64748b;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.loi-cic-val {
|
|
font-size: 0.88rem;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.loi-cic-file-name {
|
|
font-family: monospace;
|
|
font-size: 0.82rem;
|
|
color: #2563eb;
|
|
}
|
|
}
|
|
}
|
|
|
|
.loi-cic-action-box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.loi-cic-analysis-btn {
|
|
border-radius: 20px;
|
|
padding: 8px 18px;
|
|
font-weight: 700;
|
|
box-shadow: 0 4px 12px rgb(37 99 235 / 20%);
|
|
}
|
|
}
|
|
|
|
.loi-cic-action-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-top: 14px;
|
|
|
|
.loi-cic-upload-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
}
|
|
}
|