/*
   Shared visual system for the four family-request views.
   Add this file under ~/Content/ and reference it from each Razor view.
*/

:root {
    --family-primary: #157f72;
    --family-primary-dark: #0c6259;
    --family-secondary: #d9a441;
    --family-ink: #172b4d;
    --family-muted: #6b7a90;
    --family-border: #e3eaf2;
    --family-surface: #ffffff;
    --family-background: #f3f7fa;
    --family-danger: #c83d4a;
    --family-success: #258461;
    --family-shadow: 0 20px 55px rgba(23, 43, 77, .10);
}

.family-ui {
    min-height: calc(100vh - 80px);
    padding: 36px 16px 58px;
    background: radial-gradient(circle at 8% 5%, rgba(21, 127, 114, .12), transparent 27%), radial-gradient(circle at 95% 14%, rgba(217, 164, 65, .14), transparent 24%), var(--family-background);
    color: var(--family-ink);
    direction: rtl;
}

    .family-ui > .row,
    .family-ui .family-row {
        width: min(1160px, 100%);
        margin-right: auto;
        margin-left: auto;
    }

    .family-ui .card {
        overflow: hidden;
        border: 1px solid rgba(227, 234, 242, .95) !important;
        border-radius: 24px !important;
        background: var(--family-surface);
        box-shadow: var(--family-shadow) !important;
    }

    .family-ui .card-header {
        position: relative;
        min-height: 88px;
        padding: 24px 30px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: linear-gradient(135deg, var(--family-primary), #1e9a87) !important;
        color: #fff !important;
    }

        .family-ui .card-header::after {
            position: absolute;
            top: -60px;
            left: 10%;
            width: 170px;
            height: 170px;
            border: 23px solid rgba(255, 255, 255, .08);
            border-radius: 50%;
            content: "";
        }

        .family-ui .card-header > *,
        .family-ui .card-header h1,
        .family-ui .card-header h2,
        .family-ui .card-header h3,
        .family-ui .card-header h5,
        .family-ui .card-header p,
        .family-ui .card-header small {
            position: relative;
            z-index: 1;
        }

        .family-ui .card-header h1,
        .family-ui .card-header h2,
        .family-ui .card-header h3,
        .family-ui .card-header h5 {
            margin: 0;
            color: #fff;
            font-size: clamp(19px, 2.2vw, 25px);
            font-weight: 800;
        }

        .family-ui .card-header small,
        .family-ui .card-header p {
            color: rgba(255, 255, 255, .84) !important;
            font-size: 13px;
        }

    .family-ui .card-body {
        padding: 28px 30px 34px !important;
    }

    .family-ui .family-page-intro {
        margin: -8px 0 24px;
        color: var(--family-muted);
        font-size: 13px;
        line-height: 1.8;
    }

    .family-ui .family-section,
    .family-ui .card-body > .mb-3.family-section,
    .family-ui .card-body > .row.family-section {
        margin: 0 0 22px !important;
        padding: 20px;
        border: 1px solid var(--family-border);
        border-radius: 17px;
        background: #fbfdfe;
    }

        .family-ui .family-section:last-child {
            margin-bottom: 0 !important;
        }

    .family-ui .family-section-title,
    .family-ui .section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--family-border);
        color: var(--family-ink);
        font-size: 16px;
        font-weight: 800;
    }

        .family-ui .family-section-title::before,
        .family-ui .section-title::before {
            display: inline-grid;
            width: 30px;
            height: 30px;
            flex: 0 0 30px;
            place-items: center;
            border-radius: 9px;
            background: rgba(21, 127, 114, .12);
            color: var(--family-primary);
            content: "•";
            font-size: 18px;
            line-height: 1;
        }

    .family-ui .family-meta-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: 22px;
    }

    .family-ui .family-meta-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 48px;
        padding: 10px 14px;
        border: 1px dashed #c9d7e4;
        border-radius: 11px;
        background: #f5f8fa;
    }

        .family-ui .family-meta-item label {
            margin: 0;
            color: var(--family-muted);
            font-size: 12px;
            font-weight: 700;
        }

        .family-ui .family-meta-item input,
        .family-ui .family-meta-item .form-control-plaintext {
            min-width: 0;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            color: var(--family-primary-dark) !important;
            font-size: 14px;
            font-weight: 800;
            text-align: left;
        }

    .family-ui .form-label,
    .family-ui label.form-label,
    .family-ui .info-label {
        display: block;
        min-height: 22px;
        margin-bottom: 7px;
        color: #304463;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.5;
    }

    .family-ui .text-danger {
        color: var(--family-danger) !important;
    }

    .family-ui .form-control,
    .family-ui .form-select,
    .family-ui .select2-container--default .select2-selection--single {
        min-height: 44px;
        border: 1px solid #d9e3ed !important;
        border-radius: 11px !important;
        background: #fff !important;
        color: var(--family-ink);
        font-size: 14px;
        box-shadow: none !important;
        transition: border-color .2s ease, box-shadow .2s ease;
    }

    .family-ui .form-control {
        padding: 10px 13px;
    }

        .family-ui .form-control:focus,
        .family-ui .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: var(--family-primary) !important;
            box-shadow: 0 0 0 4px rgba(21, 127, 114, .10) !important;
            outline: 0;
        }

        .family-ui .form-control[readonly],
        .family-ui .form-control-plaintext {
            background: #f1f5f8 !important;
            color: var(--family-muted);
        }

    .family-ui .ltr-input {
        direction: ltr;
        text-align: left;
    }

    .family-ui .select2-container {
        width: 100% !important;
    }

    .family-ui .select2-container--default .select2-selection--single {
        display: flex;
        align-items: center;
        height: 44px;
    }

        .family-ui .select2-container--default .select2-selection--single .select2-selection__rendered {
            padding-right: 13px;
            padding-left: 34px;
            color: var(--family-ink);
            font-size: 14px;
            line-height: 42px;
        }

        .family-ui .select2-container--default .select2-selection--single .select2-selection__arrow {
            top: 9px;
            left: 8px;
            right: auto;
        }

    .family-ui .select2-dropdown {
        overflow: hidden;
        border: 1px solid var(--family-primary);
        border-radius: 10px;
    }

    .family-ui .select2-results__option--highlighted[aria-selected] {
        background: var(--family-primary) !important;
    }

    .family-ui .validation-summary,
    .family-ui .alert {
        margin-bottom: 20px;
        border-radius: 11px !important;
        font-size: 13px;
        line-height: 1.8;
    }

    .family-ui .family-actions,
    .family-ui .d-flex.flex-wrap.gap-2 {
        display: flex;
        flex-wrap: wrap;
        gap: 10px !important;
        margin-top: 22px;
    }

    .family-ui .btn,
    .family-ui input[type="submit"].btn,
    .family-ui input[type="button"].btn {
        min-height: 42px;
        padding: 9px 18px;
        border: 0;
        border-radius: 11px !important;
        font-size: 13px;
        font-weight: 800;
        transition: .2s ease;
    }

        .family-ui .btn:hover,
        .family-ui .btn:focus {
            transform: translateY(-1px);
        }

    .family-ui .btn-primary,
    .family-ui .btn-success {
        background: linear-gradient(135deg, var(--family-primary), var(--family-primary-dark)) !important;
        color: #fff !important;
        box-shadow: 0 9px 19px rgba(21, 127, 114, .18);
    }

    .family-ui .btn-info,
    .family-ui .btn-dark {
        background: #edf7f5 !important;
        color: var(--family-primary-dark) !important;
    }

    .family-ui .btn-warning {
        background: #fff7e6 !important;
        color: #8b671d !important;
        border: 1px solid rgba(217, 164, 65, .45) !important;
    }

    .family-ui .btn-danger {
        background: #fff0f1 !important;
        color: #a12f3b !important;
    }

    .family-ui .filebox {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 46px;
        padding: 7px 9px;
        border: 1px dashed rgba(21, 127, 114, .35);
        border-radius: 11px;
        background: #f8fcfb;
    }

    .family-ui .filebox-input {
        display: none;
    }

    .family-ui .filebox-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        padding: 7px 12px;
        border: 0;
        border-radius: 8px;
        background: var(--family-primary);
        color: #fff;
        cursor: pointer;
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
    }

        .family-ui .filebox-btn:hover {
            background: var(--family-primary-dark);
        }

    .family-ui .filebox-name {
        min-width: 0;
        overflow: hidden;
        color: var(--family-muted);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .family-ui .small-muted,
    .family-ui .file-help {
        color: var(--family-muted);
        font-size: 11px;
        line-height: 1.7;
    }

    .family-ui .text-alert {
        color: var(--family-danger) !important;
    }

    .family-ui hr {
        border-color: var(--family-border);
        opacity: 1;
    }

    .family-ui .table-responsive {
        overflow-x: auto;
        border: 1px solid var(--family-border);
        border-radius: 15px;
    }

    .family-ui table.table {
        min-width: 620px;
        margin-bottom: 0;
        border: 0;
        color: var(--family-ink);
        font-size: 13px;
        vertical-align: middle;
    }

        .family-ui table.table thead th {
            padding: 13px 15px;
            border: 0;
            background: #eef7f5 !important;
            color: var(--family-primary-dark);
            font-weight: 800;
            white-space: nowrap;
        }

        .family-ui table.table tbody td {
            padding: 12px 15px;
            border-color: var(--family-border);
            vertical-align: middle;
        }

        .family-ui table.table tbody tr:hover {
            background: #fbfdfd;
        }

        .family-ui table.table img {
            width: 62px !important;
            height: 42px !important;
            border: 1px solid var(--family-border) !important;
            border-radius: 8px !important;
            object-fit: cover;
        }

    .family-ui .table-dark th {
        background: #eef7f5 !important;
        color: var(--family-primary-dark) !important;
    }

    .family-ui .form-check {
        padding: 14px 16px;
        border: 1px solid #f0dfb5;
        border-radius: 12px;
        background: #fffaf0;
    }

    .family-ui .form-check-input {
        float: none;
        margin: 0 0 0 8px;
        accent-color: var(--family-primary);
    }

    .family-ui .form-check-label {
        color: #765b21 !important;
        font-size: 13px;
        line-height: 1.8;
    }

    .family-ui .family-empty-state {
        padding: 28px 16px !important;
        color: var(--family-muted);
        text-align: center;
    }

@media (max-width: 767px) {
    .family-ui {
        padding: 22px 10px 38px;
    }

        .family-ui .card {
            border-radius: 18px !important;
        }

        .family-ui .card-header,
        .family-ui .card-body {
            padding: 20px 15px !important;
        }

            .family-ui .family-section,
            .family-ui .card-body > .mb-3.family-section,
            .family-ui .card-body > .row.family-section {
                padding: 15px;
                border-radius: 14px;
            }

        .family-ui .family-meta-grid {
            grid-template-columns: 1fr;
        }

        .family-ui .family-actions,
        .family-ui .d-flex.flex-wrap.gap-2 {
            flex-direction: column;
        }

            .family-ui .family-actions .btn,
            .family-ui .d-flex.flex-wrap.gap-2 .btn,
            .family-ui .d-flex.flex-wrap.gap-2 input[type="submit"] {
                width: 100%;
            }

        .family-ui .filebox {
            align-items: stretch;
            flex-direction: column;
        }

        .family-ui .filebox-btn {
            width: 100%;
        }
}


/* Guided wizard */
.family-wizard {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0 auto 20px;
    padding: 14px;
    border: 1px solid rgba(21, 127, 114, .12);
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 10px 30px rgba(23, 43, 77, .05);
}

.family-wizard-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 7px;
    border-radius: 10px;
    color: var(--family-muted);
    font-size: 11px;
    font-weight: 700;
}

    .family-wizard-step::after {
        position: absolute;
        top: 50%;
        left: -7px;
        width: 7px;
        height: 2px;
        background: #dce8e6;
        content: "";
    }

    .family-wizard-step:last-child::after {
        display: none;
    }

