/* ============================================================
   KycProfile.css
   Corporate KYC / KYB Profile Page
   Place in: wwwroot/css/KycProfile.css
   Add to index.html: <link rel="stylesheet" href="css/KycProfile.css" />
   ============================================================ */

/* ── PAGE SHELL ─────────────────────────────────────────────── */
.kycp-page {
    font-family: var(--HeadingFont) !important;
}

/* ── PAGE HEADER ────────────────────────────────────────────── */
.kycp-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}

.kycp-page-title {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    font-family: var(--HeadingFont) !important;
    letter-spacing: -0.3px;
}

.kycp-page-sub {
    font-size: 13px;
    color: #6B7280;
    margin-top: 3px;
    font-family: var(--HeadingFont) !important;
}

/* ── STATUS BANNER ──────────────────────────────────────────── */
.kycp-status-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 14px;
    margin-bottom: 28px;
    border: 1.5px solid transparent;
    font-family: var(--HeadingFont) !important;
}

    .kycp-status-banner.pending {
        background: #FFFBEB;
        border-color: #FDE68A;
    }

    .kycp-status-banner.submitted {
        background: #EFF6FF;
        border-color: #BFDBFE;
    }

    .kycp-status-banner.approved {
        background: #ECFDF5;
        border-color: #6EE7B7;
    }

    .kycp-status-banner.rejected {
        background: #FEF2F2;
        border-color: #FECACA;
    }

    .kycp-status-banner.info_requested {
        background: #F5F3FF;
        border-color: #C4B5FD;
    }

.kycp-banner-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.kycp-banner-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    font-family: var(--HeadingFont) !important;
}

.kycp-banner-sub {
    font-size: 13px;
    color: #6B7280;
    margin-top: 2px;
    font-family: var(--HeadingFont) !important;
}

.kycp-banner-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--HeadingFont) !important;
    flex-shrink: 0;
}

    .kycp-banner-badge.pending {
        background: #FEF3C7;
        color: #B45309;
    }

    .kycp-banner-badge.submitted {
        background: #DBEAFE;
        color: #1D4ED8;
    }

    .kycp-banner-badge.approved {
        background: #D1FAE5;
        color: #057A55;
    }

    .kycp-banner-badge.rejected {
        background: #FEE2E2;
        color: #B91C1C;
    }

    .kycp-banner-badge.info_requested {
        background: #EDE9FE;
        color: #6D28D9;
    }

/* ── SECTION CARD ───────────────────────────────────────────── */
.kycp-section-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
}

.kycp-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #F3F4F6;
    background: #FAFAFA;
}

.kycp-section-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kycp-section-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #EEF2FF;
    color: #4F46E5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.kycp-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    font-family: var(--HeadingFont) !important;
}

.kycp-section-body {
    padding: 20px;
}

/* ── FIELD GRID ─────────────────────────────────────────────── */
.kycp-field-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .kycp-field-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .kycp-field-grid {
        grid-template-columns: 1fr;
    }
}

.kycp-field-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* ── FIELD ITEM ─────────────────────────────────────────────── */
.kycp-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.kycp-field-label {
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9CA3AF;
    font-family: var(--HeadingFont) !important;
}

.kycp-field-value {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    font-family: var(--HeadingFont) !important;
    padding: 9px 12px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    min-height: 38px;
    display: flex;
    align-items: center;
}

    .kycp-field-value.muted {
        color: #6B7280;
        font-weight: 400;
    }

/* Edit mode input */
.kycp-field .selectInput,
.kycp-field .rz-textbox,
.kycp-field .rz-inputtext,
.kycp-field .datepickerSelect {
    font-family: var(--HeadingFont) !important;
    font-size: 14px !important;
}

/* ── EDIT / SAVE BUTTON ─────────────────────────────────────── */
.kycp-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1.5px solid #E0D5E8;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #6B7280;
    font-family: var(--HeadingFont) !important;
    transition: all 0.15s;
}

    .kycp-edit-btn:hover {
        border-color: #4F46E5;
        color: #4F46E5;
        background: #EEF2FF;
    }

.kycp-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1.5px solid #10B981;
    border-radius: 8px;
    background: #D1FAE5;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #057A55;
    font-family: var(--HeadingFont) !important;
    transition: all 0.15s;
}

    .kycp-save-btn:hover {
        background: #A7F3D0;
    }

.kycp-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1.5px solid #FCA5A5;
    border-radius: 8px;
    background: #FEE2E2;
    cursor: pointer;
    color: #B91C1C;
    transition: all 0.15s;
}

    .kycp-cancel-btn:hover {
        background: #FECACA;
    }

.kycp-section-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── OWNER CARD ─────────────────────────────────────────────── */
.kycp-owner-card {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

    .kycp-owner-card:last-child {
        margin-bottom: 0;
    }

.kycp-owner-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
}

.kycp-owner-number {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #4F46E5;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--HeadingFont) !important;
}

.kycp-owner-name {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    flex: 1;
    font-family: var(--HeadingFont) !important;
}

.kycp-owner-body {
    padding: 16px;
}

