/* KYC form sheet styles - shared by the Client submission-detail page and the Admin auditor
   verification page (both render <KycFormSheet/>). Extracted from the Client app's app.css so
   the two surfaces render a submitted form identically. The Client already carries these rules
   in its own app.css; the Admin app loads THIS file via _content/TradeMaster.Kyc.Ui/. */

/* ===== empty state ===== */
.empty-state {
    background: #ffffff;
    border: 1px solid #eaedf4;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

/* ===== letterhead ===== */
.kyc-letterhead {
    display: flex;
    flex-direction: column;
    gap: 14px;
    direction: ltr;
    /* White band matching the logo's own white background (the logo PNG is opaque white, not
       transparent), so the emblem blends in seamlessly instead of showing a white box on the
       off-white artboard. Full-bleed to the card edges via negative margins (the .kyc-page padding
       is 36px) with the card's top corners, and a downward-biased shadow that lifts the masthead
       off the form content below it. */
    background: #ffffff;
    margin: -36px -36px 26px;
    padding: 30px 36px 24px;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 6px 16px -8px rgba(15, 23, 55, 0.22);
}

/* The two groups at the same level: brand (logo + org) pinned left, form title pinned right. */
.kyc-letterhead-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* Logo + bilingual org name locked up on one row, sized to span the two title lines. */
.kyc-letterhead-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.kyc-letterhead-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
    flex: 0 0 auto;
}

.kyc-letterhead-org {
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* Centered so the (narrower, secondary) English line sits centered under the larger Arabic
       line on top, which anchors the block width. */
    text-align: center;
}

/* Arabic on top is the primary (larger) masthead line; the English line below is the secondary. */
.kyc-letterhead-org-ar {
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #2b2f7a;
}

.kyc-letterhead-org-en {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #5b608c;
}

/* Full-width two-tone divider (navy with an orange center segment) closing off the masthead. */
.kyc-letterhead-rule {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #2b2f7a 0 46%, #ef7f1a 46% 54%, #2b2f7a 54% 100%);
}

.kyc-letterhead-form {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: right;
}

/* Arabic on top is the primary form-title line; the English line below is the secondary. */
.kyc-letterhead-form-ar {
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #3a3f5c;
}

.kyc-letterhead-form-en {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #6b7086;
}

/* Inputs - height/radius/border applied directly to Radzen's rendered elements (more reliable

/* ===== print sheet + field grids + attachments ===== */
.kyc-print-toolbar {
    max-width: 794px;
    width: 100%;
    margin: 0 auto 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kyc-print-toolbar button {
    height: 38px;
    padding: 0 18px;
    border-radius: 8px;
    background: #0f766e;
    color: #ffffff;
    border: none;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    font-family: inherit;
}

.kyc-print-toolbar button:hover {
    filter: brightness(1.05);
}

.kyc-print-page {
    background: #e9ecef;
    padding: 24px 16px 48px;
    display: flex;
    justify-content: center;
}

.kyc-print-sheet {
    background: #ffffff;
    width: 100%;
    max-width: 794px;
    padding: 0.6in;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    /* Direction is set per request culture via the dir attribute in KycSubmissionDetail.razor (RTL
       for Arabic, LTR for English) - not hard-wired here, so switching language re-aligns the sheet.
       All inner layout uses logical text-align:start/end and flexbox, so it flips automatically. */
    font-family: "IBM Plex Sans Arabic", sans-serif;
    color: #12332f;
    box-sizing: border-box;
}

.kyc-print-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid #0f766e;
    padding-bottom: 14px;
    margin-bottom: 22px;
    gap: 16px;
}

.kyc-print-header h1 {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    color: #0e2c29;
}

.kyc-print-subtitle {
    margin: 4px 0 0;
    font-size: 11.5px;
    color: #6e8380;
}

.kyc-print-meta {
    text-align: left;
    font-size: 11px;
    color: #6e8380;
    white-space: nowrap;
}

.kyc-print-meta strong {
    color: #0f766e;
}

/* The investor form's IDC letterhead reused as this sheet's masthead - re-bled to the sheet's
   0.6in padding (the base .kyc-letterhead rule bleeds to the form page's 36px padding instead). */
.kyc-print-sheet .kyc-letterhead {
    margin: -0.6in -0.6in 18px;
    padding: 28px 0.6in 20px;
    border-radius: 4px 4px 0 0;
}

/* Submission meta shown as a wrapping row beneath the masthead, closed off by the same teal rule
   the old header used. */
.kyc-print-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    justify-content: flex-start;
    text-align: start;
    white-space: normal;
    padding-bottom: 12px;
    margin-bottom: 22px;
}

/* Four across, mirroring the form's .kyc-grid-names (First/Second/Third/Fourth). Compound
   selector so it beats the base .kyc-print-grid (2-col) rule that follows it in the file. */
.kyc-print-grid.kyc-print-grid-names {
    grid-template-columns: repeat(4, 1fr);
}

/* The "if you reside abroad" hint above the residence country/city, mirroring the form. */
.kyc-print-sec-note {
    margin: 12px 0;
    font-size: 11.5px;
    color: #6e8380;
}

.kyc-print-sec {
    break-inside: avoid;
    margin-bottom: 22px;
}

.kyc-print-sec-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.kyc-print-sec-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0f766e;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kyc-print-sec-title {
    font-size: 14px;
    font-weight: 700;
    color: #0e2c29;
    white-space: nowrap;
}

.kyc-print-sec-rule {
    flex: 1;
    height: 1px;
    background: #dce7e5;
}

.kyc-print-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
}