.family-wizard-step-number {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border: 1px solid #d7e5e2;
    border-radius: 50%;
    background: #fff;
    color: var(--family-muted);
    font-size: 12px;
    font-weight: 800;
}

.family-wizard-step-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.family-wizard-step.is-current {
    background: rgba(21, 127, 114, .09);
    color: var(--family-primary-dark);
}

    .family-wizard-step.is-current .family-wizard-step-number,
    .family-wizard-step.is-done .family-wizard-step-number {
        border-color: var(--family-primary);
        background: var(--family-primary);
        color: #fff;
    }

.family-wizard-step.is-done {
    color: var(--family-primary-dark);
}

    .family-wizard-step.is-done::after {
        background: var(--family-primary);
    }

.family-wizard-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 18px;
    color: var(--family-muted);
    font-size: 12px;
    line-height: 1.7;
}

    .family-wizard-note::before {
        display: grid;
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        place-items: center;
        border-radius: 50%;
        background: rgba(217, 164, 65, .16);
        color: #8b671d;
        content: "i";
        font-size: 12px;
        font-weight: 900;
    }

.family-wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--family-border);
}

    .family-wizard-actions .btn {
        min-width: 130px;
    }

@media (max-width: 767px) {
    .family-wizard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 10px;
    }

    .family-wizard-step {
        padding: 7px 5px;
        font-size: 10px;
    }

        .family-wizard-step::after {
            display: none;
        }

    .family-wizard-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

        .family-wizard-actions .btn {
            width: 100%;
        }
}