/* ── DOCUMENT TILES ─────────────────────────────────────────── */
.kycp-doc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 640px) {
    .kycp-doc-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.kycp-doc-tile {
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}

    .kycp-doc-tile.uploaded {
        border-color: #A7F3D0;
        background: #F0FDF4;
    }

    .kycp-doc-tile.missing {
        border-color: #FCA5A5;
        border-style: dashed;
        background: #FFF5F5;
    }

.kycp-doc-tile-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.kycp-doc-tile.uploaded .kycp-doc-tile-icon {
    background: #D1FAE5;
    color: #057A55;
}

.kycp-doc-tile.missing .kycp-doc-tile-icon {
    background: #FEE2E2;
    color: #B91C1C;
}

.kycp-doc-tile-name {
    font-size: 14px;
    color: #111827;
    font-family: var(--HeadingFont) !important;
    line-height: 1.3;
}

.kycp-doc-tile-owner {
    font-size: 13px;
    color: #6B7280;
    font-family: var(--HeadingFont) !important;
    margin-top: 2px;
}

.kycp-doc-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.kycp-doc-status {
    font-size: 13px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    font-family: var(--HeadingFont) !important;
}

    .kycp-doc-status.uploaded {
        background: #D1FAE5;
        color: #057A55;
    }

    .kycp-doc-status.missing {
        background: #FEE2E2;
        color: #B91C1C;
    }

.kycp-doc-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #4F46E5;
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    border-radius: 6px;
    padding: 3px 10px;
    cursor: pointer;
    font-family: var(--HeadingFont) !important;
    transition: all 0.15s;
    text-decoration: none;
}

    .kycp-doc-view-btn:hover {
        background: #E0E7FF;
    }

/* Upload box inside doc tile */
.kycp-doc-upload-wrap {
    margin-top: 4px;
}

    .kycp-doc-upload-wrap .rz-fileupload-files,
    .kycp-doc-upload-wrap .rz-fileupload-row {
        display: none !important;
    }

/* ── FILE CHIP (after upload) ───────────────────────────────── */
.kycp-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    border-radius: 20px;
    padding: 3px 10px 3px 8px;
    font-size: 12px;
    color: #3730A3;
    font-family: var(--HeadingFont) !important;
    max-width: 100%;
    word-break: break-all;
}

.kycp-file-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #6366F1;
    font-size: 14px;
    padding: 0;
    display: flex;
    align-items: center;
}

    .kycp-file-chip-remove:hover {
        color: #DC2626;
    }

/* ── UPLOAD SPINNER ─────────────────────────────────────────── */
.kycp-upload-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #4338CA;
    font-family: var(--HeadingFont) !important;
}

.kycp-upload-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #C7D2FE;
    border-top-color: #6366F1;
    border-radius: 50%;
    animation: kycpSpin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes kycpSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ── NDA SIGNATURE ──────────────────────────────────────────── */
.kycp-sig-box {
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 16px;
    background: #F9FAFB;
    display: inline-block;
    max-width: 360px;
}

    .kycp-sig-box img {
        max-width: 100%;
        height: auto;
    }

.kycp-sig-empty {
    font-size: 13px;
    color: #9CA3AF;
    font-style: italic;
    font-family: var(--HeadingFont) !important;
}

/* ── PROGRESS STEPPER ───────────────────────────────────────── */
.kycp-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 28px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.kycp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 64px;
}

.kycp-step-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    border: 2px solid #E5E7EB;
    background: #fff;
    color: #9CA3AF;
    font-family: var(--HeadingFont) !important;
    transition: all 0.2s;
}

    .kycp-step-circle.complete {
        background: #1D4ED8;
        border-color: #1D4ED8;
        color: #fff;
    }

    .kycp-step-circle.active {
        background: #EEF2FF;
        border-color: #1D4ED8;
        color: #1D4ED8;
    }

.kycp-step-label {
    font-size: 11px;
    font-weight: 400;
    color: #9CA3AF;
    font-family: var(--HeadingFont) !important;
    white-space: nowrap;
}

    .kycp-step-label.complete {
        color: #057A55;
    }

    .kycp-step-label.active {
        color: #1D4ED8;
    }

.kycp-step-line {
    flex: 1;
    height: 2px;
    background: #E5E7EB;
    margin-bottom: 18px;
    min-width: 30px;
    transition: background 0.3s;
}

    .kycp-step-line.done {
        background: #057A55;
    }

/* ── ALERT / INFO BANNER ────────────────────────────────────── */
.kycp-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-family: var(--HeadingFont) !important;
    margin-bottom: 20px;
}

    .kycp-alert.info {
        background: #EFF6FF;
        border: 1px solid #BFDBFE;
        color: #1D4ED8;
    }

    .kycp-alert.warning {
        background: #FFFBEB;
        border: 1px solid #FDE68A;
        color: #B45309;
    }

    .kycp-alert.error {
        background: #FEF2F2;
        border: 1px solid #FECACA;
        color: #B91C1C;
    }

    .kycp-alert.success {
        background: #ECFDF5;
        border: 1px solid #A7F3D0;
        color: #057A55;
    }

.rz-grid-table tr td {
    padding: 10px !important;
}

/* ── SUBMIT BUTTON ROW ──────────────────────────────────────── */
.kycp-actions-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid #F3F4F6;
    margin-top: 8px;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .kycp-page {
        padding: 16px 12px 40px;
    }

    .kycp-doc-grid {
        grid-template-columns: 1fr;
    }

    .kycp-banner-badge {
        display: none;
    }
}