.kyc-print-grid-3col {
    grid-template-columns: 1fr 1fr 1fr;
}

.kyc-print-field-full {
    grid-column: 1 / -1;
}

.kyc-print-sheet .fld .lbl {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #5b6b6a;
    margin-bottom: 3px;
}

.kyc-print-sheet .fld .val {
    min-height: 21px;
    border-bottom: 1px solid #b7c3c1;
    padding: 3px 3px 4px;
    font-size: 13px;
    color: #000000;
    /* Preserves line breaks the investor actually typed into a RadzenTextArea field (e.g.
       PoliticalActivityDetails, SeniorOfficialRelationshipDetails, AddressNote) - HTML collapses
       \n to a single space by default, which flattened multi-line free text onto one line here. */
    white-space: pre-wrap;
    word-break: break-word;
}

/* LTR-content values (phone/email/numbers/hashes) sit at the sheet's start edge. In an RTL sheet
   that's the right edge (the element's own dir="ltr" would otherwise left-align them); in an LTR
   sheet their natural left alignment already matches, so this only applies to the RTL sheet. */
.kyc-print-sheet[dir="rtl"] .fld .val[dir="ltr"] {
    text-align: right;
}

.kyc-print-toggle {
    font-size: 12.5px;
    color: #12332f;
    display: flex;
    align-items: center;
    gap: 14px;
}

.kyc-print-toggle-on {
    color: #0f766e;
    font-weight: 700;
}

.kyc-print-signature-block {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 22px;
}

.kyc-print-signature-line {
    border-bottom: 1px solid #12332f;
    height: 34px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 4px;
}

.kyc-print-signature-line img {
    max-height: 56px;
}

.kyc-print-signature-caption {
    font-size: 11px;
    color: #6e8380;
    margin: 4px 0 0;
}

/* RadzenCarousel's own CSS is height:100% cascading down from .rz-carousel, which has no
   intrinsic height of its own - without an explicit height here the whole thing collapses to
   0px and silently shows nothing (confirmed live). */
.kyc-print-attachments-carousel .rz-carousel {
    height: 420px;
}

.kyc-print-attachments-carousel .rz-carousel-item {
    flex-direction: column;
    gap: 10px;
    padding: 16px 0;
}

.kyc-print-attachments-carousel .rz-carousel img {
    max-width: 100%;
    max-height: 340px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.kyc-print-attachment-caption {
    text-align: center;
    font-size: 12px;
    color: #5b6b6a;
    margin-top: 8px;
}

/* Attachment thumbnail gallery (screen). Tiles are captioned with the investor's own title and
   open the full image in the lightbox below on click. */
.kyc-attachment-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.kyc-attachment-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: #f4f7f6;
    border: 1px solid #dbe5e3;
    border-radius: 12px;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}

.kyc-attachment-tile:hover {
    border-color: #0f766e;
    box-shadow: 0 4px 14px -6px rgba(15, 118, 110, .5);
    transform: translateY(-1px);
}

/* The lightbox-open area (thumbnail + title) - a bare button so the whole tile is clickable. */
.kyc-attachment-tile-open {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
}

/* Per-image print button, a sibling of the open button (never nested inside it - nested buttons
   are invalid HTML). */
.kyc-attachment-tile-print {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    border: 1px solid #0f766e;
    background: #ffffff;
    color: #0f766e;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.kyc-attachment-tile-print:hover {
    background: #0f766e;
    color: #ffffff;
}

.kyc-attachment-tile-print svg {
    width: 15px;
    height: 15px;
}

.kyc-attachment-tile-thumb {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 8px;
    background: #ffffff;
    display: block;
}

.kyc-attachment-tile-title {
    font-size: 12.5px;
    color: #12332f;
    word-break: break-word;
    line-height: 1.4;
}

/* Full-size attachment viewer. */
.kyc-attachment-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(9, 20, 18, .82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.kyc-attachment-lightbox-panel {
    position: relative;
    max-width: min(92vw, 900px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.kyc-attachment-lightbox-panel img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 6px;
    background: #ffffff;
}

.kyc-attachment-lightbox-caption {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
}

.kyc-attachment-lightbox-close {
    position: absolute;
    top: -14px;
    inset-inline-end: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    color: #12332f;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.kyc-print-attachments-list {
    display: none;
}

.kyc-print-footer {
    display: none;
}

@media print {
    @page {
        margin: 0.6in;
        size: A4;
    }

    body {
        background: #ffffff;
    }

    .page-toolbar,
    .kyc-print-noprint,
    .app-nav,
    .flash-banner {
        display: none !important;
    }

    .app-main {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .kyc-print-page {
        background: #ffffff;
        padding: 0;
    }

    .kyc-print-sheet {
        box-shadow: none;
        max-width: 100%;
        padding: 0;
        border-radius: 0;
    }

    /* @page already supplies the physical margin, and the sheet padding drops to 0 in print, so
       the masthead sits flush - no negative bleed, no shadow. */
    .kyc-print-sheet .kyc-letterhead {
        margin: 0 0 16px;
        padding: 0 0 14px;
        box-shadow: none;
        border-radius: 0;
    }

    .kyc-print-attachments-list {
        display: block;
    }

    /* Investor undertakings + staff approval start on their own page, and stay together on it
       rather than splitting across two pages. */
    .kyc-print-pledges {
        break-before: page;
        break-inside: avoid;
    }

    .kyc-print-footer {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #dce7e5;
        padding-top: 8px;
        margin-top: 24px;
        font-size: 9.5px;
        color: #8aa09d;
    }
}