.family-wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: min(1160px, 100%);
    margin: 0 auto 12px;
}

.family-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 118px;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid rgba(21, 127, 114, .22);
    border-radius: 11px;
    background: rgba(255, 255, 255, .86);
    color: var(--family-primary);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: .2s ease;
}

    .family-home-link::before {
        content: "⌂";
        font-size: 18px;
        line-height: 1;
    }

    .family-home-link:hover,
    .family-home-link:focus {
        border-color: var(--family-primary);
        background: var(--family-primary);
        color: #fff;
        text-decoration: none;
        transform: translateY(-1px);
    }

.family-wizard-context {
    color: var(--family-muted);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .family-wizard-nav {
        align-items: stretch;
        flex-direction: column;
    }

    .family-home-link {
        width: 100%;
    }

    .family-wizard-context {
        text-align: center;
    }
}


/* Smartphone-first refinements */
html,
body {
    overflow-x: hidden;
}

.family-ui,
.family-ui * {
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .family-ui {
        width: 100%;
        min-height: 100dvh;
        padding: 14px 8px 30px;
    }

        .family-ui > .row,
        .family-ui .family-row,
        .family-ui .row {
            width: 100%;
            max-width: 100%;
            margin-right: 0;
            margin-left: 0;
        }

        .family-ui [class*="col-"] {
            width: 100%;
            max-width: 100%;
            padding-right: 6px;
            padding-left: 6px;
        }

        .family-ui .card {
            width: 100%;
            border-radius: 16px !important;
        }

        .family-ui .card-header {
            min-height: 76px;
            padding: 18px 15px !important;
            text-align: center;
        }

            .family-ui .card-header::after {
                top: -72px;
                left: -20px;
                width: 130px;
                height: 130px;
                border-width: 18px;
            }

            .family-ui .card-header h1,
            .family-ui .card-header h2,
            .family-ui .card-header h3,
            .family-ui .card-header h5 {
                font-size: 19px;
                line-height: 1.5;
            }

            .family-ui .card-header small,
            .family-ui .card-header p {
                display: block;
                margin-top: 5px;
                font-size: 11px;
                line-height: 1.7;
            }

        .family-ui .card-body {
            padding: 16px 10px 22px !important;
        }

            .family-ui .family-section,
            .family-ui .card-body > .mb-3.family-section,
            .family-ui .card-body > .row.family-section {
                margin-bottom: 14px !important;
                padding: 13px 10px;
                border-radius: 13px;
            }

        .family-ui .family-section-title,
        .family-ui .section-title {
            gap: 8px;
            margin-bottom: 13px;
            padding-bottom: 9px;
            font-size: 14px;
        }

            .family-ui .family-section-title::before,
            .family-ui .section-title::before {
                width: 26px;
                height: 26px;
                flex-basis: 26px;
            }

        .family-ui .form-label,
        .family-ui label.form-label,
        .family-ui .info-label {
            min-height: 20px;
            margin-bottom: 5px;
            font-size: 12px;
        }

        .family-ui .form-control,
        .family-ui .form-select,
        .family-ui .select2-container--default .select2-selection--single {
            min-height: 48px;
            font-size: 16px;
        }

        .family-ui .select2-container--default .select2-selection--single {
            height: 48px;
        }

            .family-ui .select2-container--default .select2-selection--single .select2-selection__rendered {
                line-height: 46px;
            }

            .family-ui .select2-container--default .select2-selection--single .select2-selection__arrow {
                top: 11px;
            }

        .family-ui .family-wizard-nav {
            margin-bottom: 10px;
        }

        .family-ui .family-wizard-context {
            font-size: 11px;
        }

        .family-ui .family-wizard {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 5px;
            margin-bottom: 12px;
            padding: 8px;
            border-radius: 13px;
        }

        .family-ui .family-wizard-step {
            min-height: 40px;
            gap: 6px;
            padding: 5px 4px;
            font-size: 10px;
        }

            .family-ui .family-wizard-step:last-child {
                grid-column: 1 / -1;
            }

        .family-ui .family-wizard-step-number {
            width: 25px;
            height: 25px;
            flex-basis: 25px;
            font-size: 11px;
        }

        .family-ui .family-wizard-note {
            align-items: flex-start;
            margin-bottom: 13px;
            font-size: 11px;
        }

        .family-ui .family-wizard-actions {
            position: sticky;
            bottom: 0;
            z-index: 20;
            align-items: stretch;
            flex-direction: column;
            gap: 8px !important;
            margin: 18px -10px -22px !important;
            padding: 12px 10px;
            border-top: 1px solid rgba(227, 234, 242, .95);
            background: rgba(255, 255, 255, .96);
            box-shadow: 0 -8px 22px rgba(23, 43, 77, .08);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
        }

            .family-ui .family-wizard-actions .btn,
            .family-ui .family-wizard-actions input[type="submit"],
            .family-ui .family-wizard-actions input[type="button"] {
                width: 100%;
                min-height: 48px;
                margin: 0 !important;
                font-size: 14px;
            }

        .family-ui .filebox {
            min-height: 52px;
            padding: 7px;
        }

        .family-ui .filebox-btn {
            min-height: 42px;
            font-size: 13px;
        }

        .family-ui .filebox-name {
            width: 100%;
            text-align: center;
        }

        .family-ui .table-responsive {
            margin-right: -2px;
            margin-left: -2px;
            border-radius: 11px;
            -webkit-overflow-scrolling: touch;
        }

        .family-ui table.table {
            min-width: 560px;
            font-size: 12px;
        }

            .family-ui table.table thead th,
            .family-ui table.table tbody td {
                padding: 10px 9px;
            }

            .family-ui table.table img {
                width: 54px !important;
                height: 38px !important;
            }

        .family-ui .form-check {
            padding: 12px 10px;
        }

        .family-ui .form-check-label {
            font-size: 12px;
        }
}

@media (max-width: 380px) {
    .family-ui {
        padding-right: 5px;
        padding-left: 5px;
    }

        .family-ui .card-body {
            padding-right: 7px !important;
            padding-left: 7px !important;
        }

        .family-ui .family-wizard-step-label {
            font-size: 9px;
        }
}


/* Required labels, clickable steps, and detailed validation */
.family-ui .form-label.text-danger,
.family-ui label.form-label.text-danger {
    color: #304463 !important;
}

    .family-ui .form-label.text-danger::after,
    .family-ui label.form-label.text-danger::after {
        color: var(--family-danger);
        content: " *";
        font-weight: 900;
    }

.family-ui .family-wizard-step[href] {
    cursor: pointer;
    text-decoration: none;
}

    .family-ui .family-wizard-step[href]:hover {
        background: rgba(21, 127, 114, .10);
        color: var(--family-primary-dark);
    }

.family-ui .family-wizard-step.is-disabled {
    cursor: not-allowed;
    opacity: .58;
}

    .family-ui .family-wizard-step.is-disabled .family-wizard-step-number {
        background: #f5f7f9;
    }

.family-missing-fields {
    margin: 20px 0;
    padding: 16px 18px;
    border: 1px solid rgba(200, 61, 74, .25);
    border-right: 5px solid var(--family-danger);
    border-radius: 13px;
    background: #fff5f6;
    color: #7f2732;
    font-size: 13px;
    line-height: 1.9;
}

    .family-missing-fields strong {
        display: block;
        margin-bottom: 5px;
        color: #a12f3b;
        font-size: 14px;
    }

    .family-missing-fields ul {
        margin: 6px 0 0;
        padding-right: 20px;
    }

    .family-missing-fields li {
        margin: 2px 0;
    }

.family-field-missing {
    border-color: var(--family-danger) !important;
    box-shadow: 0 0 0 3px rgba(200, 61, 74, .10) !important;
}

.family-ui .select2-container.family-field-missing .select2-selection--single,
.family-ui .family-field-missing + .select2-container .select2-selection--single {
    border-color: var(--family-danger) !important;
    box-shadow: 0 0 0 3px rgba(200, 61, 74, .10) !important;
}

@media (max-width: 767px) {
    .family-missing-fields {
        margin-right: -2px;
        margin-left: -2px;
        padding: 13px 14px;
        font-size: 12px;
    }
}


.family-ui .required-label::after,
.family-ui .form-check-label.required-label::after {
    color: var(--family-danger);
    content: " *";
    font-weight: 900;
}

.family-ui .form-check-label.required-label {
    color: #304463 !important;
}


.family-ui .family-wizard-step.is-clickable {
    cursor: pointer;
    text-decoration: none;
}

    .family-ui .family-wizard-step.is-clickable:hover,
    .family-ui .family-wizard-step.is-clickable:focus-visible {
        background: rgba(21, 127, 114, .10);
        color: var(--family-primary-dark);
        outline: none;
    }

    .family-ui .family-wizard-step.is-clickable:focus-visible {
        box-shadow: 0 0 0 3px rgba(21, 127, 114, .18);
    }


.family-ui .form-label:has(+ input[required])::after,
.family-ui .form-label:has(+ select[required])::after {
    color: var(--family-danger);
    content: " *";
    font-weight: 900;
}


/* Identity lookup view */
.identity-lookup-view {
    min-height: calc(100vh - 84px);
    padding: 42px 16px 64px;
    background: radial-gradient(circle at 8% 4%, rgba(21, 127, 114, .12), transparent 27%), radial-gradient(circle at 95% 12%, rgba(217, 164, 65, .14), transparent 25%), var(--family-background, #f3f7fa);
    color: var(--family-ink, #172b4d);
    direction: rtl;
}

.identity-lookup-shell {
    width: min(1060px, 100%);
    margin: 0 auto;
}

.identity-lookup-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.identity-lookup-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--family-primary, #157f72);
    font-size: 13px;
    font-weight: 800;
}

    .identity-lookup-kicker::before {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--family-secondary, #d9a441);
        box-shadow: 0 0 0 5px rgba(217, 164, 65, .15);
        content: "";
    }

.identity-lookup-title {
    margin: 0;
    color: var(--family-ink, #172b4d);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    line-height: 1.25;
}

.identity-lookup-subtitle {
    margin: 8px 0 0;
    color: var(--family-muted, #6b7a90);
    font-size: 14px;
    line-height: 1.8;
}

.identity-lookup-card {
    overflow: hidden;
    border: 1px solid var(--family-border, #e3eaf2);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(23, 43, 77, .11);
}

.identity-lookup-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    background: linear-gradient(135deg, #157f72, #0c6259);
    color: #fff;
}

.identity-lookup-icon {
    display: grid;
    flex: 0 0 46px;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
    font-size: 20px;
}

.identity-lookup-card-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
}

.identity-lookup-card-header p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
}

.identity-lookup-card-body {
    padding: 24px;
}

.identity-lookup-form {
    padding: 20px;
    border: 1px solid rgba(21, 127, 114, .14);
    border-radius: 16px;
    background: #f8fbfb;
}

    .identity-lookup-form label {
        display: block;
        margin-bottom: 8px;
        color: var(--family-ink, #172b4d);
        font-size: 14px;
        font-weight: 800;
    }

        .identity-lookup-form label::after {
            color: var(--family-danger, #c83d4a);
            content: " *";
        }

.identity-lookup-input-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

    .identity-lookup-input-row .form-control {
        min-height: 48px;
        border-color: #d5e1e3;
        border-radius: 11px;
        direction: ltr;
        text-align: right;
    }

    .identity-lookup-input-row .btn {
        min-width: 142px;
        min-height: 48px;
        border: 0;
        border-radius: 11px;
        background: var(--family-primary, #157f72);
        color: #fff;
        font-weight: 800;
    }

        .identity-lookup-input-row .btn:hover,
        .identity-lookup-input-row .btn:focus-visible {
            background: var(--family-primary-dark, #0c6259);
            color: #fff;
        }

.identity-lookup-help {
    display: block;
    margin-top: 8px;
    color: var(--family-muted, #6b7a90);
    font-size: 12px;
}

.identity-lookup-result {
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(21, 127, 114, .18);
    border-radius: 11px;
    background: #eef9f7;
    color: var(--family-primary-dark, #0c6259);
    font-size: 13px;
    font-weight: 700;
}

.identity-lookup-list-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin: 28px 0 12px;
}

    .identity-lookup-list-header h3 {
        margin: 0;
        color: var(--family-ink, #172b4d);
        font-size: 17px;
        font-weight: 900;
    }

    .identity-lookup-list-header p {
        margin: 4px 0 0;
        color: var(--family-muted, #6b7a90);
        font-size: 12px;
    }

.identity-lookup-count {
    padding: 7px 11px;
    border-radius: 9px;
    background: #fff8e8;
    color: #8b641d;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.identity-lookup-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--family-border, #e3eaf2);
    border-radius: 14px;
}

.identity-lookup-table {
    min-width: 720px;
    margin: 0;
    vertical-align: middle;
}

    .identity-lookup-table thead th {
        padding: 14px 12px;
        border-bottom: 0;
        background: #f3f8f8;
        color: var(--family-primary-dark, #0c6259);
        font-size: 12px;
        font-weight: 900;
        white-space: nowrap;
    }

    .identity-lookup-table tbody td {
        padding: 14px 12px;
        border-color: #edf1f4;
        color: #3b4b63;
        font-size: 13px;
        vertical-align: middle;
    }

    .identity-lookup-table tbody tr:hover {
        background: #fbfdfd;
    }

.identity-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2f6;
    color: #516174;
    font-size: 11px;
    font-weight: 800;
}

.identity-status--new {
    background: #e8f7f3;
    color: #157f72;
}

.identity-status--warning {
    background: #fff3db;
    color: #8b641d;
}

.identity-table-action {
    min-width: 86px;
    min-height: 38px;
    border: 0;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
}

.identity-table-action--view {
    background: #e8f4ff;
    color: #1769aa;
}

.identity-table-action--edit {
    background: #fff3db;
    color: #8b641d;
}

.identity-table-action--transfer {
    background: #fff0f1;
    color: #a8333f;
}

.identity-table-action:hover,
.identity-table-action:focus-visible {
    filter: brightness(.96);
    outline: 3px solid rgba(21, 127, 114, .12);
}

.identity-empty {
    padding: 30px 16px !important;
    color: var(--family-muted, #6b7a90) !important;
    text-align: center;
}

@media (max-width: 767px) {
    .identity-lookup-view {
        padding: 26px 12px 44px;
    }

    .identity-lookup-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .identity-lookup-card-header,
    .identity-lookup-card-body {
        padding: 18px 14px;
    }

    .identity-lookup-form {
        padding: 14px;
    }

    .identity-lookup-input-row {
        flex-direction: column;
    }

        .identity-lookup-input-row .btn {
            width: 100%;
        }

    .identity-lookup-list-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}


/* Identity lookup v2: cleaner hierarchy and balanced spacing */
.identity-v2 {
    min-height: calc(100vh - 80px);
    padding: 34px 16px 58px;
    background: radial-gradient(circle at 12% 0%, rgba(21, 127, 114, .10), transparent 25%), radial-gradient(circle at 94% 8%, rgba(217, 164, 65, .10), transparent 22%), var(--family-background);
    direction: rtl;
}

.identity-v2-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.identity-v2-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.identity-v2-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.identity-v2-brand-icon {
    display: grid;
    flex: 0 0 46px;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(21, 127, 114, .12);
    color: var(--family-primary);
    font-size: 20px;
}

.identity-v2-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--family-primary);
    font-size: 12px;
    font-weight: 900;
}

.identity-v2-title {
    margin: 0;
    color: var(--family-ink);
    font-size: clamp(22px, 3vw, 31px);
    font-weight: 900;
    line-height: 1.25;
}

.identity-v2-subtitle {
    margin: 5px 0 0;
    color: var(--family-muted);
    font-size: 13px;
}

.identity-v2-main {
    overflow: hidden;
    border: 1px solid var(--family-border);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--family-shadow);
}

.identity-v2-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    padding: 24px;
    background: linear-gradient(180deg, #fbfefd, #f5faf9);
}

.identity-v2-search-copy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.identity-v2-search-copy-icon {
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--family-primary);
    color: #fff;
    font-size: 15px;
}

.identity-v2-search h2 {
    margin: 0;
    color: var(--family-ink);
    font-size: 18px;
    font-weight: 900;
}

.identity-v2-search p {
    margin: 5px 0 0;
    color: var(--family-muted);
    font-size: 12px;
    line-height: 1.8;
}

.identity-v2-form {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

    .identity-v2-form .form-control {
        min-height: 48px;
        border: 1px solid #cbdcdd;
        border-radius: 10px;
        direction: ltr;
        text-align: right;
    }

        .identity-v2-form .form-control:focus {
            border-color: var(--family-primary);
            box-shadow: 0 0 0 3px rgba(21, 127, 114, .12);
        }

    .identity-v2-form .btn {
        min-width: 112px;
        min-height: 48px;
        border: 0;
        border-radius: 10px;
        background: var(--family-primary);
        color: #fff;
        font-weight: 900;
        white-space: nowrap;
    }

        .identity-v2-form .btn:hover,
        .identity-v2-form .btn:focus-visible {
            background: var(--family-primary-dark);
            color: #fff;
        }

.identity-v2-help {
    display: block;
    margin-top: 8px;
    color: var(--family-muted);
    font-size: 11px;
}

.identity-v2-results {
    padding: 24px;
}

.identity-v2-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

    .identity-v2-results-head h3 {
        margin: 0;
        color: var(--family-ink);
        font-size: 17px;
        font-weight: 900;
    }

    .identity-v2-results-head p {
        margin: 4px 0 0;
        color: var(--family-muted);
        font-size: 12px;
    }

.identity-v2-count {
    padding: 7px 11px;
    border-radius: 8px;
    background: #fff8e8;
    color: #8b641d;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.identity-v2-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--family-border);
    border-radius: 14px;
}

.identity-v2-table {
    min-width: 760px;
    margin: 0;
}

    .identity-v2-table thead th {
        padding: 13px 12px;
        border: 0;
        background: #f3f8f8;
        color: var(--family-primary-dark);
        font-size: 12px;
        font-weight: 900;
        white-space: nowrap;
    }

    .identity-v2-table tbody td {
        padding: 13px 12px;
        border-color: #edf1f4;
        color: #40516a;
        font-size: 13px;
        vertical-align: middle;
    }

    .identity-v2-table tbody tr:hover {
        background: #fbfdfd;
    }

.identity-v2-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef2f6;
    color: #516174;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.identity-v2-status--new {
    background: #e8f7f3;
    color: #157f72;
}

.identity-v2-status--warning {
    background: #fff3db;
    color: #8b641d;
}

.identity-v2-action {
    min-width: 82px;
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.identity-v2-action--view {
    background: #e8f4ff;
    color: #1769aa;
}

.identity-v2-action--edit {
    background: #fff3db;
    color: #8b641d;
}

.identity-v2-action--transfer {
    background: #fff0f1;
    color: #a8333f;
}

.identity-v2-action:hover,
.identity-v2-action:focus-visible {
    filter: brightness(.96);
    outline: 3px solid rgba(21, 127, 114, .12);
}

.identity-v2-empty {
    padding: 32px 16px !important;
    color: var(--family-muted) !important;
    text-align: center;
}

@media (max-width: 800px) {
    .identity-v2-search {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .identity-v2 {
        padding: 24px 10px 42px;
    }

    .identity-v2-topbar {
        align-items: flex-start;
    }

    .identity-v2-main {
        border-radius: 16px;
    }

    .identity-v2-search,
    .identity-v2-results {
        padding: 16px 13px;
    }

    .identity-v2-form {
        flex-direction: column;
    }

        .identity-v2-form .btn {
            width: 100%;
        }

    .identity-v2-results-head {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* Lookup v2 layout lock: prevents legacy site rules from overriding the intended grid */
.identity-v2 {
    box-sizing: border-box !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

.identity-v2-shell {
    display: block !important;
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: 1180px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.identity-v2-main {
    width: 100% !important;
    max-width: 1180px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.identity-v2-search {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px) !important;
    align-items: center !important;
    gap: 32px !important;
}

.identity-v2-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
}

    .identity-v2-form .form-control {
        flex: 1 1 auto !important;
        width: auto !important;
    }

    .identity-v2-form .btn {
        flex: 0 0 112px !important;
        width: auto !important;
    }

@media (max-width: 800px) {
    .identity-v2-shell {
        width: calc(100% - 24px) !important;
    }

    .identity-v2-search {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

@media (max-width: 600px) {
    .identity-v2-form {
        flex-direction: column !important;
    }

        .identity-v2-form .btn {
            flex-basis: auto !important;
            width: 100% !important;
        }
}